Beating the JavaScript drum

#​549 — July 30, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

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— The latest Node release brings V8 9.2 to the party which introduces Array.prototype.at. The inspector module (used to interact with the V8 inspector is now also considered stable.

Bethany Nicolle Griggs

Learn the Fundamentals of 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— Yarn 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 put some people off. Yarn 3 is a smoother transition — here’s the changelog.

Maël Nison

🥁  Drum Synthesis in JavaScript— The creator of Elementary, 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?— 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 to fix an http2 module related vulnerability.

• Google is introducing a new Firebase JavaScript SDK which will demand you update your code.

• A fun look at content-aware image resizing in JavaScript with seam carving.

• Tadeu Zagallo of the JavaScriptCore team at Apple shares some experiences on optimizing JS standard library functions in the WebKit JavaScript engine.

RELEASES:

prettier-eslint 13.0– Format using Prettier then eslint --fix
ws 8.0– Node.js WebSocket client and server library.
Plotly.js 2.3– JS data visualization library.
date-fns 2.23.0– Modern JavaScript date utility library.
Recoil 0.4.0– Experimental state management for React apps.

📖 Articles, Opinions & Tutorials

Gatsby Serverless Functions and the 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 platform.

Paul Scanlon

JavaScript's 'Forgotten' Keyword: with— 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— 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

LaunchDarkly sponsor

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— An explanation of the difference between WebView2, a Microsoft Edge-based control for embedding web views into native apps, and what the Electron.js project does.

Electron.js Team

Global vs. Local Styling in Next.js— 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
Cassidy Williams

Mocking the Modular AWS SDK for JavaScript (v3) in Unit Tests
Trivikram Kamat (AWS)

Size Limit 5: A Performance Budgeting Tool for JavaScript— 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— 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— A handy tool in its own right, but it also has an API so could hook in more places than expected. Thanks to Simon Plenderleith for the tip here.

Tristan Burch

JavaScript Cookie 3.0: A Simple API for Handling Browser Cookies— Browsers already offer an API for working with cookies, but this adds a little more abstraction. What’s new in v3.0.

Hartl, Brack, et al.

React-Tracking 9.0: Declarative Tracking for React Apps— 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— 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— 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— 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
Jake Archibald

svelte-undo: A Small Utility for Managing an Undo Stack
Rich Harris

html-to-image: Generate Images from DOM Nodes using Canvas and SVG
W.Y.