#​539 — May 21, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

DOM Events: A Way to Visualize and Experiment with the DOM Event System — 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 — 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)

New & Updated Course: Complete Intro to React v6 with Brian Holt — 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! — 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, written in Go). There is more to the release, though - details within.

ParcelJS

Quick Bits

Releases

Node 16.2.0
create-node-cli 1.6.0 — Tool to create new Node CLI projects.
lowdb 2.0.0 — Tiny local JSON database for small projects.

💻 Jobs

Lead Frontend Development at Fleet (100% Remote) — 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 — 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

2D Optics Demos in JavaScript — A fun bit of visuals meeting code. These little live experiments are neat.

Philip Zucker

▶  A Complete Beginner's Guide to Next.js — 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 — 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

How to Create Reusable Web Components with Lit and Vue — A thorough walk through creating a button component using the Lit framework for use in a Vue.js app.

Dan Valinotti

Tree-Shaking: A 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 — An approach promising more customizability than embedding a Google Form IFRAME.

Brian May

▶  'TypeScript is Testing' — 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 — Build, deploy, and manage modern cloud applications and infrastructure using JavaScript.

Pulumi sponsor

▶  Frontend Development in 2021: A Complete Guide — 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
Patrick Kennedy

How to Use Tailwind's Just-in-Time Mode in Angular
Amadou Sall

🛠 Code & Tools

Typehole: VS Code Tool to Automatically Generate TypeScript Types and Interfaces — An extension that helps you automate creating the initial static types for runtime values.

Riku Rouvila

Sublime Text 4 Released — 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

Snyk sponsor

A Boilerplate for SSR’d Vite, React 17, and TypeScript 4.3 — 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 — Works with React.js, Vue.js, Angular, and TypeScript. Demos here or the GitHub repo. 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 — Features more than 50 highly customizable components.

Vuestic UI

ReacType 7.0: A Visual Prototyping Tool for React Developers — 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 on it which provides an in-depth review of its capabilities.

OSLabs

💚 Use Node? Check out the latest issue of Node Weekly, 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

🎵 And one for fun..

Trombone.js: Yep, It's a Trombone.. — I don’t know the first thing about playing the trombone, but here you go. The source is here 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 (yes, it’s safe for work!) a laugh.

Jeffrey Auriemma