~frontendfocus | Bookmarks (247)

A Framework for Evaluating Browser Support — If you find yourself trying to figure out where to draw the line when it comes to browser support, Josh has some advice, sharing the deciding factors he uses when it comes to CSS features. He notes that although this post focuses on CSS, the framework is applicable to modern JavaScript and HTML features too.

Tailwind CSS v4.0 Now in Beta — The long awaited beta for version 4 of the popular Tailwind CSS styling framework is out, with a new engine resulting in 5x faster full builds, a unified toolchain, CSS-first configuration (yes, you can say goodbye to noodling with tailwind.config.js!) and more. All the information you need is in the docs here.

Master Performance and Speed Up Your Site — This detailed video course shares the fundamentals of web performance, covering key Core Web Vitals metrics such as Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). You'll learn how to best use Lighthouse, WebPageTest and other tools in order to make your site lightning.

Make Creative Borders with background-clip: border-area — Safari is first out of the gate with support for background-clip: border-area, available now in Safari Technology Preview and in Safari 18.2 beta. It lets you fill a border with a background image or gradient. This article explains how it works, and shows up the possibilities in seven demos.

📈 Designing (and Evolving) a New Web Performance Score — Harry has been working on a way to compare performance between sites, resulting in a new metric dubbed ‘CrRRUX ‘(Chrome Relatively-Ranked User Experience). It aims to simplify competitor analysis into a single number, reflecting real user experiences across a given a cohort of sites. A clear indicator of performance in the context of your peers.

▶  How Browsers Really Load Web Pages — A deep dive into how browsers decide when to load a specific resource, and all the ways in which you can influence them to modify their behaviour.

📊 Tremor: React Components for Building Dashboards — Built with React, Tailwind CSS, and Radix UI, you can use Tremor by either copy and pasting the components or via their npm package. You get all the typical dashboard UI elements like charts, progress indicators, activity trackers, accordions, tables, etc.

SVG Spinners: 100+ Open Source SVG Loading Spinners — You can view them all in action here. They’re built with CSS and SMIL, are easy to customize using currentColor, and you can include them as inline SVGs or download directly.

HTMLrev: A Categorized Directory of Frontend Templates — We’ve featured this before, but it’s now home to over 1,500 templates. The site itself doesn’t hold any templates, but links to third party resources, and lets you filter down to what you’re looking for.

Diff Text: A Simple Online Diff Checker Tool — Lets you compare by words, characters, or lines and you can toggle show all lines or only changed lines.

Spoiled: A Realistic 'Spoiler' Component for React — The homepage is a live demo. A neat way to keep things hidden until a user wants to see them. Powered by the CSS Painting API with a static image fallback. GitHub repo.

Coding Font: A 'Game' to Find Your New Favorite Code Font — This is a fun idea. It throws over 25 popular developer-oriented fonts into a ‘tournament’ and you then pick your favorites until you’re left with a winner. (It was Cousine for me.)

How overflow: clip Works in CSS — This is a solid look at using the well-supported clip value alongside the overflow CSS property — with some good example use cases, particularly around art direction.

Monicon: A Universal Icon Library for Any JavaScript Framework — The project itself is not new, but provides quick access to 200,000+ icons from popular sets and works with most frameworks and build tools.

The State of HTML 2024 Results — The results from this year’s State of HTML survey dropped late last week, and Patrick Brosset (of the Edge team) sums up where things stand in his conclusion:

Meet Angular v19 — The latest version of this popular web app framework is here — to mark the release ▶️ here’s a video running through what new features you can expect.

Importing a Frontend JavaScript Library Without a Build System — Julia explores how to import a JS library when taking a no-build-system approach.

alt Text: Don’t Just Describe Images — Advice for writing alt text that communicates an image’s purpose without repeating page content — chiefly focus on meaning rather than visual description.

Pinpoint Flaky and Failing Tests with Codecov Test Analytics — Stop digging through logs and re-running your CI. See why tests are failing and which are flaky, right in your PR.

Creating an ASCII Shader Using OGL — This is an incredibly cool effect, not to mention great tutorial on getting started with shaders and using OGL, a minimal WebGL library that’s a lot lighter than Three.js.

▶  Nerd Show and Tell: Meet Zach Leatherman — Zach talks about the “rollercoaster ride of building Eleventy”, why owning your corner of the internet is more important than ever, and how platforms like Eleventy could be “the ticket to a new wave of web independence”.

SVG to Font 6.1: Read SVG Icons and Output a Font File — Both a CLI tool and Node.js library that can read in SVG documents and output WOFF2, WOFF, EOT, TTF and SVG fonts. Useful for generating a Web font from a set of icons, say, as in this demo.

lite-youtube Web Component v1.6 Released — The latest version of this web component that quickly renders YouTube embeds adds auto-pausing, custom CSS properties, named slot thumbnails, and more.

Troubleshoot Frontend Issues with Digital Experience Monitoring — Learn how Datadog provides a single source of truth for frontend monitoring so teams can troubleshoot issues faster.