惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Darknet – Hacking Tools, Hacker News & Cyber Security
T
Threat Research - Cisco Blogs
C
Cyber Attacks, Cyber Crime and Cyber Security
AI
AI
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
H
Hacker News: Front Page
P
Proofpoint News Feed
Know Your Adversary
Know Your Adversary
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
The Hacker News
The Hacker News
腾讯CDC
O
OpenAI News
Vercel News
Vercel News
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
量子位
S
Schneier on Security
T
Tor Project blog
B
Blog
The Register - Security
The Register - Security
宝玉的分享
宝玉的分享
S
Securelist
有赞技术团队
有赞技术团队
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
T
Tailwind CSS Blog
G
GRAHAM CLULEY
Hugging Face - Blog
Hugging Face - Blog
W
WeLiveSecurity
D
DataBreaches.Net
TaoSecurity Blog
TaoSecurity Blog
博客园 - Franky
Latest news
Latest news
I
Intezer
Hacker News: Ask HN
Hacker News: Ask HN
WordPress大学
WordPress大学
PCI Perspectives
PCI Perspectives
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
小众软件
小众软件
GbyAI
GbyAI
F
Full Disclosure
V
V2EX
Project Zero
Project Zero
The Last Watchdog
The Last Watchdog
T
Tenable Blog
Security Latest
Security Latest
Attack and Defense Labs
Attack and Defense Labs
F
Fortinet All Blogs
S
Secure Thoughts
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Google DeepMind News
Google DeepMind News
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint

Kent C. Dodds Blog

Implementing Hybrid Semantic + Lexical Search Simplifying Containers with Cloudflare Sandboxes Migrating to Workspaces and Nx Offloading FFmpeg with Cloudflare Building Semantic Search on my Content Helping YOU ask ME questions with AI How I used Cursor to Migrate Frameworks The Dow's Start on the Covenant Path 2025 in Review The next chapter: EpicAI.pro AI is taking your job How I increased my visibility Launching Epic Web 2023 in Review Stop Being a Junior RSC with Dan Abramov and Joe Savona Live Stream Fixing a Memory Leak in a Production Node.js App 2022 in Review My Car Accident I Migrated from a Postgres Cluster to Distributed SQLite with LiteFS I'm building EpicWeb.dev A review of my time at Remix Remix: The Yang to React's Yin How I help you build better websites Why I Love Remix The State Initializer Pattern How to React ⚛️ Get a catch block error message with TypeScript Building an awesome image loading experience How Remix makes CSS clashes predictable Introducing the new kentcdodds.com How I built a modern website in 2021 How to use React Context effectively Static vs Unit vs Integration vs E2E Testing for Frontend Apps The Testing Trophy and Testing Classifications Array reduce vs chaining vs for loop Don't Solve Problems, Eliminate Them Super Simple Start to Remix Super Simple Start to ESModules in Node.js JavaScript Pass By Value Function Parameters How to write a Constrained Identity Function (CIF) in TypeScript How to optimize your context value How to write a React Component in TypeScript TypeScript Function Syntaxes Listify a JavaScript Array Build vs Buy: Component Libraries edition Using fetch with TypeScript Wrapping React.useState with TypeScript Define function overload types with TypeScript 2020 in Review Business and Engineering alignment Hi, thanks for reaching out to me 👋 useEffect vs useLayoutEffect Super simple start to Firebase functions Super simple start to Netlify functions Super Simple Start to css variables Favor Progress Over Pride in Open Source Testing Implementation Details How getting into Open Source has been awesome for me useState lazy initialization and function updates Use ternaries rather than && in JSX Application State Management with React Use react-error-boundary to handle errors in React JavaScript to Know for React How I structure Express apps What open source project should I contribute to? When I follow TDD AHA Programming 💡 Should I write a test or fix a bug? Stop mocking fetch Intentional Career Building Improve test error messages of your abstractions Tracing user interactions with React Eliminate an entire category of bugs with a few simple tools Common mistakes with React Testing Library Super Simple Start to React Stop using client-side route redirects The State Reducer Pattern with React Hooks Function forms Replace axios with a simple custom fetch wrapper How to test custom React hooks React Production Performance Monitoring Should I useState or useReducer? Stop using isLoading booleans Make Your Test Fail Make your own DevTools An Argument for Automation Fix the "not wrapped in act(...)" warning Super Simple Start to ESModules in the Browser Implementing a simple state machine library in JavaScript 2010s Decade in Review Why users care about how you write code Why I avoid nesting closures Don't call a React function component Why your team needs TestingJavaScript.com Inversion of Control Understanding React's key prop How to Enable React Concurrent Mode How to add testing to an existing project Profile a React App for Performance
How I Record Educational Videos
2020-06-22 · via Kent C. Dodds Blog

Before we begin. Let's make sure we're all talking about the same thing. When I say "high value-to-minute video content" I'm talking about stuff like this:

Create a User Interface with Vanilla JavaScript and DOM:

Notice that I don't waste any time saying what we're going to learn (that's what the title/description are for) or how we're going to approach it. I just start into the content. When I finish I don't ask you to subscribe or smash the like button. I review the material to make sure we're all on the same page, and then that's it.

I'm not here to waste your time.

So, how do I record those kinds of things? Well, if you're interested in the hardware/software I use, then check out my uses page. I want to tell you about my process.

First off, I need to learn about what I'm going to teach. Normally I already know something about what it is I'm going to teach. Normally the stuff I teach is something I have a lot of experience with, but sometimes only a little bit. Whatever the case may be, I at least have an idea of the kind of thing I expect people to do with the idea I'm trying to get across, and that's where I start: The example.

The finished example

I'll often already have an example of the thing that I want to teach based on something I did in a real-world app for work etc. So I'll take that and try and isolate/simplify as much as I can so we can focus on the thing I'm trying to teach. That way there are as few distractions/unrelated concepts as possible.

The process of striping down the example to the fundamentals of what I'm trying to teach is very instructive for me. It helps me answer any questions I have and sometimes corrects my assumptions about the material. With that example, I also want to make sure that I don't remove anything that people would typically come up against, or I at least make a mental note to mention it when I'm giving the instruction.

The starting point

I don't think about the "starting point" until I have the finished version of what I'm going to teach. Once I have that, I take away all the important stuff and leave in the irrelevant stuff. For example, if this isn't an introduction to an abstraction/module, I'll often leave import statements in place so they don't have to watch me type it.

My highest quality material is included in my workshops and the starting point for all of those is in an "exercise" version of the file which has little emoji (🐨) to help along the way for people going through the workshop material. So as I'm removing the stuff that we're going to be learning about, I leave emoji in place for people to know what to do.

Here's an example of the exercise version and the final version of an exercise. In the workshops, there's also an accompanying markdown file that gives a bunch of details and links to resources to help prepare people for the exercise.

My goal is to keep each video focused on one core concept that I'm trying to teach, so I'll look at the finished version and determine how many things are only tangentially related to what I'm teaching. If there are things like that, then they get their own video (in a workshop that means they're an "extra credit"). I also try to determine how "heavy" the concept is. If there's a lot in there, then I try to break it down so I can keep the video short. If a video is longer than 6 minutes or so, then you're probably teaching too many things at once and could break things down to smaller bits (which in a workshop is also "extra credit").

... Here's a little side-note about workshops and "extra credit"...

A note on the meaning of "extra credit" for workshops. Sometimes really important lessons are contained in the extra credit portions of the workshops, which makes it feel like they're not "extra" after-all but rather crucial parts of the learning process. The only reason I call them "extra credit" is because in a workshop context I actually don't need the student to get through the extra stuff on their own to accomplish my purpose of the workshop exercise. The purpose is to get their mind engaged with the problem, which they can do in the first few minutes of the exercise. They don't have to get through all the material on their own to learn what they need to learn. And they can always go through it later.

... Ok, back to recording videos...

Before recording

Most of the things I record, I've taught multiple times to people in one form or another. It could be in a workshop, a blog post, or a talk. The point is that I know this stuff. Really well. And I can explain it really well without fumbling over my explanation.

That said, sometimes the video I'm recording is the first time I've explained the concept at all and that's fine too. It just means that I'll have to try several times before I come up with an explanation that I'm happy with.

So, before recording, I'll set my screen resolution to 1280x720 (1080p) with HiDPI (which means it's basically 2560x1440, just with big controls). I update my editor settings to make sure the font is easily legible (even on a mobile device) and there's no empty space on the screen (often this means the editor and preview are both in screen, which is optimal anyway). Then I pull up some notes on another screen if needed. Often I don't really need anything, but even more often all I need is a diff between the final version and the starting version. (git diff --no-index before.js after.js)

Sometimes I'll make little notes to myself, but I never write down what I'm going to say.

The recording

I hit the record button, make sure my mouse or cursor aren't in a weird spot (oh, and I disable blinking on my cursor too), then I start talking and typing. I do not record the video and audio separately. I record them together. This takes practice, but sounds more natural. (in bold because this is a very common question). If at any point I'm not happy with what I just did, I take my finger off my trackpad and my hands off the keyboard, I think back where the mouse/cursor were at the point I want to start over, I restore everything to that point, and then I start again from that point. I can clean it up after the fact.

Things get challenging if you've scrolled around a little bit, so sometimes I need to be creative to make cleanup easier and occasionally I'll start all over again. If I'm happy with what I typed, but I'm not happy with how I said it, I'll just say it over and over again until I get a good take and then I'll overlay them later. Then I continue.

I pretty much follow John Lindquist's course on Egghead about recording screencasts (which is full of TONS of great ideas). (And don't miss the cheat sheet)

Editing

I use Screenflow to record and edit. I don't know of anything better for what I do. I'm happy with it. To be honest, I don't edit most of my videos these days (egghead.io takes care of it for me now), but I always set my audio to mono (who needs stereo on a single person's voice?) and I use the "Smooth Volume Levels" feature which normalizes volume and does a few other things to help improve the sound. It does a pretty good job for a checkbox.

I export the video file as 2560x1440 MPEG-4 at 30 FPS.

One last thing

There's a lot more to all of this, but the above should answer most questions people ask me about this so I'm going to stop here. But I do want to share a super useful resource: How to egghead: egghead instructor guide. Lots of great resources and ideas in there. Even if you don't want to publish on egghead.

I hope this was helpful to you! Good luck!