Book cover

Post Runnable Code Snippets

Help Your Readers Learn Faster

Learning how to code or to grasp a new programming concept is no walk in the park. Practice is very much needed just like when learning how to swim or to fly a plane. The sooner practice follows the acquisition of knowledge, the stronger that nugget of knowledge cements.

That’s not normally the case with posts with code: Authors may include code samples of interconnected, complex concepts and expect readers to follow that with practice on their own. However, readers may face hurdles like unclear prerequisites, conflicting dependencies, unsupported operating systems or hardware, etc.

One solution that comes in handy is Docker images: Authors can provide images that take care of the complicated setup; readers, in turn, simply need to run them using a single Docker command. That said, getting started with Docker can be a challenge for some readers depending on their experience level. The better solution is to run the code where it’s being read — in the post itself. Luckily, this is possible today thanks to web IDEs and online code playgrounds platforms like Tech.io, which offers this service (and more) for free.

Using Tech.io, you may write code in almost any programming language of your choice using a sophisticated web IDE and then use an iframe or Embed.ly, which means you may use it on Medium and other platforms, to embed code snippets in your posts. Readers can view your code snippets in Tech.io’s embedded web IDE, which supports syntax highlighting, autocomplete, folding uninteresting lines, and — more importantly — editing! Readers can tweak the code and run their own version or revert back to your version with a click of a button. Here’s an example:

Tech.io furnishes a slew of features; some are more advanced than others. The below is a quick guide of when and how to use them:

Here’s an example that displays a 3D surface plot:

We used Tech.io to build a playground with 300 lessons for the material of Computing with Data; the playground’s config can be found here.

Happy coding!