fidzu : news

#​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.

#​708 - October 10, 2024

Read on the Web

JavaScript Weekly

TC39 Advances 10+ ECMAScript Proposals - The architects behind the development of the ECMAScript / JavaScript spec got together again this week (you can see them in this tweet) and they had a packed agenda. Import attributes, Iterator helpers, Promise.try and Regexp modifiers all made it to stage 4, and more besides.

Sarah Gooding (Socket)

🦖 Announcing Deno 2 - A huge release for the "what if I reinvented Node again from scratch?" runtime. Backwards compatibility with Node is a headline feature, but there's a lot more baked in. Best, though, is the ▶️ epic 'Announcing Deno 2' video. After a slightly bombastic opener, Ryan presents a fantastic 'keynote' style tour of everything Deno has to offer - I enjoyed watching it.

Dahl, Belder, Iwańczuk and Jiang

💡 A neat new feature is Deno's Jupyter Notebook support which Simon Willison checks out here.

A Deeper Understanding of Web Security - Steve Kinney hosts this extensive video course on the challenges of web security. You'll gain a deeper understanding of security on the web, developing your mental model on how to approach things, explore common vulnerabilities, get hands-on experience with security tools, and get to grips with best practices.

Frontend Masters sponsor

Announcing TypeScript 5.7 Beta - The newest TypeScript is on the way. As always, a true laundry list of enhancements and new features, but the path rewriting for relative paths is a particularly welcome addition, enabling easy rewrites of .ts imports into .js at compile time.

Microsoft

IN BRIEF:

• Ian Grunert writes about work done to (re)enable JavaScriptCore's JIT mechanisms on Windows. This is particularly good news for Bun users.

• Did you know MySQL 9.0 now natively supports JavaScript stored routines?

• 🇺🇸 The next JSNation event is taking place in a hybrid form both remotely and in New York City this November 18 and 21. Some fantastic speakers await.

• Tenno is an interesting online Markdown editor that supports adding spreadsheet-like cells that can be populated by JavaScript.

• 🕹️ The winners of the latest js13kGames game jam have been announced. It's amazing what people have managed to achieve in just 13KB.

RELEASES:

• Bun v1.1.30 - Now includes experimental CSS parsing and bundling, as well as a bun publish to publish npm packages, a la npm publish. You can also compile code to bytecode to speed up startup times.

• Node.js v20.18.0 (LTS) - Now with network inspection support.

• React Native Storybook 8.3 - React Native support in the popular component workshop finally gets fully up to speed.

• Rsdoctor 0.4 - Tool for analyzing the Rspack / Webpack build process.

• ESLint 9.12.0, Electron.js 32.2, Ember 5.12

📒 Articles & Tutorials

Building a Local Single-Page App with htmx - If you have a reasonably simple app to build, using a large framework is probably going to be overkill. htmx to the rescue! Jake presents an easily followed practical tutorial packed with code.

Jake Lazaroff

💡 Jake also wrote an interesting case study of building a local-first app using SvelteKit and Shoelace, if you want to see something more fully-formed.

Product for Engineers: A Newsletter Helping Flex Your Product Muscle - Product for Engineers is dedicated to sharing the skills and strategies product engineers need to succeed.

PostHog sponsor

Build a Static RSS Reader To Fight Your Inner FOMO - The theme of lightweight JavaScript apps continues with a look at creating a basic RSS feed reader, that updates once a day, with Astro.

Karin Hendrikse

Node vs Bun: No Backend Performance Difference? - You can always trust a benchmark to ruffle some feathers, often over the methodology rather than the result. This is no exception, but interesting nonetheless.

Evert Heylen

▶ Building a Tic-Tac-Toe Game in TypeScript Types - One of those videos I enjoyed simply so I don't ever feel tempted to try it myself.

Typed Rocks

Securing Node.js Express APIs with Clerk and React - Secure Express API endpoints and integrate authentication without the complexity of building it from scratch.

Clerk sponsor

📄 Building a Robust Frontend using Progressive Enhancement UK Government

📄 The Popover API: Your New Best Friend for Tooltips - Supported in all major browsers, except Safari on iOS. Sjoerd Beentjes

📄 18 Interview Questions Answered by Angular Experts Angular Space

📄 Testing CSS Print Media Styles with Cypress Gleb Bahmutov

🛠 Code & Tools

DOCX 9.0: Generate Word .docx Files from JavaScript - The code to lay out documents is verbose but there's a lot of functionality baked in and there aren't many other options for this task. Here's a CodePen-based example to give you an idea. GitHub repo.

Dolan Miu

TinyJS: A Lightweight Way to Work with DOM Elements - Lighter than querySelector and friends, you ask? Not in file size, but certainly in code weight. TinyJS offers a jQuery-esque syntax for element selection, adding properties to elements, and more.

Victor Ribeiro

Breakpoints and console.log Is the Past, Time Travel Is the Future - 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby Team sponsor

SVGuitar 2.4: Create SVG-Based Guitar Chord Charts - Dynamically generate chord charts / fingerings in the browser. You can experiment with it in this live demo.

Raphael Voellmy

Free Public APIs: A Collection of Free Public APIs for Developers - Categorized and searchable, these are tested daily by bots so if any API is taken down or moved behind a paywall, it's removed from the site.

Nick Schneeberger

TutorialKit 1.0: Create Interactive Coding Tutorials - StackBlitz's framework for creating interactive coding tutorials, perhaps as a way to boost the adoption of your own libraries or design system. v1.0 marks TutorialKit as stable.

StackBlitz

Jeasx: The Ease of JSX with the Power of SSR - A new server side rendering framework built on top of JSX and Fastify.

Maik Jablonski

ip-address 10.0: Library for Parsing and Manipulating IP Addresses - Works with both IPv4 and IPv6 addresses.

Beau Gunderson

• React-Grid-Layout 1.5 - Draggable/resizable grid layouts for React apps.

• 🗓️ Schedule-X 2.4 - Material Design event calendar and date picker.

• eslint-plugin-unicorn 56.0 - 100+ useful ESLint rules in one place.

• Redwood 8.4 - Popular React app framework.

#​707 - October 3, 2024

Read on the Web

JavaScript Weekly

VoidZero: A Next-Generation Toolchain for JavaScript - Not content to have merely created Vue.js and Vite, JavaScript powerhouse Evan You has unveiled his latest adventure: a $4.6m funded company building an open-source unified development toolchain for the JavaScript ecosystem. With his track record, this is as good an attempt as it gets.

Evan You

ESLint Now Officially Supports Linting JSON and Markdown - ESLint has been taking steps to become a more general purpose linter and that effort is beginning to bear fruit with this milestone.

Nicholas C. Zakas

Run GitHub Actions Up to 2x Faster at Half the Cost - Blacksmith runs your GitHub Actions substantially faster by running them on modern gaming CPUs. Integrating Blacksmith is a one-line code change. 100+ companies like Ashby, Superblocks, and Slope use Blacksmith to help developers merge code faster.

Blacksmith sponsor

Tauri 2.0: Small, Fast Desktop Apps using Web Technologies - Tauri is a Rust-based alternative to Electron for bringing together HTML, JavaScript and CSS code to create cross-platform desktop apps. Rather than using V8, it uses the natively available webview to run your code.

Tillmann Weidinger

IN BRIEF:

• 😍 Build tool Vite has a snazzy new homepage just in time for ViteConf.

• The Svelte team shares everything that's new with Svelte lately.

• 🕹️ OneJS is an attempt to bring JavaScript scripting into the Unity game engine. ▶️ Here's a screencast showing it off.

• 🎂 The Knip code decluttering tool celebrates two years with a new release containing a revamped auto-fix mechanism for automatically removing unused exports and files from your code.

• Congratulations to Ulises Gascón for becoming the newest TC39 Delegate.

RELEASES:

• Eleventy / 11ty 3.0 - Node.js-powered static site generator.

• Tabulator 6.3 - Popular interactive table / data grid control.

• Jiti 2.0 - Runtime TypeScript and ESM support for Node.js.

• pnpm 9.12 - The alternative, efficient package manager.

ViteConf is Live! - Join us today and tomorrow for ViteConf 2024!

StackBlitz sponsor

📒 Articles & Tutorials

▶ Bundling: The Past, Present and Future - A history lesson on bundlers, why they're used, the problems they solve, the current ecosystem, and a look at the potential future for these tools.

Devon Govett

Unleash JavaScript's Potential with Functional Programming - More focused on the how, rather than the why, but a good primer nonetheless, especially if you've never tried to learn about FP before.

Jan Hesters

An Online Event You Won't Want to Miss - 🔥 JetBrains JavaScript Day returns Oct 24, and it promises to be the best one yet! Explore an impressive agenda and register for free today.

JetBrains sponsor

SVG Coding Examples: Useful Recipes for Writing Vectors by Hand - Explores the basics of hand-coding SVGs, how to use JavaScript along the way, and practical examples to demystify the inner workings of common SVG elements.

Myriam Frisano

📄 Web Components are Not Framework Components and That's Okay Lea Verou

📄 How to Submit an Electron App to the Mac App Store Liu Liu

📄 Why Gumroad Didn't Choose htmx Sahil Lavingia

📄 How Bun Supports V8 APIs Without using V8 Ben Grant (Bun)

📺 Laravel vs Rails for JavaScript Developers Sam Lewis

🛠 Code & Tools

🤖 assistant-ui: React Components for AI Chat - It doesn't just give you the interface components, but has integrations for Vercel AI, Langchain, and talking to other common LLM APIs (e.g. OpenAI), enabling you to build your own in-house AI chat system quickly. Examples.

Simon Farshid

qrframe: A Library to Generate 'Pretty' QR Codes - It's slightly odd as the QR codes generated aren't guaranteed to scan reliably, but if you can generate ones that do, they look striking, and could be useful for branding/fun use cases. Play around with a live demo here.

Kyle Zheng

Announcing MongoDB 8.0 - Over 30% Faster Than Before - Learn how MongoDB 8.0 was built to exceed the most stringent security, availability, and performance requirements.

MongoDB 8.0 sponsor

Superdiff 2.0: Compares Two Arrays or Objects and Return a Diff - Got two similar objects and want to see the underlying differences?

antoine

µExpress / Ultimate Express: Like Express, But Faster - Imagine a reimplementation of Express with full API compatibility, but based on µWebSockets and with an optimized router for faster performance.

dimden

VueFormify 1.1: Simple Type-Safe Form Building for Vue - Bills itself as "your ticket to form-building autonomy." There's a getting started guide and GitHub repo.

Máté Nagy

pretty-print: Customizable String Representations of JS Values - Produce a string representation of any value. Similar to util.inspect but with many extra options for tree-ifying, coloring, sorting, choosing what to display, etc.

Effectful Technologies Inc

• 🗓️ Schedule-X 2.3 - Material Design event calendar and date picker.

• Summernote 0.9 - Simple WYSIWYG editor atop Bootstrap and jQuery.

• ng-dnd 4.0 - Drag and drop solution for Angular. (Demos.)

• Prisma 5.20 - Popular ORM for Node.js and TypeScript.

• React95 v9.0 - Make React apps that look like Windows 95.

• Vaul 1.0 - Elegant drawer component for React.

• Eruda 3.4 - A console/devtools for mobile browsers.

• BlockNote 0.16 - 'Notion-style' block-based editor.