Kent C Dodds Lesson Creation Process
Kent C Dodds live-streamed himself creating an egghead lesson and these are my notes of his process that stuck out to me.
Table of Contents
Lesson set up
Screen
Kent uses RDM for screen resolution
Uses full-screen most of the time Hides status bar if not
Editor
Has egghead recording vscode comments commented and he goes to settings.json and uncomments those. Because they are lower in the file, they override
Chrome
Has an extension that sets his page to be blank
Lesson recording set up
Determines if code is too much to type in the video.
How much code should you have as the starting lesson state?
The blog post is a really great version of showing before/after lesson state.
Lesson recording
Hops straight in to walking through existing code that is relevant to the lesson
Does an amazing job of narrating his all his actions. A note worthy one is creating a new file.
Shows errors that you’d run into if you were trying to do ’the thing’ without knowing exactly what you were doing. Great progression!
He does a really great job of iterating on how he phrases a particular sentence until he’s happy with it. It’s easy to edit out mistakes!
Very conscious of mouse placement on the screen.
You don’t have to rerecord huge sections if you mess something up. Kent stopped his server at somepoint and the update didn’t work so he restarted the server and will cut that part out of the lesson
Shows variations of what will/will not work. (importing with the file extension vs not)
Builds complexity in the lesson really well.
- inline
- from another script
- from an async script
- from any url
Lesson Editing
Mentions he would move files out of the way and re-record a section because the files weren’t relevant, you can add annotations for this!
When words are spoken to fast but he needs to edit a part out, you can use parts of both clips
Cut out the whitespace!
Conscious of how the screen looks and the audio
Conscious of mouse moving on the screen and adds a freeze frame to fix it. Very free with moving the video to match the audio
cut a spot where you know the video is good and find the iteration of that’s good and chop to that previous cut point
Manipulate the video so the cursor looks natural