Introduction to the Best Code Playgrounds: JSFiddle, Codepen, and CodeSandbox

With the advancements in JavaScript in the latest years, creating, editing, and running code is no longer constrained to offline editors running on the developer’s computer; nowadays, we can run our code in online environments called “playgrounds” — and there’s quite a lot of advantages of using them.

As the name suggests, a code playground is an environment where you can play with your code: a typical scenario would be (like in all games) trying a new feature out, then seeing if it breaks — quite a scientific approach! Code playgrounds are also similar to the real-world playgrounds for children: they both share a social aspect. The code you upload to the playground can easily be shared and interacted with — this facilitates collaboration between developers and continues the good tradition of open-source.

To be fair, the services we’re about to discuss all function in a similar manner: they take your code and run it in their sandboxed environments; the resulting little products are called “fiddles” (in the case of JSFiddle) or “pens” (in the case of Codepen) — and then you can share them for the whole world to see and be amazed

How can code playgrounds be used?

Introduction to the Best Code Playgrounds: JSFiddle, Codepen, and CodeSandbox

Although it may seem that the playgrounds’ functionality isn’t that rich, there are actually a lot of interesting use cases.

  • Demoing products or libraries : companies that provide JavaScript-based services often use code playgrounds as a way to host and show their product for free: Google (Google Docs), Mozilla (Mozilla Developer Network), Vue.js (documentation), Shopify, StackOverflow, and Highcharts all do that.
  • Reporting bugs in test-cases for GitHub issues.
  • Linking code snippets to help people on Stack Overflow.
  • Collaborating on code in real time.
  • Conducting live interviews for developer positions: to do this, interviewers provide sample code or a code test for solving, then turn the collaboration feature on; this allows the interviewer to monitor the candidate’s progress.
  • Hosting code snippets (and inserting them into blog posts or personal portfolio)
  • Unit testing code (e.g. via QUnit or Jasmine)
  • Learning web-based technologies from real-world projects.

Workflow

So how is workflow in these playgrounds organized? Let’s examine how we can work with these platforms using JSFiddle as an example. When we open the playground, we find ourselves in the main editor area which is divided into 4 tabs: HTML code, CSS code, JavaScript code, and the resulting magic that these technologies create (in other words, output). JSFiddle will offer you to start with a boilerplate project (Vue, React, TypeScript, jQuery, and so on) — this saves you time as you don’t have to put links to the external resources manually.

Interface customization. Some users may want to edit the default layout — you can do it in the “Settings” tab, choosing between tabs and columns and fine-tuning where each window should be located.

General settings. The settings tab is similar in its functionality to traditional offline editors: you can pick a theme (dark/light), fine-tune indentation and fonts, turn auto-saving, auto-running, and brackets auto-closing on, and so much more.

Introduction to the Best Code Playgrounds: JSFiddle, Codepen, and CodeSandbox

HTML, CSS, and JavaScript settings. Users can specify which libraries, frameworks, components, and preprocessors they wish to use: for HTML, you can choose the doctype and the language (HTML/HAML); for CSS, you can choose the language (CSS, SCSS, SASS, or PostCSS) and turn “Normalize CSS” on, which creates the normalize.css file and allows for better cross-browser compatibility for HTML elements in default styles; for JavaScript, you can choose the language (JavaScript, CoffeeScript, TypeScript, etc.), frameworks/extensions (React, Vue, jQuery, AngularJS, D3, etc.), and load type.

The “Resources” line on the left allows to place direct links to .css and .js files from third-party sources — you can connect external components (e.g. fonts).

JSFiddle

Introduction to the Best Code Playgrounds: JSFiddle, Codepen, and CodeSandbox

Not forgetting their open-source roots, the team behind JSFiddle is really open about where this project is heading: their roadmap hosted on Trello shows what JSFiddle developers are planning to add next, all the while welcoming new ideas and suggestions from their users.

Codepen

Introduction to the Best Code Playgrounds: JSFiddle, Codepen, and CodeSandbox

A great feature available to Codepen users is real-time result update: unlike some playgrounds where you have to hit “Run” to see changes, Codepen does it automatically. To help power-users scale their creations, the “Projects” feature can be used to serve like an IDE/hosting tool, allowing developers to manage far more complex apps.

The team behind Codepen also aims to build a community around its platform, offering blogging capabilities, rich profile customization, a weekly newsletter, a job board, and a podcast. Here are the most popular pens available to date — as the website’s tagline suggests, they’re ideal for learning and drawing inspiration from!

CodeSandbox

Introduction to the Best Code Playgrounds: JSFiddle, Codepen, and CodeSandbox

The main difference of this playground lies in its focus on whole projects and working with several files (.html, .css, and .js) CodeSandbox has a number of features that help this platform stand out:

  • Live collaboration : using the Live Session feature, users can be invited to collaborate in real time (similar to how Google Docs functions); additionally, Classroom Mode allows to host the playground for 30+ users, specifying usage right for each person (e.g. the right to edit the code)
  • Interacting with GitHub repositories directly : CodeSandbox users can import/export from Github as well as work on a repository directly, creating pull requests or commits with the new changes.
  • In-browser VSCode : a fork of VSCode was created to work in CodeSandbox, allowing for Keybindings, User Snippets, Breadcrumbs, VSCode Settings, and many other features — the settings can be ported directly.
  • Dashboards : for better organization and categorization, Sandbox can be grouped into directories (once again, Google Docs-style) — and the option to create teams help to keep things organized even better.
  • Helping beginners : CodeSandbox also aims to be a platform where people can gather to learn new stuff — and when they make a mistake, they’ll be offered suggestions on how to fix them. Alternatively, users can utilize the search page to scan 1,000,000+ sandboxes when they need some examples.

Here are some awesome projects hosted on CodeSandbox.

Honorable mention: Web-Maker is another code playground that works offline.

Conclusion

A code playground is just another tool in the web developer’s arsenal — but despite its apparent simplicity, it can offer many great features. Whether you choose JSFiddle, Codepen, or CodeSandbox for your next project, be sure to use them to their fullest potential. Good luck! 🙂

The post Introduction to the Best Code Playgrounds: JSFiddle, Codepen, and CodeSandbox appeared first on Hire Professionals or Get Remote Job.