RIP Your Content Graveyard - Part 2

Extend your content’s reach by transforming video tutorials into written guides.

Technical tutorials are a staple for any developer-first content.

However, it’s a ton of work to make a tutorial. Steps need to be clear, visuals and code samples are a must, and it should concisely get your audience to success. You’ll probably want to make both a video and a written version since people like to watch at first, but actually do with the written content.

Say you hosted a livestream where you and a guest built a demo over 2 hours. Let’s walk through an example of transforming that livestream into a written piece:

Creating the written tutorial:

• Re-watching your livestream on 2x speed and take notes [60 minutes]
• Extracting code snippets and breaking it out step by step [60 minutes]
• Taking relevant screenshots from the video [30 minutes]
• Editing and polishing [30 minutes]

Total time spent: 3 hours

It’s important to create the written tutorial because:

• Text is easier for search algorithms to index, so people can find your tutorial
• Making your code easy to copy and paste will help more people find success with your tutorial
• Some people just prefer reading to watching

We created Contenda because as engineers ourselves, we love learning new skills and reference tutorials all the time, but even we got tired of pausing on YouTube videos to double check the code sample.

With Contenda, you can create a written tutorial from a livestream by:

• Email [e-mail] with the link to your livestream [No effort - just a 24 hour turnaround time]
• Review, clean-up, and post! [15 min]

…saving you countless hours of manual effort and listening to your own voice recording.

How it works:

We’ll take an example from a recent Twitch stream tutorial from codingcat.dev titled “Building a game with Flutter Flame Engine”.

The full stream clocked in at 2.5 hours and featured Lukas Kingsbo, a Flutter game developer.

There was a ton of great info on Flutter covered in this stream. But, like a lot of live streams, the final video ends up having some technical difficulties, live Q&A, and lots of fun talk between the hosts.

For this video, we want to:

• Create a cleaned up, written version of the live tutorial
• Provide code snippets and screenshots where helpful

With Contenda, you’re able to generate different types of blogs based on your goals. Based on these objectives and the structure of the video, Contenda generated a technical tutorial.

Check out an excerpt from the generated tutorial:

How to add a player sprite

The first step is to add the player sprite to the game. In lib, start a new file called player.dart. Flame uses something called a sprite animation component to represent the player. A sprite is an image in game terms. The player class extends the sprite animation component.

class Player extends SpriteAnimationComponent { }

When you want to load something in the beginning, we can use the onLoad method. The onLoad method is more complicated than it looks, but usually you don’t have to care too much about the Future type if you remember that it’s similar to our async process. This is for the engine to be able to wait for all the components, images, and assets to be loaded before it actually tries to show it on the screen.

class Player extends SpriteAnimationComponent {
  @override Future<void>? onLoad() {
    final image = await Flame.images.load('ember.png');
    return super.onLoad();
  }
}

In the onLoad function, we can try to load the image that we’re going to use. We’ll wait for the finalImage to load. The finalImage will be the Assets.images.upload. And we’ll have the finalName that we had in our assets folder, which was ember.png as a string. Once we have the finalImage, we can return it.

Now, in under 24 hours, we’ve got a technical tutorial, complete with screenshots and code snippets, that can fully substitute the video.

Contenda-generated blog posts are 75% complete. For tutorials, the majority of editing time will likely be trimming down steps (we err on the side of providing all steps, instead of removing) or adding in extra explanations that you might not have covered in the video.

Interested in a demo? Contact us today and let’s bring your content graveyard back to life.