Titans Journal Day 13: Playgrounds & Sandboxes

Found a really neat React playground today!

While running node from the terminal is good for quick syntax checks, I've been using LeetCode for more involved sandbox coding. But the LeetCode React playground never worked for me, and it only provides 10 free playgrounds.

LeetCode:

I'm already paying for too many SaaS tools, so I started using another free playground service by Codepen. By default, it brings up HTML, CSS and JS coding pads. I only want to use it for JS, so I minimized the HTML and CSS and bring up the console to cover the output. This set up is able to accomplish the same I have on LeetCode, and the console output looks beautiful on Codepen. The only catch here is that the free accounts can only do public playgrounds, which doesn't really matter to me as these are only playgrounds.

Codepen:

These playgrounds I can easily create locally if I want to. However, I don't want to create a new React folder every time when trying something out. React requires more files in the folder and requires some kind of deployment to view the output.

Having a truly working React playground would be so much easier for trying out frontend codes--I have fallen in love with the CodeSandbox playgrounds! (See banner image). You can choose the version of React you wanna run, plus create your own templates. You can also deploy the apps to free services like Zeit or Netlify.

CodeSandbox Deployment:

CodeSandbox also has playgrounds for different stacks, including fastify--my favorite minimalist backend framework.

With these playgrounds and testing tools, I can experiment with new ideas and or try out new codes easily, which ultimately improves the overall quality of the codebase.

What are your favorite playgrounds?