DEV Community

Drakso
Drakso

Posted on

Your experience with embedded JS code snippets

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:

JSFiddle:

  • 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

GitHubGist:

  • 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

CodePen:

  • 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.

Discussion (5)

Collapse
orkon profile image
Alex Rudenko

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.

Collapse
drakso profile image
Drakso Author

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 :)

Collapse
artlantis profile image
Oğuz Çelikdemir

Try to Klipse which is available code execution feature.

Collapse
drakso profile image
Drakso Author

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!

Collapse
callistom profile image
callistorr90

Have you tried stackblitz.com/? Here is a embed example: stackblitz.com/edit/sdk-create-pro...