Friday Front-End
Front-end dev links posted daily, emailed weekly. We also offer @cssbasics.fridayfrontend.com for beginners! Curated by @spaceninja.com
- #CSS snippets: "I’ve been thinking about the kind of CSS I write by default when I start a new project… I’m not talking about a CSS reset. I’m talking about tiny little enhancements just one level up from those user-agent styles." adactio.com/journal/21896
- shape(): A New Powerful Drawing Syntax in #CSS: "The shape() function joins friends like polygon(), circle(), rect(), inset(), and a handful of others. These functions are used as values for a handful of things in CSS, including clip-path." frontendmasters.com/blog/shape-a...
- Celebrating with The Perfect Toast: "In which Lloydi tries to come up with an approach to toasts (and not-toasts) to satisfy various annoyances and WCAG failures with this notification pattern." #a11y www.tpgi.com/celebrating-...
- Today's lunch video is "This custom property trick solves a common #CSS problem" - "Having to worry about browser support stinks, but thanks to a simple custom property trick, there’s a really easy way to create fallbacks for older browsers." www.youtube.com/watch?v=Stxz...
- Beware of Vibe Accessibility: "Vibe Coding is here and it’s amazing. It started a new era where it seems that make your own software is now often a better choice compared to buying it. But – please beware." #a11y cerovac.com/a11y/2025/04...
- CSS shape() Commands: "The #CSS shape() function recently gained support in both Chromium and WebKit browsers. It's a way of drawing complex shapes when clipping elements with the clip-path property." css-tricks.com/css-shape-co...
- Use #CSS reading-flow for logical sequential focus navigation: "Using layout methods such as grid and flex, it's very easy to create a situation where some users can encounter unexpected jumping around as they navigate around a page." developer.chrome.com/blog/reading...
- Easier layout with margin-trim: "It lets you tell a container to trim the margins off its children — any margins that push up against the container. In one fell swoop, all of the margin space between the children and the container is eliminated." #CSS webkit.org/blog/16854/m...
- Anchor Positioning Just Don't Care About Source Order: "The fact that anchor positioning eschews HTML source order is so #CSS-y because it's another separation of concerns between content and presentation." css-tricks.com/anchor-posit...
- Today's lunch video is "How to set max-columns using auto-fit or auto-fill" - "It takes a little work, but we can relatively easily take control of #CSS Grid’s auto-fit (or auto-fill) by using a `calc()` to help set an upper limit on how many columns it creates." www.youtube.com/watch?v=CHUL...
- Polishing your typography with #CSS line height units: "Learn how to use line-height units when setting paragraph margins — creating vertical rhythm in your text." webkit.org/blog/16831/l...
- Quick and Dirty Colour Palettes using CSS color-mix(): "Create tints, shades, and opacity variants for your projects. From simple setups to advanced techniques, we explore how to enhance your design system and streamline theming with modern #CSS tools." www.alwaystwisted.com/articles/qui...
- The Lost #CSS Tricks of Cohost: "In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal." css-tricks.com/the-lost-css...
- Rounded triangular boxes in #CSS/#SVG: "I had to build a lot of rounded rectangular & triangular shapes, and got quite good and understanding the pro’s and con’s of each approach. Depending on your use-case, there’s a few possible options available to you." www.trysmudford.com/blog/rounded...
- Time Travel with #JavaScript: "OK, it might not be 'Doc Brown' levels of time travel. But it's a powerful animation trick that feels like magic when the opportunity arises to use it. We're gonna build a 3D split flap display." craftofui.substack.com/p/time-trave...
- Today's lunch video is "New #CSS features to know for 2025" - "I'm going to look at the newest CSS features that are on their way to browsers, as well as look at features that are hitting Baseline Newly Available and Baseline Widely Supported." www.youtube.com/watch?v=jSCg...
- The #CSS shape() function: "Using `path()` in `clip-path` can’t be responsive; you can’t write CSS rules so that the path adapts to the size of the element. This is where the new `shape()` function comes in." www.webkit.org/blog/16794/t...
- What Does It Really Mean For A Site To Be Keyboard Navigable: "Prioritizing keyboard navigation prioritizes the user experience for a diverse audience, extending your reach while simultaneously fostering a more inclusive web environment." #a11y www.smashingmagazine.com/2025/04/what...
- 14 web #performance tips for 2025: "I'm a web performance engineer, and I see a lot of common mistakes across the board when web developers and website owners try to understand and fix web performance, or 'Core Web Vitals' in popular parlance." sia.codes/posts/web-pe...
- Designing in the Browser: Five Tips for Beginners: "If you’re a designer who’d like to give in-browser mockups a try in your own work, this article could be your starting point." cloudfour.com/thinks/desig...
- The Post-Developer Era: "When OpenAI released GPT-4, the consensus was that front-end dev jobs would be totally eliminated. I thought it was worth revisiting some of those early predictions, and seeing if we can glean any insights about where things are headed." www.joshwcomeau.com/blog/the-pos...
- Modern #CSS Theming | Light Mode / Dark Mode and More! "In this video CJ shows some modern CSS features you can use to create a dark / light theme. He shows how to create a CSS only theme switcher and also shows how to save a users theme preference to localStorage." www.youtube.com/watch?v=F1s8...
- CSS Custom Properties vs. Sass Variables: A Pragmatic Guide: "When to use #CSS custom properties vs Sass variables in design systems: runtime theming vs compile-time constants, dynamic flexibility vs immutable foundations." www.alwaystwisted.com/articles/css...
- Cover Flow with Modern #CSS: Scroll-Driven Animations in Action: "Cover Flow let users flip through items as if browsing a tangible collection. Today, we can recreate this effect using only HTML and CSS, thanks to advancements like scroll-driven animations." addyosmani.com/blog/coverfl...
- Item Flow: "Notes on the proposed Item Flow system for grid, flexbox, and masonry." #CSS ishadeed.com/article/item...
- Default styles for `h1` elements are changing: "This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages." #CSS developer.mozilla.org/en-US/blog/h...
- Better typography with text-wrap pretty: "Let’s take a look at what the WebKit version of `pretty` does — it’s probably a lot more than you expect. Then, we’ll compare it to `balance` and the other `text-wrap` values to better understand when to use which one." #CSS webkit.org/blog/16547/b...
- Top 5 #CSS Navigation Menu Mistakes: "Improve the UI of your navigation with a few lines of CSS. You’ll learn how to create a delayed closing effect for the dropdown menus with transition-behavior, how to utilize `:has()` to simplify your HTML, and more."
- The WebAIM Million - The 2025 report on the accessibility of the top 1,000,000 home pages: "A primary concern is the significant increase in home page accessibility issues. Similarly, the trend of JS frameworks corresponding with higher numbers of errors continues." #a11y
- Minimal #CSS-only blurry image placeholders: "Here’s a CSS technique that produces blurry image placeholders (LQIPs) without cluttering up your markup — Only a single custom property needed!"
- Et tu, Grammarly? "Basically the #CSS variable `--rem` is now 'considered harmful' because Grammarly are bad web citizens. They could generate a random variable name. They could also not inject their code into every web page ever, unless the extension is actually used."
- First Look at The Modern attr(): "Modern attr() provide us with a powerful way write #CSS based on data attributes. At the time of writing, it’s Chrome only and I wish more browsers will follow soon."
- Item Flow, Part 1: A new unified concept for #CSS layout: "Now, a third path forward is emerging that merges ideas from the competing masonry proposals with a completely-new idea to create a unified system of Item Flow properties."
- Bonus content this week! A surprising number of good opinion pieces caught my attention this week, and I decided they were worth sharing beyond the normal five links. Enjoy!
- Today's lunch video is "Responsive Bento Grid #CSS Tutorial" - "Bento grids are all over the place these days, so when I saw the challenge by Frontend Mentor that recently came out, I said this is a perfect opportunity to dive in and explore creating Bento grids."
- Using #CSS Variables Correctly: "In most cases, I consider it code smell if a media query swaps one variable for another. Rather than swapping variables it's better to define one variable, set its initial value and change it with a selector or media query."
- The bare minimum you need to enable View Transitions on your website: "You can achieve a basic view transition with just a few lines of #CSS and an HTML meta tag. These are progressive enhancements that won’t break in browsers that don’t support the feature."
- Combining Cutting-Edge #CSS in a Course Navigation Component: "Having been tasked with creating a UI component for navigating the content of an online course, Daniel found himself neck-deep in a pool of new CSS features that he wound up using on the project."
- Support Logical Shorthands in #CSS: "Many people asked the CSS Working Group about adding a size shorthand to set the ‘logical’ inline-size and block-size properties. But ‘logical shorthands’ have been stalled in the working group for years. Can we get them unstuck?"
- Layered Text Headers: "Being able to control the `paint-order` in #CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability."
- Today's lunch video is "Simple Accessibility Wins" - "Accessibility can be a deep topic, but there is a lot of low-hanging fruit that so many people get wrong when there really is no excuse." #a11y
- Introducing `command` and `commandfor` - "Buttons can now perform actions on other elements declaratively. The browser handles the logic and accessibility for you. There's no need to manage `aria-expanded` or add any additional #JavaScript."
- In Defence of Fluid Typography: "This is a response to Miriam Suzanne’s excellent post on Reimagining Fluid Typography. She poses lots of really interesting questions, some of which I disagree with, but most of all they got me thinking… and writing." #CSS
- A Deep Dive into the Inline Background Overlap Problem: "`box-decoration-break: clone;` in #CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated."
- Self Gap: "Thinking of a way to have a custom gap between some flex or grid items. Have you ever removed a flexbox from a container or wrapped some elements in a new container just to have more control over the spacing between the items? You are not alone." #CSS
- Cowardly Defaults and Courageous Overrides with Modern #CSS: "Let’s make a more useful utility class without giving up any versatility."
