Browse all Tools lessons.

showing All 198 lessons...

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

Chrome Devtools: Elements - Make Changes in Your Browser

Use the Device Toolbar to Emulate Different Screens

P

Chrome Devtools: Elements - Console Integration

P

Examine a Running App with the Chrome Debugger

P

Use Snippets to Store Behaviors in Chrome DevTools

P

Set Breakpoints for the Chrome Debugger

P

Unbundle your JavaScript with Source Maps in Chrome DevTools

P

Examine a Page's Source Resources with Chrome DevTools

Understand HTTP Status Codes with the Chrome Devtools

P

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

P

Test Slow Network Performance with the Chrome Devtools

P

Filter Requests in the Network Panel in Chrome Devtools

P

Analyze HTTP Requests and Responses with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

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

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

Practical Git: Create local repos with git init

Practical Git: View commit history with git log

Practical Git: Compare file changes with git diff

Practical Git: Clean up commits with git rebase

Practical Git: Remove unnecessary git tracking with .gitignore files

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

Practical Git: Run scripts on git events with git hooks

Practical Git: Configure global settings with git config

Practical Git: Filter commit history with git log arguments

Practical Git: Diagnose which commit broke something with git bisect

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

Practical Git: Format commit history with git log arguments

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

Practical Git: Use semantic versioning with git tag

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

otherjs tutorial about Set up egghead audio gear to record lessons

Set up egghead audio gear to record lessons

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

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

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

Use a hosted database with Zeit’s Now

10:50 otherjs 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.

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

Configure secrets and environment variables with Zeit’s Now

7:45 otherjs 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.

otherjs tutorial about View source on your remote Zeit Now server

View source on your remote Zeit Now server

4:49 otherjs 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.

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

Setup a custom domain name with Zeit’s Now

5:00 otherjs 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.

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

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

Deploy a Docker project with Zeit’s Now

3:06 otherjs 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.

otherjs tutorial about Deploy static assets with Zeit’s Now

Deploy static assets with Zeit’s Now

4:00 otherjs PRO

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 PRO

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

otherjs tutorial about Edit a screencast for publication

Edit a screencast for publication

3:00 otherjs 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!

otherjs tutorial about Prepare the computer desktop for screencast recording

Prepare the computer desktop for screencast recording

3:05 otherjs 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.

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

Capture video and audio in “bite-sized” chunks

3:33 otherjs 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.

otherjs tutorial about Verify my gear is properly set up

Verify my gear is properly set up

0:40 otherjs 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).

otherjs tutorial about Create a self-contained code focused screencast

Create a self-contained code focused screencast

4:00 otherjs 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.

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

Using the Voiceover screen reader to test for accessibility

9:39 otherjs 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

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

Chrome Devtools: Elements - Debug with Style!

6:25 otherjs 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.

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 PRO

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

otherjs tutorial about Chrome Devtools: Elements - Console Integration

Chrome Devtools: Elements - Console Integration

5:28 otherjs PRO

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

otherjs tutorial about Examine a Running App with the Chrome Debugger

Examine a Running App with the Chrome Debugger

10:06 otherjs PRO

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

otherjs tutorial about Use Snippets to Store Behaviors in Chrome DevTools

Use Snippets to Store Behaviors in Chrome DevTools

2:56 otherjs PRO

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

otherjs tutorial about Set Breakpoints for the Chrome Debugger

Set Breakpoints for the Chrome Debugger

6:53 otherjs PRO

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

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

Unbundle your JavaScript with Source Maps in Chrome DevTools

3:40 otherjs PRO

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

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 PRO

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

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 PRO

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

otherjs tutorial about Test Slow Network Performance with the Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

2:53 otherjs PRO

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

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

Filter Requests in the Network Panel in Chrome Devtools

3:44 otherjs PRO

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

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.

otherjs tutorial about Examine AJAX Requests with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

4:04 otherjs

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

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

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

1:06 otherjs

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

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

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

3:42 otherjs

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

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

Practical Git: Create local repos with git init

2:34 otherjs

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

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

Practical Git: View commit history with git log

0:40 otherjs

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

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

Practical Git: Compare file changes with git diff

5:20 otherjs

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

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

Practical Git: Clean up commits with git rebase

5:42 otherjs

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

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

Practical Git: Remove unnecessary git tracking with .gitignore files

2:36 otherjs

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

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

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

1:34 otherjs

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

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

Practical Git: Run scripts on git events with git hooks

2:58 otherjs

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

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

Practical Git: Configure global settings with git config

2:33 otherjs

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

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

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

Practical Git: Filter commit history with git log arguments

6:49 otherjs

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

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

Practical Git: Diagnose which commit broke something with git bisect

2:49 otherjs

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

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

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

0:57 otherjs

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

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

Practical Git: Format commit history with git log arguments

2:00 otherjs

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

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

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

2:03 otherjs

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

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

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

Practical Git: Use semantic versioning with git tag

2:14 otherjs

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

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