Logo

    Node in the Browser × WebContainers + NodeBox

    enMarch 06, 2023
    What are web containers used for in Node.js?
    How do Sentry and Century assist developers?
    What benefits do web IDEs offer for Node.js?
    Why is running Node.js in the browser significant?
    How do code playgrounds enhance learning for beginners?

    Podcast Summary

    • Running Node.js in web browsers with containers and toolsNode.js can now be executed in web browsers using containers and tools, enabling faster and more efficient development and monitoring of web applications.

      Node.js can now be run in web browsers through the use of web containers and tools like Nodebox and web containers from Stackblitz. This is a game-changer in web development as it allows for server-side code to be executed directly in the user's browser, making development faster and more efficient. Companies like Sentry and Century are providing valuable tools to help developers manage and monitor their applications, with Sentry offering error and exception tracking and Century offering monitoring for cron jobs. Stackblitz and CodeSandbox are web IDEs that allow for running Node.js processes directly in the browser, with Stackblitz introducing web containers and CodeSandbox introducing Nodebox. These tools have different features and functions, but they all aim to make web development more seamless and productive. Overall, the advancements in running Node.js in web containers and the availability of powerful development tools are revolutionizing the way we build and manage web applications.

    • Running Node.js in the browser is a game-changerNode.js in the browser eliminates complex setup and enables quick sharing of code, with platforms like Stackblitz and Replit leading the way

      The use of JavaScript in the browser has evolved to the point where running an Express server and seeing its output is now possible. This is a significant development as it opens up new possibilities for code demos and distributed computing. During the discussion, the names of various platforms such as Stackblitz, CodeSandbox, Nodebox, and web containers were compared. While opinions on the coolness of the names varied, there was agreement that the ability to run Node.js in the browser is a game-changer. This shift towards browser-based computing is likely to become more prevalent in the future, with platforms like Stackblitz and Replit leading the way. These platforms enable users to share demos and save them, making learning and collaboration more efficient. The benefits of running Node.js in the browser include eliminating the need for setting up complex environments and allowing for quick and easy sharing of code. Additionally, the discussion touched on the potential future of coding entirely in the browser. Overall, the ability to run Node.js in the browser represents a major advancement in web development and is a trend worth keeping an eye on.

    • Interactive code playgrounds for easier learningCode playgrounds in browsers simplify learning by allowing users to write and run code directly, eliminating complex setup processes and external servers, while providing a secure and sandboxed environment.

      The future of educational courses, especially those focused on coding, may involve more interactive environments, such as code playgrounds, to make learning easier for beginners. These code playgrounds allow users to write and run code directly in their browser, eliminating the need for complex setup processes and external servers. This not only simplifies the learning experience but also addresses security concerns and costs associated with remote development environments. Additionally, the use of code playgrounds in the browser provides a more secure and sandboxed environment for users to learn and experiment with code.

    • Developing Node.js apps in the browser using WebAssemblyWebAssembly allows developers to write, build, and run Node.js apps directly in the browser for a faster and more convenient development experience.

      Modern web development platforms like Stackblitz and CodeSandbox allow developers to write, build, and run Node.js applications directly in the browser using WebAssembly (Wasm). This is accomplished by creating a pseudo Linux VM environment that can run most Node.js APIs. Developers create files as objects, write their code in package.json and index.js files, and can use tools like NPM install and nodemon for faster development. The applications are run inside iframes, and the output is streamed directly to the user. The platforms are likely mocking or stubbing out some Node.js APIs to make it work in the browser, but the specifics of how they achieve this are not clear. The result is a faster and more convenient development experience, as the code runs in the browser instead of requiring a local Node.js installation. This technology is fascinating and opens up new possibilities for web development.

    • CodeSandbox and Stackblitz: Running Node.js in the BrowserThese platforms enable running Node.js apps directly in the browser using their own CDNs and iframes, but their implementations are not open source.

      CodeSandbox and Stackblitz are platforms that enable running Node.js applications directly in the browser through proxying NPM dependencies. They use their own CDNs (Sandpack CDN for CodeSandbox and unknown for Stackblitz) to manage these dependencies. The implementations of these technologies are not open source, despite the libraries being open. They use iframes for handling node modules and messaging between the browser and their servers. The exact workings of what runs on their servers and why messaging needs to go through them remains unclear. These platforms may represent the future of improved developer experience, but their creators are not yet ready to open source them due to investment and development costs.

    • New Tools for Developers: Web Containers and NoteboxWeb Containers and Notebox provide free resources for developers for heavy rendering tasks and note-taking respectively, with Web Containers utilizing Shared Array Buffer and Notebox using APIs, each having unique strengths and limitations.

      There are two new tools, Web Containers and Notebox, which offer free usage of their resources for developers, similar to APIs like Stripe. Web Containers utilize a new browser technology called Shared Array Buffer and are best for heavy rendering tasks, while Notebox uses a different set of APIs and works in all browsers. Although Web Containers have limitations like not being entirely offline, they can still be useful for most developers. The speaker shares a personal experience of being frustrated with using Figma due to its online-only nature, but now finds joy in using Figma after overcoming his offline requirements. Meanwhile, the speaker is considering moving on to Penpod due to his personal Adobe policy. Overall, these tools offer significant potential for developers and designers, with each having its unique strengths and limitations.

    • Discovering limitations in PenPodWhile PenPod is a great alternative to Figma, it has limitations when accessing external data due to its browser-based server.

      While PenPod is an impressive open-source Figma alternative, it does have limitations. The speaker was initially drawn to PenPod due to its ease of use and its ability to add features that were lacking in his previous design tool, Sketch. However, he discovered that there are limitations to PenPod, particularly when it comes to fetching data from external sources. The browser-based server has course limitations, which can make it difficult to access certain types of data or run certain APIs. This was a surprising discovery for the speaker, as he had assumed that all the features and capabilities of a server-side application would be available in the browser-based version. Despite these limitations, the speaker was overall impressed with PenPod and plans to continue using it for simpler projects. He also expressed disappointment with his previous experience with Sketch, feeling let down by the lack of support and promotion for his course.

    • Innovations in running VMs and containers in the browserCompanies like Stackblitz and CodeSandbox are leading the way in running VMs and containers in the browser, potentially offering lighter-weight alternatives for simple tasks and enabling Node.js in the browser for interactive full-stack learning.

      There's ongoing innovation in the realm of running Virtual Machines (VMs) and containers like Docker in the browser, with companies like Stackblitz and CodeSandbox leading the charge. Although there are limitations, such as these solutions not being open source, the speakers believe these limitations will likely disappear as competition increases. This development is exciting as it could lead to lighter-weight alternatives to running entire Linux containers for simple tasks. Additionally, there's the potential for running Node.js in the browser, which could be a game changer for learning full-stack frameworks through interactive tutorials. Another related topic is Docker Wasm, which may not be as groundbreaking as initially thought, as it seems to be more about using WASM in Docker containers rather than the other way around. Overall, these advancements might not be critical but are still significant and could make learning complex technologies more accessible. So, stay tuned for further developments in this area!

    Recent Episodes from Syntax - Tasty Web Development Treats

    821: Is Tauri the Electron Killer?

    821: Is Tauri the Electron Killer?

    In this episode of Syntax, Wes and Scott talk with Daniel Thompson-Yvetot about Tauri. They dive into what Tauri is, the motivations behind its development, its open-source ecosystem, use cases, and more.

    Show Notes

    Links

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    820: Potluck: 8000 ESLint Errors × HTML Time Tag × 7 Meg React Bundle × CSS Modules

    820: Potluck: 8000 ESLint Errors × HTML Time Tag × 7 Meg React Bundle × CSS Modules

    In this Potluck episode of Syntax, Scott and Wes answer your questions, from weighing the trade-offs between numerous small npm packages and a few larger ones to managing the challenges of work-from-home life. They also explore CSS modules, strategies for shrinking JavaScript bundles, and even where to find the best replacement ear cups for your headphones.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    819: Fun & Profitable Side Projects for Developers

    819: Fun & Profitable Side Projects for Developers

    Scott and Wes serve up a hasty discussion on side projects, sharing their latest Hack Week experiments and tips on how to turn fun ideas into profitable ventures. They cover everything from finding inspiration to choosing the right tech, and even offer advice on how to finish what you start.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 01:11 Brought to you by Sentry.io.
    • 01:27 Wes’ Hack Week project.
    • 02:30 Scott’s Hack Week project.
    • 04:18 Where do you get ideas for side projects?
    • 09:22 End goals for a side project.
    • 14:47 Other end goals.
    • 16:45 What tech should you use?
    • 20:34 Keeping notes.
    • 23:14 Finishing side projects.
    • 26:39 Shameless Plugisode!

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    818: CJ × Hosting Meetups - Lunch and Learn

    818: CJ × Hosting Meetups - Lunch and Learn

    In this episode of Syntax, Wes and Scott talk with CJ Reynolds about the resurgence of meetups in a post-COVID world. They discuss the benefits of attending and speaking at meetups, and the logistics of organizing them. CJ also shares his experiences running the DenverScript meetup, including sourcing speakers, finding venues, and ensuring a welcoming community.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    817: You Need These 30 Apps - PART 1

    817: You Need These 30 Apps - PART 1

    Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    816: Why Your CSS Sucks

    816: Why Your CSS Sucks

    Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    815: Deno 2 with Ryan Dahl

    815: Deno 2 with Ryan Dahl

    In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    814: Fundamentals: HTML

    814: Fundamentals: HTML

    In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and more.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    813: CSS: Scroll Driven Animations

    813: CSS: Scroll Driven Animations

    In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    812: CSS 4, 5, and 6! With Google’s Una and Adam

    812: CSS 4, 5, and 6! With Google’s Una and Adam

    In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more!

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Related Episodes

    746: Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan

    746: Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan

    Deploy your own tech stack: Wes and Scott are joined by Kubernetes expert David Flanagan to be schooled on how Kubernetes, Docker and even WASM containers work.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Using WebAssembly for high-performance apps with Ramón Huidobro

    Using WebAssembly for high-performance apps with Ramón Huidobro
    In this episode, we welcome on Ramón Huidobro, DevRel, speaker, and co-founder of the Bad Website Club, to talk about WebAssembly in-depth and how integrating it into apps can provide high performance. Links https://twitter.com/holasoymilk https://ramonh.dev/ https://github.com/hola-soy-milk https://www.youtube.com/@holasoymilk https://hacks.mozilla.org/category/code-cartoons/a-cartoon-intro-to-webassembly/ We want to hear from you! How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend? Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod). Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Ramón Huidobro.

    Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion

    Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion

    In this supper club episode of Syntax, Wes and Scott talk with Jake Champion about his work with Fastly and Polyfill, the difference between WASY and WASM, what Winter CG is, and what makes Fastly different.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats