Visualizing algorithms

#​684 — April 18, 2024

Read on the Web

JavaScript Weekly

Quill 2.0: A Powerful Rich Text Editor for the Web— A major release and significant modernization for the open source WYSIWYG editor. In Announcing Quill 2.0, we learn about Quill’s transition to TypeScript and improved use of modern browser features, but there’s more going on too, such as its ESM packaging. Want to play with some code? There’s a playground.

Slab Inc.

Airbnb's Extensive JavaScript Style Guide— It’s been years since we mentioned this popular, opinionated style guide, but it keeps getting little tweaks and repairs and remains a handy resource nonetheless.

Airbnb

WorkOS: Enterprise-Grade Auth for Modern SaaS Apps— WorkOS supports both the foundational auth and complex enterprise features like SSO. It provides flexible and easy-to-use APIs, helping companies like Vercel, Loom, and Webflow become Enterprise Ready. Best of all, WorkOS User Management supports up to 1 million MAUs for free.

WorkOS sponsor

Upgrading jQuery: Working Towards a Healthy Web— jQuery remains all over the Web, and the jQuery team and OpenJS Foundation have joined forces to make sure sites get up to date. Their 'Healthy Web Checkup' tool can tell you if the version of jQuery on a site is outdated (.. most likely 'yes' 😅).

Timmy Willison (jQuery)

Biome v1.7: Faster Formatting and Linting, Now Even Easier to Migrate To— Biome is an increasingly compelling, all-in-one JavaScript, TypeScript and JSX Prettier-compatible formatter and linter. v1.7 makes it easier to migrate to from ESLint and Prettier, can emit machine-readable JSON reports, and has some rule updates.

Biome Core Team

IN BRIEF:

• 🤡 ▶️ Interview with Senior JS Developer 2024 is a satirical(?) take on the state of modern development and increasingly complex ecosystems. Watch to either laugh or cry. (6 minutes.)

• 📺 Bartek Szwej has put together a list of 300 JavaScript-related videos from the past year, ordered by their YouTube view count.

• f(x) (a.k.a. fx) is a great CLI tool for viewing JSON data. It now includes a JS engine so you can process JSON with JavaScript one-liners at the terminal, too.

• Joyee Cheung shares a trip report from Node.js's latest collaboration summit, touching on the topics the Node team is thinking about lately.

• The folks at Deno go into depth about how they built JSR, the newest JavaScript registry, and how it can operate at scale.

• "Much faster JSX element creation" is on the way for React developers.

📒 Articles & Tutorials

Building a CLI from Scratch with TypeScript and oclif— oclif is a mature CLI tool development framework maintained by Salesforce. This tutorial goes from zero to something that works.

Josh Cunningham

Qwik vs. Next.js: Which is Right for Your Next Web Project?— A point by point faceoff between Qwik vs Next.js and why the author thinks Qwik takes the gold medal.

Samuel Mendenhall (Cisco)

RAG to Riches Developer Quest— Interact with AI-enhanced bots and learn to build your own RAG chatbot with Atlas Vector Search and Node.js.

MongoDB sponsor

CSS in React Server Components— An exploration of compatibility issues between React Server Components and CSS-in-JS libraries like styled-components.

Josh W Comeau

Profiling Node.js Performance with Chrome's Performance Panel— Learn how to profile Node performance with Chrome's Performance panel. (The JS Profiler is going away in Chrome 124, so you'll need to become familiar with the newer approach.)

Chrome for Developers

📄 Keeping Up with the Node-ish Ecosystem– How Mux updated its legacy Node SDK to work with new JS runtimes. Dylan Jhaveri (Mux)

📄 Building an Interactive 3D Event Badge with React Three FiberPaul Henschel (Vercel)

📄 A Deep Dive into Rspack and Webpack Tree Shakinghardfist

📄 Things I Like Better in Vue Than in ReactJaydev Mahadevan

📄 Converting Plain Text To Encoded HTML With Vanilla JSAlexis Kypridemos

🛠 Code & Tools

TresJS: Build 3D Experiences with Vue.js— Create 3D scenes with Vue components and Three.js. Think React-three-fiber but more.. Vue flavored. There’s an online playground if you want to give it a quick spin (literally).

Alvaro Sabu

Next.js 14.2 Released— Approaching its eighth birthday, Next.js has passed 1 million monthly active developers and landed a release with support for using Turbopack to improve local development, memory usage, CSS and caching optimizations, improved error messages, and more.

Delba de Oliveira and Tim Neutkens

Porkbun — The Best Domain Registrar for JavaScript Developers— JavaScript developers choose Porkbun to register their domains. Get .dev, .app, or .foo for just $5 from Porkbun now.

Porkbun sponsor

Otto 0.4: A JavaScript Parser and Interpreter in Go— A JavaScript parser and interpreter written natively in Go (yes, we have a newsletter for that) which could be of interest if you want to add scripting to Go apps.

Robert Krimen

Wedges: A Collection of UI Components for React— Built and used by the folks at Lemon Squeezy, this is a well thought, aesthetically pleasing set of Radix UI and Tailwind CSS based components. You can also download a Figma file of them to use when mocking up layouts. GitHub repo.

Lemon Squeezy

HyperFormula: A Headless Spreadsheet System— A headless spreadsheet system – it provides the parsing, evaluation and representation of a spreadsheet, with you providing the UI, if you need one. Boasts ‘nearly full compatibility’ with Excel. Note the dual GPLv3 and commercial licensing.

Handsoncode

svelte-dnd-action: An Action-Based Drag and Drop Container for Svelte— Makes the bold claim that it “supports almost every imaginable drag and drop use-case, any input device and is fully accessible.”

Isaac Hagoel

⚙️ Zoompinch: A Natural Feeling 'Pinch to Zoom' for Vue 3– Expected to come in React and Web Component variants in time. Maurice Conrad

⚙️ Craft.js– A React framework for building drag and drop page editors. Prev Wong

⚙️ Kotekan– A simple React framework built on Bun and supporting React Server Components. Benedikt Müller

⚙️ Cytoscape.js 3.29– Graph theory/network visualization and analysis library.

⚙️ Tailwind Next.js Starter Blog 2.2– A blogging starter template.

⚙️ RxDB 15.18– Offline-first, reactive database for JS apps.

⚙️ JZZ 1.8.2– MIDI library for Node and browsers.

⚙️ Ember.js 5.8

⏳ A Blast from the Past

Visualizing Algorithms— This fantastic post is now ten years old, but I revisited it recently and it’s such a joy. Mike Bostock (of D3.js fame) visually guides us through some algorithms using both demos and code.

Mike Bostock