--- title: "Running Node natively in the browser" publication: "JavaScript Weekly" issue: 539 published_at: "2021-05-21" canonical_url: "https://javascriptweekly.com/issues/539" --- Plus rewriting Parcel's JS compiler in Rust, optics demos in JavaScript, and what is 'tree shaking?' | #​539 — May 21, 2021 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/539) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/e1m5qs9fegnwfrz1kfxr.jpg)](https://domevents.dev/) [DOM Events: A Way to Visualize and Experiment with the DOM Event System](https://domevents.dev/) — A visualizer to help you learn about the DOM Event system – not always the easiest thing to get a mental model of – through exploration. Alex Reardon [Introducing WebContainers: Run Node.js Natively in the Browser](https://blog.stackblitz.com/posts/introducing-webcontainers/) — An interesting new WebAssembly-based operating system that boots instantly and enables Node.js environments to run _directly in the browser._ People have been getting very excited about this on Twitter. Only supports Chromium-based browsers for now though. Eric Simons (StackBlitz) [![\](https://copm.s3.amazonaws.com/c2dc05a1.jpg)](https://frontendmasters.com/courses/complete-react-v6/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=reactv6) [New & Updated Course: Complete Intro to React v6 with Brian Holt](https://frontendmasters.com/courses/complete-react-v6/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=reactv6) — Learn to build real-world applications using modern React. Much more than an intro, you’ll start from the ground up, getting to using the latest features in React, including hooks, effects, context, and portals, plus piecing together tools from the entire React ecosystem. Frontend Masters sponsor [Parcel 2 Beta 3: A Wild Rust Appears!](https://v2.parceljs.org/blog/beta3/) — How does a ‘beta 3’ release get a feature? By having its JavaScript compiler entirely rewritten in Rust is how. This change yields a “10x faster” compiler and continues an ongoing trend of writing JavaScript tools in other languages (such as [esbuild](https://github.com/evanw/esbuild), written in Go). There is more to the release, though - details within. ParcelJS Quick Bits - Are you ready to shed a tear when Microsoft [fully retires Internet Explorer](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/) on June 15, 2022? - Enjoy [this 'snake' game](https://codepen.io/SleepyPierre/pen/WNpxLZN?editors=0010) implemented in 27 lines of JS on CodePen. - I admit I've not had much time to look at these [maps of JavaScript concepts](https://github.com/mechaniac/Map-of-Javascript) but they make for pretty overwhelming visuals - interesting! - The [Next.js Conf site](https://nextjs.org/conf) is a sort of multiplayer experience. It takes place online on June 15, BTW. Releases [Node 16.2.0](https://nodejs.org/en/blog/release/v16.2.0/) [create-node-cli 1.6.0](https://github.com/ahmadawais/create-node-cli) — Tool to create new Node CLI projects. [lowdb 2.0.0](https://github.com/typicode/lowdb/releases/tag/v2.0.0) — Tiny local JSON database for small projects. 💻 Jobs [Lead Frontend Development at Fleet (100% Remote)](https://fleetdm.com/apply) — Work with the creators of Sails.js + osquery at our new venture building a better way to manage employee laptops and servers. Fleet [Find Software Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired 📖 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/rpbo8zlokhmwa9oandjl.jpg)](https://www.philipzucker.com/aesthetic-javascript-eduction/) [2D Optics Demos in JavaScript](https://www.philipzucker.com/aesthetic-javascript-eduction/) — A fun bit of visuals meeting code. These little live experiments are neat. Philip Zucker ▶[A Complete Beginner's Guide to Next.js](https://www.youtube.com/watch?v=nBkRxwHMrto) — Ali keeps it engaging and easily digestible in this 22-minute video. Well recorded. Fantastic. Ali Spittel [Breakpoints and `console.log` Is the Past, Time Travel Is the Future](https://wallabyjs.com/?utm_source=cooperpress&utm_campaign=javascriptweekly&utm_content=javascript) — 15x faster JavaScript debugging than with breakpoints and console.log. Wallaby.js sponsor [How to Create Reusable Web Components with Lit and Vue](https://dval.dev/blog/lit-web-components-tutorial/) — A thorough walk through creating a button component using the [Lit framework](https://lit.dev/) for use in a Vue.js app. Dan Valinotti [Tree-Shaking: A Reference Guide](https://www.smashingmagazine.com/2021/05/tree-shaking-reference-guide/) — A high-level, though comprehensive, introduction to what ‘tree shaking’ is all about. The basic idea is that unused code from modules you use gets ‘shaken’ off like dead leaves on a tree. Átila Fassina [Embedding Google Forms in a Static Site Without iFrames](https://spin.atomicobject.com/2021/05/20/embedding-google-forms/) — An approach promising more customizability than embedding a Google Form IFRAME. Brian May ▶['TypeScript is Testing'](https://www.briefs.fm/3-minutes-with-kent/223) — In a 3-minute micro podcast episode, Kent makes the argument that TypeScript is like testing because of the extra confidence it gives you about your code. Kent C Dodds podcast [Provision Infrastructure with JavaScript and Pulumi](https://www.pulumi.com/docs/get-started/?utm_source=javascript-weekly&utm_medium=sponsored-link&utm_campaign=iac) — Build, deploy, and manage modern cloud applications and infrastructure using JavaScript. Pulumi sponsor ▶[Frontend Development in 2021: A Complete Guide](https://www.youtube.com/watch?v=HgJ0S_9R8ek) — A tight 20-minute look at the frontend landscape, covering the libraries and tech you’ll want to know. One worth sharing with anyone you know who's interested in getting into the space. Harry Wolff [A Guide to Unit Testing Vue Components](https://testdriven.io/blog/vue-unit-testing/) Patrick Kennedy [How to Use Tailwind's Just-in-Time Mode in Angular](https://www.amadousall.com/how-to-use-tailwind-just-in-time-mode-in-angular/) Amadou Sall 🛠 Code & Tools [Typehole: VS Code Tool to Automatically Generate TypeScript Types and Interfaces](https://github.com/rikukissa/typehole) — An extension that helps you automate creating the initial static types for runtime values. Riku Rouvila [Sublime Text 4 Released](https://www.sublimetext.com/blog/articles/sublime-text-4) — While VS Code has become extremely popular in the past few years, Sublime Text used to be _huge_ and it’s great to see a new major version. TypeScript, JSX and TSX support are baked in, as is Apple Silicon support, GPU rendering, and more. Sublime Blog [[New\] Free JavaScript Code Quality & Security Scanner - Real‑Time Scan](https://snyk.io/lp/javascript-snyk-code-checker/?utm_campaign=PR-LH-Snyk-Code-2021&utm_medium=Paid-Email&utm_source=Cooperpress&utm_content=JSW-JS-Checker) Snyk sponsor [A Boilerplate for SSR’d Vite, React 17, and TypeScript 4.3](https://blog.jonlu.ca/posts/vite) — Considers itself a “barebones, slightly-opinionated” boilerplate for working with a modern web stack. JonLuca DeCaro [lightGallery: A Well Presented, Modular JS Image and Video Lightbox Gallery](https://www.lightgalleryjs.com/) — Works with React.js, Vue.js, Angular, and TypeScript. [Demos here](https://www.lightgalleryjs.com/demos/thumbnails/) or the [GitHub repo](https://github.com/sachinchoolur/lightGallery). Been around a while but as of this week no longer relies on jQuery! _GNU licensed._ Sachin N [Vuestic UI 1.0: A Vue.js 3.0 UI Framework](https://vuestic.dev/) — Features more than 50 highly customizable components. Vuestic UI [ReacType 7.0: A Visual Prototyping Tool for React Developers](https://reactype.io/#reactype7) — The popular drag-and-drop React prototyping tool with code preview is now in its seventh major release. Kevin Park has written an [extensive article](https://t.co/2CeNy35HM2?amp=1) on it which provides an in-depth review of its capabilities. OSLabs **💚 Use Node?** Check out the [latest issue of _Node Weekly_](https://nodeweekly.com/issues/389), our sibling email about all things relating to Node.js — from tutorials and screencasts to news and releases. Yep, we do include some Node related items here in _JavaScript Weekly_, but we save most of it for there. **[→ Check out Node Weekly today](https://nodeweekly.com/)** 🎵 And one for fun.. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/q9pbpibmyoxeodvmxuzf.jpg)](https://jdauriemma.com/trombone.js/) [Trombone.js: Yep, It's a Trombone..](https://jdauriemma.com/trombone.js/) — I don’t know the first thing about playing the trombone, but here you go. The source [is here](https://github.com/bignimbus/trombone.js) along with an explanation of how it works. Allegedly it “closely approximates the acoustic properties of (a) real trombone”. I always found the ['pink trombone' vocal synthesizer](https://dood.al/pinktrombone/) (_yes, it’s safe for work!_) a laugh. Jeffrey Auriemma Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom