Egghead Instructor Trevor Miller

Trevor Miller

Director of Instructor Happiness at egghead.io. Software Engineer. Musician. Mormon.



Unlock all of Trevor's PRO Lessons
click for instant access!

Browse Trevor Miller's lessons.

showing 65 lessons...

Update published npm packages using np

Set up testing of source code using jest with npm scripts

Publish npm packages using npm publish

Test npm packages locally in another project using npm link

Document npm packages using README files

Add package functionality using npm scripts

Run builds on file changes using watch with npm scripts

Set up compilation of source code using babel with npm scripts

Add manifest files to npm packages using npm init

Add version control to npm packages using git init

Set up egghead audio gear to record lessons

Review final screencast result

Edit a screencast for publication

Prepare the computer desktop for screencast recording

Capture video and audio in “bite-sized” chunks

Verify my gear is properly set up

Create a self-contained code focused screencast

Get JSON data from an API using fetch

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

P

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

P

Practical Git: Create local repos with git init

Practical Git: View commit history with git log

P

Practical Git: Compare file changes with git diff

P

Practical Git: Clean up commits with git rebase

P

Practical Git: Remove unnecessary git tracking with .gitignore files

P

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

P

Practical Git: Run scripts on git events with git hooks

P

Practical Git: Configure global settings with git config

P

Practical Git: Filter commit history with git log arguments

P

Practical Git: Diagnose which commit broke something with git bisect

P

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

P

Practical Git: Format commit history with git log arguments

P

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

P

Practical Git: Use semantic versioning with git tag

P

Practical Git: Resolve merge conflicts with git status

P

Practical Git: Save uncommitted changes with git stash

P

Practical Git: Sync branches with git merge

P

Practical Git: Isolate feature development with git branch

P

Practical Git: Sync local and remote repos with git pull

P

Practical Git: Document repos with README files

P

Set up React apps with zero configuration in two minutes

Getting Started with Redux Dev Tools

P

React Testing: Redux Reducers

P

React Testing: The Redux Store - Initial State

P

React Testing: The Redux Store - Multiple Actions

P

React Testing: Children with Shallow Rendering

P

React Testing: Reusing test boilerplate

P

React Testing: Conditional className with Shallow Rendering

P

React Testing: className with Shallow Rendering

P

React Testing: Element types with Shallow Rendering

P
js tutorial about Update published npm packages using np

Update published npm packages using np

1:38 js

When we want to update our package we need to do a few things: pull latest from our git remote, bump the npm version and git tag, push to our remote, push tags to our remote, and then run npm publish. Phew, that’s a lot. In this lesson, we will set up a release script using the np package to simplify this process.

js tutorial about Set up testing of source code using jest with npm scripts

Set up testing of source code using jest with npm scripts

2:42 js

Adding tests to our package can ensure it works as expected. We will install a test framework jest. We will then create a test script to run our tests. Then we will create a test:watch script to keep tests running while we develop.

js tutorial about Publish npm packages using npm publish

Publish npm packages using npm publish

1:29 js

In this lesson we will publish our package. We will first add a prepublish script that runs our build script; this will ensure the built folder gets added to npm when published. We will also add a .npmignore so that only our built files get installed. We need to run npm adduser to log in to an npm account. We can then run npm publish to publish our package and view it on npm.

js tutorial about Test npm packages locally in another project using npm link

Test npm packages locally in another project using npm link

4:01 js

We will import our newly published package into a new project locally to make sure everything is working as expected. We can do this locally before publishing with npm link. This creates a symbolic link in our node_modules folder, so our unpublished local package is used like an installed published package. This is important because it lets us test making changes to our package and using them immediately without publishing and updating a package with each change we want to test. This is good practice to do before publishing a new version of a package.

js tutorial about Document npm packages using README files

Document npm packages using README files

2:01 js

Users need to know how to use our package. We can make this easy for them with a README.md file containing information about our project. We will put a simple example at the top for easy use.

js tutorial about Add package functionality using npm scripts

Add package functionality using npm scripts

3:18 js

We will run our dev and test:watch scripts to develop; we will create some tests for the expected functionality of our package; it should conceal any words in a string that are in a blacklist of words. Then we will write the logic to make those tests pass.

js tutorial about Run builds on file changes using watch with npm scripts

Run builds on file changes using watch with npm scripts

0:55 js

We can set up a file watcher to compile automatically while we develop. In this lesson we wire up a new dev script to run the build script when source files change.

js tutorial about Set up compilation of source code using babel with npm scripts

Set up compilation of source code using babel with npm scripts

2:27 js

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install babel-cli and babel-preset-latest and wire up a build script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

js tutorial about Add manifest files to npm packages using npm init

Add manifest files to npm packages using npm init

2:00 js

We can create a package.json automatically by running npm init and answering the questions it gives. This becomes the “manifest” file for our package; it is used to populate the published npm page as well as to help the package manager to know how to install the package in consuming projects.

js tutorial about Add version control to npm packages using git init

Add version control to npm packages using git init

0:57 js

npm packages almost always have a git repo tied to them for version control. We will start our package by initializing a git repository.

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 Review final screencast result

Review final screencast result

1:23 otherjs

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

otherjs tutorial about Edit a screencast for publication

Edit a screencast for publication

3:00 otherjs

“We’ll just do it in post!”

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

otherjs tutorial about Prepare the computer desktop for screencast recording

Prepare the computer desktop for screencast recording

3:05 otherjs

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

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

Capture video and audio in “bite-sized” chunks

3:33 otherjs

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

otherjs tutorial about Verify my gear is properly set up

Verify my gear is properly set up

0:40 otherjs

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

otherjs tutorial about Create a self-contained code focused screencast

Create a self-contained code focused screencast

4:00 otherjs

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

js tutorial about Get JSON data from an API using fetch

Get JSON data from an API using fetch

1:19 js

We will use fetch to get JSON data from an API. fetch is available globally on the window object in the browser or via libraries in other JS environments.

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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.

otherjs tutorial about Practical Git: Resolve merge conflicts with git status

Practical Git: Resolve merge conflicts with git status

4:36 otherjs PRO

Sometimes when you run git merge (also during a git pull which runs a git merge) you get a merge "conflict"; this means that the same line(s) of code were changed locally as in new changes in the remote (most likely from another developer working on a related feature); git merge can automatically merge all other changes but when the same line is modified in two places, you have to fix the conflict manually. In this lesson, we show how a conflict happening from a git pull, and then how to fix it using git status to update the conflict markers in our file(s) with conflicts. You can use a graphical app for this, but this lesson will show you how to resolve conflicts directly from the command line and your code editor.

otherjs tutorial about Practical Git: Save uncommitted changes with git stash

Practical Git: Save uncommitted changes with git stash

2:51 otherjs PRO

Sometimes when we are working we need a way to pause and switch gears to deal with something more critical; often when this happens we aren't ready to create a git commit; instead, we can use git stash to save our uncommitted changes locally, switch branches and fix the critical issue, switch back to our incomplete feature, and finally run git stash apply to get our unfinished changes back into our branch without affecting the rest of the codebase. In this lesson, we show a real world example of doing this with a critical bug.

otherjs tutorial about Practical Git: Sync branches with git merge

Practical Git: Sync branches with git merge

2:27 otherjs PRO

Once a feature has been created inside of a branch, we can combine it back into the main master branch by using git merge. In this lesson, we go through a complete workflow of creating a feature branch and merging it back into the master branch.

otherjs tutorial about Practical Git: Isolate feature development with git branch

Practical Git: Isolate feature development with git branch

2:19 otherjs PRO

When working on a project, it is much easier to work on features and bugs in isolation of the rest of the project. We can do this with git branches; a branch is a copy of the working directory, staging area, and project history; we create a branch, then check it out, then add commits. After our feature has been built, we can then merge it back into the main stable branch - which is master by default. In this lesson we go over how to create a branch with git branch {branch-name}, viewing all branches with git branch, switching branches with git checkout plus a few helper commands.

otherjs tutorial about Practical Git: Sync local and remote repos with git pull

Practical Git: Sync local and remote repos with git pull

1:38 otherjs PRO

git pull lets us get the latest changes from our project's remote repo (most likely from co-workers or other developers working on our project) and merge (combine) them with our local code. It's kind of like Dropbox for code, but you tell git when you want it to get the latest changes from the remote when it is most convenient for you. In this lesson, we use git pull and discuss how it is a shortcut for running git fetch and git merge.

otherjs tutorial about Practical Git: Document repos with README files

Practical Git: Document repos with README files

1:26 otherjs PRO

A Git repo is much more useful when you know what it is; it has become a convention to add a README markdown file to the root of your repos which explains what the project is as well as anything else you want to add. In this lesson we create a README.md file and push it to our remote repo for others to see.

react tutorial about Set up React apps with zero configuration in two minutes

Set up React apps with zero configuration in two minutes

2:02 react

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the create-react-app {project-name} command. We then use the npm scripts that are provided: npm start to develop, npm run build to ship, and npm run eject to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

js tutorial about Getting Started with Redux Dev Tools

Getting Started with Redux Dev Tools

6:04 js PRO

The Redux DevTools let us wire up our Redux app to a time-traveling debugger. This can help us debug, test, and review the state of our application in a simple history that can be "bookmarked" and scrubbed through. In this lesson, we wire up the Redux DevTools into our app, and walk through the different "monitors" and options available.

More information can be found on the official Redux DevTools GitHub page: https://github.com/gaearon/redux-devtools

react tutorial about React Testing: Redux Reducers

React Testing: Redux Reducers

6:42 react PRO

Sometimes we want to test our Redux reducers to make sure they work as expected. In this lesson we will walk through setting up some Redux reducer tests for common situations and edge cases.

react tutorial about React Testing: The Redux Store - Initial State

React Testing: The Redux Store - Initial State

1:32 react PRO

When using Redux, it can be useful to test that your initial state is being rendered as expected. In this lesson, we will set up a test to check the initial state of our store.

react tutorial about React Testing: The Redux Store - Multiple Actions

React Testing: The Redux Store - Multiple Actions

7:53 react PRO

When using Redux, we can test that our application state changes are working by testing that dispatching actions to the store creates our expected output. In this lesson we will run a few realistic actions back to back (as if the user is using the app) and then test that the state tree looks as we expect it to. These types of tests that ensure all of your redux logic is working as expected give you a lot of value for not too much effort (they test your entire app's state in one big swoop). You may also find it useful to add more granular/individual tests for your reducers and/or actions, which we will cover in other lessons in this course.

NOTE: This lesson assumes you have used Redux. If you are new to Redux, it is recommended that you first watch the Getting Started With Redux course.

react tutorial about React Testing: Children with Shallow Rendering

React Testing: Children with Shallow Rendering

3:27 react PRO

When testing React components, we often want to make sure the rendered output of the component matches what we expect. With the React Shallow Renderer, we can check the entire rendered output of a component, the children prop, or a subset of the children prop. We can also use 3rd party libraries to check that this element tree includes a specific piece. In this lesson we will walk through examples of each.

react tutorial about React Testing: Reusing test boilerplate

React Testing: Reusing test boilerplate

2:21 react PRO

Setting up a shallow renderer for each test can be redundant, especially when trying to write similar tests that have slight tweaks. In this lesson, we go over how you can reduce some of the overlapping code so that each test only contains the unique pieces of the test.

react tutorial about React Testing: Conditional className with Shallow Rendering

React Testing: Conditional className with Shallow Rendering

2:16 react PRO

Often our components have output that shows differently depending on the props it is given; in this lesson, we go over how to compare the className prop element tree output based on conditional input.

react tutorial about React Testing: className with Shallow Rendering

React Testing: className with Shallow Rendering

2:49 react PRO

The React Shallow Renderer test utility lets us inspect the output of a component one level deep. In this lesson, we will examine the rendered output of props, specifically the className prop. We will then use the ES2015 String.includes() method to check that our rendered className includes what we expect.

react tutorial about React Testing: Element types with Shallow Rendering

React Testing: Element types with Shallow Rendering

1:09 react PRO

When you render a component with the Shallow Renderer, you have access to the underlying object. We can write lots of useful tests to check that our components are working as expected. In this lesson, we will use the type property on the shallow rendered component to make sure that the root element is what we expect it to be.

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