~frontendfocus | Bookmarks (297)

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.

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

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

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.

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.

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.

✂️ 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.

Principles of Web Accessibility: How to Approach Accessible Web Interface Design — A dozen, snappy high-level guiding principles for approaching web accessibility.

CSS Wants to Be a 'System' — “At the core of CSS is a series of cascading rules and classes marrying and mingling in an elegant symphony of style application.”

Product Management Is Broken. Engineers Can Fix It — How redefining how PMs and engineers work together helped PostHog optimize everything they do for speed and autonomy.

🗓️ CSS Selectors Knowledge — We shared a bunch of dev focused ‘advent calendars’ last month, but here’s one that we missed — of course the benefit of sharing now means all the doors are open 😉. This resource shares various CSS selectors along with a quick video explainer and quiz to help build out your knowledge.

▶  Reckoning: Frontend's Lost Decade — In this roughly hour long talk Alex discusses platforms, apps, and the mobile web and why it’s important for us to get frontend culture “refocused on users, rather than ‘DX’ snake oil”.

Knowing CSS is Mastery to Frontend Development — Frameworks come and go, so Anselm reminds us that understanding the underlying mechanisms of a language is the key to really mastering it.

CSS Variables Editor: A Chrome Extension for Managing Colors in CSS Variables — Works with any site that uses CSS variables, but is designed to work well with shadcn/ui or daisyUI. You can also use it to check color contrast accessibility scores and generate palettes via AI.

Type Scale Generator: Interactive Type Scale Editor & Code Generator — Provides a live preview of the settings you choose and you can export the code as CSS, SCSS, Tailwind, or even JSON for use in WordPress.

Tipex: An Advanced Rich Text Editor for Svelte — Based on the popular Tiptap editor framework, it’s customizable, has theming support, and is Svelte 5-ready. Here’s a live example.

Easing Graphs: A Gallery of Easing Graphs for CSS and Framer Motion — You can select any of the graphs to interactively customize the easing code as needed, and you can filter by the style of easing (in, out, in-out). Code can be copied as cubic-bezier-based CSS or Framer Motion component.

Balancing Text in CSS — Ahmad kicks off the new year with this great interactive article explaining how we can make text more visually balanced using CSS. It’s a solid run through of what text-wrap and its different values can do.