Plus detecting aircraft from JavaScript, a tool to visualize JSON as a graph, default export controversy, and jQuery is still alive. |

#​604 — September 2, 2022

Unsubscribe  |  Read on the Web

JavaScript Weekly

Building an Aircraft Radar System in JavaScript — With a title like this, I couldn’t resist checking it out. Charlie digs into some interesting stuff including using WebUSB to interact with a radio to decode ADS-B positioning signals that aircraft transmit. (Before anyone comments, OK, it’s not really a radar but you could plot one!)

Charlie Gerard

12 Useful JavaScript Data Grid Libraries — A rundown of some data grid libraries for providing spreadsheet-esque views over datasets – Zara also shares her recommendations on things to consider when making a choice.

Zara Cooper

Stytch Is Your All-In-One Platform for User Authentication — With our API and SDKs, you can quickly set up secure, low-friction authentication and authorization for better security, better conversion rates, and a better end user-experience. Try us out today.

Stytch sponsor

JSON Crack: Visualize JSON Data in Graph Form — Despite the.. quirky name (it was previously called JSON Visio 😬) this is a handy tool for working with and displaying JSON structures. You can play with it online, embed graphs into your site, or download them for further use.

Aykut Saraç

IN BRIEF:

  • DEBUGGING TIP: David Walsh shows off Chrome's rather useful monitorEvents and monitor helper functions for being notified when certain events occur or if a certain function is ever called. I didn't know about these.. and even Ben Nadel in the comments said: "Oh my chickens, this is amazing" 😆

  • Another month, another VS Code release. Context-maintaining 'sticky scroll' is no longer an experimental feature. Ships with TypeScript 4.8. Oh, and rounded buttons 😏

  • 18 months after jQuery 3.6.0 was released, jQuery 3.6.1 is here as a maintenance release. The fixes and improvements are minor indeed, but I can't help but feel comforted by its continued existence 🥰

RELEASES:

NodeBB 2.5 – Node.js based forum software.
Faker 7.5 – Generate dummy data on demand.
ReacType 13 – React app prototyping environment.
Lerna 5.5 – Monorepo oriented build system for JS packages.
ESLint 8.23

📒 Articles & Tutorials

Are Default Exports in JavaScript Modules Terrible? — Lloyd thinks so and points out that default exports can lead to mismatched and confusing names, so prefers named exports instead. As always, though, it comes down to how you use the feature.

Lloyd Atkinson

Implementing a Promisable setTimeout — One of those explorations that’s more about learning about how things work under the hood, rather than to do anything useful. (If you’re a Node user, the Timers Promises API covers similar ground.)

Dmitry Kudryavtsev

Webinar - AuthN & AuthZ: Security, Compliance, and Other Challenges — Join Permit.io and FusionAuth and learn to build Auth that meets your security, compliance, and privacy requirements.

Permit.io sponsor

Understanding React's useMemo and useCallback — Many find these hooks confusing. This tutorial goes over what they do exactly and how to get the most out of them – all in Josh’s usual highly accessible and engaging style.

Josh W. Comeau

An Introduction to Dependency Injection“Dependency injection is, in its essence, about parametrizing things previously hardcoded in functions/classes, so we can control these functions/classes to a greater extent.”

Henrique Yuji

In-Browser Compression and Decompression with the Compression Streams API — How to write smaller web apps that don’t need to ship their own compression or decompression library - this works in Chrome and Safari Technology Preview 152.

Thomas Steiner

Integrate eSignatures in Your App in Less Than a Week — Enable document signing from anywhere with HelloSign's eSignature functionality. Test the API for free.

HelloSign, a Dropbox Company sponsor

Making a Morphing 3D Sphere with Three.js — A striking, modern effect for the Web. CodePen demo included.

Johnny Simpson

Bringing Angular Components to Astro Islands 🏝Astro has out-of-the-box support for multiple frameworks, but Angular isn’t one of them. Brandon used a project he created called Analog to enable Angular components within an Astro site.

Brandon Roberts

Why React Contexts Are Great (and Why We Didn't Use Them)
Allen Janyska

🛠 Code & Tools

Lusift: Library to Create Product Walkthroughs for Your Web App — Happy to go vanilla, but has React and Vue integrations too. GitHub repo. Other options in this space are Shepherd and React Joyride.

Lusift

Derive Type: Generate Type Definitions for JS Automatically From Tests — Derive types dynamically by running tests to capture value combinations – the idea is to help you manage things while developing functions, particularly if you’re not able to use TypeScript (more from the author on this). There’s ▶️ a screencast that explains more.

Dr. David A. Kunz

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

Hyper Fetch: A Turbocharged Fetch Library — The creator bills it as “a mix of Axios and react-query in one, with advanced persistence options.” It’s backend agnostic and offers queues, caching, persistence, and even offline support out of the box. GitHub repo.

Maciej Pyrc et al.

Partytown 0.7: Run Third Party Scripts in a Web Worker — The idea is simple: run resource intensive scripts on a separate thread (in a web worker) to let the main thread remain responsive. v0.7 adds an option to execute certain scripts on the main thread which can be useful in some situations (an example is provided). GitHub repo.

Partytown

Sandpack: Component Toolkit for Creating Your Own Live Running Code Editing Experience — Created by the folks at CodeSandbox, so they know what they’re talking about. GitHub repo.

CodeSandbox

TestCafe v2.0.0: Automated End-to-End Testing Tool — A popular and long standing testing tool reaches a new milestone and, notably, is the first update to include breaking changes.. so if you’re a user, pay close attention.

Developer Express Inc.

OTHER QUICK RELEASES:

Jest-Image-Snapshot 5.2 – Jest matcher for image comparisons.
melonJS 13.3 – Browser-based 2D game engine.
peaks.js 2.0.5 – BBC-created audio waveform UI component.
github-script 6.2 – Use JS in GitHub workflows.
Create Rust App 8.2 – Set up a Rust + React app in one command.
Ember Inspector 4.7 – An Ember tab for your DevTools.

💻 Jobs

Senior JavaScript/TypeScript Developer (Remote or Warsaw) 🇵🇱 — Join CKEditor team to develop an Open Source project used by millions of users around the world 🚀and realize your true potential.
CKEditor

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

o