Browse all Tools lessons.

showing All 228 lessons...

Chrome Devtools: Elements - Make Changes in Your Browser

Use the Device Toolbar to Emulate Different Screens

P

Chrome Devtools: Elements - Console Integration

P

Examine a Running App with the Chrome Debugger

P

Use Snippets to Store Behaviors in Chrome DevTools

P

Set Breakpoints for the Chrome Debugger

P

Unbundle your JavaScript with Source Maps in Chrome DevTools

P

Examine a Page's Source Resources with Chrome DevTools

Understand HTTP Status Codes with the Chrome Devtools

P

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

P

Test Slow Network Performance with the Chrome Devtools

P

Filter Requests in the Network Panel in Chrome Devtools

P

Analyze HTTP Requests and Responses with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

Practical Git: Copy remote repos to local machines with git clone

Practical Git: Capture code history snapshots with git add/commit/push

Practical Git: Create local repos with git init

Practical Git: View commit history with git log

Practical Git: Compare file changes with git diff

Practical Git: Clean up commits with git rebase

Practical Git: Remove unnecessary git tracking with .gitignore files

Practical Git: Show who changed a line last with git blame

Practical Git: Run scripts on git events with git hooks

Practical Git: Configure global settings with git config

Practical Git: Filter commit history with git log arguments

Practical Git: Diagnose which commit broke something with git bisect

Practical Git: Remove all unnecessary git tracking with a global .gitignore file

Practical Git: Format commit history with git log arguments

Practical Git: Navigate git command pager output with Unix less commands

Practical Git: Use semantic versioning with git tag

Practical Git: Resolve merge conflicts with git status

Practical Git: Save uncommitted changes with git stash

Practical Git: Sync branches with git merge

Practical Git: Isolate feature development with git branch

Practical Git: Sync local and remote repos with git pull

Practical Git: Document repos with README files

Import a non-ES6 module with Webpack

P

Ensure all source files are included in test coverage reports with Webpack

P

Use Karma for Unit Testing with Webpack

P

Use Chai assertions for tests in a Karma project

P

Polyfill Promises for Webpack 2

P

Initialize a Webpack Project with Karma for Testing

P

Expose modules to dependencies with Webpack

P

Add Code Coverage to tests in a Webpack project

P

Optimize React size and performance with Webpack production plugins

P

Grouping vendor files with the Webpack CommonsChunkPlugin

P

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

P

Tree shaking with Webpack 2

P

Validate your Webpack config with webpack-validator

P

Hashing with Webpack for long term caching

P
chrome-devtools tutorial about Chrome Devtools: Elements - Make Changes in Your Browser

Chrome Devtools: Elements - Make Changes in Your Browser

2:25 chrome-devtools

Learn how to use the Elements panel in chrome devtools to make structural changes to the DOM as it runs - you can explore what your site would look like with different elements and attribute values, all without polluting your source code.

chrome-devtools tutorial about Use the Device Toolbar to Emulate Different Screens

Use the Device Toolbar to Emulate Different Screens

3:53 chrome-devtools PRO

The Elements panel includes a tool to show you how your site will look across a variety of devices. This can be tremendously helpful when troubleshooting layout issues on specific hardware that you don’t have access to, as well as general-purpose response design. You can mock different screen resolutions and behaviors to help put you into your users’ shoes.

chrome-devtools tutorial about Chrome Devtools: Elements - Console Integration

Chrome Devtools: Elements - Console Integration

5:28 chrome-devtools PRO

The Element Inspector in Chrome DevTools offers powerful integration with the console - learn how to programmatically navigate your selected element, how to search through the history and use CSS selectors to control what you're looking at and how to quickly and easily listen for events as you debug your application.

chrome-devtools tutorial about Examine a Running App with the Chrome Debugger

Examine a Running App with the Chrome Debugger

10:06 chrome-devtools PRO

Use the Chrome Debugger to pause execution of your application as it runs to see what’s happening in slow-motion. The debugger is an advanced tool that allows you to examine every change that happens in your application so that you can understand how and why your application state evolves over time.

chrome-devtools tutorial about Use Snippets to Store Behaviors in Chrome DevTools

Use Snippets to Store Behaviors in Chrome DevTools

2:56 chrome-devtools PRO

Using the Snippets tab in the source devtool you can define and run arbitrary pieces of code in your browser against whatever website you’re looking at. This is a great way to store commonly used pieces of code that you rely on for debugging or customization.

chrome-devtools tutorial about Set Breakpoints for the Chrome Debugger

Set Breakpoints for the Chrome Debugger

6:53 chrome-devtools PRO

There are a variety of ways to trigger the debugger in Chrome's DevTools. You can set breakpoints on line numbers, break on XHR requests or DOM changes, break on specific events or even manually break by using the special debugger keyword in your code.

chrome-devtools tutorial about Unbundle your JavaScript with Source Maps in Chrome DevTools

Unbundle your JavaScript with Source Maps in Chrome DevTools

3:40 chrome-devtools PRO

Most of today’s websites use optimized, compiled, minified and obfuscated javascript and CSS. Examining this stuff here has some severely limited utility, which is why when developing we rely on sourcemaps. We’ll set up a webpack workflow that uses sourcemaps to show you how they can help your debugging!

chrome-devtools tutorial about Examine a Page's Source Resources with Chrome DevTools

Examine a Page's Source Resources with Chrome DevTools

2:47 chrome-devtools

Use the source navigator to browse through the various resources that your site has loaded from remote servers through the course of its session. Stylesheets, JavaScript files, media attachments and anything else that was requested as a part of your application’s lifecycle shows up here, and you can examine these resources in the context of your running app to see what exactly you’re rendering.

chrome-devtools tutorial about Understand HTTP Status Codes with the Chrome Devtools

Understand HTTP Status Codes with the Chrome Devtools

6:14 chrome-devtools PRO

Anyone who’s been around the net long enough has seen various HTTP error codes - things like “404 file not found!” or “500 internal server error”. But what are these, exactly? Let’s use the Network DevTool to better understand them. Learn the four major types of HTTP status code, and how to use the Network panel to inspect failed HTTP Requests.

chrome-devtools tutorial about Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

1:43 chrome-devtools PRO

Use the Overview tool in the Network devtool to see requests over time, and to constrain the tool to a given window of time so that you can focus on a subset of traffic.

chrome-devtools tutorial about Test Slow Network Performance with the Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

2:53 chrome-devtools PRO

Often when we’re developing we’re serving our content directly from our local machines, meaning that our network performance is incredibly fast. In production, though, conditions are often much less reliable. To replicate production conditions for testing and debugging it can be useful to throttle our local network speeds - you can do that here.

chrome-devtools tutorial about Filter Requests in the Network Panel in Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

3:44 chrome-devtools PRO

A large enough project will frequently flood the network devtool with content. Use the filter tool to restrict which HTTP requests you’re inspecting so that you don’t get overwhelmed.

chrome-devtools tutorial about Analyze HTTP Requests and Responses with Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

7:02 chrome-devtools

To understand the Network DevTool, you have to understand what HTTP is and how it works. Let’s use the Network DevTool to inspect an HTTP request and its corresponding response so that we can understand what the browser is doing.

chrome-devtools tutorial about Examine AJAX Requests with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

4:04 chrome-devtools

AJAX allows us to send requests to the server from our javascript applications, rather than allowing the browser to directly request declaratively specified resources. Under the hood, though, AJAX requests are still just HTTP requests - and that means we can use the Network Panel in Chrome’s DevTools to inspect our AJAX operations!

git tutorial about Practical Git: Copy remote repos to local machines with git clone

Practical Git: Copy remote repos to local machines with git clone

1:06 git

When working on code, we need a way to stay in sync across multiple devices and potentially multilpe team members. We also may need to work on our code offline. To do these things, we can "clone" a remote repo (from a git repo hosting service like GitHub or Bitbucket); git cloning means we make a copy of an existing remote repository onto our local machine with the git clone command. This command also automatically sets up the remote repo and branch tracking. Once our repo is cloned to our machine, we can work on the code in this directory offline or with teammates at the same time and then when we need to sync up we can push our code back to the central “remote" repo; we can also clone this same repo onto multiple machines and “pull” updates from the central “remote" repo whenever we want. In this lesson, we walk through how to do this.

git tutorial about Practical Git: Capture code history snapshots with git add/commit/push

Practical Git: Capture code history snapshots with git add/commit/push

3:42 git

When working with Git, the most common thing developers do is stage, commit, and push the changes they make to a code base - this "edit -> stage -> commit -> push" cycle is the main workflow when using Git; it lets developers make "snapshots" of changes to their codebase which they can share and revert back to. In this lesson, we make some changes to our codebase and then git add (stage), git commit (store in history), and git push (sync with our remote repository) those changes. We also use git status along the way to see an update of where our repository is at.

git tutorial about Practical Git: Create local repos with git init

Practical Git: Create local repos with git init

2:34 git

Getting started with Git requires you to add a .git folder to your project on your machine and then set up that folder to point to a remote repository. In this lesson, we walk through using git init and git remote to do this; we use GitHub for this remote repository as an example, but keep in mind that any Git repo hosting service will work.

git tutorial about Practical Git: View commit history with git log

Practical Git: View commit history with git log

0:40 git

It's often helpful to view the history of a code project; with Git, we can use the git log command to view all commits in our repo. This lets us view information about each commit like the commit id (for use in other git commands), author, author's email, and commit message. We can format the git log commit output to display more or less information or filter to specific commits using git log {arguments} which will be covered in the next few lessons of the course.

git tutorial about Practical Git: Compare file changes with git diff

Practical Git: Compare file changes with git diff

5:20 git

It can be helpful to see the changes between two sets of code; git diff lets us do this by comparing two Git references and outputting the differences between them. In this lesson, we show how to use git diff along with the --stat, --cached, HEAD, origin/master, file(s)/dir(s) options.

git tutorial about Practical Git: Clean up commits with git rebase

Practical Git: Clean up commits with git rebase

5:42 git

Sometimes its nice to clean up commits before merging them into your main code repo; in this lesson, we go over using git rebase to squash commits together and then rename the condensed commit message. We also talk about potential issues with rebasing and where to be careful.

git tutorial about Practical Git: Remove unnecessary git tracking with .gitignore files

Practical Git: Remove unnecessary git tracking with .gitignore files

2:36 git

Most projects have automatically generated files or folders from the operating system, applications, package managers etc. Usually, we don't want to include these types of things in our remote repos because they can clutter the git history/storage and are not applicable to everyone that works on the project. In this lesson, we show how to create a .gitignore file to ignore files and folders from being tracked by git.

git tutorial about Practical Git: Show who changed a line last with git blame

Practical Git: Show who changed a line last with git blame

1:34 git

When working on a file, we often want to know who made certain changes last; we can use git blame to see details about the last modification of each line in a file. In this lesson, we show and example of using git blame to see who made the last change on a line in a file, and then we use the output of git blame to use in other tools like git log to see the full context of why the change was made and what other parts of the code base were effected at the same time as the line from git blame.

git tutorial about Practical Git: Run scripts on git events with git hooks

Practical Git: Run scripts on git events with git hooks

2:58 git

Git lets us run scripts on git events like pre-commit, pre-rebase, post-commit, post-merge, post-checkout, etc. You can do this by adding an executable file to the ./git/hooks directory which has a name matching the git hook name. In this lesson, we walk through this process by setting up a pre-commit hook which runs our npm test and npm run lint npm scripts to ensure we don't have any failing tests or lint errors before committing.

git tutorial about Practical Git: Configure global settings with git config

Practical Git: Configure global settings with git config

2:33 git

You can set up global "git config" settings that apply to all git projects on your system. In this lesson, we review how the ./gitconfig file works. We then add our own git config settings: username, email, editor, and git aliases.

There are many other git config commands that can be used, but this lesson shows you pattern behind them all so you can view and edit your own settings.

git tutorial about Practical Git: Filter commit history with git log arguments

Practical Git: Filter commit history with git log arguments

6:49 git

In the last lesson, we learned how to format the git log output; in this lesson we will learn how to filter down to a specific set of commits. By default, git log shows every commit in a repo. We will walk through using a bunch of options to filter our git log commits to a more meaningful set (-n, --after, --before, --author, --grep, -S, -G, --no-merges, {ref}..{ref}, {files}). We will also show how all of the formatting and filtering options can be composed together to query exactly what you are looking for in your commit history.

git tutorial about Practical Git: Diagnose which commit broke something with git bisect

Practical Git: Diagnose which commit broke something with git bisect

2:49 git

Sometimes you find a bug in your project that has been around for a while without being noticed; it can be hard to track down where that bug was introduced and why just by searching through logs and diffs. Git has a slick tool called git bisect that can be used to find out which commit introduced problem in our code - it creates a binary search where the programmer can mark each search commit as good or bad; by the end of the bisect, Git shows you exactly which commit introduced the issue. In this lesson, we walk through an example of using git bisect from start to finish.

git tutorial about Practical Git: Remove all unnecessary git tracking with a global .gitignore file

Practical Git: Remove all unnecessary git tracking with a global .gitignore file

0:57 git

If you regularly use code editors, GUI tools or other programs that automatically create files and folders, you may want to set up a global .gitignore file which will apply to every repo on your machine. In this lesson, we show how to do that by creating a .gitignore_global file with the dotfiles in our ~/ root directory, and then link it to all git repos using our global .gitconfig.

git tutorial about Practical Git: Format commit history with git log arguments

Practical Git: Format commit history with git log arguments

2:00 git

When running the git log command, we can pass in options as arguments to format the data shown for each commit. In this lesson, we show how to use the oneline, decorate, graph, stat, and p options with git log.

git tutorial about Practical Git: Navigate git command pager output with Unix less commands

Practical Git: Navigate git command pager output with Unix less commands

2:03 git

When using a git command that can have a large amount of output (like git log, git diff, or git blame), Git opens the command output in our terminal "pager"; on most modern Unix-based systems, the default pager will be "less". Learning a few less commands will help us deal with this git command output that opens in the pager. In this lesson, we show some of the most useful of the less commands: q (quit), j (down), k (up), Ctrl f (forward), Ctrl b (backward), /{search} (search), and n/N (next/previous search result).

This lesson only covers some of the most critical less commands; there are more commands available. A good chunk of the commands (and "motions") of the Unix pagers are also used by vi (or vim) and other Unix programs.

git tutorial about Practical Git: Use semantic versioning with git tag

Practical Git: Use semantic versioning with git tag

2:14 git

Using git tag we can create references to commits that are immutable; this is usually used for making public releases. In this lesson, we show how to use git tag and go over common Semantic Versioning (AKA semver) conventions.

git tutorial about Practical Git: Resolve merge conflicts with git status

Practical Git: Resolve merge conflicts with git status

4:36 git

Sometimes when you run git merge (also during a git pull which runs a git merge) you get a merge "conflict"; this means that the same line(s) of code were changed locally as in new changes in the remote (most likely from another developer working on a related feature); git merge can automatically merge all other changes but when the same line is modified in two places, you have to fix the conflict manually. In this lesson, we show how a conflict happening from a git pull, and then how to fix it using git status to update the conflict markers in our file(s) with conflicts. You can use a graphical app for this, but this lesson will show you how to resolve conflicts directly from the command line and your code editor.

git tutorial about Practical Git: Save uncommitted changes with git stash

Practical Git: Save uncommitted changes with git stash

2:51 git

Sometimes when we are working we need a way to pause and switch gears to deal with something more critical; often when this happens we aren't ready to create a git commit; instead, we can use git stash to save our uncommitted changes locally, switch branches and fix the critical issue, switch back to our incomplete feature, and finally run git stash apply to get our unfinished changes back into our branch without affecting the rest of the codebase. In this lesson, we show a real world example of doing this with a critical bug.

git tutorial about Practical Git: Sync branches with git merge

Practical Git: Sync branches with git merge

2:27 git

Once a feature has been created inside of a branch, we can combine it back into the main master branch by using git merge. In this lesson, we go through a complete workflow of creating a feature branch and merging it back into the master branch.

git tutorial about Practical Git: Isolate feature development with git branch

Practical Git: Isolate feature development with git branch

2:19 git

When working on a project, it is much easier to work on features and bugs in isolation of the rest of the project. We can do this with git branches; a branch is a copy of the working directory, staging area, and project history; we create a branch, then check it out, then add commits. After our feature has been built, we can then merge it back into the main stable branch - which is master by default. In this lesson we go over how to create a branch with git branch {branch-name}, viewing all branches with git branch, switching branches with git checkout plus a few helper commands.

git tutorial about Practical Git: Sync local and remote repos with git pull

Practical Git: Sync local and remote repos with git pull

1:38 git

git pull lets us get the latest changes from our project's remote repo (most likely from co-workers or other developers working on our project) and merge (combine) them with our local code. It's kind of like Dropbox for code, but you tell git when you want it to get the latest changes from the remote when it is most convenient for you. In this lesson, we use git pull and discuss how it is a shortcut for running git fetch and git merge.

git tutorial about Practical Git: Document repos with README files

Practical Git: Document repos with README files

1:26 git

A Git repo is much more useful when you know what it is; it has become a convention to add a README markdown file to the root of your repos which explains what the project is as well as anything else you want to add. In this lesson we create a README.md file and push it to our remote repo for others to see.

webpack tutorial about Import a non-ES6 module with Webpack

Import a non-ES6 module with Webpack

4:20 webpack PRO

When you have a dependency that does not export itself properly, you can use the exports-loader to force it to export the pieces of the file that you need.

webpack tutorial about Ensure all source files are included in test coverage reports with Webpack

Ensure all source files are included in test coverage reports with Webpack

4:59 webpack PRO

If you’re only instrumenting the files in your project that are under test then your code coverage report will be misleading and it will be difficult for you to track or enforce improvements to application coverage over time. In this lesson we’ll learn how to ensure all source files are included in coverage reports and how to enforce a specific threshold so you can work toward improving application code coverage.

karma tutorial about Use Karma for Unit Testing with Webpack

Use Karma for Unit Testing with Webpack

4:53 karma PRO

When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to integrate webpack and Karma directly together. In this lesson we’ll see how to utilize the karma-webpack plugin and reuse our existing webpack configuration to preprocess our test files with webpack.

chai tutorial about Use Chai assertions for tests in a Karma project

Use Chai assertions for tests in a Karma project

1:17 chai PRO

Chai assertions work great with the Mocha testing framework. In this lesson we'll walk through out to install Chai and karma-chai so you can use the expect assertions in your tests.

webpack tutorial about Polyfill Promises for Webpack 2

Polyfill Promises for Webpack 2

1:59 webpack PRO

If you're going to use code splitting with Webpack 2, you'll need to make sure the browser has support for the ES6 Promise API. This means that if you are required to support an old browser, you need to provide a polyfill. Polyfilling is relatively trivial to do with Webpack, but because Webpack itself depends on this particular polyfill, you have to come up with another way of doing so. In this lesson, we'll see how we can use the polyfill.io service to automatically polyfill this API (and others) for us.

karma tutorial about Initialize a Webpack Project with Karma for Testing

Initialize a Webpack Project with Karma for Testing

5:22 karma PRO

There are several steps involved with setting up Karma to work on your webpack project. In this first step we'll initialize our karma configuration and setup our package.json scripts.

webpack tutorial about Expose modules to dependencies with Webpack

Expose modules to dependencies with Webpack

3:20 webpack PRO

When you have a dependency that has dependencies on global variables (like jQuery or lodash) or assumes that this is bound to window, you can use the imports-loader to provide those dependencies explicitly.

webpack tutorial about Add Code Coverage to tests in a Webpack project

Add Code Coverage to tests in a Webpack project

6:30 webpack PRO

How much of your code runs during unit testing is an extremely valuable metric to track. Utilizing code the karma-coverage plugin and babel-plugin-__coverage__ plugin, we can get an accurate measure of how well we’re covering the files that we are testing.

webpack tutorial about Optimize React size and performance with Webpack production plugins

Optimize React size and performance with Webpack production plugins

5:45 webpack PRO

You can fine tune several webpack plugins to make your bundle as small as it can be for your specific application. However there are a few things you can do for pretty much every application to make it smaller and run faster. In this lesson we’ll combine several webpack plugins to optimize things for a React application (this is also applicable for non-React applications as well).

webpack tutorial about Grouping vendor files with the Webpack CommonsChunkPlugin

Grouping vendor files with the Webpack CommonsChunkPlugin

5:36 webpack PRO

Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).

webpack tutorial about Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

4:11 webpack PRO

If you have a multi-page application (as opposed to a single page app), you’re likely sharing modules between these pages. By chunking these common modules into a single common bundle, you can leverage the browser cache much more powerfully. In this lesson we’ll use webpack’s CommonsChunkPlugin to easily share common modules between apps.

webpack tutorial about Tree shaking with Webpack 2

Tree shaking with Webpack 2

3:23 webpack PRO

The less code you can send to the browser, the better. The concept of tree shaking basically says that if you’re not using some piece of code, then exclude it from the final bundle, even when that piece of code is exported from a module. Because ES6 modules are statically analyzable, Webpack can determine which of your dependencies are used and which are not. In this lesson, see how to take advantage of this awesome feature in Webpack 2.

webpack tutorial about Validate your Webpack config with webpack-validator

Validate your Webpack config with webpack-validator

4:06 webpack PRO

It’s quite common to make a mistake while developing your webpack configuration. A simple typo can cost you hours of development time. With webpack-validator, you can save yourself a ton of time by validating that your webpack configuration is free of common mistakes.

Note: Webpack 2 now has validation baked in.

webpack tutorial about Hashing with Webpack for long term caching

Hashing with Webpack for long term caching

3:46 webpack PRO

Leveraging the browser cache is an important part of page load performance. A great way to utilize this cache is by versioning your resources. In this lesson, learn how to use Webpack’s hashing feature so you can take advantage of long term caching of your assets.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?