loading...

Using VS Code and GitHub Gists As a Web Development Playground

lostintangent profile image Jonathan Carter ใƒป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 ๐Ÿš€

Posted on by:

lostintangent profile

Jonathan Carter

@lostintangent

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

Discussion

markdown guide
 

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

 

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.

 
 

If you get a chance to check it out, Iโ€™d love to hear what you think! ๐Ÿ‘

 

This is ๐Ÿ”ฅ ๐Ÿ”ฅ This extension deserves multiple ๐Ÿ‘

 

Would love to see this for react-native!