Tools

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

COURSES 10

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...

14 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

WATCH Elijah Manor's COURSE

How to Use npm Scripts as Your Build Tool

How to Use npm Scripts as Your Build Tool

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to buil...

21 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

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

Permission denied (publickey) when SSH Access to Amazon EC2 instance

There are two likely causes to the "Permission denied (public key)" error encountered with AWS EC2 instances: incorrect ssh keys and incorrect usernames. In this lesson, I'll address both and show ...

Will Button
2:53

Hosting a Static Website on Amazon S3

In this lesson, you will learn how to host a static website on Amazon S3. I will show you how to create the buckets, create the bucket policy to allow public access and point your own custom DNS na...

Will Button
4:19

WebStorm - Managing Imports

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

John Lindquist
2:27

WebStorm - Customizing the Built-in Terminal

WebStorm has a convenient built-in terminal which you can launch with a simple keyboard shortcut and customize to your heart's content. This video shows how to set up the terminal to launch Cygwin ...

John Lindquist
3:29

FEATURED TOOLS PLAYLISTS

Browse all Tools lessons.

showing All 135 lessons...

Combine Multiple SVGs into an SVG Sprite

Optimize SVGs for Better Performance using svgo

Basic accessibility testing

Create a bash script to replace a complex npm script

Pull out npm scripts into another file with p-s

Create a node script to replace a complex npm script

Run npm scripts with git hooks

Add comments to your npm scripts

List available npm scripts and support tab completion

Run npm scripts when files change with onchange

Make npm scripts cross-environment friendly

Use package.json variables in npm scripts

Change the level of console output when running npm scripts

Pass arguments to npm scripts

Pipe data from one npm script to another

Use custom config settings in your npm scripts

Use pre and post npm script lifecycle hooks

Run a set of similar npm scripts with a wildcard

Use a shorthand syntax for running multiple npm scripts with npm-run-all

Create a custom npm script

Run npm scripts in parallel

Run npm scripts in series

Run the basic npm scripts

Create a basic package.json file

Find matches excluding a pattern with grep

P

Search matching files by combining find and grep with xargs

P

Search with groups using grep

P

Match classes of characters using bracket expressions with grep

P

Specify line beginning and end in patterns using grep

P

Search for optional patterns with grep OR

P

Use grep's extended regular expressions to find complex patterns

P

Show context around matches using grep

P

Search for basic patterns using grep

P

Search the contents of a git repository with git grep

P

Use find to search for filename patterns

P

Search the contents of files using grep

Search directory contents recursively using grep

P

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

Set up egghead audio gear to record lessons

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

otherjs tutorial about Combine Multiple SVGs into an SVG Sprite

Combine Multiple SVGs into an SVG Sprite

1:31 otherjs

In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the svgo and svg-sprite-generator npm packages to automate the process of compressing the SVGs and creating the sprite.

Note: This lesson assumes you have npm installed.

otherjs tutorial about Optimize SVGs for Better Performance using svgo

Optimize SVGs for Better Performance using svgo

2:03 otherjs

Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using svgo in the command line.

For a full list of options and plugins available to use with svgo, check out their documentation.

Note: This lesson assumes you have npm installed.

otherjs tutorial about Basic accessibility testing

Basic accessibility testing

5:44 otherjs

Learn the basics of web accessibility testing using the keyboard, Web Developer Toolbar, aXe Firefox extension, and Lea Verou's Contrast Ratio tool. We'll look at how to get an overview of a webpage's accessibility, with special attention paid to solving color contrast issues.

For more on accessibility auditing, check out this article: https://marcysutton.com/how-i-audit-a-website-for-accessibility/

otherjs tutorial about Create a bash script to replace a complex npm script

Create a bash script to replace a complex npm script

2:55 otherjs

In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. This ends up simplifying your package.json file and abstracts the complexity into another file.

otherjs tutorial about Pull out npm scripts into another file with p-s

Pull out npm scripts into another file with p-s

5:52 otherjs

A technique you might use once you start having lots of npm scripts is to use a node package that allows you to define your scripts in an external package-scripts.js file. By pulling out your scripts it can help with organization, enable better comments, provide shortcuts, and more.

otherjs tutorial about Create a node script to replace a complex npm script

Create a node script to replace a complex npm script

7:04 otherjs

In this lesson we will look at pulling out complex npm script logic into an external JavaScript file. Instead of writing bash scripts you can leverage your JavaScript abilities to automate your build process. We’ll use some helper node modules such as shelljs, opn-cli, and babel-cli.

otherjs tutorial about Run npm scripts with git hooks

Run npm scripts with git hooks

1:56 otherjs

In this lesson we will look about how we can integrate with git hooks to help enforce a certain level of quality before you either commit your code or push to a remote repository.

otherjs tutorial about Add comments to your npm scripts

Add comments to your npm scripts

2:10 otherjs

The need for comments in your package.json file becomes desirable the more and more npm scripts you start to define. At first glance this might seem like a show stopper since JSON does not support comments, but there are ways around this limitation that we will discuss.

otherjs tutorial about List available npm scripts and support tab completion

List available npm scripts and support tab completion

1:52 otherjs

In this lesson we will look at different ways you can list the available npm scripts. Whether we want to pipe npm run through less or install an npm package such as completion or ntl, we have many options to quickly execute scripts with shell tab completion.

otherjs tutorial about Run npm scripts when files change with onchange

Run npm scripts when files change with onchange

2:06 otherjs

In this lesson we will look at how we can setup our npm scripts to execute when the file system has changed. Some common examples of this are automatically linting your code, running unit tests, or using a pre-processor for your CSS.

otherjs tutorial about Make npm scripts cross-environment friendly

Make npm scripts cross-environment friendly

5:41 otherjs

Unfortunately not all shell commands work across various environments. Two main techniques to support cross-environment scripts is to either use cross-platform commands or to use normalized node packages. In this lesson, we will look at updating an existing set of npm scripts and make sure they work on Mac OS X, Linux, and Windows.

otherjs tutorial about Use package.json variables in npm scripts

Use package.json variables in npm scripts

1:22 otherjs

In this lesson we will show that you can leverage values that you already have provided in your package.json file such as the name and version keys. You may want to use these in your npm scripts as you create folders and file names.

otherjs tutorial about Change the level of console output when running npm scripts

Change the level of console output when running npm scripts

0:48 otherjs

There are times when it is helpful for a npm script to have lots of logs when trying to debug a problem, but there are other times when you want to run a script silently. Thankfully there are a range of flags to control the log level used when running npm scripts.

otherjs tutorial about Pass arguments to npm scripts

Pass arguments to npm scripts

1:03 otherjs

Often times you’ll have variations that you’ll want to make to your npm scripts and repeating yourself is inefficient and verbose. Instead you can create a base script and pass arguments into it from another script.

otherjs tutorial about Pipe data from one npm script to another

Pipe data from one npm script to another

4:31 otherjs

In an effort to bypass saving temporary build files you can leverage piping and output redirection to streamline your build process. In addition using these technique can speed up your build process.

otherjs tutorial about Use custom config settings in your npm scripts

Use custom config settings in your npm scripts

3:00 otherjs

In addition to package.json level variables (such as name and version), you can have custom conf settings that can be used in your npm scripts. These config values can be overridden outside of the package.json by using the npm config set command if necessary.

otherjs tutorial about Use pre and post npm script lifecycle hooks

Use pre and post npm script lifecycle hooks

1:23 otherjs

For each npm script there is a pre and post version of the script that will be called if defined. This can be helpful when you want to enforce a validation check before running a script or inject a specific behavior when a script is executed.

otherjs tutorial about Run a set of similar npm scripts with a wildcard

Run a set of similar npm scripts with a wildcard

1:58 otherjs

In this lesson we will run a set of scripts that are grouped together with a wildcard using the npm-run-all node package. Using this technique can help you simplify and organize your scripts.

otherjs tutorial about Use a shorthand syntax for running multiple npm scripts with npm-run-all

Use a shorthand syntax for running multiple npm scripts with npm-run-all

1:38 otherjs

Running multiple scripts in series or in parallel can become very verbose. Using a tool such as npm-run-all can help reduce the amount of overhead you have to type in order to get the same behavior.

otherjs tutorial about Create a custom npm script

Create a custom npm script

1:17 otherjs

A lot of the power behind npm scripts is creating custom scripts that are outside the basic set that npm natively understands. In this lesson we will install the ESLint node package, create a new eslint npm script, briefly discuss about environment variables and how npm knows where to find your binary, and then execute our custom script from the command line.

otherjs tutorial about Run npm scripts in parallel

Run npm scripts in parallel

2:05 otherjs

In this lesson we will look at running several npm scripts in parallel. Sometimes you don’t need scripts to be run in series and switching them to run in parallel can increase performance since they are not blocking each other. At the end you need to add a wait command so they can be terminated with ^C

otherjs tutorial about Run npm scripts in series

Run npm scripts in series

0:59 otherjs

After creating several npm script it becomes useful to run multiple scripts back-to-back in series. This is a nice feature because you can enforce that one script needs to complete before starting another one.

otherjs tutorial about Run the basic npm scripts

Run the basic npm scripts

0:56 otherjs

In this lesson we will examine two common scripts (start and test) that npm natively understands. We’ll define these scripts for our existing repository and show how you can run the scripts from the terminal.

otherjs tutorial about Create a basic package.json file

Create a basic package.json file

1:56 otherjs

We will walk through how to create a simple package.json file manually as well as create a default package.json file through npm with npm init -f. Then we will look at where the npm scripts live and how to run the default script that was created.

otherjs tutorial about Find matches excluding a pattern with grep

Find matches excluding a pattern with grep

0:59 otherjs PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 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!

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