~frontendfocus | Bookmarks (299)

React, Visualized: A Visual Exploration of React Concepts — A visual explainer of numerous core React concepts, including modern React 19 features like actions, transitions, and Server Components. There’s a lot to enjoy here if you're a visual learner.

Ship SaaS Subscriptions Fast with Drop-In Billing from Clerk — Add subscriptions to your SaaS in minutes — learn how with Clerk Billing’s drop-in UI and Stripe-powered setup.

🤖 Building a React App with GitHub Copilot — A good walkthrough, complete with video, if you prefer, of bringing together several of GitHub Copilot’s features for building a modern JavaScript app quickly.

Creating an Animated Product Grid Preview with GSAP and clip-path — Now that GSAP is entirely free to use, you might be more prepared to bring its animation powers into your Web design arsenal.

Cap: A Lightweight, Modern Open Source CAPTCHA Alternative — This solution boasts a method called “proof-of-work” which attempts to make automated CAPTCHA solving more expensive. It uses a Web Component and you can try out a few demos here. GitHub repo.

+80% Daily Productivity With an All-in-One MySQL IDE for Web Devs — Code faster, test easier, deploy smarter. Don’t fall behind. Try dbForge Studio for MySQL and boost productivity now!

snapDOM: Captures DOM Nodes as Images — A fast and accurate DOM-to-image capture mechanism to capture any HTML element as a scalable SVG image, preserving styles, fonts, background images, etc.

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.

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.

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.

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.

▶  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.

'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.