Front-end education for the real world. Since 2018.





  1. Line heights in CSS work better with ratios

    CSS

  2. A CLS punishment for progressive enhancement?

    I’ve stumbled across an issue with Lighthouse where I get a bad performance score for a progressive enhanced burger menu pattern.

    General

  3. Learn Eleventy From Scratch is now open source

    General

  4. Define delay for each property in the transition shorthand

    You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes.

    CSS

  5. Prevent squishy elements with flex none

    You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.

    CSS

  6. Build a fancy hover animation

    Learn how to use the power of CSS to take any collection of images and make them blend well together with a fancy interactive state.

    CSS

  7. Container Queries are actually coming

    After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.

    CSS

  8. Use transparent borders and outlines to assist with high contrast mode

    It’s tempting to use a sharp box shadow for focus styles to both remove the default focus ring and to get around sharp outline corners. With this method, you can create problems for Windows High Contrast users, so this quick tip will help you get the best of both worlds.

    CSS

  9. Disable client-side React with Next JS

    Frameworks like Next JS output a lot of heavy-duty client side JavaScript, so this quick tip stops that to have a huge positive impact on performance.

    React

  10. Fluid typography with CSS clamp

    Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.

    CSS