JavaScript Icon

JavaScript

Tracking all things JavaScript
1250 Stories
All Topics

JavaScript preactjs.com

The Preact team introduces Signals

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.

HTML web.dev

A course that breaks down every aspect of modern PWA development

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.

Lőrik Levente levminer.com

Tauri vs Electron with a real world app

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…

Tauri vs Electron with a real world app

iOS krausefx.com

See what JS commands get injected through an in-app browser on iOS

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.

React mailing.run

Build + test + send emails with React

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.

Kubernetes plural.sh

How we created an in-browser Kubernetes experience

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

How we created an in-browser Kubernetes experience

PHP the.scapegoat.dev

Why I still love PHP and JavaScript after 20+ years

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.

JavaScript github.com

What if React's API and Svelte's compiler had a baby

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.

JavaScript partytown.builder.io

Partytown runs 3rd-party scripts from a web worker

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.

Oleh K. github.com

React local toast

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)

JavaScript bun.sh

Bun is a fast all-in-one JavaScript runtime

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.

Svelte YouTube

Svelte Origins: A JavaScript Documentary

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.

Rust tauri.app

Tauri (a cross-platform app toolkit) goes 1.0

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 💪

JavaScript zachleat.com

The many definitions of Server-Side Rendering

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.

Ryan Dahl tinyclouds.org

On the potential of JavaScript-based containers

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.

Engineering at Meta Icon Engineering at Meta

Meta is transferring Jest to the OpenJS Foundation

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…

JavaScript edofic.com

How i fell in love with low-js

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?

npm github.com

Wireit upgrades your npm scripts to make them smarter and more efficient

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.

Learn YouTube

Want to learn web development? build something real!

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.

Engineering at Meta Icon Engineering at Meta

Lexical – an extensible web text editor framework

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.

Player art
  0:00 / 0:00