YouTube: Leaflet in SvelteKit

Who told you coding videos can’t be fun?

Let’s be honest: Most coding videos are kind of boring. They are either too long, too slow, too fast, too dry, too serious, too… you name it. We wanted to change that and created a video that is fun to watch and still teaches you something useful. Sure, it’s not a full-fledged Udemy course but it’s a start if you’re trying to solve a specific problem.

The key ingredient here is storytelling. The main assets are naturally code fragments but these don’t move and are not very exciting to look at. In our first attempts to spice things up, we just used animated backgrounds and lots of B-Roll overlays. This works quite well but we wanted to take it a step further and add characters to the mix. Unfortunately, nobody here wanted to show their face on camera so we had to come up with something else.

With our recent dives into the AI world in mind, we decided to play around with Midjourney and Leonardo AI. A few prompts later, we had our main character: An AI-generated, alien-fingered nerdy female programmer with the weirdest glasses you’ve ever seen. Why not?

The problem with these AI tools is that it’s pretty hard to generate different shots and scenes with the same character, interior and overall look. That’s where editing comes in. We found that by using clever J- and L-Cuts to connect scenes and by mixing in some neutral bridges, you can actually get along with imperfections like changing cloths or a different background. A lot of our viewers probably won’t even notice or if they do, they’ll just grin it off because they might know these limitations well.

As for our voice acting, we have to admit that we’re not native speakers and can’t afford professional actors. So we decided to use a popular text-to-speech AI tool called ElevenLabs. It’s not always perfect in terms of intonation and a bit hard to control emotion-wise but it’s good enough for our purposes. I also found it helpful that AI voice generation forces me to type out my script word-by-word. This gave a good feeling about how long certain clips would be and how many cuts they’ll have.

For actual code, we use Snappify which is basically Canva for code snippets. It’s a bit pricey but definitely worth it if you’re managing a lot of code fragments. Our tool of choice for screen recordings is Screen Studio. The cool thing about it is that it records your screen twice so that you can add or change dynamic zoom effects in post-production.

The rest is hard editing work. I’m an Apple Final Cut & Motion person but some of my colleagues prefer to work with the Adobe Suite and Premiere Pro. Both get the job done just fine. In the end, it’s all about the story you want to tell and the tools you’re comfortable with - just like in software development.

Let us know if you like this kind of content and if you want to see more of it. Do you have a great idea for a video and need some help with the production? Then contact us and we’ll see what we can do! We’re always happy to hear your feedback.