Plus Chrome's new memory inspector tool, private fields, and a fun chess game. |

#​542 — June 11, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Introducing Astro: Ship (Even) Less JavaScript — From the creator of Snowpack and Skypack comes a new 'bring your own framework' static site builder where the site is rendered to static HTML and only loads JavaScript as-needed using an “islands architecture” to allow partial hydration. It's always fun to see these folks experimenting with how we approach problems. Keen to learn more? This 50 minute talk + live demo helps a lot.

Fred K. Schott

The Plan for React 18 — The React team has outlined some exciting things on the roadmap for React 18 (due in its final form in 'several months' time'):

The React Core Team

Learn to Build Scalable React Apps — Brian Holt covers the latest tools in the React ecosystem like TypeScript, TailwindCSS, Redux, Jest, and more in this new and updated video course!

Frontend Masters sponsor

Introducing Chrome's New Memory Inspector — Landing in Chrome 91’s DevTools is the new memory inspector with which you can inspect your ArrayBuffer, TypedArray, DataView, and even WebAssembly Memory.

Kim-Anh Tran (Google)

Vue.js 3.1.0 (Pluto) Released — There’s now the migration build, a build of Vue 3 that offers Vue 2 compatible behavior to help with Vue 2 to 3 migrations. Cédric Exbrayat rounds up some other 3.1 additions here.

Vue.js Team

Quick Bits

Releases

use-sound 4.0 — React hook for sound effects.
Cypress 7.5.0 — Testing system.
Ghost 4.7.0 — Headless Node.js CMS / blogging system.
QUnit 2.16.0 — Easy JavaScript testing framework.
Plotly.js 2.0

💻 Jobs

Frontend Developer at MIT (Remote, Contract to Full-Time) — Are you a frontend developer with React and UX skills? Join our team at MIT building a new platform for the energy industry.
MIT Energy Initiative

JavaScript Engineer — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers.
Sticker Mule

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

Implementing Private Fields for JavaScript — Although you might be using them already via Babel or TypeScript, private fields are a feature being added to JavaScript directly through the TC39 proposal process.

Matthew Gaudet

Creating a Serverless Function to Scrape Web Page MetadataMetascraper is a Node.js package for scraping metadata from live web pages and this tutorial demonstrates its use via a Vercel hosted function.

Matteo Mazzarolo

[Free Download] Guide to Effective Feature Management — Learn feature management practices to accelerate release cycles and deploy every 6 hours, instead of every 6 weeks.

LaunchDarkly sponsor

▶  Exploring Deno Land 🦕 with Ryan Dahl — Ryan Dahl, the original creator of Node.js creator and now creator of the Deno runtime, went on the popular Changelog podcast to talk about how the success of Node changed his life and what led him to creating Deno.

The Changelog Podcast podcast

Managing Shared State in Vue 3 — Writing large-scale Vue applications can be a challenge. In this article, Shawn Wildermuth dives into the pros and cons of approaches like factories, shared objects, and using Vuex. He also explains what is coming in Vuex 5.0 that might change how we all use shared state in Vue 3.

Shawn Wildermuth

Rust from a JavaScript Perspective: A Tongue-in-Cheek Tour“I am documenting – albeit in a bit funny way – some thoughts in my journey so far in Rust land, coming from the viewpoint of a hardcore JavaScript enthusiast.”

kapolos

Why Tracing Might Replace (Almost) All Logging

Lightstep sponsor

How To Build a Geocoding App with Vue.js and Mapbox
Prince Chukwudire

Ten Tips for Building More Accessible Angular Apps
Emma Twersky (Google)

Don't Use Functions As Callbacks Unless They're Designed for It
Jake Archibald

🛠 Code & Tools

supported by Okta

Handsfree.JS: Bring Face, Hand or Pose Tracking to Your Frontend Apps — Track up to four hands at once (more than I’ve got, at least), 21 ‘landmarks’ for a single hand, or even faces and bodies in detail. I’m also digging the rather retro homepage. GitHub repo.

Oz Ramos

Mocha 9.0 Released: The Popular JavaScript Test Framework — Mocha has been a popular go-to test framework for both Node and the browser for years. 9.0 drops Node 10.x support and is going ‘ES modules first’ by using ESM import rather than CommonJS require to load test files by default.

Mocha

Flicking 4.0: A Carousel Component with 30M Daily Users — Naver, a South Korean portal and search engine, claims 30 million people use their carousel component every day. Works with Angular, React, Vue and Preact.

NAVER

[New] Free JavaScript Code Quality & Security Scanner - Real‑Time Scan — Like Grammarly for your code. Scan your JavaScript code for quality & security issues, and get fix advice in your IDE.

Snyk sponsor

FlexSearch.js 0.7.0: A Full Text Search Library with No Dependencies — Claims to outperform its competition while supporting features like multi-word matching and phonetic transformations. Happy in both the browser and Node.js.

Nextapps GmbH

PM2 5.0 Released: The Production Process ManagerPM2 is a popular process manager and load balancer for long running Node.js apps. 5.0 is a significant release adding a new local system monitoring feature for tracking metrics like CPU and memory use.

Alexandre Strzelewicz

Naive UI: A Vue 3 Component Library — I kinda respect it describes itself as “not too slow” and “kinda interesting”(!)

TuSimple

Nanostores: A 152 Byte State Manager for React/Preact/Vue/Svelte with Many Atomic Tree-Shakable Stores
Andrey Sitnik

Angular Flex-Layout: A Sophisticated Layout API for Angular using Flexbox Media Queries
Angular

🎵 And one for fun..

RxJChess: A Chess Game Built on React, Redux and RxJS — You can play against the CPU or even find a friend. Plays pretty well. Once you’ve had enough of losing (or is that just me?) you can also check out the source.

Prashanth Selvam

o