~frontendfocus | Bookmarks (233)

tailwind-to-inline: Transform Tailwind Classes to Inline Styles — This is an npm script you can run on your Tailwind-based templates should you want to convert them to inline styles, such as for use in HTML emails.

Easing Wizard: A CSS Easings Editor and Generator — We’ve shared tools like this before, but this one might be the best-designed one yet. You can copy the code as CSS or Tailwind and there’s an option to deep link to the current easing config settings.

Protect Against Bots, Fraud, and Abuse in Real Time — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today.

Open Props UI — A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Version 1.0 hit yesterday, adding a ton of components. Repo here.

Comic Mono — A legible monospace font (see image above) based on that very typeface we’ve all been trained to recognize since childhood. Available in a regular and bold weight. Is your editor ready for this..?

ARIA DevTools: A Chrome Extension to Easily Spot Missing ARIA Labels and Roles — Provides a visualization of a website’s accessibility tree, so you can see where you might need to add ARIA-based landmarks.

Photo Gradient: An Online Tool to Generate & Customize Mesh Gradients From Any Image — The download is in PNG format and you can also just randomly generate and edit mesh gradients without uploading an image.

✂️ CSS text-box-trim — This handy property lets you finely control the leading space found both above and below text. Adam shows us how it works, and what problems it solves. It’s in Chrome/Edge 133 and Safari 18.2, no Firefox support just yet.

'WordPress Is in Trouble' — The continuing WordPress drama leaves a huge question mark on the overall project and the potential wide-ranging implications for the open web. There’s been a lot of chatter recently about a possible fork, but that’s already hit a Mullenweg-shaped roadblock. This story is far from over (if you want to get up to speed on things, this is a handy,...

Write CSS Like a Pro — Kevin Powell shares how to create a responsive website from scratch using modern CSS features (such as nesting, utility classes, custom properties, and more). This detailed video course also dives into adding additional polish via animations, view transitions, and more.

Tight Mode: Why Browsers Produce Different Performance Results — This post offers a high-level look at what ‘Tight Mode’ is and how it influences the way the web works. If, like me, this was new to you, it’s a function which constrains what resources are loaded and in what order.

The Success of Interop 2024 — A positive look back at what this collaborative cross-browser effort achieved in the past year — in particular the 95% interoperability reached across the key focus areas by end of 2024. Nice to see the ongoing results of working together for the benefit of the web platform at large. Interop 2025 plans are underway.

Double-Keyed Caching: How Browser Cache Partitioning Changed the Web — In the name of privacy, browsers have now shifted from single-keyed to double-keyed caching (based around both the target URL and source origin). Here’s a good overview of the pros and cons introduced as result, with Addy explaining this complex change in detail, noting how it reduces cross-site tracking, impacts both performance and bandwidth, CDN...

You Might Not Have a Web Performance Problem — Some caution and caveats to consider when it comes to Lighthouse results and the performance picture they can paint.

[Workshop] How to Build Testing Culture on Your Team — Join our live session to learn strategies for gaining buy-in, balancing testing, and integrating it into daily workflows.

▶  HTML & CSS for Absolute Beginners — Kevin’s started the year by sharing this epic 50-video course — it explores everything from syntax, page structure, semantic HTML, CSS specificity, and much more. Assumes zero knowledge so, although entertaining and beneficial enough for us all, is perfect for a beginner — one to pass along to those starting out.

A Couple of CSS Tricks for HTML dialog Elements — Namely blurring the dialog’s backdrop and disabling page scrolling when a dialog is open.

Running Animations Without Keyframes — Supported in most browsers, @starting-style provides a way to define starting values for transitions meaning no keyframes are needed.

'HTML Is Actually a Programming Language. Fight Me' — “HTML’s promise is that we can build, make, code, and do anything we want.”

Publishing a Simple Client-Side JS Package to npm with GitHub Actions — As part of the process of building Prompts.js, a new library for creating simple await-able alternatives to alert(), confirm() and prompt(), Simon wanted to make it easy to publish as an npm package too.

Flexoki — An Open-Source Color Scheme for Prose & Code — If you’re looking for a nice color palette to reach for beyond the Tailwind CSS usuals, this here is a solid option. Lots of nice inky colours, inspired by ink/paint pigments on paper. There’s a good explainer here too on the decisions made. Repo here.

jsontr.ee: A Library to Visualize JSON Structures as Dynamic SVG Tree Diagrams — You can try it out on this playground, which provides the option to download the diagram as PNG, or use it in an app with customizable styles.

DOOM: The Gallery Experience — A game developer has created this amusing version of DOOM, parodying art gallery openings, complete with curated pieces, wine, fancy music, and even hors d’oeuvres. If you fancy starting the new year with some culture then this is playable directly in the browser (which gives me an excuse to share it here...).

The Future of Htmx — htmx is the new jQuery? Well, it’s an ideal that the htmx team are actually striving for, looking to emulate the “technical characteristics of jQuery that make it such a low-cost, high-value addition to the toolkits of web developers”.