Plus a React Conf 2021 recap, deep copying developments, and how errors affect performance. |

#​569 — December 17, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Deep-Copying in JavaScript Using structuredClone — Ever had to resort to workarounds and libraries to create a deep copy of a value? structuredClone() to the rescue as a built-in function for deep-copying. Surma shows it off in this post, but note that support is currently patchy but due to take off soon.

Surma

▶  A Recap of React Conf 2021 — React Conf took place online for the first time this year and this is a fantastic summary of what took place along with videos of the talks and why you might watch some of them. The main keynote covered the state of concurrency, Suspense, server components, React Native, and more.

Jesslyn Tannady and Rick Hanlon

Kickstart Your Software Engineering Career — Ready to start learning software engineering? Learn 1:1 with an expert mentor to master the skills, build your portfolio, and gain experience needed to land a software engineering role. Apply to Springboard's Software Engineering Bootcamp to start your journey.

Springboard sponsor

Create React App 5.0: The Popular 'One Command' React App Builder — Few projects in the React world have been as successful as Create React App which has brought single command app generation to the masses. v5.0 includes fast refresh improvements, support for Tailwind, and a lot of dependency updates including webpack 5, Jest 27 and ESLint 8. You’ll need to be running Node 14+ too.

Meta

quick-lint-js 1.0: An Alternative to ESLint — A JavaScript linting tool that pitches itself as a faster, editor-friendly alternative to ESLint for quickly catching certain classes of bug in your code. You can give it a go in your browser too.

strager

IN BRIEF:

RELEASES:

Deno 1.17 – Server-side JS/TS runtime.
GSAP 3.9 – JavaScript animation system.
Ember CLI 4.0 – CLI for building Ember apps.
Got 12.0 – HTTP client for Node.js.
NVM for Windows 1.1.9 – Node.js version manager.
bignumber.js 9.0.2 – Arbitrary-precision decimal arithmetic.
React PDF 5.6 – Render PDFs in React apps.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team

Frontend Developer 🚀(Remote, Work from Anywhere 🏖) — We're reimagining eCommerce with a super fast headless commerce service for product storytellers. React, Node, GraphQL? Let's talk.
Crystallize

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

📖 Tutorials, Opinions & Stories

The Performance Implications of JavaScript Errors — There’s more to think about with performance and errors than first meets the eye. For example, your page could get faster when an error causes less code to be run.

Amit Singh

Array.prototype.groupBy to the Rescue? — There are plenty of ways to group elements in arrays into objects, as shown here, but TC39 is coming to the rescue (we hope) with a currently advancing proposal for array grouping methods like groupBy. We're ready.

Nicolas Charpentier

Who Guards the Guards – 3 Common Pitfalls of JavaScript Testing — Learn how to eliminate certain types of issues from your test code in this TestJS Summit talk by SonarSource JS expert.

SonarSource sponsor

How to Access ES Module Metadata using import.meta — How to access the meta information (module URL, etc.) of an ES module from JavaScript code.

Dmitri Pavlutin

Wide Gamut 2D Graphics using HTML Canvas — A look at the support for graphics in wider gamut color spaces than sRGB (such as Display P3) inside the canvas element in the newest Safari.

Cameron McCormack (WebKit)

An Introduction to Framer Motion 3D for 3D Animation in ReactFramer Motion is a popular Web animation toolkit and there’s a 3D animation option that uses React Three Fiber under the hood. Some nice sandbox demos here to play with.

Framer

▶  Global State Management in an Vue.js Electron App with Pinia
Cody Bontecou

The Only Two Custom React Hooks We Ever Really Use
Luke Hager

🛠 Code & Tools

Riot.js 6.1: A Simple and Elegant Component-Based UI Library — An interesting alternative UI library that might click with you. “It is designed to offer you everything you wished the native web components API provided.” GitHub repo.

Riot.js

Caterwaul: An (Experimental) JavaScript-to-JavaScript Compiler — Described as a ‘monstrosity’ for the ‘adventurous’, this transpiler is exploring ideas around manipulating JavaScript code at the low level to change the semantics of functions and transform code in ‘arcane’ ways.

Spencer Tipping

Shortcut is Project Management Without the Management — Looking for an intuitive white-board style project management tool? Collaboration has never been easier with Shortcut.

Shortcut (formerly Clubhouse.io) sponsor

OpenSeadragon 3.0: A Web Viewer for Ultra High Resolution Images — Quite an old project now, but works well and is perfect for a specific use case, especially if you need to support certain high res image tile formats.

OpenSeadragon contributors

CSS-Select 4.2: A CSS Selector Compiler and Engine — Turns CSS selectors into functions that tests if elements match them.

Felix Böhm

Want to Transfer a Domain with No Downtime? 👀 Our Handy Checklist 👉

DNSimple sponsor

roughViz.js: Hand-Drawn Styled Charts in the Browser — Supports bar, donut, line, pie, scatter and stacked bar charts and uses Rough.js under the hood for the drawing operations.

Jared Wilber

Neutralino 4.0: Portable, Lightweight Desktop App Framework — Think Electron but rather than including a Chromium distribution with every app, it uses the local platform’s built-in ‘webview.’ GitHub repo.

Codezri

deeplinks.js: Simple Deep Links to Any Selection of Text On Your Website
Wesley Aptekar-Cassels

Luminous: A Simple No-Dependency JavaScript Lightbox Control
imgix

o