~frontendfocus | Bookmarks (301)

▶  Can Windows 95 Browse the Modern Internet in 2025? — A quick 10-minute curio. Yes, it’s possible with some noodling, but you’re not gonna have a good time. Unsurprisingly, a usable experience this is not.

Datastar: The Hypermedia Framework — Datastar claims to offer the power of Alpine.js and htmx in one smaller library. It embraces data-* HTML attributes (thus the name), signals, and SSE events, really embracing the hypermedia concept.

jsPad: A Modern Playground for Writing and Testing JavaScript, TypeScript, HTML, and CSS — Same idea as CodePen, JSFiddle, et al, and you can initiate a project via a template from a variety of technologies (JS, TS, React, Tailwind, Vue, Svelte, and even Web Components).

Crosspost: A JavaScript Utility for Posting Across Multiple Social Networks at Once — Currently supports eight different services including Bluesky, X, Mastodon, LinkedIn, and others.

ColorPocket: A Chrome Extension for Organizing and Picking Colors — Has a simple set of features that includes an eyedropper, color picker, palette generator, and ability to save colors for later access.

Build a Professional Design System in Less Than a Day Using AI — Instantly create and maintain your design system using prompts and images with new Hope AI model by Bit. Each component is ready for import and reuse as a package across new and existing projects.

'MCP is the Coming of Web 2.0 2.0' — Anil shares his thoughts on the emerging Model Context Protocol (a.k.a. MCP) — a way for LLMs to interact with apps and third party tools — highlighting its potential to revive an open, interoperable ‘Web 2.0’.

The Future of the Web Depends on Getting This Right — Mozilla shares its take on the U.S. vs Google search case: “search competition must improve, but this can be done without harming browser competition”.

Creating Blob Shapes using clip-path: shape() — Another cool tutorial from Temani, this time looking at how we can use the shape() function to create gooey, weird blob shapes that you can fill with a background image, and even animate.

Accessibility in HTML Emails Remains Critically Under-addressed in 2025 — The Email Markup Consortium recently released a fresh study on accessibility in HTML emails, looking at over 400,000 emails. The takeaway? Well, there’s disappointment “to see the same issues as we have in previous years”, but a note that “frameworks and drag-and-drop tools are uniquely positioned to raise the accessibility baseline”.

Getting Started with Clerk Billing — Learn how to build a complete billing experience with Clerk and Stripe, no custom UI or webhooks required.

▶  Unshipping: How (And When) to Break Web Features — A roughly ~50 minute podcast with Google’s Rick Byers about Blink’s ‘Principles of Web Compatibility’ and a willingness to change and even ‘unship’ web features.

CSS Snippets — Jeremy shares a handful of helpful little CSS tidbits and features that he often uses — you may want to drop them into your project too.

Flipping Layouts When Google Translate Swaps between a Left-to-Right Language and a Right-to-Left Language — What’s the right approach here? Chris experiments with presenting his site when translated (to say Arabic) with a direction: rtl; property value set.

▶  Flexible Wrapping CSS Grid — Create a flexible CSS Grid with a varying number of items that expands, shrinks, and wraps to accommodate the number of items that can fit in one grid row. A quick CSS tip well explained in this ~4 minute video.

"We Launched Our First Shopify Theme" — Sure, it’s an update about a new, paid theme, but it’s also an interesting blog post (with a rad design) about what goes into actually building such a thing.

Finding the Joy in Alt Text — On the fun often found in the added context of alt text.

prompt-kit: A Set of Customizable, High-Quality Components Built for AI Applications — The components are built on shadcn/ui with the goal of making it easy to design AI-related interfaces like chat experiences, AI agents, autonomous assistants, and so forth. Repo here.

🎨 AI Color Match: Instantly Match Colors from Any Image — This tool lets you upload a source image (for the colors) and an output image. The colors from the source image are applied to the output and you can use a slider for before/after comparisons.

Web Code Tools: Code Generators for Frontend Development — Includes generators with live previews for CSS, HTML, JSON-LD, Meta Tags, Open Graph, X Cards, and Robots.txt.

How to Have the Browser Pick a Contrasting Color in CSS — Jen shares how the upcoming contrast-color() function should help with accessibility. It’s all in flux right now, but the takeaway being we should be able to declare a color in CSS and then have the browser figure out what should be paired with it — neat.

Integrating Localization Into Design Systems — A case study that looks at how two designers tackled the challenges of building a localization-ready design system for a global audience, taking into consideration things such as text overflow, RTL layouts, font inconsistencies, and more.

HelloCSV: A Drop-In, CSV Importing Workflow for JS Apps — If you or your users have CSV files to import, here’s a complete CSV importing workflow for the frontend that you can drop into your app. Basic docs.

The Height Enigma — A beginner-friendly no nonsense unraveling of the ‘mysterious’ behavior of percentage-based heights in CSS: “Like with so much in CSS, it feels random until you learn about the underlying mechanisms that explain the behaviour, and then it all makes perfect sense”. A great, visualized explainer.