~frontendfocus | Bookmarks (260)

Chrome Extension Boilerplate: Create Chrome/Firefox Extensions using React and Typescript — Boasts faster build speeds and an improved development experience through use of Vite and Turborepo.

View Transitions Applied: Smoothly Animating a border-radius with a View Transition — Bramus shows us how to smoothly animate properties like border-radius during View Transitions. There’s also a related video talk if you want to get up to speed on all things View Transitions.

Grouping Selection List Items Together with CSS Grid — CSS Grid can be used to visually group selected items in a list. Preethi presents two methods to do just that here — resulting in a nice UI win.

▶  New in Chrome Q1 2025: CSS text-box, File System Access for Android, Baseline Updates and More — A round-up of recent changes and additions to Chrome.

Usability Testing with Disabled Users is a Good Investment — …and will highlight accessibility barriers missed in typical accessibility audits.

code-inspector: Click a Page Element to View Its Source Code — Once installed, use ALT+SHIFT to position your cursor at that location in the code in your IDE. Supports a number of tools and frameworks (React, Vue, Webpack, etc) along with 10+ IDEs.

Filter: A Powerful, Web-Based Image Editor for Quick Image Edits and Filters — A tool from Addy Osmani that you can install and configure locally. It’s optimized for mobile use and the processing is all done locally.

MotifyX: A Curated Collection of Modern, Customizable CSS Backgrounds — You can choose from six categories of background types (geometric, futuristic, gradients, etc., some of which are animated) and each can be previewed on the page and edited as needed.

I18n Code: Translate JSON Files and Blog Posts Into Multiple Languages — Enter your content in valid JSON or Markdown format to generate a translated version (maintaining keys in English). Supports 25+ languages. Useful for static sites that require translation.

Super Color Palette: A Color Palette Generator for Shifting Hue, Saturation, Lightness, and More — Lots to fiddle around with here but the main feature is the set of sliders that let you easily ‘adjust’ the palette using HSL. Also includes tools for generating palettes, accessibility, etc.

Delaying the Shipping of CSS @function From Chrome 136 to 139 — A few issues ago we shared how there were some concerns regarding the intent to ship CSS @function support in Chrome. Well, now the Chrome team have announced a delay (until Chrome 139) due to some “recent impactful spec changes” resulting in a need for some more experimentation time.

Prompt Engineering for Web Development — Kevin has been tinkering with code generation for a couple of years now, and here he shares some of the approaches and techniques that he’s found to be particularly beneficial while generating PHP, SASS, JS, and HTML code.

Dive Into WebGPU — If you’re curious about creating modern 3D graphics in the browser then this is a good place to start. It offers a well-structured multi-part guide to setting up and creating a landing page complete with various animated 3D WebGPU scenes. Caveat being that WebGPU support is something of a mixed bag at the moment.

How to Make Web Videos Way Smaller in 2025 with AV1 — Here’s how the AV1 codec can be used to make videos on your site both smaller and better quality. Includes CLI instructions and some cross-browser tricks.

Validate Your SaaS Idea While Building an Audience — Learn how to communicate directly with potential customers by integrating your waitlist with a Loops newsletter.

Views on 'Views' — Discussions are underway to potentially change the definition of a ‘web page’ to best accommodate the various contexts in which we can now interact with web content (such as in native apps or VR). One such suggestion is to use ‘view’.

▶  Everything You Need to Know About Invoker Commands — command and commandfor attributes are a brand new HTML web platform feature coming later in 2025. Here’s everything you need to know about them, plus some things you really don’t.

Truth, Lies and Progress Bars — Yeah, sometimes loading/progress indicators lie because demonstrating some amount of forward momentum gives users oft-needed confidence that things are continuing as intended. There’s a few things we can do to enhance that experience — as Tyler touches on here.

Trusting AI with My Images Wasn't Easy — We shared last week how Dries was experimenting with various LLMs for writing alt-text for thousands of images. Here he reflects on the effort, concluding that “sometimes, the best way to improve is to step aside and let a tool do the job better”

Instrument, Monitor, Fix: A Hands-On Debugging Class — Join us for a hands-on session where you’ll build it, watch it break, debug it, and go from “no idea what’s wrong” to fixing issues.

CSS Meets Voxel Art: Building a Rendering Engine with Stacked Grids — Another great tutorial from Codrops, this time showing how transforms, perspective, and stacked grids can create a fully addressable 3D space, pushing the boundaries of just what’s possible with pure CSS. You can create your own voxel creations here.

⭐️ Building a CSS-Only Star Rating Component — A tutorial you’ve no doubt seen countless times, but typically relying on a little bit of JavaScript. Temani shares a strictly CSS-only approach.

Freesound: A Collaborative Collection of 670,000+ Free Sounds — Downloadable in WAV format, possibly useful for adding UI sounds to an app, or for adding to videos. Take note of the license for any sound, as not all are CC.

Functions in CSS? — We can’t use custom CSS functions in production just yet, but this early look at how they’re currently being prototyped in Chrome Canary offers a glimpse at the future capabilities (arguments, type-checking, etc).