~frontendfocus | Bookmarks (267)

CSS Grid Generator — This handy browser-based tool got plenty of you clicking — you can use it to easily create custom CSS grid layouts — you can specify the number of columns, rows, and gutter size.

Complete Intro to React v9: New Project, Modern Stack — Join Brian Holt in building a pizza delivery app from scratch. Master hooks, TanStack Router, testing, and React 19 features in this comprehensive guide to modern React development. No prior React experience needed.

02: Five CSS Snippets Every Frontend Developer Should Know in 2024 — Adam did this in 2023, and the 2024 version proved very popular too. All the snippets here are toolbelt worthy, powerful, CSS tips (including nesting, sub grid, container query units, etc) that will be just as valuable as we head into 2025.

03: Inline Conditionals in CSS? — In the summer the CSS Working Group resolved to add an inline if() to CSS. An exciting step for CSS, but one that raises lots of questions too. This explainer from Lea proved valuable for many.

04: What You Need to Know about Modern CSS — A bookmarkable guide from this past Spring featuring a list of all the then new additions to CSS (think nesting, view transitions, :has(), etc). It remains really handy, as there’s an explainer, demo, code example, and a quick bit of detail as to why you should care about each entry. If you want to scrub up...

05: How to Center a Div — The fact that so many of you tapped on this one tells us that it's still something of a tricky ordeal to get right. Yes, it's easier now thanks to new tools (Flex, Grid, etc), but which to use? Josh shares the trade-offs between different approaches, and the best strategies to use.

06: The Magic of Clip Path — This post sets out to “inspire you and show you that thinking outside the box can lead to some great animations” — all via the magic of the very powerful clip-path CSS property.

07: CSS Selectors — A thorough, complete guide covering all of the various methods we have to select elements in CSS (such as pseudo-selectors, nested selectors, attribute selectors, etc) and how to use them for applying styles.

08: An Interactive Guide to CSS Container Queries — This is a detailed explainer on CSS container queries, exploring the problems they solve, how they work, and how we can use them in our workflows. Lots of code and visuals to help things along too. Well worth bookmarking.

10: The Frontend Developer/Engineer Handbook 2024 — This incredibly in-depth and detailed guide on the current web development landscape was well received. It's remains a superb resource for getting up to speed on everything from code editors, CSS, UX, UI, the command line, performance, accessibility, testing, AI, and much, much more.

Anchor Position Tool — CSS anchor positioning is on the way, and one rather neat layout mechanism that’s part of the spec is position-area. This (Chromium 129+ only) demo from Una demonstrates how it works. There was plenty of interest in this one, and although it's still in draft, it should prove rather powerful once widely available.

Speedometer 3.0: A Browser Benchmark for Webapp Responsiveness — 2024 gave us a new major release of Speedometer — the first with a cross-industry collaborative approach supported by each major browser engine (Blink, Gecko, WebKit). Version 3 added in many new tests, performance wins, and improvements. You can run the test for yourself here.

01: Twelve Modern CSS One-Line Upgrades — Stephanie shared this list of a dozen CSS properties that are well worth knowing earlier in the year — the one-line upgrades here will help reduce technical debt, remove unnecessary lines of JavaScript, and score some easy wins for the user experience, too.

Creating a Pure CSS Halftone Effect in 3 Declarations — Creating a halftone effect in pure CSS using just a single div, no pseudos and just three properties. Talk about efficient (and visually striking, too).

WorkOS: Sell to Enterprises with a Few Lines of Code — The modern identity platform for B2B SaaS, offering flexible, easy-to-use APIs to integrate SSO, SCIM, and FGA in minutes instead of months.

CSS Wrapped 2024 — A fun (pixel-art filled) exploration of the new additions to the web platform in 2024, including cross-document view-transitions, scroll-driven animations, anchor positioning, and more.

Solved By Modern CSS: Feature Image — Ahmad shares how container queries and CSS :has() can help build a neat featured image component that changes depending on viewport/container size. As ever, great illustrations and code examples to help our understanding.

▶  Custom Dropdowns Just Got a Whole Lot Easier (Finally!) — A quick look at the upcoming customizable select element that makes it easy to create totally custom dropdown selects with just HTML and CSS, no JS needed. It’s currently available behind an experimental flag in Chromium browsers, but wider support is expected in 2025.

'My Issues with Shorthand Properties' — A bold claim here, stating that the “removal of CSS shorthand properties would benefit us all”. Håvard adds that writing explicit properties over shorthand is the way to go: “Clarity trumps cleverness”.

Catch Flaky Tests Before They Break Your Build — Flaky tests waste time and erode trust. Learn to flag unreliable tests early and keep your CI/CD smooth.

Using Transformers.js for AI in the Browser — Transformers.js is a seriously impressive project we link from time to time that lets you run pretrained machine learning models in the browser. Here’s a practical look at actually playing with it yourself right now.

Mastering SVG Arcs — Akshay shares his love of drawing in code, in turn demystifying how to use radii, rotation and arc direction to make intricate SVG designs.

Codate: Easily Create Custom Date Formats in Any Programming Language — A neat little resource to get a code snippet for common date formats – hyphenated, slashed, dotted, standard with commas, etc. Supports 11 languages including JS, Go, Python, Java, PHP, and more.

🗓️ The 2024 Web Almanac — This comprehensive report on the state of the web returns to wrap up 2024. This edition has 21 chapters (most of which are available now) covering UX, accessibility, publishing, content distribution, and more. All of the metrics shared are based on real world data from over 16 million websites.