--- title: "Airbnb's uncommon route to faster JS builds" publication: "JavaScript Weekly" issue: 591 published_at: "2022-05-27" canonical_url: "https://javascriptweekly.com/issues/591" --- Plus knitting dog hats, TypeScript 4.7, and big changes coming to Next.js. | #​591 — May 27, 2022 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/591) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/sfvzhechlufacs6s0zie.jpg)](https://2ality.com/2022/05/processing-arrays-non-destructively.html) [Comparing Three Ways of Processing Arrays Non-Destructively](https://2ality.com/2022/05/processing-arrays-non-destructively.html) — 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](https://github.blog/2022-05-26-npm-security-update-oauth-tokens/) — Last month, GitHub, the stewards of the npm registry, [reported](https://github.blog/2022-04-15-security-alert-stolen-oauth-user-tokens/) 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) [![\](https://copm.s3.amazonaws.com/e6af5f4d.jpg)](https://frontendmasters.com/courses/typescript-practice/?utm_source=nodeweekly&utm_medium=email&utm_content=typescript) [Making TypeScript 'Stick'](https://frontendmasters.com/courses/typescript-practice/?utm_source=nodeweekly&utm_medium=email&utm_content=typescript) — 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](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/) — 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](https://github.com/microsoft/TypeScript/issues/49083) – 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](https://nextjs.org/blog/layouts-rfc) — 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](https://www.digitalocean.com/blog/introducing-digitalocean-functions-serverless-computing) – yes, you can run your JS code on it. - Angular 14 (currently in RC phase) is due imminently – [a look at what's new.](https://nevzatopcu.medium.com/what-is-new-in-angular-14-d31edf91fd3e) - Netlify has hired Ryan Carniato, the founder of the [SolidJS](https://www.solidjs.com/) project, to work on it full-time – [here's his story.](https://dev.to/ryansolid/when-netlify-asks-you-to-full-time-oss-you-say-yes-5ccf) - [Node 17 goes 'end of life'](https://twitter.com/trott/status/1529593378190393344) next week, joining Node 12 which went EOL in April. - [GitHub Actions can now use Node 16](https://github.blog/changelog/2022-05-20-actions-can-now-run-in-a-node-js-16-runtime/) – 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](https://ghost.org/changelog/5/) **RELEASES:** - [Electron 19](https://www.electronjs.org/blog/electron-19-0) – Gets Chromium 102, V8 10.2, and Node 16.14.2. - [Neutralino.js 4.6](https://github.com/neutralinojs/neutralinojs/releases/tag/v4.6.0) – Lightweight cross-platform desktop app framework. - [fast-check 3.0](https://github.com/dubzzz/fast-check) – Property based testing framework. - [Knex 2.1.0](https://github.com/knex/knex/releases/tag/2.1.0) – SQL builder for Node.js. - [Cypress 9.7.0](https://github.com/cypress-io/cypress/releases/tag/v9.7.0) – Testing for anything in a browser. - [Storybook 6.5](https://storybook.js.org/blog/storybook-6-5/) – UI component dev tool. 💻 Jobs [Senior Vue.js Developer (Remote-Friendly)](https://www.monterail.com/careers/senior-frontend-developer-vue) — Software Development Agency in Wrocław, Poland working with experts from around the globe to create meaningful software. Monterail [Software Engineers](https://www.stickermule.com/careers) — Sticker Mule is the Internet's most "kick ass" brand. Our software team operates from 17 countries, and we're always looking for more exceptional engineers. Sticker mule [JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-js&utm_content=js) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find JavaScript Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — 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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/vzarncukhzvu7kjn1acv.jpg)](https://austingil.com/edge-compute-knitted-dog-hats/) [What is 'Edge Compute?' 'It's Kind of Like Knitting Dog Hats'](https://austingil.com/edge-compute-knitted-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](https://medium.com/airbnb-engineering/faster-javascript-builds-with-metro-cfc46d617a1f) — The story of Airbnb’s migration from Webpack to [Metro](https://facebook.github.io/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](https://www.telerik.com/blogs/master-higher-order-functions-javascript?utm_medium=cpm&utm_source=jsweekly&utm_campaign=kendo-ui-angular-awareness-general&utm_content=higher-order-functions-javascript) — 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)](https://www.edgedb.com/blog/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](https://www.albertgao.xyz/2022/02/19/react-state-management-libraries-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](https://www.zhenghao.io/posts/json-oddities) — It’s not the most straightforward thing, although there is at least a (complicated) [written spec](https://262.ecma-international.org/5.1/#sec-15.12.3) for `JSON.stringify`’s operation. Zhenghao [The Balance Has Shifted Away From SPAs](https://nolanlawson.com/2022/05/21/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](https://www.bryntum.com/products/scheduler-pro/?aw=jswkly20220520) Bryntum sponsor [Avoiding Puppeteer Antipatterns](https://serpapi.com/blog/puppeteer-antipatterns/) Greg Gorlen [5 Things That Make Astro Unique for Building Web Apps](https://launchdarkly.com/blog/5-things-that-make-astro-unique-for-building-web-apps/) Brian Rinaldi 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ssm1zigkskugu5gvhmar.jpg)](https://github.com/ssleptsov/ninja-keys) 🥷 [Ninja Keys: Add a Command Palette / Keyboard Shortcuts Interface to Your App/Site](https://github.com/ssleptsov/ninja-keys) — 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](https://ninja-keys-demo.vercel.app/). [Kbar](https://github.com/timc1/kbar) is another player in this space focused more on React. Sergei Sleptsov [Filesize.js: Generate Human Readable Strings From File Sizes](https://filesizejs.com/) — For example, 123456 bytes could turn into `"120.56 KB"` - though different standards of conversion can also be used. [GitHub repo](https://github.com/avoidwork/filesize.js). Jason Mulligan [LunchboxJS: A Custom Vue 3 Renderer for Three.js](https://lunchboxjs.com/) — Straight in with a snazzy full-page demo here. [The docs](https://docs.lunchboxjs.com/) 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](http://buildkite.com?utm_campaign=CPress&utm_source=ppc&utm_medium=CPress&utm_term=free-plan&utm_content=new-announcement-plan-details) — 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](https://react-uploady.org/) — 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](https://react-uploady.org/docs/) are good and show off a basic example and there’s [a screencast](https://www.youtube.com/watch?v=bxvHE4hWu3c) too. Yoav Niran [EStimator.dev: The Modern JavaScript Savings Calculator](https://estimator.dev/) — 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](https://github.com/Debdut/browser-extension) — 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](https://content.nuxtjs.org/blog/announcing-v2/) Chopin, Guilloux, Birang, and Ollivier Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom