Explore My Notes

Rises and falls of the IndieWeb | Pablo Meier

An interesting viewpoint on the IndieWeb movement that gels with my worries about is this going anywhere? Is it all just a lot of work for nothing?

Like hobbyists with ham radios, it won't go away entirely (thank God), but… it'll only be populated by the kind of people who hang out on ham radios.
On another note, I'm not sure federation is the answer. It's better than a private, unprofitable centralized company for sure, but could we build truly decentralized systems?

The inaccessible rail | Atlas Obscura

I've become more than a little besotted with the islands of Tristan da Cunha, an incredibly remote British Territory about halfway between South Africa and Argentina. Whilst the main island of Tristan is interesting enough, with a small population and almost no outside contact (it's served by a single, defenceless "harbour" that makes it impossible to land for about 80% of the year), it's the even smaller sister islands that have captivated me, none more so than the wonderfully named Inaccessible Island, which is somehow even more impossible to reach.

Why? Beyond the obvious appeal of a culture so distant (and yet still, technically, governed by my own government, albeit with an almost complete level of autonomy), the islands are a wildlife haven for a number of highly endangered and endemic birds (as well as some unfortunately introduced, super-sized rats and mice that threaten the native wildlife with extinction). There's the Tristan Thrush and the Tristan Albatross, as well as the Gough Moorhen and Gough Bunting on the "nearby" (245 miles) Gough Island. Spectacled and Atlantic petrels use the islands as their only breeding grounds, as do countless other bird species including the critically endangered Northern Rockhopper Penguin. But above all others, it is the Impossible Rail that fascinates me, hence my desire to go to its namesake island.

The rail is a distant relative of South American rails and is the smallest flightless bird alive, filling the niche of rodents on the one island that they never reached. It doesn't appear to have ever existed on the other islands in the archipelago, instead evolving and thriving on Inaccessible alone, where it scurries around the undergrowth. I think it's brilliant.

It also used to have a distinct genus (genetic studies have since seen this subsumed) of Atlantisia, a tribute to the legend of Atlantis. Even cooler.

📆 23 Jun 2020  | 🔗

  • People & Places
  • Natural World
  • birds
  • Inaccessible Island
  • Tristan da Cunha
  • bucket list
  • travel
  • Atlantic
  • endemic
  • rail
  • flightless
  • penguin
  • endangered
  • conservation 

Always bet on HTML | Chris Ferdinandi

But if I were going to bet on a web technology, it’s HTML. Always bet on HTML.

In brief: HTML is resilient, feature-rich, hyper performant, and scalable.

Related tweet text from Zach Leatherman:

Which has a better First Meaningful Paint time?

  1. a raw 8.5MB HTML file with the full text of every single one of my 27,506 tweets
  2. a client rendered React site with exactly one tweet on it

(Spoiler: @____lighthouse reports 8.5MB of HTML wins by about 200ms)

📆 23 Jun 2020  | 🔗

  • HTML & CSS
  • Zach Leatherman
  • first meaningful paint
  • HTML
  • web performance 

Who Goes Nazi? | Harper's Magazine

What an astounding article from Harper's archives. Written in 1941 by Dorothy Thompson, the article is an early dissection of the Nazi regime but, more importantly, of the fact that nationalist fascism and state-level politics driven by "othering" can (and will) happen anywhere that it is allowed to. It's beautifully written and incredibly pertinent. From the suggestion that those who are "too young" to remember the Great War are those most willing to take part or most easily blinded to the issues that Nazism presents, to the idea that simply plying people with healthiness and education without equally administering to "the soul" (i.e. morals and ethics) leads to a naive and childish world view.

Nazism has nothing to do with race and nationality. It appeals to a certain type of mind.

The bulk of the piece is a thought experiment around a dinner party in America. The characters are an amazing assortment of people, each immediately recognisable as both a stereotype and also eerily similar to someone you know. Not one of them is perfectly encapsulated and what Dorothy does so well is to split out each trope into the sinister and the pleasant, whilst showing that even those who would never "go Nazi" may have less-than-ideal characteristics, and that's kind of the point.

The rich are picked apart into those who would "defend America" out of a kind of racist, American-elitism; those that have come from generations of elite and simply can't comprehend a system where their status is questioned; those who have fought for their position from poverty and ultimately hate both themselves and the privileges of their peers, who would turn to Nazism as a way to get even; and those who are simply rich through good fortune and knowing when to bend a knee, who would chase power. She says of the third:

But Mr. C is not a born Nazi. He is the product of a democracy hypocritically preaching social equality and practicing a carelessly brutal snobbery... He would laugh to see heads roll.

Most sinisterly is the fourth rich man, the "spoiled son of a doting mother" who has always had his way, so spends life pushing the boundaries to see if they truly exist. He is considered one of the two "only born Nazi in the room". The other is a trade unionist or labour lawyer, someone who has made a living representing the working man, but who ultimately is a borderline eugenicist and secret Antisemite; someone who believes in the "strong leading the weak".

Of the women, she speaks of "Mrs E" who is so cowed by her husband as to believe herself subservient, yet so ignored that she would leap at the ideal of Nazism. There's more than a little of the "Ladys for Trump" brigade about her:

She will titillate with pleased excitement to the first popular hero who proclaims the basic subordination of women.

And on it goes. She looks at the people who are working at the party and how, even here, there are tiers of snobbery and elitism; the different Jewish communities and how some are driven by fear or internalisation of their own othering (or likely both) to renounce themselves and side with their destroyers, whilst others can see the reality and know there is nothing they can do

In the middle is the young German, a perfect Aryan figure, eyed with caution by everyone there. He is the least Nazi in the room, because he has seen the ideology with his own eyes. He has educated himself on American politics, Greek philosophy, and utterly believes in democracy. His friends all "went Nazi" and he now spends his nights helping build plane parts to ensure that they never make it across the Atlantic.

The people in the room think he is not an American, but he is more American than almost any of them. He has discovered America and his spirit is the spirit of the pioneers.

The overall skewering of society still feels incredibly current, and it's a brilliant piece to read. Her conclusion may be a little black and white to me, but it's still a neat summation:

Kind, good, happy, gentlemanly, secure people never go Nazi... But the frustrated and humiliated intellectual, the rich and scared speculator, the spoiled son, the labor
tyrant, the fellow who has achieved success by smelling out the wind of success—they would all go Nazi in a crisis. Those who haven’t anything in them to tell them what they like and what they don’t-whether it is breeding, or happiness, or wisdom, or a code, however old-fashioned or however modern, go Nazi.

📆 19 Jun 2020  | 🔗

  • Anthropocenic View
  • Nazi
  • history
  • psychology
  • newspaper
  • human behaviour
  • dinner party
  • antisemitism
  • Germany
  • America
  • thought experiment 

What happened to the webmaster | Jay Hoffmann

A wonderful article about the early web, and how it evolved from a medium where one person could truly own an entire site into the behemoth that takes teams of people to wrangle that we know today. It also includes some great insights into the dot-com bubble, Flash, AWS (started in 2002!), Dreamweaver and more.

Tim Berners-Lee has gone on record and said that if not for that search box, and the SLAC website, the web may never have reached the critical mass it needed to break out.

The SLAC website allowed access to the SLAC database. It was a simple retrieval tool, but it made access to a prominent chuck of data universal, causing more academics to download a web browser just to access it. It also saved librarians (and primarly, Louise Addis, chief keeper of the SLAC database) a huge amount of time. Addis became their webmaster: she built the site (or at least parts of it) and curated the content. She was the go-to person if anything went wrong or anyone had questions, hence a webmaster (same root as postmaster).

Webmasters were generalists. Think general contractor or possible even full-stack developer. Able to do bits of most things and know where to turn for more specialised knowledge or help. Over time, that just simply became too little, and the role disappeared.

The website was no longer an extension of a business. It was the business.

The ransomware superhero of Normal, Illinois | ProPublica

The story of Michael Gillespie, a brilliant (yet modest) programmer who has become one of the world's leading ransomware crackers. He works for free, sometimes alone and sometimes with others in the security world, to create decryptors that he releases via his site ID Ransomware, which has been awarded by the FBI for its services. The site allows users to upload encrypted files, scans them, and provides a decryptor if one exists. If it doesn't, it alerts Gillespie and his friends that there is a new strain to decode. He also lets the FBI know the IP addresses of those using the site, helping them better track ransomware outbreaks and cut them off at the source.

The React cheatsheet for 2020 | freeCodeCamp

A very hand overview of the core concepts in React, from JSX to fragments to hooks. Includes quick reference to the core hooks and how/when to use them e.g. useState, useContext, useMemo etc.

📆 16 Jun 2020  | 🔗

  • JavaScript
  • React
  • cheat sheet
  • guide
  • React hook
  • useContext
  • state management
  • JSX
  • fragments 

Var, let, and const, what's the difference | freeCodeCamp

var is globally scoped and hoisted, which can lead to unintended side effects. let is block-scoped and can never be redeclared within that scope – much harder to break, but need to be careful about passing it to where it's needed and aware that it is still hoisted, albeit with no value (not even null). const works similarly to let, but you cannot update the value (though you can update internal values).

📆 16 Jun 2020  | 🔗

  • JavaScript
  • const
  • let
  • var
  • variables
  • JavaScript
  • scope 

Images good to the last byte | Evil Martians

An exhaustive guide to image optimisation, compression, formats, and quality on the web.

Quality can be boiled down into the following traits: sharpness, colour accuracy, and rendering artefacts/pixelation. But the quality needed is determined on the context. If the image is the main focal point, quality should be kept high; if it's a background or secondary feature, dial up the optimisations. If the image needs to by particularly dynamic (animation, scalable, etc.) then vector > raster.

The human eye/brain perceives variation in luminance and contrast far more than colour variation. Different browsers use different image rendering engines. CSS pixel values are physically larger/smaller depending on screen resolution and size. For example, the same "size" image (1000px wide) on a Retina display will actually use 2000 pixels in width, meaning every single "px" is equal to four screen pixels. That means your image will be scaled-up, potentially changing quality. The article contains an excellent explanation of how browsers upscale images.

That's why SVG is so powerful. It scales perfectly because it's just math. The absolute values of each pixel are drawn for the render context, not the other way around. But that increased data means SVG gets large. More complex images are huge. Compressors like svgo are massively useful for counteracting that. Article contains a list of raster compressors and automation tools as well.

In general, PNG files are larger than JPEGs, but JPEGs can't do transparency. PNGs often have fewer artefacts so render text more crisply. WebP is as sharp as PNG, but smaller than both previous file types, and can be compressed much further than JPEG without obvious loss of quality. It's still not fully supported, though, and can't be saved to desktop (though that could also be a security benefit). Weirdly, single-frame AVI video files are often the best for quality/compression if you can ignore tenuous browser support.

GIFs are terrible, APNG is much better and animated WebP has some advantages, but again video > animated image in all cases. Both MP4 and WebM are more efficient.

📆 16 Jun 2020  | 🔗

  • Frontend
  • SVG
  • web performance
  • images
  • contrast
  • upscale
  • vector
  • raster
  • compression
  • optimise
  • PNG
  • JPEG
  • WebP
  • video 

Colour theme switcher | Max Böck

Max has a pretty brilliant colour theme switcher on his website. I agree with him that "dark mode" is only the tip of the iceberg and with CSS variables we can now theme sites very easily. There are also some great easter eggs in here. It's the kind of thing which leaves you wondering how you didn't come up with it first.

Five theme options, each named after a Mario Kart level, with text reading "fact: all good design is derivative of Mario Kart".
Koopa Beach is my favourite, both as a theme and as a track 🐢

Plus, Max's site is just a pleasure to use/read. Some great ideas on display throughout.

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.