Public list by ~frontendfocus

Issue 749 - Edge gets started on CSS mixins

GTA2 — web (gta2-resurection JS port)

https://gta2js.vercel.app/

GTA2 Web — JS Port — Here’s the top-down classic GTA 2 ported to run natively in the browser, with WebRTC peer-to-peer multiplayer added on top.

about 1 month ago

Getting Started with Anchor Positioning • Josh W. Comeau

https://www.joshwcomeau.com/css/anchor-positioning/

⚓️ Getting Started with Anchor Positioning — A cool new CSS feature, well explained. Josh enthusiastically runs us through the most useful bits of this API, sharing plenty of examples and code snippets. Jake Archibald warns of some bugs to keep in mind though.

about 1 month ago

Agentic Frontend Development with OpenAI Codex — Exclusive Workshop

https://master.dev/workshops/codex/

Agentic Frontend Development — Join this interactive workshop and see how AI can help with the messy middle of frontend work. Covers practical patterns for prompting, reviewing, debugging, and iterating with Codex — to help design, build, and refine modern interfaces.

about 1 month ago

Patrick Brosset (@patrickbrosset.com)

https://bsky.app/profile/patrickbrosset.com/post/3mpxkfv25vc2k

CSS Mixins Implementation Starting in Chromium — It's early days, but big news via Patrick Brosset: CSS mixins are coming to Chromium, as the Edge team has begun implementation. These let you define reusable blocks of styles with arguments, much like Sass mixins but browser-native.

about 1 month ago

Introducing the Safari MCP server for web developers

https://webkit.org/blog/18136/introducing-the-safari-mcp-server-for-web-developers/

Introducing the Safari MCP Server for Web Developers — Safari Technology Preview 247 introduces a new Model Context Protocol server feature that gives agents the ability to know how your code actually renders in the browser by connecting it to a Safari browser window. This post runs through the use cases and available tools.

about 1 month ago

Get Ready For the Powerful CSS border-shape Property! | CSS-Tricks

https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/

Get Ready for the CSS border-shape Property — Support is Chromium-only for now, but this property comes on the heels of shape() and corner-shape. Temani does an excellent job of highlighting the power this new feature unlocks and how it can be used to make fancy decorations, neat animations, and more.

#border-shape #borders #css shapes

about 1 month ago

Fluid Typography with progress() – Master.dev Blog

https://master.dev/blog/fluid-typography-with-progress/

Fluid Typography with progress() — A walkthrough of building fluid typography scales with CSS progress() and range mapping, mixing pixel breakpoints with rem font sizes so user font-size settings aren’t overridden. The downside is no Firefox support, but it’s possible to fall back.

about 1 month ago

https://try.expo.dev/ai-design-fef

https://try.expo.dev/ai-design-fef

Vibe-Coded Apps All Look the Same. Here's How to Make Yours Stand Out — AI can assemble a layout, but it can't see it. Use these principles to turn agent output into a polished app.

about 1 month ago

Frontend Minimalism in Action: Do More With Less JavaScript | Peter Kröner | webinale Berlin 2026

https://www.youtube.com/watch?v=GfRNbWb3ngA

▶  Frontend Minimalism in Action: Do More With Less JavaScript — A roughly 45-minute presentation in which Peter explores how frontend teams can build maintainable, resilient, and future-friendly projects by “relying less on hype-driven dependencies and more on web standards, deliberate technology choices, and minimalist engineering”.

#science & technology

about 1 month ago

Building Persistent Page Transitions with WebGPU and Vanilla JavaScript | Codrops

https://tympanus.net/codrops/2026/06/30/building-persistent-page-transitions-with-webgpu-and-vanilla-javascript/

Building Persistent Page Transitions with WebGPU and Vanilla JavaScript — How to render seamless page transitions using a single persistent WebGPU scene. Planes track empty DOM slots, then keep/remove/add tweens their bounds and opacity with GSAP. Live demo.

#webgpu #page transitions #seamless page transitions #gpu page transitions #vanilla javascript #javascript tutorial

about 1 month ago

Fixing full-bleed CSS

https://dbushell.com/2026/07/03/fixing-full-bleed-css/

Fixing Full-Bleed CSS — Addresses the long-standing “scrollbar problem” with full-bleed layouts by trading 100vw for container query units, with a dash of @property magic on top.

about 1 month ago

A developer toolkit to make your website agent-ready | Blog | Chrome for Developers

https://developer.chrome.com/blog/agent-ready-toolkit

Google's New Toolkit to Make Your Website 'Agent-Ready' — A new Lighthouse toolkit which can audit how agent-friendly your site is, and check things like accessibility tree quality, layout stability, and WebMCP integration. The score is informational for now, but offers a solid hygiene checklist.

about 1 month ago

Wordgard

https://wordgard.net/

Wordgard: A New Rich Text Editor Library from ProseMirror's Creator — A thoughtfully-built, modern, modular JavaScript rich text editor control. There's a live demo and here's how to get started.

about 1 month ago

The Descent — What Happened to the Frontend While You Weren't Watching

https://davidpoblador.com/deep-dives/what-happened-to-the-frontend/

The Descent: What Happened to the Frontend While You Weren't Watching — A comprehensive deep dive into the technical evolution of frontend development over the past twenty years. David tracks the changes from simple FTP uploads to complex build pipelines, before pondering whether we may be circling back to HTML-first principles. He also shares a running list of tools in the mix in 2026.

about 1 month ago

visual-json | The Visual JSON Editor

https://visual-json.dev/

visual-json: A Visual JSON Editor That's Schema-Aware, Embeddable and Extensible — Includes tree view, form view, diff view, and raw editing mode. You can toggle display options such as inline values and property counts. Source code.

about 1 month ago

OverflowGuard — Build around content, not breakpoints

https://overflowguard.dev/

OverflowGuard: A Component to Build Around Content, Not Breakpoints — Available as a React component or Custom Element, the idea is to avoid magic numbers, media queries, and container queries, so the element adapts on its own, even with dynamic content. Some nice ideas here which you can try out via interactive demos on the page. Source code.

about 1 month ago

框架构建体积对比

https://mlgq.github.io/frontend-framework-bundle-size/?lang=en

Bundle Size Comparison Across Frameworks: An Interactive Resource to Compare Bundle Sizes for Popular Frameworks — Currently compares 9 frameworks and versions thereof, by building the same demo app with each and generating a report. More details on the repo.

about 1 month ago

µJS — Lightweight AJAX Navigation Library

https://mujs.org/

µJS (muJS): A Lightweight Ajax Navigation Library — Offers an easy way to add SPA functionality without a framework or build step, just a simple script tag that intercepts existing links, form submissions, etc., and works with any backend. Source code.

about 1 month ago

Try Tiger Cloud Free: $1,000 Credit | Tiger Data

https://www.tigerdata.com/go/trial

Fast Dashboards Start with Fast Queries — When dashboards outgrow vanilla Postgres, most teams add a second database. Pipelines, stale data. TimescaleDB extends Postgres so analytics stays fast on live data. Hypertables, 95% compression, continuous aggregates. Start with a $1000 credit.

4 months ago