JavaScript Weekly Issue 591: May 27, 2022

#​591 — May 27, 2022

Unsubscribe | Read on the Web

JavaScript Weekly

Comparing Three Ways of Processing Arrays Non-Destructively — The good doctor of JavaScript puts for-of, .reduce(), and .flatMap() up against each other so you can pick which makes the most sense for your own array processing work.

Dr. Axel Rauschmayer

npm Security Update: What GitHub's Learnt About April's Attack — Last month, GitHub, the stewards of the npm registry, reported that stolen OAuth tokens were used to access certain private repositories, private package manifests & metadata, as well as npm user account data. Here's an update. Notably: "GitHub discovered a number of plaintext user credentials for the npm registry that were captured in internal logs following the integration of npm into GitHub logging systems." Ouch. Don't store secrets or credentials in version control (or logs).

Greg Ose (GitHub)

Making TypeScript 'Stick' — Test your knowledge through quizzes, challenges, and even a TypeScript gameshow in this new course by Mike North!

Frontend Masters sponsor

TypeScript 4.7 Released — The headline feature for the typed JavaScript superset is ES module support for Node.js – a feature that has been infamously difficult to implement, and whose reliance on file extensions continues to provoke debate – plus CommonJS interoperability (from ES modules), improved function inference, control-flow analysis for bracketed element access, and more.

Daniel Rosenwasser

Next.js's Layouts RFC: Big Changes Ahead for Next.js — If you’re a Next.js user, you’ll want to read this as some significant updates are on the way, particularly around routing, app structure, and layouts (including nested layouts).

Neutkens, Markbage, et al. (Vercel)

IN BRIEF:

• DigitalOcean has launched a new serverless functions-as-a-service platform – yes, you can run your JS code on it.

• Angular 14 (currently in RC phase) is due imminently – a look at what's new.

• Netlify has hired Ryan Carniato, the founder of the SolidJS project, to work on it full-time – here's his story.

• Node 17 goes 'end of life' next week, joining Node 12 which went EOL in April.

• GitHub Actions can now use Node 16 – Node 12 support remains for now.

• Ghost is a Node.js-built CMS and blogging platform that has become an ecosystem and business all of its own, and there's a new major version out now: Ghost 5.0

RELEASES:

• Electron 19 – Gets Chromium 102, V8 10.2, and Node 16.14.2.
• Neutralino.js 4.6 – Lightweight cross-platform desktop app framework.
• fast-check 3.0 – Property based testing framework.
• Knex 2.1.0 – SQL builder for Node.js.
• Cypress 9.7.0 – Testing for anything in a browser.
• Storybook 6.5 – UI component dev tool.

📒 Articles & Tutorials

What is 'Edge Compute?' 'It's Kind of Like Knitting Dog Hats' — Look, the metaphor made us laugh, and the author stretches it out quite a long way here. "Cloud functions are like robots trained to knit dog-hats" – got it?

Austin Gil

How Airbnb Gets Faster JavaScript Builds with Metro — The story of Airbnb’s migration from Webpack to Metro (a JavaScript bundler aimed at React Native – but Airbnb uses it for Web projects) and how it made their development feedback loop ‘nearly instantaneous’.

Rae Liu

Dark Patterns in UX — Higher-order functions are an important feature that cannot be overlooked in functional programming, allowing for easy nesting of functions to archive a specific task. Learn more about them from this article.

Kendo UI for Angular sponsor

How We Converted Our Node.js Library to Deno (using Deno) — "We landed on a "runtime adapter" pattern that we think represents a general-purpose approach that may be useful to other library authors looking to support Deno."

James Clarke (EdgeDB)

A Roundup of React State Management Libraries in 2022 — There are a lot of options in this space including Zustand, Recoil, XState and, of course, Redux.

Albert Gao

JSON and the Stringification Oddities in JavaScript — It’s not the most straightforward thing, although there is at least a (complicated) written spec for JSON.stringify’s operation.

Zhenghao

The Balance Has Shifted Away From SPAs — "how the context has changed in recent years to give MPAs more of an upper hand against SPAs". (MPAs are Multi-Page Apps. Or just ‘apps’ to me.)

Nolan Lawson

Add a Professional Scheduling Widget to Your MES App

Bryntum sponsor

Avoiding Puppeteer Antipatterns
Greg Gorlen

5 Things That Make Astro Unique for Building Web Apps
Brian Rinaldi

🛠 Code & Tools

🥷 Ninja Keys: Add a Command Palette / Keyboard Shortcuts Interface to Your App/Site — If you’ve used Cmd/Ctrl+K on GitHub or the command palette in tools like VS Code, this will feel familiar to you and it’s at home in vanilla JS apps or alongside Vue, React or Svelte. Try it here. Kbar is another player in this space focused more on React.

Sergei Sleptsov

Filesize.js: Generate Human Readable Strings From File Sizes — For example, 123456 bytes could turn into "120.56 KB" - though different standards of conversion can also be used. GitHub repo.

Jason Mulligan

LunchboxJS: A Custom Vue 3 Renderer for Three.js — Straight in with a snazzy full-page demo here. The docs may prove more useful after checking it out. "Think of it like react-three-fiber for Vue."

Breakfast Studio LLC

Try the CI/CD Tool Used by Shopify, Pinterest, and Lyft — Join the best engineering teams running the fastest, most reliable build and deploy pipelines at scale. Now with a free plan.

Buildkite sponsor

React-Uploady 1.0: File Upload Components and Hooks — Aims to be simple while highly customizable. You can have a file upload button, a preview, a zone for drag and drop uploads, and more. The docs are good and show off a basic example and there’s a screencast too.

Yoav Niran

EStimator.dev: The Modern JavaScript Savings Calculator — Calculate the size improvement a site could achieve by switching to more modern JavaScript syntax.

Google Chrome Labs

Browser Extension Template: Quickly Flesh Out a Browser Extension Codebase — Think create-react-app but for an extension, kinda.

Debdut Karmakar

Nuxt Content v2: A Nuxt Module That Uses Markdown, YAML, CSV or JSON Files From a content Directory
Chopin, Guilloux, Birang, and Ollivier