fidzu : news

#​704 - September 12, 2024

Read on the Web

JavaScript Weekly

The State of ES5 on the Web - Some of the earlier JavaScript build tools focused on allowing developers to write modern JavaScript code that could still run on the browsers of the time by compiling code down to ES5. Time has moved on, but have the tools or popular libraries? Philip investigates, and shares some recommendations.

Philip Walton

📊 The Top 5000 npm Packages by Size, Downloads, and Traffic - An interesting Google Sheets spreadsheet listing the top 5000 npm packages by package size, weekly downloads, and weekly traffic. One package is responsible for 278 terabytes of traffic per week, but the top 5000 add up to several petabytes.

Google Sheets / danhorus

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

Announcing TypeScript 5.6 - The latest TypeScript has landed with full support for iterator helpers, support for arbitrary module identifiers, --noUncheckedSideEffectImports to import modules without importing any values, and more - all covered in the always thorough release post.

Daniel Rosenwasser (Microsoft)

Is PHP the New JavaScript? - I'm no real fan of PHP, but there's been a lot of discussion on social media around increased interest in PHP by developers who'd usually steer clear of it, largely thanks to Laravel. This post tells the basic story and explains what Laravel brings to the table.

Dave Kiss (Mux)

IN BRIEF:

• Cloudflare Workers has greatly improved its npm package support. The popular serverless platform now supports a lot more Node.js APIs.

• 🎉 They don't happen often, but Frontend Masters is currently running a sale on its courses, which now includes a JS performance learning path.

• The ESLint project has announced its latest version support policy with ESLint v8.x going into end of life next month.

• 📅 Vercel's Next.js Conf 2024 is taking place this October 24, both in person in San Francisco, as well as online.

RELEASES:

• Storybook 8.3 - Frontend component and UI workshop. Now with first class Vitest support.

• ESLint 9.10 - Now with types included.

• pnpm 9.10, Jasmine 5.3, Relay 18.0

📒 Articles & Tutorials

The Web's Clipboard, and How It Stores Data of Different Types - An interesting exploration of how things currently work with copy and pasting on the web, how different data types are treated, and what the Web Custom Formats proposal is putting forward.

Alex Harri Jónsson

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. Just added support for Node.js built-in node:test framework!

Wallaby Team sponsor

Building the Same App Using Various Web Frameworks - A scientist at Amazon who usually works in Python with a minimum of JavaScript on the frontend wondered if a more modern web framework would suit him better in 2024. To try this out, he tried Next.js, SvelteKit, and the Python-flavored FastHTML.

Eugene Yan

Brand New Performance Features in Chrome DevTools - A helpful look into Chrome's updated Performance Panel and all the different metrics it shows off to help you improve the performance of your site.

Umar Hansa (DebugBear)

React and FormData - FormData is ironically both the 'newest and yet oldest' standard for accessing form data. Here are some practical ways for using it with TypeScript.

Brad Westfall

Automate Neon Schema Changes with Drizzle and GitHub Actions - Learn about schema migrations and how they can be applied to a Neon database with Drizzle and GitHub Actions.

Clerk sponsor

📄 The Secrets of JavaScript's delete Operator Zachary Lee

📄 Deploying a Next.js App to Production on Any Server Kurta Payjama

📄 How to Create a Weekly Google Analytics Report That Posts to Slack Paul Scanlon

📄 Top 10 Angular Architecture Mistakes You Really Want To Avoid Tomas Trajan

📄 How to Fix ESLint Violations with AI Assistance Docker Labs

📺 Why You Should Use Redux in 2024 Mark Erikson

🛠 Code & Tools

Biome v1.9 Released; Turns One Year Old - Biome started life as a fork of Rome, a bold attempt to create an all-in-one 'frontend toolchain'. As of v1.9, Biome can format and lint CSS, GraphQL, and JavaScript, does it very quickly, yet has 97% compatibility with Prettier.

Victorien Elvinger & Biome Core Team

Express.js 5.0 Released - The seminal Node.js webapp library seemed to take a nap for a few years, but development was reinvigorated earlier this year. v5.0 brings a variety of modern tweaks and dependency updates, though it's still tagged next at the npm registry. (Official homepage and v5.x API docs.)

Wesley Todd

✂️ Cut Your QA Cycles Down from Hours to Minutes - QA Wolf's AI-native approach gets engineering teams to 80% automated end-to-end test coverage and helps them ship 2x faster by reducing QA cycles from hours to minutes.

QA Wolf sponsor

Jimp 1.6: Manipulate Images without Native Dependencies - Most image libraries, such as Sharp, use native dependencies to do the heavy lifting, but Jimp can handle numerous formats directly for blurring, color tweaks, resizing, rotation, etc. Originally for Node, Jimp now works in the browser too - GitHub repo.

jimp Contributors

Valtio 2.0: Proxy State Made Simple - Turns objects into self-aware proxies so you can access state and subscribe to changes outside of components, add computed properties and more. Designed for React and compatible with Suspense, but can also be used with vanilla JS. - GitHub repo.

Daishi Kato

Violentmonkey: A Way to Run Userscripts in the Browser - There have been many extensions to run your own custom JavaScript automatically on certain Web pages over the years, but Violentmonkey seems to currently be one of the better and well maintained open source ones. GitHub repo.

Violentmonkey Team

• 🔎 Orama 2.1 - Dependency-free, full-text and vector search engine for all JS runtimes, with typo tolerance, filters, facets, stemming, and more.

• create-fastify 5.0 - Rapidly generate a Fastify project. It just takes npm init fastify app_name to get started.

• file-type 19.5 - Detect the file type of a file, stream, or data. Now with WebVTT support.

• TWGL.js 6.1 - Helpers for working with low-level WebGL from JS.

• 🎨 Chroma.js 3.1 - JavaScript color manipulation library.

• Pixi.js 8.4 - Fast, flexible 2D WebGL renderer.

#​703 - September 5, 2024

Read on the Web

JavaScript Weekly

An SSR Performance Showdown - Fastify's Matteo Collina set out to find the current state of server-side rendering performance across today's most popular libraries. The first attempt faced negative feedback due to implementation issues, but the showdown has been improved and re-run.

Matteo Collina

Announcing Vue 3.5 - While v3.5 is a minor release, it's one Vue users will love, with big performance and memory usage improvements in its reactivity system. With no breaking changes, upgrade and watch memory consumption drop.

Evan You

WorkOS: The Modern Identity Platform for B2B SaaS - WorkOS is a modern identity platform for B2B SaaS, offering flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes instead of months. It's trusted by hundreds of high-growth startups such as Perplexity, Vercel, Drata, and Webflow.

WorkOS sponsor

Reverse Engineering Minified JavaScript with ChatGPT - Writing new code with AI is one thing, but could it be even better at understanding existing code that you're struggling to grok? Yes, it seems.

Frank Fiegel

Inside ECMAScript: JavaScript Standards Get an Extra Stage - After nine years of annual updates, TC39 has tweaked the process to make rolling out new features faster and smoother. The so-called 'Stage 2.7' has been around for a while, but this is a neat primer to what it represents.

Mary Branscombe (The New Stack)

IN BRIEF:

• ⭐ Vercel goes deep into what's new in React 19.

• 💰 Alpine.js creator Caleb Porzio shares his tale of passing $1m on GitHub Sponsors.

• Bye NgModules, the future of Angular is standalone! Angular v19 will make standalone: true the default for components, directives, and pipes. This is already the recommended best practice, however.

• Angular's product lead, Minko Gechev, has also shared a little about what it means to mange the Angular project.

• OpenAI has switched ChatGPT from Next.js to a Remix-based app, according to Remix's Ryan Florence on X.

• 🇵🇱 Poland's WarsawJS community is holding a 10th anniversary meetup on September 11. They invite you to ▶️ watch live on YouTube.

• 🤖 Lee Robinson shows off ▶️ the latest enhancements to Vercel's v0, an AI-based tool for creating apps and components from prompts you supply.

[Workshop] Fix Your Front-End: JavaScript Edition - Learn practical tips to make debugging more tolerable. Join our JavaScript team live for a masterclass on Sept 24.

Sentry sponsor

RELEASES:

• Node.js v22.8.0 (Current) - Adds a new API for enabling on-disk code caching at runtime, as well as options to set thresholds for code coverage success.

• Astro 4.15 - The popular content site framework stabilizes Astro Actions, a solution for fully type-safe backend functions.

• Jimp 1.3 - Pure JS image processing library for Node.

• Turborepo 2.1, Puppeteer 23.3, Mermaid 11.1

📒 Articles & Tutorials

▶ Behind the Scenes: The Making of VS Code - A detailed conversation with two of the popular editor's principal engineers on what makes it tick. VS Code is surely one of the world's most widely distributed JavaScript-powered apps.

Holland, Rieken and Pasero (Microsoft)

How I Created a 3.78MB Docker Image for a JavaScript Service - The smallest JavaScript app container images tend to run into tens of megabytes, but tailoring your app to run on a lighter runtime like llrt can yield striking results.

Shenzilong

Leave Forms to SurveyJS and Get Back to What You Love Coding - Extensible JavaScript libraries for form management. Drag-and-drop UI, JSON form definitions, and seamless integration with any backend for full data control.

SurveyJS sponsor

Exploring Goja: A Go-Powered JavaScript Runtime - Goja is a pure Go(lang) JS runtime that makes it possible to embed JS into Go apps.

JT Archie

How to Use React Compiler - The compiler feature in React 19 is generating a lot of buzz - this "complete guide", as described by this author, covers much of what you'll need to get started.

Tapas Adhikary

Multithreaded Programming in Node.js using Atomics - Worker threads enable you to write multi-threaded Node apps, but sharing resources across them can quickly become tricky. Atomics can help avoid some of the pain.

Pavel Romanov

📄 A Complete Guide to Beginning with JavaScript - A rather epic article packed with background knowledge, context, and third party resources for starting a modern JavaScript learning journey. Cody Lindley

📄 Implementing Filtered Semantic Search Using pgvector and JavaScript Team Timescale

📄 How to Quickly (and Weightlessly) Convert Chrome Extensions to Safari Nina Torgunakova (Evil Martians)

📄 How Sentry Uses Mutation Testing on its JavaScript SDKs Lukas Stracke (Sentry)

🎤 Talking Deno 2 with Ryan Dahl Syntax․fm Podcast

🛠 Code & Tools

jsdiff 6.0: A JavaScript Text Diffing Implementation - Can compare strings for differences in various ways including creating patches. There's an online demo. (Don't worry - we're not going monthly ;-))

Kevin Decker

Redwood v8.0 Released - A long standing, opinionated React & GraphQL (and/or RSC) full-stack framework that covers all the bases for professional dev teams with best-in-class tool support. v8.0 introduces a background jobs system, Docker support, and easier SSR and RSC setup.

Redwood Team

Tests Are Dead. Meticulous Is Here - Automatically creates & maintains E2E UI tests. Zero flakes. Backed by YC, CTO of GitHub, CPO of Adobe, CEO of Vercel.

Meticulous sponsor

🇬🇧 GOV.UK Vue 1.0: Build Vue Apps, the British Way - The UK government is known for having an effective, well-designed site where Brits can complete various official tasks. Now you can get all of their components in Vue 3 form.

UK Government

👀 style-observer: A Mutation Observer for CSS - Attach JavaScript callbacks to changes in computed values of CSS properties.

Bramus Van Damme

Goxygen: Quickly Generate a Go Backend for a JS Project - A tool that sets up a new Go-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to make it all work.

Sasha Shpota

Typist 7.0: Tiptap-Based Rich Text Editor Component - Simple and opinionated. You can try several examples in the sidebar. Well suited for basic rich text situations like writing comments or messages and has a single-line mode.

Doist

Belt: A New Tool for Starting React Native Apps - A CLI tool for starting a new React Native app that takes various mundane decisions away from you and uses tooling and conventions established by a productive app development team.

Thoughtbot

• Tinybase 5.2 - Powerful reactive data store for local‑first apps. Now with Postgres support (which can even work in-browser!)

• jsdoc-to-markdown 9.0 - Generate Markdown docs from JSDoc-annotated code.

• LogTape 0.5 - No-dependency logging lib for Deno, Node, Bun & browsers.

• Plasmo 0.89 - Imagine Next.js but for building browser extensions.

• JsonTree.js 3.0 - Customizable tree views for JSON data.

• Poku 2.6 - Cross-platform JavaScript test runner.

• Faker 9.0 - Generate large amounts of fake data.

#​702 - August 29, 2024

Read on the Web

JavaScript Weekly

Rspack 1.0: The Rust-Powered JavaScript Bundler - Far from being 'yet another bundler' with its own approach and terminology to learn, Rspack prides itself on being webpack API and ecosystem compatible, while offering many times the performance. The team now considers it production ready and encourages you to try your webpack-based projects on it.

Rspack Contributors

💡 Rspack also has a family of ancillary tools worth checking out, such as Rsdoctor, a tool for analyzing and visualizing your build process (for both Rspack and webpack!)

Front-End System Design - Learn to create scalable, efficient user interfaces in this extensive video course by Evgennii Ray. Explore the box model, browser rendering, DOM manipulation, state management, performance and much more.

Frontend Masters sponsor

How to Create an NPM Package in 2024 - Sounds simple, but there are a lot of steps involved if you want to follow best practices, introduce useful tools, and get things just right. Matt Pocock walks through the process here, and there's a 14-minute screencast too, if you'd prefer to watch along.

Matt Pocock

IN BRIEF:

• 🤖 v0 is an AI-powered tool from Vercel for, originally, generating shadcn/ui-powered React components based upon prompts you supply. Now, however, it has basic Vue.js support too.

• Deno 1.46 has been released and promises to be the final 1.x release before the much awaited Deno 2.0. Deno's Node compatibility improves even more (it now supports Playwright and many more things) and ships with V8 12.9.

• 📊 IEEE has published its latest annual list of top programming languages. JavaScript takes third place, but TypeScript has leapt up several places to fourth.

RELEASES:

• Prisma 5.19 - The popular ORM for Node.js and TypeScript adds 'TypedSQL', a way to write raw SQL queries in a type-safe way.

• 📈 billboard.js 3.13 - Popular D3 chart library adds area-step-range charts.

• pnpm 9.9 - Fast, space efficient package manager.

• React Email 3.0, Ember 5.11, Bun v1.1.26

📒 Articles & Tutorials

JS Dates are About to Be Fixed - Handling dates and times is famously a painful area for programmers and JavaScript hasn't done a lot to make it easier. Libraries like Moment.js help a lot, but Iago looks at how the Temporal proposal and its features will begin to help a lot more over time.

Iago Lastra

Weekly Chats on the Art and Practice of Programming - Your home for weekly conversations with fascinating guests about how technology is made and where it's headed.

The Stack Overflow Podcast sponsor

JavaScript Generators Explained - Jan was frustrated by the quality of documentation and articles explaining generators in JavaScript, and set out to explain things in a way that a more advanced developer could appreciate.

Jan Hesters

Implementing a React-a-Like from Scratch - While it's unlikely you'll actually want to do this, at least thinking about it can prove instructive as to what's going on in React's engine room.

Robby Pruzan

▶ How to Implement the 2048 Game in JavaScript - Ania is back with one of her usual easy to follow walkthroughs of implementing a complete game in JavaScript. This time it's the 2048 sliding puzzle game. (Two weeks ago she did Tic-Tac-Toe as well.)

Ania Kubów

Learn Role-Based Access Control and Simplify Permissions Management - Enhance security and streamline access by managing user roles with Clerk Organizations.

Clerk sponsor

📄 The Only Widely Recognized JS Feature Ever Deprecated - Spoiler: It's with. Trevor Lasn

📄 Generating Unique Random Numbers in JavaScript Using Sets Amejimaobari

📺 21 Talks from the Chain React 2024 Conference - A React Native event. YouTube

📄 Exposing Internal Methods on Vue Custom Elements Jaime Jones

📄 The Interface Segregation Principle in React Alex Kondov

🛠 Code & Tools

TypeScript 5.6 Release Candidate - As always, Daniel presents an epic roundup of what's new. We'll focus more on it next week though, as the final release is anticipated to land next Tuesday (September 3).

Daniel Rosenwasser (Microsoft)

Vuestic UI 1.10: A Vue.js 3.0 UI Framework - Features 60 customizable and responsive components and with the v1.10 release it's gained a significant bundle size optimization, a custom compiler that improves build time performance, and other minor enhancements. GitHub repo.

Vuestic UI

✅ Bye Bye Bugs - Get 80% automated E2E test coverage for mobile and web apps in under 4 months with QA Wolf. With QA cycles complete in minutes (not days), bugs don't stand a chance. Schedule a demo.

QA Wolf sponsor

Material UI v6: The Popular React UI Design/Component System - At ten years old, the popular design system has its latest major release. There's a focus on improved theming, color scheme management, container queries, and React 19 support. There are revamped templates to be inspired by, too.

García, Bittu, Andai, et al.

npm-check-updates 17.0: Update package.json Dependencies to Latest Versions - That is, as opposed to the specified versions. It includes a handy -i interactive mode so you can look at potential upgrades and then opt in to them one by one.

Raine Revere

Code Hike 1.0: Turn Markdown into Rich Interactive Experiences - Aimed at use cases like code walkthroughs and interactive docs, Code Hike bridges the gap between Markdown and React when creating technical content that takes full advantage of the modern web.

Rodrigo Pombo

Calendar.js: A Calendar Control with Drag and Drop - A responsive calendar with no dependencies, full drag and drop support (even between calendars), and many ways to manage events with recurring events, exporting, holidays, and more.

William Troup

• 📊 Perspective 3.0 - Data visualization and analytics component. The core is written in C++ and compiled to WebAssembly where it can be used from JavaScript. Their homepage shows it off well with a live example.

• json-viewer 3.5 - Display JSON data in a readable, user-friendly way.

• ♟️ Stockfish.js 16.1 - A JavaScript chess engine.

• jest-dom 6.5 - Jest matchers to test DOM state.

• Marked 14.1 - Fast Markdown compiler / parser.

• Javet 3.1.5 - Java + V8. Embed JS into Java.

• Pixi.js 8.3.4 - Fast 2D on WebGL engine.