Bite-size video tutorials for badass web developers.

egghead

Learn Egghead

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Tips and Tricks

This is the video companion to the [egghead.io Instructor Guide](https://howtoegghead.com/instructor/).

Screencasting is hard! There are virtually infinite ways to produce one. For an egghead.io lesson we expect several key aspects to be met. We want to make sure that our lessons have depth and clarity. Clarity is important and starts with the technical aspects of recording your screen and voice. Once we have achieved this objective level of clarity, we dip into the stylistic aspects of recording a lesson. The style is subjective, and the goal of an egghead.io lesson is not to have an army of uniform drone producing flavorless video content for the masses.

Our mission is to make you a badass screencaster. We want to push you to another level. We've found that a small set of standard practices will create an awesome experience for the student, and eliminate frustration as we teach by providing a repeatable pattern for success. It’s not complicated. In fact, it is simple, but it isn’t easy.


This course will show you how to produce an egghead.io lesson. We strive for consistency in style, and these lessons will demonstrate the core elements that create our brand screencasts. Let’s learn how together.

Record Badass Screencasts for egghead.io

Any extra information on the screen will easily distract the audience from the purpose of your lesson. Do your best to remove any extra notifications, UI, or other information that would take away from what you're teaching.

Remove Distractions

Any information you would want to put into an Intro or Outro belongs in the accompanying description, title, course page, etc. The lesson is only for showing the process. Talking about yourself, the lesson, or other lessons is a waste of time.

Avoid Intros and Outros

Tangents are opportunities for other lessons. When you find yourself drifting off-topic because you feel you _need_ to explain  some code you wrote, consider how that piece of code fits back into a "How do I?" question, then come up with a separate lesson to capture it.

Stay on Topic

Recording can be intimidating, so it's best to just hit the record button and start talking. Take it one thought at a time. Sit quietly, think about what you're going to say/type, then do it. If you mess, up, undo back to when you were quiet and try again. Once you get a good take, move on to the next thought. The ideal raw recording is a ton of bad takes and one good take for each thought. So when you get to the editing phase, you quickly clear out the bad takes and leave the good ones.

Record One Thought at a Time

Editing a raw lesson video is a very simple process. You simply watch your own lesson and edit out all the bad takes and dead space using the "Ripple Delete" command. You will be left with a nice, cut lesson ready to export and upload.

Edit with Ripple Delete

Video is a one-way form of communication, so user's don't have the chance to ask you to clarify or ask "Where does X fit in?" This places the burden on you to guide their eyes as you explain how all the little pieces of the code fit together. When your application has a "flow", "X triggers Y, Y triggers Z", make sure to "show the flow" by walking them through where each chunk of code fits. This involves a lot of mouse movement (or fancy keyboard selection shortcuts) and hightlighting to bring it all together.

Guide Their Eyes

Code is usually pretty good at explaining itself. So it's best to just start writing code while you talking about it, then see if any additional explanation is required. When you fall into the trap of a long-winded explanation before you begin coding, you risk confusing the audience or unnecessarily repeating yourself.

Show First, then Maybe Explain

Before recording your first lesson, pick a title that accurately reflects what you plan on teaching. Use the "How do I..." trick to properly frame your lesson and title. "How do I dig a hole with a spoon?" would be answered with a lesson titled "Dig a Hole with a Spoon." Or "How do I eat a lobster with chopsticks?" would be answered with a lesson titled "Eat a Lobster with Chopsticks." 

Pick a Lesson Title

Teaching an egghead lesson should feel like walking the audience through a set of instructions. Do this, then that, move that, twist this, finally push that. The audience wants to see you putting the code together. Assembling your demo while they watch makes it feel much more real and achievable.

Teach Step-by-Step

Forgetting to change your resolution or setting up your mic will result in an unusable lesson. So please, please, please, set your resolution to 1280x720 (HiDPI), set your mic input to "Onyx Blackjack", and confirm that your mic loud enough (it helps to put your mouth as close to the mic as possible).

Prepare to Record - Screen Resolution and Mic Check

The twelve-factor app is a development and deployment methodology for building apps with present-day concepts. Following it will ensure your app can be deployed easily and scaled effortlessly.

The website 12factor.net explains the concepts of the twelve-factor app. The lessons in this course each directly relate to one of the 12 factors and are presented in order. The first few go over revision control and managing the config and dependencies of your Node.js app, while the rest explain the devops of your app with Nginx & Docker, with concepts closely aligned to the 12-factor app.

Summary & Concepts of the Twelve-Factor App

In this lesson we'll create a simple 3-step gradient by blending together two colours. Blending is a great way to build a harmonious set of swatches that we can use as a base for our colour palettes.

I also demonstrate how I use 3-step blends to add stepped gradients and colour variation to my illustrations.

Simple 3-Step Colour Blending in Illustrator

In this lesson we're going to build a simple 1-point perspective grid in Illustrator that you can reuse over and over. Having a pre-made perspective grid handy when you're working on an illustration saves you plenty of time, hassle, and headache.

In the end you'll have a symbol saved in Illustrator that you can place into any illustration you're working on. Or easily import it into Photoshop, Procreate, and other programmes.

Build a 1-Point Perspective Grid in Illustrator

In this lesson we're going to build a 2-point perspective grid in Illustrator by setting up a simple horizon line with two vanishing points. We'll save the grid as an illustrator symbol so that you can easily reuse it again in future illustration projects. 

In the end you'll have a symbol saved in Illustrator that you can place into any illustration you're working on. Or easily import it into Photoshop, Procreate, and other programmes.

I also demonstrate how to quickly build a set of cubes inside of the grid, to give you a sense of how easy it is to construct a realistic perspective scene using the grid guidelines.

Build a 2-Point Perspective Grid in Illustrator

Being able to quickly check what your illustration looks like in greyscale is essential to keeping the contrast in your design balanced. Keeping your value structure strong will lead to a striking and beautifully colourful piece by the end.

In this lesson we go over how to set up a quick keyboard shortcut that lets you preview what your illustration looks like in greyscale using the 'Proof Colours' menu options.

Create a Shortcut to Quickly Check Greyscale Values in Illustrator

We all accidentally forget to close something before recording a lesson or leave something on the screen unintentionally. This lessons covers using Screenflow to hide mistakes you may have made by making a second recording, placing it on top of your recording, and cropping out the pieces that you need.

Hide Mistakes in Screenflow with a Second Recording in the Top Layer

Typing is hard. We often make mistakes when talking and typing at the same time. Luckily, if you simply keep typing while you're recording, you can go back and edit out the typo using this technique by deleting the typo section and expanding the properly typed part.

Fixing Typos in Screenflow After a Ripple Delete

Dogs bark. Babies cry. Adults say the wrong words. All these things might make you think you've ruined your recording, but fret not! This lesson will show you how to salvage a video when the unexpected happens.

Correct Audio Mistakes in Screenflow with Short Voiceovers

Visual Studio Code is an amazing tool for developers. It's lightweight and highly customizable, and perfect for creating web applications.

In this video Burke Holland gives us an overview of VS Code, and shows us a lot of the powerful tools that you can use to increase your productivity and enhance your developer experience.