--- title: "Beating the JavaScript drum" publication: "JavaScript Weekly" issue: 549 published_at: "2021-07-30" canonical_url: "https://javascriptweekly.com/issues/549" --- Plus a new JS SDK for Firebase, Yarn 3.0, and a performance budgeting tool. | #​549 — July 30, 2021 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/549) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/mocdlbypsnrhizppkgat.jpg)](https://christianheilmann.com/2021/07/30/using-console-log-debugging-in-visual-studio-code/) [Using `console.log()` Debugging in Visual Studio Code](https://christianheilmann.com/2021/07/30/using-console-log-debugging-in-visual-studio-code/) — Using the JavaScript debugger in VS Code you can access the browser developer tools console right inside the editor. Ideal if you're in that happy majority of `console.log` debuggers? :-) Christian Heilmann [Node v16.6.0 (Current) Released](https://nodejs.org/en/blog/release/v16.6.0/) — The latest Node release brings [V8 9.2](https://v8.dev/blog/v8-release-92) to the party which introduces `Array.prototype.at`. The [`inspector` module](https://nodejs.org/api/inspector.html) (used to interact with [the V8 inspector](https://v8.dev/docs/inspector) is now also considered stable. Bethany Nicolle Griggs [![\](https://copm.s3.amazonaws.com/71b5a788.jpg)](https://frontendmasters.com/courses/redux-fundamentals/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=redux) [Learn the Fundamentals of Redux](https://frontendmasters.com/courses/redux-fundamentals/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=redux) — Add scalable, production-ready state management into your React app and extend Redux's abilities with tools like Reselect, Immer, and Redux Toolkit. Frontend Masters sponsor [Yarn 3.0: What's New in the Alternative JavaScript Dependency Manager](https://dev.to/arcanis/yarn-3-0-performances-esbuild-better-patches-e07) — [Yarn](https://yarnpkg.com/) was born at Facebook in 2016 as an alternative (and, at the time, improvement) to `npm`. Both npm and Yarn have evolved since then, and the big jump to [Yarn 2](https://dev.to/arcanis/introducing-yarn-2-4eh1) put some people off. Yarn 3 is a smoother transition — here’s [the changelog.](https://github.com/yarnpkg/berry/blob/master/CHANGELOG.md) Maël Nison 🥁 [Drum Synthesis in JavaScript](https://www.nickwritesablog.com/drum-synthesis-in-javascript/) — The creator of [Elementary](https://www.elementary.audio/), a system for building audio apps in JavaScript, shows off how he went about creating a drum synth on top of it. Nick Thompson [How Do Chrome Extensions Impact Browser Performance?](https://www.debugbear.com/blog/chrome-extension-performance-2021) — This report investigates how 1000 of the most popular Chrome extensions impact browser performance and end-user experience. Matt Zeunert **QUICK BITS:** - Node.js has received [a raft of immediate security releases](https://nodejs.org/en/blog/vulnerability/july-2021-security-releases-2/) to fix an `http2` module related vulnerability. - Google is introducing [a new Firebase JavaScript SDK](https://firebase.googleblog.com/2021/07/introducing-the-new-firebase-js-sdk.html) which will demand you update your code. - A [fun look at content-aware image resizing](https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript/) in JavaScript with seam carving. - Tadeu Zagallo of the JavaScriptCore team at Apple shares [some experiences on optimizing JS standard library functions](https://webkit.org/blog/11934/optimizing-javascript-standard-library-functions-in-jsc/) in the WebKit JavaScript engine. **RELEASES:** [prettier-eslint 13.0](https://github.com/prettier/prettier-eslint) – Format using Prettier then `eslint --fix` [ws 8.0](https://github.com/websockets/ws/releases/tag/8.0.0) – Node.js WebSocket client and server library. [Plotly.js 2.3](https://github.com/plotly/plotly.js/releases/tag/v2.3.0) – JS data visualization library. [date-fns 2.23.0](https://github.com/date-fns/date-fns) – Modern JavaScript date utility library. [Recoil 0.4.0](https://github.com/facebookexperimental/Recoil/releases/tag/0.4.0) – Experimental state management for React apps. 💻 Jobs [Full Stack Utviklere](https://visma.easycruit.com/vacancy/2735883/91685) — Visma søker utvikler i Norge eller Sverige. Avansert javascriptutvikling som minner mer om spillprogrammering enn tradisjonell koding. Visma [JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=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, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/clpdmvihw0zrxo5jdllf.jpg)](https://www.smashingmagazine.com/2021/07/gatsby-serverless-functions-international-space-station/) [Gatsby Serverless Functions and the International Space Station](https://www.smashingmagazine.com/2021/07/gatsby-serverless-functions-international-space-station/) — Many eyes have been set on reaching space lately, but Paul Scanlon is busy looking at the ISS and shows how to put together an app to track its location on a 3D globe, all powered by React, Three.js and Gatsby's [Functions](https://www.gatsbyjs.com/docs/reference/functions/) platform. Paul Scanlon [JavaScript's 'Forgotten' Keyword: `with`](https://dev.to/mistval/javascript-s-forgotten-keyword-with-48id) — I’m linking to this because it’s an interesting appendage from JavaScript’s history that’s worth knowing about in case you see it, **but that you should avoid using yourself.** Randall X [How To Build an E-Commerce Site with Angular 11 & Commerce Layer](https://www.smashingmagazine.com/2021/07/ecommerce-angular11-headless-paypal/) — Commerce Layer is a ‘commerce API for developers’ (sort of a headless Shopify, I guess) and this _very_ extensive walkthrough covers integrating it with an Angular app of your own. Zara Cooper [The Definitive Guide to Feature Management](https://launchdarkly.com/the-definitive-guide-to-feature-management/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q2-cooperpress&utm_content=blog_post) LaunchDarkly sponsor [NFC Comes to the Web](https://cxlabs.sap.com/2021/07/27/nfc-comes-to-the-web/) — NFC functionality is now widely available on the hardware side, with browser support slowly gaining (for example: Chrome for Android 91 now supports WebNFC). As such, Sven has been experimenting with the technology and captured his thoughts here (along with a few code examples). Sven Haiges [On WebView2 and Electron](https://www.electronjs.org/blog/webview2) — An explanation of the difference between [WebView2](https://docs.microsoft.com/en-us/microsoft-edge/webview2/), a Microsoft Edge-based control for embedding web views into native apps, and what the [Electron.js](https://www.electronjs.org/) project does. Electron.js Team [Global vs. Local Styling in Next.js](https://www.smashingmagazine.com/2021/07/global-local-styling-nextjs/) — Approaching the topic of structuring CSS nicely within Next-powered apps. Alexander Dubovoy [How to Build a Modern Shopping Site with Astro and Serverless Functions](https://www.netlify.com/blog/2021/07/23/build-a-modern-shopping-site-with-astro-and-serverless-functions/) Cassidy Williams [Mocking the Modular AWS SDK for JavaScript (v3) in Unit Tests](https://aws.amazon.com/blogs/developer/mocking-modular-aws-sdk-for-javascript-v3-in-unit-tests/) Trivikram Kamat (AWS) 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/vsq5dr3pqbxqeumwlgsj.jpg)](https://github.com/ai/size-limit) [Size Limit 5: A Performance Budgeting Tool for JavaScript](https://github.com/ai/size-limit) — Calculate the real cost to run your JS app or lib to keep good performance and raise an error in CI if the cost exceeded some defined limit. Supports ES modules and tree shaking. Andrey Sitnik [Quickly See Logs in LogDNA](https://docs.logdna.com/docs/nodejs) — The Node.js library lets you send logs from your Node.js and JavaScript apps to LogDNA, where they’re automatically parsed. LogDNA sponsor [JSON Blob: Create, Edit, View, Format, and Share JSON Online](https://jsonblob.com/) — A handy tool in its own right, but it also has [an API](https://jsonblob.com/api) so could hook in more places than expected. Thanks to [Simon Plenderleith](https://twitter.com/simonplend/status/1421051198073868291) for the tip here. Tristan Burch [JavaScript Cookie 3.0: A Simple API for Handling Browser Cookies](https://github.com/js-cookie/js-cookie) — Browsers already offer an API for working with cookies, but this adds a little more abstraction. [What’s new in v3.0](https://github.com/js-cookie/js-cookie/releases/tag/v3.0.0). Hartl, Brack, et al. [React-Tracking 9.0: Declarative Tracking for React Apps](https://github.com/nytimes/react-tracking) — I’m a big fan of their crosswords, but the NY Times puts out a lot of code too. The New York Times [Svelte Storm: An Interesting Open Source Svelte IDE](https://github.com/oslabs-beta/SvelteStorm) — It has a built in state manager window for viewing what’s going on in real time. OSLabs Beta [Tried. Tested. Trusted. Studio 3T - Power Tools for MongoDB](https://studio3t.com/download?utm_source=newsletter&utm_medium=jsweekly&utm_campaign=jul30) — Intuitive IntelliShell. Generate JavaScript from queries. Reshape data with Reschema. Try Studio 3T free for 30 days. Studio 3T sponsor [Sift: MongoDB Style Queries for JavaScript Objects](https://github.com/crcn/sift.js) — I can’t quite put my finger on the use case here, but you may have one. Craig Condon [IdB-Keyval 5.1: A 'Super-Simple-Small' Promise-Based IndexedDB-Powered Keyval Store](https://github.com/jakearchibald/idb-keyval) Jake Archibald [svelte-undo: A Small Utility for Managing an Undo Stack](https://github.com/Rich-Harris/svelte-undo) Rich Harris [html-to-image: Generate Images from DOM Nodes using Canvas and SVG](https://github.com/bubkoo/html-to-image) W.Y. 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