Explore My Notes

Core web vitals & SEO | Harry Roberts

A solid overview of the impact that Core Web Vitals, PageSpeed, Lighthouse, and other metrics actually play in terms of a website's Google Page Rank.

On the actual relevance of Lighthouse scores (not as much as you'd think):

Google takes URL-level Core Web Vitals data from CrUX into account when deciding where to rank you in a search results page. They do not use Lighthouse or PageSpeed Insights scores.

On the aspects that Google does care about:

To get a ranking boost, you need to pass all relevant Core Web Vitals and everything else in the Page Experience report.
This means your rankings are reliant on your performance in Chrome, even if the majority of your customers are in non-Chrome browsers.

On why Google searches on mobile often return different results to desktop:

This means that your placement on each device type is based on your performance on each device type.

On the impact of SPA architecture (yes, it is still an issue):

If you’re a Single-Page Application (SPA), you’re out of luck. While Google have made adjustments to not overly penalise you, your SPA is never really going to make much of a positive impact where Core Web Vitals are concerned.
Therefore, optimise every SPA page for a first-time visitor.

📆 18 Sep 2023  | 🔗

  • Frontend
  • SPA
  • page speed
  • SEO
  • core web vitals
  • Lighthouse
  • Google 

The curious disappearance of the Carolina parakeet | Mental Floss

A look into the life – and death – of one of the more infamous recent extinctions: the Carolina parakeet (which, turns out, is not a parakeet at all, but a small parrot). I hadn't realised how successful the species had been pre-European agriculture arriving in the US, nor how rapid and unexplained its extinction was; unlike the similarly fated passenger pigeon, there doesn't seem to have been any specific attempt at eradication, and whilst the pet trade and the market for bird feathers likely played a part, there's no clear reason why the last populations in Florida disappeared so quickly.

On the timeline of extinction:

The last official sighting of a wild Carolina parakeet was in 1920, though unconfirmed report of birds in southern Florida and along the Santee River in South Carolina trickled in until the 1940s. The species was officially declared extinct in 1939.

On the original range of the bird; I had no idea it was this common:

The wild birds were a common sight in America’s fields and forests when the first European colonizers arrived, inhabiting a sizeable swath of the eastern United States, from the Midwest to the Atlantic Coast.

On how they didn't adapt well to guns:

A flock of the birds could decimate an apple orchard or cornfield; landowners often shot them when they descended on crops. And because the sociable parakeets typically stopped to mourn fallen members of their flock, they were an easy target for gun-wielding agriculturalists.

On the results of genetic studies done recently to determine if the population was more fragile than expected (it wasn't):

They found no genetic indication of inbreeding and few genomic signs that the species was destined for extinction.

On a recent theory that there were two species/sub-species, the western-most having gone extinct first, which may help explain some of the rapidity of the decline:

... there may have been two subspecies of the bird—one found in the Midwest, with a range that extended south to Texas and Louisiana, and an Eastern subspecies, with a range that extended from Florida to Virginia.

On de-extinction and the Long Now's involvement:

The Long Now Foundation's Revive & Restore project is working to restore the passenger pigeon, a species that disappeared just a couple decades before the Carolina parakeet.

📆 15 Sep 2023  | 🔗

  • Natural World
  • de-extinction
  • Carolina parakeet
  • passenger pigeon
  • Long Now Foundation
  • extinct 

Bookmarklet for responsive image linting | RespImageLint

Not overly tested, but covers a lot of the common gotchas around building responsive images for the web, and quickly identifies areas for improvement. Definitely feels like something that could be built into a CI/CD tool as well.

📆 15 Sep 2023  | 🔗

  • HTML & CSS
  • responsive design
  • responsive image
  • bookmarklet 

Visions of an alternate, slightly more habitable Mars | T. K. Sigvin

A remarkably complex and detailed spec-bio project, with a focus on an alternative history where early 20th century ideas about the ecosystems of Mars turned out to be much more accurate than in our version of events. But it's not just a chronicle of the biosphere of the red plant; Har Deshur dives into the ecology, biogeography, evolutionary history, and the cultural impact on humanity, whilst somehow also finding time to consider other alt-history options, such as life on Venus, the satellites of Jupiter, and the discovery of the mystery inner planet Vulcan that had been speculated (including how it stayed hidden).

I've barely scratched the surface of this intriguing project, and am interested to see where it goes next.

Using data-attributes for style variations | Stuff & Nonsense

An interesting approach to using data attributes to drive CSS utility classes. I'm not sure I like the overly granular control (it feels like it falls into the same category as Tailwind, but now with even more syntax and boilerplate) but I always enjoy Andy's takes on Grid structures and this is certainly a novel approach to that.

On BEM and why more modern approaches like CUBE are advantageous:

But, I’ve come to realise that BEM reduces instead of increases clarity and doesn’t help separate default styles from variations in the way that data attribute do.

Convert Markdown to RTF online | Markdown Live Preview

A brilliant tool: paste in some Markdown and it will display the converted Rich Text in the preview window. You can then copy this and paste into any RTF editor and hey presto, no more annoying manual editing 🎉

WCAG 2.2 simplified | Mike Gower

A useful overview of the new success criteria coming in WCAG 2.2 (though the author is quick to note that changes are still at least a little likely).

[I wouldn't normally copy such a large block of text, but as this is a Medium article I don't trust it to stay online.]

Focus Not Obscured (Minimum)

Goal: Keep the focused item visible
What to do: Ensure the item receiving keyboard focus is at least partially visible in the viewport

Focus Not Obscured (Enhanced)

Goal: Keep the focused item entirely visible
What to do: Ensure no content obstructs the item receiving keyboard focus

Focus Appearance

Goal: Make it easier to spot the keyboard focus
What to do: Use a focus indicator of sufficient size and contrast

Dragging Movements

Goal: Don’t rely on dragging for user actions
What to do: Provide a simple pointer alternative to any action that involves dragging

Target Size (Minimum)

Goal: Make controls easier to activate
What to do: Ensure targets meet a minimum size or have sufficient spacing around them

Consistent Help

Goal: Make it easier to find help and support
What to do: Consistently locate any user help that appears on multiple pages

Redundant Entry

Goal: Make it easier for users to complete multi-step processes
What to do: Don’t ask for the same information twice in the same session

Accessible Authentication (Minimum)

Goal: Make logins possible with less mental effort
What to do: Don’t make people memorize or transcribe something in order to log in

Accessible Authentication (Enhanced)

Goal: Make logins possible with less mental effort
What to do: Don’t make people recognize objects or personal information to log in

Performative performance | Adactio

A thoughtful look at the idea of sustainability in web development and design, particularly in terms of whether worrying about an individual design choice's carbon footprint is meaningful or simply obfuscating the much larger issues around server farms, package size, etc.

On greenwashing in web design:

She said that real impact isn’t going to come from individual websites changing their colour schemes. Real impact is going to come from making server farms run on renewable energy.
Most of the important work around energy usage on websites is invisible. It’s the work done to not add more images, more JavaScript or more web fonts.

On why defaults matter and how the invisible work is often more important:

I suspect there might be a similar mindset at work when it comes to interface toggles for low-carbon mode. It might make you feel good. It might make you look good. But it’s a poor substitute for making your website carbon-neutral by default.

The worst programmer | Dan North

A story about how individually-driven KPIs rarely consider team-driven work, despite the fact that the latter is often the key ingredient in building efficient and effective departments.

Specifically, a look at Tim, who consistently scored zero on their internal developer KPI, because they spent their entire time pairing with other developers, and how this work directly improved team morale and code quality across the board in ways that would have not been possible without Tim around:

You see, the reason that Tim’s productivity score was zero, was that he never signed up for any stories. Instead he would spend his day pairing with different teammates.
Tim wasn’t delivering software; Tim was delivering a team that was delivering software. The entire team became more effective, more productive, more aligned, more idiomatic, more fun, because Tim was in the team.

On how moving from individual KPIs to team-focused ones often provide better business value:

... we quietly dropped the individual productivity metrics in favour of team accountability, where we tracked—and celebrated—the business impact we were delivering to the organisation as a high-performing unit.
Just don’t try to measure the individual contribution of a unit in a complex adaptive system, because the premise of the question is flawed.

Contextual advertising | LoFi Codes

A high-level overview of the differences between behavioural and contextual advertising, and some of the (many) advantages of the latter.

I've always felt this was a no-brainer benefit. I remember the days of early online advertising, and the few times those ads worked on me were (in hindsight) all about strong contextual relevance. I wanted to buy certain brands of tech hardware and office equipment because I associated them with specific review sites. The first web host I properly explored purchasing server space with was a regular advertiser on the industry staple A List Apart. I bought my Wacom tablet as a teenager because a webcomic I followed would regularly advertise them, and wouldn't you know it, I wanted to make a webcomic myself. Whereas in the land of behavioural advertising, I'm not sure I can think of a single instance of it truly working.

On the different approaches to online advertising:

Creating profiles about users based on their cookies is called Behavioural Advertising. There's an alternative called Contextual Advertising.
In a nutshell Contextual Advertising looks at the content on the page and allows advertisers to target that, instead of users.

On some of the benefits of removing cookie-based advertising:

With contextual targeting, the publisher would run a single script whenever they create or update content. This means that only once per content change, one script runs and updates one database. Notice this is done on the publisher end, so a user never has to take this cost.
Because no cookies are needed to track the user, this removes a use case for needing a cookie notice.

Zero JavaScript CSS-in-JS | Linaria

One of the core downsides to CSS-in-JS is that you have to compile it on the client, which means increased bundle sizes and slower rendering. Linaria is an attempt to fix that, by providing all of the typical CSS-in-JS DX – nesting, props, functions, exports etc. – but then transpiling that to CSS files during the build step.

Theoretically works with every front-end framework, but there seem to be issues with Next.js, unfortunately.

An open source Postman alternative | Recipe UI

An open-source tool for API testing, with automatic type safety baked in and a much more advanced output UI that highlights contained images, code blocks, messaging etc. whilst still providing the raw response. Best of all: there are both desktop and web interfaces, all free. Effectively a better version of Postman in every way.

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.