I am building a simple website with small but useful code examples of how javascript works for people that are new to the language. It is nothing fancy but I ran into the problem of showing lots and lots of code snippets on my page. Since there were many I needed to find the right service that would load a lot of code snippets FAST. I tried JSFiddle, GitHubGist and CodePen. These are my findings:
- Simple and elegant design
- Nice code color theme
- takes two-three seconds for loading 10 snippets
- The link changes depending on the number of times you changed the snippet
- Nice and spacious UI for creating html, js and css at the same time
- A bit bulky in design but can be edited with a gist-embed library
- Takes 1 second or less to load 10 snippets
- Does not have "Result" tab that shows compiled result of the code snippet
- Multiple files such as JS, CSS, HTML show as multiple snippets
- A very good and fast updating and tracking of changes system
- The slowest of the bunch ( for me at least ) 3+ seconds loading
- Nice way to toggle on or off code and see result
- Has a nice option of saving the code snippet as a gist
- Editable without extra effort ( external libraries )
- Lot of help while typing even if its not vanilla JS
GitHubGist is not the prettiest and I really miss the "Result" button and the multiple screens for multiple documents, but I think I will use it for my project because it is the fastest and I can track and change my snippets easily. People can also contribute by directly sending changes or fixing some mistakes in the code.
I would love to hear your experiences and thoughts on this. Also if you have any idea of a better service that is not mentioned above or a suggestion on how to use the above mentioned services better feel free to share it.
Top comments (5)
Have you considered using highlightjs.org/ for your website? It worked quite well for me (and it's easy to combine with Markdown). But I didn't need to execute code snippets and display the results. If you need that, I guess something like JsFiddle or CodePen is the way to go.
This is a great alternative Alex. Executing code snippets really saves me time by showing an interactive version of the utility I am trying to present, instead of me coding an interactive example. Even tho this library does not support that feature, I really like that it would make the site load almost instantly. I could probably code some of the examples by hand if I really want users to interact with the example. Thanks :)
Try to Klipse which is available code execution feature.
It will be hard to showcase manipulation of DOM with this, but I will definitely have this in mind. Unlike all other alternatives, this actually lets the user type in his own code in the example ( CodePen has the option, but you have to pay ). I am impressed!
Have you tried stackblitz.com/? Here is a embed example: stackblitz.com/edit/sdk-create-pro...