Always such a relief to see other developers, especially those as smart as Kevin Powell, trip and stumble through stuff just like I do! :-) In this “Can I Clone it?” challenge, he tries to recreate a 3D Grid effect. The big take-aways, for me, aside from a ton of good grid and Emmet tips & tricks throughout, are:

• Using margin-block instead of margin-top, margin-bottom, margin-right and margin-left, to better support writing-mode, direction, and text-orientation flexbilities
• undefined custom property with fallback:

  /* At this point, `--gap` is not yet defined, so the fallback would be used */
  .grid {
      gap: var(--gap, 1rem);
  }
  ...
  /* Later, when you want something different than the fallback, define `--gap` */
  .large-gap {
      --gap: 3rem;
  }
  

• The use of Grid Inspector and temp background-colors for debugging,
• The “Ah-Ha!” moment for align-self: start (which later becomes align-self: center)… those are always fun…
• Lots and lots of hsl (I really need to get into this…)
• Starting to convert the grid into 3D
• Using focus-visible instead of focus for better accessibility.

Thanks for the insight, Kevin!

Speaking of grid, finally, we can animate to height: auto using CSS only! Unfortunately, it is also currently only possible in Firefox… But fortunately, Chrome has a bug filed, and you can help nudge it!

Temani Afif shares several methods for reducing @media queries into just plain CSS. Again, nothing wrong with @media queries, let’s just remember there are options, and the less we write, the better!

A new CSS reset? Yes, and Josh W Comeau‘s explanation makes total sense!

In a previous post I linked to Hilman Ramadhan showing how to use an HTML form to generate a pull request; here’s how to do it using GitHub issue forms!

George Francis takes us into the world of CSS art, using JS, with The CSS Paint API. Feels odd to me to think about “drawing” using JS… they seem so at odds with one another…

But speaking of art-in-the-browser, not sure how many are working with interactive canvas projects, but if you are, this Chrome add-on seems useful!

So, there is clearly a slight slant to this article, but Josh Collinsworth does a nice write-up comparing Svelte with React and Vue.

Now for a slight rant on i18n…

• Eli Schütze Ramírez encourages us all to Think globally, act locally with i18n on the web. A great person for this topic, and right from the start really brings to the forefront how important a topic this is!
  One of the more compelling graphics from Eli’s slideshow:
  

  

  A really compelling quote:

  Internationalization is part of accessibility

  Though my favorite quote would be:

  Always let the user choose their language

  I can NOT harp on that one enough, I HATE when websites automatically redirect me to another language!

  Also, Intl… so powerful! But sadly, costly to use on-the-fly…

  new Intl.NumberFormat('de-DE', 
      { style: 'currency', 
        currency: 'EUR' })
      .format(123456.789)
  

• In addition to all the great resources Eli referenced, Google Developers International webpage has a bunch more!
• Continuing with some of Eli’s suggestions, Alaa Abd El-Rahim shares how to Control Layout in a Multi-Directional Website, including very liberal use of CSS custom properties, the :lang() pseudo-class, CSS Logical Properties and so much more!
• And Chris Coyier shares an method to tell processors to ignore certain CSS when performing ltr/rtl flips

And while we’re talking about inclusion on the web, a11y should always be considered:

• Jon C Barstow shares a few tips for making content dyslexia-friendly
• James Edwards discusses the non-standard and commonly-misused role="text", why it has been used, and why it shouldn’t be
• Chris Coyier shares numerous accessibility articles for your reading pleasure!
• For anyone still needing help convincing business that accessibility matters, here are a number of a11y myths debunked!
• Abbey Perini takes a deep dive into her own blog’s accessibility. Now that’s a brave dev…

And finally, from Lea Verou comes what could probably be more-or-less all of our daily productivity journals…

Happy reading,
Atg

Top⇪