Bleeding Edge Web

@edgeATX

EdgeATX.org

January 2025

News From the Bleeding Edge

— Ted Patrick (@__ted__)

Express Forward

— Wesley Todd (wesleytodd.com)

Housekeeping

Join us on Slack
Speakers and sponsors always wanted
- edgeatx.org / speak.html
- edgeatx.org / sponsorship.html

Thanks to Our Host!

Expedia is always hiring! expediajobs.com

Acumity

Smart, Simple, Secure
AI Solutions Designed for the Enterprise

Libraries & Frameworks

Bun v1.1.44 - Jan 16

Bun.serve() - serve and bundle frontend

HTML Imports


          import mySinglePageApp from "./index.html";

43 bugs fixed

Spotlight: Tailwind v4

Rapidly build modern websites without ever leaving your HTML.

Tailwind utility classes to style without CSS

Oxide Engine - faster in Rust
Variants, Cascade Layers, Container Queries
Zero-configuration Content Detection

Daisy UI v5 beta

Semantic Tailwind Components in HTML/JSX


          <button class="btn btn-primary">Press Me</button>

Zero dependencies
Smaller Size 34kB (Down from 137kB)

React 19 (Dec 12)

<form> Actions
New hook: useOptimistic and useFormStatus

New API: use

import {use} from 'react';

function Comments({commentsPromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);
  return comments.map(c => <p key={c.id}>{c}</p>);
}

Notable releases

Jan 10 ESLint 9.18.0
Jan 14 Electron 34
Jan 15 Puppeteer 24
Jan 15 Storybook 8.5
Jan 16 Cypress 14

Baseline News

https://web.dev/baseline

Latest browser releases

Dec 9 Safari 18.2
Jan 7 Firefox 134
Jan 14 Chrome 132

Baseline 2025: Promise.try

Baseline 2025 on Jan 26th
Simplified error handling with Promise


        // If the callback is synchronous and it throws
        // an exception, the error won't be caught here:
        new Promise(resolve => resolve(callback());

        // But it will be here:
        Promise.try(callback)
          .then(result => console.log(result))
          .catch(error => console.log(error))
          .finally(() => console.log("All settled."));

WebGPU (Not Baseline!)

Utilize a GPU from JavaScript
High-performance, low-level 3D graphics API

Built on OS APIs... Vulkan, Metal, or Direct3D 12


const canvas = document.querySelector('cv') as HTMLCanvasElement;
const adapter = await navigator.gpu?.requestAdapter();
const device = await adapter?.requestDevice();
const context = canvas.getContext('webgpu') as GPUCanvasContext;