fidzu : JavaScript

#​665 - November 30, 2023

Read on the Web

JavaScript Weekly

Eliminating JS Framework Lock-in with Web Components? - Can you build an app where each component is using a different framework? Amazingly, yes. Web components aren't new but are 'having a moment' and Jake demos an interesting, if contrived, use case. He explains: "Say you're writing a Vue app and you really want to use a library that's only available as a React component. You can wrap that library in a web component and use it in your Vue app..."

Jake Lazaroff

Announcing Deno Cron - Deno adds a cron-style feature to run code on a pre-defined schedule using Deno.cron. This works locally (behind --unstable) in a long-running process, but on Deno Deploy it analyzes the definition and runs the code on time, as you'd expect, with no extra work needed.

Zinkovsky and Jiang (Deno)

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch - At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it's our people who make us remarkable. Our success is your success. Let's celebrate together. Learn more.

Bosch sponsor

The Biome Formatter Wins the 'Prettier Challenge' - Two weeks ago, the creator of Prettier put up a $10k bounty for a Rust-powered code formatter that could pass over 95% of Prettier's tests. Biome, the toolchain forked from Rome, has already managed to claim the prize, topped up by further contributors.

Biome

🤔 There's a post from the Prettier POV where @vjeux explains why he offered the bounty: he felt a 'a lack of competition' was holding Prettier back.

IN BRIEF:

• 📺 Evan You, creator of Vue.js, presented an update on the state of Vue and Vite for VueConf Toronto attendees. (48 minutes.)

• 🟩 The two LTS Node.js branches have received releases backporting features from newer versions: Node v20.10.0 (LTS) gains WebSocket and an experimental flag to auto-detect ESM code. Node v18.19.0 (LTS) gets npm 10 and tweaks for customization hooks and loaders.

• 🎙️ Off The Main Thread is a new podcast featuring Jake Archibald and Surma (both formerly of Google / HTTP 203).

• 🎂 Not to do with JS - though some of you may use it - but Notepad++ is 20 years old. It's a popular open source code editor and Notepad replacement for Windows.

• 🙋 The State of JavaScript 2023 survey is still open to take.

RELEASES:

• Passport 0.7 - Popular authentication middleware for Express-based apps.

• eta (η) 3.2 - Embedded JS template engine for Node, Deno, and browsers.

• Fable 4.6 - F# to JavaScript transpiler.

📄 Articles & Tutorials

▶ 10 JavaScript Changes You (May Have) Missed in 2023 - We've covered most of these, but this is still a productive refresher in just six minutes, covering things like toSorted(), iOS Web Push, Next.js updates, Angular 17, and the rapid rise of Bun.

Fireship on YouTube

Fireship is a great channel for these sort of quick-fire roundups, and if you want more 100+ JavaScript Concepts You Need to Know is a fun one.

Tracking Frontend JS Exceptions with Playwright Fixtures - Playwright is commonly used to test frontend apps and ensure they're rendering and behaving correctly, but what if you want to be sure the underlying JavaScript is working as expected too? Stefan has some tips.

Stefan Judis

Lesser Spotted React Mistakes and How to Avoid Them - Read about common pitfalls that occur when writing React code. Cut, paste, & try the included examples in your own code.

Sonar sponsor

A Deep Dive into CheerpJ 3.0: A WASM JVM for the Browser - A look at an interesting WebAssembly-based Java Virtual Machine that runs client side in the browser, opening up bidirectional Java-JavaScript interop, if you need it. Note that it's commercial, but can be used free for personal projects and evaluation.

Pignotti, Bates, and De Rossi

A Simple WebSocket Benchmark: Node vs Bun - Using as 'textbook' an example of WebSocket communication as possible, the author pits Node and Bun against each other.

Daniel Lemire

Svelte Through the Eyes of a React Developer
Ido Shamun

🛠 Code & Tools

FullCalendar: A Full Sized JavaScript Calendar Control - An interesting option if you want a Google Calendar style experience for your own apps. Has connectors for React, Vue and Angular. The base version is MIT licensed, but there's a commercial version too with extra features.

Adam Shaw

Knip 3.3: Find Unused Files, Dependencies and Exports - Finds unused files, dependencies and exports in your projects and lets you cut/knip them away.

Lars Kappert

😍 Knip has continued to evolve a lot this year, and now also has a snazzy new homepage. You can also learn more about what's new in 3.x.

Inline REPL Anywhere in Your Code - Execute context aware code snippets directly in your editor, anywhere in your project, even if your application/tests are not working.

Wallaby Team sponsor

Syntax.js: Code Syntax Highlighting Library - There are many long standing options in this area, such as Prism and highlight.js, but it's interesting to see a fresh and lightweight take.

William Troup

ai2html: Turn Adobe Illustrator Files into HTML - We noticed this tool being used by the Financial Times to share graphs they've designed, and the result is really good. This project isn't new, but we haven't shared it before, it's well maintained, and there are lots of examples.

The New York Times Company

aws-lite: A New Node.js-Powered AWS API Client - AWS does a good job with its APIs and tooling, but sometimes their approach is a little heavyweight. aws-lite provides a simpler, faster option. "You can think of it as a community-driven alternative to AWS's JavaScript SDK."

Begin

Hire Vetted Developers in US Time Zones, Fast

Revelo sponsor

• Neutralinojs 4.15.0 - Cross-platform desktop app framework - lighter than Electron as it uses the locally available browser engine.

• jest-image-snapshot 6.3 - Jest matcher for image comparisons.

• Mongoose 8.0 - MongoDB object modelling approach.

• edit-in-place 1.9 - Edit in place library for Angular apps.

• Jotai 2.6 - Simple, flexible state management for React.

• sql.js 1.9 - SQLite 3.44 compiled to JavaScript.

• React Share 5.0 - Social media sharing buttons.

• np 9.0 - A better npm publish.

• pnpm 8.11 - Fast, disk space efficient package manager.

#​664 - November 23, 2023

Read on the Web

JavaScript Weekly

Time to Take the State of JavaScript 2023 - The long standing State of JavaScript survey is back for another run at figuring out what the community is up to and what tools we're using. The results are always illuminating and we'll share the tastiest parts once available.

Devographics

▶ The Unbearable Weight of Massive JavaScript - An extensive talk looking at what can be achieved by simplifying web architecture, chiefly by using new or upcoming Web Platform APIs and getting back to building fast, maintainable, user-friendly frontends. Slidedeck.

Ryan Townsend

Stop Building Auth, Start Building Apps with EdgeDB + Next.js - It's hard enough to come up with an idea worth trying. See how EdgeDB and our new authentication extension makes it easy to go from idea to working application in record time using Next.js.

EdgeDB sponsor

TypeScript 5.3 Released - The latest edition of the type-enhanced JavaScript superset is here. The headline feature is full support for the import attributes proposal (as it currently stands, at stage 3 in TC39), but there are many enhancements around type narrowing, interactive inlay hints for types in editors, and more. Not the biggest update, but progress nonetheless.

Daniel Rosenwasser (Microsoft)

Vite 5.0 Released - The Vite suite of frontend tooling may have started life in the Vue.js world, but is now used by projects aplenty including SvelteKit, Remix, and Astro. v5 now uses Rollup 4, removes many deprecated features, and requires Node 18+. There's a migration guide to help with your v4 to v5 progression.

Evan You and Contributors

IN BRIEF:

• The Node.js 20.x runtime is now available on AWS Lambda.

• 🎁 A bumper list of dev-related tools & services running Black Friday deals.

• GitHub looks at what's new in the latest Git release: Git 2.43.

• The AWS Amplify team teases 'Gen 2' of their fullstack app platform.

RELEASES:

• ⭐️ Transformers.js v2.9 - State of the art ML in JavaScript. v2.9 adds support for depth estimation, zero-shot object detection, and optical document understanding.

• Redux Toolkit 2.0 rc.0, Redux 5.0 rc.0, React-Redux 9.0 rc.0 - Initial RCs with better packaging and smaller bundles. Final releases due soon.

• Bun 1.0.14 - Introduces a high-perf globbing API for matching files and strings.

• Rspack 0.4 including Rsbuild 0.1 - A fast Rust-based web bundler.

• Node v21.2.0 (Current) and Node v20.10.0 (LTS)

• Starlight 0.13.0 - Beautiful docs sites atop Astro.

📄 Articles & Tutorials

▶ 4 Web Devs, 1 App Idea - Salma Alam-Naylor, Scott Tolinski, and Eve Porcello join Jason Lengstorf to kick off a fun new series where several developers all implement the same type of app, show off how they went about it, and react to each other's approaches. Svelte, Astro, and Next.js each make an appearance.

Learn with Jason

Promises Training - Practice working with promises through a curated collection of interactive challenges. Aimed at developers with at least an intermediate understanding of promises who want to dig deeper.

Henrique Inonhe

JavaScript Error and Performance Monitoring - Track, trace, debug and resolve JavaScript errors across platforms. Are your releases that easy? Join us live.

Sentry sponsor

An Attempted Taxonomy of Web Components - A collection of open-source web components (and lessons learned from using them) that may help you on your journey in this complex, developing space.

Zach Leatherman

Using OpenAI APIs to Analyze Automated Test Failures - A look at how to develop a Nightwatch.js plugin which sends the test failure and associated errors to a service that integrates with OpenAI's platform to analyze said errors and provide actionable feedback.

Andrei Rusu

🛠 Code & Tools

Bruno: An Open-Source HTTP API Exploration App - There are a lot of 'API client' tools like this, commercial and non-commercial, with varying levels of features, but this is an open source one entirely built in JavaScript with a fully-offline ethos some might appreciate. GitHub repo.

Anoop M D, Anusree P S and Contributors

debounce 2.0: Delay Function Calls Until a Set Time Elapses - If you don't want something to run too often, debouncing is the strategy for you and this library makes it simple. v2 adds types and brings the code up to modern standards.

Sindre Sorhus et al.

Level Up Your UX With Bryntum - Empower your users with advanced widgets like data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

H3: A Minimal HTTP Framework for Multiple JS Platforms - Aims to be as universal as possible and works across numerous platforms, including Node, while offering the basic HTTP framework features and a compatibility layer with Express middleware. v1.9 just landed.

UnJS

request-animation-frames: Use requestAnimationFrame Anywhere - The latest library from the one-man module powerhouse, Sindre Sorhus. The idea this time is to allow you to use requestAnimationFrame in any JavaScript environment. The implementation is delightfully simple.

Sindre Sorhus

Spectral.js: A More 'Paint-Like' Color Mixing Library - If you have two colors to transition between, just tweening the RGB values can result in some rather ugly intermediate colors. Spectral.js uses Kubelka-Munk theory which more closely matches how paints work for a visually satisfying result.

Ronald van Wijnen

'A Node + TypeScript + ts-node + ESM Experience That Works' - It's just three files: package.json, tsconfig.json and a utilities file.

Khalid Zoabi

A Non-Cloud Alternative to Google Forms That Has It All

SURVEYJS sponsor

🖼 medium-zoom 1.1: A Library for Medium-Style Image Zooming - Responsive, can load a higher definition version of an image on zoom, and mouse, keyboard and gesture friendly. Now we just need a library that can cover up the bottom half of a page with junk like Medium also does now. Demo.

François Chalifour

• gridstack.js 10.0 - Build interactive dashboard panels quickly.

• MQTT.js 5.3 - MQTT client for Node and browser.

• Piscina 4.2 - Node.js worker thread pool implementation.

• (Official) MongoDB Node.js Driver 6.3

• SQL Formatter 14.0 - Pretty print SQL queries.

P.S. Medium is 🗑️. If you don't want to host your own blog, try Hashnode, dev.to, Bear, or even throw Markdown at GitHub Gists - it'll provide a better reader experience and we'll be more likely to link to it.

#​663 - November 16, 2023

Read on the Web

JavaScript Weekly

Prettier 3.1 Released - The popular opinionated code formatter has a new release including support for the new control flow syntax in Angular 17 plus a new, experimental formatting option for ternary expressions (as in x ? y : z) explained in more depth in "A curious case of the ternaries."

Alex Rattray

🤔 With an aim to making code formatting even faster, Prettier's co-creator has put up a $10k bounty for any Rust project that passes >95% of Prettier's tests.

Exploring Explicit Resource Management in JS - A practical look at the idea of explicit resource management, an idea both currently at stage 3 in TC39 (and partly supported in TypeScript 5.2) that makes it easier to 'clean up' resources once they are no longer used or needed.

Ilia Pozdnyakov

Build Interactive, Live Video Applications with Amazon IVS - Amazon Interactive Video Service (Amazon IVS) allows developers to create dynamic video experiences, such as collaborative real-time livestreams. Check out the new ivs.rocks to find code samples, demos, and other resources. Click here to get started.

Amazon Web Services (AWS) sponsor

On HTML Web Components - "With web components, you might even say React's component model is being ported to the browser. But it's being done in a way that works to enhance how the web already works, not replace it".

Jim Nielsen

A Review of Lightweight JavaScript Frameworks - This overview is targeted at Django (i.e. Python) developers but if you, too, want to avoid larger frameworks like React or Angular, you might appreciate this look at numerous alternatives from Stimulus and htmx to more oblique options like Laravel Livewire.

Michael Yin

• 🥳 AWS is celebrating a huge release with v6 of the AWS Amplify JavaScript library which includes full support for Next.js App Router and Server Actions.

• 🌎 Node.js TSC member Yagiz Nizipli is suggesting using Biome for code formatting in Node, since ESLint has deprecated its core formatting rules.

• 👾 The winners of React Jam, a recent React-based game development contest, have been revealed. An entry I enjoyed was useChess, a set of chess-based puzzles.

• ▶️ If you've wondered what the big deal is about Astro, James Q Quick went on the Software Engineering Daily podcast and explained Astro pretty well.

• 🎵 Someone's recorded ▶️ a rap music video about TypeScript..

RELEASES:

• Node.js v21.2.0 (Current)

• visx 3.5 - D3-based visualization primitives for React.

• fx 31.0 - Powerful terminal JSON viewer.

• Astro 3.5, Ember 5.4, and Prisma 5.6.

📄 Articles & Tutorials

67 Browser-Based Debugging Tricks - A list of useful, 'not-obvious' hacks to get the most out of the browser's DevTools. Assumes a reasonable existing understanding of said tools.

Alan Norbauer

Exploring V8's Strings: Implementation and Optimizations - Note: This is very technical and most JavaScript developers do not need to go this deep. That aside, this is a fantastic look under the covers of how the V8 engine handles strings, including the optimizations used that allow it to go toe to toe with languages like C++.

Ilia Pozdnyakov

JavaScript Scratchpad for VS Code - Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby Team sponsor

▶ An Overview of Angular 17's New Built-In Control Flow - Angular 17 was released last week and a significant enhancement was support for a new syntax in templates that looks and feels more JavaScript-y.

Dmytro Mezhenskyi

Moving Back to React (from Preact) - Preact felt like a logical, lightweight choice to this team at one time, but they've switched to React for better compatibility with Next.js, among other things. Their page weight is up slightly, but they feel the tradeoff is worth it.

Ante Barić (Daily․Dev)

My Journey to 3x Faster Builds: Trimming Barrel File Imports - "I maintain a small frontend application (4K LOC) which uses Vite as the compiler. The production build, using npm run build, was taking 26 secs on Github Actions. It seemed awfully slow for such a small application. I decided to investigate why."

Ramana Venkata

Can Bun Eat Node's 'Lunch'? - An experiment in migrating a codebase (a restaurant voting app called Lunch) from Node over to Bun and seeing how it fares.

Jeffrey Carl Faden

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch

Bosch sponsor

How to Use NPM Packages Outside of Node - Learn how to run NPM packages in 'other places' like serverless platforms, the browser, and beyond.

George MacKerron (Neon)

What I Learned Building an Audio Plugins System for the Web
Ben Wiley

Rust for JavaScript Developers: An Overview of Testing
Joshua Mo

🛠 Code & Tools

gsplat.js: A Gaussian Splatting Library - Gaussian splatting is an increasingly popular graphics rendering techniques where rather than render millions of tiny, textured triangles in a scene, you get a more wild paintball-like splatter fest, where each paintball creates a smooth, colorful blob instead of a rigid shape. This demo is both simple and striking.

Dylan Ebert

Reveal.js 5.0: The HTML Presentation Framework - A way to build presentations using standard Web technologies. The project's homepage is, itself, such a presentation. v5.0 adds support for 'scroll mode' which essentially turns presentations into more typically scrolling Web experiences - demo.

Hakim El Hattab

🖍️ Marker.io: Collect Bug Reports With Annotations & Session Replay - Collect feedback on live websites. Get dev-friendly bug reports with screenshots, URLs, console logs & session replay.

Marker.io sponsor

Datasheet Grid: An Airtable-like React Component - If you've got an array of objects and you want a way for users to manipulate them, this is for you. It's not going to replace a spreadsheet or an extensive data grid framework, but it's a mature solution featuring smooth animations, virtualized rows/columns, keyboard navigation, and more.

Nicolas Keller

Perfect Freehand: A Library for Creating Better 'Freehand' Lines - You can try it out here. Makes your e-signature not look like chicken scratch! Might be useful for drawing apps.

Steve Ruiz

Wild Wild Path v5: Object Property Paths with Wildcards and Regexps - A 'wild' way to access properties in objects (which can be deeply nested) by way of string based queries that support wildcards and regexes. The examples help communicate the idea.

ehmicky

@storybook-test: More Streamlined and Powerful Storybook Testing - @storybook/test consolidates the API of @storybook/jest and @storybook/testing-library into a new, single package, powered by Vitest.

Kasper Peulen

• Marked 10.0 - Markdown parser and compiler. There's also marked-terminal 6.1 which lets you render Marked-processed Markdown on the terminal.

• HumanizeDuration.js 3.31.0 - Turn milliseconds into textual durations in numerous natural languages.

• actions/github-script 7.0 - Script the GitHub API in GitHub Actions.

• Plasmo v0.84.0 - "Like Next.js for browser extensions."

• PDFKit 0.14.0 - PDF generation for Node and browser.

• React Joyride 2.7 - Create guided tours in your apps.

#​662 - November 9, 2023

Read on the Web

JavaScript Weekly

Reintroducing Angular with Angular v17 - Angular first appeared in the shape of AngularJS in 2010 and helped launch a wave of large-scale JavaScript frameworks. Angular remains popular in many use cases but is often overlooked in favor of newer options. v17 takes a leap forward in both features and vision, with the team rebranding Angular and repositioning it as a modern solution:

• Angular.dev is an all-new docs site and home for the project (the new guides look fantastic). It's in beta till Angular v18 is released - you can learn more about it here.
• Hydration is now production ready.
• Vite and esbuild are the default for new projects.
• Improved support for creating server side apps.
• New, improved built-in control flow to make code less verbose.
• Google pulled out all the stops for ▶️ the 'Special Angular Event' - an hour of talks, interviews and discussions to bring you up to speed.

Minko Gechev and the Angular Team

Bare Metal JavaScript: The JavaScript Virtual Machine with Miško Hevery - Learn how high-level JavaScript turns into low-level CPU instructions. Build up your mental model of JavaScript's performance characteristics through understanding the JavaScript Virtual machine under the hood!

Frontend Masters sponsor

Mastering DOM Manipulation with Plain JavaScript - A mega collection of hundreds of examples of doing things like selecting text, manipulating elements, resizing things, scrolling, and such - all by using the DOM and browser APIs with no external libraries. You Might Not Need jQuery is another classic resource in a similar vein.

Phuoc Nguyen

▶ Why Signals Are Better Than React Hooks - When Preact's Marvin Hagemeister pops up in the comments saying "this is by far the best video about signals and why they are so exciting. I love the way you demonstrate it by coding along and moving an app over to signals," it should bump a video up to the top of the Watch Later playlist.

Web Dev Simplified

• 👀 Nicholas C. Zakas shares a look at what's coming in ESLint v9.0. The first alpha is due in a month or two.

• ⚛️ React has landed a commit adding sourcemaps for prod build artifacts.

• 🆚 VS Code will soon support moving editors into floating windows.

RELEASES:

• TypeScript 5.3 RC - Final due soon, but you get import attributes, resolution-mode in import types, interactive inlay hints for types, and improvements to narrowing in a few extra cases.

• It's a strong week for testing tool releases, so they're all in one place: TestCafe v3.4.0, Cypress 13.5, Nightwatch.js 3.3, and React Testing Library 14.1.

• Deno 1.38 - Many smaller improvements, including far faster JSX transformation.

• Bun v1.0.10 - Faster node:http and bug fixes.

• tsx 4.0 - Node.js enhanced to run TypeScript / ESM files.

📄 Articles & Tutorials

How to Do a JS to TypeScript Conversion - Chris, who led the conversion of a 150k LOC app to TypeScript, addresses a common question: do-it-as-you-go or follow the dependency graph?

Chris Krycho

Exploring the Headless Component Pattern for Composing React UIs - An engineer at Atlassian takes us on a thorough and practical journey into the concept of headless components and the pattern of having reusable logic and behavior separate from the presentation of UI elements.

Juntao Qiu

📞 Calling JavaScript Devs! Sentry Launch Week is Coming. Join Online

Sentry sponsor

▶ 8 Talks from JetBrains' JavaScript Day 2023 - JavaScript Day is an annual virtual event featuring a handful of talks on diverse JS related topics. This year, Romulo Cintra shows us how TC39 works on language proposals, Stefan Baumgartner spoke about the lies we tell ourselves using TypeScript, and more.

JetBrains

Writing Components That Work in Any Framework - Looks at why web components can be difficult to adopt, and shows how using a higher-level library can let us "easily write components that work everywhere".

Andrico Karoulla

Build a Lightweight Code Generator with TypeScript and JSON Imports
John Ruble

Deploying a Vue Application with Netlify and GitHub
Ezekiel Lawson (Telerik)

Don't Disable Buttons, Do This..
Chris Ferdinandi

🛠 Code & Tools

Moveable: A Library for Dragging, Resizing, Scaling and More - If you want to offer up physical manipulation of elements (warping, pinching, rotating, etc.) this library could help. Its homepage is a fun self-demo and there are packages for integrations with common frameworks.

Younkue Choi

🔥 Need to Eliminate Tech Debt Without Falling into Dependency Hell? - Upgrade seamlessly and let us tackle tech debt with our fixed-cost, monthly maintenance service (starting at $2k/month).

UpgradeJS | Tech Debt Services sponsor

🖼 image-dimensions: Get the Dimensions of Images - Sindre's latest creation is a simple but comprehensive one. A way to get the size (as width and height in pixels) for JPEG, PNG, APNG, and GIFs in any modern JS environment.

Sindre Sorhus

main-thread-scheduling 9.0: Consistently Responsive Apps While Staying on the Main Thread - An easier alternative to Web Workers that uses the approach of stopping heavy tasks on the main thread from executing when the user interacts with the UI. This new version adds afterFrame (like requestAnimationFrame but called after frame drawing has rendered), queueTask, and extensions to promises.

Antonio Stoilkov

React Components for the Google Maps JavaScript API - react-google-maps is the 'first Google-sponsored library' for integrating Google Maps JavaScript API components into a React app.

Mike Pegg (Google Cloud)

capture-website 4.0: Capture Screenshots of Websites - A Puppeteer wrapper to capture screenshots of site from Node or the command-line.

Sindre Sorhus

Never Stop Learning and Work #LikeABosch - At Bosch, you always keep growing. Upskill yourself into countless new roles, positions and opportunities. Learn more.

Bosch sponsor

⌘K-sv: A Fast, Composable, Unstyled Command Menu for Svelte - A port of ⌘K, a React-based command menu component.

huntabyte

• Vuetify v3.4 - Vue component framework.

• MiniSearch 6.2 - In-memory fulltext search engine. (Demo.)

• TanStack Form 0.9 - Headless type-safe form state management.

• Dependency Cruiser v15.2 - Tool to validate and visualize dependencies.

• Valtio v1.12.0 - Proxy state made simple. Plus it has a fantastic homepage.

• Helmet 7.1 - Secure Express apps with HTTP headers.

• Rollup.js 4.3 - ES module bundler.

🚀 Everyone's gone to the moon..

Spacekit.js: A Library for Creating 3D Space Visualizations - Not just any old 3D space, but actual space - think planets, stars, and meteors. A library like this comes, of course, with many examples to try. GitHub repo.

Ian Webster