Q&A: "How Do You Make Video Coding Guides?"

Written by: Reinder de Vries, December 9 2015, in Guide, Q&A

Last week a blog reader asked me a pretty good question: “How do you make your coding guide videos?” I figured it’s a common question, so I wrote up a short Q&A-style blog post on the tools I use to create coding guides and videos.

You can use it as a starting point for producing your own screencasts and step-by-step guides.

Video Recording

One of the best tools for recording screencasts (recordings of your Mac or PC screen display) is Screenflow. I’m using Screenflow 5 to record my Mac display in tandem with a voice recording. Often, I also record short blurbs of face-to-face video.



When exporting, I use these settings:

  • Screen Size: the native resolution of my MacBook Air, 1440x900.
  • Encoding: H.264 at 1.2 Mbit/s with AAC audio at 256 kbit/s (relatively high).
  • Framerates are set to Automatic, which means a key frame is made for every significant change in the frame and/or every few frames.
  • As for H.264, I’m using the “Main Profile” which is similar to the standard definition digital TV MPEG–4 format. If I’m making a video that’s largely facetime or needs a lot of color, I’d use the “High Profile” format.

Generally, a bit of ghosting and color loss occurs. Given that most videos are 80% screen recordings, that’s OK.

Physical Recording Gear

It’s not all software, quality comes down to physical gear too. This is what I use:

  • A MacBook Air, late–2013 model. Read here how my most important piece of equipment broke down, one time…
  • A Logitech HD Pro C920 webcam. It has great quality and an easy mount screw.
  • Two generic brand softboxes for diffuse lighting. This is key for recording naturally-looking videos. Put one on 1–1.5 meter on both sides of your face.
  • A Røde SmartLav+ lapel microphone. This is key for clear audio and voice recordings.
  • A Griffin iMic. This is technically just a USB soundcard, but it’s making a huge difference in audio quality. Analog jack inputs don’t really work well in MacBooks, too much noise interference from the laptops internals. Using an external soundcard clears that up. And a plus: music quality is definitely better with an iMic!

This is how I remember text I need to say…

Poor-Mans Autocue

Poor-Man’s Autocue

I’ve had some trouble getting the SmartLav+ to work with my MacBook Air. It turns out the TRRS jack doesn’t work, and it’s output voltage is too low for the MacBook to pick up. I think this only happens in some models, though. Ultimately, I got the iMic and a TRRS-TRS converter and it all worked out fine.

Writing Coding Guides

A ton of coding guides on Swift are published every day, but 90% of them is garbage because the coder wasn’t thinking from the reader’s perspective. Here’s my Quality Assurance checklist for creating killer coding guides:

  1. Make sure you explain everything in great detail. Write an “aside” that explains theory next to the practical step-by-step coding guide.
  2. Explain how every line of code works. Don’t skip any code lines, and don’t assume the reader knows immediately what you mean. Use diagrams if needed, and repeat yourself if needed.
  3. Use the correct terminology. It may seem boring at first, but you can’t just call everything “stuff”. Plus: if the reader wants to Google “nil-coalescing operator” you’re glad you didn’t name it “?? thingie”.
  4. Create clear screenshots. I use Skitch for that; it’s got pretty cool quick-add-an-arrow-here-and-here features.
  5. Sit down and make a video. It’s a ton of work (about 2 days for a 10.000 word guide), but it’s much easier to follow than just a written guide. That said, I think a text guide in tandem with a video makes the best programming learning experience.

This is the workflow I use from idea to published guide:

  1. Build the app or feature I want to create a guide of. Make it as simple as possible, but not simpler.
  2. Write the coding guide itself. Cut into comprehensible parts. Make screenshots, diagrams, etcetera. Usually, I end up building the app for the second time.
  3. Attempt to follow the guiding guide myself. Refine the steps where necessary.
  4. Record a video of the guide. Usually, I do this in one sitting because it takes time to set up and tear down.
  5. Edit the raw video footage. Depending on the amounts of eh’s and err’s, this takes about one hour per 15–20 minutes of footage.
  6. Upload the video, publish the guide. DONE!

Over time, and depending on feedback, I rewrite part of the guides and restructure them. Also, quite often I have to update guides because parts became obsolete thanks to changes in Swift.

Concluding With: The Secret Ingredient

Want to know the secret ingredient for making awesome guiding guides?

Electronic Dance Music! I’m a big fan, and listening to a solid beat definitely gets me into the productivity groove. Check out: Oliver Heldens, 3LAU, White Panda and Boiler Room.

Get started on your own video guide: download Screenflow, put your face in front of the camera, and start screencasting!

Join 11.000+ app developers and marketers
  • Every Monday: get curated app marketing news, resources, tools and goodies in your inbox
  • Grow your app's userbase with the latest App Store Optimization and app marketing strategies
  • FREE: Get the free step-by-step Get Started With Your App Idea guide to set yourself up for App Store success!
Yes, Sign Me Up!

Popular Posts

Written By: Reinder de Vries

Reinder de Vries is an indie app maker who teaches aspiring app developers and marketers how to build their own apps at LearnAppMaking.com. He has developed 50+ apps and his code is used by millions of users all over the globe. When he’s not coding, he enjoys strong espresso and traveling.

Get instant access to The Step-by-Step Guide: Get Started With Your App Idea

(PLUS: see the tool we use to save a ton on back-end coding)


Comments & Thoughts

On The Blog