localghost

Stop generating, start thinking

2026-02-08T00:00:00Z

Throughout my career, I feel like I’ve done a pretty decent job of staying top of new developments in the industry: attending conferences, following (and later befriending!) some of the very smart people writing the specs, being the one sharing news on Slack about exciting new features of CSS or JS with my colleagues. The joys of working on an internal tool where you only need to worry about latest Chrome, and playing with anchor positioning in a production app while it’s still experimental!

It’s very unsettling, then, to find myself feeling like I’m in danger of being left behind - like I’m missing something. As much as I don’t like it, so many people have started going so hard on LLM-generated code in a way that I just can’t wrap my head around.

I’ve been using Copilot - and more recently Claude - as a sort of “spicy autocomplete” and occasional debugging assistant for some time, but any time I try to get it to do anything remotely clever, it completely shits the bed. Don’t get me wrong, I know that a large part of this is me holding it wrong, but I find it hard to justify the value of investing so much of my time perfecting the art of asking a machine to write what I could do perfectly well in less time than it takes to hone the prompt.

You’ve got to give it enough context - but not too much or it gets overloaded. You’re supposed to craft lengthy prompts that massage the AI assistant’s apparently fragile ego by telling it “you are an expert in distributed systems” as if it were an insecure, mediocre software developer.

Or I could just write the damn code in less time than all of this takes to get working.

As I see more and more people generating code instead of writing it, I find myself wondering why engineers are so ready and willing to do away with one of the good bits of our jobs (coding) and leave themselves with the boring bit (reviews).

Perhaps people enjoy writing roleplay instructions for computers, I don’t know. But I find it dangerous that people will willingly - and proudly - pump their products full of generated code.

I’ll share a couple of the arguments I’ve encountered when I’ve expressed concern about this.

“This is the Industrial Revolution of our time! It’s like mechanisation all over again.”

Yes, this is true in many ways.

Firstly, when you consider how much the Industrial Revolution contributed to climate change, and look at the energy consumption of the data centres powering AI software, it’s easy to see parallels there. Granted, not all of this electricity is fossil-fuel-powered, so that’s some improvement on the Industrial Revolution, but we’re still wasting enormous amounts of resources generating pictures of shrimp Jesus.

Mechanisation made goods cheaper and more widely available, but at the cost of quality: it’s been a race to the bottom since the late 19th century and now we have websites like SHEIN where you can buy a highly flammable pair of trousers for less than a cup of coffee. Mechanisation led to a decline in skilled labour, made worse by companies gradually offshoring their factories to less economically developed countries where they could take advantage of poorly-paid workers with fewer rights, and make even more money.

Generated code is rather a lot like fast fashion: it looks all right at first glance but it doesn’t hold up over time, and when you look closer it’s full of holes. Just like fast fashion, it’s often ripped off other people’s designs. And it’s a scourge on the environment.

But there’s a key difference. Mechanisation involved replacing human effort in the manufacturing processes with machinery that could do the same job. It’s the equivalent of a codemod or a script that generates boilerplate code. The key thing is that it produces the same results each time. And if something went wrong, humans would be able to peer inside the machine and figure out what went wrong.

LLM output is non-deterministic, and the inner workings opaque. There’s no utility in a mechanised process that spits out something different every time, often peppered with hallucinations.

“LLMs are just another layer of abstraction, like higher level programming languages were to assembly.”

It’s true that writing Java or Go means I never had to bother learning assembly. The closest I get to anything resembling assembly is knitting patterns.

The way that we write software has evolved in terms of what we need to think about (depending on your language of choice): I don't have to think about garbage collection or memory allocation because the runtime does it for me. But I do still have to think about writing efficient code that makes sense architecturally in the wider context of our existing systems. I have to think about how the software I'm building will affect critical paths, and reason about maintainability versus speed of delivery. When building for the web, we have to think about browser support, accessibility, security, performance.

Where I've seen LLMs do the most damage is where engineers outsource the thinking that should go into software development. LLMs can't reason about what the system architecture should be because they cannot reason. They do not think. So if we're not thinking and they're not thinking that means nobody is thinking. Nothing good can come from software nobody has thought about.

In the wake of the Horizon scandal, where innocent Post Office staff went to prison because of bugs in Post Office software that led management to think they’d been stealing money, we need to be thinking about our software more than ever: we need accountability in our software.

Thirteen people killed themselves as a direct result of those bugs in that Post Office software, by the way.

Our terrible code is the problem

But, you may argue, human developers today write inaccessible, unperformant, JavaScript-heavy code! What's the difference?

Yes, exactly (or should I say “You’re absolutely right”?). LLMs are trained (without our explicit consent) on all our shitty code, and we've taught them that that's what they should be outputting. They are doomed to repeat humans’ mistakes, then be trained on the shitty reconstituted mistakes made by other LLMs in what’s (brilliantly) been called human centipede epistemology. We don't write good enough code as humans to deserve something that writes the same stuff faster.

And if you think we’ve done all right so far, we haven't: just ask anyone who uses assistive technology, or lives in a country with terrible Internet connection (or tries to get online on mobile data in any UK city, to be honest). Ask anyone who's being racially discriminated against by facial recognition software or even a hand dryer. Ask the Post Office staff.

Instead of wanting to learn and improve as humans, and build better software, we’ve outsourced our mistakes to an unthinking algorithm.

Four eyes good, two eyes bad

Jessica Rose and Eda Eren gave a brilliant talk at FFConf last year about the danger of AI coding assistants making us lose our skills. There was one slide in particular that stood out to me:

The difference between reviewing a PR written by human and one by an LLM is that there's a certain amount of trust in a PR by a colleague, especially one that I know. The PR has been reasoned about: someone has thought about this code. There are exceptions to every rule, yes: but I'd expect manager intervention for somebody constantly raising bad PRs.

Open source maintainers will tell you about the deluge of poor quality generated PRs they're seeing nowadays. As a contributor to any repository, you are accountable for the code you commit, even if it was generated by an LLM. The reviewer also holds some accountability, but you’ve still got two pairs of eyes on the change.

I’ve seen social media posts from companies showing off that they’re using e.g. Claude to generate PRs for small changes by just chatting to the agent on Slack. Claude auto-generates the code, then creates the PR. At that point accountability sits solely with the reviewer. Unless you set up particularly strict rules, one person can ask Claude to do something and then approve that PR: we’ve lost one of those pairs of eyes, and there's less shared context in the team as a result.

Reviewing PR isn't just about checking for bugs: it’s about sharing understanding of the code and the changes. Many companies don't do PRs at all and commit directly to the main branch, but the only way I've personally seen that work consistently at scale is if engineers are pairing constantly. That way you still have shared context about changes going in.

I'm not anti-progress, I'm anti-hype

I think it’s important to highlight at this stage that I am not, in fact, “anti-LLM”. I’m anti-the branding of it as “artificial intelligence”, because it’s not intelligent. It’s a form of machine learning. “Generative AI” is just a very good Markov chain that people expect far too much from.

I don’t even begrudge people using generative AI to generate prototypes. If you need to just quickly chuck together a wireframe or an interactive demo, it makes a lot of sense. My worry is more around people thinking they can “vibe code” their way to production-ready software, or hand off the actual thinking behind the coding.

Mikayla Maki had a particularly good take on working with agents: keep the human in the loop, treat them like an external contributor you don’t trust. Only use agents for tasks you already know how to do, because it’s vital that you understand it.

I will continue using my spicy autocomplete, but I’m not outsourcing my thinking any time soon. Stop generating, start understanding, and remember what we enjoyed about doing this in the first place.

2025: The year in lists

2025-12-30T00:00:00Z

Skip to bits you care about:

The year in...

The year in...

...furry friends

We got a dog! She's both the most wonderful and most annoying thing I've ever encountered. It's hard work and she needs a lot of training, but she's come a long way in the time we've had her. 2026 will bring more training sessions, and hopefully more success. As I write this she's befriended the people at the table next to me in the café, and doing her best poor orphan impression in the hopes of a bite of their sausage sandwiches.

...retreating into my cave

I took a step back from social media in the latter half of the year, not for any particular reason, but it just wasn't making me happy. I'm keeping up with people's RSS feeds, but probably missing out on what folks are up to by not checking Bluesky/Mastodon. I still find myself picking up my phone absent-mindedly to look at things, realising I don't want to look at social media, and putting it down again.

I'd hoped that being on social media less would lead to more blog posts, but it didn't; most of the time, the thought of writing a post felt like work, so I chose to just stay offline instead.

...conferences

As predicted I did indeed do fewer conferences this year, and I managed to use the migrations talk for all of them. I think that one's run its course now, so my conference visits in 2026 are much more likely to involve being in the audience!

State of the Browser was in March this year, and it was great as always. It was great to finally meet Sara Joy!
I spoke at QCon London in April, which was a new experience for me - it was absolutely massive, five or six tracks, which I found completely overwhelming. There were some great talks and I enjoyed the web track but that size conference just isn't for me. I like the small ones where you can chat to people in the break without it feeling transactional.
I travelled to Cluj in Romania in May to speak at JSHeroes. Having heard lots of good things about it, I can confirm it's great vibes and the whole crew were wonderful people. I saw conference friends, made some great new ones, and would thoroughly recommend the conference. What an excellent community!
Speaking of wonderful people, so were the crew of NordicJS in Stockholm in October. It was an absolute pleasure to speak there, the talks were all absolutely fascinating, and the festival vibes reminded me of JSConf EU. I took part in the Code in the Dark challenge at the afterparty, and properly crashed and burned.
As usual I went back to StaffPlus which is now LDX3, and it was pretty good - merging the conferences into one big three-track event meant that sometimes I couldn't get into the talks I wanted to see, which was a shame. I much prefer single-track conferences. That said, I saw some great talks and came away with a ton of ideas for tackling tech debt and monitoring website/repo health.
In Nov I went back to FFConf for the first time in a few years, and I remembered why I loved it so much. What an inspiring and thought-provoking conference.

Next year you bet I'll be at the last-ever (sob) All Day Hey in May, and I'm hoping to go back to Amsterdam for CSS Day in June. There's also State of the Browser in March, which I never miss!

...gardening

I took my second sabbatical in May, and spent the time designing my front garden. A few people have asked me about it recently, and I'm pleased to report it's taking shape, but it took a while to get started!

May is actually a terrible time to redesign the garden, as really you want to get plants in the garden in or before spring so the roots can establish. Summer was so dry this year that the few plants I’d put in really weren’t very happy, plus the ground baked solid and I couldn’t dig it until mid-November.

It rained for what seemed like three weeks straight in November, which was a blessing for the garden (and a curse for everyone else!) and meant the ground softened up enough to get the beds dug in. We bought a cubic metre of compost and distributed it across the beds, and I planted the first lot of hardy perennials and shrubs, which will just hang out until they start growing again in spring.

I also bought a bare root pear tree which I’ll plant in the spring when it starts to warm up.

...books

This year I moved on from the “disproportionately disadvantaged female heroine turns out to be omnipotent god” genre, and read some other books I enjoyed more:

The Mountain in the Sea by Ray Nayler: creepy sentient killer octopuses and secret research by shady tech corporations!
Where the Axe is Buried by Ray Nayler: I enjoyed the previous book so much I read this one immediately afterwards. The authoritarian president of a Federation that is Definitely Not Russia Wink Wink keeps himself alive by downloading his consciousness into younger bodies, and AI Prime Ministers reign supreme.
Villains and Virtues series by A.K. Caggiano: a fantasy trilogy following two very likeable characters, one of whom is a demon spawn on a quest to fulfil a dark prophecy. Don't be put off by the cover art, which makes it look like fanfiction: these are really well written.
Mages of the Wheel series by J.D. Evans: the Sultana of a magical kingdom embarks on a quest to unite mages of all the houses, and end the war with what is effectively the Roman Empire. While they are at their core romance books, there's plenty of gripping story and character development in a way that didn't make it feel like fluff. Each book in the series follows a different character.
The Raven Scholar by Antonia Hodgson: a great fantasy read about a contest to replace an emperor and a woman who unravels a dark secret at the heart of it.
Reservoir Bitches by Dahlia de la Cerda: a book of short stories about women in Mexico. Some are quite graphic (mega content warning for the first story which has a very graphic depiction of a terminated pregnancy) and some are just plain depressing, but this was a really really good read.
Why Q Needs U by Danny Bate: a fantastic linguistic deep-dive into the history of each letter of the English alphabet. A long-time etymology nerd, I really loved this book and can't recommend it enough. Did you know the letter "a" is derived from a pictogram of an ox's head?
Shady Characters: Ampersands, Interrobangs and Other Typographical Curiosities by Keith Houston: a fascinating history of some common, and not-so-common, punctuation marks and symbols.
Butter by Asako Yuzuki: worth reading for the descriptions of food alone. This book was everywhere this year, and for good reason.
The Safekeep by Yael van der Wouden: nominated for the International Booker Prize, this was a fascinating read set in post-war Netherlands.
Not the End of the World by Hannah Ritchie: A more optimistic view on how we can tackle climate change, backed up with actual statistics and science. It's not naïve about the challenges ahead by any means, but it does make it all seem a little less futile.
Moonbound by Robin Sloan: I really enjoy Robin Sloan's sci-fi writing, and this was characteristically bizarre and great fun. Set in the far future eleven thousand years from now, a young boy escapes an evil wizard and learns more about the strange world around him.

...music

In the latter couple of months I’ve been making more of an effort to listen to actual albums, because I’ve had my favourites playlist on repeat for most of the year and I tend to listen to the same few songs. On repeat this year was the K-Pop Demon Hunters soundtrack, which goes SO HARD and was my most listened to this year by a long way.

Some other great albums this year:

MAYHEM by Lady Gaga was a stellar return to form and I loved every track
Ego Death at a Bachelorette Party by Hayley Williams
Stardew Valley Festival of Seasons - I had the pleasure of going to see this live at the beginning of the year, and it was wonderful. Orchestral versions of the brilliant soundtrack to this brilliant game.

...video games

This year we bought a Switch 2, and I played a ton of Hades 2! I'm actually getting pretty good at it. The soundtrack is great, too.

I also played Hollow Knightfor the first time, and beat the game even though at times I wanted to rage quit and throw the console across the room. I used to avoid soulslikes as I thought they were too hard, but it turns out I needed to approach the boss fights differently from the Borderlands-style games where you just spray-and-pray. It was an exercise in patience, and it ultimately paid off (plus it made Hades seem a lot more attainable). James played the sequel this year and I can safely say that I will not be going near it, having watched him play.

I spent a LOT of time on Blue Prince, which was exactly my brand of mystery/puzzle game.

...blog posts

Considerably fewer than last year, but they still seemed to resonate with folks, especially the one about AI slop!

I repaired my Steam Deck and it was fine actually: replacing the screen on a console that's designed to be DIYed.
My month of rest and relaxation: reflections from my first month's sabbatical from work.
The blog questions challenge: a fun little quiz doing the rounds earlier this year.
This page is under construction: a love letter to the personal website
Touching grass, and shrubs, and flowers, and dog: designing my garden, and a new furry companion.
This website is for humans: a diatribe against AI slop stealing people's work

I also wrote a guest post for Piccalilli about conditional types in TypeScript.

I feel like I have another post in me before the end of the year, but I also have a lot of games to play...

That’s it for now

As the Web Framework of Time pollutes the remainder of the year with the Unnecessary JavaScript of Eternity, it's time to say goodbye for 2025 and I will see you in the new year!

This website is for humans

2025-08-08T00:00:00Z

Walking past a bus stop yesterday I saw an advert for Google’s AI search. The person in the ad had pointed their phone’s camera at a bowl of ramen, and the AI result explained how to reproduce it at home.

How does it know? Because it’s trained on all the ramen recipes that multiple recipe authors spent hours, weeks, years perfecting. Generative AI is a blender chewing up other people’s hard work, outputting a sad mush that kind of resembles what you’re looking for, but without any of the credibility or soul. Magic.

I subscribe to a lot of recipe websites via RSS, and look forward to new posts from some of my favourites like Smitten Kitchen and Meera Sodha because I know they’re going to be excellent. I trust that the recipe is tried and tested, and the result will be delicious. ChatGPT will give you an approximation of a recipe made up from the average of lots of recipes, but they lack the personality of each individual recipe, which will be slightly different to reflect the experiences and tastes of the author.

There's a fair bit of talk about “Google Zero” at the moment: the day when website traffic referred from Google finally hits zero. If the AI search result tells you everything you need, why would you ever visit the actual website?

Well, I want you to visit my website. I want you to read an article from a search result, and then discover the other things I’ve written, the other people I link to, and explore the weird themes I’ve got. I want some of you to read my article then ask me to speak at your conferences. Many folks rely on ad impressions to support the high-quality content they’re putting out for free.

I write the content on this website for people, not robots. I’m sharing my opinions and experiences so that you might identify with them and learn from them. I’m writing about things I care about because I like sharing and I like teaching. I spend hours writing these posts and AI spends seconds summarising them.

I'd much rather people read the whole thing, take it in, digest it and have opinions right back at me. I love it when people connect with what I’m writing (and sometimes they email me to tell me that, which is really delightful).

I don’t write these posts for VC-funded LLMs to come along and gobble up and produce some shitty facsimile, or summarise what I’m saying with none of the nuance or context on someone else's website.

This website is for humans, and LLMs are not welcome here.

Touching grass (and shrubs, and flowers, and dog)

2025-07-05T00:00:00Z

I meant to post this in May, but then I went back to work after my final (sob) sabbatical, and I also lost a lot of time to Blue Prince at some point, so here we are in July.

I thought I'd update with some medium-sized news in the form of a medium-sized dog:

Her name is Penny. She's a staffy mix (and a rescue, so the rest is a mystery) and she's the cuddliest dog you've ever met. We've been working hard on lead training, as she is a terrible goblin on the lead and wants to chase anything small and furry, but then she makes up for it by doing things like this:

Designing the front garden

I spent most of my May sabbatical gardening: it was finally time to tackle our massively overgrown front garden. My original plan was to get someone in to design the space (just a planting scheme, nothing hugely fancy) but the cheapest quote I got was £1500. So I decided I'd do it myself - how hard could it be? (the answer is very) - and spent some quality time with a (now rather chewed, thanks to Penny) copy of What Plant Where. I made a spreadsheet of all the plants that would work in our heavy clay soil, organised into whether they're shade-lovers (for the north-facing bed) or sun-lovers (for the south-facing bed). I even used a colour scheme generation tool (coolors
) that I often use for web development to find colour combinations that worked for the beds.

It's important to find a mix of plants that provide year-round interest, so you don't end up with a riot of colour in summer and a sad wasteland the rest of the year. So in my spreadsheet I also included what months the plants are interesting in and made sure to include a good number of evergreens. I've gone for a lot of plants that pollinators like: foxgloves, lavender, teasel.

I ended up with something like this:

On the shady side, I'm going for hostas and ferns to provide a bit of foliage; delicate white blooms that will really pop out against the green; and dots of blue and purple to provide some colour.

On the sunny side we've got brighter colours: yellows, purples, oranges, pinks and even a bit of red.

The next step was to produce a scale drawing of the plot. It's quite a uniquely shaped plot as we live on the corner of a road, so I used Google Maps' satellite view to get an overview of the shape. I measured each wall, and drafted it out on graph paper at a scale of 2cm=1m.

I spent a while coming up with the shape of the lawn: I wanted big flowerbeds, but also a bit of grass in the middle. Curves were important to give a sense of movement and flow as opposed to the very constrained and formal feel of straight borders.

Finally, it was time to add in the plants. Starting from the outside, I stuck the shrubs in first and then worked inwards, putting taller plants towards the back and making sure the design left plenty of room for plants to spread out. As a rule of thumb (so I have learned), you want to plant herbaceous plants in 3s or 5s, never on their own and not in even numbers because it looks weird.

Planting it up

It's going to take me several years to get the garden to where I want it to be, as there are still a few shrubs that need to come out, and a lot of bed space that needs to be cleared. It's the wrong time of year to be doing this really (autumn would be better, and the ground's rock solid in the heat). But I've officially done one corner, with the help of my mum and several bags of very strong-smelling manure.

I've planted a deutzia and a daphne - two lovely pale-flowering shrubs, the daphne flowering in late winter/early spring - and surrounded them with some white erysimum (wallflowers). At the front of the border (by the lawn) we've got some brunnera macrophylla, a favourite of mine with these beautiful massive silver veined leaves and tiny blue forget-me-not flowers. The lovely thing about many perennials is that you can actually split them up into smaller plants, saving a bit of money as you don't need to buy so many. One brunnera became two, and two erysimums became three.

Pelican Town's economy is safe for now

I was looking forward to living my best Stardew Valley life this summer, growing fruit and veg in the back garden. In reality, the birds got all my strawberries (I didn't cover them over well enough) and the leaves of my potato plants have been absolutely devoured by tiny flies so god only knows whether I'll get any potatoes this year. I've successfully grown some chard and cavolo nero, though, and I have some very good cucumbers growing on a plant that was supposed to be a courgette. There are also early signs we might have a few raspberries this year (though literally only a few). At least I've learned things for next year!

This page is under construction

2025-02-22T00:00:00Z

This is an updated & abridged version of the talk I gave at several conferences throughout 2022/23, including Beyond Tellerrand, CSS Day and FFConf.

If you take just one thing away from this article, I want it to be this: please build your own website. A little home on the independent web.

A reflection of your personality in HTML and CSS (and a little bit of JS, as a treat). This could be a professional portfolio, listing your accomplishments. It might be a blog where you write about things that matter to you. It could even be something very weird and pointless (even better) – I love a good single-joke website. Ultimately, it's your space and you can do whatever you want with it.

In the early days of the web, there were a lot of sites like this. People would build websites for their families, fansites for bands they liked, or just homepages they filled with random junk. It was a fun thing to do, and a great way to connect with people. They really don't make 'em like they used to.

The Proud Grandparents Page

It feels like we've lost this decades-old art form; the individuality of design and the uniqueness of content you used to see on these webpages. The notion of experimenting with HTML and CSS without worrying about something looking weird or out of place. The beauty of a website built by a person, because they wanted to.

But websites are for business... right?

Many of you reading this will probably get paid to build websites. I do, to an extent. And a lot of these websites will probably be very similar: marketing, e-commerce, ultimately something designed to make money either by selling something or advertising something. Maybe you've had to stick some tracking pixels in, do some a/b testing to see what variant converts better, and do some forbidden invocations to get Google Tag Manager working. The kind of web development that makes you question your life choices.

And these sites all look identical. The same style of icons, black CTAs, the same pops of the same colours. I keep landing on websites and thinking I'm looking at Vercel, and it's become this kind of bland VC-funded corporate identity that all startups have nowadays. And a lot of the content is similar too, because it ultimately comes down to what works for SEO. I gave this talk before Generative AI was quite so ubiquitous, and it's even worse now with so many websites full of absolute garbage content spewed out of ChatGPT, and nobody knows how Google ranks pages any more.

These sites are providing a service, and are transactional in nature. There's always going to be a place on the internet for them – even if I wish they'd put a bit more effort into making their sites a bit more interesting-looking. I guess I'm asking: where did the fun web go?

I learned HTML back in 2000, and things were pretty different then*. I can't imagine how intimidating it must be to be a newcomer now with all of these frameworks and expectations. If you do get into web dev now you're probably doing it to make a career of it; you might do a bootcamp, or a course, some kind of formalised training. And if you are studying with a view to doing it professionally, you're much more likely to target what people are hiring for – whichever framework is so hot right now – skipping right over the basics.

I've interviewed quite a few folks for web development jobs over the years, where it's clear they've only ever done React – and the requisite amount of JavaScript required to do React – and never got a good foundation in HTML or CSS that you need to build good quality, accessible, performant websites.

* but 99% of that HTML would still work perfectly on the web today, thanks to glorious backwards compatibility! Isn’t that cool? (Provided it wasn’t mostly <marquee> tags, of course...)

But I still have fun on the web!

Well, sure. But ultimately the websites we use for fun are also for business. Think about how you use the web today: chances are, many of you spend the majority of your time on a handful of websites and apps owned by big companies like Meta and Condé Nast.

Under the guise of a free service, these companies are making money from data they're harvesting from us. "We are the product" may be a tired cliché at this point, but it's a cliché for a reason. They might not be explicitly selling it on, but they are 100% using your data to feed into advertising algorithms. We upload images, videos, run our social lives and even our businesses on these platforms. Instagram's terms of service give Meta carte blanche to reproduce, distribute or copy your images royalty-free.

Meta makes an absolute killing on advertising that can reach highly specific target markets, and they wouldn't be able to do that without using your personal data and browsing habits to label your user account with things they think you like.

Have you looked at your Instagram/Facebook settings lately, in the ad preferences section? It's quite illuminating what they decide to use to target you.

Laura Kalbag gave a great talk about digital privacy at FFConf 2019, and it was this talk that spurred me on to ditch Gmail and set up a paid-for email account. I recommend giving it a watch.

For many people, a social media account is the lowest-friction way to have an online presence. You don’t need any technical skills, it doesn’t cost you anything, and you’ve got a captive audience in the form of people on the social network.

The flip side of this is, if anyone doesn’t have an account on the site they can’t see very much at all. My two local cafés both have an Instagram account and nothing else, and I don’t have Instagram any more so I can only see about two pictures on the web before the page asks me to sign in. Similarly, many small businesses only have a Facebook page which won’t show me many posts or pictures until I log in.

Unfollow

It took a billionaire narcissist taking over my favourite social network in 2022 to disrupt my very unhealthy relationship with social media. I was perma-glued to Twitter, workshopping tweets and thinking about how I could phrase things to get the maximum number of likes – addicted to the dopamine hits of likes and follows. You start to think: "what can I post that people will respond positively to?". The more followers I had, the higher the bar for engagement got: I couldn't risk posting something not funny or boring. I didn't know these people, they didn't know me, and yet it was occupying far too much of my brain.

And because you only have a set character limit, you find yourself pre-empting the backlash you might get. There's absolutely no room for nuance, so you have to think "how could someone (often deliberately) misinterpret this?".

Well, the good news is there's no reply guys on your own website. You can write at length, ramble nonsensically, and people can choose to read it or not. It’s about putting things out on the internet for yourself.

All of this content we’re writing on other people’s platforms is also stuck in that platform unless you request a data export of it, and even then it’s often in some weird proprietary format. During one of the big Twitter exoduses in 2022, the systems were under a lot of strain and it seemed like the export wasn’t going to arrive at all. What if you get banned for some reason, or locked out of your account – there’s nobody to talk to to appeal the decision, and your data might be lost forever. It won’t get archived by the Wayback Machine if it’s behind a login screen.

I still dip in to Mastodon and Bluesky periodically, posting the odd silly thing or bit of news, but anything I really care about goes on here now, in cross-compatible Markdown format, archived on GitHub and elsewhere.

You can be a creator anywhere on the internet these days, but there's only a small handful of places where you actually own your own content. Your own website is one of them.

Internet of Slop

When I originally wrote the Personal Websites talk in 2022, generative AI was something people were just starting to experiment with, mainly to make really stupid-looking generated images with DALL-E. Within a couple of years it's absolutely everywhere: we have a million identical "AI" startups popping up – many of whose products are just ChatGPT in a trenchcoat – and creators’ work is being ripped off left, right and centre. Silicon Valley is trying to invent AI solutions to problems we don't even have. Companies like LinkedIn are using our data and the content we post on their platforms to train their models, but what's worse, most are making it opt-out.

Side note, imagine a model trained on the entirety of LinkedIn: talk about garbage-in-garbage-out.

I’d like to point you towards Maggie Appleton’s excellent talk The Expanding Dark Forest and Generative AI which goes into this in a little more detail and offers some food for thought that may give you indigestion.

[It] feels like we’re surrounded by content that doesn’t feel authentic and human. Lots of this content is authored by bots, marketing automation, and growth hackers pumping out generic clickbait with ulterior motives.

People have already started putting little badges on their site that say “Made by a human”, and Maggie asks: is there a future in which we need to have some kind of "reverse Turing test" to prove our humanity on the internet?

Well, shit. What do we do about all of this? The internet sounds like a pretty dire place right now. Should we just abandon ship and leave it to burn, let the AI models train on AI slop and spit out nonsensical word salad that humans don't even read?

Of course not.

It wasn't supposed to be like this

The whole idea of the World Wide Web was that it was decentralised and independent. It was released as an open standard so that access could be as democratic as possible.

Tim Berners-Lee gave an interview in Vanity Fair in 2018 where he said:

It was all based on there being no central authority that you had to go to to ask permission... The spirit there was very decentralized. The individual was incredibly empowered. That feeling of individual control, that empowerment, is something we’ve lost.

We owe it to ourselves to bring that spirit back, and we can do that by carving out our own individual spaces on the web.

The modern web is for consumers, not creators

There are so many tools out there for building personal websites, HTML is wonderfully backwards-compatible, and there are a plethora of free web hosts out there. So why aren't we doing it?

Somewhere along the way, websites stopped being about the creators, and started being about the consumers: we don’t build websites for ourselves like we used to, we build them for the audiences we want.

I see the personal website as being an antidote to the corporate, centralised web. Yeah, sure, it's probably hosted on someone else's computer – but it's a piece of the web that belongs to you. If your host goes down, you can just move it somewhere else, because it's just HTML.

Sure, it's not going to fix democracy, or topple the online pillars of capitalism; but it's making a political statement nonetheless. It says "I want to carve my own space on the web, away from the corporations". I think this is a radical act. It was when I originally said this in 2022, and I mean it even more today.

I want to be clear, I'm not telling you to ditch social media completely, or stop building websites for business. There is still plenty of room on the web for commercial websites alongside the independent personal web. This is very much not a plea to go back to the old days of GeoCities, but rather a plea to bring the magic of the old days into the present day.

I also don't want to be prescriptive about what this website should be. It's your space, and you can do with it whatever you want – whether that's a maximalist extravaganza, or plain text on a plain background. You might spent hours hand-crafting your HTML, or use a drag-and-drop builder. You may host it on someone else's platform, or on a box in your bedroom. All of these things are valid, as long as you build it for you.

This website used to be just a blog and portfolio, but I've been continuously adding more and more things to it because I wanted to: pages about keyboards, my favourite games, things I use, weird projects I've done. I've built multiple themes with some really silly features, but it's all done in a way that works without JS and respects people's motion preferences. I believe you can - and should - have a creator-focussed website which is still considerate towards the people reading it.

You don't need to think about SEO or design trends... unless you want to. You could... list recipes you like, start a blog, write about tech things, share pictures, poems, little notes. Your space is an opportunity to be as weird as you want, to experiment and learn.

For the nerds: try out the things behind experimental flags. Go to MDN and find the weirdest sounding API. Experiment in production, write bad code and ship it. If you screw it up, just revert. Undo. This site deploys in <30 seconds, so nobody would ever know I messed it up (and I have, repeatedly). Drop in new features of CSS without worrying about whether your customers’ browsers support it; just make sure you lean on progressive enhancement so your page still works for everyone. As long as you're building the foundation of your site in regular old HTML, the content will show up regardless of the fancy stuff, and the weird stuff will be there for you (and anyone else who's got Chrome Canary).

The tools are the same as they've ever been: HTML and CSS. It's still completely possible to write some HTML and CSS, stick it on a server and have a static webpage. It's so easy nowadays to get bogged down in build tools and frameworks. You can use them if you want, but it's not a requirement for web development even in 2025.

Free hosting is better than it's ever been thanks to storage getting cheaper and cheaper. This website is hosted on Neocities, which has a free tier with zero ads and 100% good vibes. It's aimed at anyone who wants to make a website, and they've got an HTML tutorial for beginners. You can upload static files, use the inline editor, or deploy automatically via CI if you're a bit more technically-minded. A lot of the sites on Neocities are very nostalgic and evoke the late 90s and early 2000s: there’s a really nice community vibe there.

I especially like their manifesto:

We are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. It's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again.

The personal site isn't dead. It's just been forgotten in the commercialised, capitalist web of today. We owe it to ourselves to rediscover this lost art.

We can still be creators for the sake of creating.

We can still post content without someone else making money from it.

So, once again my digital call to arms: build your own website. Make it fun. Make it pointless. But most importantly: make it yours.

Appendix: look at these cool websites

Here are some of the excellent personal and weird and wonderful websites that inspired me while writing this talk, and subsequently this post, and now, and forever.

The blog questions challenge

2025-02-18T00:00:00Z

This takes me back to my teenage years, doing Friday Five on my blog and later on the sets of questions on LiveJournal that were known as memes. Thanks Sally for the tag! <3

Why did you start blogging in the first place?

As a teenager I blogged obsessively, posting about every minute detail of my life, every boy or girl I liked, every exam I was dreading. In researching my talk about personal websites (a blog post version of which is coming soon!) I found many of my old sites on the Wayback Machine, and had a great time archiving all the posts and simultaneously turning inside out with the cringe of it all.

When I headed off to university I started going out and doing IRL things instead of being a little computer goblin, and that was it for blogging for about a decade.

In 2018 I was preparing for my first proper conference talk and had gathered a load of great advice from more experienced speakers. Someone suggested I put it in a blog post, so I wrote one on Medium (I know, I know). The following year the .dev domain names became available and I snapped up localghost.dev, and decided I'd move that post from Medium to here. Over the coming years I wrote another post... and another post... and I was averaging about 4-5 posts a year until 2023 when I picked up the pace a bit.

Sadly, that post was so full of now-broken Twitter embeds that I recently decided to archive it.

What platform are you using to manage your blog and why did you choose it? Have you blogged on other platforms before?

localghost.dev is an Eleventy shop, though in a previous incarnation it was built on Hugo, which I liked well enough but not as much as Eleventy. My blog posts are markdown files, with different categories of post rendered differently.
I originally found Eleventy a little intimidating as I had no idea where to even start with it and the documentation wasn't super clear at the time, but Andy created a brilliant guide to getting started with Eleventy which made everything a whole lot more approachable. I haven't looked back, and it's still my platform of choice for new projects. I keep meaning to try Astro to see if it's as good as people say.

In a past life, I used a whole host of different platforms: free web hosts with static HTML pages, Diaryland, Greymatter and Wordpress blogs hosted by random bloggers I'd met on the internet, Blogger, LiveJournal. I have very fond memories of Greymatter.

How do you write your posts? For example, in a local editing tool, or in a panel/dashboard that’s part of your blog?

Right now I'm writing this post in VS Code; if I'm writing longer-form posts that require a bit more editing and thinking, I'll use iA Writer to get my thoughts down, then back to the IDE to get it ready to publish.

I've briefly considered moving the writing to a CMS of some sort, mainly because I hate manually inserting images and faffing with image sizes, but since updating my site to use Eleventy Image that's become easier. I want to keep this a static site, plus I don't have the energy to self-host CMS software and keep it up to date, and considering how relatively infrequently I write anyway, it's not really worth it.

When do you feel most inspired to write?

Not as often as I'd like. Occasionally I'll be struck by a great idea, write it down in Obsidian or something, and then forget I wrote it down. Now and then I'll think "I could write a blog post today!" and go spelunking for my list of ideas and pick one I feel like writing about. Sometimes those ideas get turned into conference talks instead, and sometimes my conference talks get turned into blog posts.

Some weekends I'll sit down intending to bash out a few thoughts about something that's been on my mind, and then accidentally write a big post. Those are some of the best ones I think, because they tend to be more personal. I've found that sitting down and trying to force myself to write something is never a good idea. I've made peace with the fact that I post relatively irregularly, and I'm just happy when inspiration does strike. I'd love to be one of those folks who frequently posts useful technical tutorials and deep-dives on their blog, but I'm afraid you'll generally get the contents of my brain instead.

I think that's powerful in itself, though: we're expected to be part of these big capitalist hellscape social media networks and post all our thoughts on there for them to comb for ad targeting parameters, and then try to sell us things. They can hide our posts from others if they don't like what we're writing about. Even on sites like Mastodon – less capitalist, still hellscape – the reply guys come out in full force and tell you exactly what they think of your post and how actually that's a bad take because blah blah blah... This is my own website, and I can post whatever I want.

Do you publish immediately after writing, or do you let it simmer a bit as a draft?

Generally I'll do it all at once, though for bigger ones (like the version of my personal websites talk I want to write) are so big that I need to do them in several sittings. I am about to leave the house, so there's a risk this one will be languishing on a branch for a while until I remember that I need to finish it.

What’s your favourite post on your blog?

I have different favourites for the personal posts and the informative posts, so here's a few of each.

Personal:

Useful:

Any future plans for your blog? Maybe a redesign, a move to another platform, or adding a new feature?

I will almost certainly add a new theme at some point, because more is more. I'd also like to start collating some of my weird and wonderful pet projects under the localghost.dev banner rather than on individually hosted sites.

I'm also planning on starting a webring for technopessimists based off of a thread of very tired people on Mastodon, so watch this space.

Who’s next?

I'm relatively late to the party and not sure who hasn't done this yet, so if you're reading this and you haven't been tagged before, this is me tagging you!

Good links: 16 February 2025

2025-02-16T00:00:00Z

You Are Not Meant To Scale - Keith Kurson - “Take a deep breath, and say out loud: I am not a machine, I am not meant to scale. You have a finite amount of energy, and a community of people around you who can use that energy. You can use that energy, to make it through the day, which is the most important thing. Waking up tomorrow is the name of the game.”
Tech continues to be political - Miriam Suzanne - “There are certainly a number of people raising alarms or expressing frustration, but we’re often dismissed as uninformed. Based on every conference I’ve attended over the last year, I can absolutely say we’re a fringe minority. And it’s wearing me out. I don’t know how to participate in a community that so eagerly brushes aside the active and intentional/foundational harms of a technology. In return for what? Faster copypasta? Automation tools being rebranded as an “agentic” web? Assurance that we won’t be left behind?”
CSS { In Real Life } | Debating the Merits of LLMs - “ An LLM [trained on thousands of documents], while useful, shouldn’t invent new information. It processes the text that already exists, not the science behind it, and if it appears to offer up something new then that should be met with the utmost scrutiny. And it remains to be seen whether they (and others like them) will be worth the extraordinary amount of energy and resources that AI demands.”

Good links: 9 February 2025

2025-02-09T00:00:00Z

Everyone knows your location - It’s quite jarring to see the kind of information that gets sent to the highest bidder from seemingly innocuous apps.

My month of rest and relaxation

2025-01-16T00:00:00Z

After 4 (cumulative) years of service at my job in late 2023, I became eligible for a 3-month paid sabbatical (honestly what a perk). My only prior experience of a work sabbatical had been the offer of a 6-month paid sabbatical after 25 years of service at a past employer, so needless to say, this was very exciting indeed.

Cautious of being alone with my thoughts for 3 months – my husband couldn’t take that much time off work – I decided to break it up into 3 month-long blocks and take them spread throughout the following couple of years. I took the first month in September 2024, a welcome rest after an intense few months on a particularly difficult project. As with any amount of free time of more than a couple of days, I felt like I was supposed be making the most of this time off and doing as much as humanly possible. I decided I’d learn new (non-work-related) skills; improve the house; do stuff in the garden. I did a bit of that. I started an electronics project to dismantle, clean and rewire a vintage Jubilee line door button to turn it into a Philips Hue lightswitch, except I got stuck on the part of the instructions where I had to actually wire it up to power the LEDs, and realised my knowledge of electrical engineering was so basic that I actually had to go back and learn that stuff first. I promptly forgot everything I learned as soon as I went back to work.

I strategically booked the second part of my sabbatical over Christmas and vowed that I was going to do as little as humanly possible for the first two weeks, then have a productive two weeks. As a sabbatical project I thought I’d have a go at learning some reverse engineering, as I’d done some CTFs at work and really enjoyed them, but it turned out I enjoyed them because they’re puzzles and I’m an absolute puzzle fiend. Re-learning how assembly works is not what I wanted to be spending my time doing (I learnt a fair bit about different processor architectures and low-level languages during my masters, but lack of use – and a very boring lecturer – has meant it’s all a distant memory), so I quickly abandoned that plan.

Instead, over the last three and a half weeks I’ve become such a potato that I’m considering changing my name to Maris Piper. I started (and sunk lots of hours into) replaying The Witcher 3 on PS5, played many many hours of La Mulana 2 in a horizontal position (and cracked the Steam Deck screen and replaced it myself), did a lot of leisurely cooking, planned the meals for our upcoming choir retreat. We did our usual quiet New Year tradition of having my friend over and playing board games, though this year we did manage to make it to midnight and walked up the hill in our local park to watch the fireworks over the river.

My husband took some time off over Christmas as well, and we spent some great time together, visiting a very Christmassy National Trust house, going to the garden centre (haha just kidding that was hell on earth at that time of year), going out for dinner, playing video games together.

I had the time to sit and arrange TWO songs for choir: Pink Pony Club by Chappell Roan (the most recent song I’ve ever arranged, by a solid 20 years), and Stacy’s Mom by Fountains of Wayne, which I’m very excited to teach in February. If you're interested, here are the arrangement recordings: Pink Pony Club and Stacy's Mom.

I picked up my knitting again after ignoring it for two years, and found it was a great way to keep my attention on the TV instead of looking at my phone. Yesterday I watched 7 episodes of Veronica Mars while knitting. (Can you believe I'd never watched it until now?)

Boris the dog came to stay as well, which vastly increased the desire to sit on the sofa playing video games (he likes to fall asleep with his head on your lap).

I went out a bit too:

before Christmas I visited a friend who’s just had a baby, and then went to Oxford Street and regretted my life choices
met up with a friend at the Photographers’ Gallery in Soho and then had a delicious cardamom bun at Söderberg
got my hair cut at a tiny but well-rated local hairdressers and I came away with a nice bob with a 50/50 chance of looking like Javier Bardem in No Country for Old Men as soon as I try to style it
went to see the Barbie exhibition at the Design Museum in Kensington, which was decent but probably not worth the trek across London (and honestly disappointed at the lack of Barbie Fashion Designer in the collection).

My month of re-evaluation

This time off also gave me opportunity for some reflection. I spent a lot of my late 20s defining myself by my career: I was a software developer first, and a person with hobbies and interests second. I was a Woman in Tech™, the only woman on my CS masters, and one of only a handful in the tech circles I moved in, so I had to Represent. I joined all the Women in Tech things. I went to tons of meetups (there were many more before the pandemic), I started going to and speaking at conferences. I loved my job and I didn’t understand why people would work jobs they didn’t love. I inexplicably made it onto some “Women in Tech Power List” in 2019. I was relatively well-known in web dev Twitter circles before it got bought out and I left in 2022; Twitter was a big part of my identity, which is horribly sad in retrospect. The most important thing was progression, being promoted and being the best (shout out to my fellow grammar school folks with lifelong overachievement complexes). I had lofty ambitions: I’d climb the ladder, and be a CTO someday!

(Having subsequently seen many CTOs in action over the years, I am fairly convinced this is not a role I want for myself. Props to CTOs.)

Having time to spend doing hobbies, hanging out with the dog, pottering around the house and not thinking about work has made me really redefine how I see myself. In recent times I had worried a lot that I was some kind of fraud turning up at these web conferences and chatting to the friends I’d made there, when my job hardly involves web development any more and I don’t even write much about tech these days because I don’t have the energy or will to do so.

I’m not a software developer first and foremost, I’m a musician who arranges music for a choir; I’m a cook and a baker; I’m a fiend for puzzles to an embarrassing degree; I’m a fledgling gardener; I sink hours of my life into video games; I’m a person who sometimes does fun things on the web but mostly doesn’t.

I still like writing code, and I like solving problems. I’m good at what I do. But when I put so much pressure on myself to be The Best At Everything And Also Promoted Quickly And Also Why Am I Not Enjoying This As Much As I Should Be I come away feeling like I’m bad at my job or doing something wrong.

I am grateful that I am paid well, I really like the folks I work with, and most all of that my job allows me to switch off when I finish work and enjoy the things that bring me the most joy. Of course I still have ambition, but it's not all-consuming like it used to be. I don’t have work Slack on my phone, and I can count the times I’ve worked past 6 on... two fingers? I can be Sophie, the musician/gardener/baker/potato who goes to work and does a good job and comes home and cuddles the dog. That sounds like a much more appealing identity to me.

I repaired my Steam Deck and it was fine, actually

2025-01-13T00:00:00Z

For Christmas 2022, I bought my husband a Steam Deck. It's a handheld games console that runs a version of Linux (so you can also use it as a computer and plug it into a monitor, if you want), and works seamlessly with nearly every game in your Steam Library. It's GREAT. I 100% use it more than he does, to play all manner of weird and wonderful things. It plays older games perfectly, and I even managed to play a bit of Baldur's Gate on there when it came out and my husband was playing it on the PS5 (and I just couldn't wait my turn). Had to crank the graphics down a bit and the battery didn't last super long, but it still ran!

Over the past Xmas period I played an unholy amount of La Mulana 2. A few weeks back I noticed that what I thought was a smear on the screen was actually a crack. I have no idea how it happened – I think I must have dropped it or something? It was well out of its warranty by this point, so I looked into repair options and was delighted to see that Valve actually recommend that you try and repair it yourself. They sell official repair parts through iFixit, who also have brilliant step-by-step instructions with really clear pictures. I've built a (granted, much larger) PC before, and I fixed the spring in my PS5 controller trigger, so I figured I'd give it a go.

So, I ordered a replacement screen kit, which comes with an iOpener kit that should be useful for the other small electronics I inevitably break somehow in the future. I also picked up a magnetic project mat: it looks a bit like a cutting mat, but it's magnetic and comes with an erasable OHP pen.

The iFixit instructions were really clear with the exception of the one about applying thermal paste, which said to apply thermal paste "[using] the application method recommended for your specific processor type". While the Steam Deck has an AMD processor, it's a custom CPU as far as I can see, and the Arctic Silver website they linked didn't have it listed. But I decided to go for a good old-fashioned pea-sized blob of paste, and it seems to be fine.

Overall, it went really well! I managed to replace the screen, and the hardest thing was actually applying the fiddly little adhesive stickers. To get the screen off, I first had to heat the adhesive – I used the microwaveable gel-filled iOpener tool that came in the kit, but you can use a hairdryer as well.

I did have one near miss, though, but not until after the repair: when I reassembled the deck I noticed the right trackpad wasn't working, and after a bit of googling and opening it up again it turned out that I'd not closed the latch on the ribbon cable connector properly. So I sorted that, and put the back case back on... only to realise I'd forgotten to take the Micro SD card out (the iFixit instructions tell you in red lettering right at the start to do that before you do anything else, and I did do that the first time round, but forgot I was supposed to do it when I opened it up after the repair). As I tried to put the back on, it snapped in half, leaving the half with the chip on stuck inside the SD card slot. I was slightly concerned I'd end up having to send it off for repair after all, but miraculously I managed to coax it out after some gentle prying with a pair of long-nosed tweezers, being careful not to damage anything. I tested it with another Micro SD card I had lying around, and thankfully it was fine. The only thing we lost there was whichever games were installed on the Micro SD card as opposed to the internal SSD, but we can just redownload those. It could easily have got permanently stuck or I could've damanged the contacts somehow. A lucky escape!

Because the Steam Deck was designed to be repaired, the various parts are well-labelled: the cables for things like the buttons have each end labelled so it's obvious which end goes in the motherboard.

I'm a big proponent of the right to repair, and it makes me happy to see things like this, and official replacement parts easily available! It's absolutely WILD that so many companies don't want us to repair their products, and would rather either make us pay for a replacement or encourage us to buy a brand new product. There is just so much waste and so much unnecessary expenditure.

I mentioned the PS5 controller before: the left trigger suddenly had no friction whatsoever and kept being activated with the slightest nudge. It turns out the tiny spring that keeps it under tension had snapped. I got a replacement for a few quid off eBay, and followed a tutorial on YouTube, saving me the cost of repair.

If you've never repaired your own electronics, I really encourage you to give it a go. Youtube and websites like iFixit are full of guides and step-by-step tutorials. iFixit also sells a lot of replacement parts, both genuine (in the case of Valve products) and aftermarket. The worst thing that happened in this whole process was because I have a terrible memory and wasn't diligent enough to follow the instructions thoroughly a second time, leaving the Micro SD card in. Following the actual steps was a breeze, and electronics are really not that scary, I promise!

2024: The year in lists

2024-12-26T00:00:00Z

It’s Boxing Day and I’m a small pile on the sofa. We successfully Did Christmas at ours this year, and I never want to see another mince pie (until next year).

So, what better time than now to look back on the year?

Skip to bits you care about:

The year in...

The year in...

...big life things

We bought a house! It's great! I have written at length about the house, but it's still so surreal to be living here. I now have my own office, so I'm working from home a lot more. We're hopefully getting a dog soon, as well. We hosted Christmas for the first time ever, and it was only moderately stressful.
I've been driving a bit more, trying to get my confidence back up. I had a minor car accident in 2018 that was quite traumatic (nobody was hurt, thankfully) and haven't driven much since. Managed to drive myself to IKEA, and later on the dual carriageway to the out-of-town shopping centre. I still can't bring myself to drive at night (when the accident happened) but I'm hoping to knock that on the head soon. The goal is to be able to drive to my parents' down south without needing James to drive me.
As I've got more senior in my role at work, my responsibilities have evolved and I found myself really struggling in a way I haven't before. Up until now, I've done fine context-switching constantly, and working in a very interrupt-driven way. I've found that as my work is less well-defined and the problems much more ambiguous – and I'm the one who has to decide what we do – I've been feeling completely overwhelmed and bad at my job. I thought I had too much on my plate, but when I listed everything out it wasn't actually that much. I'd always start to-do lists with the best intentions to try and keep on top of things, but would constantly forget I had them. After talking to various people and reading various things, I actually started to wonder if I had mild ADHD, and it was finally becoming a problem. I've asked to be referred for an assessent via NHS Right to Choose as the standard waiting list for ADHD assessment can take years.

...conferences

I stuck to my 4-conferences-a-year rule from last year, and it was great. Next year I might even do LESS. I love speaking at conferences, and travelling, but I don’t think I have the inspiration or energy to come up with another talk any time soon – so I’ll see who else wants to hear my migrations talk, but I may end up just doing a couple of speaking gigs next year.

In May I finally got the chance to speak at one of my fave UK conferences, Leeds-based All Day Hey. It was the debut of the talk I wrote based on our experiences migrating to Typescript at Monzo: less of a technical talk than you might think, and more of “how to do any kind of migration, and maybe don’t actually do it, have you considered that”.
I attended StaffPlus again in June. It continues to be the most relevant conference for what I actually do, but it's a thoroughly overwhelming experience with so many people as the event is combined with the massive Lead Dev. Apparently it's moving out of the Barbican next year, which hopefully means more tickets will become available for StaffPlus. It pains me how expensive it is; I had to borrow someone else's learning budget on top of mine to be able to buy the ticket.
Popped along to Bristol in June for Pixel Pioneers, a lovely web and UI/UX conference in Bristol. I keep meaning to go back to Bristol and explore some more, as it’s only a couple of hours on the train from London.
In September we travelled to Freiburg where I was lucky enough to be part of the roster for Smashing Conference. I met some amazing folks, and the organisers are some of the loveliest people I’ve ever met. I tried in vain to practise my extremely rusty German.
November brought with it Beyond Tellerrand Berlin. It was lovely to visit Berlin again, although I didn’t get much chance to explore. It was great to hang out with some of the folks I’d met at other conferences, and meet some new friends too! Alas, this coincided with FFConf, so I didn’t get to attend that this year.

Next year I’ve got JSHeroes lined up so far, plus one more that’s yet to be announced. I’ve heard so many nice things about JSHeroes, so I’m really excited to be speaking there!

...gardening

2024 was the year I finally got a garden. Well... two gardens, actually! We have a front and a back garden. When we moved in, the front garden was horribly overgrown, and the back garden was just long grass.

We dug in two beds in the back garden, and moved the path. I've now got a potting shed at the back, which is my own little gardening den. Next step is to get a little greenhouse.
James built me a couple of raised beds, including a little one for my herb garden. Whenever I need sage, parsley, thyme, chives, rosemary or oregano, I can just pop outside. (I've got basil growing merrily in a pot on the kitchen windowsill, as well.)
There was a sad-looking apple tree in a pot in our back garden when we moved in, and it's now been planted in the front. Hoping that will grow a bit more!
My acer, which for years was wind-battered and dehydrated by our front door, is now in the ground in a more sheltered spot. We've got heavy clay, but there are plenty of acers around in our neighbours' gardens, so I'm hopeful this one will do just as well.
I have killed several plants already, including a brand new clematis.
We hacked down the tough, overgrown shrubs in the front, allowing the hypericums (aka St John's Wort) and weigela to grow back a lot softer and nicer. We'd like to plant a handful more evergreen shrubs along the driveway to stop litter from being blown into the garden.
I spent a lot of time fighting dandelions and brambles, to varying degrees of success. I ended up giving up on the entirely-organic approach for the brambles, and poisoning the shit out of them, but it did at least seem to work.
I've planted a load of garlic in the herb bed (for lack of more appropriate space), as well as a ton of alliums, tulips, daffs and various spring bulbs in pots.
Hoping that the layer of mulch I put down on one of the beds will break down the clay a bit for the spring.
The raised bed on the front patio now has a seasonal container for some pizazz, plus a handful of heucheras and other bedding plants around it. Stuck some bulbs in there as well, and I am now at war with a fox which keeps trying to dig them up.

...travel

I didn’t do any Big Holidays this year, because of the house. Instead, we did a few little trips - James came with me to Freiburg, and we visited the New Forest as well.

This year’s lads’ trip brought us to Rye, in East Sussex. My second time in the area, but lovely to come back. We stayed in a lovely townhouse, went birdwatching at RSPB Dungeness, and walking on the marshes. Dungeness is an endlessly curious place and a site of special scientific interest (SSSI), with a unique ecosystem (the largest expanse of shingle in the UK, and the UK’s only desert) and two decommissioned nuclear power plants that loom quietly over the reserve. The reserve itself is peppered with tiny cabins, some built from old rail carriages, and one belonging to the late artist Derek Jarman. We popped into a few that had been converted into studios and galleries.

...books

2024 was the year I caved and started reading romantasy books. Unlike the time some years ago that I read Fifty Shades of Grey and Twilight because I felt like I should at least read them before mocking them – and they deserved every single insult – I read ACOTAR and then immediately hoovered up the sequels. They are very enjoyable and so easy to read, which is honestly exactly what I needed this year.

I feel like I’ve done a less good job than last year of reading the kind of books you tell people about and don’t immediately follow with some kind of excuse, partly because I’ve been perpetually exhausted and the only thing I manage to get through successfully is the literary equivalent of a Big Mac. But sometimes you just need that junk food fix in the name of escapism, and you can eat your Booker-prize-winning vegetables when you have a bit more energy.

Or maybe I should just stop being ashamed for liking this kind of book, that works too.

Side note: I feel like I need a separate list for “most tenuous analogies of the year”.

Let's get the romantasy ones out of the way first:

Yes, I read all of the Sarah J. Maas books: they can all pretty much be summed up as "Headstrong female heroine meets her fated true love and saves the world from the Big Bad over the course of 3-7 books". I will obviously read more of them.

Throne of Glass series: this series is probably the best out of all Maas' work, but the first couple of books are not quite as good as the rest. I think the latter books are genuinely good.
A Court of Thorns and Roses series: I enjoyed these a lot, ridiculous as they are. I think everyone makes some questionable choices, but it's still a lot of fun.
Crescent City series: a fantasy romance with a modern-day setting. First book was fun, second was all right, third read like bad fanfiction.
Paladin’s Grace by T. Kingfisher: fantasy romance, except the characters were over the age of about 25, and the male protagonist was a paladin who likes to knit socks for people. Delightful.
From Blood and Ash series by Jennifer L. Armentrout: see description for all the Sarah J. Maas books. Literally exactly the same.
The Fourth Wing: I kind of wish I could un-read this, because the writing is garbage and it's honestly so obvious the "bad guy" is going to be the love interest because of how extremely thirsty the protagonist is from the first page. There's also dragons, and the main characters getting horny because the dragons are getting it on. You see why I want to erase this from my memory. I don't really understand why people like this so much.

The rest of this year’s reads, in no particular order:

Children of Time by Adrian Tchaikovsky: a sci-fi set in the far future where we've gone and trashed earth so they're trying to populate a new planet with primates and some virus to fast-forward evolution, only it doesn't quite go to plan.
A Darker Shade of Magic by V.E. Schwab: a fantasy story about a magician who travels between parallel Londons.
Sistersong by Lucy Holland: a retelling of a traditional murder ballad The Twa Sisters.
The Immortal Life of Henrietta Lacks by Rebecca Skloot: a biography of Henrietta Lacks, the Black woman whose cancerous cells (known as HeLa cells) were taken and used for medical research without her knowledge. HeLa cells have led to significant developments in medical science, but she and her family never saw a penny. A really fascinating and heartbreaking read.
The Three-Body Problem by Cixin Liu: didn't quite finish this one, it just went on a bit.
The Essex Serpent by Sarah Perry: we actually watched the (very good) dramatisation of this on Apple TV with Claire Danes and Tom Hiddleston, and that spurred me to read the book. A Victorian paleontologist travels to a remote Essex village to investigate sightings of a so-called "serpent"
Say Nothing by Patrick Redden Keefe: accounts of the Troubles in Northern Ireland, and the lives of some of the key figures in the IRA. It was a fascinating read.

I read three books by Rebecca Kuang, and it wasn’t until I was halfway through Yellowface that I realised she was also R.F. Kuang who wrote the excellent Babel. She's now one of my favourite authors.

Yellowface by Rebecca Kuang: the story of a white author who takes credit for her late Chinese-American friend's work, and how it all unravels
Babel by R.F. Kuang: British imperialism, magical realism, linguistics and silver bars.
Currently reading The Poppy War by R.F. Kuang: a girl from a poor province of a fictional empire based on China gets into a prestigious military academy and discovers a talent for shamanism.

If you happen to be in central London any time soon (you poor soul), the big Waterstones on Piccadilly has a Booker library on the lower ground floor, with all the Booker prize winners and nominees over the years. It's worth a visit for some reading list inspiration!

...podcasts

My most-listened podcasts this year were:

If Books Could Kill – sardonic takedowns of well-known non-fiction books and political goings-on
Switched On Pop – pop music, analysed and dissected
Darknet Diaries – stories from the world of cybersecurity
Twenty Thousand Hertz – all things audio and sound.
I haven’t listened to Off Menu quite so much this year, but the recent Derren Brown episode made me laugh out loud in the street, which was moderately embarrassing.
New to me this year was Close Your Eyes: a drama thriller about a man who joins a cult to try and find his missing brother. It just gets weirder and weirder.

...music

I’ve officially had enough Taylor’s Versions, and I didn’t get tickets for the Eras Tour (unlike apparently everyone else??). Thought The Tortured Poet’s Department was boring and didn’t make it all the way through. Sorry Swifties.

BRAT - Charli XCX (or technically ‌Brat and it’s the same but there’s three more songs so it’s not): I definitely wasn’t immune to this absolutely ridiculous album’s charms, and some of the covers made the songs even better (girl, so confusing with Lorde is definitely the better version).
Everyone’s Getting Involved: A Tribute To Talking Heads’ Stop Making Sense - various artists: millennials’ obsession with Talking Heads has led to this excellent covers compilation of songs from the iconic Stop Making Sense live album/film. I particularly love Paramore’s cover of Burning Down The House, and girl in red’s Girlfriend is Better.
No Obligation - The Linda Lindas: the second album by a young band making very good rock music with a sprinkling of riot grrrl inspiration.
Hopes and Fears 20 - Keane: I was thoroughly obsessed with Keane in my teens. Posters, t-shirts, albums, posting on the official forums, curating a collection of bootleg mp3s. They somewhat undeservedly had a reputation as a very bland, middle-of-the-road band (probably because they were posh and got played on Radio 2), but I still think they’re absolutely brilliant. This will always be one of my favourite albums – it holds up so well – and I love a good remaster. We went to see them at the O2 for the 20th anniversary tour, and they’re as enthralling as they’ve ever been. Incredible songwriting, Tom Chaplin’s extraordinary voice, and beautiful instrumentation. This version also has some of my favourite B-sides on as well: Walnut Tree, Snowed Under, To The End Of The Earth.
copy/paste vol.1 (abridged) - Garbage: sneaking in at the last minute, this one only came out recently. I looove Garbage and these are some great covers – especially love the cover of Cities in Dust.
From Zero - Linkin Park: I was never much of a Linkin Park fan (though I feel like I should’ve been), but I honestly can’t get enough of The Emptiness Machine and I think their new vocalist suits them so well. I’ll probably go back and listen to all the old stuff.
Your Own Adventure - Hollow Hand: I saw Caitlin Rose at Moth Club this year, and Hollow Hand were supporting (and also being Caitlin's backing band). This is a great country/folk rock album by a band hailing from Brighton.
Bat for Lashes: saw her play at the Barbican this year with my friend who's a big fan, and had only known about one of her songs, but I had such a great time. She really is excellent live. I think my favourite album is Lost Girls (linked) which is very new wave/80s-inspired.
The Chappell Roan hype train (I am on it): I have finally learned how to pronounce her name (as in Sistine, not David La-), and though I was late to the Chappell Roan party I absolutely love her music. It’s so well-produced, and so much fun.
Speaking of well-produced, I’ve been arranging Stacy’s Mom by Fountains of Wayne for my choir, and it’s honestly SUCH a good song. We already knew Adam Schlesinger was a genius (he also co-wrote many of the songs for Crazy Ex-Girlfriend) but that song is just really, really excellent considering it was treated as just a joke song when it came out.

...video games

I spent many many hours playing video games, and we had some crackers this year. I’ve posted about many of the games I played in my “things I’ve been enjoying recently” posts, so this will be a lot of repeating myself, but think of it as... me reinforcing how good they are.

La Mulana and La Mulana 2: a fiendishly difficult Metroidvania puzzle platformer set in ancient ruins, where you play an archaeologist searching for the secret of La Mulana (or his daughter searching for her father in the sequel). I've never persevered with a game this much, ever, and managed to make it about 95% of the way through – beating some really hard bosses! Thanking the many people who have published hints for these games on the internet.
Lorelei and the Laser Eyes: another puzzle exploration game but this time with escape-room vibes. I played this one with my husband, him driving and me helping to solve the puzzles because I am a puzzle fiend. This one is extremely odd, but very satisfying.
Disco Elysium: a story-based exploration game, where your character (a detective investigating a murder) evolves based on the choices you make. Very funny, and the world-building is incredible.
Inscryption: do yourself a favour and don’t look up what this game is about before you play it. Creepy deck-builder with escape room elements.
Astro Bot: an absolutely brilliant adventure platformer that very deservedly won Game of the Year. It’s a PS5 exclusive, and takes full advantage of the features of the console to an amazing extent – they really have done a fantastic job of the haptics.
Heaven’s Vault: described as an "archaeological science-fiction adventure game" (all exciting words), you play Aliya, an archaeologist on the hunt for a missing roboticist in a strange futuristic nebula in space. You slowly build up a vocabulary of the language of the Ancients, and begin to understand more about what came before.
Rise of the Golden Idol: the sequel to The Case of the Golden Idol, this one is available for free if you’re a Netflix subscriber. A puzzling detective saga where you have to piece together what happened from clues in various scenes.

...blog posts

This year I published 16 blog posts, which is... considerably more than I expected given my mental state, if I'm honest. I didn't really write many technical ones, which I suppose checks out. I also set up automated posting from bookmarked links in Raindrop, and did it for a few months before my reading list overwhelmed me again.

Some of my favourite posts:

...Christmas dinner

Though I'm usually horribly pretentious when it comes to cooking – favouring recipes that require me to buy a jar of something by Belazu that's only available in a small number of Waitroses, that I use a tablespoon of and then it goes off in the back of my fridge – I went for the full trad Christmas Spread this year (with some outside contributions). Here's what I made (with any recipes), and my ratings out of 12 (days of Christmas). I leant heavily on Delicious Magazine's recipes, and some of them will stay, while others I won't bother making again.

KellyBronze turkey: 7 swans-a-swimming/12. As it was the first time doing Christmas, I thought I'd splash out on a really great turkey. It was indeed a really excellent turkey – they're free-range, allowed to grow and run around in the woodlands etc, so have a really good flavour, and the cooking instructions were very simple and precise – but ultimately let down by the fact that it is, well, a turkey, and therefore the most mediocre of all poultry. I think next year I'll do something else. (I did, however, appreciate their guidance of "Don't panic, it's just a big chicken".)
Combination-of-everyone's-recipes potatoes with goose fat: 5 gold rings/12. I let the team down and I let myself down by making too many potatoes and not putting them in a single layer, so they didn't get crispy.
Delicious Magazine's bread and cranberry sauces: 12 drummers drumming/12. The most heavenly, aromatic bread sauce I've ever had (even for a bread sauce denier such as myself), and gorgeous orangey cranberry sauce. Please halve the quantities for your own sanity (and freezer space). You can make these ahead, too. These two are going into my Christmas recipe hall of fame.
Delicious Magazine's vichy carrots recipe: 7 swans-a-swimming/12. I was already quite stressed by the time it came to dish up, and the water was supposed to evaporate and leave the carrots in a buttery glaze, but they were very much still underwater. The flavour was very good, but I would not repeat the experience.
Delicious Magazine's sausage, sage, prune and onion stuffing recipe: 11 pipers piping/12. Very good, but missing something. I think my favourite ever stuffing is Ottolenghi's cranberry and caraway stuffing, but that would probably be a bit much for Christmas. I made double of the Christmas stuffing recipe, and turned the other half into sausage rolls with some leftover puff pastry I had in the fridge.
Delicious Magazine's fondant sprouts with chestnuts and bacon: 10 lords-a-leaping/12. A timeless combination, and charring the cut sides of the sprouts first gives it a lovely nutty flavour. I think I could probably have just roasted them, though.
Delicious Magazine's butter roast parnips with hazelnuts and sage: 9 ladies dancing/12. Points deducted due to absence of blanched hazelnuts at local Co-op (and I forgot to put them on the Sainsbury's order). Anything in butter is good, and these were very nice indeed, but again: nobody ate the crispy sage leaves.
Delicious magazine's marmalade pigs in blankets: 11 pipers piping/12 (can't really go wrong can you). The touch of marmalade is a lovely finish, though one point deducted because I now have nearly an entire jar of marmalade to use up.
Delia's red cabbage: 12 drummers drumming/12. This is the one recipe we make every Christmas in my family, and it's great every time (this year, Mum brought it). It's tart, aromatic, and comforting.

That’s it for now

Time to revert back into liquid form.

Best wishes for the new year, and I hope it’s everything you want it to be.

Good links: 8 December 2024

2024-12-08T00:00:00Z

modernity is stupid: a rant not about politics - every word of this post resonates, and you should read it.

Some things I've been enjoying recently (November 2024 edition)

2024-11-30T00:00:00Z

A roundup of fun things and projects.

TV

I mentioned to my husband that I'd never watched Life on Mars, so we're watching it all the way through, and it's brilliant, obviously. I'm horribly annoying when watching things that have been filmed in places I know because I will a) announce where it is and b) complain if a character goes from one place to another in a way that isn't geographically possible. For example, the most recent series of You involved the main character walking home from his place of work – the campus of Royal Holloway – through Spitalfields market, which is a 9 hour walk. Anyway, Life on Mars is set in Manchester in the 1970s, so there are about 4 streets in the Northern Quarter/Ancoats area that pop up repeatedly (Dean Street always shows up in films and TV when they want 'early-to-mid century-looking street'), as well as a courthouse I'm fairly sure was the university humanities building where I had a lot of lectures. James is a patient man.

He'd never watched Look Around You (which my university housemates and I were thoroughly obsessed with) so we've been re-watching that as well and I'm happy he's enjoying it. For the uninitiated, it's a parody science programme – the first series parodies 1980s educational programmes and the second series is much like Tomorrow's World, with presenters (including Olivia Colman) and bizarre scientific inventions. Featuring cameos from such icons as Simon Pegg, Edgar Wright, Nick Frost, Mark Heap and Harry Enfield. Series 1 is probably better, but nothing tops the actor Kevin Eldon singing Machadaynu.

I've also been persuaded to start watching Arcane, and though I've only watched one and a half episodes so far I really like the art style!

Food

I absolutely haven't kept up any kind of recipe sharing habit recently because, well, life, but here are a few bangers I've cooked (relatively) recently:

Roast chicken with tomatoey bulgar wheat from "Greekish" by Georgina Hayden – this is the roast chicken recipe I will make for the rest of my life. The chicken isn't even the best bit. The bulgar wheat gets cooked in the juices, and is incredible. The whole book is great, but this is a standout.
Cochinita pibil – great to feed a crowd, and absolutely divine. I bought a ton of tiny corn tortillas from mexgrocer.co.uk.
After 35 years I've finally decided I like aubergine, and it's all thanks to this pasta alla Norma recipe (good old Ottolenghi).

Games

La Mulana is a fiendishly difficult Metroidvania puzzle platformer set in ancient ruins, where you play an archaeologist searching for the secret of La Mulana. I've never persevered with a game this much, ever, and managed to make it about 95% of the way through – beating some really hard bosses! – until I got to a really difficult horrible jumping puzzle over some spikes that kept killing me, and decided I couldn't be fucked. I really love a puzzle though, so still rate that game even though I had to play it with the hint guide open because it really is impossible. Give me Metroidvania, secret passages and things hidden in plain sight, and I am guaranteed to be a fan. I've just picked up the sequel in the Steam autumn sale.

I also really enjoyed Heaven's Vault: described as an "archaeological science-fiction adventure game" (all exciting words), you play Aliya, an archaeologist on the hunt for a missing roboticist in a strange futuristic nebula in space. You slowly build up a vocabulary of the language of the Ancients, and begin to understand more about what came before. I loved it so much I've put it on my all-time favourites list. Puzzles, adventure AND linguistics! I particularly loved starting to recognise different morphemes and understanding which ones indicated negation, verbs, nouns etc., so identifying the script became a lot easier as the game progressed.

Finally got around to playing Disco Elysium several years after everyone else. It's a story-based game – it's pretty much entirely walking around, exploring and talking to people at length – but your dialogue choices and actions affect who you are as a character and how the other people around you perceive you. I'm being a good character because I am physically incapable of being an arsehole to people in video games, but I would like to play it again and be the absolutely unhinged lunatic. It's very funny and the world-building is incredible.

House

We've well and truly settled in to our house, and I love it so much. Especially now that we've nearly finished painting over the previous residents' questionable colour choices. I've got my own office, which has made working from home an absolute delight.

It's amazing to have enough space to leave craft stuff out on its own table, and I've had a great time finding prints to put up on the walls. There's still a handful to put up but I'm waiting to find a big one to go in the middle of the gallery wall behind my monitor.

Craft

Having space in my office for crafts means I've actually done a bit of sewing recently, though still haven't picked up dressmaking since the early days of the pandemic. A few of us in my choir decided to make a banner in the style of the hand-sewn ones women traditionally made for protests and campaigns (suffrage, peace camps, etc), that we could display at gigs and performances. After brainstorming a few ideas we decided to keep it simple and create a banner with our logo on it. I could probably tell you what podcasts I was listening to while painstakingly zig-zagging edges. It was a joint effort between about five of us, which makes it really special, and I think it came out really well.

It absolutely needs an iron, but it takes a lot more than a blog post to persuade me to get the iron out.

I also decided it'd be a GREAT idea to DIY an advent calendar this year. It is definitely not cheaper than buying one, but it was a fun little project. I'd had lofty ambitions of filling it with non-edible things, but it turns out that gets very expensive very quickly, so I gave up and it's mostly treats. I'm not the greatest painter, but good enough – I think it looks cute!

Art

A couple of months ago I went to see Fragile Beauty, the exhibition of Elton John & David Furnish's photography collection at the V&A. I've always loved photography – specifically portrait and documentary photography – so this was a delight. And there was so much of it! I hadn't really known what to expect, but was amazed to see some prints of iconic works by David Avedon, Cindy Sherman and Nan Goldin amongst others. Each room had been expertly curated and I could've spent hours in there. It's on until early Jan 2025 but I think it's been doing a bit of a world tour, so if it pops up near you I highly recommend it.

Misty and Jimmy Paulette in a taxi, NYC, 1991. ©️ Nan Goldin

Books

Continuing my habit of alternating a good book with a trash book. One grown-up book, one fantasy romance book. Like main course and dessert.

Children of Time by Adrian Tchaikovsky: a sci-fi set in the far future where we've gone and trashed earth so they're trying to populate a new planet with primates and some virus to fast-forward evolution, only it doesn't quite go to plan. Not for arachnophobes. The second one didn't grab me quite so much but I'll finish it at some point!

I've been reading plenty of fantasy-romance books as well, like everyone else in my immediate sphere. I've ticked off some of the big series: Throne of Glass, Crescent City, From Blood and Ash, etc. They all blend into one at some point, but are still completely unputdownable. I read one recently called Paladin's Grace (by T. Kingfisher) which was quite a nice change: the characters were over the age of about 25, and the male protagonist was a paladin who likes to knit socks for people. It was a nice break from all the brooding and snarling.

I also enjoyed Yellowface by Rebecca F Kuang – an excellent story of a white author who takes credit for her Chinese-American friend's work – and it took me far too long to realise she is also R.F. Kuang who wrote the brilliant Babel (linguistics! magical realism! colonialism!). So, an author to follow.

Garden

Finally, the garden! It's wonderful and immensely overwhelming having a garden – well, two actually, as we have a front garden as well – but we've made such a difference in it already. I swapped out the summer planter for a winter one I put together myself, featuring some gorgeous ornamental brassicas (the cabbagey plants), a spiky blue grass and some other foliage for some texture, and gorgeous berries for colour ("Christmas cherry" apparently, though highly toxic which is not very Christmassy!). I love it, and so far the slugs have stayed off.

The rose stems are to dissuade foxes from digging up the newly-planted heucheras around it...

The art in everyday life

2024-11-12T00:00:00Z

I was very fortunate to speak at another excellent Beyond Tellerrand last week, alongside some brilliant and wonderful people. Once again I was inspired by the variety of topics and messages people shared on the stage. Alongside the usual artists’ inspiring career stories and techies’ (equally inspiring) web design magic, there was a strong undercurrent of anticapitalist messaging in a way that is more important than ever, especially relevant given the conference happened in the wake of a truly disastrous election result in the US.

Talented illustrator and lovely human Paddy Donnelly spoke about his career change from UX designer to children’s book author and illustrator. He reflected that before he changed career, he realised that everything he created was digital, and that he wanted to create a lasting legacy in the world – something that would be around long after he was.

At this point I had one of my multiple (and regular) existential crises wondering whether I could really say the same about anything I do. Will there be anything that I can point to when I’m old and say “I did that”? (What is the point of anything, what am I doing with my life, etc etc.)

Well, possibly not. I do software development for a bank. But I don’t actually think that matters very much. Because art is many things, and some of those things are transient. And I relish things that bring me joy in the present moment.

(To be clear, I totally respect Paddy’s thinking there and our world is all the richer for the beautiful books he writes; it’s actually my own immediate existential crisis that I’m disagreeing with here.)

I don’t necessarily believe that everyone can have a job or even a career that makes them spring out of bed in the morning and gives them creative satisfaction in their day-to-day. Ultimately we live under late-stage capitalism, and I certainly couldn’t afford my house (or indeed any house) if I dedicated my life to, say, running choirs. I massively respect anyone who can and does make a living from a creative art, and I thank you (and want to buy your wares). I work for a Tech Company doing Tech Things for Capitalism, but exercise my agency by being very selective about the companies I work for and the areas I want to work in. The company I work for may be a bank, but it’s changed the banking industry for the better and I believe in the company’s mission. A lot of the work I do is around improvements for customers and the customer service agents who serve them. It’s not children’s books, but it’s a living.

So I get my creative energy and joy from elsewhere. I’m fiercely protective of my free time, even if it’s just spent horizontal on the sofa playing video games. When the working day is done, I have creative pursuits that bring me joy and put art into the world in their own little way.

The wonderful Hidde de Vries stepped out of his usual role as the Pope of Popovers in his closing keynote Creativity cannot be computed. It was a love letter to art in all its forms, a look at what it represents, and what it can do.

Hidde at Beyond Tellerrand Berlin 2024

And it made me think some more. I should be broader in my definition of "art". Anything remotely creative can be art, if you want it to be. Anything that moves you, or makes you feel something, or brings you joy.

Art is in the songs I teach to my choir, the arrangements I’m proud of even if they only exist as mp3s on a Google Drive and as individual parts in the brains of a handful of exhausted Londoners. We’ll perform those songs, bring joy to the audience (and ourselves), and people might remember it, or they might not.

Art is watching other people in the choir learn to arrange and conduct songs, their faces lighting up as the harmony comes together and the choir is brings their ideas to life.

Art is in the weird and wonderful websites I make occasionally, which bring people (including myself!) a moment of joy when they land on them.

Art is in the food I make. I’m a great cook (and an even messier one) and the Jewish side of my family has instilled in me a primal need to feed everybody. I show love through my food, so I bake for people, I mail out homemade sweets at Christmas, and I love feeding a crowd. Hours of preparation is gone in minutes, but it’s worth it.

Cardamom buns: recipe FixFeastFlair

Salted honey and sesame custard tart: recipe Benjamina Ebuehi

Art is in the flowers I grow, which bring colour and beauty to the garden for a brief season before dying back, but will sustain the insects and birds that pollinate our plants and underpin our ecosystem.

Verbena Sissinghurst

Geranium Rozanne

Art is in the little crafty projects I do, and sometimes finish, but usually don’t. I’m painting an advent calendar right now, lots of little wooden drawers, and I’m not the greatest painter but it’s going to be delightful, and full of chocolate anyway.

I think there’s even a bit of art in shitposts and stupid jokes that I make knowing that people will roll their eyes but it gives me a little bit of joy to think about it. I learned from an early age that I could make people laugh. If I can distract you from... all of this for just a second with a really stupid joke, it was worth it. (That said, some of my jokes definitely deserve the withering looks.)

All this to say, art can be fleeting and still be worth it. I encourage you to lean into the little things that bring you joy, and think about where there’s art in those things. You don’t have to paint the Sistine Chapel to bring art into the world.

It’s becoming more important than ever that people keep making art, in the age of derivative AI slop and an ever-worsening political climate. Deliberately creative pursuits are radical. I gave a talk a while back about building personal websites (and I’ll write that talk up soon) and how that’s a radical act in this day and age of an internet of shit, and I think this is exactly the same. In a world of shit, creativity for creativity’s sake is radical.

Good links: 22 September 2024

2024-09-22T00:00:00Z

Nic Chan - Nic has just finished rebuilding her website and it’s INCREDIBLE! Seriously just look at it
CSS { In Real Life } | Limitation Breeds Creativity: A Study in Composition with Custom Properties - Michelle has done some (characteristically) amazing things with a handful of divs.
Introducing @bramus/caniuse-cli, a CLI tool for “Can I Use …” - This is going to be very useful!
Selling a small front-end web project — what I learned - Alistair Shepherd - “In mid-2024 I sold a small unmonetised web project of mine called My Top for Spotify. This is my experience of the sale and what I learned!”
http:, ftp:, and ... dict:? - Terence uncovers a long-forgotten protocol.

You should go to conferences

2024-09-16T00:00:00Z

Those of you who know me (or who have been reading my posts for a while) will know that I'm often at conferences. I tend to speak at around four a year, plus attending one or two on top of that. I also know a great many people who never go to conferences, and I think they're missing out. Conferences are a fantastic way to not only broaden your horizons when it comes to your job and your skills, but also meet excellent people who might lead you to a new role, or new experiences.

Through the talks I've seen over the past few years, I've learnt so much about what's possible in CSS nowadays, learnt from others' stories and experiences, got inspired to stick popovers everywhere, levelled up my knowledge of web performance, and so much more. As a developer, I also benefit from e.g. the UX and design talks at mixed conferences that give me more of an insight into how those processes work and how best practices evolve, because we don't and shouldn't work in silos.

The talks are obviously very important, but one of the best things about conferences is the "hallway track" – that is, meeting and chatting to like-minded folks. Organisers will often encourage the "Pac-Man rule" - standing in a circle with a gap to always allow new people to join in. The afterparty is a great opportunity to socialise and meet people who do what you do. Even if you go to a conference with a group of people from your company, I encourage you to chat to others and see what other companies are up to. Maybe they're facing the same challenges as you are; maybe they've come up with a creative solution to something you've been thinking about. Maybe you've got something to teach them.

It's obviously not a cheap thing to do (though some are not too expensive in the grand scheme of things), and especially if you're self-employed it can be a lot of money to spend. You can always ask folks who spoke at or attended particular conferences in previous years what they thought of the event to make sure it's worth your time.

A lot of conferences also offer scholarship tickets to folks who wouldn't otherwise be able to attend for monetary reasons, as well as to encourage a more inclusive and diverse attendance.

If you're not totally on board with in-person events, that's fine too – most if not all events these days have a livestream you can watch instead. There is usually a conference Slack or virtual platform where you can chat to other livestream attendees.

Buy your tickets early

Since the pandemic, things have been a lot more challenging for conference organisers. Everything's more expensive, meaning the cost of running the events is higher. Companies have been tightening their belts and it becomes harder for attendees to get the budget for conference tickets. Organisers of conferences I've spoken at recently have reflected that people are buying tickets later and later, making it really unclear whether they're actually going to sell enough tickets to go ahead. Marc, who organises Beyond Tellerrand, wrote about this earlier in the year. Though speakers generally invoice after the event, the money from ticket sales needs to be coming in earlier for organisers to be able to afford things like hotels, venue hire and catering. Sadly, Front Conference was unable to go ahead this year because they didn't sell enough tickets ahead of time. I was lucky enough to speak last year, and it was a fantastic event with some really incredible speakers.

(It should be said here that some bigger, more commercial conferences are, well, extortionate: my learning budget is a generous £1000 a year but Lead Dev/StaffPlus London was so expensive that I actually had to beg and borrow a bit of someone else's learning budget to cover the ticket. I was too late for the early bird or group tickets for StaffPlus. It's a shame, because that's one of the conferences I get the most value from these days. But the majority of conferences I've seen – especially the community-run ones – are somewhat less pricey.)

The other benefit of buying tickets earlier (besides, you know, the conference actually being able to take place) is that you can often take advantage of early bird discounts, getting your ticket cheaper than you would otherwise.

Promoting conferences has also become much more difficult now that social media is so fragmented. Twitter had a great reach which just doesn't exist any more.

Conferences need sponsors!

Conferences rely on corporate sponsorship to keep ticket prices reasonable. As well as venue hire (which can be super expensive), there's generally some kind of catering costs, speaker travel and accommodations (many conferences also pay their speakers an honorarium to reflect the hard work that goes into speaking), live captioning, streaming, AV, etc. There's usually an afterparty which will likely cost to hire as well.

Generally conferences offer sponsorship packages of different tiers – for example, All Day Hey! offers a package that lets you sponsor the coffee for attendees, which is nice.

If you can, consider asking your company to sponsor a conference. It's great for B2B companies to get the word out about their product, and it can be good for hiring as well!

Some of my favourite smaller web conferences

This is a living list (updated sporadically) based off of my experiences speaking and attending, as well as recommendations from some friendly folks on Mastodon. This list is by no means exhaustive, and if there's a conference you've attended that you really love, please let me know and I'll add it to the list with your personal recommendation!

My vague price indicators:
£: up to £150
££: £150-300
£££: £300-600
££££: £600+

Events with a range indicate early bird pricing vs full pricing.

UK

State of the Browser (London, web/accessibility, 1 day, £) An absolute bargain. PLUS you get to have coffee in the glorious Barbican conservatory.
FFConf (Brighton, web/UX, 1 day, ££). A family-run web event and general lovely vibes.
All Day Hey! (Leeds, web/design/UI/UX, 1 day, £). Similar vibes to FFConf, but with northern accents.
Middlesbrough Frontend (Middlesbrough, web/JS, 1 day, £). A newish conference which is small but mighty, and run by some very dedicated folks.
Front End North (Sheffield, web, 1 day, TBC). Back for 2025! Organised by a small and lovely team, and guaranteed to be an excellent event.
Pixel Pioneers (Bristol, web/design, 1 day, £-££). Small but perfectly formed (and carefully curated) conference on the lovely Bristol waterfront.
WebDevConf (Bristol, web, 1 day, £). Similar vibes to SOTB/All Day Hey (and in fact they are conference "friends").
iOSDevUK (Aberystwyth, iOS, 1 day + workshops extra, ££). Recommended by Rhys: "My first iOS conference, and just so incredibly welcoming. I knew basically nobody going there, and met so many lovely people there last year – going back this year and seeing so many again was a delight."

Europe

Beyond Tellerrand (Berlin/Düsseldorf, web/art/creativity/all sorts, 2 days + workshops extra, ££-£££). Two events a year, in Berlin and Düsseldorf. How does one even begin to describe Beyond Tellerrand? A melting pot of web, code, art, stories and experiences. I laughed, I cried. Check out my blog post from Düsseldorf 2023.
CSS Day (Amsterdam, web, 2 days, ££££) I got invited to speak here in 2023, and it was absolutely mindblowing to see all the new developments in CSS. Awesome venue – an old church! – and excellent folks.
Smashing Conference (Antwerp, design/UX; Freiburg, web/UI/UX; 2 days, £££) I just came back from Smashing Freiburg, and had a fantastic time. The organisers are some of the loveliest people I've ever known, and every talk was of an exceptional standard. What a great event, and a lovely setting too.
Front Conference (Zurich, web/design/UX, 2 days, £££ at early bird price) – TBC if this returns for 2025. I really, really hope it does. Dual-track conference, one design/UX and one web/tech, with an excellently curated lineup. Zurich is a beautiful place, as well.
WeyWeyWeb (Málaga, web, 2 days, ££ - group tickets available). The beautiful town of Málaga plays host to a small but lovingly put-together conference. A great chance to wear only a light jacket in November.
JSHeroes (Cluj-Napoca, Romania, web/JS, 2 days, £-££). I've not been myself, but I have it on good authority this is a lovely community-led event.
PyCon Italia (Bologna, Python, 3 days + workshops extra, TBC) Recommended by Florian. They offer two-tier pricing so it's cheaper for folks who are paying their own way. Florian says: "great community, terrific vibes, beautiful locations, exceptional speaker wrangling."
PerfNow (Amsterdam, web performance, 2 days, ££££) Sia says: "Single track, one topic, great speakers, cool venue".
Future Frontend (Espoo, Finland, web, 2 days, £££). Sylwia says: "The organizers put a lot of care into the speaker selection, and the sessions are grouped into thematic clusters which is interesting (so you have for example a block on green tech or music tech). There are lots of local speakers which is great. Everything is very well-organized and folks attending it are lovely. It’s a good conference to both learn a lot (it’s not devrel pitches), meet some nice folks, and enjoy the Finnish never-ending summer days."
NordicJS (Stockholm, web/JS) – Jonas says "Nordic.js have been really fun in every year I’ve attended!"

Rest of world

Smashing Conference (New York, web/UX, 2 days + workshops extra, £££) See above!
JSConf (different countries) - I was lucky enough to go to the last CSSConf/JSconf EU in Berlin in 2019 and it was incredible. Lucky for us there are still a variety of JSConfs in different places including Budapest, Honolulu and Guadalajara!
Clarity Conf (online in PST, design systems, £££) – recommended by [email protected]/113147646286717715">Mike.
FITC (Toronto, design/content/UX, 2 days, ££££) recommended by [email protected]">Gregory
WordCamp (various locations, Wordpress, £) Community-run conferences for WordPress developers, worldwide, everywhere from Costa Rica to Kerala.
??? – would love to hear of more conferences outside of Europe that I should be mentioning here!

New garden theme

2024-09-15T00:00:00Z

I've built a new theme for this site, inspired by my love of gardening as well as one of my favourite video games.
With no pixel artistry skills to speak of, I'm grateful to the various artists over on itch.io, who I've credited on the about page, for all their lovely creations!

Good links: 15 September 2024

2024-09-15T00:00:00Z

How to Monetize a Blog - Just read it, ok? I promise it’s extremely worth it.

Good links: 18 August 2024

2024-08-18T00:00:00Z

The area element - I’m really enjoying Heydon’s
HTML element safari, from the better-known to the lesser-known. This will certainly fall into the latter camp for a lot of folks!

liveness probe

2024-08-12T00:00:00Z

After an initial burst of blogging energy January followed by a series of automated posts featuring good things I’d read recently, it fell off a cliff towards the end of March. I didn't get bored, I promise!

Life got extremely busy and reading through an ever-growing mountain of RSS feeds became too much of a chore. Eventually I declared bankruptcy and marked all as read, so if I’ve missed anything particularly excellent please do send it my way.

The main thing contributing to aforementioned busyness: we bought a house! It’s great, we love it, we each have our own office which has completely transformed working from home for me, and means my husband’s sacred work space is safe from the human clutter tornado he’s married to.

I’m now living out my gardening dreams, though those seem to involve more fighting shrubs than I’d anticipated.

My sad little wind-battered acer is now loving life in a sheltered corner of the garden, and I’m hoping to put it in the ground. James is going to build some raised beds for a vegetable patch. I love going out there first thing and doing a bit of weeding, and it’s amazing to be able to just sit back on a deckchair in your own green space.

We now have things we could only dream of when we were living a flat:

a barbecue
a fire pit
outdoor furniture
a dishwasher
bifold doors
room for a dog
an endless wave of slugs and snails eating my plants

We do have a lot of parakeets in the area, and so far the only bird visitors I’ve had have been pigeons and magpies. I put up a feeder but I don’t think there’s enough shelter for little birds to feel safe, so hopefully when the SHED I BOUGHT (!!! so excited) arrives it’ll be a bit more welcoming to our little winged friends.

I can’t promise this won’t become a gardening blog.

Outside of house, I’ve been adjusting to new responsibilities at work. I’ve been tech lead of my team for quite a while now but it’s grown a lot, so I’m adjusting to that plus leading big producty projects (as opposed to the more platformy projects we were doing before). It’s uncharted territory for me and I’ve done a lot of flapping, ranting and introspection to come to the conclusion that above anything else, I’m stressing myself out with my chaotic ways of working. I’m trying to be a bit more focussed and prioritise my time better (and get the hell off Slack). Impostor syndrome is repeatedly striking me over the head at the moment as I feel like any day people are going to realise that despite the hard-earned respect and reputation I’ve amassed over the last five years, I’m actually three children in a trench coat repeating “what are the tradeoffs”. I know it’ll get easier – it always does – but that doesn’t mean it’s not painful and difficult.

I limited my conference speaking to four events again this year, finding that’s the magic number as long as I don’t have to spend half the year writing a load of different talks. I’ve been talking about technical migrations, and the lessons learned from the Typescript one we did at Monzo. I think it’s highly relatable, and the reception seems to be really good. I kicked off my conference year with All Day Hey in Leeds in May, followed by Pixel Pioneers in Bristol in June. Coming up I’m speaking at Smashing Freiburg in September, then Beyond Tellerrand Berlin in November. What an exciting list!

On a side note, I was really sad to hear that Front conference had to cancel their event this year. I spoke there last year and it was really fantastic, with a great organising team. Marc Thiele, who runs Beyond Tellerrand, wrote a great blog post about the challenges of running conferences these days.

What else can I tell you? The last few months have been a blur of meetings and soil under my fingernails and endless paint samples.

After four years’ service at Monzo I became eligible for a three-month paid sabbatical, and I’ve got the first month in September. I have a ridiculous electronics project lined up which you can be sure I’ll post about. I’m excited to have a bit of downtime!

Different ways to mock third-party integrations in Jest

2024-05-12T00:00:00Z

A few years back I got so bored of taking attendance for my choir that I wrote a Slack integration to do it for me (I got us on Slack in 2014). That evolved from a dodgy Python app triggered by slash commands into into a neat little Typescript suite called Choirbot that triggers via cron job. It does everything from posting reminders about upcoming rehearsals to reporting on attendance stats, and this weekend I added a new feature: the ability to nominate someone to facilitate the rehearsal if nobody else volunteers by 5pm the day of rehearsal.

I don't touch the code very much, so every time I go back to look at it I have to spend ages figuring out how everything works all over again. You know why that is? Because I was lazy and didn't write any tests.

You might think that a small side project isn't worth writing tests for, especially if it's just you contributing to it. But the odds of you breaking stuff increase exponentially the longer you leave it before adding a new feature, especially if that project involves libraries that get out of date, old versions of Node, and third party dependencies that involve arcane magic.

So before I embarked upon building new functionality, I needed a full test suite that I could rely on to tell me if I'd broken anything, and that would show me a) what all the data structures look like and b) what the expected behaviour is across the whole app.

My Choirbot app has three major integrations: googleapis/google to read from Google Sheets, @slack/web-api to communicate with Slack, and @google-cloud/firestore as a document store. It also reads from the gov.uk Bank Holidays API, still one of my favourite APIs ever due to its inclusion of whether bunting is appropriate for each holiday. I'd need to mock out all of these deps if I wanted to test my app thoroughly.

I leaned heavily on Jest's manual mocks for all of these: library and file replacements stored in __mocks__.

Mocking the Slack SDK

In my code wherever I'm interacting with the Slack API I'm actually doing it via a client that I've instantiated and exported. So rather than mocking the Slack SDK directly, I can mock my client. The mock for this one, then, lives in the same directory as the client: src/slack.

I've defined all of the Slack API functions I use in my code, and set them as jest.fn() so I can assert on what's being called and override the individual method return values as and when I need to. If I add a new Slack method call in somewhere, I'll need to add it here as well.

// src/slack/__mocks__/client.ts

export const SlackClient = {
  chat: {
    postMessage: jest.fn(() => {
      return {
        ok: true,
        ts: 'returnTimestamp'
      }
    }),
    update: jest.fn()
  },
  conversations: {
    history: jest.fn()
  },
  reactions: {
    add: jest.fn(),
    get: jest.fn(() => {
      return {
        ok: true,
        message: {
          reactions: [
            {
              name: 'thumbsup',
              count: 1
            },
            {
              name: 'thumbsdown',
              count: 1
            }
          ]
        }
      }
    })
  },
  users: {
    list: jest.fn()
  },
  channels: {
    join: jest.fn()
  },
  views: {
    open: jest.fn(),
    publish: jest.fn(),
    update: jest.fn()
  },
  oauth: {
    v2: {
      access: jest.fn()
    }
  }
}

Since these are all jest.fn() mocks, I can override the individual return types of each function in a test using mockResolvedValue:

import { SlackClient } from '../slack/client'
jest.mock('../slack/client')

[...]
  test(`Persists the user ID of the person who volunteered and doesn't post`, async () => {
    SlackClient.reactions.get.mockResolvedValue({
      channel: 'test-channel',
      ok: true,
      message: {
        reactions: [
          {
            users: [testUserId],
            name: 'raised_hands'
          },
          {
            users: [testUser2, testUser3],
            name: '-1'
          }
        ]
      }
    })
// [rest of test logic]
  })

See full test

Mocking the Google Sheets SDK

This is a mock for an external library, so it lives in src/__mocks__ at the top level.

I used jest.createMockFromModule to auto-generate a mock based on the whole module, and then overwrote its google export with my own mock.

I wanted to be able to change the return value of the batchGet function to test different behaviour, but unlike with the Slack SDK, I can't use mockResolvedValue here because google.sheets is a function that returns an instance of the sheets client. Instead, to make sure the mock instance has the mock data I want it to, I've added a variable mockBatchGetReturnValue which I've added a setter for and exported as part of the mock.

// src/__mocks__/googleapis.ts
import { GoogleApis } from 'googleapis'
import { spreadsheetDateRows, testSpreadsheetData } from '../test/testData'

const googleapis = jest.createMockFromModule('googleapis') as GoogleApis

let mockBatchGetReturnValue = testSpreadsheetData

export const google = {
  auth: {
    getClient: jest.fn()
  },
  sheets: jest.fn(() => ({
    spreadsheets: {
      values: {
        get: jest.fn(async () => {
          return {
            data: {
              values: [spreadsheetDateRows]
            }
          }
        }),
        batchGet: jest.fn(async () => {
          return {
            data: {
              valueRanges: mockBatchGetReturnValue
            }
          }
        })
      }
    }
  }),
  setMockBatchGetReturnValue: (value: typeof mockBatchGetReturnValue) => {
    mockBatchGetReturnValue = value
  })
}

export default googleapis

Example usage of setMockBatchGetReturnValue in a test:

import { google } from 'googleapis'
jest.mock('googleapis')

test('Posts a message if rehearsal is cancelled', async () => {
      // @ts-expect-error mock type
      google.setMockBatchGetReturnValue([
        {
          range: 'B1:I1',
          values: [testSpreadsheetHeaders]
        },
        {
          range: 'B4:I4',
          values: [
            'Rehearsal cancelled',
            'Run Through Title',
            'Blah blah blah',
            'main-song-link',
            'run-through-link'
          ]
        }
      ])

      // [rest of test]
})

See full test

Mocking Google Cloud firestore

This took AGES to figure out. I had found firestore-jest-mock and thought it'd solve all my problems, but I found that it just didn't work when I used it in the way the docs recommended. The tests just timed out, which suggested they were still trying to connect to the real database.

I ended up going with the manual mock approach again, but exporting a class that had an instance of the Firestore stub from firestore-jest-mock. In order to change the DB data between tests, I had to reinstantiate the stub. Everything starts with the collection() function, so it was enough to just expose that function which then allows you to chain functions on the underlying stub.

Like with Slack, my database instance is exported from a file, so I could mock that file instead of the entire SDK.

I created a load of reusable test data, and imported that to use in the mock. I stored that elsewhere so I could import it in tests as well.

// src/db/__mocks__/db.ts

import { firestoreStub } from 'firestore-jest-mock/mocks/googleCloudFirestore'
import { Firestore as FirestoreT } from '@google-cloud/firestore' 
import {
  testAttendancePost,
  testTeamData,
  testTeamId
} from '../../test/testData'

type TestDataOverrides = {
  teamOverrides?: Partial<typeof testTeamData>
  attendanceOverrides?: Partial<typeof testAttendancePost>
  attendance?: Array<typeof testAttendancePost>
  teams?: Array<typeof testTeamData>
}

class DB {
  mockFirestore: FirestoreT

  constructor() {
    const { Firestore } = firestoreStub({
      database: {
        teams: [testTeamData],
        [`attendance-${testTeamId}`]: [testAttendancePost]
      }
    })
    this.mockFirestore = new Firestore()
  }

  collection(args: string) {
    return this.mockFirestore.collection(args)
  }

  setMockDbContents(testData: TestDataOverrides) {
    const { attendance, teams, teamOverrides, attendanceOverrides } = testData
    const teamData = {
      ...testTeamData,
      ...teamOverrides
    }

    const attendanceData = {
      ...testAttendancePost,
      ...attendanceOverrides
    }
    const { Firestore } = firestoreStub({
      database: {
        teams: teams ? teams : [teamData],
        [`attendance-${testTeamId}`]: attendance ? attendance : [attendanceData]
      }
    })
    this.mockFirestore = new Firestore()
  }
}

const testDB = new DB()

export const db = testDB

With setMockDbContents I added the ability to set overrides of individual data fields, or overwrite the entire table contents. I could then call db.setMockDbContents in a test when I needed to change what the database getters returned:

  import { db } from '../db/db'
  jest.mock('../db/db')
  
  [...]

  test("Messages the person who installed if couldn't find a post", async () => {
    db.setMockDbContents({
      attendance: []
    })

    await updateAttendanceMessage({
      token,
      teamId
    })

    expect(SlackClient.chat.postMessage).toHaveBeenCalledWith({
      token,
      channel: testUserId,
      text: "Tried to update attendance message, but couldn't find the post to update."
    })
  })

See full test

Mocking Node's native `fetch` with nock

Since Node 18, fetch has been supported natively in Node! nock is a HTTP mocking library for Node and version 14 (currently in beta at the time of writing) includes support for native fetch. While many API calls may work in a test, it speeds things up a lot to mock them out.

import nock from 'nock'
import { isBankHoliday } from './utils'
nock('https://www.gov.uk')
  .get('/bank-holidays.json')
  .reply(200, {
    'england-and-wales': {
      events: [
        {
          title: 'New Year’s Day',
          date: '2024-01-01',
          notes: '',
          bunting: true
        }
      ]
    }
  })

describe('general utils', () => {
  test('isBankHoliday', async () => {
    expect(await isBankHoliday('2024-01-01')).toBe(true)
    expect(await isBankHoliday('2024-01-02')).toBe(false)
  })
})

See full test

A note here: if you're using jest.useFakeTimers it may cause the request mocked with nock to time out. I found a relevant GitHub issue that suggested excluding a couple of timing functions from useFakeTimers as a workaround until the problem is fixed:

 jest.useFakeTimers({ doNotFake: ['nextTick', 'setImmediate'] })

Happy testing!

Good links: 12 May 2024

2024-05-12T00:00:00Z

Heat Death of the Internet - takahē - “The first page of Google results are links to pages that have scraped other pages for information from other pages that have been scraped for information. All the sources seem to link back to one another. There is no origin. The photos on the page look weird. The hands are disfigured. There is no image credit.”
Slop is the new name for unwanted AI-generated content - I love this term, it perfectly sums up what garbage is being created with AI.

New keyboard alert! Mykeyclub MKC75

2024-05-05T00:00:00Z

Say hello to the Mykeyclub MKC75!

It's so pretty! This is going to be my new office keyboard. Weighted aluminium case, so nice and heavy without too much rattle. It's got a rotary encoder (that's a knob to you and me) which controls the system volume (I look forward to forgetting it's there).

I put in Dangkeebs HaluHalo linear switches which I got from SerpentKeys. They're a tiny bit louder than reds, but not much. I've recently discovered how dreamy lubricated switches are, although the process of lubing switches takes fucking forever – it took me at least 2 episodes of Fallout and several episodes of Kin – but typing on them is just delightful.

Twitter reply guys were bad, but Mastodon is no better

2024-05-04T00:00:00Z

Mastodon has often been touted as some kind of grassroots utopia compared to the bro-niverse that is Twitter. But in my experience it's exactly the same: full of sanctimonious reply guys.

Before the great Twitter exodus I'd amassed quite a following through a carelessly curated campaign of shitposting, and occasionally a post would go viral. Some really quite nasty things happened sometimes.

Storytime: back in my purple hair days, I posted a picture of my hair and makeup colour-matching my IDE, next to a screenshot of some janky wireframe HTML I'd written to throw a webpage screenshot together for a talk. You may have seen it reposted on some content farm.

Most of the replies were harmless and many were nice, but a few people "helpfully" commented that the code wasn't accessible. I was at the pub by this point, a few beers in, and posted an annoyed response that people should stop commenting on the code because that wasn't the point. (It absolutely was inaccessible; but it absolutely didn't matter because it was just garbage code for the purposes of a screenshot.)

(Side note, I miss that hair, but I don't miss the upkeep or the damage.)

Then a well-known tech dude who should have known better took a screenshot of my tweet and reply (not just a RT!) and posted it on his Twitter. I got bombarded with replies: one dude said "but accessibility is important". Correct, it is, but that wasn't the point of the post. I replied: "You know what else is important? Not being that guy who jumps into a woman's tweet replies to correct her code when she's not even posting about the code and has not asked for any feedback on said code". Immediately the replies came in: WHY IS GENDER ANYTHING TO DO WITH IT WAH. Some guy tweeted at my employer to tell them that I was being sexist (I had to message our head of social to ask him politely to disregard that).

All the shitty replies I got were from men though. Just saying.

I like men very much. I work with many men (as well as a good amount of women, considering the industry average) and they are lovely indeed. I am married to a wonderful man. But in my experience, I do not get anywhere near this level of shit on the internet from women, or at least users that are visibly female/non-binary.

Perhaps these men reply like this to everyone on the internet, regardless of the OP's gender. Being an indiscriminate knobhead doesn't change the fact that you're being a knobhead.

The screenshotted post surfaced on Reddit and even 4chan (shudder) a few times over the next few years causing me to have to lock my Twitter account temporarily each time. I know I could have avoided this entire debacle by not engaging a few beers in, and just muting or locking the thread, but also people didn't need to be dicks about it.

I locked my Twitter and abandoned ship in November 2022 when it was looking like it was sinking. A lot of folks are still on there, but it seems like even more of a hellhole. So, like many folks, I migrated to Mastodon. It's... fine? I do actually miss the algorithm, but I follow some cool web folks and I like to see what people are up to. I don't engage nearly as much as I used to with Twitter, which can only be a good thing, really. My relationship to social media has changed a lot.

But every now and then, something I post will go... Mastodon viral, I guess. And there's this special kind of reply guy on Mastodon who I hadn't seen before. The person who will take some kind of personal offence to your post because they do not personally relate to it. I posted a link to the Millennial CAPTCHA because it's amazing, and the sheer number of replies I got explaining that it was Bad, Actually for reasons including:

nobody knows who Michael Cera is (they absolutely do, he is very famous, this is a you problem)
nobody knows who Sufjan Stevens is (you don't need to know to complete the test)
it's impossible if you're European (I'm English – we may have left the EU but last time I checked we were still in Europe)
generational politics are stupid
Gen X can do these things too, but nobody ever talks about Gen X!

Honestly, it makes me want to not post things. My Mastodon app (Ice Cubes) hasn't implemented thread muting yet, and I really wish it would hurry up (I have to do it via the browser and hope that the app picks up the setting). I also wish there was a kind of "circles" feature where you could post things that are only visible to a defined list; I know you can post to followers only, but I don't want to have to restrict my followers.

This certainly isn't the first time I've had frustrations like this and it won't be the last. I posted my feelings about AI song generators (they make me sad) and got a few replies explaining – you guessed it – why I was wrong, actually. One guy said it's just like how photography came along when before there was only painting. The mind boggles.

Just imagine if you could see a post and think “hm, I don’t really get this, I guess it’s not for me!” and then go back to whatever you were doing. Imagine!

All Day Hey 2024, and some stuff I bought in Leeds

2024-05-04T00:00:00Z

First conference of the year is done, and what a conference it was! I begged Josh to let me speak at All Day Hey in 2022, and he promised me a slot in 2024 which at the time seemed forever away. As seems to happen a lot now, I blinked and it was just around the corner.

It was the first outing for my new talk on technical migrations, and I'm really pleased with how it went. If you missed All Day Hey, you'll be able to catch it at Pixel Pioneers in June, and Smashing Freiburg in September.

I'm not going to write a whole recap of the conference because I am absolutely thoroughly exhausted, but it was obviously brilliant and you should definitely go next year. Top tier lovely vibes.

Yesterday morning before my train home I had a mooch around the Corn Exchange with Carol. We popped in to the lovely bookshop Colours May Vary where I picked up a copy of Gardener's Folklore, originally published in 1976. I'm looking forward to leafing through that and perhaps even picking out some useful tips among the absolutely batshit suggestions and stories.

We got lured in to Giant Kitten by a glass cabinet full of pin badges, and I picked up a few excellent ones to add to my collection along with a great patch and a coaster. My favourite is the Skeletor one, I'm obsessed. I also got this really lovely print by Clarice Tudor which for me completely and utterly sums up the beauty of personal websites.

Highly relatable coaster by Betiobca; magic pin by Wildflower and is not that kind of magic; my soulmate Gudetama pin from PunkyPins. Skeletor pin and Lisa patch seem to have lots of versions on the internet.

Good links: 28 April 2024

2024-04-28T00:00:00Z

On having no visual memory - Rachel Andrew shares her experiences of what it’s like to have aphantasia.
Why Good Captioned Videos Are Important – Meryl.net home - A really insightful guide to what makes good, accessible video captions. Plain is always better, folks!

Good links: 14 April 2024

2024-04-14T00:00:00Z

You’re a Blogger, Not an Essayist - I am BARRY HESS - “You don’t need to labor over your posts. You don’t need to have perfect grammar or spelling. You don’t need to leave a post in draft for seven months, pouring over research. (Though you can if you want!) You don’t really need to have an idea.

Just write. Then share.”

Testing HTML With Modern CSS: HeydonWorks - Heydon’s useful CSS bag of tricks for diagnosing poor HTML semantics.
A retrospective on a year without streaming music // Cory Dransfeldt - Streaming is the norm now - I certainly do it, via Apple Music - but some people are going back to buying mp3s and consuming music that way. It’s certainly better for the artists.

A good recipe: Ways with rhubarb

2024-04-09T00:00:00Z

It's rhubarb season! I came home from my parents' last weekend with a large armful of the stuff.

Rhubarb is extremely tart and not very nice on its own unless you drown it in sugar. It's particularly good when paired with very sweet things to balance out the sharp edge of the fruit, hence its classic pairing with custard. I love the pleasingly pink hue of it when it's cooked.

On Sunday night I baked a batch of Delicious magazine's rhubarb and custard blondies and WOW they are delicious indeed. The "custard" is actually brown butter with white chocolate and vanilla extract stirred into it, and I think the base recipe would be a fabulously versatile blondie that you could chuck all sorts of fruits into. The tart rhubarb cuts into the sweetness beautifully.

I flash-froze a couple more batches of sliced rhubarb (blanch by immersing in boiling water for 1 min, then plunge into ice cold water), and I'm going to stew the rest using this lovely Jamie Oliver recipe. Last year I used some of this stewed rhubarb in an eton mess.

Most of the rhubarb recipes I've got are sweet, and there's only so many cakes one can make (though I'm sure my husband would disagree). I'm on the hunt for some more savoury recipes. In the past I've tried this recipe for lamb bulgur pilaf with rhubarb and almonds, which was pretty tasty but I don't buy lamb very often. This fruit is a good counterpart to fatty meats, and I wonder if it'd pair well with fish in the same way that citrus does. Old mate Nige seems to think so, choosing a fattier fish (mackerel).

Upcoming talk: All Day Hey, Leeds - 2nd May 2024

2024-04-01T00:00:00Z

Two years after All Day Hey made me realise I missed the web, I'm really excited to be speaking there myself! I'll be talking about technical migrations – how we recently pulled off a Typescript migration at Monzo, and things you should consider when doing a migration yourself.

And what a line up - my good pals Hidde and Ana, plus UX whiz Imran Afzal, and two of my lovely Monzo colleagues Heldiney and Giorgio. It's a complete coincidence we ended up speaking at the same conference! I've spoken alongside Heldiney once before, at UX London 2022 – he was just brilliant.

All Day Hey is certified good vibes throughout, PLUS it's in a cinema that has sofas instead of cinema seats. SOFAS. It's not long to go now so make sure you've got your ticket!

All Day Hey 2024

Good links: 31 March 2024

2024-03-31T00:00:00Z

"a proper cup of tea" by Terry - An absolutely joyously chaotic tea-making game. I recommend trying all the different combinations for maximum mirth.

Good links: 17 March 2024

2024-03-17T00:00:00Z

Why I’m Ready to Party Like It’s 1999…Again - Jared White reflects on his early experiences of the web, and suggests maybe we’re ready to do the 90s web again…

Some things I've been enjoying recently

2024-03-16T00:00:00Z

This isn't going to be a tech post, mainly because I haven't really been enjoying tech things recently. I spend all day thinking about technical integrations and system architectures and requirements, so I don't really want to do anything dev-related when I get home. Every time I see people talking about Astro or web components or new CSS features I feel bad because I know I should try it out and see what all the fuss is about but I really can't be arsed soz.

I'm procrastinating talk-writing so naturally I thought I'd write a blog post. Here are some shows, books, theatre etc I've enjoyed recently.

TV

Apple TV continues to bring out excellent series. We've been making our way through For All Mankind, an alternate history sci-fi series about what could've transpired if the USSR had won the space race in the late 60s. Each series takes place a decade after the last, which makes for some interesting aging techniques on the actors. It's truly excellent – I think I can safely say there hasn't been a single dud episode in four seasons. It's produced by Ronald D. Moore of Battlestar Galactica fame.

Also on Apple TV is The Completely Made-Up Adventures of Dick Turpin starring Noel Fielding as, well, a coach-robbing Vince Noir. It's utterly silly and very funny in a Horrible Histories/Ghosts/Blackadder kind of way, and has lots of familiar faces popping up throughout.

And on Apple TV again... another space-themed drama called Constellation, where an accident on the ISS involving an astronaut and a NASA science experiment leads to some weird parallel universe goings-on. I love a good parallel universe story (Fringe was a favourite of mine) and I bingewatched the first six episodes while I was off work sick. It's the kind of series where you'll go on Reddit afterwards to read up on other people's theories.

I like watching things while I cook, and the perfect cookery series of recent times has been Elementary. Classic procedural with crime-solving duo premise, but with a bit of light humour and some great performances. I'm delighting in seeing all the early 2010s mobile phones, and it's one of those shows where as soon as a vaguely familiar actor pops up in a bit part, you know they're probably the killer.

Theatre

We went to see Operation Mincemeat on some friends' recommendation, with little idea what to expect. It's a musical based on the WWII operation where MI5 planted some fake intel on a body that "washed up" on the beach in Spain, misleading the Nazis and allowing the Allies to invade Sicily. It's very very funny, though the theatre is extremely tiny and cramped, so tall people beware. My husband was folded up like a concertina for most of it.

We also caught an NT Live screening of Vanya, a one-man adaptation of Chekhov's Uncle Vanya. Andrew Scott is in it, and he's absolutely brilliant in everything he does – I also saw All Of Us Strangers recently, and he was fantastic in that too. Vanya is still on in a few cinemas, I think.

Art

I met my parents at the Tate Britain the other weekend. I hadn't been for many years, and I think last time I was there I was too young to actually appreciate any of the art. I hadn't realised Millais' Ophelia was in there: it's a beautiful painting but also the basis of one of my favourite memes. I appreciate both for the art forms they are.

The Turners are stunning, the rough seascapes especially, but I also really loved his paintings of Europe. He had a way of really capturing the light.

Later I popped into Women in Revolt!, the Tate's exhibition of feminist art and activism from 1970-1990. A real diverse range of artworks, protests, political pieces and campaigns: including equal pay & division of labour, perceptions of lesbianism, the DIY scene, protesting nuclear weaponry, Black feminist art, AIDS, and the Thatcher government. It's on until 7th April.

Heat by Anne Bean

Tough (1979) - The See Red Women's Workshop

Books

I've made it about 75% of the way through The Three Body Problem, a sci-fi novel about Chinese astrophysicists discovering an alien civilisation... well, I don't want to give it away, and it's really good, but slow reading. I'm a speed reader, but I found I needed to really focus on the book and I tend to read before bed, so I make it about three pages in and have to put the light out. (I should read more on my commute.)

I read A Court of Thorns and Roses because it seems to be everywhere and I thought it'd be a good break from books that made me think about things. But it's actually... really good? I just finished the third book in the series. Playing Baldur's Gate 3 got me into fantasy (I'd only ever read Terry Pratchett, tried reading some Robin Hobb and just couldn't get into it but I'll give it another go sometime) and this is "romantasy" which is a whole genre that'd completely escaped my awareness until recently. But I'm now extremely invested in the storyline and I heard that old mate Ronald D. Moore has plans to produce a series based on it, so if he's involved you know it's good.

Food

I made Smitten Kitchen's weeknight tomato soup, and it was heavenly. The splash of sherry really lifts it. I made it with the grilled cheese "fingers" as Deb Perelman suggested, and it was a delight.

Deb really can't fail – I made her brown sugar brown butter shortbread recently and brought them to work, and they disappeared in record time. I think it might be the most popular thing I've ever made. Brown butter is having a moment, lads.

One of my favourite lunches near the office is at Spitalfields Market, a pricey covered market near Liverpool Street that's full of street food stalls, with some absolute gems. My favourites include soup dumplings from Dumpling Shack, vegan Ethiopian mixed veg and grains with injera from Merkamo, and the oft-overlooked Sri Lankan kothu roti place, Karapincha. The other day I decided I wanted to try making kothu roti myself. I found this recipe from Hoppers (where I still haven't been!) and it was delicious, though after making it once I think I'd do the curry bit the day before, as it took a while to do the whole thing in one go, even using premade rotis. Hard recommend, though.

Finally, I treated myself to lunch at Fallow on Haymarket recently, managing to book a seat at the chef's table where you can watch the chefs working. In a bizarre and wonderful twist, a couple was seated next to me and it turned out to be my friend/tech lead from my first proper dev role (one of my favourite teams ever). We had a good catch up, and she let me try some of her, er, cod's head. A couple of must-try dishes are the mushroom parfait which made me see stars, and the corn ribs which are very, very, very good. They have a set lunch menu which includes the mushroom parfait. For dessert, I had a rhubarb and ginger pavlova with jasmine tea, and it was so potent I felt like I was sitting next to an actual jasmine bush. Absolutely delightful.

Fallow's mushroom parfait, with corn ribs in the background

Rhubarb pavlova with stem ginger and jasmine tea

Good links: 10 March 2024

2024-03-10T00:00:00Z

Some little ways I’m using CSS :has() in the real world - Piccalilli - Some great tips for one of my favourite recent CSS features.
Case Study: lynnandtonic.com 2023 refresh - Lynn’s annual redesigns are a real joy, and this is a fascinating look into the inspiration and technique that went into the 2023 edition.
Neatnik Notes · Motive as a filter - When you use a free email service like Gmail, what’s Google’s motive for offering it?

Good links: 3 March 2024

2024-03-03T00:00:00Z

Tailwind vs Semantic CSS - Found via Andy Bell's site - as he puts it, this post is pretty clearly biased towards semantic CSS but I think it's pretty evident fromt his that bare-bones HTML with "plain old CSS" is a lot more performant than stuffing a page full of unnecessary divs and stacking utility classes.
Where I’m at on the whole CSS-Tricks thing - It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now. This was me and my wife’s thinking: The negotiated sale price was fair. They are a big com…
Towards a quieter, friendlier web • Cory Dransfeldt - "You aren't obligated to reply or participate in any discussion. Don't feel bad about not engaging if it doesn't serve you. Arguing on the internet is rarely healthy, dialogue and discussion certainly can be."
Techniques to Break Words - A good collection of useful techniques to bookmark here!
RsS iS dEaD LOL - My colleague Paul made this brilliant little site for finding RSS feeds of people you follow on mastodon (and people they follow, etc)

Good links: 25 February 2024

2024-02-25T00:00:00Z

It's OK to abandon your side-project - Robb Owen - "We hear about all the side-project success stories, but what if we talked more openly about the ones that tanked?"
Robin Rendle — Mini Manifesto - Robin has redone his homepage and it’s utterly glorious.

Good links: 18 February 2024

2024-02-18T00:00:00Z

The Midnight Pub - A tiny forum in the form of a virtual pub. It even has a speakeasy.
This website is personal - Frills - I really identify with this post, and the feeling that my posts aren’t worth anything if they’re not useful in some way. In reality there are no rules at all about what you should post on a personal site!
Don’t Disable Form Controls - Stop disabling submit buttons.
the top of the DNS hierarchy - TLD nameservers are well-known, but what about the very top level - the root? An in-depth look at the thirteen root DNS servers.
In Loving Memory of Square Checkbox - How are we supposed to tell the difference now?

Good links: 4 February 2024

2024-02-04T00:00:00Z

Please, don’t force me to log in - It feels like every website or connected device wants you to sign up before you can use it these days…
It feels like React is getting a bit of a kicking recently - Piccalilli - There's a lot of React criticism floating around at the mo, much of it justified. I think people are quick to use it when they don't need to. But as someone working on a very big, very complex project that does benefit from a framework like React, I'm glad Andy is taking a nuanced look at the debate.
A highly configurable switch component using modern CSS techniques - Piccalilli - We’ve all built plenty of switches out of checkboxes, I’m sure, but Andy has updated his technique to use some newer CSS features and produced a rather lovely result.

Listen to this: The Stand-in by Caitlin Rose

2024-01-30T00:00:00Z

At university I worked at Manchester Academy, and would often end up behind the bar at all sorts of gigs from pop, to metal, to folk. Metal gigs were always my favourite because the crowd were very nice to bar staff, whereas sometimes you'd have "POUR OUT CANS" written on the sign in sheet and you knew it was going to be rowdy.

Anyway, one of the gigs I ended up working at was Caitlin Rose, a country singer hailing from Tenessee. A tiny gig in our smallest venue, Academy 3, where I could lean back against the bar and watch quite happily. I'd never considered myself a fan of country (though a few years later I'd get very, very emotionally invested in the TV series Nashville, and in fact a song of hers did feature) but I was really taken by her witty and honest lyrics, and catchy refrains.

A few years later in 2013 she released this absolute dynamite record, The Stand-In, a vintage-flavoured record full of excellent writing, velvety vocals and heartbreak. If you don't like country, don't be put off: it's more kind of alternative country.

She then promptly disappeared for about ten years only to surface with a new album last year (Cazimi). But The Stand-In is still my favourite.

Top track: No One To Call is a short one, but a bittersweet plea from a lonely life on the road.

Good links: 28 January 2024

2024-01-28T00:00:00Z

Old'aVista - Altavista was my first search engine (or should I say altavista+was+my+first+search+engine) and this is a delightful trip down memory lane.
Inside .git - Legendary explainer of things Julia Evans has written a fascinating and understandable guide to what lives inside the .git folder.
CARI | Aesthetics - I shared this on Mastodon a while back but this is just so compelling, and some of these aesthetics come with a heady dose of nostalgia.
Where have all the websites gone? - A heartfelt lamentation for the human web.
Oh Hello Ana - Ana Rodrigues has posted a very comprehensive list of good tech and web-related links.

So you've decided to get into mechanical keyboards

2024-01-27T00:00:00Z

This is a dangerous path you're about to walk down. Is your wallet ready?

Whether you prefer the smooth glide of linear switches, the gentle bump of a tactile switch or the full-on audio assault of a clicky switch, there’s something extremely gratifying about typing on a mechanical keyboard (even if it’s just a reply to someone who is wrong on the internet). And it’s even better if it looks as adorable as this.

I’ll level with you: I got into mechanical keyboards because a) they’re so PRETTY! and b) it was the pandemic, what else was I supposed to do? I had been perfectly happy tapping away on my Apple wireless keyboard for a very long time. But I really do prefer them now, and find that I’m much less prone to wrist strain than I was with the extremely flat profile of the Apple keyboard. Sure, I could have bought a Logitech keyboard that’s a bit fatter and be done with it, but it wouldn’t look like this:

I’ll continue to level with you: it is not a cheap hobby. From the keyboard itself, to the switches for each key, to each keyset (the keys themselves, usually sold separately), the cost adds up quickly. The only positive I can offer is that by the time the keyset you ordered arrives, it’s usually been so long you forgot how much it cost you.

You’ll also need a lot of patience. Since it’s a pretty niche hobby, keyboards and keysets have to go through a few stages before they arrive at your doorstep: garnering interest to see if people want to buy it, presale, production and quality assurance, then delivery and distribution. This can take anywhere between a few months to over a year – in fact, one keyset I ordered back in 2021 has been so beset by production issues and delays that it still hasn’t arrived yet.

How mechanical keyboards work

Your average mechanical keyboard will have:

a case, made out of plastic or aluminium
a PCB (printed circuit board) with a USB connector (or Bluetooth if you’re fancy)
a controller that can translate those keypresses into input instructions for your computer
switches to trigger keypresses
keycaps for you to type on
stabilisers (aka stabs) for the longer keys so they don’t wobble

Keyboard switches complete a circuit in the keyboard which causes a specific keypress to be transmitted via the controller to the computer.

Switches have a plastic shell with a moveable plastic “stem”, the bit that the keycap attaches to and that moves up and down when you press it. There’s a metal spring inside to control that movement, and finally a metal plate with legs that protrude from underneath the switch which you either solder into the keyboard’s PCB, or slot into place on a hot-swap keyboard.

Hot-swap means you can remove and change switches without having to do any soldering, which is great if you want to try a few different kinds; but hot-swap PCBs are a bit less common – and more expensive – than regular ones.

Switches

Mechanical keyboard switches come in three categories: linear (smooth), tactile (bump), and clicky (exactly what it sounds like).

All switches have what’s called an “actuation point”, which is the point at which the keypress is registered. It’s usually when you press the switch about halfway down. While linear switches don’t give any feedback that you’ve reached the actuation point, tactile switches will have a bit of resistance or a “bump” that lets you know you’re there, and clicky switches make the click sound at that point. Some people like this because it means you don’t have to push the keys all the way down.

It’s completely down to personal preference here: I like linear switches, as I actually prefer my keyboards to be as quiet as possible. If you’re intending to bring your keyboard to a place where other people are working, please don’t buy clicky switches unless you want to find your expensive new keyboard mysteriously covered in tea.

Mechanical vs optical switches

Standard mechanical switches trigger when the stem is pushed down, causing the metal leaf at the bottom of the switch to connect, completing the circuit. Optical switches have springs too, but these have a light signal inside them which registers a keypress. There aren’t quite as many optical switches out there but there isn’t a lot of difference between the two types, it’s just a newer technology.

Cherry MX switches and their colours

You’ll hear people talking about red switches, brown switches, blue switches... this relates to the colour of the stem in Cherry MX switches. These are one of the most popular shapes of switch, and lots of manufacturers make them other than Cherry MX – I tend to buy Gateron as they’re a bit cheaper.

The colours tell you what kind of switch it is:

red: linear, light resistance, relatively quiet
black: linear, heavy resistance, relatively quiet
brown: tactile, moderate sound, medium resistance
clear: tactile, moderate sound, heavy resistance
blue: loud, clicky, medium resistance
green: very loud, clicky, heavy resistance

Gateron red and brown switches

There are lots of manufacturers and limited runs of this switch shape with different colours and actions, and it can get quite overwhelming, but you can just stick to the normal colours!

If you’re not sure what colour you want a lot of places sell a switch tester with a few different colours in so you can get a feel for what you like most.

Which colour you buy is entirely up to you, it’s based on personal preference. What does matter is what shape of switch you buy, and this will usually be specified on the keyboard/PCB listing.

There are other types of switches e.g. low profile switches, but the majority of keyboards and keycaps that I’ve seen are made for the Cherry MX profile.

Keyboards

The keyboard itself can come in lots of different shapes and sizes. You didn’t think this would be simple, did you?

You can buy keyboards as kits ready to be assembled (you'll need some tiny screwdrivers and a soldering iron), or prebuilt. Some places offer assembly service for you, though I think assembly is half the fun!

Keyboard size and shape

Your regular rectangular keyboard can have any number of keys, and some limited edition ones have a truly bizarre layout. I recommend the Switch & Click keyboard size guide for an overview of the most common ones.

When it comes to choosing a size, think about what’s important to you. Do you use the numpad? Better get a compact or a full-sized one. Do you need the F-keys (go 75% or larger) or will you be all right with using a function key and the num row (60-65% will do)? Do you like pain (a 40% is for you)?

I have a KBDFans Tofu84 (75%) at work, and an ikki68 (65%) at home. The F2 key gets a lot of use at work when I’m renaming variables!

KBDFans Tofu65 with DSA Magic Girl keycaps

Then there’s the split keyboards, literally split down the middle and connected by a cable. They’re meant to be really great for wrist strain, much better for you posture-wise, though I haven’t tried one myself as I don’t have the energy to re-learn to type. They’re also excellent if you want to look like you come from, or travel regularly to, space.

Photo by Peppy Toad on Unsplash

Joking aside, they are supposed to be much better for you. A popular ergo keyboard is the Ergodox, which is actually open source: you can download the files for the PCB from GitHub and get it printed yourself, sourcing whichever compatible parts you like (or 3D printing them). There are also a lot of kits or pre-made versions if you prefer.

Then there's macropads, tiny and adorable mini keyboards that are a great way to get used to building keyboards if you don't have much experience soldering. I've got a keeb.io BDN9 and a mint-coloured Owlab Voice Mini which is the cutest thing. They both have rotary encoders (knobs) on them which make them 100% more satisfying, but unfortunately I keep forgetting what I've programmed the keys to do so I find I rarely use them.

BDN9 with DSA Milkshake keycaps

Keyboard layouts: ISO, ANSI, JIS, ortholinear

The most common keyboard layout I’ve seen is the ANSI layout, which is the standard keyboard layout in the US. It’s characterised by its flat enter key, longer shift key on the left, and extra key above the enter key.
ISO is generally used in Europe, and has a delightfully chunky enter key that’s two rows high, with a smaller left shift key (two keys where ANSI has one).
JIS is the Japanese International Standard, and has an extra key next to backspace, an ISO-style enter key, and a smaller right shift key.
Mechkeys has an article about these common layouts, including some diagrams.

I know plenty of folks in Europe who use ANSI layout simply because the keyboards are more common, but I much prefer ISO. Generally, keyboard kits and PCBs will say which layouts they support; often they support multiple configurations so you could even mix and match, say, an ISO enter key and a US-style left shift.

Finally we have the ortholinear layout. These are quite amazing looking, a bit like a long Boggle. Unlike regular keyboards which have staggered rows, the keys are all aligned in a grid. Read more about ortho keyboards on Try Ortho Keys.

Typing angle

Perhaps a minor one, but this may make a difference to you; different keyboards are set at different angles, and unlike your 2001 Compaq keyboard most of these mechanical ones don’t have those little fold-out feet that you snapped off while waiting for the dialup to connect. Most keyboard listings will tell you the typing angle.

Dampening sound

If you’re like me, you want to minimise the sound from a keyboard as much as possible, especially in the office. There are a few ways of doing that:

use quieter switches (red, black)
use silent switches (NB these are quieter, not actually silent)
put O-rings on your keycaps (I got some cheap off eBay)
line your case with foam to absorb sound
put a desk mat underneath your keyboard

Keycaps

The most exciting bit, I reckon. The bits with the letters on that are prettier than they have any right to be. You can get retro ones, cute pastel ones, dark ones with light writing... the possibilities are endless.

Some of my favourite keysets of recent years:

DSA Milkshake
ePBT Dreamscape
KAT Space Dust (this has been delayed forever, bah)
Mintlodica Pastel Dreams

Render of Dreamscape keycaps from vala.supply

Kits

Keycaps will usually have different kits on sale, so check the listing carefully to see what each one contains. You'll definitely want to get the base kit (with all the alphanumeric keys and ANSI keys). Sometimes you have to buy the ISO kit separately for the big enter key and some Europe-specific keys like the UK 3 (# and £). Often sets will do a novelties kit: Milkshake had a set of pastel-coloured keys with fruit legends, and Dreamscape has novelties with stars, clouds and meteors. I always enjoy the novelties.

Materials

Keycaps are generally plastic, except for the occasional novelty one. They’re either made of PBT or ABS; PBT is nicer but ABS is cheaper. The sets you get with your off-the-shelf keyboard, or off AliExpress, are probably ABS. It’s more flexible, but the legends can wear off the surface of the keycaps.

Additionally, keycaps may be “double shot” (two layers of plastic, one for the lettering and one for the overlay).

Keycaps can come in a variety of different profiles, and may be flat (all one height) or sculpted (different rows have different heights). Different profiles have different heights. Generally I’m not fussy about profiles, I just accept whatever profile they’ve chosen for the keyset I’m after.

Check out The Keeblog’s article about different keycap profiles for a full overview.

Key sizes

The keys themselves are measured in units (u): your average letter or number key is 1u wide, and everything else is relative to that. Most keysets will come with various different lengths for backspace, shift and caps lock keys which you might use depending on the layout of your keyboard. Some folks like a split spacebar; this is a must if you’ve got a split ergonomic keyboard, as you’ll need one on each side.

Check out Keyboard University’s guide to keycaps.

How to actually buy keyboards and keycaps

You can buy most switches in large enough quantities from wherever (even eBay), but many keyboards or keycaps require a bit more effort.

The group buy process

Since it’s a niche hobby, there isn’t enough demand for all of these things to just be mass-produced. Many keyboards, and most keysets, will go through a process called group buy, where a certain number of sets need to be sold before production can go ahead.

Generally things will go through interest checks (ICs) before this stage, to gauge how much interest there is in the first place. Designers will produce very lifelike renders of the proposed keyset or keyboard, and if there’s enough interest they’ll approach a manufacturer. There will be a minimum order quantity, so they’ll have to guarantee a certain number of sales before production can go ahead. Production generally happens in China, and takes many months (especially if there are lots of sets in the queue in front of it).

This is where the group buy phase begins. Various vendors around the world will agree to be the distributors for the set; this means you buy the set through the vendor, and the vendor in turn places an order for a certain number of sets from the manufacturer. The group buy phase has a limited time period, though usually there are no limits on how many units are available. A warning: generally there are no refunds on group buys because they need to guarantee the order quantity.

Once the group buy is over, production can begin. The factory will produce a sample set which will go back to the designer to see if they’re happy with it, and this can happen a few times until the designer is happy. Finally, it’ll go into full production, and eventually distribution. The sets will be shipped to the vendor and they’ll be in charge of shipping them to their customers.

Vendors should provide updates with how things are progressing, but there are often delays. Group buys generally have a ship date of a particular quarter rather than a specific month (e.g. Q3 2024) but this is subject to change.

Most vendors will have a list of upcoming and current group buys on their website; see “Where to buy” below.

If you missed out on a group buy, don't despair. Sometimes creators will do re-runs or new revisions of popular keysets/keyboards.

What to buy if you want it now

If you genuinely don’t care about group buys and want something right away (fair play), consider checking out a Keychron. It’s a solid choice and readily available. It definitely doesn’t fulfil the “pretty” requirement, but it’s nice to type on and won’t set you back as much as the custom ones. You can swap out the keycaps and many of them are hot-swappable.

A lot of keyboard retailers will have some keyboards and keysets in stock most of the time, including the “extras” that are additional sets they ordered from a group buy to sell on. These tend to go quite quickly, so if you missed a group buy make sure you pay attention to when the extras will be in stock and act fast.

Where to buy

There’s a very comprehensive list of keyboard vendors by Alexotos. My personal (UK) faves are Prototypist (for group buys) and Mechboards for in-stock kits and accessories. I buy switches from Mechboards or eBay.

If you're not sure about a vendor, check out one of the mechanical keyboard discord servers and ask around for reviews. I find people are generally pretty helpful.

As always, prepare to be hit by customs charges when ordering from abroad. That includes ordering from the EU to the UK (sob). Ordering from local vendors doesn't incur customs fees as these are shipped locally, though generally the customs charges will be factored into the group buy price.

Automated weekly links posts with raindrop.io and Eleventy

2024-01-22T00:00:00Z

Edit 04/02/24 to change the comparator date from midnight on previous Saturday to midnight on previous Sunday to prevent duplicate links being published.

A post that’s been getting a lot of traction recently is I miss human curation by Cassidy Williams, in which she laments that we’re so reliant on algorithms to show us new stuff now, instead of having it recommended to us by other humans.

Inspired by that, I decided to start posting weekly collections of posts and links I liked that week. Knowing I wouldn’t keep it up if I had to manually post it every week, I set about finding a way to automate it. How could I mark a link or blog post as “good”, and have it show up in my blog on a Sunday without me having to do anything?

It occurred to me that I’m already paying for raindrop.io, an excellent bookmark manager. It’s a great way of keeping links in sync across multiple platforms... and it has an API! This meant I could add links to a particular raindrop.io collection as I come across them, and then fetch them once a week and turn them into a post.

Collecting the links

I’ve created a separate raindrop.io collection for these links, which I can easily share to from the iOS share sheet, or from the Firefox extension. When I save the bookmark, I also add an accompanying note with a sentence or two about the link.

I generated an API token for raindrop, and wrote a little script to pull the links from the collection using the /raindrops/[collectionID] endpoint.

I made sure to only fetch links from the past week so I didn’t duplicate anything. You can pass specific search parameters in the query, so I restricted the links to any created after midnight on the previous Sunday, and before midnight on the current day - so, Sunday to Saturday. That means any links I clip on the Sunday will appear in the following week’s link post.

const todayDate = new Date();
const lastSunDate = subDays(todayDate, 7); // using date-fns here
const lastSun = format(lastSunDate, "yyyy-MM-dd");
const today = format(todayDate, "yyyy-MM-dd");

async function fetchLinks() {
  // Get content bookmarked between last Sunday and this Saturday inclusive
  const search = new URLSearchParams({
    search: `created:>${lastSun} created:<${today}`,
  });
  const url = new URL(`https://api.raindrop.io/rest/v1/raindrops/${collectionId}`);
  url.search = search;
  const rsp = await fetch(url, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  return await rsp.json();
}

Creating the post

Once I’ve pulled the links, I need to turn them into an actual markdown post. I’ve created a very simple template that I can inject content into:

---
date: {{date}}
---

{{links}}

Using my method for creating post types, I've added a new link type which has its own shared config. I'm using a couple of custom date filters to get the dates in the right format for titles and URLs.

{
  "layout": "single-post.njk",
  "hasCustomOGImage": true,
  "eleventyComputed": {
    "title": "Good links: {{ date | dateFilter }}"
  },
  "excerptText": "Links to posts and websites I've enjoyed this week, curated and automated.",
  "type": "link",
  "tags": [
    "links"
  ],
  "permalink": "/blog/good-links-{{date | urlDateFilter }}/index.html"
}

I format the links into markdown, defaulting to raindrop’s excerpt if I didn’t write a note:

const formattedLinks = raindrops.map((raindrop) => {
    const { link, title, excerpt, note } = raindrop;

    const description = note === "" ? excerpt : note;
    return `* [${title}](${link}) - ${description}`;
  });

Then I read the template as a string, interpolate the date and links I’ve just formatted, and write them to a file in my blog directory with the date as a filename.

  let postContent = fs.readFileSync("./scripts/link_template.md", "utf8");
  postContent = postContent.replace("{{date}}", formattedToday);
  postContent = postContent.replace("{{links}}", formattedLinks.join("\n"));
  fs.writeFileSync(`./src/blog/links/${formattedToday}.md`, postContent);

Scheduling the script

Running the script is easy enough: I added it into my package.json scripts as yarn generate-links. But I’d like to not even have to think about running it and have something do it for me.

It made sense to use GitHub Actions to run it on a schedule. I already deploy my website twice a day automatically so that new webmentions are fetched regularly.

I randomly entered numbers into crontab.guru until it came out with “every Sunday at 6pm”, and then created a new workflow:

name: "Generate and publish weekly link post"
on:
  schedule:
    - cron: 0 18 * * 0
jobs:
  generate-post:
    name: "Run script to generate post"
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        with:
          node-version: "18"
          cache: "yarn"
      - run: yarn install
      - run: yarn generate-links
        env:
          RAINDROP_TOKEN: ${{ secrets.RAINDROP_TOKEN }}
          RAINDROP_COLLECTION_ID: ${{ secrets.RAINDROP_COLLECTION_ID }}
      - uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: Generate weekly link post

I'm storing the raindrop.io token and collection ID in the repository secrets.

My script generates a new .md file with the post, so I need it to commit and push the changes. For this I used git-auto-commit-action. It detects changed files during a workflow run and commits and pushes them back to the repo.

My deployment workflow listens for the link creation workflow to complete, so once this workflow finishes running and pushes the changes, the deployment one will kick off and deploy my new blog post. Magic!

# deploy-neocities.yml
name: "Deploy to Neocities"
on:
  [...]
  workflow_run:
      workflows: [Generate and publish weekly link post]
      types:
        - completed

Good links: 21 January 2024

2024-01-21T00:00:00Z

The Internet Is Full of AI Dogshit - Aftermath - How AI-generated content is ruining search engines for everyone.
Exposed RSS - I get sites not having an “RSS” for “Feed” link on their website while actually having an RSS feed. I don’t like it, but I get it. Maybe they picked an off-the-shelf t…
You should blog | keith.is - Keith calls out for folks to make this the year of blogging about whatever the hell you want. He’s suggested some great places to get started!
Layers of context. - Will Larson on the importance of thinking outside of your immediate context: why a change that seems like a great idea may not be so well received elsewhere in the organisation, and how you can get a better radar for these things.
Kind of annoyed at React - Cassidy Williams shares her frustrations about React, echoing some of the things I’ve been feeling recently.
SVG Filter Maker - SVGFM, a node graph builder for SVG filters
Sharing links - Hidde's posted about sharing links on his own blog as well - great minds think alike!

How I deploy my Eleventy site to Neocities

2024-01-20T00:00:00Z

Skip to the bit you care about:

I’ve hosted this website in a few different places since I started it in 2019. It started out on Netlify, but after my post about everything I googled went viral, I exceeded the bandwidth of the free plan. Then I moved it to Vercel, which (at least at the time) had more generous bandwidth on the free tier. I enjoyed very quick deployment speeds, but it gave me big Corporate Web vibes. Now I host localghost.dev on Neocities.

About Neocities

Neocities reminds me of everything I love about the old web. It’s a place for people to create bizarre, oddly specific websites for things they love, or random collections of digital trinkets they’ve found on their online travels.

The manifesto on their about page resonated with me:

We are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. It's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again.

Hosting a static site on Neocities

Neocities offers free static site hosting, and (unlike the free hosts of yore) there are NO ADS. None. It’s been around for years, so it’s not going anywhere any time soon.

You can manually build your site and upload the assets via the web editor, if you want. However, I’d recommend using version control so that you can easily roll back changes, and move your site somewhere else if you need to. There’s a CLI tool and an API that make it much easier to upload new versions of your site.

The supporter plan allows you to use custom domains, gives you loads more storage and bandwidth, and allows as many sites as you want under the same account. It costs $5 a month, which really isn’t very much, and I’m happy to pay for it knowing that it’s supporting people creating websites for free and learning web development the same way I did.

Continuous deployment to Neocities with Github Actions

Like with Netlify and Vercel, I wanted to be able to set up a pipeline to automatically deploy my site when I pushed to the main branch. I’ve used CircleCI in the past, but I wanted to use Github Actions as it’s just... nicer.

I was very excited to discover that there’s a GitHub Action for deploying to Neocities by Bret Comnes! It uses the Neocities API under the hood, so you need to create an API key.

You can do this via the API (this example is from the API docs):

$ curl "https://USER:[email protected]/api/key"
{
  "result": "success",
  "api_key": "da77c3530c30593663bf7b797323e48c"
}

Or you can create a new key from your site settings page at https://neocities.org/settings/<your username>#api_key.

Once you’ve got the key, store it in your repo’s actions secrets. Head to your repo’s settings page, and open “Secrets and Variables” > “Actions” under the “Security” heading. Create a new repository secret called NEOCITIES_TOKEN and set its value as the key you just created.

If you don’t have any other GH Actions workflows set up, you’ll need to create the .github/workflows directory. In here, I’ve got a workflow called deploy-neocities.yml.

I’ve added some comments to show you what each bit does.

name: "Deploy to Neocities"
on:
  push:
    branches:
      - main # run this job when I push to main
jobs:
  deploy:
    name: "Deploy to Neocities"
    runs-on: ubuntu-latest # the system the runner uses
    steps:
      - uses: actions/checkout@v4 # checkout the repo
      - uses: actions/setup-node@v3 # install node.js
        with:
          node-version: "18"
          cache: "yarn" # I'm using yarn rather than npm
      - run: yarn install # install dependencies
      - run: yarn build # build my project
        env: # the env vars I need to build my site
          WEBMENTION_IO_TOKEN: ${{ secrets.WEBMENTION_IO_TOKEN }} 
      - uses: bcomnes/deploy-to-neocities@v1 # deploy!
        with: # config for the action
          api_token: ${{ secrets.NEOCITIES_TOKEN }}
          dist_dir: "_site/" # my build output directory
          cleanup: true # delete anything on neocities that's not in my dist_dir

The workflow runs every time I push commits to the main branch.

The environment variables you need for the yarn build step will vary, and you might not need any at all.

You will need the NEOCITIES_TOKEN for the deploy-to-neocities action, which we pass in here as the api_token param.

The default value of the cleanup param is false, and I had it set to that for ages, but then I realised that if I accidentally published a post and unpublished it by setting it back to draft, it wouldn’t delete the built post on Neocities. So even if it wasn’t linked from the site, the page itself would still be hosted there. I’ve since set cleanup to true so it removes any files from Neocities that aren’t in my newly built site output.

Once you’ve got that workflow file finished, commit it and push it to your repo. GitHub will pick it up, and start running it automatically depending on what you told it to do. I find it goes pretty fast – my site deploys in about 30s.

Scheduling builds

Branch pushes aren’t the only triggers for workflows! You can have time-based triggers as well, using cron, the scheduling tool.

For example, I automatically rebuild my site at 8am and 6pm every day to fetch the latest webmentions (there’s a script that runs every time the site is built).

on:
  schedule:
    - cron: 0 8/9 * * *

I recommend crontab.guru for help with cron syntax.

Sending webmentions from a static site

2024-01-20T00:00:00Z

It occurred to me this week that even though I’ve been using webmentions as comments for a really long time, I hadn’t actually been sending them myself. The shame! Here's how I set it up.

Edit 22/01/23: I've added in some checks to make sure I don't send webmentions for a post if I've already done it before.

Certified good egg Remy Sharp has a tool called webmention.app which will send webmentions for you – you CURL it with the URL of your post, and it’ll search through it for any links and check to see if the owners of those sites have webmentions or pingbacks set up. There’s also an npm package, @remy/webmention, which you give an RSS feed and it does the same thing. That’s the version I’ve used.

You can add it as the postbuild script in package.json, so it’ll run after every yarn build.

"scripts": {
    "postbuild": "webmention _site/feed.xml --limit 1 --send"
},

I was concerned that if my build runs every 12 hours, it’ll keep sending webmentions for the same posts. Remy assures me that duplicate webmentions aren’t an issue, as the accepting server will just respond with a 200 if I send a webmention that it’s already seen. However, if you build your site very often you might be at risk of nearly DOS-ing the websites you're sending mentions to. To get around this, you could:

write a script that runs the webmention CLI but only after checking the post timestamp of the last post to see if it's recent enough
keep a record somehow of the last post you sent webmentions for, e.g. in a text file in the repo
check the message from the last commit and only send the webmentions if you mention "new post" or similar

To be super safe, I've added it as a script in package.json but I'm calling it from within a bash script that checks the commit hash for the last commit, and records whether or not I've sent webmentions for that commit already.

#! /usr/bin/env bash

if ! test -f ./last_webmentions_commit; then
  echo "Last webmention commit file not found, exiting"
  exit 1
fi

# Read the contents of the file
LAST_COMMIT_SENT=$(cat ./last_webmentions_commit)

# Get latest commit hash
LATEST_COMMIT=$(git rev-parse --short HEAD)

# If the last commit hash I sent webmentions for is
# the same as the latest commit hash, exit
if [[ $LAST_COMMIT_SENT == $LATEST_COMMIT ]]; then
  echo "No new commits since we last sent webmentions, nothing to do"
  exit 0
fi

# Get the last commit message
LAST_COMMIT_MESSAGE=$(git log -1 --pretty=%B)

# Does the commit message contain 'post'?
if ! [[ $LAST_COMMIT_MESSAGE == *"post"* ]]; then
  echo "Last commit message does not contain 'post', nothing to do"
  exit 0
fi

# Update the file with the latest commit hash
echo $LATEST_COMMIT > ./last_webmentions_commit

yarn send-webmentions

When I write a new post, I always use the word "post" in the commit message, so this will help distinguish which commits we need to send webmentions for.

Now, every time I build and deploy my site, the script will send webmentions to anyone I’ve mentioned in the last post I wrote, as long as I haven't already sent webmentions for that post and the recipients have the webmention meta tags set up!

Just because you can doesn't mean you should: the element

2024-01-07T00:00:00Z

I came across Sara Joy's (very cool) demo of CSS theming without classes today, and looking through the code spotted a couple of elements I hadn't come across before: <progress> and <meter>. Granted, I've probably seen the <progress> element plenty of times, but I struggled to see what the <meter> was for.

While <progress> is fairly self-explanatory – it shows how far along something is, such as your progress through a form – the <meter> element was less obvious to me, so I had a look at the MDN page to see what they suggested.

This is a prime example of following the letter, not the spirit, of semantic HTML. Yes, technically the cooking temperature is somewhere between the lowest and highest temperature you can set the oven to, but is this actually helping people understand the recipe? Quite the opposite, it's making the recipe less accessible for anyone not using a screen reader.

Now, chances are the person who wrote this article simply couldn't think of a better example, and isn't necessarily proposing that everyone starts using meters instead of numbers in their recipes, but a lot of developers rely on MDN to tell them what is good practice, so I don't think this is particularly useful. (I'm going to try and contribute a better example.)

Inspired by this, and with a burning desire to build something truly terrible, I've created this recipe page using the <meter> element for every numerical value.

See the Pen CodePen Home A recipe, but all the numbers are bars by @sophiekoonin on CodePen.

The spec has a few more sensible examples, though I'm not entirely persuaded that a meter is a good illustration of newsgroup activity.

A more tangible use case for the <meter> element would be to indicate something like available storage space, or percentage of remaining budget on a service where your plan only allows you a certain number of events or entities: an example of this would be Sentry, where your plan has a limit to the number of events/errors it'll accept, depending on how much money you throw at them.

The key UX thing here, though, is that if it's important information it should be accompanied by a numerical value. A meter is good for an at-a-glance sense of how much of something has been used, but you need to present it alongside the actual value for it to be at all useful.

I checked both Dropbox and Google Drive, and both of them have a meter accompanied by a numerical description of how much space I've used; in both cases those meters are, of course, <div>s. Usually I'd complain about using a <div> when there's a semantic element available, but... it's not immediately clear to me what the advantage of using a <meter> would be from an accessibility viewpoint, if you've got the written description right there.

When you're choosing the right element for the job, it's entirely possible to go too far the other way, and overuse semantic elements when actually they hinder more than they help.

As my good pal and accessibility specialist Helen put it:

It’s a really good example of thinking about what you’re trying to communicate and to who and whether your “semantic” choices actually enable that.

Remembering the early 00s teen website scene

2023-12-30T00:00:00Z

localghost.dev has a new theme! In search of a little project over the merrineum that didn’t require me to learn anything and therefore use my brain, I remembered there was a stylesheet hidden in the themes directory of my website that I hadn’t finished. The theme: teenage personal websites in the early 00s. It was a lot of fun to build, and really nostalgic to recreate the websites of my youth. Think impossibly tiny fonts, blocky layouts with a sidebar full of assorted crap, and grungey photoshop brushes. (But this time with CONTAINER QUERIES.)

Try out the new theme by clicking the scribbly heart in the middle of the theme switcher.

I touched on this era of my online past in my talk “This talk is under construction: a love letter to the personal website” from FFConf 2022. Rachel White also wrote an excellent post about this topic back in 2016 called Keep The Internet Weird, and even gave a talk about it at JSConf EU 2017. This quote from her article particularly rings true for me:

I can still remember spending hours on the Internet scouring free resources created by other teenagers for really great grunge brushes to create the best layouts that represented me at that point in my life.

One of Rachel's sites, circa 2003

I've recreated some of this magic in the new theme, complete with the stupidly tiny content box that scrolls, and the font that you have to squint to read.

All of this has me reminisicing about my adventures building websites as part of this early 00s scene, so I thought I'd share some of those memories.

TLD is everything

If you were going to have a domain name, you had to have the right TLD. For some reason .org and .nu domain names were really fashionable. I remember sites with names like partly-cloudy.org and lipsofpink.org.

Of course I never had a domain because my parents wouldn’t pay for it (very reasonably), so I had to do the next best thing: be hosted on someone else's website who was cool enough to have a domain.

Since the webmasters of the early 00s let these domain names lapse a long time ago, there’s very little evidence of this scene on the internet. Google searches for “2000s teenage blog scene” come up with a lot of “Y2K” inspired tumblrs and reminiscences of the actual scene subculture, something entirely different. There’s the occasional Reddit post where someone asks “hey, does anyone remember...” and there will be one person who does, and everyone else just remembers LiveJournal (everyone remembers LJ).

Thank goodness for the Internet Archive and its Wayback Machine, which has snapshots of many of these sites. Sadly a lot of the images aren't there, so you can't experience the full, over-the-top glory of the layouts. Hopefully the new theme on this site will give you a taste of what it was like.

I had three different hosts over a few years, and slices of those sites are still findable on the Wayback Machine, so you can be assured I won't be telling you what those domains were in the interests of self-preservation (translation: it's too embarrassing).

It's been a stark reminder of the importance of digital archiving, finding all of these sites incomplete in some way: content missing, stylesheet missing, images missing. With every site, there’s probably going to be a point where you don’t want to renew the domain name any more, or the host itself disappears. It’s really important that you have some kind of backup of the content, not only in text format but visually as well: the Wayback Machine has only captured snippets of my old sites, and often the images and stylesheets don’t work. I’d give anything to see full screenshots of what some of those sites looked like.

This is my space, but here's something for you

Blog posts – annotated with the music you were listening to while writing, of course – would be little windows into your everyday life. I remember reading some older teenagers' blogs, especially those in the States, and thinking how extremely cool they seemed. Driving! Relationships! Life that didn't revolve around exams!

The homepage would always be the blog (splash screens were passé by this point), but there would always be a page about the site's owner, then a page of things for the visitor such as downloadable graphics, Photoshop brushes or HTML snippets to use on your own site.

Something that was particularly great about this scene was that there was a real sense of community, both literally with the networks you formed with other bloggers, but also through helping other people be a part of it by teaching them HTML skills. We'd all make friends and comment on each other's blogs and link to our friends' and fellow hostees' sites, most of whom were people that we'd never even met.

Most importantly, though: a lot of these websites were run by teenage girls and young women. It was a space on the internet for marginalised people where we could be ourselves, whether under a real name or an alias. Our families wouldn't find it, and IRL friends wouldn't either unless you gave them the URL of your site, so the like-minded audience that you had was very small and controlled as well. It felt like a really safe space to be yourself. None of the carefully curated content feeds that you get on social media these days (or even blogs these days, a lot of the time).

At the time, I was pretty unpopular at school, in part because I was such a computer geek (it was very much Not A Cool Hobby) and I used to spend breaks at school working on my website in the IT room. The group of friends I fell into – who I'm still very close with today – were all like-minded geeky types with our own websites. Seeing and interacting with these older teenagers online with these fancy domains and cool layouts made me feel like I was part of something and that my interests were actually socially acceptable.

Of course, joke's on all the people who thought I was uncool, because now I'm so cool that I have a domain name that I need to explain to everyone who isn't a developer every time I give someone my email address.

Version 17

I’d happily fire up FileZilla and FTP into my server, set up Greymatter or later Wordpress, and spend hours after school building layouts for my website, and my friends’ websites. Later I learned some very basic PHP so that I could include layout headers and footers on separate pages of my website, and even make the footer copyright date dynamic instead of just hard-coded.

We’d change the layouts on our sites very frequently – once a month or even more often – and keep track of which version we were on in our site sidebar. Layouts were usually a main bit and a sidebar, first with tables and later with absolutely positioned divs; every layout featured a large header image composed of a transparent cutout PSD of some band or celebrity with the obligatory grunge photoshop brushes on top. I have a handful of my later header images saved, but most are lost to time.

There were websites offering cutouts of celebrities from magazine scans and photoshoots; I’d make header images in my cracked version of Paint Shop Pro with whatever PSDs I could get my hands on, regardless of how much I actually liked that celebrity. That’s how I ended up with layouts featuring such gems as, er, Paris Hilton or Gwyneth Paltrow.

Over time, tiny scrunched-up scrolling box layouts were replaced by full-page ones, still clamped to the left hand side of the browser, but with even more room in the sidebar for fun things.

Website tsatskes

Another thing I miss from early websites is the random tsatskes you'd accumulate from around the web and display proudly on your homepage, and these websites were no exception. You might have fanlistings for things you love, links to cliques you’d joined, or 88 x 31px buttons linking to other websites.

Those of us on PHP-enabled servers might have some codegrrl scripts like PHPCurrently, a customisable list of what you were doing at any given point in time. I mentioned this in my post about APIs for things and I can only apologise for this absolutely awful example of what I was like as an Evanescence-obsessed teenager in 2004:

Or maybe PHPCalendar with mundane events from your life:

The end of an era

I think it was ultimately LiveJournal that killed off this scene – well, that and Myspace, probably. I moved to LJ in about 2005, and was already a late adopter. It offered a customisable blog linked to infinite user-run communities, so you didn’t have to build your own network of friends, and ultimately the experience was very similar and didn't require paying for a domain. All your friends’ posts appeared on your Friends Page, so you didn’t need RSS and you could comment on everything right there.

Of course, websites don't really carry the same weight as they did back then. The way we experience the internet is very different, not only for those of us who have seen it change, but even more so for the younger generations who've grown up with endless short form video. Perhaps the current Y2K aesthetic trend will lead teens to rediscover the joy of building blogs and learning web dev skills as they trace the digital footsteps of us crusty millennials.

🎵 avril lavigne - don't tell me

A good podcast: Twenty Thousand Hertz

2023-12-24T00:00:00Z

Everything you've ever wanted to know about sound, and things you didn't know you wanted to know but are glad you learned, such as:

why all film trailers sound the same with that deep "booj" noise
how NASA ran live audio from the Moon
how the language in The Sims came about, and the people who voice it
the history of Windows startup sounds
the Loudness Wars, aka the reason so much popular music from the last few decades is just badly mastered

An additional treat is the Mystery Sound competition they run every episode, where they play a snippet of an obscure (or sometimes very familiar) sound, and listeners can submit their guesses. Everything from the Gracie Films tag at the end of the Simpsons, to herring farts. Every year they do a Mystery Sound Game Show episode, and this year's is hilarious. There are some sounds in there that will no doubt trigger Pavlovian reactions for anyone listening.

2023: The year in lists

2023-12-21T00:00:00Z

Last year's roundup post was good fun, so I decided I'd do another one this year! I feel like I blinked in April and suddenly it was December.

Skip to bits you care about:

The year in...

The year in...

...conferences

After a bumper conference year in 2022, I decided to rein it in a bit and did four conferences this year. Four is a good number and a lot more doable than seven. I also attended a few on top of that.

In April, I spoke about personal websites at the incredible Beyond Tellerand in Düsseldorf. I also wrote about the experience. In fact, I loved it so much, I'm speaking at BTConf Berlin in 2024!
In May, I went back to All Day Hey in Leeds. I particularly enjoyed Jack Franklin's talk on Abstractions, complexities and off-ramps.
In June I spent my birthday at CSS Day in Amsterdam where I gave my personal website talk and got completely blown away by all the new features in CSS. Later in the month I attended StaffPlus at the Barbican, a very different experience from the usual kinds of conferences I tend to find myself at, but super useful for things I actually do day-to-day.
In July I found myself in Middlesbrough, in the North East, for Middlesbrough Frontend – where I gave the final form of my Virtual Piano talk (refined and perfected!) and witnessed the absolute joy of a local, supportive community. I also gained a pair of parmo socks.
At the end of August I travelled to Zurich for the first time for Front Conference, which was an absolute joy; onstage I built a website like it's 1999 wearing some very bright orange trousers, and experimented with sort-of live coding using inspire.js. Also a joy: travelling around the lake on a boat in the sunshine.
Back at the Barbican in October, for the glorious State of the Browser 2023. This year, Dave made everyone's conference badges out of floppy disks (you're a legend Dave), and I got a special red one as the backup MC in case he was ill.
It's not a conference season without going down to Brighton for FFConf in November, and it was excellent as always <3

Attending lots of front-of-the-frontend conferences always makes me a little sad that I don't do much of that for a living – my job is a lot more around back-of-the-frontend, leading teams and building at scale. There's been a lot of talk this year about how React and other frameworks have ruined frontend development, and I don't disagree; but it's also something I use daily at work. The best thing I can do is make sure we're using it in a sensible way and defaulting to native browser capabilities where we can. (I've got a post in me somewhere about all of this.)

...travel

My holidays this year took me to Copenhagen with my mum, then later to Norway to visit family. We flew up to Ålesund and drove to Geiranger (our suitcase only made it as far as Oslo, but thankfully joined us the next day) and then flew back down to Oslo for a few days on my cousin's farm. It was wonderful to meet some of my family for the first time!

Geiranger

My annual lads' trip with some of my best friends was in the Cotswolds this year, where we stayed in a gorgeous farmhouse and went to WWT Slimbridge to gawp at some excellent waders. We saw a rare goose that had got blown off course and across the Atlantic during its seasonal migration across North America, but it seemed to be happy enough amongst the local geese.

WWT Slimbridge, looking out over the Severn estuary towards Wales

Excellent duck action at Slimbridge

...books

I continued to make extensive use of my library's ebook service. I tend to only read in bed, which means I often manage about 3 pages before conking out.

Tomorrow, and Tomorrow, and Tomorrow: there probably isn't anyone left who hasn't read this book, but it's really excellent. A story of two children who grow up to build video games together.
Feet of Clay - Terry Pratchett: continuing my Pratchett education with the City Watch series, this one about murders and golems.
There There - Tommy Orange: a stark tale about a community of Native Americans in California, the legacy of oppression and colonialism.
Raven Black - Anne Cleeves: lighter reading perhaps, but not too light, there's plenty of murder; the first of the Shetland series that inspired one of my favourite BBC dramas.
My Year of Rest and Relaxation - Ottessa Moshfegh: a very depressed woman tries to hide from the world and sleep for an entire year.
Mr Penumbra's 24-hour Bookstore - Robin Sloan: An unemployed software developer gets a job at a strange bookshop and discovers a secret society hidden within.
A Woman - Sibilla Aleramo: from 1906, an autobiographical novel of the author's troubled childhood growing up in Italy, her unhappy marriage to her abuser, and her decision to leave.
Soul Music - Terry Pratchett: more Pratchett! It's like a hug for your brain! In this one, Ankh-Morpork discovers rock music.
The Four Winds - Kristin Hannah: poverty and struggles during the Great Depression and Dust Bowl in the Great Plains.
The Anomaly - Hervé le Tellier: I love a good sci-fi mystery. A plane inexplicably duplicates itself during a storm, and every passenger now has an exact double.
Making Money - Terry Pratchett: the second Moist von Lipwig/Ankh-Morpork industrialisation book. Sadly I didn't make it all the way through the third one.
Sea of Tranquility - Emily St.John Mandel: from the author of Station Eleven, a sci-fi story about a rift in time with an unravelling mystery. The ending was rather abrupt, but the story itself was great.
I also read another book of hers called The Glass Hotel, about the aftermath of a Ponzi scheme.
The Bandit Queens - Parini Shroff: a widow in an Indian village helps another woman kill her abusive husband and Events ensue. It's dark but also really charming and quite funny.

...podcasts

New to me in 2023:

If Books Could Kill: Michael Hobbes and Peter Shamshiri take us through some of the biggest "self-help"/pseudoscience books from the last few decades and deservedly tear them apart. I can't recommend this enough.
Dungeons and Daddies: a Dungeons and Dragons-but-also-not podcast. I'm working my way through season one, which is about "four dads from our world flung into a land of high fantasy and magic in a quest to rescue their lost sons". It's one of the funniest things I've ever listened to and I'm completely hooked.

...music

According to my Apple Music Replay (aka Spotify Wrapped ripoff) I actually didn't listen to a lot of music this year. It checks out, as I've been mainlining podcasts on my commute, and I don't listen to much while I work apart from the odd bit of lo-fi. Some good things came out this year, though.

Carly Rae Jepsen - The Loveliest Time: CRJ has a tradition of releasing a companion album for every album she releases, and this is a great one. Standout tracks include the Daft Punk-esque Psychedelic Switch, and Kamikaze.
Speak Now - Taylor's Version: I was honestly surprised how much I liked this album, given that Speak Now was always my second least favourite TS album (least favourite is the self-titled one). The maturity of her voice suits the songs so well, and I love the one she did with Hayley Williams (Castles Crumbling). Haunted is one of my favourite Taylor Swift songs, as well, so it was great to hear the re-record. I had high hopes for the 1989 re-record because that was always my favourite, but I think I actually liked this one more.
GUTS - Olivia Rodrigo: This would have completely passed me by had I not listened to an episode of Switched On Pop where they talked about two tracks from this album, vampire and bad idea right?. Boy, are these fucking great pop songs, and I can't resist a great pop song.
Evanescence - Fallen 20th Anniversary Edition – after spending years embarrassed that I was really into Evanescence as a teenager, I've come out the other side and you know what, this album slaps. It's just excellent. Now I'm at the age where 20th anniversary editions start coming out for some of the albums that shaped my teenage years, which is utterly ridiculous, but the good news is that they sound great because a lot of the mastering was a bit trash in the early 00s.
the record - boygenius: Julien Baker, Lucy Dacus and Phoebe Bridgers come up with some really glorious harmonies which is a sure way to get me on board. I'm not so much of a fan of sad girl music so I don't tend to listen to their solo stuff or anything but I really loved some of the tracks off this album. Not Strong Enough is a standout.

Regretfully (especially after last year's glowing recommendation) I cleared any trace of Rammstein and associated acts out of my music library following some really dreadful accusations. I really enjoyed their music, but I couldn't really justify listening to it any more given how fucking creepy and problematic the singer is. The investigation was dropped due to lack of evidence, but there have been enough stories that came out to make me feel uncomfortable about the whole thing regardless.

...video games

Another great year for games! I also wrote up a list of my favourite games, some of which were new to me this year.

The standout for me and basically everyone else was Baldur's Gate 3. I'm 2/3 through my second playthrough; first run I played a Druid, second time is a Dark Urge playthrough. I thought I'd be evil but it turns out I'm incapable of making questionably moral decisions even in video games. I still got to romance Astarion, though – and it's extra fun as the Dark Urge. I've sunk so many hours into this game and yet I always discover something I missed.

Other highlights from 2023:

Chants of Sennaar: It's a linguist's dream, a puzzle game where you have to decipher the languages of the civilisations around you through context and environmental clues. It's also really beautiful. One of the most unique puzzle games I've played - I actually played this with my husband, solving puzzles together, and it was very wholesome.
Alba: A Wildlife Adventure: you play a young girl visiting her grandparents on a Spanish island, who gets together with her friend to start a campaign to save the island's wildlife. It's so wholesome and the fauna is very accurate — I spent far too long running around the island looking for teals and kestrels. It's a great gateway to real life birdwatching!
Disney Dreamlight Valley. Yes, really. I don't even like Disney that much, it wasn't a huge part of my life growing up and I haven't seen half of the films (not even the Lion King, which always shocks people when I say that) but the game is basically Animal Crossing with more expensive intellectual property, and it's been a lovely way to unwind. I'm currently in bed with sinusitis as I write this and I've absolutely been rinsing the game. Though it's firmly in the category of "games that make you wonder why the residents of this town don't ever fucking contribute". If you have Apple Arcade, it's just become available on there (though no cross save); I have it on Switch and the framerate is not great, so other platforms are probably better.
Pistol Whip. I got a PS VR 2 for my birthday and it's a super fun rhythm game but with shooting.
Horizon: Call Of The Mountain (PS VR 2). I nearly didn't include this because it is bascially just a climbing simulator with a bit of combat, but it's a beautiful game, VR archery is so much fun and the environments you go through are so cool. I struggled a lot with this game at first because I'm actually terrified of heights, so I got quite anxious climbing some of the rusty metal structures hanging over massive drops!
No Man's Sky. Very much new to me, not new game – I got it on offer originally to try out with PS VR, but found I actually preferred playing it normally. I wasn't expecting to enjoy this game as much as I did, but it's a great combination of exploration, crafting and weird little space animals.
Cyberpunk 2077 gets an honourable mention because the DLC was excellent and the new patch balanced a lot of the annoying things about the game. If you've been holding off, give it a go – this game rules.

...learning things

Some of the things I learned this year:

I did some really complex backend work, complained the whole way through, and begrudgingly learned a lot from it.
I was thrown into a new situation at work which required a lot of disambiguation and interviewing lots of people to get enough information to solve a problem and make a decision on how to proceed. It was exhausting, but interesting, and great experience.
I did a couple of painting and drawing courses and discovered that I really liked painting. Unfortunately I don't have a lot of space for the hobby right now, but you can be sure I bought all the things for it and they're in a drawer now.
My work held a Security Awareness Week and ran a Capture the Flag competition which I got completely hooked on (and won!). As a fiend for puzzles, it ticked every box for me. I absolutely loved diving through the problems and trying to reverse engineer things. I'd really like to learn more about that stuff.

I came away from the various frontend conferences this year intending to learn some cool new CSS stuff, but honestly my appetite for building things outside of work was so minimal that I just didn't get around to it. I did play with :has on the way home from CSS Day, though.

...purchases

The best things I bought this year:

a second-hand soda stream. £40 off ebay, and I get sparkling water whenever I want.
a moth-patterned dress from Disturbia. I've enjoyed indulging my ~inner~ outer goth this year.
a Meaco fan, which is wonderfully quiet and has about 954 different speeds, all of which feel like some kind of deity is blowing on your face.
two gorgeous prints of the Barbican Conservatory by Cat Sims
"haha business" t-shirt from dogecore
Beautiful moon earrings from my favourite jewellery designer Rosa Pietsch

...apps and programs

In Your Face means I'll never be late to a meeting again
BetterSnapTool lets you drag windows to the side of the screen and instantly snap them to half or a quarter of the desktop. For work that requires a lot of side-by-side comparison it's a godsend.
Boop is a great little tool for doing a lot of common dev tasks like decoding URI-encoded text, converting CSV to JSON, and so on.
Obsidian: I decided it was time to get organised and put all my notes and docs in one place so I'd actually know where they were. I'm hoping that over time it'll become a really useful reference for my own brain, which is a swirling vortex of smaller, swirlier vortexes.

...blog posts

I did even better than last year and wrote 10 posts, shared 2 recipes and talked about one podcast. Some of my favourite posts from this year:

...the web

Mastodon continued to grow on me. I still miss the old Twitter, and the reach I used to get on there, but I've kind of embraced the slowness of Mastodon now. I don't even check it every day, which seems like a depressing thing to be surprised about, but I was so hooked on Twitter.
I subscribed to the Garbage Day newsletter, and it's very good if you're an Internet Person.
Robin Rendle and Matthias Ott started newsletters, and you should absolutely subscribe (either via RSS or email). Robin's is called The Cascade and it's about CSS; Matthias's is Own Your Web, about designing, building and publishing on the web. They are both Very Good.

And so we're at the end

It's been a whirlwind year and I've ended it pretty shattered, but I'm pleased with what I achieved (and by that I mean saving the world in Baldur's Gate 3, obviously).

I used a fair bit of my time off this year on conferences which, although fun, are not restful in the slightest. That on top of a stressful few months towards the end of the year mean I've ended it a bit burnt out again. Not as bad as last year, but still not great. The plus side: I get a 3-month paid sabbatical next year (!) so I'm going to make sure I get more of a rest. I'm thinking of doing some volunteering/conservation work with a wildlife trust or something similar, and we're hoping to finally go to Japan later in 2024.

Wishing you all a lovely Christmas, a happy new year, and a 2024 that's exactly what you are hoping for!

Engineering progression for humans

2023-12-12T00:00:00Z

As engineers it can be unclear where we’re heading, especially when we’re heads down writing code all the time. It can be hard to think even a few months ahead. What does an engineering career in a larger organisation look like? What even is a staff engineer? How long should you stay at the same company?

Whether you're new to the industry or several years in, there's a good chance you've identified with at least one of these statements at some point:

It seems like there’s a dozen different ways you could progress and you have no idea what’s right for you
There isn’t anyone in your immediate organisation who has a role you see yourself going into
You don’t really know what you want from your career

This is everything I've learned about progression in larger organisations, with some thoughts and opinions on the way. If you're not working in a capital-T capital-C Tech Company, this might not be so applicable to your situation, but never say never!

This isn't going to be a step-by-step guide to how to reach each level of the engineering career path. For one thing, it varies wildly from company to company, so my advice might not be applicable where you work. Instead, by looking at what these levels involve, you might be able to identify where you need more experience or where you're already well on your way.

Know what motivates you

Understanding how you want to progress in your engineering career depends on what motivates you.

It’s completely okay to be motivated by money, for example. Money can be exchanged for goods and services. Houses are expensive. Families are expensive. Dogs are expensive. Maybe you’re saving for your future, or supporting someone back home, or maybe you like having nice things.

Or maybe you want to be in a position where you can influence teams at a higher level. You have thoughts and opinions, and you like being able to help architect systems or decide on the best way forward.

Perhaps you want a role that lets you help others, and grow people. Watching them develop in their own careers thanks to your support. Helping teams achieve their goals and be productive.

You might need a change because your current role is negatively affecting your mental health. For me, mental health trumps everything, and there is no job that is worth doing at the expense of mental health. If it sucks, hit the bricks.

Maybe you want to do work, clock out, and focus on the other things in life. Like extreme ironing, or beekeeping.

You’ll probably fall into a few of these categories. I know I’m definitely motivated by helping people but also taking a high-level view and influencing things. And I have to say, I also like having money. But I've also been careful to choose jobs that allow me to protect my work-life balance.

Your career decisions should reflect what’s best for you. Not your company. Not anyone else. We spend 40 hours a week in our jobs, so it needs to be worth it.

Speaking of which:

Not everybody needs to (or wants to) progress

It's so easy to fall into the trap of thinking you have to follow the same path as everyone else. You could be forgiven for thinking careers are all about progression. But ultimately it's whatever you want it to be, and if you're happy where you are, that's the most important thing. Many folks out there will tell you that you don't have to have a Big Tech job to be a successful engineer, and you should listen to them. Engineering, software development, web design, whatever you want to call it: there are so many versions of this job and only you know which one suits you best.

The way up (or sideways. Or backwards.)

The first few stages of the engineering career path are relatively well-trodden. You come in at an entry-level or so-called “junior” position, you work your way up to a mid-level engineer – often just called “engineer” – and then you might go up to Senior. Here's one such example:

What each of these steps looks like depends on your organisation, but commonly Engineer I is like an intern or apprentice (what you might expect for someone with little to no background in engineering at all), Engineer II is what is often called "junior" (entry-level for someone with a qualification or a bit of training) and Engineer III is a mid-level position. Senior might just be one role, or split out into two levels.

It depends on where you work, but generally speaking there are no set timelines for this progression. Some folks progress faster than others, or have their start at different times in their life: sometimes you’ll work with a 22-year-old senior engineer and feel like you are turning into dust, sometimes you’ll meet folks in their 40s or 50s who are starting out as developers. It’s all good.

A note on promotions: many tech companies these days will only consider a promotion once you've shown that you're already working at the next level up. I don't especially like this, as I think it disadvantages people who aren't extroverted or highly visible in an organisation, and it kind of means you end up doing the job for a while before you get paid for it. In these kinds of organisations, progression is as much about playing the game as it is about doing a good job and being recognised for it. I'll write up another post about that soon.

I also know some bigger orgs have a kind of rule that you have to be in a role for X number of years before you can get promoted, and I particularly don’t agree with that approach because your tenure has no bearing on your ability. I'd agree that it takes time to build up the required experience for higher levels of jobs, but that amount of time differs from person to person and each individual case should be considered.

The first few stages of an engineer's career are a bit more well-defined; let's have a look at them.

Engineer I and II

As Engineer I, you're at the start of your career, learning and asking questions. Not that you won't be learning and asking questions for the rest of your career – you should definitely be doing that regardless of your experience. But you'll be getting to grips with the tools, with the practices, with how things work.

The kind of work you do at this stage should be very well-defined tasks that are curated for you by a more senior engineer as good things to get your teeth into and learn from. You might spend a lot of time pairing on tasks.

At level II, you've got the base knowledge down, you're a solid, trusted contributor to your team and beginning to design solutions on a smaller scale for problems your team is working on. You're more independent now, though you're probably still working with senior engineers to break down the problems and scope the work that you're doing.

Mid-level engineer / Engineer III

Now you're a lot more independent – a good individual contributor (IC). You're happy designing and implementing solutions, suggesting improvements to ways of working and engineering patterns, writing code with a good level of proficiency. You may also start to mentor less experienced engineers. You'll be leading mid-sized projects and are trusted to get the job done. Your PR reviews and pairing sessions help more junior engineers learn the ropes.

It’s totally legit to just stay here and hang out for however long you want. You don’t need to go for senior.

Senior engineer

Senior engineers are experienced ICs who can lead projects or features that have a higher level of technical complexity. You'll be mentoring less experienced engineers, either through formal 1:1s or by leading by example through the code you ship and the feedback you leave on PRs. You'll get good at identifying opportunities for your team and how they relate to the wider goals of your organisation.

The more senior you get, the more ambiguity there is in what you’re working on, and the more high-level you start to operate. My work often finds me looking across teams and even across the organisation.

Senior engineers come in all shapes and sizes!

The senior engineer role isn't the same for everyone. I like how Monzo's engineering progression framework, er, frames it, and I've very much paraphrased here:

You might be a galaxy-brained domain expert, who knows the ins and outs of a particular area or system like the back of your hand. If there's a project involving this system, you're possibly leading it, but you're definitely advising on it.

Or you might be more of a "tech lead"-shaped senior engineer, focussing on enabling your team to build great quality software and fostering a great engineering culture. At Monzo this doesn’t translate to literally being tech lead of a team – it’s a hat you put on, and you might not be senior yet when you're tech-leading.

You can also sit somewhere in the middle, being a great individual contributor and leading projects, helping your team to do great things.

Senior to ???

What comes next?

So, for one thing, maybe you don’t go anywhere.

The long-tenured senior engineers on our teams are indispensable. They’re fountains of knowledge, they’ve seen it all, they are wise beyond their years. Every company needs some great senior engineers who are happy continuing to be great senior engineers. You may choose to reach senior, and stay there.

Senior to staff

If you want to continue down the IC path, generally it'll be to something like Staff Engineer. This is technically a leadership position, but it shouldn’t involve managing people.

What this role looks like varies massively across different organisations and even across different teams in the same organisation.

If you do decide to pursue further progression to Staff and above, this is where things start to get murky. It’s surprisingly not a very well-trodden path.

Thankfully, both Tanya Reilly and Will Larson have done lots of path-treading and word-writing about this very topic: Tanya’s book, The Staff Engineer’s Path, provides a great overview of what you might expect to be doing and what you need to excel in this role. Will Larson is the author of Staff Engineer and also runs the StaffEng website with a lot of helpful stories and guides to staff engineering across organisations.

Notably, he came up with Staff Engineer archetypes that nicely outline what this role might look like:

The Tech Lead guides the approach and execution of a particular team. They partner closely with a single manager, but sometimes they partner with two or three managers within a focused area. Some companies also have a Tech Lead Manager role, which is similar to the Tech Lead archetype but exists on the engineering manager ladder and includes people management responsibilities.

The Architect is responsible for the direction, quality, and approach within a critical area. They combine in-depth knowledge of technical constraints, user needs, and organization level leadership.

The Solver digs deep into arbitrarily complex problems and finds an appropriate path forward. Some focus on a given area for long periods. Others bounce from hotspot to hotspot as guided by organizational leadership.

The Right Hand extends an executive's attention, borrowing their scope and authority to operate particularly complex organizations. They provide additional leadership bandwidth to leaders of large-scale organizations.

I’m working on this path myself, recognising the areas I need to develop. My engineering director framed it as having muscles I need to develop and train to get to staff; for example, I know I’m very technically competent and have formed good relationships across the company, but I need to get better at managing my time and focus, and I'm gaining experience of tackling highly ambiguous problems.

This year we also had the inaugural StaffPlus conference from the same folks that run LeadDev. I found this a really great opportunity to absorb some really useful information for my own progression in a bigger organisation. (Shame about the eye-watering ticket price, though.)

Senior to engineering management

In tech companies these days it’s very common to have dedicated engineering managers (EMs) who look after a group or team of engineers, along with some other responsibilities. At Monzo our EMs also function as delivery leads, making sure the teams are unblocked and productive, and acting as envoys between product teams and leadership.

You might take a step sideways away from the hands-on engineering role, and become an engineering manager. It’s not a promotion as such, more of a role change; generally speaking engineers wanting to make the transition into engineering management will need to get to senior first, before moving laterally.

The most well-known guide in this area is The Manager’s Path by Camille Fournier. I read a good part of it myself some years ago when I was looking into becoming a tech lead, and it has some great advice on what makes an effective technical manager (and of course, how to get there).

I know plenty of engineers who have gone into engineering management and loved it; I also know a handful who have done it for a while and realised it wasn't for them and gone back to being an IC. It doesn't have to be a permanent choice.

Other potential sideways steps

I've outlined some very common paths for engineers, but there are other roles you might choose to explore in the world of engineering that are more of a sideways step, such as:

Developer relations (devrel) – fostering relationships with the developers who use products, showing them the art of the possible, and building a community around that
Sales engineering – combining technical expertise and people skills in a role that could see you travelling all over!
Specialist consultancy roles e.g. accessibility consultancy – laser-focussing your skills in a certain area and helping companies to improve, or even taking on a full-time leadership position as head of your specialism.

(If you know of any others I've missed, do let me know, and I'll add them in.)

So, that's the engineer's path. But it's rare that people spend their entire careers in one company these days. Where might your career take you?

Cross-company career paths illustrated using tenuous playground metaphors

You might recognise these paths from your own career or those of the people around you. They're somewhat simplified for brevity.

The ladder

Photo by Michael Glazier on Unsplash

The “traditional” career ladder model tended to be applied to people within one organisation. At a company I used to work at, it looked a bit like this:

It was a very old company, and people stayed for their whole careers. The more senior you got, the bigger the likelihood was you’d end up managing people. There wasn’t really an IC track in the way there is elsewhere.

With a long career in one place, you get great in-depth familiarity with systems and organisational patterns, and you become a trusted face in the company. Many companies offer bonuses and benefits for long service, like sabbaticals. And if you're happy there, that's great.

Do bear in mind that that tenure might come at a cost of not gaining experience of the outside world: you could end up with tunnel vision, only knowing how things are done where you work. As time goes by you might find yourself more resistant to change, because it’s not the way you’ve always done things (this was a common pattern where I worked). There are ways around this, of course – make sure you keep in touch with folks from other orgs, hire people from outside and trust their opinions, and keep up to date with what’s going on in the wider industry.

The climbing frame

Photo by S. Tsuchiya on Unsplash

A more common pattern these days is to move every few years. You might take a promotion for the new role, or do a sideways step into another company at the same level. You don’t always have to be getting a promotion when you move, though 9 times out of 10 you should be getting a pay rise with that move, unless it’s a conscious decision (e.g. moving to a nonprofit or smaller company).

This might also involve a role change – I’ve known engineers who climbed the ladder and then did a sideways step into a non-engineering role. That engineering background is so powerful when you go into product management, for example.

Monkey bars

Photo by Annie Spratt on Unsplash

Some folks hop from company to company every 1-2 years; there’s nothing inherently wrong with this approach. The old advice goes that lots of short stints at different places will look bad on your CV/résumé, but 1-2 years is a decent amount of time in the industry these days.

One advantage is that you get insight into how different companies work and different tech stacks, and you should hopefully be negotiating pay rises with those moves, even if they’re lateral moves. Some of those roles might involve promotions, as well.

Of course, people working short-term contracts will have lots of different roles in their employment history and that’s to be expected.

The downside is that if you’re more into the leadership side of things, you might not be hanging around long enough to establish yourself as an authority of anything, and being really familiar with your organisation and its systems. So have a think about whether that’s something you value.

Merry-go-round

Photo by Loegunn Lai on Unsplash

This is actually my career history. Also known as the "Grampa Simpson".

I left my job at Monzo to pursue a role I was offered at a startup because I thought it was a great opportunity I shouldn’t pass up. It ended up not working out – our expectations of the role weren’t really aligned, it was nobody's fault – so I ended up coming back to Monzo in a similar role but a different team. At Monzo they call this a “boomerang”, but that doesn’t fit with my ridiculous playground analogy.

I don’t regret leaving to try it out, and I don’t regret coming back. It’s completely fine to make a U-turn as long as it’s the right thing for you. As I wrote at the time: going back doesn’t always mean going backwards.

Like with any merry-go-round, you don’t want to spin too many times or you’ll get dizzy. It’s good to go on some other equipment too.

The rocker

Photo by Shiau Ling on Unsplash

Not everyone wants to climb to the top, and that’s okay. There are any number of reasons why someone might want to stay in the same role.

Maybe they like it. Maybe they’ve got other responsibilities outside of work that take up any extra space in their brain. Maybe they value other things in life. It’s all good.

I’m definitely guilty of feeling like I always need to be moving up to the next level, as if by staying still I’m not good enough; but of course, that’s absolute rubbish.

There's no one right way

Progression can mean so many different things. It can mean going forwards and backwards, moving around trying different things and coming back again, or staying in the same place having a great time. It really depends what suits you. There isn't one "right" path to follow!

I hope this has gone some way to demystify the path your career could take, both role-wise and company-wise. And remember, don't let anyone make you feel like you must pursue one particular path or fit your career into a specific box. Only you can make that decision.

Beautiful musical chaos

2023-12-02T00:00:00Z

When I tell people I’m in a choir, some of them imagine the same thing: churches, robes and choral music. Pious singing faces.

(To be clear, I’ve done that kind of choir before and it’s great in its own way, but that’s very much not what goes on in this one.)

Generally, though, people respond with the question, “what kind of choir is it?”. What indeed.

A post by Phil Hawksworth earlier this year about his newfound love of choir really resonated because I knew exactly how it felt to be completely, unexpectedly sucked in to this hobby.

Daylight Music at the Union Chapel

I’d been in various choirs before, classical ones, but only joined SHE Choir because I’d just moved back to London and didn’t know anyone. The choir started life as a student society in Manchester where I studied, and I’d gone to a few sessions the year before, but now the founders had moved back to London and brought the choir with them. It was chaotic, but I was hooked immediately.

A few months in, I decided I wanted to try arranging something. I remember asking if it was okay for me to have a go, and I put together a three-part arrangement of Don’t Panic by Coldplay. I was too nervous to sing in front of people so I got someone else to teach it. But it sounded good.

A weekend away with both the London and Manchester choirs to a druid camp in a remote part of the Midlands – involving sleeping next to a creepy fur-clad mannequin, lots of singing in yurts, and a bunch of city women completely failing to work a log fire – finally gave me the confidence to start singing on my own in front of people. I realised that choir was a safe space for me to do that, to teach and learn at the same time. After I got back, coasting on the high from the weekend, I arranged Fleetwood Mac’s song Everywhere and that would become the first thing I taught by myself.

From there, the choir became something I could actively contribute to. Not long after that the founders left and, not wanting to see this lovely motley crew disappear, a couple of us took over as organisers. That was a lot of work for two people (you can see why people do it as a full-time job!) so we eventually transitioned to a team-based structure. It’s less rigorous and a bit more anarchic, but it means less responsibility falls on one person’s shoulders. (I’m always and forever the admin queen... and of course I built the website.)

We became an a cappella group solely because none of us could play the piano. I got us on Slack because that was what you did in 2014, and we got organised. We started taking attendance, and the revolving door of people coming and going and never learning the songs became a more reliable core membership of regulars who got better every week. I got fed up of taking attendance very quickly, and built a Slack integration that did it for us.

We met up with another more established women’s choir in London and attended each other’s rehearsals to swap tips. They had been the inspiration for our choir’s existence. I was blown away by them, and imagined that maybe one day we’d be as good as them.

Over the years I’ve arranged and taught songs by Alice Cooper, The Postal Service, Imogen Heap, Bruce Springsteen, Chaka Khan, Wheatus, Regina Spektor, Dolly Parton, and more. Ain’t Nobody is well-known enough to most, and my arrangement simple enough, that for a while it became the first song anyone taught when a new branch of the choir popped up. It’s quite a feeling to stand on a stage in front of a hundred or so people from all over, most of whom you’ve never met, and conduct them all singing a song that you arranged.

Conducting isn’t just waving your hands about and being a human metronome. It's conveying emotion, volume, shape of the sound. For me, the most special part of it is having your arrangement sung back at you with the full weight of the choir behind it – it often makes me emotional to hear those little crunchy chords I put in reflected so beautifully in the choir’s strong voices. I did this.

As time goes by the thing I enjoy the most is watching new conductors get that same joy from standing at the front and hearing their arrangement sung back at them. It can be a very vulnerable thing to put yourself at the front, and I’m so glad we’ve given people the opportunity to try new things out, arrange these songs nobody else knows but that mean so much to them, and learn new skills along the way.

Three years after we attended the other choir’s rehearsal, we were on the same billing as them at a festival in London. I watched their set and realised that we were not only that good, but also so different. Going a cappella had actually forced us to be more creative with our arrangements, being the bass and the instruments as well.

The choir that was once just in Manchester and London is now all over England, Germany and New Zealand. People love it so much that when they move away, they start up a new one wherever they end up. For a while there was one in a remote skiing town somewhere in France. Our London group is changing our name now, to better reflect the diversity of our members: we've called ourselves Mixtape. The perfect name for a weird and wonderful collection of songs, and people.

On Thursday night at our winter gig I stood in front of the choir and waved my arms around to the tune of Dancing In The Dark by Bruce Springsteen, one of the most ambitious arrangements I’ve done – and the choir nailed every note. We’re an amateur choir in every way: no auditions, collectively and chaotically self-organised, and we’re all just making it up as we go along. But we’re so good at it.

I’ve invested a third of my life in this choir and there have been moments when I’ve been overcome with frustration (nobody’s doing anything! I have to do everything!) or worry (why hasn’t anyone learned the song?). But reflecting on how far we’ve come and what we’ve brought to people’s lives makes it all worth it.

Those are the moments I live for: the biggest smile on a new conductor’s face as they conduct their song in public for the first time; the “I’m not sure if this is going to sound good” but it always does; the “okay, sure, I’ll have a go” from a quiet person; the drunken renditions of every song we’ve ever done, fuelled by too much wine, at every single choir retreat (and yes, it really is exactly like Pitch Perfect); and the teary reflections the morning of the last day of retreat as everyone shares what this choir means to them. And ultimately, it’s been a lifeline for me during some of the hardest times of my life.

Of course, I could never convey all of that in one sentence when asked “what kind of choir is it?”. So I just say “it’s a pop choir.” But it’s a lot more than that, really, isn’t it?

Photo: Jessica Jill Photo

A good recipe: The best chocolate brownies

2023-11-23T00:00:00Z

I've been making this "Bonfire Brownies" recipe since it was aired on UK children's TV institution Blue Peter in the early 00s, and I maintain it's still the best brownie recipe. Chewy and delicious. I recommend freezing them and eating them straight out of the freezer (I discovered this when my mum used to put them in the freezer to keep them out of the way of temptation, and I'd nick them when she wasn't looking). There's nothing bonfire-specific about it, they're chocolate brownies and I suppose the episode aired around 5th November, but they're fucking great.

Look, I don't have any photos of this, but you've just got to take my word for it.

Makes 12

Ingredients

100g unsalted butter
225g golden caster sugar (or regular caster sugar)
40g cocoa powder
2 eggs
50g self-raising flour
50g chocolate chips
1/2 tsp vanilla essence (optional)

Method

Preheat the oven to 180°C/350°F. Grease and line a 20cm square brownie tin.

In a large bowl beat the eggs, add the sugar and mix together until smooth.

Melt the butter in a small saucepan over a medium heat. Sift in the cocoa powder and mix. Add this mixture along with the vanilla essence (if using) to the egg and sugar mixture.

Sift the flour into the wet ingredients and mix together until smooth. Fold in the chocolate chips.

Pour into the brownie tin, and put in the oven. Cook for around 20-25 mins, until the top is a darker brown (but watch it doesn't burn!).

Leave to cool in the tin for 5-10 mins, then carefully turn out onto a cooling rack. For best results, wait until they're completely cooled to slice.

How to schedule posts in Eleventy

2023-11-21T00:00:00Z

I scheduled this post, isn't that cute?

I find I have very little energy to write blog posts during the week, but occasionally I sit down on the weekend to write something and have a few ideas that turn into multiple posts. I'd like to be able to publish posts more often, but realistically I won't be writing things more than once every few weeks (which is okay!). I decided I needed to be able to schedule posts so I don't just publish a load at once.

Eleventy's suggested draft post setup has been working nicely for me, and posts with draft: true in the frontmatter don't appear in the production site. However, I miss Hugo's scheduled posts feature, where I'd be able to write a post with a date in the future and it'd only appear on the blog after that date. Thankfully it's pretty straightforward to set up in Eleventy, in a similar way to drafts.

Scheduling website builds

My website already builds twice a day to fetch the latest webmentions. I had a GitHub Actions job to build and deploy my site to Neocities, with a cron schedule that ran every 12 hours:

name: "Deploy to Neocities"
on:
  schedule:
    - cron: 0 */12 * * *
  push:
    branches:
      - main
jobs:
  deploy:
    name: "Deploy to Neocities"
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        with:
          node-version: "18"
          cache: "yarn"
      - run: yarn install
      - run: yarn build
      - uses: bcomnes/deploy-to-neocities@v1
        with:
          api_token: ${{ secrets.SUPER_SECRET_TOKEN }}
          dist_dir: "_site/"
          cleanup: false

I tweaked the cron schedule so that it runs daily at 8am and 5pm, so I wouldn't publish a post at midnight.

name: "Deploy to Neocities"
on:
  schedule:
    - cron: 0 8/9 * * *

Exclude scheduled posts from collections

In my drafts.js plugin, I added a new function to check whether a post's timestamp is in the future:

const now = new Date();

function isScheduledPost(data) {
  return data.date != null && data.date > now;
}

Finally I added this function to the conditions in the eleventyComputedPermalink and eleventyComputedExcludeFromCollections functions which check for draft posts:

function eleventyComputedPermalink() {
  // When using `addGlobalData` and you *want* to return a function, you must nest functions like this.
  // `addGlobalData` acts like a global data file and runs the top level function it receives.
  return (data) => {
    // Always skip during non-watch/serve builds
    if (!process.env.BUILD_DRAFTS && (data.draft || isScheduledPost(data))) {
      return false;
    }

    return data.permalink;
  };
}

That's it! The scheduled posts will always show up when running the site locally, as process.env.BUILD_DRAFTS is always true in the dev server. But they won't show up in the production site until the day comes and the site gets rebuilt. To be extra sure, you can run your site's prod build command and check the output – your scheduled page shouldn't be listed.

Building post types and category RSS feeds in Eleventy

2023-11-19T00:00:00Z

I mentioned recently that I'd built separate RSS feeds for different kinds of posts. Here's how I did it!

I had to do a bit of fiddling to get this working in Eleventy – this is one of the few things I think Hugo actually does in a simpler way, as you can create different rss.xml templates inside specific layout directories. My solution is not especially sophisticated, but it works! (If you know a less complicated way... I'd love to hear it.)

Building post types

Alongside the traditional long-form blog posts, I wanted to be able to publish little "micro" posts of recommendations and things I liked. In order to distinguish them, I added a new frontmatter field called type to all my posts. Right now, there are a few different types: article, podcast, game, book, and recipe.

In my blog post list page, I add the type as a data attribute on the <li> for each "micro" post, so that I can display an appropriate emoji on the list item. (I haven't quite figured out how I want to show filters for post types yet.)

Each post type has a json file which specifies the default frontmatter for all files in that directory. It automatically formats the post title into a consistent format, and tags the post accordingly. Here's podcasts.json:

{
  "layout": "good-podcast.njk",
  "hasCustomOGImage": true,
  "eleventyComputed": {
    "title": "A good podcast: {{ podcast }}"
  },
  "type": "podcast",
  "tags": [
    "podcast"
  ],
  "permalink": "/blog/a-good-podcast-{{ podcast | slugify }}/index.html"
}

The tags and type are identical because I wanted a quick way of accessing post type in things like the layout, but I wanted readers to be able to list all podcasts just like they can any other tag – and post tags might contain more than just "podcast", say. Any tags I set on the post itself will be added to that array, not replace it.

I use the hasCustomOGImage variable to tell a layout whether to find a specific OG image based on the title of the post, or just use the default one.

The post itself has its own frontmatter, with the name of the podcast (or book, or game, etc), the date, an image with alt text, and the URL of the podcast.

---
podcast: If Books Could Kill
url: https://pod.link/1651876897
date: 2023-07-16
image: if-books-could-kill.jpeg
alt: "The cover image for If Books Could Kill, with an illustration of a bleeding book" 
---

Michael Hobbes and Peter Shamshiri take us through some of the biggest "self-help"/pseudoscience books from the last few decades and deservedly tear them apart.

[...]

Separating RSS feeds

If you don't already, you'll need the Eleventy RSS plugin set up. See the plugin docs for instructions.

My RSS feed was previously one single feed, set up with some basic settings – it was pretty much identical to the example in the RSS plugin docs.

I wanted to split up my feeds into the various different types of "micro" posts (the recommendations), and then everything else as one "articles" feed; however, I also wanted to keep the "everything" feed for people who like their posts about Content-Security-Policy headers interspersed with brownie recipes from 2001.

Collections, collections, collections

I've got a few custom collections for my post types. The first one pulls all of the posts in the blog directory, which encompasses all articles and post types:

// eleventy.config.js

eleventyConfig.addCollection("blog", (collection) => {
  return collection.getFilteredByGlob("./src/blog/**/*.md");
});

Then I've got the categoryFeeds collection which contains all of the specific feeds I want for each "micro" post type.

eleventyConfig.addCollection("categoryFeeds", () => ["recipe", "book", "game", "podcast"]);

Finally, I've got one for "articles" - all the posts that aren't micro-categories. These all live in the same directory, so I used getFilteredByGlob again. (I've actually called the directory "posts" but I couldn't be bothered to change it.)

  eleventyConfig.addCollection("articles", (collection) => {
    return collection.getFilteredByGlob("./src/blog/posts/*.md");
  });

Paginating the category feeds

I used Eleventy's excellent pagination feature to generate the RSS feeds themselves. I've got a file called rss-categories.11ty.js which contains info about the data I want to paginate, and that will produce a feed for each of the feed categories in my categoryFeeds collection. Each generated file will have the same template (rss.njk) but a different title, subtitle and feed URL; it'll also have a different value of feed (set to whichever category the feed is for, based on the collection item).

class RSSCategories {
  data() {
    return {
      pagination: {
        data: "collections.categoryFeeds",
        size: 1,
        alias: "feed",
      },
      permalink: ({ feed }) => `/${feed}s.xml`,
      eleventyExcludeFromCollections: true,
      layout: "rss.njk",
      eleventyComputed: {
        title: ({ feed }) => `localghost.dev - posts about ${feed}s`,
        subtitle: ({ feed }) => `A feed of the latest ${feed} recommendations from localghost.dev`,
        feedUrl: ({ feed }) => `https://localghost.dev/${feed}s.xml`,
      },
    };
  }
  render() {
    return null;
  }
}

module.exports = RSSCategories;

One RSS template for all

My RSS feed template lives in _includes/rss.njk alongside all my other layouts. It's pretty much the standard RSS template they suggest in the docs, but with a couple of tweaks to make it a bit more generic, allowing title, subtitle and feedUrl to be optionally passed in as variables.

<?xml version="1.0" encoding="utf-8"?>
{% if not title %}
{% set title = metadata.title %}
{% endif %}
{% if not subtitle %}
{% set subtitle = metadata.description %}
{% endif %}
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>{{ title }}</title>
  <subtitle>{{ subtitle }}</subtitle>
  <link href="{{ feedUrl }}" rel="self"/>
  <link href="{{ metadata.url }}"/>
  <updated>{{ collections[feed] | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
  <id>{{ metadata.url }}</id>
  <author>
    <name>{{metadata.author.name}}</name>
    <email>{{metadata.author.email}}</email>
  </author>
  {%- for post in collections[feed] %}
    {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
    <entry>
      <title>{{ post.data.title }}</title>
      <link href="{{ absolutePostUrl }}"/>
      <updated>{{ post.date | dateToRfc3339 }}</updated>
      <id>{{ absolutePostUrl }}</id>
      <content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
    </entry>
  {%- endfor %}
</feed>

Oddly, the variables seem to leave a blank space in the outputted XML, but as long as the <?xml> declaration is at the top it doesn't seem to matter.

The RSS template iterates over a given collection and includes all the posts it finds, so I have to tell it which collection to pull from. This is where the feed variable comes in. It tells the template to iterate over posts tagged with e.g. "recipe" or "game".

A separate articles feed

Unlike my specific category fields, "everything else" isn't a tag, so I can't use the same pagination to generate the "articles" feed. That has to have its own file. Since it hasn't got any fancy variable templating, I can just create a nunjucks file and fill out the frontmatter:

---
  permalink: 'articles.xml'
  eleventyExcludeFromCollections: true
  layout: "rss.njk"
  feed: articles
  title: "localghost.dev - all articles"
  subtitle: "Sophie builds fun things out of HTML, CSS & JavaScript, and writes blog posts about tech and mental health. This feed excludes recommendations about books, games, podcasts, recipes, etc."
  feedUrl: "https://localghost.dev/articles.xml"
---
<!--  rss-articles.njk -->

Because I created the articles category in my Eleventy config, I can pass that in as the feed variable, and then collections[feed] in the RSS layout will translate to collections.articles. The only posts in this feed will be anything that lives in my /blog/posts/ folder.

The primary feed

And finally, the tweak to my "everything" feed to get it to work with this new layout: make sure it also has a feed variable. The blog collection already exists, and contains everything in the blog directory, so we can pass that in and it'll add everything in there to the RSS feed (which is actually what it was doing before, anyway).
The metadata for my primary RSS feed is shared with the meta tags for the <head> of my site, so it lives elsewhere in _data.

---
permalink : "feed.xml"
eleventyExcludeFromCollections : true
feed: "blog"
layout: "rss.njk"
feedUrl: "https://localghost.dev/feed.xml"
---
<!-- rss-all.njk -->

And there you go! Multiple RSS feeds. I changed the RSS link in my footer to point towards a page where I added links to all the feeds.

A good recipe: Smitten Kitchen's apple pie cookies

2023-11-12T00:00:00Z

If I need to impress, or bribe people to like me, I make these cookies. A shortcrust pastry/biscuit dough hybrid case with appley-cinnamony goodness inside, packaged in an adorable pie shape.

The process is a little involved, but they're flaky and delicious (and often gone in an instant). I first made them over a decade ago and it's still one of my go-to recipes.

Introducing separate category RSS feeds

2023-11-12T00:00:00Z

Recently I've been inspired by folks like Michelle Barker and Amy Hupe doing National Blog Posting Month (NaBloPoMo!), and seeing folks writing down little thoughts and things they've encountered. I'm absolutely not doing NaBloPoMo, I am far too tired, but I thought I'd make it easier for myself to write things down a bit more often than once every three to six months.

I've introduced some new categories to my blog, where I can share things like books, games and podcasts I've enjoyed recently, and recipes I love. I figured that having these little bites to post occasionally might spur me to write a bit more often. However, I know people won't necessarily want to read all of those things if they subscribe to my RSS feed. I also have very specific categories in my own RSS reader, so I wanted to make sure people can only subscribe to the things that interest them. So I built separate RSS feeds!

My site's main feed still contains everything, but if you don't want the occasional brownie recipe with your accessibility rants, you can subscribe to my "articles" feed which only has my writings and rantings. If you want to get a podcast recommendation now and then, the "podcasts" feed is for you. The new feeds are a bit quiet at the moment, but will pick up as I post more!

I'm writing up how I built it, but for now you can pick your favourite feeds on the RSS page.

"AI", and the trouble with inaccessible SaaS

2023-09-17T00:00:00Z

I wasn't particularly enthused by the alpha release of Vercel's v0 UI generation tool this week. Provided with a prompt, it produces React code with Tailwind to style it. It's being marketed as a prototyping tool, but was described by Vercel's CEO on Twitter as "production-grade". Well, which one is it?

To be clear, my issue isn't with the concept of large language models (LLMs) in general: I use Copilot in my everyday work, and it's saved me a lot of time when writing tests! My concern is with the source material used to train it, and what people do with the output.

Hidde de Vries wrote a great post on the incredibly problematic dev community response after the accessibility of the UI was called out, so I won't go into that here.

Stop putting inaccessible prototypes into production

Prototyping is one thing. Noodling around with UI ideas? Fantastic. Please don't put it into production.

A pattern I've noticed with a huge number of tech/SaaS startups is:

have idea
build very quick, inaccessible UI "prototype" to test idea
ship prototype to production
prototype becomes the actual product

Inevitably, people will copy existing patterns in the codebase, adding more stuff on top, and time passes. At this point, you have a completely inaccessible SaaS product, and the amount of work needed to go back and fix all the problems is so much, and so costly, that it's never going to be a "business priority". So many of the B2B SaaS tools I've used are terribly inaccessible; companies seem to forget that staff may have access needs, as well as customers, and that those access needs may extend beyond being blind or partially sighted.

In fact, a 2020 study by RNIB (docx) found that "50% of employers thought that there may be additional health and safety risks in the workplace [employing someone blind or partially sighted]; 33% of employers thought that they may not be able to operate a computer/laptop; 33% of employers thought that they may not be able to operate the necessary equipment, excluding computers/laptops". Isn't that just terribly fucking depressing?

I truly wish the founders of SaaS companies worldwide would learn some proper semantic HTML before they build these UIs that are going to form the basis of their entire product for years to come. I'd love to see SaaS accessibility viewed as a competitive advantage rather than an expensive afterthought.

As Ashlee Boyer puts it:

The right time to work on accessibility is before you launch a product into alpha.

Before v0 was announced I was planning on writing a blog post about the inaccessibility of SaaS software, and how it starts at prototypes making it to production, so I guess this is that post. The problem has existed for years, long before generative LLMs came along. LLMs are just making it worse, and faster.

People write inaccessible code, and LLMs copy people

Tools like v0 are destined to become the new "copying and pasting from open-source UI libraries". In the wider community, ChatGPT has already overtaken StackOverflow as the first port of call for coding questions. Developers shouldn't unreservedly trust the output from code-generating LLMs, though. I double-triple-check everything that Copilot produces for me, and generally end up tweaking it about half of the time – and I rarely let it write blocks of code unless I'm writing loads of repetitive tests. It's great for autocompleting variables, repeating things I've already written and finishing lines, but I have found it has a tendency to make up functions that don't exist.

Likewise, ChatGPT and v0 may produce decent enough code, or they might give you <div>s that should be links. At least v0 seems to be adding labels to form inputs, which is more than I can say for a lot of developers on the web. But that's kind of the issue: people don't write accessible code, so why should we be trusting algorithms trained on other people's inaccessible code to write UI code for us? Vercel say it was trained on code written by their team, but considering the UI for v0 wasn't accessible itself, I don't have a huge amount of confidence that the input source material for the LLM was.

This isn't purely a Vercel problem, of course, it's an everyone problem. But we as developers can make it better by learning how to write semantic HTML and proper CSS, and then training the models on that.

I do believe that LLM-backed tools can speed up the development process and make us more productive, but not through developers indiscriminately pasting whatever they generate into our codebases and trusting that it's all fine. Our users deserve a little more diligence than that.

A good podcast: If Books Could Kill

2023-07-16T00:00:00Z

Michael Hobbes and Peter Shamshiri take us through some of the biggest "self-help"/pseudoscience books from the last few decades and deservedly tear them apart.

Some of the worst relationship books are here – Men Are From Mars, Women Are From Venus, The 5 Love Languages, The Rules and The Game (yes, that dreadful pickup artist one) – alongside pop-economics and pop-psychology rubbish such as Freakonomics and Atomic Habits. One of the funniest podcasts I've listened to in a while, and honestly gobsmacking that these books were so well-received in the first place. I feel like this should be called "Citation Needed: The Podcast".

Beyond Tellerrand: beyond amazing

2023-05-01T00:00:00Z

I had the absolute privilege of opening Beyond Tellerrand Düsseldorf recently. Truth be told, I had no idea what to expect, other than a great conference (from what everyone had told me), but it was incredible! (Apologies to anyone who tried to chat to me on the Monday after my talk – if I seemed a bit distant, it was because I was literally struggling to string words together because of adrenaline and tiredness.) It took me a week to recover from the travel, socialising and speaking, and I went straight back to work so I'm only getting around to writing this now!

From the first conversation with Marc I knew this was something special: he and the Beyond Tellerrand team put so much love into this event, and it really shows. The venue is awesome, the production quality is amazing, and the speakers are treated really well. I arrived at the hotel exhausted after a day of travel to find a handwritten letter from Marc, a beautiful book, and a very useful backpack which will be accompanying me to all my future conferences! The team and the speakers had a wonderful meal the night before the conference, and the first talk wasn't until 11am which meant I didn't have to panic-inhale my breakfast and leg it to the venue for an early start. I never sleep well before giving talks, so the extra time was very welcome.

Photo credit: Florian Ziegler

Speaking of the incredible production quality: Marc got dina Amin to do these unbelievably cool stop-motion videos of our names (by the way, she's the loveliest person and I'm so excited to see her speak at All Day Hey next week). Even more impressive: there were posters for each of our talks, and they were AR-enabled! I managed to get my poster home on the plane, and I've framed it by my desk.

A video showing the stop motion animation of my name with household objects.

Between the talks we had DJ sets from the electric Tobi, incorporating snippets of our talks. It was quite surreal hearing my own voice played back at me as I sat down after I'd spoken!

So, that's my speaker review (100/10 would speak again), but I attended the conference too, so here's my attendee review: incredible vibes all the way through. I think it's actually the first multi-day conference where I've watched every single talk - it was that good. Speaking is incredibly exhausting and usually I have to tap out at some point to either go for a walk or chill out somewhere quiet, but the talks were such high quality that I just couldn't miss them. It's quite the honour to have spoken on that roster!

There were art talks: meditation and the art of Japanese calligraphy with Aoi Yamaguchi, psychedelic slogans and incredible murals from Gemma O'Brien, algorithmic art and machine learning with Mario Klingemann, stories of toasters and living as a goat from Thomas Thwaites, and light painting with the charming Hugh Elliott. The last talk by Eike König was more of a career retrospective which perhaps went over my head a little, but it was still something different.

Opening the second day was Dr Emily Anhalt, a clinical psychologist, sharing her tips for being an "emotionally fit" leader - at times what she was talking about resonated so much with me that I got a bit emotional. I'm definitely taking some of her tips away with me to use with my teams.

Emily Anhalt's list of questions that all teams should answer to work together better.

Then we had some excellent typography-related talks from Scott Kellum and Tobias Kunisch, showcasing the importance of dynamic typography on different size screens, and the power of variable fonts. I actually use variable fonts a bit on this site, but I've never really explored their full potential!

Same.

Joining me in the web dev contingent were my pals Cassie Evans and Michelle Barker, with some brilliant talks on UI animation and modern CSS layout respectively. I get so excited when I see talks like theirs because they remind me what the web is capable of (and that it's really fun!). Michelle is speaking about Modern CSS Layout at All Day Hey this week, I'll be there!

Cassie shares a lovely quote from Miriam Suzanne

All in all, I came away feeling so inspired (and so very, very tired). I can't wait to go back next year.

Painting the whole beetle: an adventure in learning to learn

2023-02-18T00:00:00Z

I'm not very good at being bad at things. In fact, I have a track record of giving up on things if I'm not immediately good at it. (So I guess I'm good at giving up on things?)

Case in point: the piano. There's an electric piano gathering dust on a shelf in my house which was until recently gathering dust on a stand in the living room. A few years ago I started having lessons with a view to being able to accompany myself/my choir, but it was such a challenge to work through being bad at it. I'm a very musical person but my tiny hands made it very difficult to reach some of the intervals, and, well, I just didn't put in the practise because it was so frustrating not being automatically good at it. Of course if I'd persevered, I would have been really good by now, but that's not always how it works in reality.

A lot of this comes from my teenage years: I went to a very competitive school where getting a B was tantamount to a failure and I grew up thinking I was average at everything. It wasn't until I left that school and went to a local college for an extra year that I realised that I was actually good at stuff, and my attitude towards education changed considerably (and I worked hard and did well at both college and university).

("Fun" fact: I only went to that college in the first place to study English Language A-Level, because my school didn't offer it – I was told "the kind of universities our girls like to apply to don't see it as a proper subject". ROTATING YIKES EMOJI.)

As a result, I've tended to stick to things I know I'm good at. Singing. Web dev. Cooking and baking. But when something goes wrong – when the cake I'm making for my gran's birthday doesn't rise properly and it's all dense and underbaked true story – I'll have a meltdown and feel like a complete failure.

So instead of doing something I might be bad at and feeling frustrated, I'm much more likely to camp out on the sofa and play video games, which I can control the difficulty of if it gets too hard.

It's been an uphill struggle to try and unlearn this mindset; to allow myself to be shit at something for a while until I'm good at it. I'm always reminded of the quote from Jake the Dog in Adventure Time:

“Dude, suckin’ at something is the first step to being sorta good at something.”

He's not wrong, but also I struggle to internalise that because of the years of schooling that told me if I'm even decent at something, there's 20 other people in my class who are a LOT better than I am, and who win the awards at the end of the year.

In a fit of uncharacteristic optimism I booked myself onto a one-day "How to paint" class. It always struck me as something I'd enjoy doing: the physical act of painting is really relaxing. I turned up to this class with a determination to lower my expectations of myself, and had the best time. We spent the morning on watercolours, which I had basically no experience with, and then in the afternoon moved on to acrylics. The extent of my experience with acrylics had been a cheap paint set I was sent as part of a team social where I painted a creepy looking Monzo card mascot in the same pose as the HA HA! BUSINESS meme, but I do remember it being very satisfying.

I had a good time with the watercolours but when we moved onto the acrylics I was struggling a bit. At the teacher's suggestion I'd picked quite a difficult reference image: a purpley-green iridescent beetle.

I got about 30 minutes in, and was really struggling to get the colours right, and the highlights were looking really muddy. The leg was pointing out at the wrong angle, and the places where I hadn't applied enough paint looked really rough. I said to the teacher that I thought I might have to give up on this and start a new one but she urged me to keep going with it, and see where it took me.

Two hours later, I had finished my beetle, and it was better than anything I'd ever painted before.

For me, painting the whole beetle was the first time in a long time I hadn't given up when things started to get difficult and out of my comfort zone. I persevered. And amazingly, I discovered I was Quite Good. Especially at blending colours together. The finer detail was difficult and I didn't use enough paint, but the technique was there.

And it occurred to me: I've been painting my own face for 20 years, of course I'm quite good at it.

I don't do it nearly as much these days, but in my late teens to my late twenties I'd do the most incredible colourful eyeshadow looks. I even had a makeup blog briefly, though I didn't persevere with that either! But this is it, this is me putting the time in to learn some base skills that have led to me being able to paint a bit.

Me, circa 2012, doing my best Makeup Blogger face. Serious eyeshadow skills though.

I wasn't always good at it. I can think of numerous occasions where I left the house as a teenager looking like someone had put shoe polish on my binoculars. I've made some questionable makeup choices over the years and the execution has not always been on point, shall we say. But all of this is practise and the blending skills I gained from years of doing my makeup in my bedroom when I was bored have clearly stuck with me.

At the time it didn't feel like an active process of learning, much like when I was first building websites around the age of 10/11. It was a fun thing to do and I didn't really care about the outcome. I remember struggling to understand why my pictures weren't showing up on the page I'd made when I put it on GeoCities, even though I'd added a nice <IMG SRC="C:/Sophie/image.jpeg"> tag.

And then 14 years later when I started learning Java I marvelled about how naturally coding came to me. When I'd been building websites for 14 years. I'd put in the time! I just couldn't see it!

Realistically I know there are very few things one can be naturally good at. Singing is one of those things, but also people who "can't sing" can learn, and even if you've got a naturally good voice it's important to learn how to use it properly so as not to strain it, learn breathing techniques, learn how to sing from your diaphragm etc. People talk a lot about how talented some folks are, but is it really talent or is it skill, honed through years and years of hard work?

It's also very possible to have an aptitude for something, but you've still got to put in the time to learn it. I have an aptitude for languages and always did well in German and Spanish at school/uni, but I'm not anywhere near fluent in any languages apart from English, because I haven't put in the time.

I'm certainly not naturally good at makeup, or baking, or web development. All of these took a lot of time and practise to learn. And I still screw up a lot because you never really stop learning. My eyeliner may look great but you should see the pile of cotton buds I needed to tidy it up.

I spent a bit of time this morning trying out the watercolour paints I'd bought and it took a lot of convincing myself to keep going and not quit as soon as a line wasn't neat enough or the paint was blooming (a bit like a tide mark). But I kept going, and I painted an apple, and it's good for a beginner, and I'm happy that I did it.

This post is not a metaphor; I'm not using this painting experience to dish out some life-changing career advice. For me it's literally about painting. But I know some of you out there will have similar experiences to me, so I guess I wanted to dish out a bit of solidarity and tell you that sometimes with enough determination you can paint the whole beetle too.

Everything should have an API: adventures in trying to automate stuff

2023-01-24T00:00:00Z

Inspired by Robb Knight I want to build my own /now page. As a teen I used to use PHPCurrently on my personal website to list what I was listening to, thinking, feeling, even what my MSN display picture was. Here's an objectively terrible screenshot from peak Evanescence phase, circa 2004.

I have grown up a bit since then, thankfully.

And just as Robb did, I want to automate as much of it as I possibly could. No matter how many apps I try for tracking books, games, TV etc., I always forget to actually update them. Everything I do requires a sign-in these days, and it's all internet based, so why shouldn't I be able to automatically generate a page based on the data these companies have on me?
In short: they don't let you access it. Netflix, Nintendo, Kobo, PSN to an extent: there's no simple way of getting your history out of these apps. And most of the third-party apps that let you track your history, like GameTrack, have no way out.

At the time of writing this I haven't cracked it, but I'll share my findings so far because I'm sure I won't be the only one who wants to do this.

If anyone has any suggestions, let me know via Mastodon or email!

Games

Steam has an API because it was historically for nerds (source: am nerd), but I also play a lot of PlayStation and Nintendo Switch.

I tried using rawg.io which connects to your PSN account, but it doesn't have a personalised API (just an IMDB-style one for game info) and scraping didn't work because the whole site is a single-page app so the content isn't there without JavaScript. It also only logs what games you have, not what you've played recently - you have to do that bit manually.

Nintendo has no API at all, and no public profile pages, so there's no way of logging what you've been playing that I can find.

Robb scrapes his latest trophies from psnprofiles.com as a workaround, but I'd really like date-based data.

Music

This bit is actually pretty easy, even being an Apple Music user. I dusted off my old Last.fm account and downloaded Marvis Pro. This is like a layer on top of Apple Music with a better interface and automatic Last.fm scrobbling. (There is an official Last.fm app for iOS which picks up Apple Music plays, but it's got limitations and you have to scrobble semi-manually.)

I can then render that data pretty nicely using Robb's script.

Books

I stopped using Goodreads in 2020 when I de-Amazonified my life as much as I could, so I haven't been tracking what I'm reading. I have a Kobo eReader, sometimes I buy books from their shop, and I borrow a lot of books via Libby/OverDrive. OverDrive does apparently have an API, but I'm not sure how easy it'll be for an individual to get access. So manually tracking it is.

Manually tracking books

Two apps were recommended to me recently: Oku and Library Thing. (Side note: I love the two completely different aesthetics of these sites: Oku looks like someone copied the CSS from Notion, and Library Thing transports me straight back to 2003.)

Oku has an RSS feed for every user collection, which means I can easily grab the feed for "currently reading"! The feed also contains metadata like cover image, so I'll be able to render the books nicely (though quite a few books appear to be missing covers in their database). Its search is pretty bad, but if you feed it an ISBN it gets the book straight away.

LibraryThing has better book data and it does have APIs, but they're disabled right now and it's unclear if they're going to turn them back on again, so that's a dead end (at least for now). So Oku it is. Let's see if I remember to track what I'm reading this time.

Podcasts

My podcast app of choice is Pocket Casts, and there appears to be no official way of getting listening data out of that. But there does seem to be an API somewhere, as some folks have reverse engineered it. Authentication looks a bit dodgy (not about to store username and password anywhere) so I'll have to figure out how long that authorization token lasts.

If anyone knows a better podcast app for gathering this kind of data, let me know!

Recipes

I'd love to log what I've been cooking this week! On the weeks when I have my shit together I plan what we're going to cook using Paprika (where I store all my recipes - about 3000 of them!) - this is ripe for automation. Sadly, the app is pretty much "done" in as much as they don't add new stuff to it any more, and there's no API or anything. I've considered switching to Pestle, but there's no MacOS app yet which is unfortunately a dealbreaker for me. So it might have to be a manual process for the time being.

Paprika does have a calendar export option, where it provides a calendar feed of planned meals. I wonder if there's any way of intercepting that.

TV & films

Again, plenty of apps here for manually tracking what I'm watching, but no way of getting the data out that I could see. However, in my search today I found Trakt which does have a public API!

Part of the fun with such data is making it available for anyone to mash up and use on their own site or app. The Trakt API was made just for this purpose. It is very easy to use, you basically call a URL and get some JSON back.

That's what I'm talking about! Why bother tracking what you're playing/reading/watching if you can't then do fun stuff with that data? Recommendations are useful enough, but this is the good stuff.

The interface is confusing at best, and it's surprisingly fiddly to mark things as watched. It thinks I watched all 9 seasons of Breaking Bad today, as I marked them as watched in one tap.

Again, the biggest downside is I have to track manually, but at least that way I don't accidentally reveal to everyone that I'm three seasons in to Emily in Paris. But ultimately I'm not sure if I'll be able to stick it out (the app, not Emily in Paris).

Conclusion

At this point I can only conclude that I've spent longer investigating how I can automate this than I would have done manually updating the /now page once a week. But it's also a matter of remembering/having the energy to update it. I can guarantee you I'd update it twice and then leave it for several years.

It frustrates me how easy this would be if all these services had APIs that you could just pull your own data from. If our lives are online now, and our data is helping them personalise their services and make more money through recommendations, the least they could do is provide that data in a consumable format. It's not exactly feasible to do a monthly DSAR to get my Netflix viewing history.

I miss Twitter

2023-01-14T00:00:00Z

I'm still sad about Twitter.

I think what has emerged for me since switching to Mastodon is an altogether healthier relationship with social media. I'm not checking it constantly and I'm not obsessing over how my tweets are doing. I can post things without worrying that idiots have saved searches for key words/names and are going to come and shit all over the replies.

And it feels pathetic to be mourning the loss of a social media site. We know social media is Bad and the algorithm is Bad and it's all just late stage capitalism Bad Bad Bad. And there are plenty of people on Mastodon celebrating its demise.

But I miss it. I miss the vibes of tech Twitter, I miss the community feel that I just haven't felt on Mastodon in the same way. I'm worried that not having a Twitter presence is going to affect my speaking career and mean I don't get as many conference invitations. I'm angry that one billionaire man-child was able to take this community away from us.

There are still quite a few people sticking around Twitter as it clings on for dear life but I just can't bring myself to go back to a site that's unbanned some really high-profile transphobes, bigots, misogynists and racists. And a literal human trafficker, it turns out.

Mastodon is fine I guess

While it's been a generally positive experience so far, IMO Mastodon isn't quite the paradise that people have made it out to be: as a platform (decentralised though it may be) that was relatively tiny for a long time before suddenly blowing up recently, I've encountered some users on there who resent that and think that if you're new, you shouldn't have an opinion. In a way I get it: Twitter's demise was the start of Mastodon's Eternal September. But let's not kid ourselves: Mastodon still has mansplainers, it has racists, it has arseholes. It's just harder for them to find your posts.

I saw one post about how people should put politics-related content under content warnings (CWs), and when I disagreed (because politics is people's lived experience) the author told me that I'd only had my account a few weeks and that I should listen to the people who had been there for years. And that anything about Black people being silenced/experiencing racism on Mastodon had been "proven to not be true". They provided no evidence to back this up - I know, I'm as shocked as you are.

Notably, in the two months I've been on Mastodon my feed has remained predominantly male and white, despite trying to diversify my follows. A lot of people I followed initially have returned to Twitter as their other communities (e.g. Black Twitter, trans Twitter) have remained there.

Shouting into the void

I miss the reach I used to have on Twitter. Talking about issues I cared about, like semantic HTML and mental health, and knowing that lots of people would see it (even if generally I got more engagement on the shitposts).

Glad as I am that the personal website is having a renaissance – you know how much I love personal websites – for me that fulfils a different function from sites like Twitter. This site is my own space on the internet, but it's me shouting into the void in a way that Twitter wasn't.

Mostly I'm just sad that we lost the community that we had. And I hope we can rebuild it somehow.

2022: The year in lists

2022-12-30T00:00:00Z

I don't usually do these end-of-year reflection posts, but at a time where I feel like I'm finally starting to hit flat land again after a year of climbing hills, it seems like a nice thing to do, and a way for me to reflect on my own achievements.

I've spent a lot of time mulling over the bad things that happened this year so I want to focus on the good stuff.

For that reason, there won't be much mention of COVID. I want to make it perfectly clear that I see it as very much still a thing, I got it for the first time this autumn and it completely wiped me out. Now that the post-COVID immunity has worn off somewhat, I'll once again be wearing masks in crowded places and on public transport well into 2023.

Skip to bits you care about:

The year in...

The year in...

...career decisions

Last year was the year I left my job at Monzo and joined a startup, and this year I did the opposite. I made some tough decisions and got really burned out, but coming back to Monzo in August was amazing and has been just what I needed to help me understand more about what I want out of my career. Thankfully, I've recovered from the burnout I was suffering from earlier this year.

...conferences

This year I found myself speaking at seven conferences... and attending one!

In March, I showed CityJS London how to build a virtual "piano" with the Web Audio API.
In April, attending All Day Hey in Leeds made me fall in love with the web all over again.
In May I took my virtual piano talk to my first international conference, BeJS in Brussels!
In June I spoke at UX London about the importance of clear writing in product development, based on a blog post I'd written for incident.io.
In July I opened FullStack eXchange in London with a keynote about the history of personal websites. My laptop completely crashed at the beginning of the talk, so I had to restart my computer while everyone watched...!
In October, from the glorious Barbican Centre in London, I showed the lovely folks of State of the Browser 2022 how to build a website like it's 1999.
In November I achieved a career goal of speaking at FFConf in Brighton, delivering a love letter to the personal website. It was everything I'd hoped for, and I'm so proud of it. If you've never been, it's one of the loveliest communities around.
And finally in December – the week before Christmas! – I travelled to Málaga in Spain for the inaugural WeyWeyWeb to play that virtual piano again, this time with added Web MIDI. I very nearly didn't make it thanks to a combination of train strikes and snow, but I'm glad I did!

At times I was a bit overwhelmed with conference prep, but ultimately I had a great time, and I can't wait for the conferences that 2023 will bring. (my inbox is always open!)

...travel

International travel picked up again this year, with trips to Brussels and Spain for conferences, and Scotland, France and Iceland for holidays.

Iceland was absolutely incredible, I really can't recommend it enough. A week of driving around, taking photos and being surrounded by the most incredible landscapes I've ever seen.

Skógafoss, Iceland

Sunset at Akranes

I finally got the Eurostar (to Brussels) for the first time since it's been at St Pancras and honestly I now see why everyone's so obsessed with it. It's SO GOOD.

I also spent some time in Suffolk with friends, and we went birdwatching at RSBP Minsmere, where we saw an amazing murmuration of starlings!

Murmuration at RSPB Minsmere

...books

Last year in an attempt to de-Amazon my life a bit I swapped out my Kindle for a Kobo Libra, which has built-in Overdrive support. So I've been enjoying renting ebooks from various local libraries!

A few of the novels I particularly enjoyed this year:

The Four Winds by Kristin Hannah
The Seven Husbands of Evelyn Hugo by Taylor Jenkins Reid
Going Postal by Terry Pratchett
The Book Thief by Markus Zusak
If I Had Your Face by Frances Cha
The Dictionary of Lost Words by Pip Williams
The Song of Achilles by Madeleine Miller
How Beautiful We Were by Imbolo Mbue
Free Food For Millionaires by Min Jin Lee

In the last month or so I picked up a copy of The Staff Engineer's Path by Tanya Reilly. It's full of really useful advice and scenarios for anyone who's either looking to get to Staff, or understand more about what that role entails. Since it's a work-related book it's not the kind I tend to devour in an evening, so I'm making my way through it VERY slowly, but it's definitely a useful one.

...music

I can't listen to music with lyrics while I work, so it's lo-fi beats to relax and/or debug to all the way, but here are some particularly good albums (new and old) that I enjoyed this year. It seems to be 2003 again with some of the new releases and I'm honestly living for it.

Carly Rae Jepsen – The Loneliest Time Album of the year 1000%. If you still think she only did "Call Me Maybe", do yourself a favour and listen to her last three albums.
Wet Leg – Wet Leg Superb mid-00s style indie.
Maggie Lindemann – SUCKERPUNCH – Evanescence meets Avril Lavigne meets my teenage self. Makes me feel old, but it's a vibe nonetheless.
Editors – EBM
MUNA – MUNA
Caitlin Rose – Cazimi – her 2013 album The Stand-In is one of my all-time faves
Lacuna Coil – Comalies XX – rearranged and re-recorded versions of the original. The new version of Swamped is everything.

...video games

One thing that didn't change this year is that I played a shit-ton of video games. Here are some highlights.

Horizon: Forbidden West – Horizon: Zero Dawn is one of my all-time favourites, and this didn't disappoint! The world-building is incredible, it's absolutely stunning, and I love hunting around for datapoints to discover even more lore.
Tunic – lovely Zelda-esque game with some REALLY creative puzzles. Really loved this one.
Tiny Tina's Wonderlands – based on my favourite Borderlands 2 DLC, Tiny Tina's Assault on Dragon Keep, this was a delightful (and hilarious) D&D-themed action game. Borderlands remains the only FPS-style game I've ever enjoyed. Disappointing DLC that I didn't even bother with, but I got a lot of hours out of this game!
Cult of the Lamb was great fun for a while, but also had some serious bugs that made the game really frustrating (these have been patched now). It also finally got me to like roguelikes, which resulted in me finally playing...
Hades. I'm pretty bad at it, but everything about this game rules.
Deathloop was a lot of fun, even if I did enable a LOT of accessibility settings! Fascinating story, great setting, and very clever puzzles.
TOEM: A photo adventure which was extremely cute and I loved it
Carto – wonderful little indie game
Chicory: A Colorful Tale – a lovely allegory for depression and making the world seem more beautiful again.
Stray – another vote for beautiful world-building and lovely storytelling.
It Takes Two – hooray, finally a couch co-op game! The story was absolute dogshit and we hated everyone in it, but the gameplay was excellent and made up for it all. Really, really creative co-op.
Shamefully I've only just started Return to Monkey Island, but I'm loving it so far obviously, even if the new art style is a little jarring and I miss being able to make Guybrush say "I'm not picking that up."
I've also spent the last few weeks replaying Skyrim – 11 years later! – and it still holds up. Incredible. You could probably run it on an electric screwdriver at this point. (Still buggy as shit though, even on PS5)

I've noticed that game devs have been adding a lot more accessibility settings to games in the last few years. Accessibility isn't just about being able to play games if you're disabled, it's about everyone being able to enjoy the game. I'm... aggressively okay at video games, and so for games like Hades and Deathloop that have really challenging combat, the only way I can get through it without dying over and over and over again at the same place (and inevitably rage-quitting) is to turn the difficulty down. I don't always want to play on easy mode, though. Lots of games now have more granular accessibility settings, so you can turn down the damage you receive, or make it so that you get a little stronger every time you die. This means I don't feel like I'm walking through the game with no challenge at all, I can still enjoy the story, and play it at a level of challenge that suits me.

...learning things

Some of the things I learned this year:

how to create shadow effects with CSS perspective
how to use the Web MIDI API to hook up a MIDI controller to the browser
basic music production – recording, mixing and mastering
about the CSS function clamp()
how to make okonomiyaki and takoyaki

...blog posts

I wrote a whopping SIX posts this year! It may not sound that much, but it's a record since I've had this site. I'm hoping I can keep momentum going into next year.

Start at the beginning: the importance of learning the basics – frustrated with the number of people advocating for skipping learning HTML/CSS and just doing React/Tailwind, I wrote this article about why that's a terrible idea.
Burnout, a cautionary tale (and a plea to take a break) – I'd taken a break from work, as I was in a bad place and completely exhausted.
When going back doesn't mean going backwards – the successor to the previous post. Going back to my old job, and feelings about everything that had happened.
Everything I googled in a week as a senior software engineer – an updated version of the original I wrote in 2019, to show that I still google everything!
Building a website like it's 1999, in 2002 – the written version of the talk I gave at State of the Browser this year. It went pretty viral a few days ago as someone posted it on Hacker News, which was both cool and terrifying.
Preparing for conferences – a summary of my process for preparing to give a conference talk, from talk preparation to delivery.

...the web

I left Twitter for Mastodon, and I'm not actually sure I like it more than Twitter. But I don't want to go back to a platform that's unbanned some of the most detestable people in recent history.
I joined omg.lol, and you should too. Until 1 Jan 2023, it's $5 a year for a pastebin (paste.lol), URL shortener (url.lol), Mastodon instance (social.lol), email forwarder (@omg.lol) and soon a weblog (weblog.lol)! I now have a fancy "web card" I can link people to if they want to get in touch. It's just lovely vibes all round.
It feels like there's been a bit of a personal website resurgence, which is lovely – especially considering the topics of the talks I've given this year! I gave this site a bit of a facelift, with five new themes including some very silly ones. I also moved it to neocities and joined some webrings because WHY NOT.

There you have it

It's been nice to spend some time reflecting on the good things that happened this year despite all the bad. I'm hoping to keep the conference momentum going, so if you know any that are looking for speakers, let me know! Here's hoping 2023 brings new opportunities and more personal website joy.

Preparing for conferences

2022-12-14T00:00:00Z

I've been speaking at conferences and meetups on and off for nearly five years now, and a few people have asked me what the process is for preparing a talk. So I thought I'd share how I approach it.

For me, the talk process is a circle:

It's the circle of talks.

It repeats around and around forever. There is always a point at which I hate my talk and wish I'd never done it, but there is also always a point where I'm having the time of my life. Giving talks is great fun, but it's also hard work.

(As a sort-of aside: that hard work is why you should never speak at a conference that isn't at least paying for your travel/accommodation or taking you to dinner. Your time is worth money.)

I'll break my process down into a set of steps, but the tl;dr is: practise. Your audience deserve to watch a talk that you've rehearsed and aren't just making up on the spot. Not only will it show if you haven't practised, you're much more likely to run over time as well. The practise part isn't optional!

The timelines are super rough, but generally I'd start around 2-2.5 months before the talk. I've done talks in shorter timeframes than that, but I wouldn't recommend it – taking longer means I don't have to dedicate all of my free time to it, I can space the work out a lot more.

Initial planning: about 8-10 weeks before the conference

To begin with: identify the overarching theme(s) of the talk. What are the main points I want to convey? No more than 3 or 4.

I make short-form notes for content ideas – bullet points or post-it notes – jotting down any ideas that come to mind, and sorting them into themes afterwards.

Previously, I've used notecards blue-tacked to the wall with ideas on, so I can shuffle them around and group them.

At this point, I'll also do research. Depending on the topic, I might read blog posts, articles, I even read someone's PhD thesis once. I might pull out some good quotes, or just write down some general ideas from those.

Content: about 6-8 weeks before

Taking my notes, and writing more detail for each point in a Notion doc. What do I have to say about each of these ideas? Sometimes I spot how they flow into each other, or I might find that one of them doesn't fit with the others any more after I've written some blurb.

I treat it a bit like a blog post at this point, writing as if I'm talking to someone. It helps me to solidify my ideas as a talk rather than just random sentences.

Slides: about 4-6 weeks before

Depending on my needs, I'll either use Keynote or Google Slides. I prefer Keynote, but if I need to be able to switch to a browser quickly, Google Slides is better. I used Reveal once which was useful for code and embeds, but it took me ages to build the slides so I probably won't use it very often.

The first version of the slides always has the notes containing the full sentences from the content planning stage, because I'll use these for the first few run-throughs.

If my talk needs any code snippets, I'll screenshot them from VSCode so they look pretty (or, if I'm using Reveal, I'll put them straight in the slides).

This part is also about editing, editing, editing. Especially for shorter talks, it's as much about what you leave out as it is what you put in.

Not gonna lie: at this point I start to hate my talk. I'll come around to it again, but right now I'll be fed up with it and full of regret. It's really hard work, and I find making slides pretty tedious. Prepare to have some moments like this – it will get better, though!

Run-throughs: from 3-4 weeks before

Early on, I'll run my slides through with my husband who's usually pretty good at spotting things that don't fit, or things I can leave out. I always recommend doing a run-through with a partner, friend or colleague!

I sometimes run talks at work as well – we have a weekly slot for engineering talks that anyone can give. If you don't have that, perhaps you could introduce it at your company?

I'll do three or four run-throughs a week, after work, where I shut myself in our little office and just deliver the talk to nobody. When we have a dog staying, it's a bit easier as I can give the talk to him. (He's never particularly interested in what I have to say, though.)

The week of the conference

I don't tend to practise my talk in the days leading up to the conference. Often it's because I'm travelling or busy in the evening with a speakers' dinner. But I also think it'd just stress me out. By the time the conference arrives, I've practised it enough that I feel happy with it.

Delivering the talk

I'm not going to go into a huge amount of detail here – the post I wrote when I was preparing for my first conference in 2018 covers a lot of that ground – but the main thing I've learned is that I get super nervous as I'm waiting to go on stage, and then when I get on stage it just goes away and I have a great time.

If you've practised enough, you shouldn't need to stare at your speaker notes – just glance at them for a prompt. Sometimes you'll find you won't need to look at them at all.

Afterwards, you'll probably feel amazing and want to do more talks, and thus the cycle starts again. (Conference organisers: I'm at my most suggestible in the week after I've just given a talk.)

Building a website like it's 1999... in 2022

2022-10-23T00:00:00Z

Edit May 2023: the Bridgy integration with Twitter no longer works due to Twitter shutting off API access so some functionality won't be working any more!

Note: This is a written version of a talk I gave at State of the Browser 2022 in October 2022!

Motion warning: This page contains quite a few animations, but if you have reduced motion turned on, they won't play.

The web used to be weirder

I'm on a bit of a mission this year to bring back the spirit of the old web. The creativity and flair of the late 90s and early 2000s. Back then, there were no rules – you put whatever you wanted on a webpage, because it was your space to do as you please.

And for a whole generation of internet users, having a website was the cool thing to do. It's just what you did back then. We're talking pre-social media, pre-web 2.0 – the good old fashioned static personal home page.

Sites like Geocities, Angelfire, Tripod and Expage offered free static hosting for all, and the number of personal websites boomed. Some hosts offered drag-and-drop website builders so you didn't even have to learn HTML.

We might look back on these websites now and laugh – they look ridiculous compared to the sleek and minimalist sites we're used to nowadays. But I actually think we've gone too far in the other direction, and now so many websites look the same. These old personal websites were a reflection of yourself.

Some of these websites were for family to share photos and updates...

The Proud Grandparents Page

...while others were full of graphics to share and use on your own site...

Lisa's Graphics

...and some were fansites. Look at those frames! I got this screenshot mid-<marquee>-scroll as well.

Mognet Central

I played a game a couple of years ago called Hypnospace Outlaw, which is a completely bonkers game where you're a moderator of a version of the 90s web that you access in your sleep. The homepages in this game were directly inspired by Geocities websites (there's a really good episode of Noclip about it) and it made me so nostalgic. I really recommend it if you haven't played it already! It really captures the spirit of the time – the personality and weirdness that made these sites so special.

Hypnospace Outlaw

Let's bring back the weird

I'd love to see this spirit return today – the experimental and fun side of the web. My goal is to show you how we can be just as creative today but using modern and accessible methods. Because, as fun as they were, old websites were a nightmare for accessibility. We didn't really use semantic HTML, we used tables for layouts (instead of, y'know, tabular data), everything was constantly flashing and moving. Luckily for us, the modern web allows us to be just as creative while still considering the user at the other end of the browser.

So naturally, I built a 90s-style website, with some of my favourite old web tropes. I used as much modern HTML, CSS and JS as I could. Let's take a look through some of the features and how we might recreate them!

Sophie's Homepage

Animated GIFs

GeoCities sites were absolutely littered with GIFs. Flames, construction workers, dividers, even animated bullet points. Animations were a lot of fun, and almost an art form to squeeze so much into such a tiny filesize.

This is a screenshot from cameronsworld.net, which is a beautiful archive of GeoCities GIFs, and an artwork in itself.

Nowadays it's easier than ever to put animations on our sites, whether that's still the humble GIF (internet is so much faster these days), more modern formats like webm and gifv, or even SVG animation with CSS or libraries like GreenSock. But we can do better still.

The standard code to include an image hasn't changed much since the olden days:

<IMG SRC="flames.gif">

In those days, of course, we wrote all our HTML in capitals because that was what you did for some reason. XHTML, maybe? Anyway, the consequence of this is that everyone sees the GIF whether they like it or not. For people with epilepsy, vestibular disorders, or anything where motion causes sickness, autoplaying GIFs are a big problem. Luckily, wcan fix this today, with something we didn't have back then!

The `prefers-reduced-motion` media query

Using this media query, we can only play the GIF if the user doesn't have reduced motion turned on on their computer – so everyone can enjoy our trash website, regardless of their access needs.

Harnessing media queries with the `picture` element

The HTML5 picture element allows us to specify an image, and then potential alternative sources for it.

	<picture>
    <source srcset="underconstruction.gif" 
    media="(prefers-reduced-motion: no-preference)">
     <img src="underconstruction.png" 
    alt="Under construction" />
  </picture>

In the above code snippet, we've got the img tag as before, but this time it's showing a still version of the GIF, which I made by opening the GIF in Preview, pulling out the first frame and saving it as a PNG. The source tag contains the URL of the GIF, and will only kick in if its media attribute is satisfied. So if you don't have reduced motion enabled, the source of the image will be replaced by the animated GIF version. Magic!

Text effects

Remember <marquee>? It made text scroll across the screen, like ticker tape.

Wheee!

Or those of you with Netscape would have had the infamous <blink> tag, which makes text blink in and out of view...

This is awful

Ultimately, text effects like this don't belong in body text. Even if you don't have any access needs to speak of, it makes reading text really hard. There's a good reason they were both deprecated.

Instead, I thought, why not have fun with headers? In days of yore we'd make cool text-based headers in whatever graphics programs we could get our hands on – or even just MS Word. Text with flames, rainbow fonts, you name it.

These days we can recreate this magic using CSS instead of using an image! And the great news is, because it's normal text with CSS doing the heavy lifting, it's still totally accessible.

For my next trick, I'm drawing inspiration from an OG 90s classic: Microsoft WordArt.

WordArt, but make it CSS

While not strictly from the 90s web, WordArt for me harks back to the aesthetic of 90s maximalism, and definitely fits aesthetically with what I'm trying to do.

I'm going to show you how to recreate two of my classic favourite WordArt styles using modern CSS.

Gradient-fill text with `background-clip`

You can't colour text with a gradient (yet) in CSS, but you can give an element a gradient fill background. Using the background-clip property we can control where the background shows. Specifically, we can set background-clip: text to make the background only show wherever there's text in the element.

Then, if we make the actual text transparent, only the gradient background will show through.

background: linear-gradient(183deg, #6000CA 10%, #CA00CD 70%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-family: 'Impact';

WordArt

Pretty!

Then let's add a transform property to make it look a bit more like the real deal.

transform: skewY(-8deg) scaleY(1.3) scaleX(0.8);

WordArt

Adding the drop shadow

Now we need to add the light purple drop shadow. But if we try to use the text-shadow property, it shows up on top of the text!

WordArt

This is because we're really looking at the background – the actual text is transparent and sitting on top. If I change the colour of the text to the body colour, you'll see what I mean:

WordArt

To get around this, we'll need a wrapper element that contains the shadow, so it appears behind the text-shaped gradient background.

<span class="purple-wordart-wrapper">
	<span class="purple-wordart">WordArt</span>
</span>

We'll add a drop-shadow filter to the wrapper element. This adds a drop-shadow the same shape as the element's children, and because the background is clipped to the text in the child span, the drop-shadow will follow that shape too!

.wordart-wrapper {
	filter: drop-shadow(2px 2px 0px rgba(130, 140, 251, 0.8));
}

The result:

WordArt

Uncanny!

For my second WordArt recreation, I'm bringing back my old childhood favourite – the rainbow one. I remember using this one all over my primary school homework.

We've got another gradient fill here, so we'll use background-clip: text again to get the same effect, and chuck on a transform to get the right shape.

background: linear-gradient(
  90deg,
  #9c00ff,
  #ff0000,
  #ff8800,
  #ffff00,
  #02be02,
  #0000ff,
  #4f00ff,
  #9c00ff
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-family: 'Arial Black', sans-serif;
font-weight: bold;
transform: scaleY(1.5) scaleX(0.6);
transform-origin: left;

WordArt

We'll use a wrapper element to create the shadow again, but this time it's a little different. This has more of a 3D effect, where the shadow kind of flattens and goes to the left, as if we're looking at the WordArt from the front.

CSS can do that!

Getting some perspective

.wrapper {
  font-family: 'Arial Black', sans-serif;
  font-weight: bold;
  display: inline-block;
  position: relative;
  perspective: 150px;
  perspective-origin: bottom center;
}

We can use the perspective property to put us into a kind of "3D mode". It tells the browser, "act as though I'm standing this far away from the element". In our case, 150px.

We then set the perspective-origin property to determine what position we're looking at the element from. I want it to seem like we're in front of it, at the bottom.

What this will do is change the way that transformations apply to the element, taking into account the perspective to manipulate it along the Z-axis as well as X and Y.

To create a shadow effect I'll target the wrapper::before pseudoelement, and set its content to "WordArt" to mirror the text. This will make the "shadow" text appear behind the rainbow gradient. Then I'll apply some transformations to skew the "shadow" – that perspective property on the wrapper element will change the way it rotates and skews.

(This one needs a bit more hacky wrangling when you change the font size, and I use fluid typescales so I'm going to embed a Codepen a bit further down instead of rendering it inline!)

.wrapper::before {
  position: absolute;
  content: 'WordArt';
  color: #000;
  opacity: 0.2;
  bottom: -2rem;
  left:35%;
  transform: rotateX(60deg) skewX(65deg) 
  scaleY(2.8) scaleX(0.9);
  transform-origin: bottom right;
}

Right now, the CSS is hardcoded to have a shadow that says "WordArt". If we want to use this text style for other things too, how can we dynamically set the shadow text content? With the CSS attr() function!

attr() gets the content of a given attribute for an element. I've called mine data-content. So, in our wrapper::before rule, content: 'WordArt' becomes content: attr(data-content):

.wrapper::before {
  position: absolute;
  content: attr(data-content);
  color: #000;
  opacity: 0.2;
  bottom: -1rem;
  transform: rotateX(60deg) skewX(60deg) 
  scaleY(2.8) scaleX(0.8);
  transform-origin: bottom right;
}

And render the HTML with the attribute:

<span class="rainbow-wrapper" data-content="Rainbow">
  <span class="rainbow">Rainbow</span>
</span>

Now we can write different words!

See the Pen Rainbow text by @sophiekoonin on CodePen.

It's not perfect, but I think that looks good enough for a throwback site header!

Music

In 2001, I had a NeoPets shop. As soon as you loaded the page, you'd be greeted with the dulcet tones of Teenage Dirtbag, in MIDI form.

<EMBED SRC="mysong.mid" HIDDEN="true"
    loop="yes" volume="10" autostart="true">

Autoplay, naturally, and looping. Definitely hidden, so the music was just there. But it was super distracting, quite disorientating, and you couldn't turn it off.

Modern browsers block autoplaying audio, for good reason. It's extremely annoying. Thankfully, the HTML5 audio element gives us a bit more control.

  <audio aria-label="Play music" controls 
  src="/soundtrack.webm"></audio>

You can still have audio on your website! Just make it opt-in. If it's part of the experience you want to create, that's totally fine, as long as your viewer is okay with it playing.

Make sure to add a label – whether external or aria-label – to tell the user what it does.

The controls that show up are the browser default – what's rendered above will look different depending on whether you're in Chrome, Firefox, etc. But you can use the Web Audio API to customise the controls, by rendering some pretty buttons and using JavaScript to make them control playing audio.

Cursor trails

Then: Dynamic HTML

Back in the day, a cursor trail was a real flex. It said, "look at what I can do with JavaScript!". (Or in my case, what dynamicdrive.com could do with JavaScript.)

This was known as Dynamic HTML: not necessarily a technology in its own right, but a collection of technologies (a bit like we use the term JAMstack now). HTML, CSS and JavaScript – but a very old version of JavaScript. Everything was client-side at this time, because we didn't have AJAX/client HTTP requests yet. And the implementations differed significantly between the two major browsers of the time, Internet Explorer and Netscape. (This is a period known as the 'Browser Wars', and there's a good summary of it on The History Of The Web.)

It led to stuff like this, from a Dancing Stars animated cursor trail. This cursor adds a trail of seven 3px-wide yellow "stars" (tiny squares) that appear to follow your cursor around. I can't show you a preview, because the script doesn't work any more.

First we had to check whether the script was running in IE, or Netscape, because the implementation would be completely different. In IE, we'd check for the existence of document.all, a function which returned all the elements in the DOM.

If this was present, we'd then call document.write (a function we also shouldn't use any more) to insert several little 3px <div> squares into the DOM.

if (document.all) {
  document.write('<div id="starsDiv" 
  style="position:absolute;top:0px;left:0px">')
  for (xy = 0; xy < 7; xy++)
    document.write('<div style="position:relative;
    width:3px;height:3px;background:#FFFF00;
    font-size:2px;visibility:visible"></div>')
    document.write('</div>')
}

Netscape didn't have divs, it had LAYERs. This is basically the same thing with a different name, because browser creators at the time liked causing pain.

(Side note, this is why some people used to refer to divs as "div layers" – it encompasses both elements.)

<LAYER NAME="a0" 
  LEFT=10 TOP=10 
  VISIBILITY=SHOW 
  BGCOLOR="#FFFF00" 
  CLIP="0,0,3,3">
</LAYER>
}

If document.layers returned something, we knew we were in Netscape, and could do Netscape things. In this case:

if (document.layers) {
  window.captureEvents(Event.MOUSEMOVE);
}

The full script is available at DynamicDrive.com.

Now: Canvas and `requestAnimationFrame`

Tim Holman has done the hard work for us here, and recreated 90s-style cursor effects with modern JavaScript and HTML.

Video of a cursor trail with many small coloured stars following the cursor. Download the video as .webm

Tim's cursors use canvas, which is much more performant than rendering individual elements into the DOM. You also get much more fine-grained control over how elements are positioned. Can you imagine trying to render this many stars into the DOM in the old script? Using the canvas API and requestAnimationFrame – the function that allows us to batch up animations and efficiently update them before the browser's next repaint – we can render lots of little stars, making them fade in and out in lovely ways.

Media queries work in JavaScript, too!

Of course, cursor trails mean animations, and not everyone wants to see those. The good news is, we can use media queries in JS, just like we do in CSS and HTML <source> tags.

const prefersReducedMotionQuery = 
	window.matchMedia('prefers-reduced-motion')
					
if (!prefersReducedMotionQuery.matches) {
	cursor.init()
}

By calling window.matchMedia with the name of the query we're interested in (prefers-reduced-motion), we can check the value of the user's motion settings and only init the cursor if they don't have reduced motion enabled.

You can even add an event listener to the media query, so that when its value changes we can dynamically initialise or destroy the cursor accordingly.

prefersReducedMotionQuery.addEventListener('change', () => {
	if (prefersReducedMotionQuery.matches) {
		cursor.destroy()
	} else {
		cursor.init()
	}
})

Webrings

In the days before search engines were particularly good, how did you find similar websites? Webrings, of course. A webring is a collection of websites based around a shared interest or topic. Webrings offered a sense of belonging to a community, and gave you a fancy plaque to put on your website.

Each site in the webring would have a plaque like this so you could navigate the ring, and there'd be a backend somewhere (probably written in Perl) that did all the hard work of calculating which site came where in the ring.

I built my own webring for State of the Browser 2022 attendees, with a Google Sheets backend (for time-saving/live demo reasons) and a Cloudflare Worker on top of that to work out which site to send people to. It checks the value of request.referrer to see where the call is coming from, looks up that URL in the list of sites, and returns the next or previous one accordingly.

async function handleRequest(request) {
  const { pathname } = new URL(request.url)
  const data = await fetchAndParseCsv()
  const referrer = request.referrer
[...]

For something a little more permanent/professional, I recommend checking out Max Böck's webring kit.

Guestbooks

Last but not least, the humble guestbook! In the days before social media, this was how we showed our appreciation for webmasters. Rather than just building a guestbook I thought I'd do something a little different for the talk. It's a guestbook all right, but it's powered by Twitter!

View the guestbook

Instead, I used a technology called webmentions: a protocol to notify a website when someone else links to them, such as on their own website or on Twitter. Webmentions are collected as a feed (a bit like RSS) and associated with a domain name or host. I put meta tags in the head of my site to indicate that I'm on the lookout for webmentions.

I use webmention.io to collect those webmentions for me, though it's totally possible to set up your own server to do so. On this website (localghost) I collect webmentions at build time and publish them underneath the pages, but on the demo website for this talk I have a client-side script to fetch mentions as I wanted to be able to demo them live.

I use brid.gy to collect mentions from Twitter and send them to webmention.io, and then my site queries webmention.io to get the feed of mentions.

Go forth and build weird stuff!

The web is an amazing platform brimming with opportunities to be creative and experimental. I'd love to see what you build – if you mention this page on your own site or Twitter, the webmentions will appear below, or tag me @type__error!

Everything I googled in a week as a senior software engineer

2022-10-15T00:00:00Z

Three years ago I wrote a post called Everything I googled in a week as a professional software engineer, and it clearly resonated with people, because it went pretty viral. It still gets most of the pageviews on this website.

Well, a lot has changed in three years: I got promoted and I'm now a senior engineer and lead the web engineering discipline at Monzo. But one thing hasn't changed: I still google a lot, every single day. Here's what I googled in a week, 2022 edition.

Obvious disclaimer: this is slightly edited as I've removed most of the non-work-related ones.

Some of these search terms might make you laugh and think "how did you not know that?". Well, there are several reasons you might not know something (choose all that apply):

you've never used it before
you've used it before but can't remember
it's changed since the last time you used it
you're tired
you're distracted
you're human

More than ever, we're constantly surrounded by new information. It's impossible to remember everything all of the time.

I hope this makes you feel a bit better if you ever feel bad that you have to google something "obvious".

Monday

slack channel bookmarks – trying to find some documentation on where to find channel bookmarks on mobile, as my friend couldn't find them.

carbonara – my manager made the very lofty claim in standup that his carbonara was the best, so I googled a picture to make a "carbonara king" emoji of him

directory tree cli - how to render a directory tree in a CLI

react-toastify - a useful notification library

anchor dataset - accessing data attributes in JS

mdn element dataset

waitfornextupdate - trying to remember if this testing-library function was just for hooks. (It is.)

The next few are a direct result of the fact that in JS you still can't automatically download a file in a cross-browser way without creating an anchor element. There's the downloads API, but Safari doesn't support it.

jest how to test detached elements – jest-dom can only see what's in the DOM under test, so if an element is detached from the DOM, it's not going to be able to test it. But this didn't immediately occur to me.

document.createElement('a')

document.createElement('a') detached

react-hook-form - we're trying to add this to some of our web properties, as they don't have any form management and react-hook-form is a really nice abstraction.

spread types may only be created from object types - I kept getting this error and I couldn't work out why, and it turns out we had an old version of react-hook-form installed in a different app (just monorepo things) which had different return types

react-hook-form "spread types may only be created from object types"

Tuesday

slack channel links in API

gilts – they were in the news and I didn't actually know what they were.

js accessing nested object key – I momentarily couldn't remember whether you could access nested object keys like myObj['key1.key2']. (you can't, because the entire string is interpreted as one key)

intensifies emoji maker – I went with MakeEmoji which has a pleasing number of options

modal accessibility – I was having a discussion with someone about why modals aren't accessible. It turns out there is some nuance to it, and that they aren't necessarily completely inaccessible, but they require a fair bit of work to make them accessible.

modal window accessibility

I hope you can feel the frustration in the next few search queries, in which I struggle with Storybook and then find that my problem isn't actually documented. I knew that there was a world in which you can write JSDoc comments above a component, and have them show up in Storybook docs, because we did that at my previous job. The docs don't seem to mention this at all, and it wasn't working for some reason. It turns out that it doesn't work with default export components, for some reason, but this isn't documented anywhere.

storybook docs markdown comments

storybook story description

storybook docs

storybook comments

storybook comment

storybook JSdoc

Wednesday

mark hoppus – I mentioned that I was trying to get blink-182 tickets (I failed) and we were debating how old they are now.

lofi girl – during retro we put music on while people are writing their Retrium tickets, and I thought this was the appropriate vibe.

apollo query oncompleted

useLazyQuery – trying to figure out if this returns the return value, or void. Turns out the latest version returns the return value, and the version we're on doesn't :(

sentry github

'RequestSessionStatus' is not exported from '@sentry/types' – this turned out to not be a problem with the Sentry lib, but actually a yarn.lock mismatch (just monorepo things).

Thursday

document.write – I knew this was deprecated, but I wanted to find something to back up my PR comment.

apollo server request size – Getting 412s from our apollo server and trying to figure out how to bump the max request size.

apollo-server-koa

apollo server request size site:stackoverflow.com - a useful tip for googling is that you can restrict searches to a particular site using the site: param.

mdn element dataset

open new window and set inner html – trying to find a suitable replacement for document.write for the person who requested it. We went for window.open() and myWindow.document.documentElement.innerHTML = myHtml.

mock clock golang – figuring out the best way to mock the time.Now() function in Go. There are various ways of doing it across our codebase, I wasn't sure which one was the most up-to-date way, but I figured it out eventually.

graphql server request entity too large – still trying to fix the apollo server request limit

doggo ipsum – my favourite ipsum generator.

apollo server body parser config

apollo server body parser config koa

koa - I finally realised we need to set the body parser config on the server itself, not the apollo-server wrapper.

koa request size

britney spears albums – trying to find as many Britney track titles as possible to cram into a pun-filled gratitude post for my colleague who helped us out.

ronseal – I like to google pictures of Ronseal and put them in PR descriptions when the title describes exactly what the PR does (i.e. it does what it says on the tin). I think I got this habit from b3ta back in the day.

Friday

read a symbolic link – I'm so shit at symbolic links lolol

npm service status

apollo async oncompleted

window.history – looking for the arguments for history.push.

I think the next few are particularly amusing given that I literally gave a conference talk on redux-saga in 2018, but it's been so long since I touched any code containing sagas that I completely forgot how they work:

saga execute non-saga function

saga execute non-redux function

redux-saga effects

More ipsum generators, because my colleagues enjoyed doggo ipsum:

cupcake ipsum

veggie ipsum – I love that I also googled this in the previous post as well, I promise it's a coincidence

ts-command-line-args - onto some CLI building now!

node.js interactive shell

node.js interactive shell select – I was looking for a CLI library that lets you select different options with the arrow keys. I found inquirer.js!

types/inquirer

ts-command-line-args

should you symlink from destination – I can never remember what order to do symlinks in

TS2464

next-images - checking that some of our plugins are still relevant.

nextjs document

react-hook-form radio buttons - sometimes you just need a good example. Turns out it was easier than I thought, and I just needed to forward a ref to our radio button component.

Looking back

You might say "well, you googled fewer things this week than you did that week in 2019!". For one thing, I have more meetings now than I did back then. I'm in a different team, working on different things.

It also depends from week to week what I'm working on; last week I spent a lot of time building data export in Go, and so my search history was full of frustrated queries like golang readseeker from buffer and create a file from string golang. (I still help out on backend tickets when it's needed.)

Some of the stuff I googled back then I can remember how to do without looking it up now, but some of it I definitely can't (e.g. I still can't get my brain to retain some more complex CSS grid things). For example, I'd 100% still have to google all of these from the last post:

whitespace regex

regex not letter

js date

grid minmax

There you have it – I still google loads of stuff. To finish, I'll leave you with what I said in the post from 2019:

What I'm trying to show with all this is that you can do something 100 times but still not remember how to do it off the top of your head. Never be ashamed of googling, even if it seems like the most basic thing you're looking up.

When going back doesn't mean going backwards

2022-08-27T00:00:00Z

Hey internet! Last time we spoke, I was in a bad place. Burnt out and off work. Well, in May I made the decision to quit my job at the startup after 7 months, and in June I accepted a new job at... my old job. So I'm back at Monzo, working at the bank.

You don't often hear about people going back to jobs they've left. It turns out it's really nice, because you already have friends there and people are happy to see you come back. For me, leaving Monzo was always a pull, not a push: this exciting opportunity came up at incident.io, and I thought I'd give it a go.

Accepting that a job isn't working out can be a difficult pill to swallow. I really wanted to make it work, and I think a lot of the burnout I experienced was because it wasn't the right job for me. Being part of an early-stage startup seemed to be the hot thing to do, and this particular one is run by people I really respect. I had to come to terms with the fact that early-stage startups aren't really my cup of tea: I realised that I work best in bigger organisations, where I can take more of a leadership role and do larger-scale work that improves things for the people around me.

I also realised that I didn't really want to market myself as a full-stack developer any more. The week I got back from my time off, I went to All Day Hey in Leeds and I left with this incredible sense of clarity. It reminded me of everything I love about the web. And it made me finally accept the fact that, well, I don't like backend development very much.

See, I've always had a degree of internalised self-doubt about being web developer, as if it means I'm somehow not a "proper" developer for not being a backend dev. (Never mind that if anyone said that to me, I'd give them an earful.)

I've been building websites for over 20 years, but when I learnt Java during my masters I thought I'd become a backend dev, because that was what Real Programmers do. After my career took me onto a React/Node project at John Lewis, then joining Monzo as a full-stack web engineer, I clung on to the "full-stack" title. Doing backend too meant that I could still consider myself a Serious Dev while still doing the fun web stuff as well.

That "fun web stuff" included teaching people about accessibility, improving testing, architecting and building out brand new web apps, upgrading countless libraries, implementing microfrontends in a large React monolith, architecting and building component libraries. It involved becoming recognised as a conference speaker, and being invited to conferences about web development in the UK and abroad. It involved being promoted to Web Discipline Lead at Monzo, where I could be the "public face" of web internally at Monzo, defining and introducing engineering standards across the organisation. But it's okay because I was still doing backend engineering to make me a Proper Developer...!

Oh dear.

At All Day Hey, when I watched Andy Bell's brilliant talk Be The Browser's Mentor, Not Its Micromanager, I was so excited by what I'd just seen. I hadn't felt that much enthusiasm about what I did for months – sorry, but the introduction of Generics in Go doesn't hold a candle to modern CSS utility functions and what they mean for responsive website design 💅

I realised that I hadn't been doing enough of what I love, and I LOVE THE WEB. Web development is awesome. (And I am a Proper Developer.) Sadly the company's engineering needs didn't really match up with my specialism.

The week after, I handed in my notice. I was sad, but we all agreed it was the right thing, and everyone was super supportive.

Ultimately, the 7 months at the startup were well spent: this experience helped me to understand what I really wanted for my career – and I realised it was pretty much what I was doing before. Plus, I met some excellent people, and learnt a lot from them. (I also built a pretty sweet component library, and I hope they're getting good use out of it.)

This isn't a cautionary tale: it's a reassurance that it's okay to make the wrong decision. The wrong decision is not necessarily a bad decision, and going back to my old job isn't a backwards step – I picked up where I left off and I'm heading in the same direction I was when I left. I don't have any regrets about the past year – I learnt a lot, I have a lot of love for the folks at incident.io, and they're building something amazing. It just wasn't the right thing for me, and that's okay.

Burnout, a cautionary tale (and a plea to take a break)

2022-04-16T00:00:00Z

It's Easter and I'm off work til the end of the month. It was originally just going to be for a few days as I'd used up most of my holiday already, but after I burst into tears at my manager on Wednesday during our 1:1 when he asked me how a project was going, he suggested I might need a bit longer (good manager).

I really love my job, I love what I do and I love my colleagues. Before the pandemic - and even during it - I threw myself at my work and learnt as much as I possibly could. And from my beginnings learning Java at university, I learnt JavaScript, then React, then Kotlin. Then I moved onto Monzo and picked up Go. I was Good At Things.

But for the last few months I've found that nothing goes in any more. I can't absorb new information. People have to explain things several times, and my head feels like it's full of cotton wool. It makes me feel like an idiot. I'd tell myself I was better than this and I needed to just focus and maybe I was just getting too distracted.

When I sit down to do web development, it's like autopilot and I can steam through it, but anything backend seems to be beyond my capability at the moment. Which is frustrating because there's a lot of backend development in my current role. I used to love it, what gives? I'm out of practice, sure, but it's like there's this barrier that stops me from learning anything new.

Weeeelllll, now I can put a name to that barrier: burnout. FFS.

Was it my job, I thought? Was I unhappy in my new role? Well, the thought of going back to my old job didn't make me feel any better. Nor would going anywhere else. Switching to a new job certainly came with the stress of starting from scratch, and working at a startup is a whole other vibe. But ultimately I do like it, and I knew that in any other circumstances I'd be thriving there.

So let's look at everything else.

The last two years have been among the worst of my life. I'm sure they have for many of you, too. I spent so long unable to do some of the things I love, in a lockdown that could have been a lot shorter if our government wasn't equal parts inept and corrupt. The world is permanently on fire. I had to take a hiatus from reading the news because it was all too much. Plus I've had my own depression to contend with and other family things that I won't go into, which have made everything that much more difficult.

Don't be like me, please take a break

I wrote a blog post in 2020 about giving yourself a break, but apparently I didn't take enough of my own advice.

For someone who goes on about work-life balance and mental health, I'm not actually very good at practising what I preach. (Surprise.)

I'd figured that because I never work late or out-of-hours, I'd avoid burnout. But that's just one contributing factor.

And when I take time off I usually feel like I need to fill it with Stuff. Projects, outings, day trips, holidays. Making the most of your time off. I've never been good at doing nothing.

A couple of weeks ago I was ill with a mystery virus that seemed an awful lot like covid but was negative on all the tests, and a few mornings that week I'd woken up feeling loads better and started working. By the afternoon I had to give up and down tools again because I felt so ill.

I thought I'd be making myself useful by working when I felt better, but instead I was being more disruptive than anything else. People didn't know if I was going to finish the thing I was working on, so they didn't pick it up, and stuff kind of stopped and started. If I'd just taken the rest of the week and shoved my laptop in a cupboard, I'd have actually got the rest I needed.

Heed my words, adventurer!

I am not writing this post to garner sympathy, I'm sharing because I want to be transparent about the fact that this doesn't "just happen to other people". I have been running on fumes for months, and it culminated in me crying in a coffee shop in front of my extremely kind and patient manager.

If you are feeling like things are harder these days, that's because they are. If you're not functioning at 100% and find you're pushing yourself even harder because of it, please stop. I want you to take a minute to check on yourself. Are you okay? Do you need to take some time off?

(Also, never be ashamed of crying at work. We've all been there. Normalise crying at work. It's a sign that something is wrong, but the crying itself isn't anything to be ashamed of.)

I believe in working hard, but I do not believe in working hard at the expense of your physical and mental health.

So now I'm on a break until May, and I'm going to go for walks, go birdwatching, do jigsaws, plant some vegetables in the allotment, play video games and make a big fuss of my father-in-law's dog Boris.

If you've got some holiday, please take it.

My plans.

Start at the beginning: the importance of learning the basics

2022-01-02T00:00:00Z

If you're an early-career developer, Twitter is overflowing with people tweeting great tips – and some absolute rubbish – about how to improve your skills and become better at your job. I've spoken to more than a few people who've asked me, "how should I start?". And I tell everyone the same thing: learn the basics.

However you learn best – book, video, interactive tutorial – you need to learn HTML and CSS before you can call yourself a web developer. I don't think that's a particularly controversial statement.

Once you start getting into interactive website territory, with API calls and fancy stuff, that's where you need JavaScript (JS) knowledge. More specifically, vanilla JS: plain JS with no additional frameworks or plugins. The JS that your browser understands without having to do any pre-processing. It makes working with frameworks a whole lot easier, and it'll help you to know when not to use a framework (and avoid making users download massive JS bundles when all you need is a tiny bit of code). Browsers have come a long way, and a lot of what we might have needed to use Babel to do even just a couple of years ago is now natively supported in the big 4 browsers (Chrome, Firefox, Edge and Safari).

Where I started

I started building websites when I was ten years old. I was lucky enough to grow up with computers in the house, and had a book called "Make Your Own Webpage" which taught me the basics of HTML (as it was in 1999). You can even read it on archive.org.

A few years later, I built my personal website full of webrings and stolen gifs with the help of Lissa Explains It All, the ultimate HTML bible for anyone on the internet in 2002. (It's still online today, but pretty out of date!)

Fast-forward through LiveJournal, Greymatter, Blogger, Wordpress, pretty much any pre-2010 blogging site/CMS framework you can imagine – and now I'm building websites (or web apps) as my actual job, using React. A fair bit has changed – but not as much as you'd think.

I'm telling you this because I still use the knowledge I learned when I was ten every day at work. HTML tags are still HTML tags, they're still written much the same way – HTML5 got rid of some of the ones I used to use (pour one out for marquee) and introduced some new ones, but the fundamentals are still the same. Most of the websites that I built in 1999 would still render today.

My first professional web development experience was a React app. I'd just about heard of React at that point, but I'd recently learned JavaScript and Node.JS which gave me a good foundation to build upon. I brushed up on some newer CSS concepts I hadn't used, but all the HTML and CSS of my past web adventures came right back. The good thing about this stuff is that it's all over the internet, so when you inevitably forget how to do something really simple, you can just google it.

Frameworks serve a purpose, but they don't replace the basics

People might tell you to learn React, because everyone's using React. I write React every day, and a lot of that is just JavaScript and HTML. If you don't know either of those, you're going to have a bad time – or you'll end up with highly specialised framework-specific knowledge that will bite you later on when you need to use a different framework. Lots of people are using React, sure – but a lot more people aren't. A far, far larger proportion of the web runs on Wordpress, for example. Lots of sites are built in plain old HTML, CSS and JS, like the emojinator and this very website you're reading.

Besides, in a few years we'll probably using the newest, hottest framework and React will become the butt of jokes in the way that Angular has. Or you'll land a job at your dream company and find they use Vue, or some state management library from 2011 which has no documentation. I'm not saying don't learn React – I'm saying learn the basics first, so you can apply your knowledge to all manner of other frameworks and tools.

The same goes for CSS. There was a particularly bad take floating around Twitter recently where someone suggested that junior developers should skip CSS and just learn Tailwind. I have used Tailwind, and I dislike it for various reasons, but I can see use cases for it such as quick prototyping and a set of nice defaults in the absence of specialist design. However, it doesn't and shouldn't "replace" CSS. Tailwind is literally just a library of someone else's CSS classes, except you have a separate class for nearly every rule instead of writing all your rules together in reusable classes for each component. Instead of learning hundreds of class names, why not learn the CSS rules they translate to and write one CSS class with multiple selectors? When you go to your next job or project and find they don't use Tailwind, it'll slow you down as you need to learn the selectors all over again.

Recommended resources

I'd recommend going in the order HTML, CSS, JS. That way, you can build something in HTML, add CSS to it as you learn it, and finally soup it up with your new-found JS knowledge.

If you're a backend engineer who only touches the frontend occasionally, you don't need to go too deep – but you need a decent grasp of which element does what (semantic HTML) so you can make sure you're using the right elements and not creating any accessibiliy problems.

Learning HTML

I usually recommend these tutorials which provide a really nice overview of different types of elements. Try using some of the tags in Codepen, and watch things render before your eyes.

Learn from how other people do it. Web pages are so bloated with scripts and analytics these days that it's hard to just right-click and "View Source" in the same way that I did back in the early 00s – I learnt a lot of HTML by nicking other people's code! But you can use browser dev tools to look at the structure of the page (the Document Object Model or DOM, as it's known):

Learning CSS

Codepen comes in useful again here to easily write and apply CSS styles to HTML, and have it update instantly.

Again, MDN has a great beginners' guide. CSS Tricks is my favourite place for useful CSS knowledge (I referred back to their Flexbox cheatsheet for YEARS) and really clearly written guides.

Free

CSS basics – MDN
CSS Almanac – CSS Tricks – a guide to nearly every selector and property in CSS
CSS Tricks guides for in-depth info

Paid

CSS fundamentals on egghead.io by Tyler Clark (video)

Learning JavaScript

You want to start with vanilla JS. Having a solid foundation in that will make it easier to use frameworks and libraries in the future.

How in-depth you go is up to you, and depends on how much interactive stuff you want to build on your website. If you just want a plain static site with a bit of markdown, you probably don't need JavaScript. This website has a tiny bit of JS on that controls dark mode; without that, it'd just be HTML and CSS (though I did use a static site generator to build it).

Besides the obligatory MDN article, here are some good resources as of 2022:

Free

Paid

Vanilla JS Academy (structured course)

The right tag for the job: why you should use semantic HTML

2021-06-06T00:00:00Z

I've come across a lot of websites in my career (and in daily browsing) that are straight-up inaccessible. If you've ever worked on a project that is riddled with accessibility issues, you'll know that fixing these problems is a mammoth task - it needs time, it needs people, it needs prioritisation... it costs money, basically. As I mentioned in my blog post 7 myths designers and developers believe about web accessibility, retrofitting accessibility is hard.

The key is to start out with the right tools for the job - or rather, the right tags for the job. In every website, underneath the layers of CSS, the bloated frameworks, the 45945 API calls, there's good old HTML, and that's the key to accessible websites. Specifically, semantic HTML.

Semantic HTML conveys meaning

Semantics is the study of meaning, and semantic HTML is exactly that - HTML tags that convey meaning. They tell the browser - and assistive technology such as screenreaders - about the structure of the page, and how it should behave when you interact with those elements. A button should let you click on it. An ordered list should have numbers.

Sighted people rely on visual information to tell them about the structure of a page. Based on our prior knowledge of UI conventions, we can identify where a header is, which parts of the page are buttons or form elements, and what the title of the page is, for example. But if you don't get that visual information, how can you tell what's on the page?

Assistive technology such as screenreaders will take the HTML markup of the page and present it to the user either by reading it out audibly, or sending the output to something like a braille display. They'll use the different types of HTML tags in the document to present structured information to the user, allowing them to navigate by headings, or cycle through the links in the page. So it matters what HTML tags we use, to make sure the screenreaders get the complete picture.

Example: a non-semantic news site

Take this mocked-up news site (as you can see, graphic design is my passion). I've built it using mostly <div> elements, with a couple of <h1>s as I wanted some nice big headings. My menu at the top is a series of <div>s containing links, and the footer at the bottom is the same.

See the Pen Semantic HTML blog post example: no semantics by @sophiekoonin on CodePen.

If you're a sighted user like me, it looks perfectly fine. I can see a menu, a header, some titles and a footer. The byline and image caption is nicely italicised, and there are some nice buttons and fancy SVG checkboxes on the cookie banner.

But let's take a look at this page from the perspective of assistive tech, which relies on the underlying HTML markup to establish the structure of the document. I'm using the screenreader software VoiceOver, which is built into MacOS, but if you're on Windows you can use NVDA which is free to download.

Landmarks

Screenreader software such as VoiceOver, JAWS and NVDA provides a way for users to navigate to different sections on the page based on landmarks. So, you could skip directly to the footer, or directly to the main part of the site. This relies on these landmarks being signposted through semantic tags such as <header>,<main> and <footer>. We haven't used any of these tags in the example, so screen readers wouldn't be able to identify any landmarks.

When I run VoiceOver and press Ctrl+Option+Shift+I to tell me about the page, it says:

Page contains 14 links 2 headings

When I properly mark up the header, footer and main sections of the page, with an <article> around the content of the news article itself, VoiceOver allows me to navigate between them with Ctrl+Option+right/left arrow. It tells me:

Page contains 14 links 2 headings 3 landmarks 1 article

Menus

If a screenreader user is trying to find the menu in this news page, they're going to have to go through all the links on the page to try and find one that seems like it could be a menu link. The <div> wrapping the menu is completely ignored by the screenreader, so all they hear is each individual link. There's nothing to tell them which part is the menu. People shouldn't have to tab through the page incessantly to find out how to navigate to a different part of the website.

Prior to HTML5, the best way to mark up menus with lists of links was an unordered list - <ul>. Now we have the <nav> tag, short for navigation.

<nav>
  <ul class="menu">
    <li><a href="#">News</a></li>
    <li><a href="#">Politics</a></li>
    <li><a href="#">World</a></li>
    <li><a href="#">Sport</a></li>
    <li><a href="#">Tech</a></li>
  </ul>
</nav>

Technically, you don't have to have a list inside the <nav> - you can just put links in. I personally like to keep the list inside - the nice thing about lists is that some screen readers will read out how many items there are, so the user knows how long to keep tabbing through. It's also good for backwards compatibility in case any older screen readers don't understand <nav>.

Lists can be styled easily (including removing bullet points), and <li> (list item) elements can contain links and buttons.

You can add aria-label attributes to your <nav> elements to give even more information about the purpose of the menu.

<nav aria-label="main navigation">

Here's how VoiceOver interprets all of this:

main navigation, navigation

list, 5 items

link, Sport, 4 of 5

Whether you use <nav> or not isn't a hard-and-fast rule. I noted that gov.uk (an example of amazing accessible design) doesn't actually use them at all, sticking with unordered lists. As long as you use one and/or the other, you'll be fine.

As an aside, I recommend using the Dev Tools inspector to look through the source for gov.uk to see how they use ARIA attributes, as they use them very well.

Checkboxes

These checkboxes aren't real checkboxes - they're <div> elements with CSS :before pseudoselectors containing an SVG checkbox icon. VoiceOver reads them out as plain text, leaving you with no idea you can even click them.

Chocolate chip

It's super annoying that you can't style the default checkbox in browsers, but there are ways around it that still let you use <input type="checkbox">. The same goes for radio buttons.

If we put the input back in and visually hide it (leaving the input element in the DOM), we get a much more helpful readout:

 <label for="choc-chip">
  <input id="choc-chip" class="visually-hidden" type="checkbox" />
  <div class="pretty-checkbox" aria-hidden="true"></div> Chocolate chip
</label>

(NB. you could even just have the actual SVG inline here)

Chocolate chip, unticked, checkbox

We hide the "pretty" checkbox from screen readers, because they will pick up the <input>.

The input itself has a CSS class of "visually-hidden", which looks like this:

.visually-hidden {
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px);
  white-space: nowrap;
  position: absolute;
}

We can't simply use visibility: hidden or display: none as these attributes actually apply to screenreaders as well. Anything hidden that way will also be hidden to screenreaders. This visually-hidden class makes sure that elements with this styling are invisible to sighted users, but still visible to assistive tech.

For more information on this approach, check out Sara Soueidan's guide to inclusively hiding & styling checkboxes and radio buttons.

For even more semantic goodness, we can now wrap our checkboxes in a <fieldset>, which groups together related form-fields. We can then attach the "Which of these cookies can we use?" text to the fieldset by making it a <legend>:

<fieldset>
  <legend>Which of these cookies can we use?</legend>
    <label for="choc-chip">
      <input id="choc-chip" type="checkbox" />
      <div class="pretty-checkbox" aria-hidden="true"></div> Chocolate chip
    </label>
    <label for="oatmeal-raisin">
      <input id="oatmeal-raisin" type="checkbox"/>
      <div class="pretty-checkbox"></div> Oatmeal &amp; raisin
    </label>
</fieldset>

VoiceOver:

Which of these cookies can we use?, group

Buttons

The "buttons" - actually <div> elements with added onclick attributes - are recognised as "Clickable" by Voiceover. Not all screenreader software is able to identify clickable elements in this way.

Accept all, clickable

However, if I'm navigating through the page using only the keyboard, I can't select one because the browser doesn't know it's a button.

Sure, we could go adding a tabindex attribute to these buttons to make them tabbable, but then you run the risk of messing up the natural tabbing order of the document. The best solution is to use a <button> element. That's what it's for, and you can style it pretty much any way you like using CSS. You can even make a button look like a link, and vice versa, which is something I do a lot when building a website to a design spec.

  .button {
    cursor: pointer;
    display: flex;
    border: 0;
    box-shadow: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1rem;
    margin: auto 0;
    justify-content: center;
    align-items: center;
    padding: 0.8rem 1rem;
    color: white;
    background-color: #420a55;
  }
  .button:hover {
    background: #8d6c99;
  }

Accept all, button

You are currently on a button... to click this button, press Ctrl+Option+Space.

Headings

We've got three H1 elements on the page: the site name, the article headline, and the cookie banner. A site should only ever have one <h1> element - it's the main heading that tells you what the page is about. Any other headings should be nested underneath, or possibly not even headings at all (in the case of "The Woofer Times", this doesn't need to be an actual heading).

There's a subheading within the article which is simply bold text. That should be a lower-level nested heading, in this case an <h2>.

Screenreaders allow users to navigate by headings, so it's important they're in a logical order.

If you want big text, style it with CSS rather than relying on the browser default size of heading elements.

Bold and italic text

The byline and the image caption are displayed in italics using the <em> tag. However, screen readers may actually read this out differently because they expect the <em> tag to signal emphasis - that's what em means. So the tone of voice might change as it's being read out, with additional stress. The italics in the byline and caption are a stylistic choice, so we should italicise it with CSS rather than <em>.

The <i> tag still exists alongside the <em> tag, but represents text that stands out from the rest of the body, such as scientific names, thoughts, technical terms and idiomatic terms from other languages:

The red fox, <i>Vulpes vulpes</i>, is commonly found... 
It was a case of <i lang="fr">déjà vu</i>.
<i>Sure</i>, she thought, <i>that must be it</i>.

I <em>really</em> don't like this book.
Do it <em>now</em>!
No, <em>I'm</em> Spartacus.

The same goes for any bold text - <b> indicates significance or keywords and may also result in the screenreader voice changing when read out, so use CSS if the effect is purely presentational.

Somewhat confusingly, both <strong> and <b> are used in slightly different situations despite both rendering as bold text in browsers - <strong> "indicates that its contents have strong importance, seriousness, or urgency" (MDN), where as <b> is used to draw attention without the urgency (e.g. for relevant terms in a blog post like this one).

I won't tell you again, <strong>do not disconnect the fire alarm</strong>.

This is known as <b>semantic HTML</b>.

NB. Frustratingly, Markdown doesn't seem to distinguish between these elements, so everything is <strong> or <em>. If you want to use <b> or <i> you'll have to add them in as HTML within your Markdown.

Image caption

It's clear to sighted users that the text under the image is a caption, but not to screen readers - there's nothing associating the two at all.

We can fix that by wrapping the image in a <figure> element, then adding a <figcaption> underneath the image.

 <figure class="image">
  <img alt="a lovely fluffy samoyed" src="https://codepen-assets.s3.eu-west-2.amazonaws.com/alex-russell-saw-Dj8cxyi9ink-unsplash-1.jpg" />
    <figcaption class="caption">"The most angery pupper I have ever seen" Photo: <a href="https://unsplash.com/@alexrussellsaw">Alex Russell-Saw</a>
  </figcaption>
</figure>

VoiceOver says:

"The most angery pupper I have ever seen" Photo: Alex Russell-Saw, figure

before then reading out the image information:

a lovely fluffy samoyed, image

You can still use `div`s!

As I demonstrated above, <div> elements can be extremely misused. That's not to say you shouldn't use them at all: on the contrary. But you should only use them for their intended purpose: entirely meaningless containers. I use them to group elements together which I then style with CSS. Or I'll wrap the entire page in a <div> and make it into a flex container for my <header>, <main> and <footer>. <div>s are great, as long as you don't use them in place of more meaningful elements.

You can use the Dev Tools inspector on this very website and see the way I've used <div>s presentationally: for example, all the stars in the header are divs which are totally hidden from screenreaders, because they're entirely decorative.

The same news site, with semantic tags

I've recreated the same site using semantic HTML tags, and it looks pretty much exactly the same (save some different margins here and there that are easy enough to fix).

See the Pen Semantic HTML blog post example: semantic HTML by @sophiekoonin on CodePen.

There is still a lot of room for improvement. ARIA attributes come into play here, to add extra information about the roles of each part of the page. I'm just illustrating the semantic elements in this example.

Here are the main differences:

the page is broken up into <header>, <main> and <footer>, with an <article> round the main page content
there is only one <h1> on the page, because it signifies the main heading that tells you what the page is about
the "Accept all" and "Close" buttons are actual <button> elements
the checkboxes are <input type="checkbox">, with <label>s on each one
- they're also inside a <fieldset> with a <legend> explaining what the checkboxes are for
the menu links are in an unordered list, <ul>, wrapped in a <nav>
the subheadings in the article are now <h2> (the first level of nesting under the main heading)
the byline and caption are styled italic through CSS, rather than <em> tags
I've used a <figure> for the image, with a <figcaption> for the caption to indicate it's a caption for that image

Semantics from the start = accessibility from the start

Using semantic HTML as building blocks for a website will give you a lovely accessible foundation upon which to add your fancy CSS and whizzy JavaScript. You can use semantic elements in JS frameworks, too - I write React every day at work, and always use semantic elements. Your users (and/or your customers) will thank you for it.

Find out more about semantic HTML

MDN: HTML Elements reference - with explanations of each element's purpose
Semantic HTML cheat sheet

A typical day: pandemic edition

2021-01-18T00:00:00Z

This is a series started by Colin Devroe. Some other lovely folks have written their own, including Sara Soueidan and Cassie Evans.

This post would have looked very different prior to March 2020. Before then, I'd be out at events, meetups or social meetings several nights a week, in the office every day seeing people, and commuting to and from work. Needless to say, as someone who gets energy from being around others, the change to working from home full-time and not going out has had a massive impact on my mental health and my depression has got much worse. I don't think I would have been nearly as burnt out as I was in December if all of this hadn't been going on. So this is my "current normal".

My typical day

08:00 - 09:00: wake up, about an hour later than I used to. I'll usually sit in bed for a bit drinking coffee, talking to my husband, and checking the news/Twitter/notifications (it's a habit I'm trying to break, but not doing very well).

At some point during this hour I'll scrape myself out of bed and shower, get dressed (I can't work in PJs!) and find some breakfast. If I'm honest, this is usually about 15 mins before I start work, because my bed is extremely comfortable and it's cold in the house.

09:00: catch up on Slack messages, see if there's anything that needs my attention, say hi to the team.

We usually have a quick standup at 10ish, then I get stuck into whatever I'm working on. My days are often peppered with 1:1s, planning meetings and various other things - PR reviews, answering questions on Slack, triaging bugs. At the moment I find it hard to focus for long periods of time so whatever I'm doing I'll inevitably be distracted by notifications (I need to get into the habit of turning off Slack while I work).

Depending on what I'm working on, I might be doing web work in React or backend work in Go, or I might be writing a proposal for a feature or technical change.

12:00 - 13:00: lunchtime. Quite an early lunch, a relic from when I used to be up at 7, eating breakfast at 7:30 and hungry by 12. I'll often go for a walk in the park and listen to a podcast (Darknet Diaries, Switched On Pop and Strong Songs are my favourites) or chat to my husband. On especially good days, we might go down to our garage where we have a little gym set up - I've been doing some free weights.

I miss buying lunch, which is undisputably the most annoying meal to have to make.

13:00 - 18:00: the rest of my working day - more coding and 1:1s. I block out parts of the day in my calendar so that I have uninterrupted time with no meetings.

At points I'll go downstairs to refill my drink and pester my husband.

18:00: I log off from work. I'm very strict about what time I finish work - never after 6pm.

Once every couple of weeks I have a therapy session via video call, which has been massively helpful this year.

I'm a creative person and I originally imagined I'd spend a lot of the free time I gained from not commuting doing things like making music or building cool things, but in reality I just browse the internet or play a video game.

I've been thinking a lot about spoon theory recently. Originally conceived as an analogy to living with chronic illness, I think it fits perfectly with the way my depression has been manifesting itself this year: I just haven't got enough spoons right now to do all the things I want to do. So often when I feel I should be being productive or doing something creative, all I'll have the energy to do is just sit down and play video games. Over Xmas it was Assassin's Creed: Valhalla, then a lot of Stardew Valley, and I've racked up an embarrassing number of hours on Two Point Hospital over the last few weeks.

19:00: time to make dinner, or continue to veg out while my husband makes dinner. Or we give up and order a takeaway.

We've been making an extra effort to eat at the table over the last few months, which is nice because we actually talk to each other and pay attention to what we're eating instead of just zoning out in front of the TV 🙈

Generally after dinner we'll watch TV, or continue playing video games next to each other because we're adults and make sensible choices. Sometimes I'll pick up whatever embroidery I have in progress and do it while we watch TV - I'm currently embroidering my wedding flowers.

I've started keeping a little journal of good things that happen every day. They can be as minor as "made a really nice pie" or something like "got really positive feedback on the proposal I wrote". I tend to fixate on negative things, so having written evidence that good stuff is still happening should hopefully anchor me a bit and remind me of the positive side. I recommend it! Plus it's an excuse to buy a notebook and some nice pens.

23:00: time for bed. Over the last six years I've been going to bed at 11pm so religiously that I actually get sleepy at 11pm automatically. I try and read a bit before bed (currently making my way through Elena Ferrante's Neapolitan Novels) but usually I only manage a few pages before I conk out.

I feel like this wasn't a particularly exciting or enlightening typical day, but really, how can it be? Like Cassie says: "If you're reading these posts - whatever your day looks like - whether you smashed through a huge to-do list or not. You're doing good, remember to be kind to yourself.".

All we can really do is make it through the day, focus on the tiny things that make us happy, and know that there is a light at the end of the tunnel. At the time of writing, 5.8% of the UK population have received their first dose of the vaccine (including my dad, hey dad!). Good news is out there, it's just not as clickbaity as the bad news, so we see less of it.

Now, if you'll excuse me, I have a fake hospital to run.

Give yourself a break: lessons from burnout

2020-12-16T00:00:00Z

I started writing this post a few days ago, and was so exhausted I couldn't actually be bothered to finish it, which tells you a lot really. And if you're too exhausted to read another blog post, here's a summary: have a rest. Go and do something nice. Tech can wait.

A couple of weeks ago (possibly - I have no concept of time any more) I tweeted this, which seemed to resonate with folks:

the only coding I've done outside of work in quite a long time is a small bit of JS to apply hats to emoji. I don't know how anyone does tech stuff out of hours, it's exhausting enough doing it IN hours

(A plug for emojinator, the site in question where you can add hats to emoji)

Twitter is awash with fantastically talented people building incredible stuff and sharing it, as well as those insufferable grifters who tweet things like "15 things you must learn to be a good developer #100daysofcode" and then hawk you their ebook. "Thought leaders" (don't you just hate that term) are churning out article after article of brilliant leadership advice, technical deep-dives, creative things to do in CSS, you name it. I don't know about you, but the article count on my RSS reader has been increasing for months and I just have not been reading anything. I can barely focus at the moment.

I became a tech lead in September, which is something I've been wanting to do for quite a while. One day I'll write about what I've learned as a new tech lead, but now is not the time, because I don't think I've been able to really succeed in my role due to the constant being-on-fire-ness of this entire year. Instead, have some lessons from the trash fire of 2020 that we can take over into the slightly-smaller-but-still-burning trash fire of 2021.

Lesson number 1: give yourself a break

As a new tech lead, I've felt like I'm letting my team down because I don't have the mental capacity to sit and read about the things I need to improve on, like observability and monitoring. I've had a copy of the SRE Workbook on my laptop waiting to be read, which I've barely touched.

Where did all these expectations come from? Myself, mostly. Nobody is peering over my shoulder going "why aren't you reading about Prometheus?". (Actually, my team have been nothing but supportive this entire year, and I love them all.)

The coronavirus pandemic has meant that my choir hasn't been able to meet since March. The choir I've been a part of for seven years, have been co-running for five of those years, and which forms a huge part of my own identity. I'm an extrovert who gets energy from being around people (but not in a Colin Robinson kind of way). Most of us have barely seen our friends and family. This year has been intensely difficult. I'm sure you've all experienced something similar.

On top of that, the political situation is dire. As well as the absolute corrupt shambles of a government who have done such a terrible job of handling the COVID pandemic that we have the highest death rate in Europe, there's a big red countdown timer on the UK government website that counts down to Brexit when I'm looking up just what the hell being in Tier 3 actually means. Many, many people have lost loved ones, there's a whole wave of anti-vaccine "Keep Britain Free" zealots popping up all over the place, and the UK has been nicknamed "TERF island" because of the rampant transphobia being spouted by formerly respectable public figures. And that's just on our doorsteps in the UK.

The SRE Workbook can wait, basically. We have enough on our collective plates.

Lesson number 2: if it benefits your work, it can be done in working hours

Perhaps you used to watch conference talks on the daily commute, or read technical books in bed. I definitely had a copy of The Manager's Path next to the bed that I was chipping away at at one point. But now that commute is gone for many of us, and I don't know about you but the only thing I have the energy for in the evenings is playing video games or idly browsing the internet.

I believe quite strongly that if you are learning something in order to become better at your job, you should be doing that within working hours. In my team, we all know that technically it's encouraged to take time out to learn something - we get a budget to do just that - but we rarely ever do it. To that end, I actually scheduled 2 hours a week in the whole team's calendar on a Friday for "Reading time". They can use that time however they want: they can watch videos, try something out, read a book. They can take more time, or less time. They can do it on a different day, or skip it entirely. All it is is the explicit permission to take some time out of your week to learn something, if you want.

(I don't know if they actually take the time: I haven't asked. I just want them to know they can, in writing.)

Lesson number 3: some things are boring and that's okay

Kubernetes does not interest me. I have the utmost respect for the infra folks on Twitter who seem super intelligent and knowledgeable about it, but I cannot bring myself to be interested in it. For a while I felt like not being into this stuff made me a lesser developer somehow. But my specialism lies elsewhere and there are things I'm good at that people who do Kubernetes for a living aren't (and I have it on good authority that "do Kubernetes" is a technical term). That's how well-functioning teams work.

I know enough kubectl to get a list of pods and SSH into one of them (but mainly because I have the zsh autocomplete plugin and it fills it in for me based on my past commands). That's all I need: most of the actual Kubernetes wizardry is automated or managed by people who specialise in it (in my case, our excellent Infrastructure Platform team). A good developer or tech lead will know when it's the right time to delegate to someone who knows more about it than they do.

Lesson number 4: mental health is more important than KPIs

I'll caveat this section with the fact that I know many people work at companies where mental health is not something to be discussed, or something that people really seem to take into account. And I also know it's not as simple as "find another job" and that should never be the only solution.

Instead, this is an appeal to senior leadership and management. Your employees are not inanimate batteries you plug in to power your company. They are humans, with complicated lives, families they haven't been able to see for months, and children having to stay home from school because someone in their class tested positive for COVID. Their partner might have lost their job this year. They may be struggling with working from home, missing being around people in the office, or they might be finding video calls even more exhausting than real-life meetings. If you've sadly had to make redundancies this year, are you expecting the reduced number of people to do the same amount of work as before?

If you're a team lead, check in on your team. Are they working long hours? Encourage them to sign off earlier. I highly recommend this Twitter thread about why working late a couple of hours a week can lead to completely unrealistic expectations of how long projects take to complete.

Schedule 1:1s with them and ask them how they're feeling about things. Encourage them to share their workload if they have too much: having more on your plate than you can cope with right now is not a sign of failure.

Mental health should be taken as seriously as physical health. We have trained mental health first aiders who can provide a swift response over Slack, an Employee Assistance Program for access to counselling and legal information, and people can take mental health days if they are struggling. I've taken three afternoons off at the last minute in the past three weeks because I was so exhausted with [gestures wildly] everything, and my team were very understanding about it. I know I am privileged in that regard, and I am grateful.

Ultimately, the productivity and success of the company will suffer more if your team burn out. People will start taking extended leave, or they'll quit. It's a choice between delaying a product release by a day and the mental health of a human being.

Sorry folks, I wrote a long article when I promised you you didn't have to read articles. Go and have a cup of tea and look out of the window for a bit.

I guess what I'm saying is I'm really tired, it's okay if you're really tired, let's all be really tired and accept that the Google SRE Workbook will stay untouched on the shelf for a few more weeks

7 myths designers and developers believe about web accessibility

2020-10-11T00:00:00Z

In an ideal world, being "good at accessibility" wouldn't make you stand out from the crowd. Companies wouldn't be hiring accessibility experts to help them unpick and untangle the inaccessible products they've been building for years. Speaking about web accessibility at a conference would be as unnecessary as getting up on stage and giving a talk on how to write HTML.

But we don't live in that world, and the web is full of inaccessible websites. Try navigating the Liberty London website with just your keyboard - can you add something to your basket?

I want to bust a few myths that I've come across over the years, in the hope that accessibility will stop being something to "deal with later" and start being something that people think about from the start.

Myth 1: The majority of your users don't have access needs

Repeat after me: there's no such thing as a "typical" or "normal" user.

When we're designing and building websites or apps, it's all too easy to forget that we are coming from a narrow perspective. My own abilities, experiences and knowledge shape how I interact with a website, and my experience may be totally different from yours. So even if you know instinctively that a particular icon means "download", others might not make that connection.

Is this how you see your users?

Microsoft's brilliant Inclusive Design Toolkit warns of the consequences of this selective thinking:

“If we use our own abilities and biases as a starting point, we end up with products designed for people of a specific gender, age, language ability, tech literacy, and physical ability. Those with specific access to money, time, and a social network.”

As a non-disabled, computer-literate developer with a Macbook and fibre internet, I need to make sure I'm not only building apps for people like me. All my users will have different requirements, different technology and different backgrounds. As the Inclusive Design Toolkit puts it:

“When it comes to people, there’s no such thing as “normal.” The interactions we design with technology depend heavily on what we can see, hear, say, and touch. Assuming all those senses and abilities are fully enabled all the time creates the potential to ignore much of the range of humanity."

Myth 2: Accessibility is optional

It's actually the law, in both the UK and the USA (I can't speak for other countries, but I'd be keen to hear from anyone who knows about any legislation in other places).

In the UK, The Equality Act 2010 makes it illegal to discriminate against people with disabilities - and that includes by accident! It doesn’t explicitly refer to websites, but the Equality and Human Rights Commission’s (EHRC) Code of Practice does list websites as one of the services to the public that should be considered covered by the Equality Act.

According to the EHRC, an organisation "is responsible for ensuring that reasonable adjustments have been made where needed, for example by changing the size of the font, to ensure that disabled users are able to get the information, without being placed at a substantial disadvantage (even if the [organization] employs an external organisation to build and maintain its website)."

The EHRC may:

Conduct formal investigations
Serve non-discrimination notices
Act over persistent discrimination
Issue Codes of Practice
Help someone prosecute a company - this requires someone to actually sue the company, which there's no case law for at the moment - but that could change any time.

In the US, there's the Americans with Disabilities Act (ADA). Famously, Domino's Pizza was sued by a blind person who couldn't use the website with a screenreader. According to US law firm Seyfarth, in 2019 there were 2,256 web accessibility lawsuits filed.

Myth 3: Access needs come from permanent disabilities

The truth is, anyone at any time can have access needs, and they can be permanent, temporary or situational. Temporary impairments might be due to a medical condition, and situational impairments may result from the environment around us - a situation we're in.

Some examples of permanent conditions:

partial or full blindness
having a limb amputated
learning difficulties, such as dyslexia

A temporary impairment could be:

visual aura from a migraine
repetitive strain injury making it difficult to use a mouse
cognitive processing difficulties (also known as brain fog) following an illness

Situational impairments might include:

a bright light causing glare on the screen
loud noise, making it difficult to concentrate
slow internet

Even if you consider yourself not to have any form of disability, you could find yourself with a temporary or situational impairment at any point.

Often when developers do think about accessibilty, they think of screen readers and people with visual impairments. That's a start, but there’s a spectrum of what constitutes disability. The important thing to note is that it doesn’t necessarily translate to some kind of personal health condition.

According to the World Health Organisation:

“Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which [they live]."

So much of the world around us can influence whether or not we have, or consider ourselves to have, a disability. Summed up perfectly by Amanda Leduc (originally on Twitter):

If you wear corrective lenses of any kind, you have a disability. And guess what: your disability has already been accommodated, which is part of why you might not see yourself as disabled.
@AmandaLeduc, Aug 30, 2020.

Myth 4: Accessibility is a barrier to good design

I've heard this one a lot. And as a web developer I feel like I’m often turning around to designers and saying “Sorry, I can’t do that, because it’s not accessible”. (The best designers will then turn around and say, "okay, let's find something that works better.")

It’s easy to imagine that in order for design to be truly accessible you have to build sites that look like the first-ever web page, but that’s not the case.

Is this... accessible design?

The reality is that accessible design is good design - and vice versa.

When it comes down to it, can we really call a design good if it doesn’t work for everyone? You can build the sleekest, prettiest user interface, but if someone who uses the keyboard to get around the internet can’t see what they’re doing, are we really going to call that good design?

As Jessie Hausler, the Director of Product Accessibility at Salesforce, wrote in his article 7 Things Every Designer Needs to Know about Accessibility:

“Accessibility will not force you to make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design.”

If we can work within the constraints of the technology we're building for, or the constraints of what's in style, we can work within the constraints of accessible design.

Myth 5: Accessibility is hard to implement

This one has a grain of truth in: accessibility can be difficult to implement retrospectively. If you've built an entire web app without considering accessibility, it can take a lot of time (and cost money) to go back and fix it up so that it's accessible.

But if you consider accessibility from the start, factoring it into your designs and the way you write your code, it doesn't have to be difficult. Accessibility by default is a lot easier than accessibility after the fact.

As web developers, by sticking to some best practices in HTML we're already halfway there:

using semantic HTML elements such as <article> and <nav> to mark up the different parts of the document (I'll write more about this soon!)
using <button> for buttons with onclick attributes, and <a> for links to different pages (and not adding onclick attributes to anything except buttons!)
nesting headings correctly, from h1 through to h6 , with only one h1 on the page
keeping HTML tags for markup, and using CSS for style (rather than, say, using a <h1> tag because you want big text)

Many of the things that will help some groups of users with access needs will also benefit others: for example, good semantic HTML is great for screenreader users, but also helpful for keyboard or adaptive switch users, as with the right tags the browser knows what should be focusable and what shouldn't. Labels on forms make them easier to read and understand for people of all cognitive abilities, and they are good for screenreader users too.

Add an accessibility checklist to your JIRA tickets or pull request templates: make it part of your definition of done. Look out for best practices in your code reviews.

Myth 6: React apps are inherently inaccessible

I seem to follow two camps of people on Twitter: people in the React community, and people who hate the React community. I am by no means a hardcore React stan (and I think the community can be as toxic as any popular programming language/framework community can be) but I use it every day at work and I think it's just as good as some of the alternatives out there.

One of the arguments against React that I hear most frequently is that React produces inaccessible websites which are <div>s all the way down. It doesn't. If React apps are a mess of un-semantic <div>s, it's because the developer put them there. The issue is not with the framework, but the lack of semantic HTML knowledge of the developers who use it: you can write any HTML you like in JSX.

Ultimately, screen readers tend to ignore <div> components, as they're generic containers. If we use semantic HTML elements for the actual content of the page, there shouldn't be a problem at all from a markup perspective.

React components can't return more than one element, so with older versions of React you had to wrap multiple elements in a container <div>. This would have added a few extra containers to the page. But the introduction of React Fragments solved that, and usually doesn't result in any additional elements being added to the DOM.

Another thing to watch out for is screen readers not alerting users when content on the page changes. This isn't a React problem specifically but a single-page application (SPA) problem, and it can be solved with ARIA live regions. You'd still have this problem if you built your app in vanilla JavaScript.

Ideally, your SPA should also work with JavaScript turned off - with React we have tools like Next.js which produce isomorphic (server- and client-side) applications.

Myth 7: Automated testing will catch all accessibility problems

People love to show off their Lighthouse scores, don't they?

Is it though?

Lighthouse is an open-source automated testing tool that you can run as a Node module, from the CLI, from Chrome or as part of your CI checks. It checks for performance, accessibility, progressive web app performance, best practices and SEO. It's a great tool, but unfortunately it's often treated as a silver bullet. A high Lighthouse score is a good thing, but it doesn't mean that you've "done" accessibility - there are always things that Lighthouse won't be able to detect.

The best way to test accessibility is to approach it from all sides. Automated tooling such as Lighthouse or axe) can and should be part of your development process, as it'll provide a quick feedback loop for common accessibility problems in your markup and CSS. But what these tools don't account for are things like the quirks of different screenreader software (and boy, do they have quirks), or the other kinds of assistive technology people will use to access your website. Lighthouse can't tell you whether your site is still legible when it's zoomed in 600%, or whether you can interact with the various parts of the app with a keyboard as you would with a mouse. The Accessibility in Government blog has a great article about what they found when they tested automated tooling on the world's least accessible webpage.

Before you merge your PR, check how your new feature behaves with screenreaders: Macs and iPhones come with VoiceOver, Android has TalkBack, Linux has Orca, and you can download the open-source NVDA screenreader for Windows. Does it read out everything it's supposed to? Is it reading out anything it's not supposed to? Are the headings in the right order?

Ultimately, there’s no substitute for getting people with actual access needs to use the website or app. You can do some user testing, commission a formal audit, and/or make sure you have ways for users to give you feedback. Include disabled users in your UX research upfront, as well, so that you're building something accessible right from the start.

It's your turn

If you encounter any of these myths, you can (and should) challenge them. A lot of the time, these myths stick around because accessibility just isn't being talked about. Be the one to bring it up, and get others on board too. Bake accessibility into your design systems and your ways of working.

Resources & further reading

Microsoft Inclusive Design Toolkit
7 Things Every Designer Needs to Know about Accessibility - Jessie Hausler
Deque - Accessible Design
Deque - Accessible Development
Marcy Sutton - blog posts and talks from an accessibility expert
What we found when we tested tools on the world's least accessible webpage - Accessibility in Government Blog

Defending yourself against cross-site scripting attacks with Content-Security-Policy

2020-05-03T00:00:00Z

I spent an entire day last week wrestling with a PDF-rendering library in React which was refusing to work in production. Locally it ran just fine, but as soon as we built our app in production mode, it wasn't doing anything. Looking at the console, the errors it was spitting out made my heart sink. I'd seen these before.

The dreaded console error

This was an error caused by our Content-Security-Policy (CSP) header, telling our browser that something in the library should be blocked - specifically, an eval() function within one of the dependencies of our PDF-rendering library. I did what any self-respecting developer would do and complained at anyone who would listen - okay, I posted on Twitter - and then discovered that a lot of other developers weren't aware of what CSP was or what it was for. So I thought I'd write a post about it.

The error messages I was getting were protecting me against a common web security vulnerability - cross-site scripting attacks (XSS). As a web developer, it's really important to be aware of what XSS is and how to prevent it.

Cross-site scripting (XSS)

XSS involves someone injecting malicious code into an unsuspecting website, which then executes on the victim's computer.

This injected code can do things like:

copy your cookies and send them to the attacker
get information about your location or data from your webcam etc
grab session tokens from local storage

On websites that store sensitive information, such as banking or shopping websites, XSS vulnerabilities could allow someone to impersonate you by stealing your access token and using it to log in as you - which means gold-plated toilet seats for them, and a nice credit card bill for you.

The Open Web Application Security Project (OWASP) recognises three different methods of XSS: stored, reflected and DOM-based.

Stored XSS

Stored XSS refers to malicious code sent in the server response from something like a database.

Example: on a website allowing people to submit comments to discuss news articles, a user submits the following comment:

Great stuff guys!<script>/* sneaky code */</script>

If the website isn't sanitizing any user input (stripping it of any HTML tags) and is rendering the comment directly into the DOM, that script will execute as soon as you load the page it's on. Before you know it, your browser has posted comments all over the site declaring your support for some deeply unpleasant organisation.

There's a really interesting episode of the podcast Darknet Diaries featuring Samy, the (accidental) creator of a MySpace worm that used XSS to get people's profiles to automatically add him as a friend. This is a great example of stored XSS, because it all started with something he posted on his own profile (which was then stored in MySpace's database).

Reflected XSS

This is where malicious user input in a request is sent back in the immediate server response, executing on the receiving client's browser.

Example: someone posts a link online to a shopping website, with a search term in the URL so it takes you directly to the catalog page. But they've also included some <script> tags in the query string.

https://niche-tshirts.com/shirts?q=extreme+ironing<script>/* sneaky code */</script>

When the server receives the request, it takes the entire query string and uses that as the search parameter. In the HTML that it returns, it renders:

<p>You searched for: amateur paleontology<script>/* sneaky code */</script></p>

Then, your poor unsuspecting browser will execute what's between those script tags, and the attacker will be able to gain access to your access token and anything else they've managed to scrape.

DOM-based XSS

Finally, DOM-based XSS is when JavaScript running on the page uses data from somewhere the attacker can control, such as window.location (the URL of the page). Say we have some JS on our page which takes window.location and then executes some function with it:

https://niche-tshirts.com/shirts?q=spelunking

const params = new URLSearchParams(document.location.search.substring(1))

const searchTerm = params.get("q")
document.getElementById("content").innerHTML = `<p>You searched for: ${searchTerm}</p>`

If our attacker from before sends another link with the <script> tags in the query string, these will be rendered into the DOM when the browser sets the inner HTML content of the #content element.

Unlike the previous two examples, this all happens client-side - the server isn't involved at all.

Preventing XSS

Some of the methods we can use to prevent XSS attacks on our websites include:

sanitizing user input, making sure there are no HTML tags in it
escape certain characters (like <, >, &, and ") with HTML entity encoding (e.g. & for &) to prevent them being executed
not rendering arbitrary content from the server as HTML - render it as plain text
check the Content-Type is correct - only text/html if you are definitely returning HTML
use HttpOnly cookies for sensitive data so that the JavaScript Document.cookie API can't access them
and... set up a Content-Security-Policy header!

Content-Security-Policy is a set of rules about permitted content on a website

Content-Security-Policy is an additional layer of security on a site, preventing things like malicious scripts from being run by defining strict rules about what content you can and can't have on a website. It can be one of the HTTP headers that we can send from the web server to the client (browser), or a meta tag in the <head> of an HTML page. A browser will read the CSP and check whether the scripts, stylesheets and various other resources it's executing or displaying conform to the rules in the policy. If not, it won't load them.

CSP is basically Browser Gandalf.

A CSP meta tag may look a bit like this, for a site with Google Analytics and some Twitter/Facebook embeds, and images from a CDN:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; manifest-src 'none'; prefetch-src 'none'; worker-src 'none'; object-src 'self'; font-src *; connect-src 'self' https://www.google-analytics.com; img-src 'self' https://some-cdn.com; script-src 'self' https://platform.twitter.com https://www.google-analytics.com https://connect.facebook.net https://staticxx.facebook.com; style-src 'self' https://platform.twitter.com">

An example Content-Security-Policy error from Google

The CSP header or meta tag content is always a string containing a semicolon-separated list of rules.

A policy has a list of directives which are usually suffixed with -src, and refer to different kinds of rules for resources and content on the page.
Some common categories of directive are:

fetch directives: which resource types may be loaded, and where from
document directives: what properties the document or worker may have
navigation directives: where a user on the page can navigate to/submit a form to

Next to each directive we specify one or more permitted sources for each of these directives.

script-src: 'self' https://othersite.com;
<!-- directive: source source; -->

I won't go through every single directive - there are a lot - but I'll outline some of the most common ones, and what rules they might enforce. Plus, the good old caveat that Internet Explorer only supports one directive (sandbox), and that's with the legacy X-Content-Security-Policy header.

While the HTTP header and meta tags are mostly the same, the main differences are that HTTP headers have wider browser support, support all of the directives (meta tags support most of the directives) and may be cached by proxies (meta tags won't be).

As long as you're employing multiple methods of defence against XSS, including CSP, you can protect yourself (yes, even in IE). It's important to emphasise here that CSP is one way of protecting your website against XSS - it's not enough on its own.

Fetch directives

These directives govern which resource types may be loaded, and where from. Things like images, scripts, styles and frames will be defined here.

Any of these directives may also have a wildcard value (*), which basically means "anything goes".

image-src: Permitted sources for any images/favicons on the page.

script-src: Permitted sources for any JavaScript on the page.

style-src: What kind of CSS it's allowed to load, and where from.

font-src: where fonts specified by the CSS @font-face rule may be fetched from (e.g. Google Fonts)

frame-src: where iframes may load content from (e.g. Stripe elements)

connect-src: hosts that your JavaScript may make requests to (e.g. an API, with fetch)

default-src: the fallback if any of the rules don't match the resource

Document directives

Document directives restrict the use of plugins (such as with <embed>) and let us enable sandbox mode.

plugin-types: allows you to define permitted MIME types for embedded media and elements using <embed> tags. These days, you rarely need to use embed, so I don't expect you'll come across this one very much.

sandbox: literally the only directive that IE supports! This allows you to restrict the browser environment on the page, effectively blocking everything - popups, scripts, forms, you name it. It has different sources from the rest of the directives - you can specify exactly what should be enabled in sandbox mode. Take a look at the MDN documentation on sandbox for more information.

form-action: if you're using traditional HTML forms with action attributes, this directive specifies the URIs you're allowed to submit to.

frame-ancestors: specifies which pages or URIs are allowed to embed iframes and other frame/embeddable content.

Sources

Most directives have the same possible list of sources. With the exception of host source and scheme source, they are all specified in single quotes.

'self' - anything from the same host is fine. So a CSP for localghost.dev with image-src: 'self' and script-src: 'self' would be allowed to display images and run scripts from localghost.dev.
a host source : external hosts that the resource can come from.
- For example, style-src: "https://myhost.com" allows you to include a stylesheet from myhost.com, e.g. <link rel="stylesheet" href="https://myhost.com/style.css"/>.
- If you often use content delivery networks (CDNs), you'll need to specify them here. You can also use wildcards for the subdomain of the URL, and restrict things to specific ports as well. The protocol matters, so a host source with https:// will not allow anything from http://.
- e.g. connect-src: 'self' https://*.localghost.dev will allow anything over HTTPS from a subdomain of this site.
a scheme source: what scheme (protocol) it's okay to fetch resources from. Chiefly https: or http:.
'unsafe-inline': whether inline <style>/<script> tags are allowed. I've only really used this for script-src and style-src before. I'll talk more about why inline style and script tags are a security risk later in the article.
'unsafe-eval': whether or not JS is allowed to use the eval() function, which executes arbitrary code from whatever string is passed in. I'll go into more detail about why this is a bad thing in a later section.
nonce - you may specify an unguessable cryptographic nonce (a base-64 encoded string) which you can then pass into inline styles or scripts as an attribute to allow them to load on the page. This means you can use inline <style nonce="mysecretstring"> or <script> tags without indiscriminately allowing all inline styles - effectively marking only a specific set of inline styles as "safe". This must be randomly generated and unguessable, otherwise it's basically pointless as anyone can guess the hash and pop it in their injected scripts.
hashes - e.g. sha256-<your hash value>. This is a base64-encoded representation of your inline styles or scripts, so the browser can check the hash against its own hash of the <style>/<script> to make sure it's the real deal. Anything that doesn't match the hash will be ignored. Hashes are static, while nonces are generated server-side on every page load.
none - no URLs match, no nothing may be loaded at all. For example, I don't use iframes on this site at all, so I'd have frame-src: none.

`unsafe-inline` and the risks of inline styles

But why would we have to explicitly enable unsafe-inline for style-src, and why are inline <style> tags considered "unsafe"?

There are actually a few vulnerabilities that can be triggered using CSS. They're rare and, yes, less harmful than JS-based XSS attacks, but it's still worth protecting yourself against them.

messing up your site's styles - on a big-name website or app, this can cause reputational damage
injecting styles into the page to add unsolicited content or offensive text
disguising user-generated content to look like official content, e.g. a fake login link

All of these can be prevented with unsafe-inline, meaning the browser will only pay attention to the styles from your defined stylesheets.

Ultimately, allowing unsafe-inline is a calculated risk: if you really can't get around it with a nonce or a hash, then you can enable this knowing that you are introducing a slight vulnerability, but it's highly unlikely to be anything super severe.

There's a helpful StackOverflow answer which explains this in more detail.

Scripts, `unsafe-inline` and `unsafe-eval`: why `eval()` is evil

While enabling unsafe-inline for styles is not the end of the world, it's a bad idea to allow it for scripts. A lot of harm can be done with an inline script that's been injected into your code - with a connect-src directive defined as well it would mean that that script couldn't connect to any other sources, but it could still cause havoc, such as pretending to be you and updating user-generated content.

eval(), on the other hand, should be avoided at all costs. It takes a string as a parameter, and blindly executes it as Javascript. There's literally a section in the MDN article about eval() called "Never use eval()!". This opens up a whole host of security vulnerabilities - if unsafe-eval is enabled, anyone can execute arbitrary code in your application. Yikes.

How to create a CSP header

In a static site, you can add a meta tag to your site's <head>:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; manifest-src 'none'; prefetch-src 'none'; worker-src 'none'; object-src 'self'; font-src *; connect-src 'self' https://www.google-analytics.com; img-src 'self' https://some-cdn.com; script-src 'self' 'sha256-flsjfljlkfjaspdjfsdkgs' https://platform.twitter.com https://www.google-analytics.com https://connect.facebook.net https://staticxx.facebook.com; style-src 'self' 'nonce-adsfasdfasfsadf' https://platform.twitter.com">

If you're running an app with an Express server, you can easily set it as one of the response headers with helmet-csp - check out the Helmet docs for more information.

The safest method is to have the most restrictive CSP possible, and only add new sources if you're completely sure. Include a default-src: 'none' so that if no rule matches a resource, it will be blocked.

Adding to a CSP header

When is it safe to add new sources to a CSP header? Perhaps you've included an image or stylesheet in your code, and your browser is refusing to render it because it violates the CSP. Before adding the URL as a source, consider:

do you trust this site?
how specific can you make the URI? (avoid wildcards unless it's a host you control)
could you host the file on an already approved source?
could you add the CSS file to your repo instead?

styled-components and `unsafe-inline`

If you're using styled-components, which renders <style> tags into the page, rather than enabling unsafe-inline for styles you can define a nonce by setting it as a Webpack global (__webpack_nonce__). The caveats: this is apparently undocumented, and only works with server-side rendered code. So you might have to enable unsafe-inline for that one.

Environment-based CSP

If you run different environments for development and production, you may want to consider serving different CSP headers for different environments. For example, your image-src directive might point to a non-prod CDN if process.env.NODE_ENV !== 'production, but the production CDN otherwise. Similarly, if you use a local server at localhost:6060 as an API for development but your production app points to a hosted API somewhere else, you might want to add localhost:6060 to your CSP only for the development environment.

There are some frameworks, such as Hugo and Next.JS, which rely on inline scripts for hot reloading. In this case, it's fine to add unsafe-inline to your script-src in development.

For example, if you use Hugo and want to enable live reloading with your CSP, as well as scripts imported from the site itself, you can use .Site.IsServer (though this only works if you use server mode for development and not production):

<meta http-equiv="Content-Security-Policy"
    content="default-src 'none'; [...] script-src 'self' {{ if eq .Site.IsServer true }}'unsafe-inline'{{ end}} {{ .Site.BaseURL }};">

The moral of the story

So, how did I get around the unsafe-eval warnings I was seeing in the console?

Unfortunately... the only solution was to chuck out that library and find something else. There are no workarounds for a library that uses eval.

When adding a CSP header to a site, start out with the principle of least privilege: only permit exactly what you need, nothing more. When in doubt, be overly restrictive, and see what console errors you're getting.

If you're working on a site or app that has a CSP header set, don't be tempted to add sources just to make console errors go away. Make sure you know exactly what you're allowing.

And promise me you will never, ever enable unsafe-eval.

References & further reading

Cloudflare - What is Cross-Site Scripting?

MDN - Content-Security-Policy

MDN - Cross-Site Scripting

OWASP - Cross-Site Scripting

OWASP - DOM-based XSS

Google's CSP Evaluator can check how watertight your CSP is (but is not exhaustive).

Google Web Fundamentals - CSP

ffconf 2019: future friends beside the seaside

2019-11-16T00:00:00Z

Now in its 11th year, ffconf is one of the biggest events in the conference calendar for web developers across the UK (and further afield). Yet somehow I've managed to miss every one since I got into tech, because of some reason or another - last year I was at the week-long blockchain sales pitch that is Web Summit - so I was understandably very excited to finally be going. It takes place at the lovely Duke of York's Picturehouse in Brighton - the first conference I've attended that had cupholders in the seats! (Fun fact, I applied for a job there once.)

Photo: Trys Mudford

One of the best things about attending conferences is seeing friendly faces from the community, and this particular subset of the JS community is so lovely. It does give you hope (and a refreshing break from some of the other conferences and meetups I've attended in the past few years which have had 97% more posturing). I spend a lot of time in the London bubble so it's great to meet folks from other tech communities, and going to the Async meetup the night before was a great way to do that.

JS (and real-life) friends! (photo: Trys Mudford)

(I also got to meet Suz Hinton at the afterparty and didn't make a fool of myself, so that is always a plus. She's extremely lovely.)

What made these talks especially good was that they focused more on people and stories. My favourite kind of conference talk is one where people show something amazing they built, and share their experiences of building it (a good example from JSConf EU 2019 is Bringing back dialup: the internet over SMS by Alexandra Sunderland). I don't need to come away with an exact step-by-step guide on how to do the thing (I'll never remember it all anyway), and it might not even be a practical thing for me to ever attempt, but I want to know all about it because it's amazing.

I've been thinking a lot recently about the reasons that people learn to code - and in fact, I submitted to the ffconf CFP with a talk about this, which I'm going to try and polish up and submit elsewhere. When I started doing web development, I didn't really know what I was doing or why I was doing it - I thought it'd be cool to make a website, and how else was I going to get my Neopets shop to play music and have a flashy background?

It seems like a lot of the coding for creativity's sake has been lost in favour of learning the latest, greatest technology in order to advance your career and to be able to say that you're using it. I could go on, and I probably will in another blog post, but seeing people up on stage doing ridiculous and beautiful things with code gives me hope for creative coding (and, most importantly, it inspires me to do some too).

I came home from ffconf and restyled my entire website with ludicrous link effects and a gradient border. It's not quite making jewellery from SVGs but it's a start.

Here's a bit of what I took away from each of the ffconf talks. I haven't included many photos because my phone's camera is atrocious in low light, but I've borrowed some nice pictures from the official photos by Trys Mudford on Remy Sharp's Flickr.

Sharon Steed - Engaging Empathy

"Empathy: the thing you have to do to not be an asshole in the office."

Opening the conference was author and communications consultant Sharon Steed. She spoke about her experiences of growing up with and living with a stutter - and the difficulties she's had with others not taking her seriously. She's a fantastic storyteller, and as she shared with us her challenges and achievements it felt like she was taking us with her on her journey.

Sharon Steed (photo: Trys Mudford)

She compared empathy to love; "the thing everyone understands, but nobody can explain". It's intangible, but it's also a choice: we can choose to have empathy for others (and we should). (Her tales of new love were accompanied by that picture of Britney and Justin in denim, which was an all around win for me.)

So, what to take away from Sharon's talk? We should foster environments of collaboration and inclusion. People need to feel safe in order to speak honestly - having open lines of communication and being transparent from the start will help this. She also pointed out that teams don't always need to work in the same way: people should be able to do things on their own terms.

Sharon also described what she called the "Key Empathy Behaviours": patience, perspective and connection. As long as we are being present and remembering the why of what we're doing, understanding where others are coming from, and speak for intention and not impact, we'll be able to engage empathy and make everyone feel like they belong.

ffconf talk page: Engaging Empathy

Amina Adewusi - What does it take to become a developer in 2020?

"We need a recruitment revolution."

Amina's talk focused on the barriers to entry for under-represented people in the industry: a topic that has come up time and time again but doesn't really seem to be getting any better (especially for people of colour).

Amina Adewusi (photo: Trys Mudford)

Her words were powerful, and the measured way she spoke really conveyed the gravity of what she was saying. In the last 11 years, the proportion of women and non-white students in computer science has not improved: last year, only 20% of computer science students were female, and only 15% were non-white. And a computer science degree is already a privileged platform to launch your career from. What about those who don't go down that path?

She spoke of the generosity of strangers: the bootcamp alumni who all answered her questions when she contacted them out of the blue, happy to give advice. And while bootcamps are a great way to fast-track your career into tech, they're also very exclusionary for anyone with caring responsibilities, and they can be very expensive. She spoke of her experiences raising a baby while also learning to code, which frankly blew my mind - learning to code is really hard (don't let anyone tell you otherwise!) so to do that while also looking after a very young child is just phenomenal.

For those who self-teach, it's hard to get a job once you've learned the skills. More often than not, recruitment is unforgiving, with high expectations, long interview processes and unreasonable deadlines (Amina recalled being sent a tech test on a Friday, with the expectation she'd send it back on the Monday!). It's not just the time it takes, either - the interview process can be very intimidating and sometimes discriminatory.

As Amina put it: this is a call to action. How can we, as experienced engineers, help the next generation of developers get a foothold? Some of her excellent suggestions:

mentor at organisations like Codebar
pair with new engineers
give engineers time to work on open source
be mindful when recruiting - don't assume everyone has all the time in the world
observe the "pacman" rule when talking to people at events

ffconf talk page: What does it take to become a developer in 2020?

Alice Bartlett - Getting more from Git

"My process is 'try stuff until it works and don't ask any questions'."

Somehow, Alice turned a pretty dry subject - git - into one of the most relatable and entertaining talks I've ever seen.

Alice Bartlett (photo: Trys Mudford)

With entertaining anecdotes about the meaningless commit messages she'd write early in her career (we've all been guilty of that, and you should see the nonsense commits I've made to this very website) she highlighted the importance of considering who else is going to be reading all of it - including Future You. A commit message should be a single unit of work that makes sense in isolation, and that will tell you why the change is made. So no more "fix bug" commits.

Of course, it's not always possible to commit code with this in mind, and many of us approach coding by trying stuff out and going all over the place, so git offers us some handy ways of rewriting history so that we can make the commits sensible after the fact.

Here, Alice took us through a brief history of git (including a very entertaining swipe at Linus Torvalds and his controversy: "the creator of Linux and git, two projects he named after himself"). Many attendees in the room hadn't had the... pleasure of working with non-distributed source control systems like SVN, so she took us through how git differs and why it's so helpful for things like testing out changes and controlling the quality of code that's merged in.

"Why are we so bad at git?"

Everything is confusing

A lot of the problem is the jargon and the impenetrable docs, Alice argued - and I agree with her there, having never read a man page that I understood.

And then, using simple and clear language, Alice took us through the process of rewriting git history using interactive rebase (git rebase --i). It's a super useful tool, allowing you to squash multiple commits into one, reword commit messages and change the order they are applied in. She also showed us git add --patch which lets you choose which "hunks" of your code to commit and which to leave unstaged. I'm not going to go into too much detail here, but the video is definitely worth a watch when it comes out.

Some top git tips here to take away:

Don't just link to Slack posts or tickets in the PR - give a bit of background info
...but don't write an essay about the change, keep it concise
commit messages should be meaningful and say why the change happened

ffconf talk page: Getting more from Git

Laura Kalbag - 8 Unbelievable Things You Never Knew About Tracking

"We're asked to give up everything, or get nothing."

Laura highlighted the ridiculous amount of information that various sites have about all of us just through embedded scripts and images. And even though this data is anonymised, a study showed it was possible to actually re-identify people from this data based on their browsing habits. Scary, right?

)

She touched on the Cambridge Analytica scandal - "tracking affects democracy" - and how companies can manipulate people through precise targeting based on their interests, knowing exactly what will make them tick. Facebook's latest ad campaign got a shout out for being totally hypocritical - when you choose to share something with "Only Me" or "Friends" you're also sharing it with Facebook!

Companies make it worse by having incomprehensible terms and conditions, filled with legal jargon. When you consider that 1 in 6 people in England have very poor literacy skills (source: National Literacy Trust) it's especially problematic. Sites like Facebook are a lifeline for many people, but if they can't understand what they're signing up for is it really consent?

While we can't escape technology - Laura argued there is no longer a distinction between "online life" and "real life" - we must all consider the impact our products will have outisde of the immediate interface. She described how we can build more ethical tech, by making things that function without users' personal info, furthering the human experience rather than for corporate profit. I find this a really interesting and difficult dilemma, as in our society it's really difficult (if not impossible) to build a sustainable product that isn't for-profit in some way. It would require pretty significant government support, which isn't going to happen any time soon.

"Friends don't let friends get tracked by corporations."

I knew from the title that this talk would be worrying, but I didn't anticipate just how unsettled I'd feel afterwards! As someone whose life has been basically entirely managed by Google products for years, I realised I needed to make a change. Laura suggested switching.software as a resource for alternatives to common "big tech" products, which is a great place to start.

ffconf talk page: 8 Unbelievable Things You Never Knew About Tracking

Harry Roberts - From Milliseconds to Millions: A Look at the Numbers Powering Web Performance

"How do you know the site is slow?"

A talk with a rather different tone from the last one - a focus on Harry's experience as a web performance consultant. Performance is definitely one of those things I know I should know more about, so I was geared up for the next couple of talks to help me boost that knowledge a little bit.

Harry Roberts (photo: Trys Mudford)

Harry had the great suggestion of keeping a list of questions that you can ask all potential clients, so that you can better understand the problem. In his case, things like: "How do you know the site is slow?". You could do this for any kind of consulting work - knowing exactly what to ask is hugely important. You can shape these questions over time, knowing exactly where to look next time and what doesn't work.

I must admit I was a little put off when he suggested we "leave our ethics at the door" given the talk he'd just followed, and some of the talk seemed a little too focused on the clients and not on the stories behind it. But this was, after all, a talk on numbers.

I found it particularly interesting how he identified a performance issue localised to Venezuela, and got all the engineers on the team to use a simulated Venezuelan internet connection to get them to think about things like network conditions and how it might be for other countries. We often take our internet speed for granted, and even when Virgin Media is at its worst, we still have vastly better internet than much of the world. Much of the world's population is dependent on mobile internet, so are our apps really suitable for everyone?

Harry advocated for normalising performance - making it part of our everyday work. It can be a hard thing to argue for, when your managers are pushing for more new features, but if you can show them the numbers, it's hard to argue.

ffconf talk page: From Milliseconds to Millions: A Look at the Numbers Powering Web Performance

Anna Migas - Effortless Performance Debugging

"If [the browser] fails to load the frames fast enough, we'll experience jank."

Continuing my crash course in performance, Anna showed us with a live demo how we can use the power of Chrome Dev Tools to debug some common performance issues. Using the Profiler tab she showed how we can identify how loading is progressing and the performance of animations during interactions. You can see at-a-glance what's taking the longest time to load, plus it also has some helpful metrics such as the time to First Meaningful Paint.

Anna Migas (photo: Trys Mudford)

In the spirit of the Live Demo, Anna was going to show us how the Lighthouse integration in Chrome can audit performance issues on web apps, but sadly technology was not on our side and Lighthouse wouldn't work (it seemed it wasn't just Anna though). Despite this hiccup, there were still a lot of really useful tips I took away from her talk:

Look through Network tab to see what's been downloaded, and in what order
Block elements using the request blocking tab to see the impact of not loading them
Using font-display: swap to show a fallback font before the font is loaded
Using a lazy-loading library to only load pictures as you need them
Using an image's intrinsic ratio to show placeholders and prevent text from jumping around as images load
Splitting CSS into a critical path stylesheet and others that can be loaded separately

ffconf talk page: Effortless Performance Debugging

Charlotte Dann - Taking The Web Off The Screen

"You'd think that art is an expressive process, and adding this binary middle step seems incongruous, but... computers are better adapted to the design process than any traditional artistic medium."

I actually didn't make many notes for this talk because I was so engrossed in the incredible visuals Charlotte was showing us. As I mentioned before, I'm a big fan of coding for artistic reasons, even if I don't really do it myself much. I'm not particularly "good" at SVG or any kind of web animation, so it blows me away when I see what people can do with canvas, SVG and JS.

Charlotte Dann (photo: Trys Mudford)

In Charlotte's case, she bridges the gap between digital and physical art, using what she designs using generative CSS to produce prints and even intricate jewellery. She's made jigsaw puzzles which she's laser cut out, got a pen plotter to draw abstract designs onto pieces of paper for that precise yet hand-drawn look.

Using nth-child pseudoselectors, she showed us how you can create an abstract pattern from a series of squares and circles. She's done a few of these, and used them as wall art for her studio!

She's also the founder of Hexatope, a web app that lets you draw beautiful patterns on a hexagonal grid and get them cast into silver and gold jewellery. The designs are incredible, and it's really fun to play with.

I absolutely love hearing about things like this, and it's inspired me to get more involved in creative coding. If only people spent as much time doing things like this as they did arguing about which framework is best.

ffconf talk page: Taking The Web Off The Screen

Suz Hinton - Adventures in reinventing interfaces

"I want less mass-produced surveillance bullshit and more Harry Potter magic."

I was super excited for Suz's talk, as I've followed her online for some time and I think her hardware projects are amazing, so it was great to see some of them demoed. She demonstrated how we can use web APIs to interact with non-standard interfaces like printers and other hardware.

Suz Hinton (photo: Trys Mudford)

Using a thermal receipt printer, the Web Media API and the Web USB API, Suz recreated her very own Gameboy Printer! She also showed off her web app that lets you upload Arduino programs directly to the Arduino via the browser, which made me think I should dig out the Arduino I've had in a drawer for several years and never used. (We've all got a drawer like that.)

The tone of the talk shifted considerably when Suz started talking about ownership over computers and data. She cited a 1985 ruling by the Federal Communications Commission which allocated the 900MHz frequency band to industrial, scientific and medical uses. Amateur radio users were allowed to use the band if they liked, as long as it didn't interfere with the protected uses.

However, now the FCC have proposed that private companies should be able to use these bands. And guess who's jumped straight in there? Everyone's favourite Big Bad Retailer, Amazon.

Amazon's new Sidewalk network functions on this 900MHz band. Even the 700-odd Amazon employees testing the products managed to form a localised network on the 900MHz frequency stretching across much of the Los Angeles Basin. Meaning they've basically made a frequency jammer. (Bear in mind frequency jammers are illegal in many countries.) If hundreds of thousands of Amazon customers start buying these products which operate on this frequency, what's going to happen to all those medical devices that rely on this band?

"This is the scariest thing I've ever heard."

At this point Suz started crying, which really drove home just how doomed we'll be if this stuff keeps happening. "We are pretending that these devices are supposed to be helping people, and these people have no idea that they are actually contributing to a privately owned network that companies like this can do whatever they want with."

It's our job to make sure that we are fighting against things like this - "we've done a bad job at educating people". We should be building more "Harry Potter magic" instead of buying corporate home technology, Suz argued - she namechecked Samantha Goldstein, who built a stained glass panel that goes cloudy if it's raining.

ffconf talk page: Adventures in reinventing interfaces

Reflections

I came away from ffconf inspired and filled with a desire to build weird stuff: I want to learn to do things with hardware, make pretty patterns with CSS, and teach my niece how to do the same just for the hell of it.

I also came away feeling terrified by corporate surveillance and the absolute disregard for ethics in technology under the guise of convenience.

Being a developer isn't just about building flashy stuff and sending it off into the world and moving onto the next thing: we've got a responsibility to make sure that the tech we're building is doing good, not harm, and that people are educated about the implications if we do start building creepy stuff like Sidewalk. As Laura Kalbag put it: be the advocate, and question the default. We know what these products and these companies are doing, so it's our job to tell everyone about it.

ffconf is a small, family-run conference, with passionate speakers who have a story to tell. I'd love to see more community-focused conferences like this - it's all too common nowadays to go to a big conference and end up listening to sales pitch after sales pitch when all you want to do is learn something.

I feel like I should probably get rid of the Google Home that's sitting in my living room right now.

Everything I googled in a week as a professional software engineer

2019-09-02T00:00:00Z

Update 15/10/2022: I've written a new version of this! Everything I googled in a week as a senior software engineer

In an attempt to dispel the idea that if you have to google stuff you're not a proper engineer, this is a list of nearly everything I googled in a week at work, where I'm a software engineer with several years' experience.

Happy birthday to the ground.

Obviously these weren't all googled in a row (although you can probably spot that a few were), but throughout the day. I can't remember the context of everything I was googling, but hopefully it'll make you feel a little better next time you have to google something.

Monday

npm react-testing-library - during a React upgrade, looking at dependencies to see latest versions and checking for breaking changes.

Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? - said React upgrade then started causing some super fun errors.

react-apollo release notes

react-apollo/test-utils - tests were throwing some odd errors with our graphQL components.

undo a rebase - oops.

react testing library apollo "invariant violation" - package upgrades are so much fun!

jest silence warnings - don't judge me, ok?

semantic HTML contact details - wanted to check if the <address> tag was relevant here

aa contrast checker

temporary visual impairment - fact checking for an accessibility talk I was giving that week

dominos accessibility - popcorn.gif

shame gif - an important part of any presentation

Tuesday

javascript get array of unique dates - if I have an array of Dates, how can I filter them so they are unique? (reduce, naturally, but I can rarely use that without googling it first)

date to locale string

js date to locale string - after I got a load of Java results

alternatives to Moment.js - it's large

group array items by date - more reduce fun

sort object keys javascript

react fragment keys

next link - needed a reminder of how to use the Link component in Next.JS

React.Children.only expected to receive a single React element child.

visual studio code disable autocomplete html - it keeps autoclosing HTML elements on the same line, and I still can't switch it off

dt dd dl - couldn't remember what the example use for these was.

html nested sections - is it ok to have <section> inside <section>?

display dl in pairs

veggie ipsum - the best lorem ipsum generator

css keyframes

css animate underline text

dl vs ul

react generating keys - should I use some kind of hash, or should I use data in the props? (I ended up constructing a string with unique timestamp data)

css checkbox - can we style checkboxes yet? (no)

flexbox center span - it was 17:24 and I was tired by this point

grid minmax

flexible grid row - I don't have a whole lot of CSS Grid experience, so I always end up googling a ton with this.

grid row height auto

cauliflower shortage - someone told me about this and I panicked

next.js hooks - we can use them, right? (we can, and I did)

Wednesday

cors - today is going to be bleak

the corrs - once I hit some CORS errors I decided I needed to make a meme, and I needed to find the perfect image. It took a surprisingly long time.

Worth it.

git patch trailing whitespace - I was sent a git patch with some whitespace that prevented it from actually patching

jsx annotation

web api fetch preflight - in my CORS adventures I wanted to read up a bit more about preflight requests.

web api fetch origin header

discriminated union flow - trying to diagnose problems with my Flow types.

whitespace regex - is it \w? (no, that's a word - it's \s)

regex not letter

pat butcher emoji - what can I say, I google important things

woman shouting at cat

google oauth

next.js authentication - sometimes it's helpful to google stuff to see if anyone has written examples of how to do common flows in the framework or tool that you're using

component displayname - do I need to do this with my higher-order components?

nextCookie - starting to mess around with oauth cookies

reading cookies in react - there must be a better way than document.cookie

js-cookie npm

cookies-js

npm cookie

universal-cookie

google oauth cookie

🍪

Thursday

"log in with google" localhost - was having all sorts of problems getting this to work

httpserverrequest javascript - I have a feeling this was something to do with Flow types

nextjs flowtypes - yep, there you go

"python-social-auth" react - trying to figure out if the django backend I was working with would play nicely with my React frontend

google social login

vary header

get cookie from 302

google social login cookies - I was having a really fun time with this as you can tell

google oauth cookie

python-social-auth set-cookie

python-social-auth site:stackoverflow.com

python-social-auth react site:stackoverflow.com

django - I think I gave up at this point and just googled Django because I have literally never used it

fetch send cookies

testing same origin credentials locally

cross origin cookies - spoiler alert: not a thing

useState default value

"The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when when the request's credentials mode is 'include'. - googling error messages is only second to console.log() as a debugging method

useState with empty array

react hooks initial state empty array

"Provisional headers are shown" - this is where the requests weren't going through and I couldn't see what the actual headers being sent were

fetch send cookies

how to see request headers in chrome

fetch not sending cookies

Thursday was a whole lot of fun D:

Friday

provisional headers are shown - still at it.

sending cookies from localhost - have I mentioned that I hate cookies?

editing host file - desperate times (and it didn't even work)

sending cookies with different domain

next cookie

getinitialprops functional component

getting cookies from document

js find - to check the usage and return types

string contains

string methods js - I can't keep any of these in my head

js string methods - 20 mins later

js fetch manual cookie

django react cookies localhost

django react cookies localhost site:stackoverflow.com

httponly cookie

django httponly

async await promise.all

nextjs port

google appengine node ports

next rename static

install gcloud cli

method patch - couldn't remember what the HTTP method PATCH does.

nextjs env

next.js environment variables

next js docs

editing data with hooks - literally no idea what I was trying to google here but this was past 5pm so I was evidently quite tired

react form submit

dayjs - I needed the documentation again.

What I'm trying to show with all this is that you can do something 100 times but still not remember how to do it off the top of your head. Never be ashamed of googling, even if it seems like the most basic thing you're looking up. I can never remember how Date works.
I've built plenty of forms in React but couldn't remember how onSubmit worked on the Friday evening at 5:30pm. I constantly have to google JS string methods. Cookies are terrible. (Incidentally, we fixed the cookie issue by running everything in a docker container and tunneling with ngrok, so everything's on the same domain.)

Questions to ask at an engineering interview

2019-08-22T00:00:00Z

Tech job interviews are often different flavours of the same thing, regardless of where you apply. Interviewers are likely to ask you questions about your experiences, perhaps a hypothetical question about what you might do in a certain situation, or delve into some of the how-it-works stuff under the hood of whatever programming language you'll be using. However, there's one question that you can guarantee will come up:

"Do you have any questions for us?"

(At this point you'll probably sigh with relief - internally, at least - as you've reached the end of the interview.)

It might be tempting to just skip over this with a "no, thank you" - maybe the job description gave you enough information for now - but you should always ask at least one question. It's a surprisingly important part of the interview. Firstly, it's an opportunity for you to squash any worries you might have, or find out the answers to anything that wasn't quite clear before. Secondly, it's a chance for you to peek into how things really are at Company X before you get too far in and realise you've Made A Huge Mistake. An interview should be as much you interviewing them as it is them interviewing you, as you need to find out whether the company is a good fit for you.

Of course, you don't have to wait until the very end of the interview to ask questions - it's great to ask relevant questions throughout (though be careful that you don't end up answering every question with another question)!

What your questions say about you

This part of the interview is not just for your benefit: the questions you ask tell the interviewer more about you than you might think. For starters, it shows how engaged you are, what your priorities are and the kind of things you value in your role. It's an opportunity to show off your knowledge and experience by asking questions tailored to the work that you're looking for.

How many questions is too many? It depends how much time you've got left, but don't be afraid to turn up with a list. I brought a notebook into mine, and I took notes while they answered.

So, what kind of questions might you ask? Obviously it's a chance for you to get answers to things that weren't clear about the application process or the job itself. You can ask about the kind of learning and development opportunities, or ask the old favourite of "what do you like most about working here"? Don't be afraid to spin questions that the interviewer asked you back around on them, as long as it's relevant and reasonable.

My favourite interview question tactic is to think about things from my previous roles that frustrate you or that you know you don't want to experience again. Asking questions about these things can give you an idea of whether they do things differently at this place, or whether you're walking into the same job all over again. (Alternatively, if there's something you particuarly enjoy about your current role, it's a good way of finding out whether it'll be the same at this new place too.)

I'll give you some questions that I might ask as a starter (and in some cases, what these questions are really asking). I'm not saying you should ask all of these questions - that would probably take all afternoon - but feel free to pick and choose depending on where you're applying and what's important to you. They're here as a starting point.

The "how does this work here?" questions

These are the questions based on your past experience. It's a great way to understand more about processes at the company, as well as making sure you won't end up working at somewhere that's exactly the same as your last place (unless that's something you want).

Working in product teams

How closely do the dev team work with business stakeholders/customers?

Is this a case of "IT vs The Business" or are engineers embedded throughout the company? I've worked in both situations, and it's much nicer being considered a core part of the business rather than a "supporting function" building a product for someone else's business needs. Is there a product manager on the team who represents the needs of the customer? Are there regular demos with relevant stakeholders? Do they do any user testing?

How does work come in to the team?

How involved are engineers with deciding what to build?

Am I going to be involved in the decision making and the shaping of what we're building or am I going to be blindly picking up JIRA tickets? Is it an iterative development process, or is it a case of "requirements come in, code comes out 6 months later"?

It took a bit of getting used to, but now I love being involved right at the beginning, helping to decide what it is we're going to build and how we're going to build it. It's related to the first question in that it shows that engineering is a core part of the company and not just something that you do to achieve the thing for the business.

Who makes technical decisions? How much independence do product teams have to make technical decisions?

This question is about autonomy in what you're building. Is it going to be a case of "here is the work, go and do it" or "how shall we build this? What do you think?"

Some degree of uniformity is vital, especially if you're working with lots of microservices. But having strategies for the way you work and the technologies you use is one thing; being told exactly what to do and having no independence or flexibility is another thing entirely.

Code, deployment and infrastructure

Who looks after the live applications?

Is it "you build it, you run it" or is it "you build it, and throw it over the wall"? Do engineers have ownership of the apps they build, and are they trusted to look after them?

It's also worth finding out how on-call works, because if that's something that you can accommodate, it's a great opportunity to learn about the tech and how things work.

What's your deployment process like?

What does an average path to production look like for a service or application?

Do you practice continuous integration?

How often do you release to production?

Can I deploy stuff myself on an ad-hoc basis, or is it once a week/every three months? Is it going to be six months before you let me put it into the wild?

This is about finding out how much friction there is in the path to production. The more obstacles and Process With A Capital P, the more obstacles to innovation and experimentation. That said, there is a happy medium, and I don't believe you should be firing off software into prod without due diligence, some process and quality control, especially when you're working with people's data. It's worth finding out how the company handles that delicate balance.

Bonus points for continuous deployment.

Say I wanted to spin up a new service. How would I do that?

Would I need to get permission from the Change Advisory Board in a distant ivory tower? Would I need to write numerous documents and have handover meetings for deployment and maintenance?

The answer I got in my Monzo interview was "there's a command line script to generate a new service" and I nearly wept with joy.

How do you do version control?

If they say "Subversion", it's time to question why. Is there a big beast of a monolith that was written in Java 6 and nobody has quite had the guts to move it off SVN because they aren't quite sure where all the code lives, and do you really want to work with that every day?

How are architectural decisions made?

Do you have an architecture team? What do they do?

Do you have people whose job title is literally "Architect"? If so, are they hands-on and technical, or do they come in and tell you how to build stuff and then leave again? Am I going to be allowed to make my own decisions about the structure of the software I'm building?

I've definitely met some good architects, but really things like solution architecture should be done by the team building the actual thing.

What's your testing strategy?

Do your developers do any testing? (Conversely, are you obsessed with as high test coverage as possible?) And if there's pretty poor test coverage, are they open to improving it or do they see it as a waste of time?

The "how is it really?" questions

The questions that help you delve into day-to-day life at the company.

What does a typical day look like for you?

What are the working hours like here?

Will I be working until 8pm, or can I go to my clay pigeon shooting evening class without getting Meaningful Glances from my colleagues behind their screens?

Perhaps I'm naïve, but I firmly believe in a work-life balance. I was very lucky to have that in my previous job, and I have it in my current job. I don't believe working later makes you a better contributor, as I think the more tired and burned out you get the worse your work is going to be in the long run. I want to know what kind of hours people keep so I can factor it into my decision.

Are there many parents here?

How does parental leave work here?

What facilities do you have for new parents?

This one is not a question I've asked, as I don't have children and don't plan to have them any time soon, but if you're a parent or at that stage in your life where it's something you're thinking about, you want to know whether it's a parent-friendly workplace, whether there's anywhere to go and breastfeed, and what kind of caregiver leave they offer.

I know that some places can be a bit funny if women of childbearing age ask about this kind of thing in interviews; if that's the case, I would question whether it's really somewhere you want to work.

What kind of diversity and inclusion initiatives do you have here?

Does the company take diversity and inclusion seriously? Many (if not most) tech companies have traditionally very poor diversity in terms of gender and ethnicity - and often age, too. Trying to hire from a more diverse pool of candidates is one thing, but how are they trying to make things better in order to get people to stay? Are they hiring a diversity and inclusion lead? Do they have groups or networks?

The "where can I go from here?" questions

What kind of learning and development opportunities are there for employees?

A good way to find out whether they have a learning budget, or whether you can ask for books/courses/conference tickets.

Do you ever host meetups or community events?

Perhas not important to everyone, but as someone who owes a lot of my professional development to the community as a whole, it's really important that wherever I work has a good community spirit.

Do people here ever speak at conferences?

This one is a bit less helpful as (especially if it's a small team) it could be that the employees don't want to speak at a conference, and that's totally fine. But if it's a huge company and nobody really speaks at conferences, it kind of raises the question of whether anyone does anything worth talking about (or, if they are, whether the company isn't keen on letting them talk about it.)

I hope this has given you an idea of the kind of questions you might want to ask at an interview, but more importantly, the value you can get from asking them. If you've got any more thoughts or ideas for interview questions, share this on Twitter with the link below and join the conversation!

Why software engineers should know their audience

2019-04-06T00:00:00Z

When you're talking about what you're working on, do you ever stop to think about what you're saying and whether the person you're talking to can actually understand it?

There's more to being a software engineer than coding. What people often underestimate are the so-called "soft skills" (the worst term for something that's really vital) - the way that you interact with others around you. In particular, how you communicate what you're doing to people with different skillsets.

Imagine you're in a standup and someone gives this update:

I'll synthesize the haptic DDR3 network, that should shut down the SDD capacitor!

This came straight from the brilliant Hollywood Jargon Generator, but to anyone who doesn't have as much technical experience as you, that might as well have been what you just said.

u wot m8

One of the best pieces of advice I ever got was from a tech lead who took all of the engineers aside after a standup where we'd been discussing how we were getting on with the new authentication flow we were writing. She told us to make sure we didn't go into too much technical detail in the standup, so that everyone could understand it. Sounds so simple, right?

We'd just spent ten minutes with the rest of the team - including our product manager and the marketing lead - and we'd been talking about refresh tokens and token expiry. It had meant absolutely nothing to several of the people there. The more we mentioned these arcane technical concepts, the less the rest of the team wanted to come along to standups because they felt it was irrelevant or above them in some way.

"But it's a standup!" I hear you cry. "You're only meant to give a quick high-level update anyway!"

You'd be surprised how easy it is to start talking in jargon without even realising for even the smallest of updates. Next time you give a standup update, ask yourself: if I weren't technical, would I know what I was talking about?

source: xkcd

How much technical detail do you really need to go into? If your standup tends to be "here's what I did yesterday and here's what I'm doing today", do you need to say:

We're still trying to get the auth service to store the user's refresh token in the database and check it against the incoming requests.

or can you just say

We're still trying to get authentication working in the backend.

To you the first example might look pretty easy to understand, but that's probably because you're an engineer. You know what a refresh token is. You know what a request is in this context. Non-technical folk probably knows what a database is, and what authentication is, but that's about it, and they've switched off by the end of the sentence. By keeping the technical detail to a minimum you'll be providing an update that the rest of the team understand, so they know what everyone's working on.

What about if there's a particular technical thing that's blocking you that you wanted to mention in standup? Either mention that you're generally blocked in the update and approach one of your fellow engineers afterwards, or maybe have a 5-minute dev-only standup after the main team standup where you can go into more technical detail.

Here's another example:

Some of our ElasticSearch nodes went down last night, it turns out we are still using the old cluster so we're going to migrate to the new cluster today.

vs.

Our search system went down last night, it turns out we're using an old server* so we're going to move it to the newer one today.

* I know this isn't technically the same thing, but to someone who doesn't know what a cluster is, it literally doesn't matter. You can go into more detail in the relevant dev standup/slack channel/coffee break.

Use real-world analogies

Keeping your language simple works for technical people too. If you're mentoring another engineer or helping someone work through a problem, being able to explain technical concepts in an easy-to-understand way and relating them to tangible concepts in the real world can really help others to learn from you. You'll find it a useful skill for giving talks - there's a real difference between "show me how" and "make me understand". For example, in a talk about redux-saga I used pictures of dogs to illustrate the library of effects it provides. In pretty much every object-oriented programming language tutorial there is some kind of Person or Car class to help you understand the concept of an object, and the tutorials about composition and inheritance usually talk about different species of animals.

With the auth token example, I told my team a story about a secret members' club involving an ever-changing secret handshake and a badge that let you learn the new secret handshake, which went down well and helped the others to get what we were trying to do, even though my product manager thought I was talking about a sex club.

Yeah, so we really need to reticulate the splines in our codebase

It's not just standups where this skill comes in handy: in your day-to-day role, explaining technical things clearly and simply might be the thing that convinces them why you should take a break from delivering new features to go back and tackle the mountain of tech debt that's been piling up:

We need to upgrade a lot of the packages, check for security vulnerabilities and replace a lot of deprecated code.

What does "deprecated" mean? What are packages in this context?

We've got some old code that needs updating because soon it won't work any more, and it might pose a security risk.

It sounds so basic, but to a non-engineer, that's all they need to know. They might ask some questions about what kind of risk it poses, or what "won't work any more" means, but it's a lot easier to follow.

Challenge yourself to keep it simple

It's not always easy to translate the hard stuff in easy terms, especially when you're working on things that involve kubernetes (true story). I still haven't found a good layman's explanation for what Docker does. But next time you're in a standup, listen carefully to what your fellow engineers say and then catch up with your other team members afterwards to ask if they followed everything. If they say yes, then you're fine, and you can just carry on as you were. But if they say no, consider getting your team to challenge themselves to deliver very simple standup for a a week. Make up ridiculous stories to illustrate migrating ElasticSearch clusters. At the end, ask those same people whether they feel like they know more about what you've been up to.

And if all else fails, there's my old favourite fallback:

Everything's slightly broken, but I'm working on making it not broken.

localghost

Stop generating, start thinking

“This is the Industrial Revolution of our time! It’s like mechanisation all over again.”

“LLMs are just another layer of abstraction, like higher level programming languages were to assembly.”

Our terrible code is the problem

Four eyes good, two eyes bad

I'm not anti-progress, I'm anti-hype

2025: The year in lists

The year in...

...furry friends

...retreating into my cave

...conferences

...gardening

...books

...music

...video games

...blog posts

That’s it for now

This website is for humans

Touching grass (and shrubs, and flowers, and dog)

Designing the front garden

Planting it up

Pelican Town's economy is safe for now

This page is under construction

But websites are for business... right?

But I still have fun on the web!

Sign in to view more

Unfollow

Internet of Slop

It wasn't supposed to be like this

The modern web is for consumers, not creators

Damn it, I'm in! Where do I sign up?

Appendix: look at these cool websites

The blog questions challenge

Why did you start blogging in the first place?

What platform are you using to manage your blog and why did you choose it? Have you blogged on other platforms before?

How do you write your posts? For example, in a local editing tool, or in a panel/dashboard that’s part of your blog?

When do you feel most inspired to write?

Do you publish immediately after writing, or do you let it simmer a bit as a draft?

What’s your favourite post on your blog?

Any future plans for your blog? Maybe a redesign, a move to another platform, or adding a new feature?

Who’s next?

Good links: 16 February 2025

Good links: 9 February 2025

My month of rest and relaxation

My month of re-evaluation

I repaired my Steam Deck and it was fine, actually

2024: The year in lists

The year in...

...big life things

...conferences

...gardening

...travel

...books

...podcasts

...music

...video games

...blog posts

...Christmas dinner

That’s it for now

Good links: 8 December 2024

Some things I've been enjoying recently (November 2024 edition)

TV

Food

Games

House

Craft

Art

Books

Garden

The art in everyday life

Good links: 22 September 2024

You should go to conferences

Buy your tickets early

Conferences need sponsors!

Some of my favourite smaller web conferences

UK

Europe

Rest of world

New garden theme

Mocking Node's native `fetch` with nock