JavaScript Weekly Issue 550: August 6, 2021

#​550 — August 6, 2021

Unsubscribe | Read on the Web

JavaScript Weekly

Kid Pix as a JavaScript App — Kid Pix was a drawing program for children released on the Mac in 1989 (here’s a full story about it, if you hadn’t heard of it before). Here’s a JavaScript reimplementation. It saves your work if you go away, and the source is pretty neat.

JS Kid Pix

How To Build Resilient JavaScript UIs — An exploration of how graceful degradation, defensive coding, observability, and a healthy attitude towards failures puts you in a better position as a JavaScript developer.

Callum Hart

We're Giving Away Free T-Shirts. Just Download FusionAuth — FusionAuth provides authentication, authorization, and user management for any app: deploy anywhere, integrate with anything, in minutes. It's always free for unlimited users (no CC required). Download and Install today and we'll send you a t-shirt.

FusionAuth sponsor

Wikimedia Selects Vue.js As Its New Frontend Framework — This process began years ago (we even covered it at the time) but finally the folks behind Wikipedia have made an announcement concerning the future of their JavaScript oriented development and it’s a win for Vue.js.

Wikimedia Foundation

QUICK BITS:

• 🏆 Here's a handy guide to what's new in ES2022 to skim through.

• The JS1024 game development contest has wrapped up with a bunch of fantastic winners – it's amazing to see how much can be done with a mere 1KB of JavaScript.

• There's a new Visual Studio Code update – the Live Preview extension now supports JavaScript debugging within previews.

• Chrome's intent to remove support for cross origin IFRAMEs to trigger window.alert, prompt and confirm dialogs has fallen into some trouble.

• The Stack Overflow 2021 Developer Survey results are out and JavaScript has fared very well. We'll digest some of the findings in coming issues.

• Google is shutting down its Google Sign-In JavaScript Platform Library for web in 2023.

• Scala.js 1.7.0, a Scala to JavaScript compiler, has been released with 'zero known bugs' – reassuring!

RELEASES:

Bootstrap 5.1.0 – Responsive site creation toolkit.
Agenda 4.2.0 – Lightweight job scheduling for Node.
Globalize 1.7.0 – I18n and l10n library that uses official Unicode CLDR.
Angular 12.2 – The popular JS framework.

📖 Articles, Opinions & Tutorials

How MDN’s Autocomplete Search Works — Autocomplete search was recently added to the excellent MDN Web Docs. Here’s a look at how the feature was implemented.

Peter Bengtsson (Mozilla)

How to Use Promise.allSettled() — How to use Promise.allSettled() to perform parallel async operations and collect the promises statuses into an array.

Dmitri Pavlutin

Angular Data Grids Don’t Need to Be Hard. Check This One Out — Be ready for your next data grid project by learning about the one that has already been built for you.

Kendo UI for Angular sponsor

40+ Node.js Integration Test Best Practices — Component and integration tests are increasingly popular testing techniques for backends. This repository digs into a variety of quick-fire patterns and practices for creating good component tests. There’s also a demo app and examples using Jest, Mocha, Express, Fastify and Nest.js.

Yoni Goldberg, Michael Solomon, and Daniel Gluskin

▶ NestJS Explained in 100 Seconds — The high-level concepts of Nest, a framework for building scalable Node.js applications that offers more beyond what you might get with something like Express or Fastify alone, presented in around two minutes.

Fireship

Rendering Magical Marbles with Three.js — These sorts of 3D graphics tricks are a bit over my head, but it’s neat to see how they’re done.

Matt Rossman

Optional Chaining: The ?. Operator in TypeScript — TypeScript 3.7 added support for the ?. operator, also known as the optional chaining operator.

Marius Schulz

Auth Without Complexity — Here is a much simpler way to build authentication and access control, with examples for React, Vue, Node.js & more.

Userfront sponsor

How We Reduced Next.js Page Size by 3.5x and Achieved a 98 Lighthouse Score
Colin Armstrong

How to Use test.todo() in Jest
Kanisorn Sutham

(Why and How to) Visit the Blank Page Between Cypress Tests
Gleb Bahmutov

Automating Accessibility Testing with Storybook
Varun Vachhar (Storybook)

Meyda: A JavaScript Audio Feature Extraction Library — The homepage has quite a visually striking demo. It supports both offline feature extraction as well as real-time feature extraction using the Web Audio API.

Rawlinson, Segal, Fiala, Wray, et al.

txiki.js: A Small and Powerful JavaScript Runtime — Stands on the shoulders of QuickJS and libuv.

Saúl Ibarra Corretgé

XRegExp 5.1: Extended JavaScript Regular Expressions — This is for you if you want to ‘spice up’ normal regular expressions beyond what browsers support natively – see the examples.

Steven Levithan

Tesseract.js 2.1.5: Pure JavaScript OCR for 100+ Languages — A pure JavaScript port of the popular C++ Tesseract library commonly used for visual text recognition purposes.

Tesseract Team

React Hot Toast 2.0 — React Hot Toast is a popular React on-page notifications system. Although the opportunity to customize the notifications in the new release chips away at the original ‘toast’ metaphor, there’s a lot of configurability in the new version that will prove valuable for many. It also has better accessability and a custom renderer. GitHub repo.

Timo Lins

Why You Need Error Grouping - How to Minimize Noise, Pinpoint the Right Errors, and Debug Better

Rollbar sponsorwhitepaper

React Joyride: Create Guided Tours in Your Apps — Uses react-floater to position and style floating ‘tour guide’ elements. Want a demo? Of course you do.

Gil Barbara

AutoMapper 5.0: An Object-Object AutoMapper for TypeScript — GitHub repo.

Chau Tran

ts-audio 0.6.0: Work with AudioContext More Easily — Here’s a demo.

Evandro Leopoldino Gonçalves