Tools

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

COURSES 12

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

WATCH Pete Johanson's COURSE

Understand the Basics of HTTP

Understand the Basics of HTTP

In this course, we will learn the fundamentals of the Hypertext Transport Protocol (HTTP) by exploring several popular HTTP API...

12 lessons

WATCH Bonnie Eisenman's COURSE

Wrangle your terminal with tmux

Wrangle your terminal with tmux

Learn to manage your terminal sessions and work more effectively from the command line using tmux. If you use the command line ...

11 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 158 lessons...

Handle history in tmux sessions

Share a tmux session for pair programming with ssh

Customize tmux with tmux.conf

Reuse terminal workspaces using tmux sessions

Automate your workflow using tmux scripts

Copy and paste text from a tmux session

Enable mouse mode in tmux

Create collections of panes using tmux windows

Zoom and resize to view a particular pane within tmux

Organize your terminal using tmux panes

Manage terminal workspaces using session naming

Understand 5xx Server Error Response Codes

Use HTTP PATCH Method

Understand HTTP 4xx Client Error Response Codes

Use HTTP OPTIONS Method

Use HTTP DELETE Method

Use HTTP POST Method

Examine HTTP Message Bodies

Understand HTTP 3xx Redirection Response Codes

Understand 2xx HTTP Status Code Responses

Use HTTP GET & HEAD Methods

Understand what an HTTP Response is

Understand what an HTTP Request is

Combine Multiple SVGs into an SVG Sprite

P

Optimize SVGs for Better Performance using svgo

P

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
otherjs tutorial about Handle history in tmux sessions

Handle history in tmux sessions

3:11 otherjs

In this lesson, we'll look at how to manage your history between tmux sessions, and ensure that your setup preserves your bash history between multiple windows. By adding a special PROMPT_COMMAND to your .bashrc, you can update and reload your history after every command, regardless of if you're in a different session, window, or tab.

otherjs tutorial about Share a tmux session for pair programming with ssh

Share a tmux session for pair programming with ssh

1:52 otherjs

By using ssh, you can share a tmux session, making pair programming much easier. We'll learn how to share a tmux session with another user.

otherjs tutorial about Customize tmux with tmux.conf

Customize tmux with tmux.conf

3:52 otherjs

You can modify tmux's behavior with your tmux configuration file, .tmux.conf. You can use your tmux config to change color schemes, set custom keybindings, set defaults, modify the status bar, and more. In this lesson, we'll change some of the default color options as well as modify the prefix key.

otherjs tutorial about Reuse terminal workspaces using tmux sessions

Reuse terminal workspaces using tmux sessions

1:54 otherjs

In this lesson, we'll learn how to detach from a running tmux session and leave it running in the background. Then, we can re-attach to it later.

We'll cover:
- How to exit a session by killing all active panes
- Detaching explicitly with C-b d
- Detaching a specific session with C-b D
- Viewing all running tmux sessions using tmux ls
- Reattaching with tmux attach -t

otherjs tutorial about Automate your workflow using tmux scripts

Automate your workflow using tmux scripts

3:53 otherjs

Do you have a standard workflow that involves setting up a specific tmux layout, or running certain commands? By writing tmux scripts, you can automate your tedious daily setup, while simultaneously documenting it for yourself. We'll cover the tmux command equivalents of common key bindings and write some simple, useful scripts.

otherjs tutorial about Copy and paste text from a tmux session

Copy and paste text from a tmux session

3:13 otherjs

One non-obvious, but extremely useful, feature in tmux is copy-pasting text between panes. This also allows you to scroll back in a tmux sessoin. We'll cover how to use copy and paste in tmux using C-b [ and C-b ], for both emacs- and vim-style keybindings.

otherjs tutorial about Enable mouse mode in tmux

Enable mouse mode in tmux

2:22 otherjs

We'll learn how to use mouse mode in tmux, including enable mouse control for resizing, scrolling and selecting panes. We'll also set keybindings in our tmux configuration to control mouse mode.

otherjs tutorial about Create collections of panes using tmux windows

Create collections of panes using tmux windows

1:19 otherjs

In tmux, a window is a collection of panes. Creating multiple windows is a great way to organize your workspace. In this lesson, we'll cover:

  • How to create a new window within a tmux session, using C-b c
  • Navigating between windows with C-b n and C-b p
otherjs tutorial about Zoom and resize to view a particular pane within tmux

Zoom and resize to view a particular pane within tmux

1:39 otherjs

Sometimes you'll want to zoom in on a specific pane within a tmux window. We'll learn to use C-b z to temporarily zoom in on one pane, as well as how to resize your panes with C-b -L, -R, -U, and -D.

otherjs tutorial about Organize your terminal using tmux panes

Organize your terminal using tmux panes

2:14 otherjs

Learn to organize your workspace using tmux. We'll create a new tmux session and learn how to create and navigate panes within a tmux window.

We'll cover:

  • How to create new panes via vertical splits with C-b %
  • How to create new panes via horizontal splits with C-b "
  • Navigating between panes with C-b and arrow keys
  • Closing panes with exit or Ctrl-d
  • Viewing available commands with C-b ?
otherjs tutorial about Manage terminal workspaces using session naming

Manage terminal workspaces using session naming

1:33 otherjs

It's a lot easier to manage your tmux session when they have sensible names. We'll cover:

  • How to create a new, named tmux session with tmux new -s
  • Rename an existing tmux session using tmux rename-session -t
  • Renaming sessions with C-b $
  • Listing sessions with C-b s
otherjs tutorial about Understand 5xx Server Error Response Codes

Understand 5xx Server Error Response Codes

1:17 otherjs

The 5xx family of status codes are used in HTTP responses to inform the client that the server experienced an error. The status codes in this family are intended to indicate server or network errors that do not pertaining to a problem with client or the client’s request. For example, a response with a 503 Service Unavailable status code is unlikely to be resolved by resubmitting the request with different content type or additional headers. We will explore the available server error status codes, and what additional information they convey.

otherjs tutorial about Use HTTP PATCH Method

Use HTTP PATCH Method

2:23 otherjs

The HTTP PATCH method is used to make modifications to existing resources. In particular, it is designed for "partial updates", as opposed to replacing an entire resource using the HTTP PUT method. Although certain HTTP PATCH requests may behave idempotently, this is not true of all possible PATCH requests, so this request method is not idempotent, nor considered safe. The request body of a PATCH request may be simple application/json, or a more specialized type, such as application/json-patch+json.

otherjs tutorial about Understand HTTP 4xx Client Error Response Codes

Understand HTTP 4xx Client Error Response Codes

2:59 otherjs

The 4xx family of status codes are used in HTTP responses to inform the client/browser of an error relating to the user’s request. The status codes in this family are intended to indicate a problem that should be possible to fix or remedy by the user or developer. For example, a 401 Unauthorized status code lets the user/developer know they need to provide authorization information with their request; should they re-submit the request with the additional authorization header, the request may succeed. We will explore the available client error status codes, and what additional information they convey.

otherjs tutorial about Use HTTP OPTIONS Method

Use HTTP OPTIONS Method

1:42 otherjs

The HTTP OPTIONS method is used to request information about the communication options available for the target resource. The response may include an Allow header indicating allowed HTTP methods on the resource, or various Cross Origin Resource Sharing headers. The HTTP OPTIONS method is both safe and idempotent, as it is intended only for use in querying information about ways to interact with a resource.

otherjs tutorial about Use HTTP DELETE Method

Use HTTP DELETE Method

2:53 otherjs

The HTTP DELETE method is used to request that the server perform a delete operation on the specified resource with resource specific semantics. Behind the scenes, the delete operation may result in a removal of a file from the filesystem, or an update to the database to reflect the change. Because multiple requests to delete the same resource has the same effect as a single one, the DELETE method is considered ‘idempotent’, but not considered safe.

otherjs tutorial about Use HTTP POST Method

Use HTTP POST Method

1:53 otherjs

The HTTP POST method is used to request the resource process the included request message body representation according to resource specific semantics. HTTP POST is loosely defined by definition, and can be used in many different scenarios, such as creating a new resource based on the request representation, appending data to an existing representation, or generic processing of an HTML form submission. Due to the nature of POST performing arbitrary resource specific processing, it is considered neither ‘safe’, nor ‘idempotent’.

otherjs tutorial about Examine HTTP Message Bodies

Examine HTTP Message Bodies

4:16 otherjs

The body of an HTTP request or response can serve many functions, from including the input data to a POST request, to returning varied representations of a resource in response to a GET request. This lesson details how message bodies are handled in requests and responses, and the associated HTTP headers that provide metadata about the included message body.

otherjs tutorial about Understand HTTP 3xx Redirection Response Codes

Understand HTTP 3xx Redirection Response Codes

3:34 otherjs

The 3xx family of status codes are used in HTTP responses to inform the client/browser should look somewhere else for the requested resource. Most often, this is used to indicate a resource is temporarily or permanently found at a new URL, but it may also be used to inform the client that the client’s own cache is the other location where the requested resource can be found. We will explore the available redirection status codes, and what additional information they convey.

otherjs tutorial about Understand 2xx HTTP Status Code Responses

Understand 2xx HTTP Status Code Responses

3:43 otherjs

The 2xx family of status codes are used in HTTP responses to indicate success. Beyond the generic 200 OK status code, there are a set of more specific success status codes that provide additional context or details about the specific nature of the successful request/response. We will explore the available success status codes, and what additional information they convey.

otherjs tutorial about Use HTTP GET & HEAD Methods

Use HTTP GET & HEAD Methods

1:56 otherjs

The HTTP GET & HEAD methods are used to retrieve information about a resource. The GET method will retrieve the metadata about the resource, encoded in the HTTP headers, as well as a representation of the resource itself in the message body (e.g. a JSON document with fields that describe a user). The HEAD method behaves like GET, but only retrieves the status and headers; this can be useful when you need some metadata about a resource (e.g. the Last-Modification time), but don't want to waste time or bandwidth fetch the resource itself in the message body. Finally, we discuss the idempotent and safe natures of these HTTP methods.

otherjs tutorial about Understand what an HTTP Response is

Understand what an HTTP Response is

2:17 otherjs

Let's look at several HTTP responses to learn the basic structure of these messages, and how the various elements communicate important information from the API service to the client/browser.

otherjs tutorial about Understand what an HTTP Request is

Understand what an HTTP Request is

3:28 otherjs

Let's look at several HTTP requests to learn the basic structure of these messages, and how the various elements communicate important information from the client/browser to the API service.
Follow the instructions at HTTPie to download the CLI tool and follow along.

otherjs tutorial about Combine Multiple SVGs into an SVG Sprite

Combine Multiple SVGs into an SVG Sprite

1:31 otherjs PRO

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 PRO

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.

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