DEV Community

loading...

Using VS Code and GitHub Gists As a Web Development Playground

Jonathan Carter
I build developer tools and services at Microsoft (currently VS Online, Live Share, IntelliCode, and Playwright, previously CodePush, IE Dev Tools, Visual Studio, Azure).
・1 min read

Developing web applications can be hard! And as result, it can be extremely valuable to experiment with HTML, JavaScript and CSS, and then visually iterate towards the solution you're looking for (e.g. a specific behavior or styling). Because this kind of "exploration" is so useful--and for many of us, happens regularly--it felt like it should be easy to create/share/fork new ideas, without having to leave your editor in order to do it.

To address this problem, I built the notion of "web playgrounds" into the GistPad extension, so that at any time, you can create new playgrounds within VS Code, and then edit HTML, JavaScript and CSS, alongside a live preview experience. Once you're done with the playground, simply close the preview panel and move on, without having had to switch contexts and/or losing the power of your VS Code editor + highly-personalized extensions 🔥

Behind the scenes, playgrounds are stored as GitHub Gists, which ensures the code is persisted and reusable in the future. Furthermore, since GitHub Gists can be shared and forked by others, this enables an entire ecosystem of playgrounds to form as new "base templates" are defined, which can increase productivity for specific types of playground scenarios (e.g. TypeScript, Angular, Vue.js).

This playground experience is very early, but I'm excited to begin engaging with the community, learn new use cases and requirements, and see how we can improve the experimentation experience for web development within VS Code 🚀

Discussion (6)

Collapse
codethug profile image
Nicolas Quijano

This is so brilliant, it's also prototyping heaven with the GitHub and gist integration : run a gist, gets stored, and then you want to try this (web asm) or that (supernativebutnotquite3dAPIFromHell), just fork, edit build run, saved as a gist which I assume is fully intrumentable
Run automated tests on mutliple configurations to get relevant statistîcs, etc.
Thank you, going to be taking a look asap

Collapse
lostintangent profile image
Jonathan Carter Author

Thanks! I’ve been iterating on the experience quite a lot since I released this post, so it might be worth checking out my twitter stream 😁 @lostintangent .

Please let me know if you get a chance to check out the extension, and whether you have any feedback on how we could improve the experience further.

Collapse
dongyuhappy profile image
dongyu

pretty good

Collapse
lostintangent profile image
Jonathan Carter Author

If you get a chance to check it out, I’d love to hear what you think! 👍

Collapse
rehmatfalcon profile image
Kushal Niroula

This is 🔥 🔥 This extension deserves multiple 👍

Collapse
stuartaylward profile image
stuartaylward

Would love to see this for react-native!