A follow-up to Andy's previous explanation of his compound grid layout in which they explain their logic behind a 4 + 5 compound grid a bit more. It's neat, but this description is what really caught my eye:

Think of each column as a beat. When you drum the cadence of 12 evenly-sized columns with your fingers, the rhythm is monotonous.

That's a nice way of framing a layout. I'd like to give it a try in reverse one day: think of a drumbeat I like and work out what grid layout is equivalent to the hits and gaps, then see if it could be the foundation to a site. Sounds like fun 🥁

A very clever article (as ever) from Sara on how to ensure the content you create is accessible through RSS feeds and Reader modes (and a host of other applications).

This is something I'm guilty of. There's a kind of magic to automating content through CSS which I find very appealing, but Sara's warning here is something I'll need to keep in mind moving forward:

In order to ensure readers always get a proper reading experience, provide real content in HTML, and leave CSS pseudo-elements for decorational content that is not required for the core reading experience.

They also point out how problematic call-out content can be, and suggest hiding unnecessary content in a couple of ways. The simplest is removing it from the <article> element, which should cater for a number of scenarios (and I wonder if things like Safari's Reader mode deal with <aside> elements correctly?), but if your markup requires it to be kept there's a really clever trick using hidden:

Since the hidden attribute has a very low specificity, you can override it in your CSS using a simple display: block/flex/grid/etc..

In other words, add the hidden attribute to your content block, then have a utility class like hide-reader-mode which sets it to display: block (or just target directly). Users on your site will see it, but if your CSS doesn't load, neither will the content (so also useful if the stylesheet fails to download for some reason).

Sara also points out you can do the inverse, having a utility class like reader-mode-only that shows content only where your CSS doesn't load. So you can still have fancy CSS pseudo-elements or drop caps etc. but RSS feeds will get plain text equivalents. Can be particularly useful for live examples (they point to a styled <hr> example) which can be switched out for images.

Strikes me you could use similar tricks to show messages in RSS feeds that otherwise wouldn't appear. Just a lot of cool ideas going on here!

Cher has written an excellent, concise, and extremely evenly-handed response to the current Tech Twitter™ nonsense. I wanted to save it (alongside Andy's) to refer to next time this happens (because, unfortunately, there will be a next time) 😤

A response to the initial article that acted as a flashpoint (and some useful ideas around TailwindCSS for my own understanding to evolve a bit):

I do think it's important that we frame our critique and support for technology in a way that makes it clear we understand that while it did or did not work for us, or our team, or our project; we know it's for our case and our reasons are reflective of that specificity.

On the inherent bigotry on show (and that ending is just superbly well written):

Sara has had to earn his respect and admiration, as a non-American woman of color, instead of getting it from default in-group bias, and anything other than the admiration he gives her is felt as betrayal.

A man incited bullying onto a Lebanese woman for sharing a critique of a framework he wrote not for the critique itself, but because she didn't give him the admiration he felt he deserved. That's not respect. That's systemic entitlement.

Tech Twitter™ is bickering again and, as ever, Andy's take is the best take: use what works, understand that criticism is not an attack, and realise that what works for you may not work for others.

(Also, best practices are real but are not globally applicable)

(Also also, I need to do better to remember this article and just immediately return to it each time Tech Twitter™ has an opinion)

On best practices:

With this context in mind: when someone says “best practices don’t work”, or similar—without a caveat of “in our particular situation”—then remember: this is likely a statement of naivety and I would strongly recommend dismissing it.

The caveat that should factor into your decisions and arguments/discussion on anything:

Remember, that’s my preference.

I've never understood the appeal of TailwindCSS. I've watched friends and colleagues get amped for it, seen their code, and just felt like it was a meaningless abstraction of the existing technology. Brian does a solid job of delving into why Tailwind can also be a problematic tool that champions bad practices over good ones.

The tl;dr involved is that:

• Tailwind isn't DRY, making maintenance trickier (and bugs more likely); (he claims it's WET, but it's not even that, it's just repetitive);
• It ignores the principle of separation of concerns by stuffing CSS back into HTML;
• Its naming is willfully obtuse and non-semantic, making it harder to read, debug, and maintain (both in language and structure i.e. horizontal code lines rather than vertical code blocks);
• It breaks core CSS functionality, such as grouping (classes), the cascade, combinators (* + *), and media queries;
• It introduces polyfills to recreate some of this functionality, thereby admitting its own model is inflexible and problematic;
• It is a solution in want of a problem;
• Better ideas exist (styled-components, Emotion, Sass);
• And, well, this:
  

Or in his words:

You're basically left with a less readable, more complex version of inline styles, a coding technique that we've been trying to breed out of junior developers for the past decade or so.

He also makes a very valid point about imagining the inverse situation. Let's say CSS works like Tailwind does today and then a CSS 2.0 is announced which gives you the equivalent of modern CSS... that would be a godsend!

If you could go from the limitations of Tailwind to CSS, wouldn't you consider that a quantum leap forward? Expressive syntax! Semantic naming! Style grouping! Selectors and combinators!. It would be like moving from Assembly to C for the first time.

So why is Tailwind the hot new thing? I'm still utterly unsure 🤷‍♂️

I'm late to the "goodbye AMP" party, but Ethan's has been the best take I've read so far (no surprise there). In brief: it's good that AMP is on the way out, but we're stuck with it for some time, and the new Core Web Vitals still have some issues:

I’ll say again: deprioritizing AMP in favor of Core Web Vitals is a very good thing. But it’s worth noting that Google’s taken its proprietary document format, and swapped it out for a proprietary set of performance statistics that has even less external oversight.

Max has done a performance analysis of the new Space Jam website versus the old, classic variation, with a damning conclusion:

So after 25 years of technological progress, after bringing 4.7 billion people in the world online, after we just landed a fifth robot on Mars, visiting the Space Jam website is now 1.3 seconds faster. That seems… underwhelming.

🤦‍♂️

A wonderfully whimsical fantasy art project, Terra Ultima is a collection of natural world mashups by Raoul. There's a book and a Tumblr for more, but I wanted to save a handful of the more inventive creatures. Most are evolutionarily ridiculous chimaeras of real animals, but some (such as the sabertoothed toucan below) are just inventive reimaginings. Both camps are beautifully illustrated!

I love Andy's new design over on Stuff & Nonsense. A large part of that are the cleverly diverse page layouts. Turns out, underneath that perceived diversity is a consistent grid, made by overlaying a 4-column grid and a 5-column grid. Clever!

Overlapping a 4-column grid and 5-column grid results in eight columns with four different widths. This grid has a rhythmic pattern of 6|1|4|3|3|4|1|6...

👆 which (as Andy points out) can be represented easily using fr units in CSS grid:

display: grid;
grid-template-columns: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr;

The latest breach of Google's old "do no evil" motto is here: FLoC. As ever, Jeremy has written a well-reasoned and nuanced take on why it's likely a bad idea, both for the web in general and Google in particular.

There's a lot of interesting points in his article, but I think one of the elements that really stood out is the combination of no-EU rollout and that Google have claimed that FLoC will ultimately be opt-in. The first highlights how the technology is likely a privacy concern in the first place; the second is a way around GDPR but one which I can't imagine many sites would go for. What's the incentive? Unless, of course, Google throws its weight around again *cough* AMP *cough*...

... one part of the business is building a user agent while a different part of the company is working on ways of tracking end users. It’s almost as if one company shouldn’t simultaneously be the market leader in three separate industries: search, advertising, and web browsing.

Now Google’s monopoly in advertising is compromising the integrity of its browser. In both cases, it makes it hard for Chrome devs claiming to have the web’s best interests at heart.

Another excellent tool for checking colour accessibility, but with the added bonus of creating viable palettes for you. These can then be filtered based on various criteria such as minimum WCAG level, background colour, and base hue (green, blue, red, etc.). Very clever 👍

Super useful walkthrough on taking a branch from one repository and publishing it to another repository entirely (great for creating test repos or stripped-down example repos for bug isolation).

The tl;dr is as follows:

git checkout --orphan clean-branch
# this is when you delete all unwanted files, rename package.json, simplify code etc.
git add *
git commit -m "Example repository"
git remote add origin2 https://github.com/org-name/project-title
git push origin2 clean-branch:main

⬆ That will create a new branch without any Git history; commit all files to that branch (so make sure you simplify the repository between these steps 😉); add a new origin to the existing repository (here named origin2 and linked to a dummy GitHub repository, but any name can be used and create the remote repo first); and finally, pushes your stripped-down branch to the main branch of the new repo (again, if you use trunk or anything else, change that here). Simple 👍