Any of you follow my writing will know that one of my passions is explaining technical concepts and projects clearly and concisely. One of the common locations for starting these explanations is documentation, and as a majority of documentation is delivered as HTML, I am constantly encouraging developers and writers to embrace all that the format gives you. Scrimba is one of a handful of options I have seen over the past 18 months that integrates code explanations and examples into one cohesive package. It’s aimed more at screencast creators than documentation writers, but in my mind, anything that helps explain concepts to users is documentation.
To start creating with Scrimba, log in with GitHub, click the create menu item and select a template (I chose ‘JS, HTML, and CSS’).
From here click record and start adding your code, you can also toggle the console and run your project at any time and Scrimba will keep recording until you click stop, you can even record accompanying audio with Scrimba.
Once recorded, Scrimba has basic editing tools to let you skip (retaining) or cut (destroying) footage. When you’re finished, you can save and publish your screencast, but be careful as you can’t edit yet.
Here’s the small sample project I created, complete with audio and edits.
And that’s pretty much it for now, the basic steps for creating and sharing a screencast for web-based technologies are straightforward and enough for any education enthusiast. The team has other features and improvements planned, including improved HTML support and changing file linking (mentioned above) to act more like a ‘normal’ offline project.
Let’s push technical explanations forward with tools and resources that suit our medium, Scrimba, and tools like it are in their early days, but fully embrace the potential of the modern web to help nurture the next generation of web developers.
Feature image from here