Explore My Notes

Code words and language barriers | Seth Godin

Seth has a good point about the barriers that language can create between groups that ultimately share the same goal:
Often, when people with goodwill and shared values end up disagreeing, it’s because they didn’t understand the code words that were being used.

(I often wonder how much the Left's ever-changing vocabulary hurts its ability to work cohesively, for example)

What the heck, z-index? | Josh W. Comeau

The best overview of z-index and stacking contexts that I've come across, plus it keeps getting better as Josh extends the useful tools section 👏👏

Top of the tips is isolation: isolate, a very useful CSS function that I never remember; it effectively resets the stacking context, which means it's particularly useful for component-based UI structures.

Also a worthy shout-out to the CSS Stacking Context Inspector plugin (also available for Chrome). It's already helped me locate a rogue stacking context being created by a global opacity attribute (of all things 😂).

📆 25 May 2021  | 🔗

  • HTML & CSS
  • z index
  • CSS
  • stacking context
  • Firefox
  • plugin
  • isolation 

Layout love and drumming | Stuff & Nonsense

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 🥁

Design for reading | Sara Soueidan

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!

📆 10 May 2021  | 🔗

  • HTML & CSS
  • Inclusion
  • hidden
  • reader mode
  • Safari browser
  • RSS
  • a11y
  • CSS
  • trick
  • utility class
  • hr
  • specificity 

Sexism, racism, toxic positivity, and TailwindCSS | Cher

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.

Frontend hype and dogmatism | Andy Bell

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.

Tailwind adds complexity, does nothing | Brian Boyko

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:
Screenshot from the TV show Rick and Morty, with Rick saying
Are we actually desperate to reinvent inline styles? Original image from Brian's article.

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 🤷‍♂️

Au revoir, mon AMPmour? | Ethan Marcotte

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.

📆 07 May 2021  | 🔗

  • Frontend
  • core web vitals
  • Google
  • AMP
  • web performance 

Space Jam | Max Böck

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.


📆 06 May 2021  | 🔗

  • Frontend
  • Space Jam
  • movie
  • web performance
  • page speed
  • comparison
  • loading 

Terra Ultima | Raoul Deleo

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!

An eerily cute blue dragonfly crossed with an emerald green rabbit, with elegant transparent wings for ears, perched on a reed stem.
Those ears are just remarkable, but so is the fine fur work on the limbs.
A fluffy red panda like animal with six limbs and a short tail climving a log; its back is coloured to resemble the marking on a ladybird beetle, red with black dots.
The cleverly named "lady bear" is an adorable mashup.
A black and white watercolour painting of a toucan, except the bill is chunkier than normal and has two protruding "fangs" that cut up and around the outside.
Whilst most of the creatures of this world are mashups, I found this take on a sabertooth toucan (even with sabres that point upwards, which are normally referred to as tusks) was just a really cool design. Totally impractical, but a neat idea nonetheless.

A compound grid | Stuff & Nonsense

A visual example showing how overlapping the two grids creates a symmetrical but non-uniform column pattern; areas of negative space are still preserved.
Taken straight from Andy's page, which has many more excellent examples. I find the pattern of the gutters particularly interesting.

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;

Get the FLoC out | adactio

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.

Made By Me, But Made Possible By:


Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.