Explore My Notes

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.

Colour safe

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 👍

Git push to new repository | Sameer Gurung

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 👍

📆 12 Apr 2021  | 🔗

  • Nuts & Bolts
  • Git
  • GitHub
  • repository
  • testing
  • clone
  • copy
  • history 

Around the Tesla coils | Franzoli Electronics

The Daft Punk track Around the World performed on Tesla coils. Somehow this manages to be even more awesome than the summary, too (I still slightly think it's fake... somehow 😂):

Also, yes, Harder, Better, Faster, Stronger does sound just as great:

📆 06 Apr 2021  | 🔗

  • Musical Notes
  • video
  • Daft Punk
  • tesla coil
  • electro
  • YouTube
  • music
  • instruments 

Floaters | Dust

"RC5-01 this is RC5-01" 😂 There's nothing specifically science fiction about this short, and that's what makes it great. Simple animation, a timeless plot, and excellent voice acting. As io9 put it:

In space, no one can hear you be a complete buffoon

📆 01 Apr 2021  | 🔗

The danger of "just" | Brad Frost

An excellent summary of why providing help with language like "just" or "simply" can be demeaning, rather than helpful:

“Just” makes me feel like an idiot. “Just” presumes I come from a specific background, studied certain courses in university, am fluent in certain technologies, and have read all the right books, articles, and resources. “Just” is a dangerous word.

It also contains this absolute gem of a far-too-relatable quote 😂

Now there’s a damn good chance I’m actually an idiot, but the self-respecting part of me wants to challenge that notion.

Made By Me, But Made Possible By:

CMS:

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.