Forem: Rachel Simone Weil

Use this OBS workflow to seamlessly integrate "live" demos into pre-recorded tech talks

Rachel Simone Weil — Thu, 10 Jun 2021 18:58:10 +0000

Spoiler: This tech talk at Smashing Conf was recorded in one take with no editing software. And that "live" demo isn't actually live.

As developer meetups and conferences have been moving to online-only offerings over the past year and a half, the way I prepare for technical presentations and demos has changed. Mistakes and flubs feel more weighty when recorded, so it's easy to get lost in recording multiple takes, over-rehearsing, and editing things just so. The time put into creating video content can really add up!

Below, I share the process I've created for making technical demo videos in OBS Studio. By preparing OBS with premade "cuts" using a Scene Collection and a little pre-recorded trickery, you can create a technical video with polish while eliminating the need to edit the video after recording. Really!

Summary

Edit: I described the approach pretty succinctly on Twitter:

// Detect dark theme var iframe = document.getElementById('tweet-1403088368536276999-583'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1403088368536276999&theme=dark" }

Read below for the full step-by-step.

Tutorial

These steps assume you already have the (free and cross-platform) OBS Studio installed. Some previous experience with this software is helpful.

In OBS Studio > Settings > Output, choose your preferred video output format. You might want to test a sample recording to ensure the file format and quality are OK.
Write presentation notes or a script and create any slides you might want to show. If you're using presentation software to create them, export your slides as individual images.
Pre-record your "live" screen demos. (Cheating, I know! But none of this is going to be live in the end, anyway.) You can use OBS, Game Bar (Windows 10), or QuickTime (OSX) depending on your scenario and preference. If you have multiple demos, record each as a separate video to eliminate capturing unneeded setup steps, window switching, etc. Don't include any audio commentary at this stage.
From the Scene Collection pane in OBS, add two template scenes using the (+) button:
- A scene with a microphone input and a small inset webcam source in the corner, and
- A scene with the same microphone input and the same webcam source, but with the webcam expanded to take up the entire screen area. The inset view, the fullscreen view. (That's a Monster in My Pocket figurine from my childhood, in case you were wondering.)
Make copies of the inset scene so that every slide or demo video has its own duplicate of that scene. Rename the scenes as you go with descriptive names. Then, make copies of the fullscreen webcam scene and place them before and after every video scene as shown below.
At the left is an example of a Scene Collection prepared by duplicating scene templates. Images and videos are added to each scene by dragging them into the Sources panel.
Drag and drop the relevant slide image or video into the Sources panel for that scene. Make sure each image and video are sized to take up the full screen dimensions. If the OBS screen size or ratio needs to be adjusted, you can do this in OBS Studio > Settings > Video. But when possible, it's better to keep things high-resolution and in 16:9 and export your content accordingly.
For each video, double-click on the source file to open source properties, and make sure "Loop" and "Show nothing when playback ends" are unchecked. Make sure "Restart playback" is checked. These settings will ensure that the video starts from the beginning when the scene is activated, and that when the video is complete, it will freeze on the last frame.
Settings for video sources
Lastly, record your demo by clicking "Start Recording," navigating through on your scenes in order as you talk over the prepared slides and demos. When done, choose "Stop recording."

By recording the presentation in this way, you don't have to drive live demos, switch in and out of your presentation, and try to talk at the same time, because you'll simply be narrating over the scenes you've prepared. This makes it easy to reference a script or speaker notes, too. And with OBS's built in crossfades, you get a nice result without having to use additional editing software.

From the viewer's perspective, the switch between camera inset and fullscreen camera will look like a cut between "Camera 1" and "Camera 2" like you might see in professional recordings. But in fact, it's just little ol' you, sneakily bridging different demos together by interspersing them with a brief fullscreen webcam feed. Since you'll keep talking as the scenes change, the result will look very natural without pauses between content.

Now that you know how it was done, take a look at the clip again. (Or, view the full talk here.)

The screenshare is an imported video that I'm talking over as if it's happening in real time.

I hope this gives you some ideas for ways to use OBS to record tech talks. If you end up trying it out, let me know in the comments!

These VS Code extensions help you fix accessibility and compatibility bugs while you code

Rachel Simone Weil — Fri, 02 Apr 2021 14:17:53 +0000

webhint is a VS Code extension that checks your web code for accessibility, compatibility, security, and performance pitfalls. The Error Lens VS Code extension brings code warnings out of the Problems pane and next to the affected line. Used alone or together, they ensure you'll fix a whole host of code issues before you even close the </tag>!

For the past year and a half or so, I've been contributing to webhint, an open-source project that collects best practices and suggestions from sources such as axe-core and MDN into a single tool. You can think of it kind of like a linter for the web, giving you real-time feedback in areas such as cross-browser compatibility, accessibility, performance, and security.

Nellie, the official webhint mascot

I love using the webhint VS Code extension because it helps me fix mistakes while I'm coding. It analyzes HTML, CSS, JS, TS, JSX, and more. As with other VS Code linters, webhint messages appear in the Problems pane in VS Code.

webhint VS Code extension

I recently discovered another VS Code extension called Error Lens. Error Lens takes messages published to the Problems pane and inlines them with your code. It's also configurable via a variety of provided errorLens. settings.

Using the webhint and Error Lens extensions together creates an all-new experience. Now, I can see webhint feedback on a11y, compat, and more, right on the line where the error occurs! 😍

This accessibility warning from webhint appears as I type and disappears when I fix the issue

Search "webhint" and "Error Lens" in the VS Code extensions tab to install them both.

webhint is available as a CLI, a browser extension, and a VS Code extension. It's even built in directly to the Microsoft Edge browser's DevTools. If you're interested in contributing to webhint, come find us on GitHub!

How to debug DevTools with DevTools

Rachel Simone Weil — Thu, 01 Apr 2021 19:24:38 +0000

The developer tools built into Chromium-based web browsers are—like the apps they debug—built in plain old HTML, CSS, and Javascript.

If DevTools are essentially just a web app, you should be able to run DevTools on DevTools, right? Indeed, you can! In fact, you don't need to install any special tooling to try it. Everything you need is already in your browser.

How to run DevTools on DevTools

Open your Chromium-based browser (Edge, Chrome, etc.) and press F12 to open DevTools.
Pop out the DevTools in their own window by going to the ... menu at the top right and choosing "Undock into separate window," which is the first icon in the Dock side options. Undocking DevTools
With the DevTools window active, press Ctrl-Shift-I (PC) or Cmd-Shift-I (Mac) to open a second instance of DevTools on DevTools.

Now, you can use the Inspect tool in the newly-opened DevTools instance to hover over elements in the previously-opened DevTools instance. You can tweak div sizes, colors, fonts, and more in the Styles pane, and changes will be reflected right away.

Any changes you make to DevTools won't persist and will reset on reload, so let your imagination run free!

Pink backgrounds, Comic Sans... whatever you can do with DevTools, you can do with DevTools on DevTools. By the way: This nifty Font Editor is an experimental feature you can enable in ... > Settings > Experiments to try before it's officially released.

But why?

Aside from having a new party trick to show off, why would you want to run DevTools on DevTools?

One useful scenario is for authoring and debugging DevTools extensions. Developer extensions for React and Vue, for example, are DevTools extensions. If you're authoring your own DevTools extension, you might find DevTools-on-DevTools useful.

Another use case would be for those who want to fix bugs or add new features to the Chromium DevTools codebase. In fact, the folks who build DevTools use DevTools-on-DevTools quite a bit to debug, mock up, and build new features. How do I know? Well, I'm one of those folks! 👋

I have been working with some colleagues on a new interface in Edge DevTools called Focus Mode, which allows you to group different tabs together so your DevTools don't get too cluttered and overwhelming. Running DevTools against DevTools, I was able to use our flexbox debugging features to add outlines to the flex items contained in the new Activity Bar along the left side. I could also play with the size and positioning of icons to make high-fidelity mockups to share with my team.

So, there you have it! Simple instructions for debugging DevTools with DevTools. 🎀