How to Share Code and Make It Shine
We all have shared code in some way with friends, colleagues and even with the world! It may have been through emails, code blocks in documentations or articles, Github Projects or Gists. Now, for sure, the quality and design of your code is pretty important to make it shine. In this article, I’m only addressing the case in which your code is worth sharing by your own standards.
In the past few years, I’ve contributed to the development of two developer platforms - CodinGame and Tech.io - which now count more than 900k developers in total. I’ve seen that the way you share your code affects its readability and influences the perception of readers, especially if they can interact with it and see what it does.
The best way to understand this is to actually have an overview of all the tools that are available to us and understand what you can do with them.
Ok, so what’s out there to share your code?
First, the non-runnable code snippets
If you’re a Github aficionado, you’re probably already using Gists. Github Gists are beautiful code blocks — they highlight the syntax for most languages. Every Gist is a fully forkable Git repository. Surely you don’t need that for any code snippet, but it certainly opens up a lot of possibilities. Here is what it looks like:
That’s a classic! Pastebin.com allows you to store any kind of text for easy sharing. You can store up to 10 pastes per day as a guest, probably more than enough for a vast majority of users. The site offers syntax highlighting for more than 100 languages. If you don’t find yours in there, you must be coding in a very weird language.
What about the runnable Code Snippets Sites?
Being able to run a code snippet makes it much more powerful. You don’t have to just hope that your code will work. You can test it directly, and anyone can test it and see what your code does — well, depending on the tool used -
JSFiddle is probably the default site you’ll be heading for if you want to share a working front-end example. You usually find JSFiddle completing a StackOverflow answer, even if Stack Overflow created their own homemade solution a few years ago. JSFiddle is not the sexiest snippet site anymore, but try to remember what you thought of it 6 years ago. It was so cool!
It is also embeddable on Medium to look pretty, but you cannot interact with it. For instance, you cannot display the HTML, CSS or see the result in the example below.
KLIPSE handbook for interactive code snippetsbook.klipse.tech
The number of languages repl.it supports is impressive. It also has a bunch of interesting options as part of its environment, such as adding new files and the ability to use stdin.
The main drawback I see is that you can’t modify the code in an embedded snippet, and you can’t embed the code anywhere if you wanted to. Unfortunately, their current focus seems to be on their classroom tool.
I guess Tech.io is the new kid in town. The best way to understand what it can do is to check it out yourself, just below!
Below is some front-end code. Don’t hesitate to edit the code directly and click on Run.
Finally, it has a viewer component that will display whatever the code is about. If it is a full web app, it will instantiate it, and you will be able to interact with the full web app directly from the viewer.
What happens for some back-end code? You can indeed play with a full API if you want to.
You can even have a full shell interface and interact with it.
Finally, the tool is free, very easy to use and you don’t have to sign up for anything. Check for yourself here.
What’s missing, then, on this tool? Deeper integration with Github to add the snippet to your repositories. The current Tech.io platform lets you create short hands-on tutorials — named playgrounds — that are hosted and forkable on Github, but you can’t yet do that with the snippet.
Tools worth mentioning
Finally, Runkit.com is worth mentioning for node. You can see it running live in the getting started section for Express. The variety of options it provides is pretty impressive. Also, for some React, Vue and Preact, you should definitely check Codesandbox.io.
Ok, so what’s the best one?
There are definitely a lot of tools out there, so I guess some comparison spreadsheet could be really helpful!
I guess it depends on your need. Some are powerful enough to cover all your needs, especially Repl.it and Tech.io Snippet. But, in any case, you should definitely have a look at several of them by yourself to see which one you feel most comfortable with.
What snippet sites do you use? Perhaps some I did not mention; there is a huge — old — list on Wikipedia. What features would you like to see and don’t have on any of those tools? As usual, any comment is welcome; don’t hesitate!