Meet developers where they are with multiplexed video production

CJ Avilla: If you are thinking about adding video to your dev content or scaling your video production to meet devs where they are, this is a really great place to start. So I'm CJ Avila, developer advocate at Stripe, and we've been investing in video content for, the last couple of years. I'm excited to share some high leverage stuff that we've learned that we used to create 63 videos on a bunch of topics in seven different programming languages in less than half the usual time. So if you're unfamiliar with Stripe, we are building economic infrastructure for the Internet. Millions of businesses use Stripe's APIs to take payments, make payouts, and just generally manage their business online.

And Stripe has these client libraries. In the docs, we provide code snippets in these languages so that devs of all different communities have the same sort of opportunity and experience in integrating. And so as part of our video program, we really wanted to provide some one zero one level content, which is really broadly and generally applicable for anyone that was integrating Stripe. And so we're thinking topics like authentication, pagination, other patterns in the API, including idempotency. It's funny to hear that in a previous, previous talk.

But our goals with the project were to make sure that we're providing content in the languages that developers are most familiar with and creating content that's covering these patterns that are broadly applicable and also sort of supplementing the core content in the API reference. And so what we did was for each of the topics in this scalable series, we'd create seven different videos. One for each of those officially supported server languages. And, you know, oftentimes, these concepts, these underlying concepts for your API aren't really going to change that much. So whether you're using, like, JWT or token based authentication isn't going to differ based on the client library or language.

What that means is that you can use video to really explain these high level concepts with motion graphics and, like, really rich, high fidelity explainers that are applicable in all languages, and then separately, you can sort of show the code for how to actually implement that in each language. And so here's where we're headed. Today, we're gonna talk about some things to consider before even thinking about adding video. We'll dig into some basics for getting started. The main course here is we're gonna talk about the production process, preproduction, prepping, and some postproduction, and we'll we'll wrap up with some things we're thinking about for what's next.

If at the end we run out of time for questions, we'd love to chat, on Discord or down the road on Twitter. Absolutely. Yeah. We'd love to we'd love to sync. So there's a bit of a Maslow's hierarchy of needs going on with dev content.

At the very foundation, devs are gonna expect a ton of written documentation. Right? So you you got your API reference and some hello worlds and quick starts and, you know, maybe some use case driven tutorials showing step by step how to accomplish some task. And we find that, it's important to have these written building blocks sort of installed before you start driving down the the video path. That's something to think about whether, you know, video even makes sense for your team.

But here's some really, great benefits that developers get from video. So, you know, they gain confidence when they can see someone else that's actually snapping together those pieces and how those pieces interact. Video is also a great upfront investment in creating some resources that you can then share via support. It also enables devs with different learning styles to, continue to, you know, adopt your products and learn about your products. So video is, is pretty great, and we also see this in survey data.

So in the 2021 Stack Overflow survey, it reflects that most folks are learning to code from online resources, and that sort of bundled up video and blogs and some other things. And when we dig a little bit deeper into this and we look at the data from HackerRank in 2020, we can see that, in particular, Gen z is using YouTube a lot or it's very popular among gen z. And so we we're, like, really excited about video, and, it's absolutely something that I think is worth considering once you've got sort of those foundational pieces in place. Alright. So we're gonna talk about getting started and leveling up next.

So here are some tips and tricks for both getting started and leveling up your video content. We're gonna talk about a couple different tiers. So tier one to start recording is just to flip on the camera, and, it can be super intimidating. But, you know, just dipping your toe in the water and getting something getting that ball moving is a great place to start. Industry wisdom suggests that you actually need to put out, like, a 100 videos or so before you can really start tweaking and optimizing too much, and so you'll sort of naturally get better after about a 100 at bats.

So this is a a video from two years ago. The quality was not great. It's actually just streamed directly from Zoom into YouTube. You can see all the watermarks there, shadows behind my head. I was kind of, like, tilting around in the room.

You can see that the the background here looks a little different. But that said, this video has almost 16,000 views, and apparently, it saved Sybil's life. So there's that. Also, this is, going back to talks, This is sort of my attempt at showing something unexpected to to draw out a little bit of humor, just like Greg talked about. And, obviously, I hope it's, an exaggeration.

So in tier two, this is where you can sort of start thinking on working on up leveling the quality of your content and the editing. So we use ScreenFlow for editing most of our videos. It's really simple and purpose built. We also started using some tools like Descript to help us edit. So here's a a sort of, like, tier two video that I would consider.

Note, we started to cut down on a lot of the visual clutter, and we iterated a bunch of times on, like, the actual, you know, scene that you're seeing. We're still experimenting a ton, but, this we're not a 100% sold on green screen, but it does let you sort of, like, have a floating head over the top of your code where you can, you know, express your emotions about the code that you're writing or the bug or, you know, if you're actually confused, you can show your confused face on screen. So, this was our our iteration, our tier two iteration. Tier three is when you'll start actually leveling up into doing some more live streaming and or using sophisticated editing software, maybe motion graphics tools, but you absolutely don't need to jump directly into this tier three situation. So here's a recent livestream we did with my teammate, Charles.

We're using StreamYard. It's a great tool. It's actually the tool we're using for this conference, and, it's it's really amazing. You can actually, like, pop comments from different channels directly on screen. So you can see this comment here from Mario on YouTube in the middle of the stream.

There's a ton of, more advanced tools for streaming using OBS and some other things, but, this is a great, a great tool. So let's talk about our, our production process. So this is our typical production process for a single, scalable, educational, prerecorded topic. So we'll repeat this process for each of the topics in a series, and then the process is very, very similar for most of our prerecorded content even if we're not sort of taking the scalable approach. But, we'll dig into preproduction where we generate ideas and topic ideas, and we build a demo, write a script around that demo, and then record, edit, animate, and release the content.

So when you're first getting started, one of the challenges is generating ideas for videos and prioritizing those ideas. And so we'll look for popular or highly engaged Stack Overflow questions, GitHub issues. We also look for themes and support tickets in chat, on Discord, or IRC. We also try really hard to keep our ear to the ground on social media. So looking at comments on past YouTube videos is a really great way to find requests for, you know, slightly different topics.

We also have found that, using internal metrics like comments from Docs CSAT or, like, the customer satisfaction surveys that folks submit, oftentimes, they'll just write video in there. So you could tell, like, okay. People might want video, content about this written article that's, on our docs or whatever. So, next step is to build a demo. So running through and having that demo prepped and ready to go can be really, really helpful.

It's a great thing to start with, and it gives you an idea of the full picture of the code that you want to show. And, you don't necessarily need to write all of the code for the entire demo live, but you should absolutely know which pieces you want to write live or sort of zoom in on, and a lot of this can be found as you're building the demo. So, when we're talking about scalable production, and you might be doing this in a couple different languages, when you're first building the demo, it can be helpful if you write one in, a dynamic language and then one also in the statically typed language. That way, you have a couple different perspectives at least before you start writing a script. So, in the previous talk, Fatima went over writing a script, her lines were, like, way better than my line here, but, it gives you the same sort of feel.

Right? Like, when I'm thinking about writing a script, I do wanna tell a story. Right? And so, it's similar to a sparkline, right, where we've got, you know, different points in the story where we might have highs and lows. And so you wanna sort of think about some story arc and write a script that ties in the features and products you might wanna introduce or the things that you want to go through.

So Ricardo, a few, sessions back, talked in his talk also about how in walk throughs, he'll sort of intentionally make mistakes to show both debugging thought process and maybe help tutorials feel a bit more, approachable. So, here's an example I I like to do. This is sort of an arc that I I tend to prefer for presentations that I do where I'll present a challenge, suggest some naive solution to that challenge, discuss the drawbacks of that naive solution, and then ultimately show some best practice. So, yeah, that's that's the first part of writing a script. In terms of, like, the actual tactical stuff, I really like using Dropbox Paper because it lets you have code snippets.

If you're lucky, you can have a docs reviewer or, you know, the support team come and look through the script with you to make sure that you're answering common questions. Great to have code snippets. Also, we sort of developed a shorthand markup in our scripts that lets us know which parts are screen captures versus animated slides versus intros and outros, etcetera. Another alternative is to use a storyboarding technique. You can just write slides or, you know, have your content, the the spoken content as the speaker notes, or you can maybe even have a two, you know, a two column grid where on the left, you'll show an image of what you want to see on screen.

On the right, you'll write your voice over. Alright. So if you're just starting out, there's a couple different techniques for recording a screencast. We found it helpful, to do one of these different these different patterns. In the beginning, we I would record just in one shot as if I was screen sharing just like this call.

That felt most natural to me when starting out. So that might be a good place for you to also start. This is a a technique we call last take, best take. So when you're recording and you're gonna go back and edit out several takes of different sections, maybe you write a little bit of code and you're not happy with the way that turned out, what you can do is go back. And so you can actually clap on screen while you're recording, and what that does is it creates this visual spike in the audio waveform that can really help when you're editing.

So you can go back and find these spikes and just, like, really quickly remove chunks of the video that are the bad takes. So that can be really helpful, if you're recording this way. Another way to, record is this alternative style where you sort of record your screen and yourself separately. It allows you to sort of radio edit yourself and then sort of fit all the code and its timing into your spoken explanation. So it allows you to focus all of your attention on either writing the code and performing the steps of the demo or speaking as clearly as possible.

So it's, another useful thing that you can do too is try to, like, avoid jumping around a ton. But, yeah, so depending on which recording style you're using, here's a few different tips. When you're going back through the recording and editing, most editors support watching that back at two x or faster. So you don't have to watch it back at the same speed that you recorded it. You definitely wanna use keyboard shortcuts, remove those lulls.

And if you are a slow typer, that's totally okay. Most folks can grok what you're typing faster than you can type it, so just consider increasing the speed of that later on. Another thing that can be really useful is just taking a breath and pausing. If you need to gather your thoughts or collect your thoughts about what you're saying, you can just take a moment. And what happens is that the audio waveform will have a nice flat line where you weren't speaking.

Right? And so that gives you another opportunity to just go in and really easily chop something out. Alright. So it could be really helpful when you're building your motion graphics and explainers to start with some static slides. This is actually where most of the work gets jam packed into is building out these motion graphics and explainers.

So if you start with these, static slides, and then you can really start to bring your story to life and bring your explainer to life by moving things around. So ScreenFlow, in particular, supports keyframe animation. It it's kinda like Flash back in the day, where you can take some object on the screen and then transform it into some other end state, and it'll sort of, animate across the screen. We really like using these basic keyframe animations. There's tons of different tools and services that can help with motion graphics.

You could hire someone off Fiverr or Upwork. You can buy, templates on videohive.net. There's a tool called After Effects that is really great for motion graphics. So what, the key to this entire thing is that you'll build your motion graphics just one time. That's these blue boxes, and that's where you're gonna invest most of your time.

And then each language, you'll have the the code walkthrough in each language, and you can sort of splice them all together so that you can spit out a video that has motion graphic plus code, motion graphic plus code in seven different languages, and we we found this to be really, really effective for building video in a scalable way that really meets developers where they are. So one challenge that we have encountered sorry. Let's, we're, I know that we're we're getting close on time, so I wanna I didn't wanna, like, blast through this last couple slides, but I do wanna talk about what's what's next and what we're thinking about for what's next. So here we go. One of the challenges that we encountered with this type of content is finding a good way to surface it and surface the relevant videos for developers given specific language preferences.

So not just their server language preferences, but maybe their their client also. So maybe they're using Node on the back end and Android on the client. And so this is kind of an example of an interface that we're we're thinking about where a developer could select their back end language, they could select their front end language, and we can curate a list of videos that we've created in different chapters that would take them through an entire sort of end to end integration and sort of dynamically generate these courses. So, that's really, really exciting. Thank you so much for watching.

And, I guess the most important thing that I wanted you to take away is that you can just start recording and start producing this content, and it it can be very, very high leverage and really, really useful for devs.