Genius misuse of WOFF 2 and Brotli to win a JavaScript contest.

#​601 — August 5, 2022

Unsubscribe  |  Read on the Web

JavaScript Weekly

JS1024 2022 Competition Winners— JS1024 is an annual ‘code golfing’ contest where you get 15 days to create a cool JavaScript or GLSL program within 1024 bytes. Naturally this brings out a lot of creativity and trickery, but also amazing (non-minified) source to check out. The winning JS entry is this quirky typing game and the winner shader is a sinister 3D tunnel experience. There’s a lot to look through and learn from because these developers are using every trick in the book, including compressing 1900+ English words into one of the entries..!

JS1024

Docusaurus 2.0 Released— Docusaurus powered sites are everywhere in the JS space lately (look at the Babel docs, for example), and after four years of effort, version 2.0 of the popular React-powered documentation-focused static site generator has landed. This new version was rebuilt from scratch, and adds MDX support, a new plugin system, theming, dark mode, SPA navigation, offline support, and more.

Meta (Facebook)

Announcing EdgeDB 2.0— Try the database that makes ORMs obsolete. EdgeDB’s TypeScript client has the simplicity of an ORM but the power of a full-fledged query language. And with the release of EdgeDB 2.0 it’s better than ever—read the announcement for details.

EdgeDB sponsor

Electron 20: The Cross Platform Desktop App Platform— As much as 20 sounds like a substantial, round version number, it’s mostly a typical release. Chromium gets bumped up to v104, V8 to 10.4, and Node to 16.15.0. Windows gains an ‘immersive dark mode’ and it’s now possible for Electron windows to ‘float’ over full-screen apps panel-style.

Charles Kerr

IN BRIEF:

• 🔎 npm query is a new command in the latest version of npm that lets you query your project's dependencies using a CSS-like selector format.

• Remember the guy who built JavaScript games using Microsoft Excel and PowerPoint as a canvas? He's back building ▶️ a multiplayer game in Word. Just 3-minutes and wonderfully wacky.

• There's a new VS Code release and while the JS debugging features see improvements, ▶️ this 'sticky scrolling' feature is particularly neat as it keeps your function signatures on screen even during long functions.

• If you use AWS's Lambda serverless platform for running your functions and you use it a lot, their new tiered pricing structure may yield some big savings.

RELEASES:

Parcel 2.7
Ionic 6.2– Cross-platform app building toolkit.
Redwood 2.2– React-backed full-stack framework.
Cypress 10.4– Popular testing approach for anything browser-based.
Ohm 16.4– Parser / interpreter building toolkit.

📒 Articles & Tutorials

Checking if Native JavaScript Functions are 'Monkey Patched'— Along with JavaScript’s dynamism comes the potential for functions to be overridden (or ‘monkey patched’, as some people call the idea of runtime modifications) but there are (imperfect) ways to see if this has occurred.

Matteo Mazzarolo

On Building Modern Webapps Faster with Bud— Bud (no, not Bun) is a relatively new Go(lang) and JavaScript powered full-stack web framework with a lot of good ideas – ▶️ this 15-minute video on creating a Hacker News clone with it is a fun demo. If Go works for you on the backend, it's worth a look.

Preslav Rachev

Level-Up Your Cypress Testing Knowledge for Free— Learn from top industry experts with over 25 lessons on how to get started with Cypress.

Cypress.io sponsor

From 500ms to 1.7ms in React— A sluggish customized grid triggered a journey to analyze some bottlenecks, followed by some tweaks resulting in a dramatic perf improvement.

Oren Farhi

Parsing Command Line Arguments with util.parseArgs() in Node.js— A feature added in Node 18.3, just this year.

Dr. Axel Rauschmayer

Use Jest to Replace Default Test Runners in an Angular Project
Rob Bell

🛠 Code & Tools

vue-grid-layout: Draggable and Resizable Grid Layout for Vue.js— Like Gridster.js (from the jQuery days!) , but for Vue.js. There’s a demo right on the homepage. GitHub repo.

JBay Solutions

safe-json-value: For When JSON Serialization Mustn't Fail— Prevents JSON.serialize() from throwing an exeception, changing types, or otherwise transforming values unexpectedly, because sometimes you need that sort of reassurance.

ehmicky

Quokka.js Is the #1 JavaScript / TypeScript Scratchpad for VS Code— Ideal for exploring and testing JavaScript. Code runs immediately as you type with feedback right next to your code.

Wallaby.js sponsor

colorgrad: High-Perf, Rust-Powered Color Gradient Library— Uses Rust compiled to WebAssembly behind the scenes – very modern! It’s also a nice small codebase with which to learn the technique if you want to try it too. Live demo.

Nor Khasyatillah

Embla Carousel 7: Carousel with Fluid Motion and 'Swipe Precision'— A much maligned UI element, but the examples worked pretty well for us. Library agnostic but has easy integrations for React, Vue, and Svelte, if you need them.

David Jerleke

Nativefier: Make Any Web Page a Desktop App— A basic Node.js-powered tool for creating a desktop ‘app’ for any Web site using Electron as the webview. For Windows, macOS and Linux.

Goh Jia Hao

ts-version: Access the Current TypeScript Version from Types— The creator puts it best: “Frustrated how TS versions handle your package slightly differently, but don’t want to ship a full copy of your types with TypesVersions? Now you can adjust your types depending on the TS version!”

Lenz Weber-Tronic

Integrate eSignatures in Your App in Less Than a Week

HelloSign, a Dropbox Company sponsor

PowerGlitch: A Tiny Library to 'Glitch' Images on the Web
PowerHat

OTHER QUICK RELEASES:

React Native Boilerplate 3.5– A starter template for RN apps.
Stripe Node 10.0– Node.js library for Stripe's API.
Electron Store 8.1– Simple data persistence for Electron apps.
Meriyah 4.3– Compliant, self-hosted JS parser. (Demo)
React Spreadsheet Grid 2.3– Excel-like grid component for React.
Inferno 8.0.2– Fast, React-like library.
∿ Peaks.js 2.0.3– BBC's audio waveform UI component.

❓ Did you know..

• There's a useful curated list of over 150 static site generators and related resources? If you want to cast a wider net and stretch the SSG definition a little, here are hundreds more.

• On macOS, if you hold down Option (⌥) when resizing a window, it resizes from all directions at once? Handy for those windows that wander off screen.

• 🐶 Rewarding a dog for rescuing people in danger can have unintended negative consequences?