Original: https://codingcat.dev/podcast/1-40-creating-code-in-your-browser-with-stackblitz
▶ Watch on YouTube & Subscribe to CodingCat.dev
**Creating Code in Your Browser with StackBlitz **is a CodingCat.dev podcast episode featuring Tomek Sułkowski alongside Alex Patterson focused on Angular, JavaScript, Vercel. We sit down with Tomek Sulkowski to talk about how he started as an original engineer for StackBlitz. We also talk about Web Containers and how StackBlitz is leveraging them to program on the web. 1.40 - Creating Code in Your Browser with StackBlitz: https://codingcat.dev/podcast/1-40-creating-code-in-your-browser-with-stackblitz 0:00 - Intro
0:15 - Live show
1:15 - Tomek intro
1:35 - Background
6:50 - Angular background
8:00 - UI
10:00 - StackBlitz site
13:30 - Demo
15:50 - Web Containers
19:19 - Terminal in the browser
25:30 - Security
29:00 Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.
Questions
- How did you get started working on StackBlitz?
- The first that I heard of StackBlitz was in an Angular podcast around 2017, when did you get started with it?
- What are Web Containers?
- Why do they build faster than say npm?
- How does StackBlitz compare to something like CodeSandbox?
- Is there any security risks in running your entire codebase in the browser?
- What limitations might there be?
Technical Overview: Creating Code in Your Browser with StackBlitz
1.40 - Creating Code in Your Browser with StackBlitz: https://codingcat.dev/podcast/1-40-creating-code-in-your-browser-with-stackblitz 0:00 - Intro
0:15 - Live show
1:15 - Tomek intro
1:35 - Background
6:50 - Angular background
8:00 - UI
10:00 - StackBlitz site
13:30 - Demo
15:50 - Web Containers
19:19 - Terminal in the browser
25:30 - Security
29:00
When applying the concepts from Creating Code in Your Browser with StackBlitz in a production codebase, teams working with Angular, JavaScript, Vercel, GitHub should align their implementation with the Angular Developer Guide (Signals, standalone components, and enterprise Angular workflows). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.
Key Engineering Takeaways
- **Core Topic Focus: **Practical strategies for Angular, JavaScript, Vercel, GitHub covered in "Creating Code in Your Browser with StackBlitz" (We sit down with Tomek Sulkowski to talk about how he started as an original engineer for StackBlitz. We also talk about Web Containers and how StackBlitz is leveraging them to program on the web.).
- **Production Implementation: **Combine the architectural patterns demonstrated in this podcast with the official Angular Developer Guide for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: **Follow along with the live coding demos and discussion on YouTube (Creating Code in Your Browser with StackBlitz) and subscribe to CodingCat.dev on YouTube for weekly deep dives.
Video Chapters & Timestamps
Jump directly to any segment of Creating Code in Your Browser with StackBlitz on YouTube using the timestamped chapters below:
- 00:00: Intro
- 00:00: Live show
- 00:00: Tomek intro
- 00:00: Background
- 00:00: Angular background
- 00:00: UI
- 00:00: StackBlitz site
- 00:00: Demo
- 00:00: Web Containers
- 00:00: Terminal in the browser
- 00:00: Security
- 00:00: Similarities to other sandboxes
- 00:00: Coding Cat on Stackblitz
- 00:00: Localhost in the browser
- 00:00: ESM
- 00:00: Vite demo
- 00:00: Final thoughts
- 00:00: Purrfect Picks
- 00:00: Alex - Vercel SWR (Stale While Revalidate) - [https://github.com/vercel/swr\](https://github.com/vercel/swr)
- 00:00: Tomek - https://vitejs.dev https://vite.new & https://vite.new/react
Resources, Links & Official Documentation
- *Watch on YouTube: *Creating Code in Your Browser with StackBlitz Full Video (plus Subscribe to CodingCat.dev)
- *:57 - Alex - Vercel SWR (Stale While Revalidate) - [](https://github.com/vercel/swr): *https://github.com/vercel/swr
- *:44 - Tomek - https://vite.new & https://vite.new/react: *https://vitejs.dev
- *:44 - Tomek - https://vitejs.dev & https://vite.new/react: *https://vite.new
- *:44 - Tomek - https://vitejs.dev https://vite.new &: *https://vite.new/react
- *:15 - Tomek - The Dresden FIles - [](https://en.wikipedia.org/wiki/The_Dresden_Files)": *https://en.wikipedia.org/wiki/The_Dresden_Files
- *Show Pick: *Vercel SWR (Stale While Revalidate) (picked by Alex Patterson)
- *Show Pick: *The Dresden Files (picked by Tomek Sułkowski)
- *Show Pick: *Vite (picked by Tomek Sułkowski)
- Tomek Sułkowski Guest Profile & Episodes on CodingCat.dev
- Tomek Sułkowski on GitHub
- Angular Developer Guide: Signals, standalone components, and enterprise Angular workflows
- MDN JavaScript Reference: ECMAScript specifications, Web APIs, and runtime fundamentals
- Vercel Documentation: Edge network deployments, serverless functions, and frontend cloud
Related CodingCat.dev Tutorials & Podcast Episodes
- RxFire in Svelte 3 using Firebase Firestore and Authentication: Introduction to Svelte3, Firebase, and RxFire. RxFire provides a set of observable creation methods. You simply call a function with some parameters to receive ...
- WebDev Fundamentals | React, Angular, and Vue: Dive into web development fundamentals with Corbin. Explore frameworks, APIs, and developer education. Purrfect for new and seasoned developers looking to expan...
- Qwik the HTML First Framework: We sit down with Miško Hevery, Inventor of Angular, to talk about a new framework he is building called Qwik. We talk about Miško's past experience and then we ...
Frequently Asked Questions (FAQ)
What are the main takeaways from Creating Code in Your Browser with StackBlitz?
We sit down with Tomek Sulkowski to talk about how he started as an original engineer for StackBlitz. We also talk about Web Containers and how StackBlitz is leveraging them to program on the web. 1.40 - Creating Code in Your Browser with StackBlitz: https://codingcat.dev/podcast/1-40-creating-code-in-your-browser-with-stackblitz 0:00 - Intro
0:15 - Live show
1:15 - Tomek intro
1:35 - Background
6:50 - Angular background
8:00 - UI
10:00 - StackBlitz site
13:30 - Demo
15:50 - Web Containers
19:19 - Terminal in the browser
25:30 - Security
29:00 Throughout this podcast, Tomek Sułkowski breaks down real-world implementation details for Angular, JavaScript, Vercel so developers can apply these patterns directly in production.
How do you implement Angular best practices in production?
When adopting Angular and JavaScript in a production stack, start by validating your configuration against the Angular Developer Guide (Signals, standalone components, and enterprise Angular workflows). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.
Where can I watch the full Creating Code in Your Browser with StackBlitz walkthrough and find related code resources?
You can watch the complete video session for Creating Code in Your Browser with StackBlitz on the CodingCat.dev YouTube channel. For a deeper dive into Angular, check out our related guide: RxFire in Svelte 3 using Firebase Firestore and Authentication.
Top comments (0)