Photo by Rhett Wesley @unsplash
If you're into web development, you probably already know what CodeSandbox is, and you sure know what Github is (if not, well, time to leave your cave 😁). For those who never used CodeSandbox, here's what it does:
CodeSandbox is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click. Use it to create static sites, full-stack web apps, or components on any device with a web browser.
I personally use it a lot, I find it really useful to try some stuff in complete isolation, free of any constraint the project you're working on can have. It's also quite common to provide a sandbox with the minimum setup to reproduce a bug you're asking for help with.
That said, I recently learned some amazing tips & tricks to get more productive with these tools, and this was my reaction:
Wait, what? 😱 How am I only finding out about this now?
So I decided to make a quick post to share those with you, I hope you'll find it as useful as I do.
#1 Kickstart a sandbox
A common thing to do when creating a sandbox is to choose a template. Either you're working with just JavaScript, TypeScript, React, Vue, or Angular, they got a template for you so you can start coding right away.
Well, here's where the magic happens: go ahead and open a new tab in your browser, and type the URL js.new. Hold your breath, and press Enter
...
✨ Tadaaaa ! Amazing, right?
You can now start coding with your favorite template in a split second. Also works with:
And more...
2 - Turn a GitHub repo into a sandbox
Sweet, now that you know how to create a Code Sandbox from a template faster than Lucky Luke shot his gun, what if I tell you that you can do the same from a Github repository?
🔥 That's right! Open one of your favorite repo, and just insert box
between github
and .com
:
https://githubbox.com/User/Repo
I love this one.
Bonus - VSCode in the browser (whaaat ?)
I'll leave you with this last one, my absolute favorite of all. Instead of inserting box
between github
and .com
, if you insert 1s
, it will open VSCode in your browser 😍
This makes it so easier to browse a repo and read the code through the entire project, just like you would do on your local machine.
Aaaand it's open-source, feel free to check it out: https://github.com/conwnet/github1s GitHub and "smash that star button" as they say.
Alright, that's all for today, I hope you enjoyed it. Feel free to leave your tips in the comment if you got something similar in-store, I really love those 👌
Top comments (0)