Public list by ~frontendfocus

Issue 752 - The amazingly versatile conic-gradient()

Dither it!

https://ditherit.com/

Dither It: An Online Image Dithering Tool — Drag in an image and play around with settings, palettes, and more to get the vibe you want. Josh W. Comeau recommended this tool on Bluesky recently, and his thread has much better examples than my attempt above… 😅

22 days ago

WOFF 1.0: a milestone on W3C’s journey of fonts on the web

https://www.w3.org/blog/2026/woff-1-0-a-milestone-on-w3cs-journey-of-fonts-on-the-web/

WOFF 1.0 at 16: The Format That Made Web Fonts Work — Did you know @font-face was adopted into CSS2 in 1998? But it sat largely unused amid fights over licensing, obfuscation and DRM. Chris Lilley, PNG co-author and author of W3C's 1996 case for fonts on the web, explains how the deadlock broke with the “entirely DRM-free” format we know and love.

22 days ago

CSS Infinity Use Cases ¡ July 25, 2026

https://nerdy.dev/css-infinity-use-cases

∞ To infinity and Beyond, in CSS — e, pi, infinity, and NaN are all widely supported constants accepted in CSS math functions, and Adam runs through several ways going to infinity can improve your designs.

22 days ago

The Launch of CodePen 2.0

https://blog.codepen.io/2026/07/23/two-point-oh/

The Launch of CodePen 2.0 — CodePen has been a reliable piece of web development infrastructure for 14 years and now the experience has gone 2.0 with an all-new editor, and lots of goodies for paid users like the ability to quickly deploy pens to a CodePen subdomain.

22 days ago

Measuring Component Performance with the Container Timing API – CSS Wizardry

https://csswizardry.com/2026/07/meaasuring-component-performance-with-the-container-timing-api/

Measuring Component Performance with the Container Timing API — Chrome's origin trial for the Container Timing API lets you tag a DOM region with a containertiming attribute and track each contentful part as it paints. It won't tell you when a component is finished, though.

22 days ago

When and what should I be logging?

https://blog.sentry.io/logging-best-practices/

When and What Should You Actually Log? — The difference between logs that help you debug and logs that just cost you. Get tips here.

22 days ago

Swapping a lightweight image for an animated SVG - Stuff & Nonsense

https://stuffandnonsense.co.uk/blog/swapping-a-lightweight-image-for-an-animated-svg/

Paint the Static Image First, Fetch the Animation After — Andy's elaborate animated banner weighs half a megabyte, so now a static AVIF paints first with the animated SVG only fetched on screens big enough to do it justice.

22 days ago

Handling concurrency on the Web with Web Locks API

https://tech.olx.com/handling-concurrency-on-the-web-with-web-locks-api-163b7e07eddd

Handling Concurrency on the Web with Web Locks API — A practical walkthrough of stopping multiple tabs from racing each other, thanks to the widely available Web Locks API.

22 days ago

Stolen Buttons

https://anatolyzenkov.com/stolen-buttons

Stolen Buttons — One designer's hobby is 'stealing' buttons from the sites they visit. It's quite the collection and certainly reflects the current design zeitgeist. There's a browser extension if you want to make your own similar hoard.

22 days ago

Canvas UI: Creative Canvas and WebGL Component Library

https://canvasui.dev/

Canvas UI: A Creative Canvas and WebGL Component Library — An open source, framework agnostic library of cutting edge HTML-in-Canvas and WebGL components you can copy and paste. This has received a lot of kudos on social media this week.

#component library #react component library #vue component library #svelte component library #webgl component library #canvas components

22 days ago

AI workflow builder diagramming library — JointJS

https://www.jointjs.com/ai-workflow-builders

Building an AI Workflow UI in React? Start With JointJS — A real data model, polished UX, and performance that scales with your canvas. Skip months of building.

22 days ago

Introduction - MapLibre GL JS

https://maplibre.org/maplibre-gl-js/docs/

🌐 MapLibre GL JS 6.0: Interactive Vector Maps for the Web — A WebGL-powered library for rendering interactive vector tile maps. Version 6 goes ESM-only, requires WebGL 2, and lands broad performance gains. Release notes and a v5 to v6 migration guide.

22 days ago

Markdy — Open-Source Animation DSL Engine

https://markdy.com/

Markdy: Like Mermaid but for Animations and Motion — Instead of writing animations in CSS or JavaScript, you use a simpler language focused on core animation concepts (akin to Mermaid with diagrams). The examples are neat.

#open-source animation dsl #text-to-motion #declarative animation #framer motion alternative #gsap alternative #markdown animation

22 days ago

KaTeX – The fastest math typesetting library for the web

https://katex.org/

KaTeX: Fast Math to HTML Typesetting for the Web — Based on Donald Knuth’s TeX, KaTeX provides a no-dependency way to rapidly render TeX math expressions in a predictable manner, regardless of environment. The sandbox demo page shows off how smooth it is.

22 days 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