The Best Cloud-Based Code Playgrounds of 2021 (Part 1)
A plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with client-side code and…
The Best Cloud-Based Code Playgrounds of 2021 (Part 1)
A plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with client-side code and teach/share with others without the hassle of configuring a development environment.
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 following list is in no particular order and which playground you use is a matter of application and personal taste, they each have their own specialities.
1.) REPL.IT
My personal favorite for it's simplicity, versatility and capabilities.
⚫No downloads, no configs, no setups
In your browser. Repl.it runs fully in your browser, so you can get started coding in seconds. No more ZIPs, PKGs, DMGs and WTFs.
Any OS, any device(I'm looking at you chromebook coders). You can use Repl.it on macOS, Windows, Linux, or any other OS .
⚫Clone, commit and push to any GitHub repo.
Repl from Repo. Get started with any Github repo, right from your browser. Commit and push without touching your terminal.
⚫Markdown Preview
>A new but fundamentally important feature
⚫No-setup Unit Testing
>Unit testing is a powerful way to verify that code works as intended and creates a quick feedback loop for development & learning. However, setting up a reproducible unit-testing environment is a time-consuming and delicate affair. Repl.it now features zero-setup unit testing!
⚫HTTPS by default
In the example below I have 72 solved Javascript Leetcode Problems but REPL.IT can handle almost any language you can think of.
Here's another one that contains the Repl.it Docs:
JS-Fiddle
jsFiddle **_is a cloud-based JavaScript code playground that allows web developers to tweak their code and see the results of this tweaking in real time. The editor supports not only JavaScript and its variants but also HTML and CSS code, and it further supports popular JavaScript frameworks, such as jQuery, AngularJS, ReactiveJS and D3. The ad-supported site is also completely free to use._**
⚫Entering and running code
JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result.
- HTML — structure code, no need to add
bodydoctypehead, that's added automatically - CSS — styles. You can switch pre-pocessor to SCSS
- JavaScript — behavior. There are many frameworks and code pre-processors you can use
Once you enter code, just hit Run in the top actions bar, and the fourth panel with results will appear.
⚫Saving and Forking code
- Save / Update will do what you think, it'll save a new fiddle or update an existing one (and add a version number to it)
- Fork will split out an existing fiddle into a new one, starting with version 0
StackBlitz
- Installs packages ≥5x faster than Yarn & NPM 🔥
- Reduces the size of
node_modulesup to two orders of magnitude 😮 - Has multiple layers of redundancy for production grade reliability 💪
- Works entirely within your web browser, enabling lightning fast dev environments ⚡️
Dependencies still slip into the install process as dev & sub-dependencies and are downloaded & extracted all the same, resulting in the infamous black hole known as
node_modules:
This is the crux of what prevents NPM from working natively in-browser. Resolving, downloading, and extracting the hundreds of megabytes (or gigabytes) typical frontend projects contain in their node_modules folder is a challenge browsers just aren't well suited for. Additionally, this is also why existing server side solutions to this problem have proven to be slow, unreliable
Embed Options
<iframe src="https://stackblitz.com/edit/angular?embed=1"></iframe>;
Here's a sample project of mine, it's a medium clone… (So Metta)… feel free to write a post… or don't …but either way … as you can see… Stack Blitz enables you to write serious web applications in a fraction of the time it would take with a conventional setup.
Glitch
⚫
Glitch ** provides two project templates that you can use to start creating your app:**- Classic Website
- Node.js
If you know the type of project that you would like to create, click here to get started! Or keep reading to learn more about the Classic Website and Node.js templates.
⚫Classic Website
An existing project will be identified by Glitch as a static site if it does not contain one of the following files:
- package.json
- requirements.txt
- glitch.json
⚫Node.js
⚫Here are some other ways to get started on Glitch…
Still not sure where to start? Check out these categories of community-built apps for inspiration:
Here's a (temporarily) broken version of my personal portfolio .. hosted on glitch
Click ‘view app' below to see how it renders
If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:
bgoonz's gistsInstantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…gist.github.combgoonz — Overview
Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com
Or Checkout my personal Resource Site:
Web-Dev-Resource-HubEdit descriptionweb-dev-resource-hub.netlify.app
By Bryan Guner on March 20, 2021.
on September 23, 2021.