Tools

There are many moving parts when building professional web applications. These tools are here to help.

COURSES 9

WATCH Mike Hartington's COURSE

Learn to Use VIM

Learn to Use VIM

Vim is a classic text editor that saw its first incarnation in 1976. Used around the world across most platforms, the ability t...

10 lessons

WATCH Trevor Miller's COURSE

Practical Git for Everyday Professional Use

Practical Git for Everyday Professional Use

As modern web developers, we are likely to use git on a daily basis. It's a wonderful distributed version control system, and w...

22 lessons

WATCH Marcy Sutton's COURSE

Start Building Accessible Web Applications Today

Start Building Accessible Web Applications Today

Accessibility (or a11y) is an important but often neglected in the world of web development. Many developers find themselves co...

13 lessons

WATCH mykola bilokonsky's COURSE

Debug the DOM in Chrome with the Devtools Elements Panel

Debug the DOM in Chrome with the Devtools Elements Panel

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on t...

7 lessons

WATCH mykola bilokonsky's COURSE

Debug JavaScript in Chrome with DevTool Sources

Debug JavaScript in Chrome with DevTool Sources

This course examines the Sources panel in the Chrome DevTools, which allows you to see what files are responsible for the vario...

5 lessons

WATCH mykola bilokonsky's COURSE

Debug HTTP with Chrome DevTools Network Panel

Debug HTTP with Chrome DevTools Network Panel

This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various proper...

6 lessons

WATCH Trevor Miller's COURSE

Record Badass Screencasts for egghead.io

Record Badass Screencasts for egghead.io

This is the video companion to the egghead.io Instructor Guide. Screencasting is hard! There are virtually infinite ways to pr...

7 lessons

WATCH mykola bilokonsky's COURSE

Deploy Web Apps with Zeit Now

Deploy Web Apps with Zeit Now

Zeit’s mission statement is to ‘Make Cloud computing as easy and accessible as Mobile computing.’ To that end, they’ve released...

8 lessons

WATCH Bonnie Eisenman's COURSE

Use Grep for Fast Search from the Command Line

Use Grep for Fast Search from the Command Line

CMD+F in your text editor can only get you so far! In this course, we will learn to use grep and find, two powerful command-lin...

13 lessons

Use git add --patch for better commit history and mitigating bugs

Let's split our changes into separate commits. We'll be able to check over our changes before staging them all from the terminal. Then, we'll see the positive effect it has on our commit history.

Rory Smith
1:49

Download and Remove Docker Images

Learn the basics of downloading and pulling Docker images from Docker Hub. Learn the difference between default tags and version specific tags. Also learn how to display all images, and different w...

Mark Shust
1:15

Run Short-Lived Docker Containers

Learn the benefits of running one-off, short-lived Docker containers. Short-Lived containers are useful to execute one-line commands or setup scheduled tasks. We'll demonstrate setting up a cronjob...

Mark Shust
1:56

Run, Stop and Remove Docker Containers

In this lesson, we'll find out the basics of running Docker containers. We'll go over how to download images from Docker Hub, what happens when you stop containers, how to restart a container once ...

Mark Shust
1:33

Manage Data within Docker Volumes

Learn about the concepts of managing data within Docker volumes, including all of the commands to create and manage volumes. We'll demonstrate how to mount a Docker volume to one or many containers...

Mark Shust
4:02

Configuring AWS Elastic Load Balancers

In this lesson, you will learn how to setup an Elastic Load Balancer for your nodejs servers. You will also learn how to configure the load balancer with servers in different availability zones, us...

Will Button
5:47

Scheduling Events with AWS Lambda (a.k.a. Lambda cron jobs)

Learn how to create AWS Lambda functions that execute on a scheduled interval, much like a cron job would. In this lesson we will create a Lambda function that checks for a string of text on a webs...

Will Button
5:35

Installing the AWS CLI on OS X and Linux

Installing the AWS CLI on your local workstation may be one of the biggest boosts to productivity you can make if you use AWS often. Almost all AWS features are available via the CLI allowing you t...

Will Button
4:00

Git: How to change the most recent commit with `--amend`

If you make a mistake with a commit and need to make changes or you'd like to update the commit message of the most recent comment, you can do this with the git commit --amend command.

Kent C. Dodds
1:49

Speed Up Your Website by Using AWS CloudFront

In this lesson, you will learn how to improve your website performance by using the AWS CloudFront service. I show you how to setup CloudFront, properly configure the S3 settings, enable logging, a...

Will Button
4:08

Using jq to parse the Star Wars API

jq is a lightweight and flexible command-line JSON processor. It is extremely useful for processing data from APIs to better understand the data your code will be consuming, before you write the co...

Will Button
2:57

WebStorm - Sharing a Gist

You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gis...

John Lindquist
1:28

FEATURED TOOLS PLAYLISTS

Browse all Tools lessons.

showing All 115 lessons...

Find matches excluding a pattern with grep

Search matching files by combining find and grep with xargs

Search with groups using grep

Match classes of characters using bracket expressions with grep

Specify line beginning and end in patterns using grep

Search for optional patterns with grep OR

Use grep's extended regular expressions to find complex patterns

Show context around matches using grep

Search for basic patterns using grep

Search the contents of a git repository with git grep

Use find to search for filename patterns

Search the contents of files using grep

Search directory contents recursively using grep

Use git add --patch for better commit history and mitigating bugs

Set up egghead audio gear to record lessons

Download and Remove Docker Images

Run Short-Lived Docker Containers

Run, Stop and Remove Docker Containers

Manage Data within Docker Volumes

Testing for Accessibility with the NVDA Screen Reader on Windows

Use a hosted database with Zeit’s Now

Configure secrets and environment variables with Zeit’s Now

View source on your remote Zeit Now server

Setup a custom domain name with Zeit’s Now

Use Zeit’s Now to point a custom name to a specific deployment

Deploy a Docker project with Zeit’s Now

Deploy static assets with Zeit’s Now

Deploy a Node project with Zeit’s Now

Review final screencast result

Edit a screencast for publication

Prepare the computer desktop for screencast recording

Capture video and audio in “bite-sized” chunks

Verify my gear is properly set up

Create a self-contained code focused screencast

Using the Voiceover screen reader to test for accessibility

Chrome Devtools: Elements - Debug with Style!

Chrome Devtools: Elements - Inspect Elements vs View Source

Chrome Devtools: Elements - Make Changes in Your Browser

Use the Device Toolbar to Emulate Different Screens

Chrome Devtools: Elements - Console Integration

Examine a Running App with the Chrome Debugger

Use Snippets to Store Behaviors in Chrome DevTools

Set Breakpoints for the Chrome Debugger

Unbundle your JavaScript with Source Maps in Chrome DevTools

Examine a Page's Source Resources with Chrome DevTools

Understand HTTP Status Codes with the Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

otherjs tutorial about Find matches excluding a pattern with grep

Find matches excluding a pattern with grep

0:59 otherjs

What happens when you want to find things that don't contain a pattern? The -v flag lets you use grep in inverse mode. We'll use grep -v against find's output to exclude files in node_modules.

otherjs tutorial about Search matching files by combining find and grep with xargs

Search matching files by combining find and grep with xargs

2:20 otherjs

Learn to use the xargs Unix command to combine find and grep. First we can use find to identify which files we want to search; then we can use xargs to tell grep which files to search through.

otherjs tutorial about Search with groups using grep

Search with groups using grep

2:12 otherjs

By grouping your searches with parentheses, you can create even more complex searches. Grouping lets you separate out different parts of your regular expression, and apply special characters like +, ?, and * to groups of search terms.

otherjs tutorial about Match classes of characters using bracket expressions with grep

Match classes of characters using bracket expressions with grep

2:21 otherjs

You can describe classes of characters using bracket expressions. We'll use expressions such as [a-zA-Z] and [0-9] to search for alphabetic and numeric characters with grep.

otherjs tutorial about Specify line beginning and end in patterns using grep

Specify line beginning and end in patterns using grep

1:18 otherjs

Learn to use the special anchor characters ^ and $ to indicate the beginning and end of lines when writing regular expressions for grep. These line anchors are part of basic regular expressions in grep, so you don't need to escape them.

otherjs tutorial about Search for optional patterns with grep OR

Search for optional patterns with grep OR

1:07 otherjs

Describe optional patterns with grep OR using the vertical bar character |. By using the | special character, you can write either-or style patterns. In this lesson we'll look for matches on "grey" or "gray". Like the + and ? characters, the | character is part of extended regular expressions with grep, so you'll either need to escape it with a backslash, or use the -E flag.

otherjs tutorial about Use grep's extended regular expressions to find complex patterns

Use grep's extended regular expressions to find complex patterns

2:35 otherjs

Learn to use grep's extended regular expressions to describe more complex patterns. The ? and + special characters describe optional patterns. The ? character matches zero or one instance of the preceding term, and the + character matches one or more instances of the preceding term. To use these characters, you'll need to either escape them with backslashes or turn on extended regular expressions with the -E flag.

otherjs tutorial about Show context around matches using grep

Show context around matches using grep

1:59 otherjs

By default, grep displays the file path and the line where a match is found. Learn to use the flags -A, -B, -C, and -n to get more context, and view line numbers as well as the lines surrounding a pattern match.

otherjs tutorial about Search for basic patterns using grep

Search for basic patterns using grep

2:09 otherjs

By using wildcards and glob patterns with the special characters . and *, you can create regular expressions that describe what kind of text you're looking for, instead of just plaintext strings.

otherjs tutorial about Search the contents of a git repository with git grep

Search the contents of a git repository with git grep

1:46 otherjs

Learn to use git grep to only search through the tracked files in a git repo. This is especially useful when you want to exclude build artifacts or locally installed dependencies, such as webpack bundles or the node_modules directory. You'll also note that git grep is automatically colorized - we'll see how to get the same coloring effect with grep --color.

otherjs tutorial about Use find to search for filename patterns

Use find to search for filename patterns

1:33 otherjs

Learn how to use find to identify filenames matching specified patterns. We'll use find to identify all .jsx files in a directory, or all test files in a directory.

otherjs tutorial about Search the contents of files using grep

Search the contents of files using grep

2:15 otherjs

Learn the basic syntax for using grep to search the contents of a single file or files. It's like CMD+F, but better! You'll be able to quickly see all matching results in a file.

otherjs tutorial about Search directory contents recursively using grep

Search directory contents recursively using grep

1:41 otherjs

Sometimes you'll be looking for a string, but won't know which file it's in; or you'll want to find all usages of it within a directory. Learn how to use grep -r to recursively search all the files in a directory.

otherjs tutorial about Use git add --patch for better commit history and mitigating bugs

Use git add --patch for better commit history and mitigating bugs

1:49 otherjs

Let's split our changes into separate commits. We'll be able to check over our changes before staging them all from the terminal. Then, we'll see the positive effect it has on our commit history.

otherjs tutorial about Set up egghead audio gear to record lessons

Set up egghead audio gear to record lessons

1:41 otherjs

Good audio starts with quality gear. You can definitely record screencasts using the built-in microphone on your laptop, but we've found that our users want to have consistent high-quality audio.

We want you to sound amazing! Because you are.

To make this happen, we send each instructor professional grade audio recording equipment.

Once you've created a draft lesson that is almost ready to be published, we will ship you a case stuffed full of audio recording toys that will have you sounding awesome in no time.

otherjs tutorial about Download and Remove Docker Images

Download and Remove Docker Images

1:15 otherjs

Learn the basics of downloading and pulling Docker images from Docker Hub. Learn the difference between default tags and version specific tags. Also learn how to display all images, and different ways to remove images.

otherjs tutorial about Run Short-Lived Docker Containers

Run Short-Lived Docker Containers

1:56 otherjs

Learn the benefits of running one-off, short-lived Docker containers. Short-Lived containers are useful to execute one-line commands or setup scheduled tasks. We'll demonstrate setting up a cronjob from the host machine to tap into the benefits of running automated, timed scripts with Docker.

otherjs tutorial about Run, Stop and Remove Docker Containers

Run, Stop and Remove Docker Containers

1:33 otherjs

In this lesson, we'll find out the basics of running Docker containers. We'll go over how to download images from Docker Hub, what happens when you stop containers, how to restart a container once it's been stopped, and also how to remove containers.

otherjs tutorial about Manage Data within Docker Volumes

Manage Data within Docker Volumes

4:02 otherjs

Learn about the concepts of managing data within Docker volumes, including all of the commands to create and manage volumes. We'll demonstrate how to mount a Docker volume to one or many containers by creating and mounting a volume to an Nginx proxy, and then verify the output with curl. You'll also see how changes to files within volumes of one container propagate to other containers with the same volume mounted, and learn various commands to inspect Docker volumes.

otherjs tutorial about Testing for Accessibility with the NVDA Screen Reader on Windows

Testing for Accessibility with the NVDA Screen Reader on Windows

5:04 otherjs

NVDA is a popular open source screen reader on Windows that works well with Firefox. It's similar to JAWS, another popular Windows screen reader that works best with IE. But NVDA has no licensing fee plus an open bug tracker, making it great for users as well as developer testing.

In this lesson, you'll learn how to browse a webpage using NVDA's keyboard shortcuts, including headings navigation, skip links, and the Elements List. You'll also learn a bit about Forms Mode and how it impacts screen reader navigation. For more tips, check out the resources below.

Resources

Installing NVDA

If you're on a Windows machine, you can install NVDA directly. If you're on a Mac or Linux, you could install a Windows virtual machine:

otherjs tutorial about Use a hosted database with Zeit’s Now

Use a hosted database with Zeit’s Now

10:50 otherjs

If you need to persist data using now, it’s recommended that you use a hosted database service. In this lesson we'll create a new, free MongoDB database on http://mlab.com and wire it up to use with our node.js app running on Zeit's now hosting service.

otherjs tutorial about Configure secrets and environment variables with Zeit’s Now

Configure secrets and environment variables with Zeit’s Now

7:45 otherjs

Often your project will require some secret keys or tokens - for instance, API keys or database authentication information. Learn how to safely and easily deploy secrets to now, and how to expose them as environment variables that your applications can load without making them public to the world.

otherjs tutorial about View source on your remote Zeit Now server

View source on your remote Zeit Now server

4:49 otherjs

Zeit allows you to expose the inner working’s of your deployment’s source code to aid in debugging or understanding how your code works. Learn how to configure and use this powerful window into your live behavior.

otherjs tutorial about Setup a custom domain name with Zeit’s Now

Setup a custom domain name with Zeit’s Now

5:00 otherjs

Using now’s alias command you can point your own domain name to any now deployment. In this lesson I'll actually buy a new domain name and configure it to work with now, showing you every step along the way.

otherjs tutorial about Use Zeit’s Now to point a custom name to a specific deployment

Use Zeit’s Now to point a custom name to a specific deployment

3:45 otherjs

Because now deploys are immutable, you can’t push changes to a running instance - you just push a new instance, which means you get a new URL. But doesn’t that mean your URL is always changing? How do you share a link to your application? By using now alias to point a custom name to a specific deployment.

otherjs tutorial about Deploy a Docker project with Zeit’s Now

Deploy a Docker project with Zeit’s Now

3:06 otherjs

Use Zeit’s now to deploy a docker container to the cloud quickly and easily. We will see that the process is exactly the same as deploying a Node project. This lesson will also show how log information is displayed on the generated url by Now while the app is being deployed.

otherjs tutorial about Deploy static assets with Zeit’s Now

Deploy static assets with Zeit’s Now

4:00 otherjs

Use Zeit’s now to quickly and easily share static files by making them accessible to anyone with the URL.

otherjs tutorial about Deploy a Node project with Zeit’s Now

Deploy a Node project with Zeit’s Now

5:34 otherjs

Use Zeit’s now to deploy a node application from your local machine to a remote cloud service in moments.

otherjs tutorial about Review final screencast result

Review final screencast result

1:23 otherjs

Our lesson has been planned, recorded, and edited. It’s ready to be uploaded to egghead.io! Victory dance. Let’s see how it all turned out.

otherjs tutorial about Edit a screencast for publication

Edit a screencast for publication

3:00 otherjs

“We’ll just do it in post!”

This is always a phrase to be uttered with caution, but armed with just a couple of handy tools, we can to a lot of magic in post production even if we aren’t Hollywood editors. We will learn about the screencast editors best friend Ripple Delete. Then we will fine tune the recording removing any ummmm's or long running processes like installs or builds. Finally, we will make sure everything looks and sounds good and save it for publication!

otherjs tutorial about Prepare the computer desktop for screencast recording

Prepare the computer desktop for screencast recording

3:05 otherjs

For accessibility and quality, we capture our screens with maximum code and minimal distractions. Armed with a couple of tools and techniques we can create a desktop that focuses on the lessons. The resolution, font size, window layout, and menu bar management will all be wrangled into shape.

otherjs tutorial about Capture video and audio in “bite-sized” chunks

Capture video and audio in “bite-sized” chunks

3:33 otherjs

You aren’t the “1-take dizzle”. Instead of trying to get an entire lesson captured in a single capture, consider capturing audio and video in chunks. With our without a script, capturing in chunks makes it easy to redo parts and stay on-topic. You might see a repeating pattern of typing a bit of code > stop and explain as needed > typing a bit of code > repeat.

otherjs tutorial about Verify my gear is properly set up

Verify my gear is properly set up

0:40 otherjs

Setting up audio gear can be tricky. It goes from fairly straightforward “computer mic” to very complex “NPR sound booth”. We are striving for something in between. Most egghead recording gear uses a professional grade microphone, connected to a USB interface with an XLR cable, and finally, the USB interface connects to the computer. Regardless of the specific, we need to verify that it sounds good! In this lesson we show how to keep your audio volume input levels as high in the green as possible without turning red (clipping).

otherjs tutorial about Create a self-contained code focused screencast

Create a self-contained code focused screencast

4:00 otherjs

egghead.io lessons are example driven. We don’t rely on slide decks, instead we focus on code. This code first approach is how we explain things to students. Armed with a lesson title and summary that describes the goals, we will avoid polite introductions and jump right into showing how to make code.

otherjs tutorial about Using the Voiceover screen reader to test for accessibility

Using the Voiceover screen reader to test for accessibility

9:39 otherjs

Did you know every Mac comes with a fantastic screen reader built-in? Learn the basics for operating Voiceover with Safari, including common key commands, the web rotor, and the help menu. We'll also set up keyboard tabbing in Safari and OSX's System Preferences, two requirements for accessibility testing that occasionally trip up users. In a future lesson, we'll compare Voiceover to Windows screen readers, since they work quite differently.

Resources

otherjs tutorial about Chrome Devtools: Elements - Debug with Style!

Chrome Devtools: Elements - Debug with Style!

6:25 otherjs

Learn to use the Style panel within the Element Inspector to examine and tweak the CSS rules applied to your application as it runs.

otherjs tutorial about Chrome Devtools: Elements - Inspect Elements vs View Source

Chrome Devtools: Elements - Inspect Elements vs View Source

2:55 otherjs

Learn how to use the Inspect Elements panel in Chrome DevTools and how it differs from viewing the source of the HTML you're looking at.

otherjs tutorial about Chrome Devtools: Elements - Make Changes in Your Browser

Chrome Devtools: Elements - Make Changes in Your Browser

2:25 otherjs

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.

otherjs tutorial about Use the Device Toolbar to Emulate Different Screens

Use the Device Toolbar to Emulate Different Screens

3:53 otherjs

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.

otherjs tutorial about Chrome Devtools: Elements - Console Integration

Chrome Devtools: Elements - Console Integration

5:28 otherjs

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.

otherjs tutorial about Examine a Running App with the Chrome Debugger

Examine a Running App with the Chrome Debugger

10:06 otherjs

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.

otherjs tutorial about Use Snippets to Store Behaviors in Chrome DevTools

Use Snippets to Store Behaviors in Chrome DevTools

2:56 otherjs

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.

otherjs tutorial about Set Breakpoints for the Chrome Debugger

Set Breakpoints for the Chrome Debugger

6:53 otherjs

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.

otherjs tutorial about Unbundle your JavaScript with Source Maps in Chrome DevTools

Unbundle your JavaScript with Source Maps in Chrome DevTools

3:40 otherjs

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!

otherjs tutorial about Examine a Page's Source Resources with Chrome DevTools

Examine a Page's Source Resources with Chrome DevTools

2:47 otherjs

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.

otherjs tutorial about Understand HTTP Status Codes with the Chrome Devtools

Understand HTTP Status Codes with the Chrome Devtools

6:14 otherjs

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.

otherjs tutorial about Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

1:43 otherjs

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.

otherjs tutorial about Test Slow Network Performance with the Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

2:53 otherjs

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.

otherjs tutorial about Filter Requests in the Network Panel in Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

3:44 otherjs

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.

otherjs tutorial about Analyze HTTP Requests and Responses with Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

7:02 otherjs

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.

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