#704 — September 12, 2024
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.