Alistair Shepherd

@alistairshepherd

Frontend developer, accessibility advocate and development lead at Series Eight. Work: Front end development, CSS, accessibility, web performance Personal: Mountains, snowsports, hillwalking, craft, music Edinburgh, Scotland 🏳️‍🌈🏴󠁧󠁢󠁳󠁣󠁴󠁿

362 Siguiendo1170 Seguidores290 Publicaciones

YouTube Bluesky

¿Es tu perfil?Reclámalo y alistairshepherd.dirty.social es tuyo.Reclamar perfil

Alistair Shepherd@alistairshepherd· 12d

film you’ve watched more than six times with a gif. hard mode: no star trek, star wars, lotr, marvel, disney, or ghibli.

Alistair Shepherd@alistairshepherd· Jul 10

I don't need to hear this but 100% agree! This was Newhaven Harbour across to Granton and the bridges a couple nights ago

Beautiful sunset looking across from Newhaven Harbour in Edinburgh to Granton. It's a very clear sky with a lovely dark blue to soft orange gradient with clouds catching the light on the horizon. The forth has slightly waves but is fairly calm, reflecting the sunset. You can just about see the Forth bridges in the background if you zoom

Alistair Shepherd@alistairshepherd· Jun 30

I was raised on these streets

Screenshot from LEGO Loco, a 1998 PC LEGO game. It's a kinda top-down view of a town, with road and rail networks, little pavement tiles, a handful of colourful buildings of different types, and a volcano lol

Alistair Shepherd@alistairshepherd· Jun 2

Even Outlook is sick of receiving spam emails from Outlook — they've blocked their own IP range for spam lol

Info about an undeliverable email from outlook.com to a business ugin outlook.com for email hosting. The error is "Service unavailable. Spam abuse detected from IP range"

Alistair Shepherd@alistairshepherd· May 28

Adam Cafolla on Masto tried it with 'Alistair' and got something even more cursed wtf ohai.social/@adaliabooks...

A screenshot of Google search for the query "how many p's are there in Alistair".

Google's AI overview response is:
There are 2 'p's in the name Alistair:

A - l - i - p - t - o - p

Wait, no! There are actually no 'p's in the name "Alistair" at all.

Let's spell it out:
A - L - I - S - T - A - I - R

There are no 'p's in the word.

Alistair Shepherd@alistairshepherd· May 28

As I looked upon the screen, a sorrow filled me. For web search was no more, cannibalised by the short-sighted stewards who could not see the damage they caused. As it filled me, a short utterance escaped my lips. "what the ever loving fuck is this" - Alistaiplin Shepepherp, May 2026

Google search for "how many ps are in shepherd". The AI overview responds "There are 3 "p"s in the word "shepherd" (s-h-e-p-e-p-h-e-r-p)."

Alistair Shepherd@alistairshepherd· May 28

You gotta be fucking kidding me

Google search for "how many p's in alistair". AI overview says "There is 1 p in Alistair. A-L-I-S-T-A-I-**P**-L-I-N" spelling "Alistaiplin" 😭

Alistair Shepherd@alistairshepherd· May 25

My coworker today seems to mostly be focusing on biting my toes — I'm not sure what KPI this is improving but she does it very effectively.

A very cute ragdoll cat sitting on a table starting at the camera. She's got incredibly blue eyes, is very fluffy, has dark brown colouration on her head and ears but from the mouth down is white/a light brown

Alistair Shepherd@alistairshepherd· May 16

Nice break from the screen for some 🏄

A pro surfer catching a wave at a wave pool near Edinburgh

Alistair Shepherd@alistairshepherd· May 11

@viewportconf.org Got a wee typo in your og:description description there! 👀💩

head source code of viewportconf.org, showing the og:description and the fact it has a typo "Liverpoo"

Alistair Shepherd@alistairshepherd· May 8

Of course the main reason I go to conferences is to see @letorey.co.uk, the talks are a good bonus!

Alistair and Dave grinning like loons for a photo at the front of the All Day Hey venue. Alistair's wearing a loud flowery jumpsuit, Dave's in a SOTB tee and his trademark red hat and glasses thingymajig

Alistair Shepherd@alistairshepherd· May 8

Just home from the wonderful #AllDayHey conference! It was a fantastic day, with some brilliant talks, awesome people speaking and attending, and overall an absolute blast! I was so thankful to be able to speak, especially at the last one. SO much love and thanks to the @heypresents.com team. ❤️

Alistair dressed in a loud flowery jumpsuit gesticulating on stage, with the title card "Bill & Ted's Accessibility adventure" in the background

Alistair Shepherd@alistairshepherd· May 7

If you're at @heypresents.com today, come find me and say hi! You won't be able to miss me 😅

I'm wearing an INCREDIBLY LOUD jumpsuit with pink flowers, with my All Day Hey lanyard and posing in my hotel room

Alistair Shepherd@alistairshepherd· May 6

Brb just got an email from the boss

Email to me (Alistair Shepherd) today, from a random outlook address. It goes:
"Hi ! I'm Alistair Shepherd Are you in the office right now? Thanks, Alistair Shepherd"

Alistair Shepherd@alistairshepherd· May 6

Leeds-bound for @heypresents.com! Time for some slide amends 👀

Silly selfie of me grinning and pointing to Leeds on a electronic train board from Edinburgh

Alistair Shepherd@alistairshepherd· Apr 30

Reform UK election leaflet part way through being shredded, Malcolm Offord's face is about to get the chop

Alistair Shepherd@alistairshepherd· Mar 31

This month my project Async Alpine hit 4yrs old, and about the same time 200k downloads! 📈 It doesn't feel like long ago I went for a swim and had the idea for conditional component loading for Alpine.js and threw something together. If you use Alpine.js check it out: async-alpine.dev

Wiring it up:

Now we set up our component within our HTML and let Async Alpine know where to find the component file:

<div
x-load
x-load-src="/components/my-component.js"
x-data="myComponent('message')"
></div>

In the snippet above, x-load indicates this is an Async component and the x-load-src attribute points to the URL of our component file.

Make sure to add your x-data attribute as you would normally with Alpine.js.

Downloads per year chart for async-alpine between 2022-03-22 and 2026-03-31. Total 218,070 downloads.
2022: 2k
2023: 19k
2024: 40k
2025: 99k
2026: 56k (so far)

Alistair Shepherd@alistairshepherd· Mar 26

6 weeks today I'll be speaking at the wonderful All Day Hey by @heypresents.com in Leeds, with my talk "Bill and Ted's accessibility adventure"! 🎸🤘 Come join us for a *most excellent* day, with some great talks and great people! Tickets & more info: heypresents.com/conferences/...

Hey! All Day. Alistair Shepherd, Lightning Talk
Bill and Ted's accessibility adventure: Accessibility testing for developers
Thursday 7th May 2026, 09:00–17:00 BST, Everyman Cinema, Leeds UK

As Bill and Ted discovered in their excellent adventure, it can be easier to learn through hijinks, trials and practice than through reading. How can we learn from their experience to get better at web accessibility?

With the guidance of Bill and Ted we'll explore the ups and downs I went through teaching accessibility, and why focusing on testing works so well.

heypresents.com/ten. Join us for the final time.
In the background is a photo of me in my natural state — standing in a moor, in outdoor kit and a tech t-shirt, grinning like a loon

Alistair Shepherd@alistairshepherd· Mar 23

Oh and just to be clear this is just for a product card, here's my artist impression of the component in question 😂

Product card wireframe. Has product title, subtitle + category, product image, and 2x sets of Feature+Description. Simple stuff really

Alistair Shepherd@alistairshepherd· Mar 23

Meme in the "You wouldn't steal a car" ad style, but it says "You wouldn't build a component without class='Page_browse_ingredients_boths_innerloops_innerboxs_innercolumn_inneroverlay_innerdetails_innercustom_innerboths_title_new'"

Alistair Shepherd@alistairshepherd· Mar 23

Tell me you're a JS developer with no CSS knowledge

HTML snippet with a huge number of div elements and crazy CSS classes like `Page_browse_ingredients_boths_innerloops_innerboxs_innercolumn_inneroverlay_innerdetails_innercustom_innerboths_title_new`

Alistair Shepherd@alistairshepherd· Mar 1

My evidence of the evening provided by @matuzo.at!

Low res black and white selfie of Manuel and Alistair on thermal receipt paper! We're clearly having a lovely time and (at least to me) it's pretty clear I've had a few drinks!

Alistair Shepherd@alistairshepherd· Feb 27

My journey begins for State of the Browser! #Sotb26

Selfie of me on an LNER train, smiling and doing a peace sign. I'm wearing a lovely Columbia fleece and look a lil bit goofy

Train signage board at Edinburgh Waverley to London Kings X at 13:00. In the background is a lovely glass roof with some blue sky

Alistair Shepherd@alistairshepherd· Jan 20

As proof I can still do it! (not looking for any input thanks)

Alistair Shepherd@alistairshepherd· Jan 20

I've taken a break from moving house to enjoy the Scottish ski season whilst I can! 🏴󠁧󠁢󠁳󠁣󠁴󠁿 ⛷️ Typically for Cairngorm, it was crap weather but the snow conditions were very good! Had an absolute ball and just about remembered how to do it 😅

I grin at the camera taking a selfie with my full ski kit and goggles on. In the background is Cairngorm's White Lady, with the base station and strathspey behind. The run is complete although a little patchy with some brown!

Looking up from the bottom of the west wall poma, which is really steep and rarely open. No one else is there, and the lift disappears into the clouds in the distance.

Alistair Shepherd@alistairshepherd· Jan 19

Aviemore, Scotland this evening! The brightest I've seen it this south in a loooong time.

Northern lights and stars across a rural sky. The lights have a vivid slightly neon green with a pinky red light above. The streak from bottom left to top right and fill the sky.

Northern lights and stars across a rural sky with a handful of houses in the foreground. The lights have a vivid slightly neon green with a pinky red light above. The streak from top left to bottom right and fill the sky.

Alistair Shepherd@alistairshepherd· Jul 1

like wtf dude

Code sample showing an input checkbox element with loads of attributes, followed by a label, except the label has `role="checkbox"` for some reason??? 😱

Alistair Shepherd@alistairshepherd· Jul 1

The latest 'official' Shopify theme (Horizon) is such a mess. I've found loads of obvious bugs I've had to patch, and jesus christ the accessibility... yeah just an intentionally empty link here positioned absolutely on top of content. Awful in the year of our lord EAA, Shopify publishes this shit.

Screenshot of a webpage and code sample showing an anchor element with the class 'group-block__link' and no content. It's positioned absolutely above a social media link.
The rest of the code is absolute scenes too, awful div soup.

Alistair Shepherd@alistairshepherd· Jun 29

Summer time means homemade strawberry daiquiri time!

Glass of strawberry diaquiri — a red drink with crushed ice — with cocktail making paraphernalia in the background

Alistair Shepherd@alistairshepherd· May 30

Fun website mapping what counties in the UK you've been to! Took a bit to try and remember various places I stayed 20 years ago 😅 smstone0.github.io#/uk-map