A fascinating Twitter thread detailing the 2020 US elections in the style that Western journalists report on African political stories. Really interesting to see how much the language used changes the picture that the text conveys, even with the occasional humorous bit thrown in; also slightly terrifying to see just how screwed up the US is when viewed through this lens. Far too long to save the entire thing here, but I wanted to grab a few (dozen) of the better tweets. ThreadReader link for posterity as well.

Polls are set to open in 48 hours across the US as the authoritarian regime of Donald Trump attempts to consolidate its hold over the troubled, oil-rich, nuclear-armed, north American nation. Analysts are sceptical the election will end months of political violence.

Viral video of barricades being erected around the presidential palace -known locally as the White House- in the US capital, Washington DC, has raised tensions as rumors spread that incumbent despot, Donald Trump, will not give up power if he loses tomorrow's election.

Report by African experts on US politics calls judicial independence the "weak link" in the covid-blighted nation's democracy, warning of the potential for violence if judges hand-picked by the aging autocrat, Donald Trump, determine the winner of tomorrow's election.

Aid agencies launch "Adopt-An-American" campaign which lets people virtually adopt American kids for a small donation. A website will allow donors to track children's progress, visit with US families and, as a bonus, tour US homes for an authentic American experience.

👆 This has always felt like an immensly dehumanising approach but it's still super weird to see it in this context.

Analysts warn that the fear and desperation created by the deepening US humanitarian crisis, coupled with one of the most tribalized election campaigns in its history, may lift the lid off dangerous ancient ethnic hatreds and grievances that have festered for centuries.

Tribal violence rears its ugly head in strife-torn US as clashes break out between supporters of populist dictator Donald Trump and those of opposition leader, Joe Biden, waving Black Lives Matter flags outside the fortified Green Zone in the capital, Washington DC.

Analysts warn that armed rightwing paramilitary groups, which largely support the autocrat, Donald Trump, may take advantage of his declaration of victory and allegations of vote rigging to expand their activities in the US, one of the world's top 10 banana exporters.

I get the joke here about banana republics, but also the off-hand "factoid about the country we all care about for a week or so" is so on point it's brilliant 😂

Despised by many, the Trumps have monopolized government appointments, corruptly using them to build a global business empire and enrich their friends and associates, many of whom are known criminals, while ignoring the deaths of hundreds of thousands of Americans.

In chilling scenes reminiscent of the infamous 2011 "rivers of blood" speech by Saif al-Islam Gaddafi, son of then embattled Libyan dictator, Muammar Gaddafi, Donald Trump Jr, son of embattled US dictator, Donald Trump, has vowed "total war" to keep his father in power.

Having systematically demolished public confidence in the independence and integrity of all other arms of government, US dictator Donald Trump now sets his sights on the country's courts where he will challenge his electoral loss before his hand-picked judges.

The former UK colony, with breathtaking natural beauty and richly endowed with natural resources and friendly people, but also riven by deep ethnic divisions, has suffered a series of political, humanitarian and economic crises which have killed nearly 250,000 people.

While many African observers are aghast at the conduct of the US presidential election, others note that by American standards, it was a relatively good election, in a country where gerrymandering and voter suppression are not considered reasons to invalidate elections.

👏👏👏

I "missed" the meetup (it was 2am local time 😂) but glad to catch up, a really nice introduction to 11ty/Eleventy as a build tool. The more I hear about the flexibility that 11ty gives you in terms of templating and extensibility (and the more I get fed up with JS package size coming out of some of my current solutions) the more I want to dive in.

A very clever (and well explained) method for helping users complete forms. Particularly with modern pop-up forms, I'd say at least once a month I'm part way through typing something and accidentally shift my mouse somewhere that causes the form to close, losing everything I had written 😡 Jeremy's trick of storing the current form (well, textarea, but it should be easy to expand) content in localStorage is a great enhancement that would solve those frustrations. Here's the gist (see what I need 😄):

1. Use an eventListener to track when a user starts typing into a form/textarea;
2. When that fires, set off a new eventListener to track the browser's unload event using beforeUnload (Jeremy explains why that method well);
3. If that second listener fires, save the content of the form into localStorage against a key for the page URL/slug (you can use JSON to store multiple values in one key/value pair);
4. If the form is submitted without issue or firing the eventListener, clear the localStorage key;
   
5. Now, with that setup, you can add some initial logic that checks localStorage on page load for a key that matches the current URL and, if found, parse the JSON and populate the form.

Et voila! Neat 👍

We like what we choose. Not the other way around. [...] If you had grown up somewhere else or some time else, there’s little doubt that you’d prefer something else. The things we think we need are simply the things we’re used to.

Man, what a fascinating thread on the bizarre reasons that browsers will parse words into colours. To sum it up:

• Any word will be parsed into a hex code in order for things like color: red to work with backwards compatibility in CSS;
• The way that conversion works is to change any non-hexadecimal letter into a 0, i.e. "chuck norris" becomes "C00C0 000000";
• But that leaves codes that are too long for the hex code format, so the next step is to shrink the string down to the maximum six characters;
• However, rather than just shortening to six characters, first the parser increases the number of characters until the total is divisible by three, then it splits the string into thirds, then concatenates each third into two characters and stitches it all back together again 🤯
  • Why tho? 🤷‍♂️
• So you end up in a situation where "chuck norris" becomes a vivid red, whilst "chuck norr" is a slightly ill shade of yellow...
  
• And all of this matters because of hidden text in email spam (yeah, wow); if colours parse out differently, then spam is harder to identify, so the whole weird algorithm is an offical W3C standard. Brilliant 😂
  

A humorous but useful tool that strips out all the mess that things like Styled Components and React make out of HTML and lets you properly view the source of a page. (and yeah, I use those same tools and processes, and yeah it still irks me that I'm part of the problem😁)

💩 ➡ 🥇

Whilst accessibility means you largely want to steer clear of autofocus on web forms, sometimes it can be beneficial. In HTML, we can now reach for the handy autofocus attribute, but as I recently learnt that doesn't always do what you expect when dealing with a shadow DOM (in this case, React's equivalent). Daniel's article was by far the best at both describing the issue and offering some solutions, though even here it only works most of the time (Firefox does something which I feel is logical but unfortunately not consistent with either the W3C spec or what most people would want to happen).

So here are the (confusingly more than three) techniques:

• The autofocus attribute (😉) for input elements that are always present (elements loaded later have some weird cross-browser differences);
• The focus() DOM API that allows you to select an element using JavaScript and force focus on it i.e. element.focus(), which works almost always but can be tricky to target correctly (and reliant on client-side JavaScript);
  • FYI remember that the opposite of focus() is blur(), and both can be handily combo'd with select() for some even better UX!
    
• The React autoFocus prop, which effectively mimics the HTML autofocus attribute but only triggers it when a component mounts, helping with the cross-browser issues but meaning that if you mount before visually showing an element it can steal focus incorrectly;
• The useRef hook, which is effectively just using the focus() API within React's own life cycle;
• The useCallback hook, which does the same thing as useRef only with more control. This appears to be the most universal option in React right now.
  

I ran into a bug recently where some SVGs on a website were seemingly ignoring a fill request. A quick check in dev tools showed that the CSS was being applied so... what gives? Turns out Firefox has implemented an overly literal interpretation of part of the (I believe) SVG spec, causing it to add additional child <svg> elements in certain circumstances (which are hidden from dev tools by virtue of reasons). Matt does a better job of explaining the why, but the fix is to do something like this:

.class-name,
.class-name use > svg {
   fill: #FFFFFF;
}

Or, based on our existing patches when I looked that already including overrides for g > svg and some other variations, perhaps simply:

.class-name,
svg.class-name * {
   fill: #FFFFFF;
}

A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The tl;dr:

• The width and height elements are based on the parent's dimensions;
• So are positioning attributes such as top and right;
• Both margin and padding attributes inherit from the parent, but only use the width value (even for things like margin-top);
• The transform property uses the element's dimensions.
  

Darrell is one of those authors who really considers the world-building side of their work, so I've long found their blog fascinating. Recently, they've released a series of posts on the background of individual "kindreds" from their world of Saynim (kindred here replacing the problematic use of "race" across a lot of fantasy works), each of which is worth reading, but combined form a series of ideas, mythological tidbits, and even anthropological theories that I wanted to capture. I'll create a list of relevant links at the end. I've skipped taking notes on humans, though I do really like Darrell's take on them as a minority underclass renowned for "outside the box" thinking.

• I had always believed that "human-like" elves were very much a Tolkien invention, but apparently the earliest references in Germanic folklore have them as human-sized, fair creatures that were more often allies than enemies of humans. Also, in Old English, the word for "elf" was a generic used for classical myths of nymphs, fauns, satyrs etc. so intelligent, humanoid nature spirits.
• Cherokee folklore contains the Nunnehi, elf-like beings that live high in the mountains, with human features and enhanced beauty, with a love of dancing. Considered "defenders of the people" and actually tied to accounts of "vanishing" peoples/towns during European invasion, being saved from the invaders and taken to a realm of magic (there are parallels here with the first folk of Irish myth).
• Interesting to see that "elves" in Western folklore have slipped from beautiful allies to monstrous enemies by the time of Beowulf, and then further still to the pixie-like fairies of mischief and comedy in the 1600s. Why the change in status? Christianity is certainly partially to blame (though I find it interesting that elves of more traditional folklore seem almost more akin to angels, and wonder what might have been had their appropriation and explanation gone in that direction instead).
• Not sure I like the link to Neanderthals for dwarves, particularly as Neanderthals were typically pretty tall, but it's certainly a neat idea and I'm also fond of the (totally nuts) theory that fae folklore is vestigial memories of Neanderthal culture and interactions. The inclusion of late erectus for more animalistic species like giants and ogres is a fun concept too.
• I hadn't realised that there is no evidence for Neanderthal-born hybrids (i.e. the mother was Neanderthal), only human-born hybrids. As Darrell points out, that either infers that hybridisation in that format was problematic (infertility or possibly other complications) or (more interestingly) that those hybrids were more commonly raised within Neanderthal society, therefore the lineage was lost with their species' extinction.
• Trolls are apparently very hard to define, being a catch-all term in European folklore for humanoid creatures with supernatural powers and at least some visually distinct difference to humans. I like the idea of them therefore being a highly variable kindred, with variation in horns, fangs, eyes, pigmentation etc., as well as being cunning tricksters.
• I'm aware of the Tuatha Dé Danaan of Irish folklore, but not of the Fomori, who are apparently at least a little trollish (and occasionally intermarry).
• The term "pygmy" originally derives from the Greek for "cubit", or 18 inches; hence Darrell's use of "Ell" to collectively describe the little fae folk (brownies, leprechauns etc.), coming from the Old English ell, a measurement roughly the length of a man's forearm.
• Direct quote on dwarfism: "Biologically, there are two ways a dwarf species can evolve. The first is to shorten the length of pregnancy and infancy. A second path is for the length of pregnancy to stay the same but slow down the growth of the fetus. This second path results in smaller brain size and tooth size."
  
• I'm also a big fan of the use of "goblin" to describe the hybridisation of the various "Neanderthal" subspecies (Ells, Dwarves, Trolls). What a neat world-building fix!

Links

1. Elves
2. Humans
3. Dwarves
4. Trolls
5. Ell Folk
6. Goblins
7. Giants & Ogres
   

It feels good to me, having two sets of rows where the individual rows accordion open to accept content when needed, and collapse to zero height when not, with a “blank” row in between the sets that pushes them apart.

When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a little about using negative row/column indices that I'd not really considered before. Still, I missed this clever trick he's using. By having a set of rows at the top and bottom of the page that may or may not contain content, he creates an "accordion" like layout. If content exists, the row expands to give it space; if it doesn't, the row collapses to nothing. The trick is having one row in-between those groups with a height of 1fr, thereby expanding to fill/fit all the necessary content.

Eric does point out that, in theory, it seems like leaving out that flexible middle row should still work, but he has a niggling suspicion it'll cause issues. Which is funny, because I have the same (unfounded) suspicion 😁 As I was reading down the article, my reaction was initially "you can't do that with rows" and then "aha, that flexi-height row will make it work". I'm just not sure why...

A useful tool for quickly analysing the various combinations of a colour palette and determining which are safe to use from a contrast ratio perspective. I find it particularly useful when used in conjunction with Coolors for quick palette changes.