Learn Egghead, Firefox and Jekyll

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.

Bite-size video tutorials for badass web developers.

egghead

Record Badass Screencasts for egghead.io

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

* Install Jeykll and run it locally
* Create a new blog post
* Install plugins to add new features to your blog

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

Create A Blog With Jekyll

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

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happening. What is it doing, and why is it so slow?

This lesson is a real-world performance diagnosis of this very page, right here on egghead. Two infinite (but hidden) animations were causing CPU usage to spike, and Chrome's Task Manager and Performance tools helped uncover the elements causing the problem. You'll see how to use the profiler to record a snapshot, and learn a trick for discovering animations running in the background.

Diagnose a Slow Page Using Developer Tools

codesandbox.io provides one of the fastest ways to start a new React project. In this lesson, we will take a first look at codesandbox, its interface, and the default React project it creates.

Use Codesandbox to Start a New React Application

By re-assigning a couple mouse buttons, you can drastically improve the speed you can edit your lessons in Screenflow. This lesson shows how to customize using the Logitech software, but the concept should work for any mouse customization software as well.

Faster Edits in Screenflow with Mouse Customizations

Sometimes you have an idea that you want to quickly record, but the idea of setting up a project just to get it recorded gets in your way. I'm going to walk your through scripting away the main setup pain points so that you can focus on creating content.

Automate egghead Lesson Setup with ZSH Shell Functions

When making your font sizes large, your code will often get to long to fit on the screen. This lesson shows you how to use "word wrap" or "prettier print width" to adjust your code to fit within the editor.

Reformat Code to Fit the Screen

The axe browser extension (for Chrome and Firefox) is an immensely helpful tool for auditing web pages for accessibility defects.  This extension is powered by the same rules engine developed by Deque Labs in their axe-core open source library which also powers the react-axe development tool.  Each reported defect offers a ton of information about the defect, why it's a problem, severity level, groups impacted and ways to fix the defect.  This can be a great resource for learning more about how to write accessible code.

## Resources
* [Chrome browser extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

Use the axe Browser Extension to Audit a Web Page for Accessibility Issues

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

tota11y is a great tool to add to your accessibility auditing toolkit.  tota11y is a browser extension available for Chrome and Firefox that helps visualize accessibility violations (and successes), while educating on best practices.  It can make for a really helpful supplement to other accessibility auditing tools.

## Resources
* [About tota11y](https://khan.github.io/tota11y/)
* [Chrome browser extension](https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe?hl=en)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/)

Use tota11y to Visualize Accessibility Issues

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

In this lesson, we will learn how to use custom ENV variables to customize the PS1 Bash/Zsh command prompt in the VS Code terminal, without affecting our custom terminal themes in other applications. We will see how this can be useful for keeping the terminal clean for screen recordings.

I'm using Zsh in this video, but this works in Bash with `~/.bashrc` as well.

Customize the PS1 Bash/Zsh Command Prompt in VS Code with Environment Variables

Lessons often have common starting points. If you're going to make lessons in bulk, it helps to create templates so you don't waste time setting them up over and over.

Create a Lesson Template

Once your lesson template is ready, it's time to create some github repos to share your code. The easiest way to do this is with Github's CLI tool called "hub".

Create Repos on Github from the CLI with hub

ZSH allows you to write functions to wrap around common commands. These allow you to easiest invoke a number of lesson creation steps by only typing out the command.

Automate Lesson Creation From Templates With ZSH Functions

Forgetting to pass an argument to a zsh function could result in creating unnecessary folders or cloning code you didn't mean to. It's best to check for arguments to prevent unwanted results.

Add Conditions to ZSH Functions to Prevent Mistakes

Once you've finished your demo locally, it's time to commit, push it to github, and share your demo online. This zsh function breaks it down into a single call.

Branch and Create a Lesson in a Single ZSH Function

Alfred is a super speed booster when it comes to common tasks. If you're going to be creating a lot of lessons from templates, Alfred can save you from even opening your terminal.

Select a Lesson Template From an Alfred Workflow

Using Alfred, you can map a global keyboard shortcut to the process of cloning a lesson template repo and firing up your demo.

Launch a New Lesson From a Keyboard Shortcut

Ripple Delete is the most common command you will perform when editing with Screenflow, thus we should make it the simplest action to perform. Unfortunately, it requires a mouse click + shift and a command + delete. We can bind this sequence to a right mouse click using Karabiner mappings.

Speed Editing in Screenflow by Remapping Your Mouse with Karabiner

The second most common action is dragging around the timeline. We can use karabiner for this sequence with the :afterup hook to make sure it switches back to our arrow once we're done dragging.

Topics

Instructors

Content Type