Tuesday, 14 August, 2018 UTC
Summary
A variety of front-end code playgrounds have appeared over the years. The majority offer a quick and dirty way to experiment with client-side code and share with others. In this article, we take a quick look at seven of the best.
Typical features of these online playgrounds include:
- color-coded HTML, CSS and JavaScript editors
- a preview window — many update on the fly without a refresh
- HTML pre-processors such as HAML
- LESS, SASS and Stylus CSS pre-processing
- inclusion of popular JavaScript libraries
- developer consoles and code validation tools
- sharing via a short URL
- embedding demonstrations in other pages
- code forking
- zero cost (or payment for premium services only)
- showing off your coding skills to the world!
The best feature: they allow you to test and keep experimental front-end code snippets without the rigmarole of creating files, firing up your IDE or setting up a local server.
JSFiddle
JSFiddle was one of the earliest code playgrounds and a major influence for all which followed. Despite the name, it can be used for any combination of HTML, CSS and JavaScript testing. It's looking a little basic today, but still offers advanced functionality such as Ajax simulation.
CodePen
The prize for the best-looking feature-packed playground goes to CodePen. The service, co-founded by Chris Coyier, highlights popular demonstrations ("Pens") and Projects, which is an online Integrated Development Environment you can use to build and deploy web projects, a feature added in March 2017. It offers advanced functionality such as sharing and embedding of Pens, adding external JS and CSS libraries, popular preprocessors, and tons more. The PRO service provides cross-browser testing, pair-programming and teaching options starting from just $9 per month.
The post 7 of the Best Code Playgrounds appeared first on SitePoint.