Explore My Notes

The mistakes of CSS | CSS WG

It's fun to see which technical decisions the CSS working group officially consider "mistakes" 😂 I agree with most, though not sure how I feel about the counter-clockwise directional shorthand 🤔 I'd also never considered the cross-language implication of !important meaning the opposite in most languages!

Table layout should be sane.

This is also a small slice of history:

Not quite a mistake, because it was a reasonable default for the 90s,
but it would be more helpful since then if background-repeat defaulted
to no-repeat.

📆 26 Jan 2021  | 🔗

  • HTML & CSS
  • CSS
  • CSS WG
  • mistakes
  • error
  • important
  • tables
  • background 

That's not how 2FA works | Terence Eden

A succinct and to-the-point teardown of why 2FA (two-factor authentication) is beneficial for user verification by businesses, but terrible for preventing things like phishing attacks (because the fake site can simply make the valid requests on your behalf). In other words:

There is almost nothing you can do to authenticate that a site is legitimate.

Though, Terence does give one interesting suggestion: password managers. Already pretty much an industry-standard best practice for account protection, they make a valid point here that it also works as a filter for "approved" URLs. If your password manager only suggests auto-fill based on URL, it works as a sanity check for phishing sites too.

Marching up the wrong tree | Twilight Beasts

“My father was not really keen on this portrayal, because he was already very aware that [hominin] evolution was more likely akin to the branching of a tree rather than a straight, linear march, so he resisted this depiction. The editor won out, however, and the iconic image was born.”

A fascinating quote about Rudolph Zallinger's iconic (and problematic) March of Progress representation of hominin evolution. Once again, it feels like ignoring the experts has caused decades of issues and (slightly ironically, given the infamous title) set back human progress in subtle ways. As the article puts it:

This one decision has created perhaps the biggest, most dangerous,
misunderstanding of evolution that has ever existed. In all its
simplicity, it shows progress. An improvement from what came before. The
idea that animals get better as they evolve is wrong. Every animal and
plant alive today is just as evolved as each other. None is more ‘primitive’. None is ‘simple’. And certainly none are inferior to others.

All that, just to give a scientific book a little more va va voom 🤦‍♂️

Soundfonts | adactio

I love coming across some of the more niche or esoteric uses of the web; the internet's marginalia, if you will. I feel like Jeremy's post very much fits that category, with an excellent overview of the fascinating ABC music-encoding language (I guess language is the right word?) and the MIDI format (where I date myself by not realising this was in any way no longer that relevant 😬). The post mainly focuses on his work converting ABC notation into sound files using the Web Audio API, which includes this absolute gem:

Not only is there a separate short mp3 file for each note in seven
octaves, but if you want the sound of a different instrument, you need
samples for all seven octaves in that instrument. They’re called
soundfonts.

Soundfonts. I love it 😍

Commute calculator | Commute From

A brilliant tool for determining where in London you get to within a certain time from a given location. In other words: if I live at X, where can I commute to within Y minutes ❤

Distributed toxicity and the IndieWeb | Fluffy

There's been a lot of chatter recently about whether social media deplatforming might cause an influx of less-than-ideal individuals to circles like the IndieWeb movement. Fluffy has done a great job of outlining why that doesn't feel like as big of a problem. This (concatenated) bit particularly resonated:

I feel like the threat model for IndieWeb is very different than the threat model of so-called “silo” social media. Silos are built around increasing engagement and spreading popular posts far and wide... self-hosted platforms are different [in] that it’s up to people to seek out and spread the information they want to.

They make great follow up points on the importance of critically evaluating which parts of social media the IndieWeb movement is looking to replicate (and why), what the repercussions could be in terms of reigning in negative behaviour on a decentralised platform, and ends with this great summation:

IndieWeb is an ethos and a set of opt-in protocols, and participating in IndieWeb in general doesn’t mean having to participate in all of it. I feel like that’s already a huge advantage.

England's sleepy Scientology town | BBC

The utterly bizarre tale of East Grinstead, a small town in Sussex that appears to be cosplaying as the fictional town of Twin Peaks. It boasts:

  • The home of L Ron Hubbard, founder of Scientology (now also a retreat and worldwide HQ for said quackery, making it a focal point for cult members like Tom Cruise and John Travolta);
  • Recent UFO sightings from commercial airline pilots using the nearby Gatwick;
  • A branch "stronghold" of the Rosicrucians ("ancient" order of knowledge protectors and general secret society types);
  • An Opus Dei church (the group infamously brought to the mainstream via The DaVinci Code's self-flagellating monk assassin);
  • The British home of Mormonism;
  • The first Waldorf/Steiner school in Britain;
  • A collection of Waldorf-based biodynamic farms (utilising some of Steiner's weirder teachings);
  • Ashdown Forest, real-world inspiration for the 1000 Acre Wood of Winnie the Pooh (AA Milne lived on the edge of East Grinstead) and literal site of the invention of Pooh Sticks (and the now-named Poohsticks Bridge, no less);
  • The forest also plays a central role in modern Wiccan and druidic folklore, due to it (and the town) being at the convergence point of multiple ley lines and the Greenwich Meridian, as well as containing several excellent-quality quartz outcrops;
  • The site (also in the forest, or nearby, depending on who you talk to) of an occult false-flag propaganda event during WW2 that saw Canadian airmen dress up in black robes and dance around a fire at midnight. "Operation Mistletoe" was designed to trick Nazi "mystics" into believing that the Allies had made an occult breakthrough, with the hope of drawing out spies in the south of England 🤯 (and may have been attended by Ian Fleming of Bond fame);
  • A specific radio mast that was solely used to broadcast fake news and propaganda during WW2;
  • And Queen Victoria Hospital, the site where Sir Archibald McIndoe (a Kiwi surgeon brought to the UK to help the RAF during WW2) pioneered multiple cosmetic surgery and patient-recovery techniques to help burns-victims heal, including some of the first surgical graft procedures for facial reconstruction.

So why so much weird in one place? I particularly like the idea that McIndoe is to thank. His efforts in modernising patient care during WW2 meant that he encouraged those under his care to venture into the town ASAP. In order to help them mentally rebuild, this required the townsfolk to treat them normally, despite quite severe deformities that would have resulted from their injuries. The town agreed and became known as "the town that didn't stare", a civic sensibility that has survived to modern times. Indeed, the town is a favourite of celebrities not just because it's incredibly quaint, but because the people that live there are statistically much less likely to inform paparazzi or hassle someone on the street, making it an extremely tolerant town for people of alternative faiths as wel. I think that's pretty great 😊

📆 13 Jan 2021  | 🔗

  • People & Places
  • Anthropocenic View
  • scientology
  • Mormonism
  • religion
  • Sussex
  • Twin Peaks
  • cults
  • Winnie the Pooh
  • World War II
  • hospital
  • medicine
  • Steiner
  • education
  • folklore
  • occult
  • fake news 

The highest form of knowledge | Bill Bullard

Opinion is really the lowest form of human knowledge. It requires no accountability, no understanding. The highest form of knowledge is empathy, for it requires us to suspend our egos and live in another’s world.

Web waste | Gerry McGovern

A great overview of the state of the modern web from a UX and environmental perspective. Gerry notes the impact of image and videos (and JavaScript) on websites today:

Study after study shows that people absolutely hate slow webpages. In 2018, Google research found that 53% of mobile site visitors left a page that took longer than three seconds to load. A 2015 study by Radware found that “a site that loads in 3 seconds experiences 22% fewer page views, a 50% higher bounce rate, and a 22% fewer conversions than a site that loads in 1 second, while a site that loads in 5 seconds experiences 35% fewer page views, a 105% higher bounce rate, and 38% fewer conversions.”

That is a result of webpages growing from ~100kb to > 4Mb on average in the past ten years, which has a genuine environmental impact:

Consider that if a typical webpage that weighs 4 MB is downloaded 600,000 times, one tree will need to be planted in order to deal with the resulting pollution... If you want to save the planet, use more text [over images]. Think about digital weight.

Processing demands are almost as important as sheer page weight, and here JavaScript (particularly third-party scripts like ad tracking) and animations cause a lot of the issue.

It’s like a type of Trojan Horse. You think you’re accessing one website
or app, but then all these other third parties start accessing you.
According to Trent Walton, the top 50 most visited websites had an
average of 22 third-party websites hanging off them. The New York Times
had 64, while Washington Post had 63. All these third-party websites
create pollution and invade privacy.

Out-of-date information, pointless pages, and poorly optimised code all share significant chunks of the blame too:

By cleaning up its JavaScript code, Wikipedia estimated that they saved
4.3 terabytes a day of data bandwidth for their visitors.

(FWIW, that Wikipedia fact is equivalent to about 700 new trees a year in carbon capture)

Gerry also goes through a useful thought exercise of trying to determine what a page is about based on the images it contains. If you can't even get close, then are those images actually worthwhile?

Digital is greedy for energy and the more it grows the greedier it gets.
We need digital innovation that reduces environmental stress, that
reduces the digital footprint. We need digital designers who think about
the weight of every design decision they make.

Also, very interesting results of some studies looking at the impact of images. In one (advertising pension policies) the ad with an image was deemed less trustworthy by most people; in another (government scheme to increase organ donor registration) the use of images resulted in the least effective combinations across all tested. Pictures don't always improve content, in other words, and sometimes they actively hurt it.

Making persistant build folders in Netlify | Max Böck

Max has put together a quick overview of how to store webmentions in a cache folder so that you don't have to fetch them on each build with Netlify. Super useful and can't help but think this might be incredibly applicable for a lot of static site requirements.

Maximally optimising image loading for the web | Malte Ubl

Malte has put together a brilliant overview of the various techniques that are currently available on the web natively for loading images in the most performant and user-centric ways possible. I'm pretty happy to have heard of most of them, but not all:

  • Using a combination of max-width: 100%; height: auto; with "hard-coded" width and height values e.g. <img height="800" width="1280" src="..." alt="..." /;
  • The content-visibility CSS attribute (though this requires some fancy calc formulae);
  • A new file format – AVIF – which is more efficient than JPEG or WebP in a lot of situations, particularly for use with the <picture> element;
  • Use of the w selector with a srcset attribute (also using the <picture> element);
  • Embedding a hash of the image in the actual image URL (🤯), which can (apparently, though I'll admit this is above my full understanding 😁) also help with cache control;
  • Native lazy loading e.g. <img loading="lazy" ... />;
  • Native async decoding, to make use of more efficient multithreading e.g. <img decoding="async" ... />;
  • Using a "blurry placeholder" (grr shakes fist), though here by applying a background-image set to cover, with optional JS to remove the background once the actual image has loaded (so not as irritating as some more popular, JS-only techniques).

Bean Dad is Twitter's final form | Ryan Broderick

I see Twitter as a sort of necessary evil: a mainstream communication channel that is universally accessible and therefore a generally positive concept on the micro level, that has been abused on the macro level to scary degrees. Ryan has a more, shall we say, negative outlook, but makes some increasingly valid points.

The only difference is that [Twitter's] hopelessly-addicted user base is made up of journalists, politicians, celebrities, and academics. So we’re forced, as a society, to take Twitter’s inane message board drama more seriously than we [normally] would.
But Twitter is a video game and [Bean Dad] became a boss battle for the day...
Community moderation [on Twitter] is so poor that users have resorted to waging daily tribal warfare with each other as a way to keep themselves safe and secure (and entertained).
Twitter’s public engagement metrics — follower counts, retweets, quote tweets, replies, and likes — have gamified on-site behavior to a degree where users can no longer be expected to authentically communicate with each other. Everything is perceived to be for clout, even if it’s not.
[The reality of Bean Dad for Twitter] means that context collapse has gotten so bad and the scale of your trending algorithms are so completely out of whack that a total moron tweeting about beans can create the same level of discussion within your community as the Trump Georgia call. It means that your users are so desperate for your made up internet points that they would consider turning an extremely mundane story about using a can opener into a TWENTY-THREE tweet thread and are also so vicious and insane and bored that they would turn that thread about beans into a national scandal.

📆 05 Jan 2021  | 🔗

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.