Browse all Tools lessons.

showing All 228 lessons...

Add comments to your npm scripts

P

List available npm scripts and support tab completion

P

Run npm scripts when files change with onchange

P

Make npm scripts cross-environment friendly

P

Use package.json variables in npm scripts

P

Change the level of console output when running npm scripts

P

Pass arguments to npm scripts

P

Pipe data from one npm script to another

P

Use custom config settings in your npm scripts

P

Use pre and post npm script lifecycle hooks

P

Run a set of similar npm scripts with a wildcard

P

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

P

Create a custom npm script

P

Run npm scripts in parallel

P

Run npm scripts in series

P

Run the basic npm scripts

P

Create a basic package.json file

P

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

P

Set up egghead audio gear to record lessons

P

Testing for Accessibility with the NVDA Screen Reader on Windows

P

Use a hosted database with Zeit’s Now

P

Configure secrets and environment variables with Zeit’s Now

P

View source on your remote Zeit Now server

P

Setup a custom domain name with Zeit’s Now

P

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

P

Deploy a Docker project with Zeit’s Now

P

Deploy static assets with Zeit’s Now

P

Deploy a Node project with Zeit’s Now

P

Review final screencast result

P

Edit a screencast for publication

P

Prepare the computer desktop for screencast recording

P

Capture video and audio in “bite-sized” chunks

P

Verify my gear is properly set up

P

Create a self-contained code focused screencast

P

Using the Voiceover screen reader to test for accessibility

P

Chrome Devtools: Elements - Debug with Style!

P

Chrome Devtools: Elements - Inspect Elements vs View Source

npm tutorial about Add comments to your npm scripts

Add comments to your npm scripts

2:10 npm PRO

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.

npm tutorial about List available npm scripts and support tab completion

List available npm scripts and support tab completion

1:52 npm PRO

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.

npm tutorial about Run npm scripts when files change with onchange

Run npm scripts when files change with onchange

2:06 npm PRO

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.

npm tutorial about Make npm scripts cross-environment friendly

Make npm scripts cross-environment friendly

5:41 npm PRO

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.

npm tutorial about Use package.json variables in npm scripts

Use package.json variables in npm scripts

1:22 npm PRO

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.

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

Change the level of console output when running npm scripts

0:48 npm PRO

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.

npm tutorial about Pass arguments to npm scripts

Pass arguments to npm scripts

1:03 npm PRO

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.

npm tutorial about Pipe data from one npm script to another

Pipe data from one npm script to another

4:31 npm PRO

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.

npm tutorial about Use custom config settings in your npm scripts

Use custom config settings in your npm scripts

3:00 npm PRO

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.

npm tutorial about Use pre and post npm script lifecycle hooks

Use pre and post npm script lifecycle hooks

1:23 npm PRO

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.

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

Run a set of similar npm scripts with a wildcard

1:58 npm PRO

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.

npm 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 npm PRO

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.

npm tutorial about Create a custom npm script

Create a custom npm script

1:17 npm PRO

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.

npm tutorial about Run npm scripts in parallel

Run npm scripts in parallel

2:05 npm PRO

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

npm tutorial about Run npm scripts in series

Run npm scripts in series

0:59 npm PRO

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.

npm tutorial about Run the basic npm scripts

Run the basic npm scripts

0:56 npm PRO

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.

npm tutorial about Create a basic package.json file

Create a basic package.json file

1:56 npm PRO

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.

grep tutorial about Find matches excluding a pattern with grep

Find matches excluding a pattern with grep

0:59 grep 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.

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

Search matching files by combining find and grep with xargs

2:20 grep 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.

grep tutorial about Search with groups using grep

Search with groups using grep

2:12 grep 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.

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

Match classes of characters using bracket expressions with grep

2:21 grep 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.

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

Specify line beginning and end in patterns using grep

1:18 grep 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.

grep tutorial about Search for optional patterns with grep OR

Search for optional patterns with grep OR

1:07 grep 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.

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

Use grep's extended regular expressions to find complex patterns

2:35 grep 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.

grep tutorial about Show context around matches using grep

Show context around matches using grep

1:59 grep 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.

grep tutorial about Search for basic patterns using grep

Search for basic patterns using grep

2:09 grep 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.

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

Search the contents of a git repository with git grep

1:46 grep 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.

grep tutorial about Use find to search for filename patterns

Use find to search for filename patterns

1:33 grep 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.

grep tutorial about Search the contents of files using grep

Search the contents of files using grep

2:15 grep

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.

grep tutorial about Search directory contents recursively using grep

Search directory contents recursively using grep

1:41 grep 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.

github 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 github PRO

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.

egghead tutorial about Set up egghead audio gear to record lessons

Set up egghead audio gear to record lessons

1:41 egghead PRO

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.

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

Testing for Accessibility with the NVDA Screen Reader on Windows

5:04 nvda PRO

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:

zeit-now tutorial about Use a hosted database with Zeit’s Now

Use a hosted database with Zeit’s Now

10:50 zeit-now PRO

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.

zeit-now tutorial about Configure secrets and environment variables with Zeit’s Now

Configure secrets and environment variables with Zeit’s Now

7:45 zeit-now PRO

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.

zeit-now tutorial about View source on your remote Zeit Now server

View source on your remote Zeit Now server

4:49 zeit-now PRO

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.

zeit-now tutorial about Setup a custom domain name with Zeit’s Now

Setup a custom domain name with Zeit’s Now

5:00 zeit-now PRO

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.

zeit-now 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 zeit-now PRO

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.

zeit-now tutorial about Deploy a Docker project with Zeit’s Now

Deploy a Docker project with Zeit’s Now

3:06 zeit-now PRO

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.

zeit-now tutorial about Deploy static assets with Zeit’s Now

Deploy static assets with Zeit’s Now

4:00 zeit-now PRO

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

zeit-now tutorial about Deploy a Node project with Zeit’s Now

Deploy a Node project with Zeit’s Now

5:34 zeit-now PRO

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

egghead tutorial about Review final screencast result

Review final screencast result

1:23 egghead PRO

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.

egghead tutorial about Edit a screencast for publication

Edit a screencast for publication

3:00 egghead PRO

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

egghead tutorial about Prepare the computer desktop for screencast recording

Prepare the computer desktop for screencast recording

3:05 egghead PRO

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.

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

Capture video and audio in “bite-sized” chunks

3:33 egghead PRO

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.

egghead tutorial about Verify my gear is properly set up

Verify my gear is properly set up

0:40 egghead PRO

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

egghead tutorial about Create a self-contained code focused screencast

Create a self-contained code focused screencast

4:00 egghead PRO

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.

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

Using the Voiceover screen reader to test for accessibility

9:39 mac PRO

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

chrome-devtools tutorial about Chrome Devtools: Elements - Debug with Style!

Chrome Devtools: Elements - Debug with Style!

6:25 chrome-devtools PRO

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

chrome-devtools tutorial about Chrome Devtools: Elements - Inspect Elements vs View Source

Chrome Devtools: Elements - Inspect Elements vs View Source

2:55 chrome-devtools

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.

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