JS0 + JSSugar not so sweet?

#​709 — October 17, 2024

Read on the Web

JavaScript Weekly

The Story of Web Framework Hono, By Its Creator — Hono is a neat, lightweight framework designed to run on any JavaScript runtime that has been picking up steam in the past year. You can create a simple app reminiscent of Express.js, say, but run it on Cloudflare Workers, Deno, Bun, or Node. It’s in heavy use all over the place, and has lots of interesting features like letting you write HTML with JSX.

Yusuke Wada

Supercharge Your Node.js Code Reviews with AI — Tired of event loop bottlenecks, async errors, and dependency vulnerabilities slipping through code reviews? CodeRabbit, an AI-powered code review tool, analyzes your codebase line-by-line, detecting perf issues, optimizing async patterns, and enhancing security with each pull request.

CodeRabbit sponsor

Node v23.0.0 (Current) Released — Say hello to the newest release line of Node.js that gets all the cutting edge features first (Node 22 will soon become an LTS release as per the usual schedule). Node v23 notably enables support for loading ES modules with require() by default, drops 32-bit Windows support, and node –run goes stable.

Rafael Gonzaga

JS0/JSSugar: ‘The Tooling Will Continue Until Morale Improves’ — In a rather quirky slidedeck presented at TC39 recently, an idea was floated to call the language JS engines implement ‘JS0’ and a myriad of features that have to be compiled to JS0 ‘JSSugar’. It might not surprise you that this idea is considered.. controversial and ▶️ Theo Browne did a 25-minute video digging into it further.

Caolan

IN BRIEF:

Greensock’s popular JavaScript animation library GSAP has been acquired by Webflow – it’ll continue to be updated and maintained as before.

Did you know setTimeout struggles to set timeouts longer than 25 days (or 2^31 milliseconds) in duration? Never fear: Evan Hahn unveils setBigTimeout.

quickjs-cross-compiler provides a way to generate static binaries of JavaScript apps for x86_64, i686, ARM 7, and ARM64.

RELEASES:

Electron 33 – The popular way to build cross-platform desktop apps gets a bump up to Chromium 30, Node 20.18, V8 13, but drops macOS 10.15 support.

Wasp 0.15 – Wasp is a Rails-like framework using Node, React & Prisma.

Zustand 5.0 – Simple, flux-inspired state management for React.

Javet 4.0 – Java + V8. Embed Node.js and V8 into Java.

Next.js 15 Release Candidate 2, Node.js 22.10.0 (Current), Jasmine 5.4

📒 Articles & Tutorials

How to Build an Image Search App with CLIP, Postgres & JavaScript — A tutorial that brings together a lot of ideas in one place. CLIP is used to turn images into text descriptions. Postgres is used as a vector database. JavaScript provides the glue for both the frontend (with React) and backend (Node.js).

Haziqa Sajid

Using Sibling Parameters as Default Values in Functions — function myFunc(arg1, arg2 = arg1)? A technique safely in the ‘not a lot of people know you can do that’ pile. Alex digs into it a bit and looks at some use cases.

Alex MacArthur

[Guide] Debugging Microservices & Distributed Systems — Learn best practices on understanding and debugging modern web applications. Read the guide.

Sentry sponsor

Liskov’s Gun: The Parallel Evolution of React and Web Components — An opinion piece so long there’s an EPUB version. Baldur tackles Web Components, their growing pains, why frameworks like React took a different path, and why the whole topic remains a difficult circle to square.

Baldur Bjarnason

React Folder Structure in Five Steps, 2024 Edition — Articles about structuring React apps are always popular; this one breaks the idea down to five steps from the simplest of apps to more complex ones. Bulletproof React is worth a look too for something broader.

Robin Wieruch

Optimize Your Builds with Depot’s GitHub Actions Price Calculator — Depot just launched a GitHub Actions price calculator. Get a cost breakdown and make your builds faster and cheaper!

Depot / GitHub Actions Price Calculator sponsor

📄 🫣 Implementing Regular Expressions in TypeScript Types (Badly) – It’s almost Halloween so scary stories are welcome. Steven Kalt

📄 ‘I Interviewed 100 DevTools Founders and This Is What I Learned’ Jack Bridger

📄 Handling In-Browser Paste Events in JavaScript Raymond Camden

📄 The Nuances of Base64 Encoding Strings in JavaScript Matt Joseph

📄 How to Convert CommonJS to ESM Andy Jiang

🛠 Code & Tools

ApexCharts: Flexible Interactive Charting Library — A mature and frequently updated charting library for creating interactive data visualizations, with sparklines, heatmaps, line charts, funnel charts, pies, and others. Can be used in a vanilla way or alongside Angular, Vue or React and there are lots of live examples (with code for each). GitHub repo.

ApexCharts

Over 100 Algorithms and Data Structures Demonstrated in JS — Examples of numerous common algorithms (e.g. bit manipulation, Pascal’s triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations.

Oleksii Trekhleb et al.

Developer Kit: Learn How to Troubleshoot Front-End Issues Faster — Get the kit curated to help front-end developers better understand user activity and resolve issues more efficiently.

Datadog sponsor

fast-grid: The World’s Most Performant DOM-Based Web Table? — A bold claim, but you can see for yourself using the online demo, which lets you filter, sort, and scroll simultaneously for a true test.

Gabriel Petersson

🎨 Color Thief: Grab Color Palettes from Images — Given an image, this uses canvas to return a list of the dominant colors. Works in browsers or Node.

Lokesh Dhakar

Node Version Manager Desktop 4.0 — A Tauri-powered desktop app for macOS, Windows and Linux to manage multiple installed versions of Node on your system.

rainbow

🎹 ChordSymbol: Chord Symbol Parser and Renderer — Accepts chord names in strings (e.g. G7/B, Cadd9, Asus2) and lets you access the notes those chords are made of. GitHub repo.

Christophe Noël

debounce 2.2 – Delay function calls until a set time elapses after the last invocation.

😳 NSFW.js 4.2 – Client-side NSFW image detection via TensorFlow.js.

Secretlint 9.0 – Tool to prevent committing credentials/secrets.

☎︎ vue-tel-input 9.2 – Telephone number input for Vue. (Demo.)

🗓️ Qalendar 3.9 – Event calendar and date picker for Vue 3.

Vaul 1.1 – Unstyled drawer React component. (Demo.)

Mineflayer 4.22 – Create Minecraft bots in JavaScript.

FxTS 1.1 – Functional programming library for TS/JS.

📰 Classifieds

🎹 STRICH: Add blazing fast and reliable 1D/2D Barcode Scanning to your web apps. Free demo app and 30-day trial available.

🪝 Hookdeck: A serverless queue to reliably send, receive, transform, filter, and route events across your event-driven apps.

💥 Improve your database performance with AI. Prisma Optimize automatically analyzes your queries and helps you improve them.