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)