Plus fail-safe JSON serialization, speeding up a React component, and a naughty dog. |

#​601 — August 5, 2022

Unsubscribe  |  Read on the Web

JavaScript Weekly

JS1024 2022 Competition Winners — JS1024 is a ‘code golfing’ contest where you get 15 days to create a JavaScript or GLSL program within 1024 bytes. This results in lots of creative ideas, complete with fantastic (non-minified) source to check out. The winning JS entry is this quirky typing game and the winning shader-based entry is a 3D tunnel experience. There’s much to learn here as these folks have used every trick in the book, including compressing 1900+ English words in a heavily commented entry that uses Brotli and a specially crafted WOFF2 font file(!)

JS1024

Docusaurus 2.0 Released — Docusaurus powered sites are everywhere in the JS space (e.g. the Babel docs) and after four years of effort, version 2.0 of the popular React-powered documentation-focused static site generator is here. Rebuilt from scratch, it 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 Framework — 20 sounds like a big, round release number but it’s mostly a typical release. Chromium is bumped up to v104, V8 to 10.4, and Node to 16.15.0. Windows gains an ‘immersive dark mode’ and Electron windows can now ‘float’ over full-screen apps panel-style.

Charles Kerr

IN BRIEF:

RELEASES:

Parcel 2.7
Ember 4.6
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 BudBud (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.

💻 Jobs

Senior JavaScript Developer (Warsaw or Remote) 🇵🇱 🇺🇦 — Open Source rich text editor used by millions of users around the world. Strong focus on code quality. Join the CKEditor team.
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

Did you know..

o