Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Tools content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Create a self-contained code focused screencast

4:00 Tools lesson by and

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.


egghead.io comment guidelines

Avatar
egghead.io

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.

There are three key principles that make a lesson an Egghead lesson. Jump right in, focus on the code, and stay modular. Let's go through each of these principles to see the differences between Egghead and non-Egghead styles.

Egghead lessons jump right in. This lets the viewer know we value their time. Let's watch an example typing immediately when the lesson starts.

First let's type const URL, and let's set that equal to the GitHub API. That's api.gethub.com/users. Then we need some sort of user here.

When we jump right in we avoid intros, outros, and explaining before doing. Although it may feel like a lesson needs an intro or outro, this information should be placed in the lesson description instead of the video because we want to respect the viewer's time.

Removing intros and outros lets the viewer consume the content without any fluff. Here's examples of both an intro and an outro.

Fetch is something that we can use to use APIs. It's a replacement for XMLHttpRequest. That's how fetch works. That's it for this lesson.

It feels natural to explain things before showing them, but it's for the viewer to understand when you show them first. Egghead lessons do first, then explain if needed. Let's watch what explaining before doing looks like.

We want to use the Fetch API, but before we do that we need to have a URL. Let's make a URL.

Egghead lessons focus on the code. The bulk of the lesson should be typing, but we can stop and explain when necessary. Here's a clip to see what it feels like to focus on the code.

Now, let's go down and type .catch and this will be used if we get an error. We will get our error. We can use that error, so let's just log out the error in this case. Let me turn off my network connection. Now we get this type error failed to fetch.

When we focus on the code we avoid long notes and explaining why we're doing something. Egghead lessons are condensed. Because of this we avoid long notes that can distract from the core lesson. Here's an example of a long note.

Fetch is a function that's available on the global window object in the browser or through libraries in other JavaScript environments.

The reasoning behind why we like a technology or why we're typing something should go in the lesson description, not the video. Let's look at an example of explaining why.

We need to have some way to get data from our API. I've decided to use Fetch because it's becoming a part of the spec, so we don't have to rely on third party libraries.

Egghead lessons stay modular. A viewer should be able to watch a lesson by itself or in succession regardless of when the lesson was created. When we stay modular, we avoid information that is brittle or references outside of the lesson. Information that is likely to be out of date soon is brittle.

We want Egghead lessons to last as long as possible, so we try to avoid including brittle information in the video. Instead, add this information to the lesson's description where it can be easily modified. Let's see what brittle information in a lesson sounds like.

One thing to note is that this Fetch function is not available in all browsers. It's currently only in Chrome and Firefox and it's not available in Node yet.

Referencing outside information is unnecessary. It creates a side effect like an impure function, which makes it more difficult to watch the lesson by itself or compose it in playlists in courses. Let's watch an example of a reference outside of a lesson.

If you haven't seen this before, this is a template literal which is a part of ECMAScript 2015 that we covered in another lesson.

In summary, an Egghead lesson jumps right in, is focused on the code, and stays modular.

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