JavaScript Weekly Issue 537: May 7, 2021

#​537 — May 7, 2021

Unsubscribe | Read on the Web

JavaScript Weekly

How GitHub Uses and Works with Web Components — GitHub has long been a proponent of Web Components with over 17 open-source components available for all to use. Here’s their story of why they use them and how they build them.

Kristján Oddsson

zx: A Tool for Writing Better Shell Scripts — Tired of turning to bash, Python or Ruby to throw together a quick script? Stick with the JavaScript you know and love – this makes it easier with some handy functions for calling other programs, processing their output and results, changing directory, etc.

Google

Document Database. SQL Queries. In-Memory Speed — The No. 1 reason developers choose Couchbase? You can use your existing SQL skills to easily query and access JSON. That’s more power and flexibility with less training. Learn more.

Couchbase sponsor

AWS Introduces 'CloudFront Functions' — Think (very) short running JavaScript functions right within Amazon CloudFront designed to rewrite, redirect, or otherwise work with incoming requests.

Amazon Web Services

Bootstrap 5 Released — A big release for the popular CSS framework with numerous JavaScript changes under the hood too, such as no more jQuery(!) and an upgrade to Popper 2.

Mark Otto

Quick Bits

• SpiderMonkey is Mozilla's long standing JavaScript engine as used in Firefox and other projects. It now has an all new homepage and.. drum roll.. a logo for the first time ever.
• Ben Beattie-Hood has released Modern TypeScript, an e-book aiming to raise money for the Australian Red Cross. This 18-minute video covers what's in the book.
• V8 9.1 is on the way. It's one of the less feature packed releases but adds top level await by default (already the case in some users of V8, such as Blink), private brands check syntax by default, and some perf improvements.
• Up and coming toolchain Rome has formed a company, raised some money, hired folks.
• A look at what's new in RxJS 7, the reactive extensions for JavaScript.

Releases

node-dev 7.0 — Zero-conf Node.js reloading.
Mocha 8.4 — JavaScript test framework.
vue-test-utils 1.2.0 — Utilities for testing Vue components.
Gatsby 3.4 — React based app framework.
Node.js 16.1.0

📖 Articles, Opinions & Tutorials

Dependency Managers Don’t Manage Your Dependencies — Christoph Nakazawa has kicked off a new series on JavaScript infrastructure by putting the role of tools like npm, Yarn, or pnpm into context and explaining how you can begin to ‘take ownership’ of your dependencies.

Christoph Nakazawa

Hosting SQLite Databases on GitHub Pages (or Any Static File Host) — A clever bit of hacking around here. sql.js provides an SQLite client in the browser but the author wrote a virtual file system addition to fetch chunks of remotely hosted SQLite databases over HTTP. Some interesting potential here, I think.

Phiresky

▶ A Comparison of Five React Frameworks — In just 26-minutes, this video provides most of the information required to pick the right React framework from five top players in the space: CRA, Gatsby, Next.js, Blitz, and Redwood.

Leigh Halliday

Search Your Code. ALL of it, everywhere — Sourcegraph is the one tool to find & fix things across all your code. Any code host, any repo, any language. Try it now.

Sourcegraph sponsor

TypeScript Function Syntaxes — The syntax for various functions and function types in TypeScript with simple examples.

Kent C Dodds

Update URL Query Parameters As You Type in an Input Field — For when you want to change the current URL’s query parameters as you type in an input field (such as on a live search page).

Amit Merchant

Create a Satellite Tracker in 30 Lines of JavaScript — Unsurprisingly this is heavy on the dependencies, but neat.

Omar Shehata

▶ A Talk About the TC39 Decimal Proposal — From Web Engines Hackfest 2021.
Caio Lima

Cloning JavaScript Objects with Graph Theory
Andrea Simone Costa

Top Ten git Tips and Tricks
Julie Kent

How We Sped Up Chrome DevTools Stack Traces by 10x
Chrome Developers

Mantine: A New React Component Library — An MIT licensed, TypeScript-based collection of around 60 components and hooks with native dark theme support and a focus on usability and accessibility. Plenty of documentation and examples - we like it. Oh, and they work with Preact too.

Mantine Team

Pts: A Library for Visualization and Creative Coding — An impressive, lightweight and modular library, written in TypeScript and compiled to ES6. Plenty of demos to play around with. p5.js is a similar long standing tool in this space.

William Ngan

Limited-Time Sale: 25% off Wallaby.js and 50% off Quokka.js — Breakpoints and console.log is the past, real-time feedback without leaving your editor is the future.

Wallaby.js sponsor

Spotlight: A Lightbox Gallery Library — We first linked to this two years ago when it was new, now it’s more mature and boasts as being the ‘most easy to integrate’ lightbox gallery with no dependencies either. Demos here.

Nextapps GmbH

Useful Tools for Parsing and Annotating PDFs in Node — Nothing beats an article by someone who’s just had to do the thing being covered.

Jing Fan

Fx: A Command-Line JSON Processing Tool — If you’ve got some files full of JSON that you want to process, Fx will slice and dice it however you want, including using JavaScript one-liners to add a bit of logic to the process.

Anton Medvedev

Build, Deploy, and Update Applications Fast—All on the Cloud

OutSystems sponsor

Hammer: An esbuild-Powered Build Tool for HTML Applications — The idea is to a TypeScript-centric "ultra lightweight alternative to Parcel."

Haydn Paterson

node-wasm-run: Run Arbitrary WASM/WASI Files on V8
Wasm3 Labs

Observable Plot: A Library for Exploratory Data Visualization — GitHub repo.
Observable

😂 A fun one.. or is it?

Think about what Math.min() and Math.max() might each return, then test it out.. or cheat and look at this tweet 😏