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
Although it may seem that the playgrounds’ functionality isn’t that rich, there are actually a lot of interesting use cases.
- 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.
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.
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).
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.
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!
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.
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.