~javascriptweekly | Bookmarks (263)

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.

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.)

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).

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.

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.

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.

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.

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.

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.”

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.

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.

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' 😅).

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.

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.

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.

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

zx v8.0: Write Better Shell Scripts with Node — A popular way to make shell scripting a more pleasant experience in Node with useful wrappers around child_process, argument escaping, and sensible defaults. v8.0 makes zx 20x smaller, faster, makes it easier to kill processes, pass input to commands & more.

React Server Components in a Nutshell — A quick overview of RSCs not all about Next.js, comparing the approach taken by several frameworks before sharing thoughts on the tech and why the smaller Waku framework is worth a look.

Using AI-Powered Autofix to Fix Your Broken Code — Join Sentry live on April 25th, to preview Autofix and learn how we are using ML to prioritize issues and alerts.

❤️ Loving console.log Is Easy, but Hate 😡 Losing Context to View Messy Output — Developer productivity tools Wallaby.js, Quokka.js and Console Ninja show console.log values and errors right next to your code.

Faces.js: A Library for Generating Vector-Based Cartoon Faces — The end results are somewhat reminiscent of how the Nintendo Wii generates random Miis. Faces are drawn as SVGs with each also represented by a JavaScript object so you can draw them again later.

Color.js 0.5: 'Let’s Get Serious About Color' — A fantastic library for working with colors in the browser, following the latest specs. It’s even been used by browsers to test their CSS Color 4/5 implementations.

Preview.js: Preview UI Components Instantly in Your IDE — Namely, VS Code or JetBrain IDEs, out of the box. Compatible with components built for React, Vue, Svelte and Solid.

Frontend Development Beyond React: Svelte — A surprisingly thorough article going deep into one developer’s research into using Svelte to build modern front-end apps. If you’ve never experimented with Svelte, this is a good primer to the key concepts, tradeoffs, and techniques involved.