#539 — May 21, 2021 |
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 |
|
📖 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 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 |
How to Use Tailwind's Just-in-Time Mode in Angular |
|
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. |
🎵 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 |