Plus React and Electron both turn 18, some neat VS Code improvements, and locale-aware string sorting. |

#​583 — April 1, 2022

Unsubscribe  |  Read on the Web

🤞 Fingers crossed, but unless we've been successfully pranked ourselves, this is an April Fools' prank free zone! Sorry if you like a bit of frivolity on April 1st, but completeness and accuracy come before entertainment here. Boring, I know, but we don't stand a chance against YouTube or video games 😆
__
Peter Cooper, your (boring, though still quite foolish) editor.

JavaScript Weekly

Decorators for ES6 Classes Proposal (Mostly) Reaches Stage 3 at TC39 — We first linked to this proposal three years ago but it’s now conditionally made it to stage 3 (with some tweaks required) and people are very excited. Despite dating from 2019, Mike Green’s explanation of the idea remains a good accessible overview of the basic idea, if the proposal feels too technical.

Ecma TC39

React 18 ReleasedThe plan was for v18 to be an easy upgrade even if there were many changes under the hood.. and despite the introduction of a new concurrent renderer, Suspense, new hooks, automatic batching, and more, they’ve done a great job keeping the ship steady. The React 18 upgrade guide covers some things you need to consider, and if you’re a completist, the changelog digs deep.

The React Team

Studio 3T Manages Your Data, While You Wrestle Your App into Shape — Studio 3T's full suite of MongoDB tools lets you query quicker, develop with data even faster and turn queries into code automatically. Try it free for 30 days - no credit card needed.

Studio 3T sponsor

Electron 18.0 Released — Not content to let let React get all the v18 glory, the popular Electron cross-platform 'build desktop apps with JS, CSS and HTML' framework also reaches v18 with upgrades to Chrome 100 (also out this week), V8 10.0, and Node 16.13.2.

Keeley Hammond and Sofia Nguy

▶  The Story of Next.js — A good balance of detail and high level overview to tell the Next.js story. Despite being just 12 minutes long, it goes into a lot more background and history than you’d expect, too. Fingers crossed for Gatsby and Remix next, perhaps?

Tyler McGinnis

IN BRIEF:

RELEASES:

Preact 10.7.0 – Tiny, fast React alternative.
wavesurfer 6.1.0 – Navigable audio visualization.
Vite 2.9.0 – Next gen frontend tooling.
D3 7.4.0 – The Data-Driven Document library.
React Testing Library 13 – Adds React 18 support.
MIDIVal 0.0.16 – MIDI messaging library now has MIDI clock support.
ioredis 5 – High perf Node.js Redis client.

💻 Jobs

Senior Web Developer (Node/ReactJS) - Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.
Komoot

Senior Front-End Engineer (Remote) — We’re looking for an engineer to join the web team at Unsplash. Small team but big product. React + strict TypeScript with plenty of functional programming.
Unsplash

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired

📒 Articles & Tutorials

Locale Aware Sorting in JavaScript — When building a localized app, the default sorting logic for strings might not do quite what you want.. localeCompare and Intl.Collator to the rescue.

Elijah Manor

How to Use Props in React — We first linked to this three years ago but Robin has been updating his posts to modern standards, so it remains a fantastic resource now too and is packed with prop-oriented examples.

Robin Wieruch

14 Linting Rules To Help You Write Asynchronous JS Code — Walks through a variety of rules shipped by default with ESLint – an interesting way to learn some best practices.

Maxim Orlov

How Lyft's Mobile Team Does Mobile CI at Scale — How does Lyft do mobile CI/CD, and unblock their ~200 mobile app contributors? Lyft shares all the details.

Buildkite sponsor

The What, When, Why and How of Next.js’ New Middleware Feature — A look at a new beta feature in Next.js 12.0: middleware.

Sam Poder (Smashing Magazine)

Conquering JavaScript Hydration — Hydration plays a big role in many JS-based site generators but can sometimes be a performance bottleneck. This article is conceptual but digs into some of the ways in which newer frameworks are rethinking things.

Ryan Carniato

How to Deal with Optional Things and undefined in TypeScript
Mattie Behrens

How to Write a Linter Using tree-sitter in An Hour
Siraben

Remix: The Yang to React's Yin?
Kent C. Dodds

🛠 Code & Tools

Visual Studio Code March 2022 Released — VS Code gets updated every month, but this feels like one of the bigger updates for JavaScript developers in particular. Native local history support is the headline feature but the JS debugger now lets you collect and visualize heap profiles to keep an eye on memory allocation. We also now get JS highlighting when within HTML files.

Microsoft

a11y-dialog: A Lightweight, Accessible Way to Create Dialogs — It’s possible to replace JS dialogs with the <dialog> element in many cases now, but that’s not always desired. This is a nice implementation – demo.

Kitty Giraudel

Integrate eSignatures in Your App in Less Than a Week — Enable document signing from anywhere with HelloSign's eSignature functionality. Test the API for free.

HelloSign, a Dropbox Company sponsor

PLV8 3.1: Bringing the V8 Engine to the PostgreSQL Database — Postgres is both a hugely popular and hugely extensible relational database, and being able to write procedures in JavaScript rather than PL/pgSQL could appeal to you. Documentation.

plv8 team

Hackathon Starter: A Boilerplate for Node Web Apps — For when you might want to start building a Node app quickly including key features like auth/OAuth, Bootstrap 5, account management, email forms..

Sahat Yalkabov

Encoding.js 2.0: Convert or Detect (.jp) Character Encodings — Specifically for encodings that support Japanese characters, including Shift_JIS, EUC-JP, and UTF-8/16.

polygonplanet

Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code

Retool sponsor

ts-audio 0.7.0: Simple API for AudioContext and Playing Audio PlaylistsHere's a demo.

Evandro Leopoldino Gonçalves

Flatbush: Fast Static Spatial Index for 2D Points and Rects
Vladimir Agafonkin

📥 Reader Submissions

In recent months, we've been receiving an increasing amount of submissions from readers (thanks!) and while we use many of them, we don't have enough time to review everything to the right level. Given the backlog, we want to try out a new section to share things from our inbox to you more quickly:

If you have something to submit, email jsw@peterc.org or just hit reply to any issue of this newsletter and we'll see it :-)

o