The Preact team dropped a new state management solution on us:

Signals are a way of expressing state that ensure apps stay fast regardless of how complex they get. Signals are based on reactive principles and provide excellent developer ergonomics, with a unique implementation optimized for Virtual DOM.

Adding Signals to your Preact app only adds 1.6kB to your bundle size. So what’s the big idea?

The main idea behind signals is that instead of passing a value directly through the component tree, we pass a signal object containing the value (similar to a ref). When a signal’s value changes, the signal itself stays the same. As a result, signals can be updated without re-rendering the components they’ve been passed through, since components see the signal and not its value. This lets us skip all of the expensive work of rendering components and jump immediately to the specific components in the tree that actually access the signal’s value.

This course from the folks at web.dev targets beginners and advanced developers alike.

You’ll learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

Tim Holman wants to take the web back to the wonderful days where knowing how to get your little mouse arrow to dance and sway was the most of your worries. That does sound nice, doesn’t it? “Emoji Rain” and the classic “Clock” are my favorites…

Lőrik Levente shared a real world comparrison between Tauri and Electron using a real application he’s building called Authme. The comparrison focused on all the major things you’d care about — Bundle size, startup time, performance, app backend, rendering your app, security, auto update, and developer experience.

Also, see this tweet from swyx.

Tauri vs Electron results are consistently mindblowing

App: 97% smaller
Startup: 50% faster
RAM: 33% less
Security: priceless

So, is Electron is being replaced? Lőrik says yes, but…

Felix Krause built an iOS browser app that lists the JavaScript commands executed by the iOS app rendering the page. Use it like this:

1. Open an app you want to analyze
2. Share the URL somewhere inside the app (e.g. send a DM to a friend, or post to your feed)
3. Tap on the link inside the app to open it
4. Read the report on the screen

His findings after using this for a bit are… concerning. Especially TikTok.

We’re longtime users of Action Mailer and wanted something similar for our TypeScript/React apps. We didn’t find anything, so we decided to build Mailing.

We added some features that we would’ve liked in Action Mailer, like a mobile toggle (with hotkeys), and the ability to send a test email from the browser while developing. We went all in on MJML so that we (almost) never have to think about email clients or nested tables :)

Plays well with the popular JS web frameworks, too. Demo video here.

Michael Guarino lays out how the engineering team at Plural brought K8s to the browser for their users:

Overall, we had a ton of fun building this feature. It allowed us to delve into an often unexplored area of the Kubernetes API, which I am honestly happy that we got to explore. This project also took an unexpected turn in its use of tmux and exposed us to a genuinely mind-blowing project in xtermjs (I’m shocked the community had the patience to write a full shell in javascript!).

I have to admit, I enjoy making fun of PHP. Mostly because the language itself is a fractal of bad design. But I (try to) do it with love, because language design is just one part of what makes a programming environment good. This post is a nice reminder of the many reasons why PHP and JavaScript are awesome.

Over the last twenty years, I have used over a dozen languages professionally, from C to Common Lisp, from Java to Python, from C++ to Typescript.

Yet, I love janky programming languages. In particular, I really enjoy PHP and JavaScript.

Here’s why.

I particularly agree with the point at the end about legacy codebases, many of which are powered by PHP and JS:

A legacy codebase means that the product is performing well. It means that I can often make immediate and impactful improvements.

For me, nothing comes close to the pleasure of improving a product with many users.

Million makes creating user interfaces as easy as React, but with faster performance and smaller bundle size for the end user. By computing the user interface beforehand with a compiler, Million reduces the overhead of traditional Virtual DOM.

Okay cool… but why should I use Million if I can just use Preact if I need something a bit more lightweight?

While alternative libraries like Preact reduce bundle sizes by efficient code design, Million takes it a step further by leveraging compilation to make a quantum leap in improving bundle size and render speed.

Watch the video or get started with the docs.

Partytown is a lazy-loaded library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.

Even with a fast and highly tuned website following all of today’s best practices, it’s all too common for your performance wins to be erased the moment third-party scripts are added. By third-party scripts we mean code that is embedded within your site, but not directly under your control. A few examples include: analytics, metrics, ads, A/B testing, trackers, etc.

I learned of this library during our fascinating discussion with Miško Hevery on (next week’s) JS Party.

This library implements a component which lived in my head rent-free for a very long time, but I couldn’t find React implementation of it at all, not even a single one. That’s why I decided to implement it myself. It provides a toast component, which is linked to a particular component on a page, which enables developers to provide located feedback (instead of page-wise feedback which you can provide with normal toast)

Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.

Bun is competing with Node and Deno, with the following goals:

1. Start fast (it has the edge in mind).
2. New levels of performance (extending JavaScriptCore, the engine).
3. Being a great and complete tool (bundler, transpiler, package manager).

I like those goals, and it’s designed to be a drop-in replacement for your current runtime.

The Documentary tells the story of how Svelte came to be, what makes Svelte different, and how it changes the game as a JavaScript framework. Filmed in locations throughout Europe and the US, it features Svelte’s creator Rich Harris and members from the core community who contributed to making Svelte what it is today.

Lots of familiar faces in this one.

Tauri is an app framework built with Rust. You build UIs for it using virtually any frontend JavaScript framework. It has three major tenets: security, privacy, and environment. Speaking to the latter:

The apps you make are lean and performant, which reduces electricity, storage space, and general natural resource consumption. Every byte saved is a leaf on a tree that gets to grow.

This project has gotten a lot of early interest because, well, people have been waiting for an Electron alternative to emerge. Now that Tauri is 1.0 I’m guessing adoption will really start to take off.

Even more good news: we have an episode on Tauri in the hopper for ya 💪

Zach Leatherman breaks down what SSR means in various contexts (component frameworks, app frameworks. Here’s the gist, but the details are good to so def read Zach’s full post:

Application frameworks most often define SSR as the alternative to SSG (static site generation). A runtime server is used to render the components on request.

Component frameworks define SSR as generating static HTML from a component definition. They offer no preference as to whether this should or can happen at build time or at request-time.

Ignoring progressive enhancement could be seriously hurting your conversions. This article will show you how to build resiliency into your apps.

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, or any other JavaScript application.

Ryan Dahl describes the JavaScript sandbox as a higher level container for server software:

This container isn’t meant to address the same breadth of problems that Linux containers target. Its emergence is a result of its simplicity. It minimizes the boilerplate for web service business logic. It shares concepts with the browser and reduces the concepts that the programmer needs to know.

People like Ryan and his colleagues at Deno are exploring this future, but it’s not quite here yet.

Highly customizable, easy-to-use, and minimal terminal styled website template.

Building a simple website with LiveTerm only takes minutes, and you only need to work with one file: config.json. After you cloned this repository, simply run yarn install && yarn dev and start editing config.json to build your website!

Powered by Next.js.

Good for them (and us)! But what does that mean in practice?

Over the next few months, we’ll be completing the OpenJS Foundation’s incubation program checklist, including transferring the Jest domain, repo, website, and other assets to OpenJS. We’ll also be updating the code of conduct and contributor license agreement.

Additionally, as part of this move, we will be publishing a project charter and creating new governance policies that will document the process for gaining commit access, as well as our leadership selection process.

Next up: React?! A guy can dream…

Andraž Bajt:

Basic premise is: browsers are great at navigating pages, let’s leverage that by serving users directly with HTML. This already gives you half-decent pages but you can go further and sprinkle on some sugar. A bit of JS. Instead of reinventing the world in JS let’s try to really use what modern browsers provide natively and then push just a bit forward.

Is the pendulum starting to swing away from SPAs/client-side rendering and back toward MPAs/server-side rendering? Will we ever find balance somewhere in the middle?

This is alpha software, but it seems pretty low risk to give it a try.

Wireit works with npm run, it doesn’t replace it. To configure an NPM script for Wireit, move the command into a new wireit section of your package.json, and replace the original script with the wireit command.

Now when you run npm run build, Wireit upgrades the script to be smarter and more efficient.

I thought Ali and Jen had some excellent advice in this segment of our JS Party episode on web dev for beginners, so I’m re-sharing it here in hopes that you might share it with people you know who may be stuck in the early phases of their web development path.

I also like what I had to say (imagine that!)

One thing that is true about software development in general… is that it’s actually really hard. And we need to just say that. Because you’re gonna hit bumps. You’re gonna hit walls. And some people will power through those walls and other people won’t, and that’s just the way life is…

But I think having something real that you want to exist… having a real project that you want to see into the world helps you get through those moments.

Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility and performance. Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.

It has solid React integration because Facebook, but Lexical has no dependencies and can be used and extended independent of any library or framework.

For all your object wrangling needs:

• ⛏️ Dot-delimited paths: foo.bar.0.baz
• ⭐ Wildcards: foo.*, **.bar
• 🗺️ Regexps: foo./ba?/
• 🏜️ Slices: foo.0:2
• 🚂 Unions: foo bar baz