Andy Bell

I’m unsubscribing from the AI discourse

Wed, 25 Feb 2026 10:24:57 GMT

I’m bored of hearing about it, bored of seeing people I respect(ed) fawn over it and it’s really not doing my mental health any good.

I’m going wait for the inevitable bubble burst and then be ready to help people burned by this harmful technology via Set.studio and Piccalilli. We’ve recently made our viewpoint very clear over there anyway.

How am I doing it?

Filters and mutes in Bluesky and Feedbin will do the job nicely for me I think because I don’t really listen to podcasts, I don’t really watch Youtube and I don’t really bother with Mastodon or Linkedin. I just wish I could mute words in Discord!

Anyway, let’s see if this helps my brain!

I listen to a lot of I Prevail

Tue, 03 Feb 2026 17:32:58 GMT

I only discovered them in July 2025 and I’ll let this last.fm chart do the rest to illustrate the point.

I think this chart sums me up as:

Anyway, I think they rip. They’re a bit cheesy, sure, but this record especially sounds massive, so if you’re into metalcore etc, give ’em a try.

Fun shadow coding challenge

Fri, 30 Jan 2026 12:11:42 GMT

Timehop just reminded me of this prototype I made 8 years ago. Scroll it and you’ll see that the central light source (orange line) affects the shadow.

CodePen Embed Fallback

CSS has come on a lot in those 8 years, so could you do better? Would love to see it, so let me know if you do.

It really is the year of the website

Thu, 29 Jan 2026 12:24:42 GMT

I keep talking about it so I’m finally doing it. You might be looking at my website right now, thinking “this looks a bit basic m8″ and you’d be right. It’s because I’m building this website in iterations. The version you see now is the “wireframe” shell version and there’s lots more versions to come.

Today, I’ve published the first post of a series on Piccalilli where I redesign and re-build this thing in the open. The hope is that it inspires you to build and maintain your own corner of the internet.

I’ve also been (borderline desperately) trying to think of something to write about in 2026. Doing more practical, building stuff is the direction I’ve landed on. It links back to what I was talking about in my end of year wrap up, in the Be human and improve your own skills section:

There’s been a bit of a culture of “I don’t need to bother doing that because of AI” and let me tell you — from someone who has been doing this stuff for nearly 20 years — that is a dangerous position to put yourself in. No single technology has surpassed the need for personal development and genuine human intelligence.

You should always be getting incrementally better at what you do. Now, what I am not saying is that you should be doing work work out of hours. You are not paid enough and frankly, the industry does not value you enough. Value yourself by investing your time in skills that make you happy and fulfilled.

In that section, I also say “make yourself, and maintain a personal website”. I’ve had a website for a long time, but I couldn’t really maintain it anymore because frankly, I build it with my elbows. The previous iteration served me well, sure, but I want something to learn the new stuff with, to enjoy working on and to embrace the art.

Me writing about that as I go is just the cherry on the top. I hope you’ll follow along as I do that! You can read the first post in the series here.

Wrapping up 2025 (sort of)

Fri, 19 Dec 2025 10:59:43 GMT

I’m doing my annual wrap up post early this year because I’m really tired and want to completely switch off for a couple of weeks. It’s time to spend some quality time with my lovely family.

This isn’t my usual style of wrap-up. Consider this wrap up more of a call to action than a retrospective. Let’s get stuck in.

World events

We’ve watched our western legacy media and politicians alike say, “nothing to see here” while Palestinians have been massacred by Israel. In fact, our government in the UK has persecuted supporters of Palestinian rights, some of which are still on hunger strike while they are held on remand, awaiting trial. This is on top of the government’s complicity in genocide of course.

We’ve also seen (only if you look) a horrifying genocide in Sudan that continues to decimate the population.

We’ve watched our pathetic politicians and again, legacy media give ground to the far right and thin-skinned Billionaires. There’s been ample opportunities to change that direction and it’s not been taken. Personal, party affiliation and corporate interests are prioritised, as always.

The mainstream political parties will not get us out of this. Give money and support to actual progressive parties. In the UK, the only valid choice is the Green Party as I see it.

If we don’t fight back in 2026 — regardless of your political party affiliation — we’re fucked. Sports team politics helps only the rich and there are more of us than them. Never forget that and stop being comfortable with the status quo.

There are more of us than them.

The tech industry and AI

AI — more accurately Large Language Models (LLMs) — are a disaster. Don’t come at me with your mealy-mouthed “but I really enjoy it.” Grow up and start being serious.

Over a trillion USD has been pumped into this technology that works only some of the time and literally drives people to the point of suicide. Here, I collected some awful things throughout the year. Sorry in advance for making you furious.

You’d think that people in the tech industry are smart and can see these problems and I wish I could agree. Instead we see sycophantic celebrations of this technology and continuing false claims that “this is the future” and “this is a game changer”.

I agree in part about the future — you can’t put the LLM toothpaste back in the tube — but the bubble is not going to stay inflated. It can’t possibly do that, and you’ll see that fact if you just listen to people who know what they are talking about.

We have to act against this technology to reduce the damage in the long term. It is our responsibility. It’s easy to call yourself an engineer but now, it’s time to actually be an engineer and act on your ethical responsibilities.

Here’s what I’m asking people to do to take the “shine” off LLMs in the tech industry:

Constantly and consistently post when it goes wrong. This could be on your blog or social media. Post anyway.
When people (especially people who are paid to peddle this technology) post claims: challenge them to provide evidence and prove their claims. It might sound harsh, but it’s long overdue that “thought leaders” in our industry are held to account for the effects of their influence.
Create a culture of shame for AI boosting.
Never forgive and especially never forget those who have boosted and vocally supported this technology. Unless there are consequences, we’ll continue to have hype cycles like crypto, NFTs and now, LLMs. We have the power to break the cycle of cycles in our vast numbers.
Stop paying for AI services.

Right now, it’s not a fair fight, especially as the vast majority of tech media appears to be “on side” with these AI companies. We have to change that as a collective unit. Support smaller, independent tech media and above all else, let’s organise.

Be human and improve your own skills

There’s been a bit of a culture of “I don’t need to bother doing that because of AI” and let me tell you — from someone who has been doing this stuff for nearly 20 years — that is a dangerous position to put yourself in. No single technology has surpassed the need for personal development and genuine human intelligence.

You should always be getting incrementally better at what you do. Now, what I am not saying is that you should be doing work work out of hours. You are not paid enough and frankly, the industry does not value you enough. Value yourself by investing your time in skills that make you happy and fulfilled.

Here’s some ideas:

Make yourself, and maintain a personal website
Make random stuff that makes you happy
Find a creative outlet that you really enjoy
Find other people’s creative outlets then celebrate and enjoy with them
Spend less time scrolling timelines and chasing metrics. Spend more time embracing the things that you love
Participate in smaller communities that bring you joy and support. Delete your Twitter account while you’re at it

I must be clear here too. When I say improve your skills, I’m not saying you have to be designing and coding. We are humans and we have vast levels of intelligence and creativity. Our purpose is much more than coding. Embrace that in whatever form you want. Embrace art.

By doing this, you’re bringing back your ability to be curious, your ability to be creative and your ability to improve. It’ll do wonders for the understandable feeling of helpfulness too.

Don’t fall into the trap of chasing metrics. Write because you want to write. Paint because you want to paint. Create because you want to create. Let the art fulfil you. Don’t let likes, follows and page views ruin that for you. Fight the urge to turn personal projects into a money making and/or clout chasing venture.

You should definitely do more designing, coding and learning to improve your professional skills, but it is your boss’s responsibility to give you the time and resources to improve those. If you are a boss reading this who doesn’t do that: you are wrong and your staff will leave unless you change that. “AI” won’t save you here.

I hope you have a restful holiday period. I want to thank everyone who has supported Piccalilli, Set Studio and my work this year. It means everything to me and next year, expect to see a lot more. I’ve written more about that in the Piccalilli year in review. It’s rosier, I promise.

Thank you to everyone that responded to my post on how hard this year has been too. I’m delighted to say that our Black Friday sales shot up and we’ve got some really good client work to get stuck into next year. To everyone I spoke to who’s also had a really hard year, I truly hope things have picked up for you too. Let’s all help and support each other in 2026, onwards.

Please make sure you rest up and spend time with the people you love and the people that make you happy. I know that’s what I’m going to be doing.

I’ve got a couple of Professional Obligations™ to do, then clocking off now for the year to enjoy the holidays with my family. Although I’m angry at the industry and the global situation, I feel like I’m in a much better headspace than I thought I would be in at this point. There have been lots of positives throughout the year, especially with Piccalilli.

Next year will be very different for me. I want to do more making. I design so little and write so little code now and I’m starting to feel really rusty. That changes in 2026. Less spreadsheets and more CSS.

I’m also going on a speaking hiatus with minimal conference attendance. The conference circuit won’t miss yet another white guy. I’ve done way too much this year, so a year off will do me good.

Anyway, let’s all come back in 2026 refreshed and take these motherfuckers down.

It’s been a very hard year

Thu, 27 Nov 2025 16:18:59 GMT

Unlike a lot of places in tech, my company, Set Studio/Piccalilli has no outside funding. Bootstrapped is what the LinkedIn people say, I think.

It’s been a hard year this year. A very hard year. I think a naive person would blame it all on the seemingly industry-wide attitude of “AI can just do this for us”. While that certainly hasn’t helped — as I see it — it’s been a hard year because of a combination of limping economies, tariffs, even more political instability and a severe cost of living crisis. It’s been a very similar year to 2020, in my opinion.

Why am I writing this? All of the above has had a really negative effect on us this year. Landing projects for Set Studio has been extremely difficult, especially as we won’t work on product marketing for AI stuff, from a moral standpoint, but the vast majority of enquiries have been for exactly that. Our reputation is everything, so being associated with that technology as it increasingly shows us what it really is, would be a terrible move for the long term. I wouldn’t personally be able to sleep knowing I’ve contributed to all of that, too.

What we do really well is produce websites and design systems that actually work for and with people. We also share our knowledge and experience via tonnes of free content on Piccalilli, funded by premium courses to keep the lights on. We don’t pepper our content with annoying adverts for companies you have no interest in.

I’ve spoken about my dream for us to run Piccalilli full time and heck, that may still happen. For that to happen though, we really needed this Black Friday period to do as well, if not better, as it did last year. So far, that’s not happening unfortunately, but there’s still time.

I get it, money is so tight this year and companies are seemingly not investing in staff with training budgets quite like they did. We actually tried to stem that a bit by trialing a community funding model earlier in the year that I outlined in ‌I’m getting fed up of making the rich, richer and we even started publishing some stuff.

It went down incredibly well, but when push came to shove, we fell way short in terms of funding support. Like I say, we’re not swimming in investor money, so without the support on Open Collective, as much as it hurt, we had to pull the plug. It’s a real shame — that would have been incredible — but again, I get it, money is tight.

This isn’t a woe is me post; that’s not how I roll. This is a post to give some context for what I’m going to ask next and how I’m trying to navigate the tough times. I’m asking folks to help us so we can try to help everyone, whether that’s with web projects that actually work for people or continuing to produce extremely high quality education material. Here’s some ways you can do it.

Take advantage of our Black Friday deals

You’ll see messaging like “this is the most important time of year for us” and it’s extremely true. To break the fourth wall slightly, people buying courses at full price is a lot rarer than you might think. So often, discount events are what keeps the lights on.

We’ve launched two courses this year — JavaScript for Everyone and Mindful Design — that sit alongside my course, Complete CSS, which we launched last year. I know you’ve probably been burned by shit courses in the past, but these three courses are far from that. I promise.

I can’t stress enough how much Mat (JavaScript for Everyone) and Scott (Mindful Design) have put in to these courses this year. These two are elite level individuals with incredible reputations and they’ve shared a seemingly impossible amount of extremely high quality knowledge in their courses. I would definitely recommend giving them your time and support because they really will transform you for the better. For bosses reading this, all three courses will pay themselves back ten-fold — especially when you take advantage of bulk discounts — trust me.

Share our courses and our studio with your network

So many of you have purchased courses already and I’m forever thankful for that. I can’t stand the term “social proof” but it works. People might be on the fence about grabbing a course, and seeing one of their peers talk about how good it was can be the difference.

You might think it’s not worth posting about the courses on social media but people do see it, especially on platforms like Bluesky with their custom feeds. We see it too!

Testimonials are always welcome because we can pop those on the course marketing pages, just like on mine.

In terms of sharing the studio, if you think we’re cool, post about it! It’s all about eyes and nice words. We’ll do the rest.

Hire Set Studio for projects

We’re really good at what we do! I know every studio/agency says this, but we’re different. We’re actually different.

We’re not going to charge you through the nose for substandard work — only deploying a fraction of our team, like a lot of agencies do. I set this studio up to be the antithesis of the way these — and I’ll say it out loud — charlatans operate.

Our whole focus is becoming your partners so you can do the — y’know — running of your business/organisation and we take the load off your shoulders. We’re hyper efficient and we fully own projects because they’re way above your normal duties. We get that. In fact, the most efficient way to get the most out of a studio like ours is to do exactly that.

I know “numbers goes up” is really important and yes, numbers definitely go up when we work with you. We do that without exploiting your users and customers too. There’s no deceptive patterns coming from us. We instead put everything into branding, messaging, content architecture and making everything extremely fast and accessible. That’s what makes the numbers go up for you.

We’re incredibly fairly priced too. We’re not in the business of charging ridiculous fees for our work. We’re only a small team, so our overheads are nothing compared to a lot of agencies. We carry your budgets a long way for you and genuinely give you more bang for your buck with an equitable pricing model.

We’ve got availability starting from the new year because starting projects in December is never the ideal way to do things. Getting those projects planned and ready to go is a good idea in December though, so get in touch!

I’m also slowly getting back into CSS and front-end consulting. I’ve helped some of the largest organisations and the smallest organisations, such as Harley-Davidson, the NHS and Google write better code and work better together. Again, starting in the new year I’ll have availability for consulting and engineering support. It might just be a touch more palatable than hiring the whole studio for you. Again, get in touch.

Wrapping up

I’m always transparent — maybe too transparent at times — but it’s really important for me to be honest. Man, we need more honesty.

It’s taken a lot of pride-swallowing to write this but I think it’s more important to be honest than to be unnecessarily proud. I know this will be read by someone else who’s finding the year hard, so if anything, I’m really glad they’ll feel seen at least.

Getting good leads is harder than ever, so I’d really appreciate people sharing this with their network. You’ll never regret recommending Piccalilli courses or Set Studio. In fact, you’ll look really good at what you do when we absolutely smash it out of the park.

Thanks for reading and if you’re also struggling, I’m sending as much strength your way as I can.

Happy one year anniversary to Complete CSS!

Wed, 26 Nov 2025 04:09:00 GMT

It was one year to the day that Complete CSS went live. It was Piccalilli’s debut course at the time. Now we have three courses.

Anyway, I just wanted to mark this moment and take another opportunity to thank everyone who has purchased Complete CSS. It’s changed everything for us and your continued support of Piccalilli unlocks even more good stuff in the future.

I got this feedback today and it sums up exactly what I’m trying to do with how I teach CSS. Maybe you can see yourself in it?

I would like to thank you for your work. I have been working with CSS for 20 years, but I never managed to put it together properly. I used Tailwind, but also other approaches when I was frustrated with CSS. Your course helped me a lot. Thank you very much for CUBE CSS, I am enjoying CSS again.

I’m so proud of how much the course, that I put so much into, has helped so many people. It makes it all worth doing.

I speak so often about the core skills (often called soft skills) that you learn in Complete CSS, but I thought I’d record a video on how quick it is to compose the homepage after we’ve built the whole CSS system. Enjoy!

Get the core right and the resilient code will follow

Mon, 10 Nov 2025 11:52:44 GMT

I delivered my talk for the last time at beyond tellerrand last week, so I thought I’d just mark it on my blog.

I did it first at ffconf in response to a chat Remy and I had, so it’s only right that the video comes from there.

Here’s my favourite image captured, from beyond tellerrand.

Photo by Florian Ziegler.

It’s been an absolute pleasure to tour this talk. Thanks so all the conferences and meet-ups who invited me to share it with their audiences. You’re the best. A special thanks to Remy for encouraging me to write it in the first place and deliver it at their legendary event.

The talk is based on three lessons of Complete CSS (which you can enjoy for free):

I was writing all of this material at the same time last year because I was truly obsessed. I’ve been doing this CSS thing for a long time now — nearly 20 years — and getting good at core skills far exceeds everything else. Let me show you how with this material.

Hope you enjoy the talk!

Complete CSS vs JavaScript for Everyone

Tue, 21 Oct 2025 11:07:46 GMT

Alright, we recently launched our second course on Piccalilli and it’s completely different to my course, Complete CSS. I just want to break down why I think that’s important, along with how you teach making a huge difference.

I like to say that when I’m teaching, it’s like when parents of young kids “hide” vegetables in food. You know how it is, kids don’t wanna eat a lot of vegetables because they don’t taste as good, so a well blended base sauce for their favourite bolognese with a few extras makes everyone happy.

I’m doing exactly that with Complete CSS. People think that to get better at CSS, you have to “master” the syntax and know all of the new features of the language. This helps, sure, but what makes you really good at writing good CSS in the real world is being able to effectively communicate with designers to simplify their initial concepts as a team.

I know this from the years I spent as a CSS consultant. So often, the work I did was all about fixing relationships in the teams I was working with and introducing planning and communication principles that would set them up for years. The result? Their CSS got better and better over time, which is fantastic. The overall design output was improved too, because of the principles of keeping things simple, while still having plenty of space to be creative too.

Moving along to how to be an effective JavaScript developer: it’s a different type of skill that you need to learn. JavaScript is a complicated and in a lot of ways, a messy language. We can’t change that either because rightly, JavaScript maintains its weaknesses because stuff written back in the 90s has to work right now. That’s the web, babey, and we love it for that.

With that in mind, to be a really effective JavaScript developer, regardless of your organisation’s choice of framework and flavour, you have to deeply understand why the language works like it does. In fact, that deep knowledge of the language — as we see it — will set you up for what is coming in our industry: a sizeable bubble burst. I wrote about that too.

So rather than hiding vegetables in your bolognese, Mat’s method of teaching is to lay everything out on the table for you instead. He’s showing you the weirdness, giving you the context for why that is, and outlining methods for you to navigate that weirdness in the real world.

The end goal is that when you come across issues in the future with your JavaScript code — which you will — that vast knowledge you’ve learned from JavaScript for Everyone will put you in a position of comfort. That comfortable position will ensure you can navigate problems in a much more pragmatic manner, rather than a panicked manner.

The thing is, JavaScript is not very exciting is it? I know a lot of front-end developers who would rather hide from it too, because learning it is such a chore. This is where Mat’s uniqueness comes in.

JavaScript is boring and it is dry, but Mat writes about it in a way that will have you grinning like a Cheshire Cat. He’s got a lot of personality and that really comes through in his writing. Don’t believe me? See for yourself.

I’m a designer by trade and my relationship with JavaScript has been “if I have to” for years. I read every single word of this course while I was editing it and honestly, my knowledge of JavaScript is unrecognisable. I’m so thankful to Mat for firstly, agreeing to publish with Piccalilli, but also, for finally delivering a resource that will help so many people finally get JavaScript.

Why bother learning JavaScript now that we have generative AI?

Fri, 17 Oct 2025 09:02:15 GMT

We, at Piccalilli, launched JavaScript for Everyone this week and a response to that from parts of the community could be paraphrased as “why bother learning JavaScript deeply now we have generative AI and LLMs?”

It’s a good question! You’d be forgiven for feeling like there’s no point now, but this post should help you understand our position, along with our codified principles on AI.

Piccalilli stands for — and forever will stand for — human produced educational content for humans.

Our industry is changing, constantly. The AI hype cycle poses an increasing risk to job security, and despite every promise otherwise, the output from AI code generators is failing to live up to the hype.

Deep knowledge and skills have never been more important though. Understanding JavaScript deeply will mean you’ll be the one that’s called upon to oversee and course correct the AI-generated output. When the AI bubble does pop, having a deep knowledge of how JavaScript works will put you in a strong position to command more compensation and better terms because you’ll be in the strongest position to fix the mess left behind by AI.

If anything, I hope this post makes you feel better if the constant AI discourse is getting you down. I’ll have done my job today if that’s the case.

I tell you what I want, what I really, really want

Tue, 26 Aug 2025 14:00:17 GMT

I just want an app for iPhone and Mac that:

Connects to Bluesky
Connects to Mastodon
Lets me post to both
Looks and feels good
Finds a way of not showing me cross-posts (when I’ve seen it, I’ve seen it)

I’ve tried OpenVibe and I’ll be honest, it’s cool, but the UI is not for me. Any ideas?

Choice is important with stuff like highlighting

Thu, 07 Aug 2025 10:10:45 GMT

I’m making some demos for an article and I wanted one of those smooth gradients. It’s still not quite possible with standard CSS, so I used this trusty resource.

I generated my gradient (truly who here hand-writes them) and wanted to grab the background property only.

🚨 Strobe warning

I can’t select text as it’s constantly trying to select everything. It results in this horrible strobing.

It’s a bit annoying this because I’ve already got some CSS. I just wanted the background. It’s why on Piccalilli we do code samples like this.

I have lots of choice in selecting text exactly how I want

It’s a nice progressive enhancement and we’re not getting in the way of what the user actually wants to do. You wanna copy a bit of the code? You’ve got it. You want the whole thing? You’ve also got it, here’s a button, but hey, you can also select it all if you want. Whatever works for you.

Whatever works for you.

I deleted Bluesky, Mastodon and LinkedIn off my phone

Mon, 28 Jul 2025 11:00:11 GMT

I’ve just come back from a nice week away in Cyprus with my family and to ensure I had a proper break I deleted Bluesky, Mastodon and LinkedIn off my phone with a view to putting them back on my return. I’m not gonna do that though.

LinkedIn is obviously a work thing and I’m not sure what I was thinking even having it on my phone, but Bluesky and Mastodon are very much work things for me now too. Mastodon probably always was but Bluesky — especially in 2023 during the beta period — was really fun. It’s naturally evolved and changed as it’s grown though.

I don’t dislike Bluesky, but I have been especially exhausted this year and Bluesky has not helped with that. A big part of that exhaustion is I’m never switched off. Work is always there. Sure, I’m making my own bed a bit with that, running my own business — which requires me to have a presence — but I should have guardrails for myself too. Sometimes a nice holiday reset is what’s needed to see that clearly.

The main take away is I didn’t miss Bluesky or Mastodon (I’d never miss LinkedIn lol). I deleted the apps from my phone to prevent the muscle memory of opening them, but when they weren’t there, I just didn’t really think about them. There’s only so much Discourse my simple brain can handle and I should only be dealing with that during work hours as I see it.

We’re aiming to run Piccalilli full time

Tue, 15 Jul 2025 12:15:11 GMT

Recently we ran a survey that turned out some interesting results. We decided to do the survey off the back of the success of redesigning Piccalilli last year and launching our first course. The response to all of that blew our mind (thank you).

We’re launching two more courses this year: JavaScript for Everyone and Mindful Design. We’re doing it right though with a fair share of profits for author and publisher, which is a rarity in publishing. Publishers often give authors less than 20% and make them promote their own work. We’re not about that here.

I think courses are going to be the main driver of keeping the lights on and pushing us towards full time work on Piccalilli. Now that we have a nice system for publishing courses, the velocity will of course increase. I’m also interested in hearing from people who like the idea of publishing a course (give me a shout).

What does full time effort look like in terms of output?

One of the most common qualitative bits of feedback on our survey we got was “I want to see more articles by Andy”, which first of all, thank you, but also, are you sure?! 😅

The biggest blocker to me writing more articles is time. Running an agency, running a publisher and curating a newsletter is very time consuming. As Piccalilli becomes more viable — financially — that would free up a lot of my time, which of course, I would put straight into writing more content (I’ve got so much I want to write). I’d quite like to explore video and streaming more too.

Stuff we could do with more time is:

More in-depth article series
Collaborations with other known names from the web
More content to help bring beginners into the industry
Resources to help people land new roles in the industry
Help designers get proficient with code
Explore some more journalistic content about our industry (already working on an AI in the workplace one)

Something else I’d quite like to do is index and categorise The Index and our link posts. With our current publishing frequency, we’re putting out two newsletter issues a week. Accounting for holidays and time off, that still sees us publishing nearly 100 issues and about 30 link posts a year. If we can index that and make it more searchable, I think it would be a really valuable resource for the community.

Speaking of search, yes we hear you, Piccalilli needs search, but to do search right takes a heck of a lot of time. It’ll come though when we have more time to work with.

How do we enable a full time effort?

It all comes down to money, I’m afraid. We’re a team of four with families and mortgages/rent to pay. We try to make as much as possible free on Piccalilli and will always do that without resorting to paywalls etc.

This is what we’re doing to try to shift the needle:

Publishing more courses (including short, cheaper ones)
Opening up our advertising offering a bit more, giving advertisers some better options
Launching merch
Exploring a job board
Open Collective

Some stuff hasn’t worked as well as we hoped. For example, our open working initiative was really well received initially, but has been wildly unpopular compared to the rest of our content. It accounts for < 4% of our total readership so far.

My theory on that is that until we actively work with progressive movements, we won’t get a huge amount of traction. I’m working hard to make that happen though, working with our local MP to link up with local initiatives that need the most help. Time + money is another blocker on that one though, as is almost always the case when you want to do good.

I know this can work. Just look at how well 404 media and The Onion are doing — both of which I’m a paid subscriber to and hugely look up to. There should be no problem doing good stuff and living too as I see it.

How you can help

Simply put, give us money lol. There’s a few ways you can do that without hurting your own pocket though:

Ask your boss to advertise with us
Ask your boss to grab you a copy of one of our courses (spend that sweet training budget and get bulk discounts)
Read and share our content
Subscribe to our newsletter
Get your org to donate to our Open Collective (spend that sweet marketing budget)

Times are really hard at the moment for everyone. I actually think 2025 is harder than 2020 so far and I know I’m not alone with that feeling.

There’s a reason publishers pepper their content with horrible ads though: it’s a means to sustaining themselves. I’ll never let that happen on Piccalilli because the reading experience is, and will always be, our top priority. Yes, we’re changing how ads display on the site in a soon to be released update to our article view, but it’ll always be tasteful.

I think the biggest impact you, the reader, could do to help though is make a small donation to our Open Collective. There’s a few different options including one-off tips, a monthly donation and a yearly donation.

At the end of the day, if we can keep the vast majority of our content free at the point of entry and publish a hell of a lot more of it, everyone is winner. You’re not ready for what Piccalilli could be with all four of us putting a full time effort into it, trust me…

This generous donation fills me with positivity and hope

Mon, 26 May 2025 10:29:50 GMT

It’s bloody scary setting up an Open Collective and hoping people will back you when you’re trying to do something tangibly good.

Stuff like this really fills me with hope.

Clan KN, I can’t find any way to contact you, so I’ll thank you here on my personal website.

If we hurt someone, their pain will not end just because we die. The same is true for the positive actions we take.

That’s a quote from your website and you’re doing exactly as advertised.

Let me tell you, your positive action — and unbelievably generous donation — will definitely last for me and the team forever. Thank you.

Enabling open working on Piccalilli with content collections

Wed, 14 May 2025 17:01:33 GMT

I said we’d work in the open and I mean it. This content is on my blog for now because I’m literally building the infrastructure on Piccalilli as we speak.

Let’s have a look at what’s happened prior to this point:

We’ve done some internal planning and strategy
I’ve populated our backlog with some stuff that needs doing to enable us to Post™
We’ve published an article that serves both to let people know what we’re up to and also, form a priority guide of sorts for the Projects landing page on Piccalilli

This clip shows the ticket I’m working from. The aim is:

Define some configuration of the content types
Refactor the existing configuration to create a sharedConfig
Make adjustments to the existing layout we use to render articles
Build out a shell for /projects and /projects/${slug} to better inform Jason, our designer

Today’s task

I’ve been working through points 1 and 2 from the ticket.

First up, I’m creating a coreConfig. This is what our Astro content collections config looked like before:

import { z, defineCollection } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    summary: z.string().optional(),
    author: z.string().optional(),
    image: z
      .object({
        url: z.string(),
        alt: z.string(),
      })
      .optional(),
    tags: z.array(z.string()),
    link: z.string().optional(),
    socialSummary: z.string().optional(),
    socialImage: z.string().optional(),
    series: z
      .object({
        name: z.string(),
        order: z.number(),
      })
      .optional(),
    surpressAuthorPromo: z.boolean().optional(),
  }),
});

const linksCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    summary: z.string().optional(),
    author: z.string().optional(),
    image: z
      .object({
        url: z.string(),
        alt: z.string(),
      })
      .optional(),
    link: z.string().optional(),
    socialSummary: z.string().optional(),
    socialImage: z.string().optional(),
  }),
});

const theIndexCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    summary: z.string().optional(),
    author: z.string().optional(),
    image: z
      .object({
        url: z.string(),
        alt: z.string(),
      })
      .optional(),
    socialSummary: z.string().optional(),
    socialImage: z.string().optional(),
    sponsorMessage: z.string().optional(),
    sponsorCTAURL: z.string().optional(),
    sponsorCTALabel: z.string().optional(),
  }),
});

const authorCollection = defineCollection({
  type: 'content',
  schema: z.object({
    name: z.string(),
    pubDate: z.date(),
    summary: z.string().optional(),
    socialSummary: z.string().optional(),
    company: z.string().optional(),
    language: z.string().optional(),
    links: z
      .array(
        z.object({
          name: z.string(),
          url: z.string(),
        })
      )
      .optional(),
    avatar: z
      .object({
        full: z.string(),
        scaled: z.string(),
      })
      .optional(),
    promo: z
      .object({
        heading: z.string(),
        summary: z.string(),
        buttonLabel: z.string(),
        buttonURL: z.string(),
      })
      .optional(),
  }),
});

const completeCssCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    author: z.string().optional(),
    course: z.string().optional(),
    module: z.string().optional(),
    lessonNumber: z.number().optional(),
  }),
});

const emailsCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    heading: z.string(),
    meta: z.string().optional(),
    pubDate: z.date().optional(),
    headingSize: z.enum(['extra-large', 'large']).optional(),
    promoBox: z
      .object({
        heading: z.string().optional(),
        content: z.string(),
        buttonLink: z.string().optional(),
        buttonLabel: z.string().optional(),
        hideAdvertiseLink: z.boolean().optional(),
      })
      .optional(),
    showUnsubscribeLink: z.boolean().optional(),
    closerContent: z.string().optional(),
    stream: z.string().optional(),
  }),
});

export const collections = {
  blog: blogCollection,
  links: linksCollection,
  'the-index': theIndexCollection,
  author: authorCollection,
  'complete-css': completeCssCollection,
  emails: emailsCollection,
};

I’ll not go into the detail of how this stuff works because Astro do a good job of that already, but in short, each object defines a data structure for each type of content on Piccalilli.

The last block — export const collections — sets the directory that contains .md and .mdx files and its value (the right side) is an assignment to a content collection configuration.

There’s a lot of repetition going on! Before I add more, I thought it would be a good idea to identify a shared set of configuration options that are used, mainly for blogCollection, linksCollection and theIndexCollection.

const coreConfig = {
  title: z.string(),
  pubDate: z.date(),
  summary: z.string().optional(),
  socialSummary: z.string().optional(),
  socialImage: z.string().optional(),
  author: z.string().optional(),
}

Now I can spread coreConfig in blogCollection, linksCollection and theIndexCollection. I can also spread it in the new collections.

This is a TypeScript project (don’t come at me), so a good idea is to build the site to make sure I haven’t broken anything.

Ah, as is tradition, I broke the build. It seems like we’ve got some loose querying going on, on the homepage.

const authorLink = post.data.link ? post.data.link : `/author/${generateSlug(authorName)}`;

return {
  id: post.id,
  url: `/${post.data.link ? 'links' : 'blog'}/${post.slug}`,
  title: post.data.title,
  summary: post.data.summary,
  author: { name: authorName, link: authorLink },
  date: post.data.pubDate,
  tag: post.data.tags ? { label: post.data.tags[0], link: `/category/${generateSlug(post.data.tags[0])}` } : undefined,
  directLink: post.data.link,
};

In that snippet, we’re generating props for a <PostList /> component. If it is a links post, we assign the canonical URL we are linking to as the author’s link because that author won’t exist in our system. For a normal post, we link to the authors page, like mine, for example.

Now, in these situations the temptation is to fix everything and let me tell ya, I felt the urge, but I also asked Leanne to give this little PR a review, so the last thing I want to be doing is adding more to that — especially introducing changes on something as important as the homepage!

It’s also a good idea to stay focused on the task at hand, so with that in mind, I made this decision:

I’ll bring link into the sharedConfig temporarily
I’ll raise a ticket in our refactoring backlog to clean up the querying, remove link from sharedConfig and put it back on linksCollection

// Shared core configuration for article-like content
const coreConfig = {
  title: z.string(),
  pubDate: z.date(),
  summary: z.string().optional(),
  socialSummary: z.string().optional(),
  socialImage: z.string().optional(),
  author: z.string().optional(),

  // This property is in the shared config because we use it to query between Blog and Links in areas such as the homepage popular feeds
  link: z.string().optional(),
};

Folks, always leave comments if you can. They’re useful for not just explaining code, but also, leaving a decision trail to give other developers context. I talk about that at length in Complete CSS as part of the important core skills that will improve you as a developer.

Adding the new collections

With the coreConfig set up and the project building again, we’re safe to proceed. Let’s start with the overarching Project structure first:

// The core pillar for each open working project which itself, has a page
const projectsCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    startDate: z.date(),
    endDate: z.date(),
    summary: z.string(),
    socialImage: z.string(), // For each post to inherit and itself when shared on social media
    featureImage: z.string(), // For rendering on the front-end
    currentSprint: z.string(), // E.G. Sprint 1: Discovery
    ID: z.string(), // So project posts can anchor to a project
  }),
});

There’s absolutely nothing optional here because this is — like my comment suggests — a content pillar. It’s a structure for posts to anchor themselves too. When a reader goes to /projects or /projects/${slug} this information will be surfaced. We can also surface it in project posts if we like.

Speaking of which, let’s define our project posts structure, utilising our fresh coreConfig:

// Each of these belongs in a project ☝️
const projectPostsCollection = defineCollection({
  type: 'content',
  schema: z.object({
    ...coreConfig,
    projectID: z.string(), // To reference a Project's ID field
    discipline: z.enum(['Strategy', 'Design', 'Development', 'Quality Assurance', 'Client Management']),
    videoURL: z.string().optional(),
    sprint: z.string(),
  }),
});

Project posts are almost identical to normal blog posts, but with a few extra fields like projectID, discipline, videoURL and sprint.

I was going to make a projectSprints a structure too for both projectPostsCollection and projectsCollection but it felt like I was creating busy work for us by over-abstracting. It’ll be totally acceptable to group posts by sprint, just like we do with module on completeCssCollection earlier in this post. As I see it, it’s a simpler, flatter approach, so it wins.

With these structures in place, all we have to do is add them to our collections object:

export const collections = {
  blog: blogCollection,
  links: linksCollection,
  'the-index': theIndexCollection,
  author: authorCollection,
  'complete-css': completeCssCollection,
  emails: emailsCollection,
  projects: projectsCollection,
  'project-posts': projectPostsCollection,
};

All projects content will be in our projects directory as mdx files and project posts will be in project-posts as mdx files. I’m still slightly unsure about this organisation strategy because I want the URLS for project posts to be projects/${postSlug}, but I’ll cross that bridge in the next part. I’ve not added any content yet, so it’ll be no biggie to edit the collections object, accordingly.

Open working is only possible thanks to the generous people that support Piccalilli on Open Collective. Please consider supporting us!

We launched a community supporters system for Piccalilli today

Tue, 13 May 2025 19:31:12 GMT

I’ve been talking about being fed up making the rich, richer on this blog recently.

We’ve started doing something about it, which I blogged about over on Piccalilli. I’d love you to read it.

I also Posted On The Work Account™ but here’s the thread again, on my blog…

We’ve helped so many companies grow since our studio started out, but we want to put our skills and experience to a different, more effective use.

It feels like a really important moment to actually fight back and it also feels like an important moment to focus on skilling people up to do that.

Help us supercharge progressive movements to fight back against mainstream hard right authoritarianism.

Help us provide high quality education to counter low quality, KPI-chasing AI slop and years of stagnation.

Let’s do something different as a community to stick it to the billionaires.

Set Studio was founded to give back as much — if not more — than it takes.

We know this account has been quiet, but we can’t wait to use it to show you what we’re up to, behind the scenes.

If this sounds good, maybe consider supporting us on Open Collective. You’ll be doing a lot to make it happen and I’ll personally love you forever.

Specifically for people that want to listen to vinyl on AirPlay/HomePods

Mon, 12 May 2025 19:59:11 GMT

This is a niche post for the dozens of us that listen to vinyl via AirPlay/HomePods.

I used Airchord for ages. It’s fantastic and very clever. I do find it cuts out quite a bit. I stumbled upon Quanta today and it works impeccably. It scrobbles to Last.FM too, somehow.

For £3, it’s a steal.

We’re looking for advertisers on Piccalilli

Tue, 29 Apr 2025 12:16:14 GMT

We quite recently set up advertising on Piccalilli, but explicitly not in the tracking users and polluting the reading experience sense.

I was (and am still not) comfortable with rolling ads because they have such a bad reputation — rightly. The problem is, running Piccalilli is not free, so the idea is that ads sustain the platform.

The main thing ads sustain — and what I want to hugely ramp up — is guest authors. We’ve had some absolutely top class content published on Piccalilli from genuine experts in the industry that have an unbelievable level of experience in design, development and even content design. If we can book up the ad slots, we can commission more experts to write content.

I feel like our restrictions on adverts — no tracking, no JavaScript and no images — probably kneecaps us a bit, but I won’t move from that position. The only important thing is that the reader has the best possible experience. If ads become antithetical to that, then they go. We’re already exploring alternatives anyway.

I do really want to make ads work in their current form though, so if you work at an organisation that advertises, why not give us a go? I know for a fact, the companies that have already advertised have been incredibly happy with the outcome and the biggest plus: you will be directly funding high quality education for the real world. A win-win!

We’ve got slots available from May for both the newsletter and the exclusive banner ads.

Advertise with Piccalilli.

I think I need to change my attitude towards webrings

Tue, 22 Apr 2025 19:38:30 GMT

I’ve always been a bit meh about webrings but I’ve noticed they’ve evolved a bit, like this one.

I clicked through to Ariel’s site because I knew she would have nailed the UI for that typically, footer-based nav. Imagine my surprise when I found this interesting alternative instead.

It’s really cool because I can see all the communities she’s in. I always presumed it was a one webring and done thing.

Anyway, I clicked “next” on the design systems webring and found this lush website by Eva.

She also deals with webrings in a really nice way. It’s such a simple yet effective way of discovering not just more sites, but more about what people are into, right off the bat.

Most importantly this is all on their websites that they crafted to be their own — in both Ariel and Eva’s case.

I think I need to change my attitude towards webrings basically.

Thanks for the positive responses

Wed, 16 Apr 2025 16:56:17 GMT

I’m absolutely blown away by the response to I’m getting fed up of making the rich, richer. It’s brought some real positive vibes my way, so thanks for that.

So many people have said they’ll back this sort of movement too, which I really appreciate. We’ve got so much work to do to get this stuff moving so I thought in the mean time, it might be a good idea for people behind this idea to get on a Piccalilli mailing list. That way, I can keep you up to date when stuff starts properly moving.

If you’re up for it, just pop your email in here. If you’ve not signed up for a Piccalilli newsletter before, you’ll have to confirm your email (to combat bots and scammers yay). Don’t be alarmed when you’re redirected to Piccalilli either. It’s just how the system works.

Again, thank you all so much. I really appreciate it.

I’m getting fed up of making the rich, richer

Tue, 15 Apr 2025 12:46:36 GMT

That heading is a perfect summary of where I’m at right now. I’ve been in a bit of a turmoil-driven thinking period recently and I can’t shake the thought that what I set Set Studio up for isn’t being truly fulfilled. I think I need to change that.

I always wanted the studio to do net good and give back as much — if not more — than it takes. The thing is, running a studio that supports staff is hard, so naturally, you take on projects that you might not fully be behind. We’ve done great work — and continue to do so — but collectively, we’re all a bit burned out with Marketing™ oriented and KPI-chasing work.

We’re very lucky that we still get opportunities to work with fantastic clients that truly understand what they’re about too. For example, we’re working with Lefroy Brooks right now and man, they know their stuff. They’re a joy to work with and most importantly, they respect the user, so are fully behind all of our efforts to make a website that truly works for everyone.

Clients like that are rare though. They’re really rare. Working with clients like Lefroy Brooks and Jamie Clarke — people that care so much for the web — has 100% contributed to my thinking recently because I’m constantly thinking “why can’t more clients be like this?” and I think they can when you approach things a bit differently.

I want to position Set Studio and Piccalilli with the following principles:

We share as much as we possibly can of the work we do and how we do it, resulting in us providing free — at the point of entry — real-world education material.
We focus our work on campaigns, movements and other efforts that bring tangible, progressive change to society.

Working in the open

I’ve forever been obsessed with sharing knowledge. It’s why I’ve blogged so relentlessly over the years because I feel a constant debt to a community that shared so much when I started out.

The thing is, when I started out around 2008, so much content was highly technical, long and hard to read. What you need to understand about me is I’m not academic. I’m only educated up to A-level in the UK and I scraped through that by the skin of my teeth. Because of that, I found highly technical content hard to understand.

Way back when I started, I stumbled across blogs like CSS-Tricks and immediately resonated with the writing style. It’s why I write like I do now — pretty much how I talk — because I am obsessed with my content being approachable to everyone.

I want to up the ante though. When we evolved Piccalilli last year, we partially worked in the open, in the form of a series of posts, sharing how we did it. I want us to push further than that though and do full projects in the open, sharing as much as we possibly can during all parts of the process.

First, we’re going to do an internal project in the open. It’s very likely going to be the redesign of the CUBE CSS website. There’s a couple of reasons for that:

We need to get used to the idea of sharing our agency work
Its content that will resonate with our current audience
Doing an internal project allows us to smooth out the edges

We’ve already explored some creative ideas like the below. We’ve got a head start, but we’ll go all the way to the start to show you the whole process.

We’re also doing a lot of branding related work for upcoming courses on Piccalilli, along with bringing series like Reality Check back into focus with a much more soft-skills and collaborative edge to help people develop their relationship with designer and developer colleagues, while also, producing great work. There’s a lot of content like that in my course, but that’s only open to people that can afford it. I’d love for us to invest more time in sharing that work to give people that real world education they so desperately want and make it free at the point of entry.

The next iteration of open working is we link up with UK-based progressive movements and develop them a world class web presence, for free. There’s so much money sloshing around in UK politics, but it’s in the wrong hands because it’s with the right-wing parties such as Reform and the Conservatives. They get funding from big business and billionaires because right-wing policies make them richer.

Progressive movements, however — and unsurprisingly — do not get anything near that sort of money. In fact, they don’t get money at all really. A lot of movements are run during out of work hours on top of people’s day jobs. Meanwhile, the right get funding, column inches and broadcast TV slop like GB News.

Also because of this lack of funding, a lot of the work progressive movements need to do on the web is cobbled together with free templates and is often, clunky. That’s no shade on them by the way, the web is increasingly complex, so getting even a modest website out there is hard.

What we want to equip these people with, is the tools that we’ve equipped for-profit clients with so successfully over the years. The thought is that will super-drive progressive movements to push the change we so desperately need.

We’re not out of the woods in the UK. Sure, we finally got away from 14 years of Tory rule — thanks in a huge part to tactical, progressive movements like The Movement Forward — but unless the incumbent Labour government deliver promised change, we’ll be back with our country being ripped apart by Reform and co, just like Trump and co are ripping the USA apart as we speak.

If our studio is behind movements that prevent that from happening, I’ll be unbelievably happy. We’ll finally be doing what we set out to do in the first place.

How does it all get funded though?

We’ve tried talking companies into funding progressive work and it’s almost always “how can this benefit our profit/brand/image though”? Like I said earlier, the rich fund the right because that keeps them rich.

I’m thinking down a different path. A more distributed path, I guess. My thought is we set up an Open Collective (or alternative, transparent platform) and fund this work from the community. That could be individuals and it could be companies that believe in progressive political movements, like the ones we want to produce work for.

The return? Progressive movements get an outstanding web presence and the web community gets genuine real world education as we design and build these web presences in the open.

At the end of the day, all I want is to live comfortably and support my family. The Set team are exactly the same. We’re not looking to Get Loaded™ and buy extremely tasteless Lamborghinis. We’ve all being doing this thing forever — 50+ years combined — and we’re at the point in our careers where we want our work to do as much good as possible, across the board.

The obsession with AI (and other vapourware) in our industry just depresses me, especially when there’s so much need for tech to be a vehicle for progressive progress. Increasingly the tech industry is doing the opposite: fuelling the hard-right — who coincidentally are very much using AI . The tech industry are also fuelling the reckless policymaking — and yeh, that’s depressing.

Update, 13th May 2025:

We’ve put a lot more into this and we are now accepting support from the community. We wrote about it over on Piccalilli and there’s now an Open Collective.

Thank you, everyone!

Cool bridging thing

Fri, 11 Apr 2025 19:39:33 GMT

There’s a cool service that bridges bluesky and mastodon accounts together called Bridgy Fed.

It’s pretty cool because you can interact with accounts across platforms, from the platform you’re happy in. That’s bluesky for me, personally, but I know a lot of folks are happy on mastodon. That’s great, we should all be happy, especially considering the horrors.

I dunno, it feels like a good idea that we do more of this. There’s loads of pals I miss who spend a lot of their time on mastodon. Let’s work out a way to link us all up again!

As an aside, I just put my url in the text box here. I then clicked a bluesky link thing and there’s a new looking account that’s auto posting from my site now.

Is this a comment system (that’s actually good) in the making?

Am I missing your country with our Purchasing Power Parity system

Thu, 10 Apr 2025 09:30:50 GMT

If you head over to Complete CSS and you’re in a country that we support for Purchasing Power Parity (PPP), you should see a discount code.

I think we’ve got the vast majority of them but I think we’re also missing some. If you normally get a PPP discount for courses and we’re not offering a PPP code to you, can you let me know? Much appreciated!

Shoptalk show

Mon, 31 Mar 2025 12:58:20 GMT

I was lucky enough to appear on the legendary Shoptalk Show podcast to talk client work, courses and Piccalilli. It’s been 5 years since I was last on it, so it was extra nice to speak with Chris and Dave again IRL.

Check it out!

They also put the episodes on Youtube now, so if you’re a Youtube podcast consumer:

Alright, let me tell you how to make good Yorkshire puddings

Sun, 30 Mar 2025 15:18:14 GMT

I’m from Yorkshire so this recipe is right, but so is yours if your Yorkshire puddings are good. There’s so many different ways and ratios. This one works really well for me.

You want to be making this batter at least an hour before you need it. Allowing it to rest at room temperature means it’ll be generating gas, which is what you want for them to rise.

Batter

1 egg makes 4 Yorkshire puddings.

Put your bowl or whatever you’re using on a scale and trace it back to 0g. This is our container for the rest of this recipe.

Crack your eggs into the container and take note of the weight. Let’s say it’s 120g for this example.

Now add 120g of plain flour to the container. The weight of the flour should match the weight of the eggs.

Your flour and eggs now weigh 240g. Add 240g of milk. The weight of the milk should match the weight of your flour and eggs combined.

Season with salt, pepper and rosemary.

I use a blender to combine it all because you need a really smooth batter. It will feel very wet when you combine it all and that is the correct consistency.

Now leave to rest for at least an hour if you can.

Cooking

Pre-heat your oven to as hot as it will go. Honestly, your oven has to be screaming hot.

Get your muffin tins or whatever contraption you’re using, put about 1/2 teaspoon of oil/dripping/fat in each slot, then put it all in your screaming hot oven for at least 10 mins. I use rapeseed oil because it has a higher smoke point, rather than animal fat which tends to not.

After 10 mins get the now screaming hot oil out. You need to move really fast, so it’ll be worth gently stirring your batter in advance.

As soon as the oil is out, pour your batter into even portions and put it back in the screaming hot oven.

DO NOT OPEN THE DOOR AGAIN UNTIL THEY ARE COOKED.

My oven goes up to about 260°C and it takes about 20 mins to cook Yorkshire puddings to my liking. Your times will vary, but what you’re looking for is the Yorkshire puddings to stop rising and be a nice golden-to-dark brown on the edges.

Only when they are cooked, do you open the oven or they’ll sink into sad little discs.

Enjoy!

5 years since the .NET Mag article

Fri, 28 Mar 2025 16:52:28 GMT

Man, I remembering this being a big deal for me. I was lucky enough to be in the last (I think) .NET Mag (pour one out) 5 years ago. Timehop reminded me earlier.

Screw it, here’s a transcribed version.

Meet the educator and web designer who’s helping the community via an astonishing array of side projects.

Could you briefly introduce yourself to anyone who doesn’t know you?

I’m Andy, an educator and web designer from the UK.

I’m trying to help people learn how to make high-performing, accessible and inclusive digital products and websites. I do this while also running a freelance design and development client-services business.

You’ve released a LOT of side projects to help the community: what drives you to do so and how do you find the time?

A lot of the time, these projects come from my own selfish need rather than trying to help the community.

It’s usually when I get part of the way through the project that I think, ‘Huh, maybe the community could really benefit from this. I’d better share it’.

A good example of this is my modern CSS reset (https://github.com/hankchizljaw/modern-css-reset), which spent so many years being tinkered with in private. Eventually, though, I gathered some folks might find it handy. Turns out they did!

In terms of finding time: I’m just one of those annoying, hyper-organised people that has a plan for everything. Everything is organised to the nth degree and related to that, I couldn’t recommend bullet journalling and Notion (notion.so) more if I tried.

To date, which of your tools has got most traction and why?

I think one of the most talked about tools was Hylia (https://hylia.website), which is an Eleventy starter kit.

It was something I wanted to make for a while because I saw a gap for a tool that anyone could use to publish their own content – even if they couldn’t code.

I also wanted it to be really modular and easy to extend, which I achieved with a straightforward Sass setup that is powered by design tokens. The combo of this and its ease-of-publishing seems to have gone down really well with the web community and beyond.

How is your screencast course, CSS From Scratch, coming along and why should people sign up to it?

Glad you asked. That course is actually being amalgamated into a bigger project that’s being put together at the moment: Piccalilli (https://piccalil.li). Piccalilli started life as a CSS newsletter but it’s evolving into a brand new project that will be focused on tutorials, articles and courses that I produce along with, of course, the newsletter.

Along with my other related project, Front-End Challenges Club (https://front-end-challenges.club), my focus is increasingly in education, which is exactly where I want to be.

What can we expect from you in the future?

Education is certainly taking a front seat. I’m hoping to release two or three courses this year, along with the rest of the Piccalilli tutorials and Front-End Challenges Club challenges. The aim is for education to be the primary part of my business, with making websites for clients, the secondary part. A complete flip from where it currently is.

We’re also going to be adding some cool stuff to Every Layout (https://every-layout.dev), including a potential print version. Lots of work to do on that front, though!

What else is exciting you most in the field of web design right now?

It’s got to be JAMstack. Very much related that, something that really excites me more than any tech or tools is that performance and accessibility seem to be getting a front-row seat, which I’m very much on board with.

Static site generators seem to be leading this charge and my favourite, Eleventy, is definitely doing great things to help people produce incredibly lightweight websites. I see a very bright, speedy future.

It’s quite amusing to read that back. I had way too much optimism in my ability to churn out courses lol. At least now I know hard and time consuming they are.

It’s also funny how the CSS From Scratch one did eventually come out. It just arrived as Learn CSS and Complete CSS, with a few years of more experience in there.

I like having a links page

Thu, 27 Mar 2025 11:22:08 GMT

You can do what you want with your website and that’s what I (try) to do, that’s for sure. I stuck a music collection in here because why not? Yeh I’ve got a blog and an about page — y’know, the usual stuff — but the thing I really like is my links page.

Everything is so fragmented now and long gone are the days when you’d just pop your Twitter (RIP) handle on a conference lanyard or slide deck. It’s much harder for people to find you now.

What I’ve started doing is putting swop.link/andy on my conference slides (it’s not a rickroll, I promise). That redirects you to my links page. All I have to do now is keep that thing up to date.

Because it’s my website and I can do what I want with it, I put work links, personal links and ways you can support me. It’s cool. Websites are cool.

Severance s2 finale

Tue, 25 Mar 2025 12:31:47 GMT

I’ve finally watched the finale of season 2 of Severance. I don’t want to spoil it for anyone, but I’ve got two sentences here that may or may not break your brain.

Spoilers, don’t open if you haven’t watched

At the end, it was Helena, not Helly.

Gemma has no idea Mark is severed, so she thinks Mark Scout is running off with Helena, not Mark S, who it actually is.

Anywho, bloody good TV, aye?

We redesigned the Set Studio website and refreshed The Index

Fri, 14 Mar 2025 13:51:39 GMT

I am bad at posting on my website, admittedly so I thought I’d just acknowledge some work we’ve done that I’m really proud of.

First up, we’ve completely rebranded and redesigned the Set Studio website. The much-loved industry-focused design worked really well for, well, The Industry™, but did not do us many favours in communicating what we’re good at to companies outside our bubble.

To combat that, we blocked out January and February this year to give the redesign 100% of our focus. It was slightly scary, not working on billable stuff, but we were never going to do the job that needed to be done otherwise.

I think now the site does a bloody good job of showing the impact we have had for other clients and demonstrating how Set Studio is not like other agencies — genuinely. I’m chuffed with it!

There was a pocket of time for myself and Jason to do some Piccalilli work in this period too and I immediately filled that with a design refresh of The Index — our newsletter. I think we’ve done a good job of that too. Instead of repeating the breakdown of that, I already posted about it on Piccalilli.

We also opened up advertising on Piccalilli which has take months of deliberation and thinking to make sure we do well for everyone: companies and most importantly, readers. I think we managed to get that balance pretty much spot on. I hope so anyway because its success will unlock loads of good.

I just want to note how proud I am of the Set Studio/Piccalilli team. I’m v lucky.

And now…we’re hitting some really interesting client work, head-on 🙂

Love newsletters? You’re gonna love RSS

Sat, 08 Feb 2025 09:56:42 GMT

I love newsletters. They feel intimate, focused and I love reading them, especially on a weekend like today.

The problem with newsletters is they can clog up your inbox. Your inbox is often a source of stress too. That’s certainly true for me.

There is another option though: RSS. It’s been around forever and a lot of newsletters offer an RSS feed along with the ability to subscribe by email.

I curate The Index — Piccalilli’s newsletter — which is web first. That was really important to me when we set it up — originally as a Set Studio newsletter — because I wanted it to be as accessible as possible to everyone. I’m not one for vendor lock-in.

How can I use RSS feeds?

You’re gonna need to get yourself an RSS reader: a bit of software that takes those feeds and shows you new content to read.

Some free options (that I’m aware of) are Feedly, Newsblur and Inoreader. They’ll be a great entry point for you.

I personally use a paid option — Feedbin — which is quite possibly one of my favourite pieces of software. It’s great because not only can you subscribe to RSS feeds, but you can also subscribe to email newsletters because it gives you an email address that points at your reader. I do this because it helps the publishers. They need those sweet subscriber counts so they can attract sponsors/advertisers to sustain themselves. There’s more info on that stuff here by Stuart.

Feedbin also works well with other apps like NetNewsWire and a nice handful here.

RSS readers aren’t limited to newsletters and blogs either. You can subscribe to a lot of websites — most news publishers offer RSS feeds — and curate your own little digital garden. Defederated social media services like Bluesky and Mastodon provide RSS feeds for profiles too (add /rss to the end of a profile URL on Bluesky and .rss on Mastodon), so again, you can use these to curate your own digital garden.

There’s a lot of doom and gloom, especially now. Try to create a space for you on the web with RSS and I promise, you’ll love it. My advice is go slow and subscribe to stuff you love and when you don’t love it anymore, or the velocity of content from a source gets too much: unsubscribe. I’d stay away from importing someone else’s list of feeds. It’s why I don’t share mine! It’s your digital garden after all.

Just a big ol’ markdown file

Thu, 06 Feb 2025 11:42:36 GMT

Do you know what I want — what I really really want? A little shortcut on my phone and Mac on the share sheet that does the following: prompt me for a title and a description, smoosh all that together and give me the following:

## [title here](link url)

description here

The dream scenario then would be that it prepends it to a big ol’ markdown file — ideally in Obsidian — but I’d also take a file in a GitHub repo.

“Why?” they scream

I curate The Index newsletter for Piccalilli and each issue is — you guessed it — a big ol’ markdown file. Right now, I store links in a Notion database (👎) and then twice a week, I rifle through them and write a description for each link I select.

That’s fine, sure, but it would be so much better if I wrote that description right after I’d read the article or stumbled across a Cool Thing On The Internet™.

There’s a real problem: I am not smart, actually. Sure, I write CSS pretty good, but this sorta file based stuff is beyond my skillset. I do have a burning desire to get away from Notion too. It’s fine for client work stuff at the studio, but I really yearn to keep things simple as much as possible, especially when I’m sitting back and catching up on my RSS feeds.

Any ideas are welcome. Give me a shout.

Wrapping up 2024

Tue, 31 Dec 2024 17:00:56 GMT

I’ve just read last year’s wrap up and it made me quite sad. I really was in a rough spot, mentally. What makes me the most sad though is I couldn’t honestly tell you I’m in a much better place. Things are on the up though.

I don’t really have a will to sit here and write a wrap up post either this year, but it’s a really important way for me to close the door on one year and open the door to a new one, so with that in mind, let’s look at this year, shall we?

Work

That’s what you’re here for, so let’s start there. It’s been a mixed bag this year.

First of all, I did indeed produce a CSS course, as promised. The process of producing it has absolutely killed me, but I’d say it’s probably the best work I’ve done in this industry. The combined effort of the Set Studio team to hit a very hard internal deadline — the hardest thing to achieve — was top class too.

For so many years, I’ve had this fragmented set of advice, methodologies and strategies which producing a course has allowed me to finally codify into something neat and tidy. It’s been written in a way that I hope, will see it age well too.

The focus of the course is CSS, but what I really wanted to do — and what I’m confident I have achieved — is teach the importance of soft skills. I’m so into soft skills that I call them “core skills” and if I were to summarise Complete CSS, I’d say it pushes your abilities as a developer way beyond what a strictly technical course would do because everything is centred around using core skills to simplify things, which in turn results in better code while also, opening doors to career progression.

Producing a course has come at a cost though. I near enough vanished from my actual job at points — running Set Studio — and it’s definitely negatively affected things and the people who work there. I feel unbelievably guilty for putting so much onto the team and allowing stuff to slip because of that. Thankfully, I won’t be producing a big course like that again!

The course — and the bespoke system we built — was a necessary thing to do though because producing courses with Piccalilli is going to allow us to specialise on what we do best as an agency: helping good organisations grow by hyper-focusing on everything user-facing. Sure, we’ve always done that, but we’ve also had to do corporate work and back-end/integration work too, which has drained the life out of us. The problem is, that stuff pays. Having the passive revenue from courses really takes the pressure off and lets us focus on what we do best. I really want us to partner with other agencies that specialise in the back-end and integration stuff in the new year because that combined skillset will only benefit clients, as I see it.

Speaking of clients, it’s still rough out there in client services, but it’s getting incrementally better. Another reason for us setting up a course system on Piccalilli was to help other independents suffering from the struggles, rightly get paid fairly for their work. We’ve already started the groundwork with a couple of extremely talented educators. More on that next year 👀

All-in-all though, it’s been great to get Piccalilli up and running again, while also completely redesigning it — hopefully showcasing what we’re made of. We’ve put a lot of work into that thing this year and I couldn’t be prouder of the team for pulling it off.

Hobbies

It’s been a quiet year for hobbies. I’ve worked too fucken hard and on the evenings, I’ve been too damn tired, so we’ve just rotted on the couch watching TV and films, so not much to report on that front.

I’ve also not been to the gym all year, which is really poor form for me. I’m really feeling that at the moment too. I’ll add that to my resolutions to get back to the level of fitness I was at, at the start of last year.

I’ve also had a bad year in terms of collecting music, only adding 2 records to the collection. Again, I want to improve that next year and spend a lot less time with streaming services.

Resolutions

Let’s see how I did on my 2024 resolutions:

Aim to double the team at Set Studio: I don’t know what I was thinking making this a resolution. We work really well as a small, tight-knit team, so that’s how we’ll stay until we need to hire.
Release a course: ✅
Get back to being a prolific writer and content creator: Not quite prolific, but I’ve written north of 120k words — if not more when you account for newsletters etc — this year which I’m happy with.
Try to be calmer about finance (working class upbringing never rubs off): It’s been a tough transition but I’d class this as half a ✅
Quit nicotine: produce a course and quit nicotine? Lmao, on to next year instead

Here’s my 2025 resolutions:

Facilitate a complete redesign of Set Studio’s brand and messaging that shows what we’re very good at and what a huge impact we’ve had on clients already
Actually quit nicotine
Release two courses for other authors on Piccalilli
More hobbies, less overworking
Sort my overall fitness and strength

Wrapping up

In terms of achievement it’s been a good year, but I don’t feel amazing about it. Maybe it’s just exhaustion from overworking at this point. I’m not gonna sit here and say “2025 is going to be the year”, but, I am going into the new year with a mindset change for sure. I’ve let apathy take the wheel too much and even though our industry triggers a lot of that, there’s a lot of good happening too. I need to remember that more.

I want to wrap up thanking everyone who worked with Set Studio, who purchased Complete CSS and who read content on Piccalilli. Your support is appreciated more than you could ever realise. What I can say is there’s a lot more coming next year — especially in the case of Piccalilli. 2024 really was the beginning of the future on that platform.

I hope you, dear reader, have a great remaining holiday period and I’ll catch you in 2025 👋

I wrote a course, but it’s so much more than that

Fri, 29 Nov 2024 15:09:11 GMT

This week, I published Complete CSS. After 15+ years of teaching, architecting and delivering CSS for global organisations and startups, I’ve collated that experience into an extensive course. It’s been by far the biggest piece of work I’ve — sorry, we’ve — ever delivered in this industry and I just wanted to acknowledge that for a second on this personal website of mine.

It’s not just a course about writing CSS. In fact, this part is the most important part:

You can spend all the time in the world focussing purely on your CSS knowledge, however, top level front-end development is about so much more than just writing code. It’s about communication, planning and pragmatic execution. I’m going to teach you these fundamental core skills — often described as “soft skills” — which will push you beyond the next level.

Nailing my core skills was undoubtedly the most valuable thing I did for my professional career. I think it helps that I’m not a typical developer too; I actually wanted to be a musician and worked in kitchens, suit shops, high fashion retail before eventually, slinging websites. I think I developed a lot of my communication skills away from the web, so I wanted to make that a real focal point of my course content because a lot of people who will read it will have only been developers.

As I say in the Giving and receiving feedback lesson:

…core skills like communication are crucial in writing better HTML, CSS and JS. You might be thinking “how though?!”, which to be fair, is understandable. Allow me to change your perspective. By nailing communication you will by proxy, simplify and sanitise design work. This results in simpler code, which is what we should always be aiming for.

I’ve spent a large chunk of those 15 years as a consultant, helping organisations — both global corporations and small startups — write better CSS. In almost every case an improvement of the organisation’s core skills were the overarching difference in output.

This is more than just a course

I actually managed to turn this content concept into three things: a workshop, a talk and eventually a course. This was a very deliberate decision because I knew I could keep refining the content as I went through each process. I’m so glad all three were all tangibly related to each other in the end. Feels like a heck of an achievement, if you will allow me to give myself the smallest of pats on the back.

Also, this year at Set Studio, we put the foundations down to turn Piccalilli into a proper publisher. That process started with a re-platforming, which led to a small design iteration, which led to a full redesign, which eventually led to us publishing a course. It’s all about iteration in our shop.

The Set Studio team mascot

Where we are now with Piccalilli is our foundation to blast forward and really get behind other authors and help them to publish their material, and earn fairly by doing so. A lot of publishers give paltry royalty rates while also expecting authors to lead the promotion of the material they wrote. It’s not fair and we want to make a difference by doing the exact opposite.

We decided to publish my course first though, for a couple of reasons:

We could be scrappy and iterate fast with me writing the material, rather than stressing out another author
I had one big course in me that I’ve wanted to publish for a few years and now felt like the right time

This is my third course now so I’ve got enough experience to be able to adapt. I didn’t need to do that though because the Set team are frankly, geniuses. I’ve never felt more supported during a huge body of work. In fact, I felt super-charged by their endless talent. I wrote the words, but they made it look and feel excellent. (Thank you again, Leanne, Vicky and Jason. You’re the best team.)

We want other authors to experience what happens when you get a team like Set Studio behind you too. We’ve only scratched the surface of what’s possible with my course and the way we’ve built this system means that authors can produce material in almost any format you can imagine. The highly themeable system that powers the Piccalilli UI also allows us to have a completely bespoke look and feel for each course.

This is the bit I’m really excited about. Sure, I feel so proud of myself for delivering this course, but what I will take the most enjoyment out of is being an author’s wingman and pushing them further than they thought they could ever go.

Piccalilli isn’t recognisable from where it was last year. Just wait until you see what we do with it in 2025. The best way to support that? Get a copy of Complete CSS.

Just use fucking paper, man

Tue, 27 Aug 2024 13:11:36 GMT

I’ve tried Notion, Obsidian, Things, Apple Reminders, Apple Notes, Jotter and endless other tools to keep me organised and sure, Notion has stuck around the most because we use it for client stuff, but for todo lists, all of the above are way too complicated.

I’ve given up this week and gone back to paper and a pencil and I feel unbelievably organised and flexible, day-to-day. It’s because it’s simple. There’s nothing fancy. No fancy pen or anything like that either. Just a notebook and a pencil.

I’m in an ultra busy period right now so for future me when you inevitably get back to this situation: just. use. fucking. paper.

Update: November 13, 2024. I got a remarkable but the same principles apply!

Hi everyone I messed up my social accounts again

Fri, 26 Jul 2024 15:07:51 GMT

I am not good actually at this social media thing so messed up my accounts, moving stuff around for piccalilli.

Anywho, this is where we’re at. My mastodon account is messed up. If we’re mutuals I am either following you or you are following me and very likely, not at the same time lol. Sorry about that, but yeh, let’s fix it!

Bluesky is all good and you know what, I’m actually using it some more.

I’m not bothering with threads or linkedin right now. Twitter is, well, Twitter. Piccalilli is still postin’ there but after using Twitter for the general election, my brain is fully rotted, so I won’t be there much either.

Regardless, here’s my links.

Lots of love,
Andy

14 ways to supercharge your workflow with AI

Wed, 14 Feb 2024 13:21:31 GMT

Wrapping up 2023

Sun, 31 Dec 2023 15:33:46 GMT

2023 has been as I predicted: unsettled and tense. It’s why I set this as my only resolution:

Focus on building foundations and going slow. Move deliberately and end the year happy and healthy, ready to kick on in 2024.

I think I’ve done that but damn, it’s been a tough year.

Mental wellbeing

I’ve quietly struggled this year. I’ve been fighting burnout for about half of the year — something I’ve unfortunately been prone to for nearly a decade.

The trigger was getting caught up in a climate disaster in July. It really fucked me up mentally and the resulting PTSD for me and my family triggered a burnout flare-up.

I think I’m mostly fine now — thanks to a proper relaxing Xmas break and working on resolving it in the latter months of the year — but I’ll step into the new year cautiously and focus on things that make me feel good about myself.

Work

It’s been a hard year to work in client services. It’s definitely been the slowest in terms of enquiries, but I’ve not really panicked because it seems to be a shared experience across the industry. It has been super stressful though at times.

This year has been a foundation setting year anyway, which has gone exactly to plan. Set Studio has chugged along nice and smoothly. In fact, it’s flourished thanks to the amazing people that I’m lucky to have working there.

We’ve hired another person: Jason, who is a designer. It’s going to be a game changing hire for me because he’s stepping up to do a lot of the strategy work I do with clients, which frees me up to do more production work. The combination of Leanne and Jason is going to be unreal in the new year too. They’re both outrageously talented people.

Liridon, the junior developer — who this time last year, had not written a single line of code — has come on really well. He’s now on client work full time too. This year will be a crucial year for him and I’m looking forward to helping him improve. I don’t think I’ll be training up a developer from scratch again though. It’s been great, but really tough.

A key factor in my burnout this year has been my lack of actually making things. I’m changing my role in the company because of that and will be hiring an account manager of sorts to free me up from the day-to-day client comms stuff and fuckin’ spreadsheets. Instead, I actually am going to be producing lots of content (I mean it this year lol). Piccalilli is coming back and friends, I will be producing a new CSS course in 2024, along with a workshop. I’d quite like to write a new talk too, so hit me up, conference pals.

All of this content is going to be about being a better CSS developer in real life with a view to levelling you up, unrecognisably, and importantly, getting you paid more. I see a shift in CSS in the real world, in terms of technology, but also away from certain methodology/framework choices. The industry is maturing with the language and I want to share my experience and knowledge to help y’all with that transition.

Embarking on a course is daunting — especially coming out of burnout — but I’ve got plenty of experience now, so I’m also feeling pretty damn confident about it. The studio is re-designing the CUBE CSS site, so that’s going to give me a chance to warm up, as it were, with writing properly again.

I also see a gap in publications. CSS-Tricks is done now, and unfortunately, been abandoned. A List Apart has seemingly experienced the same too. At least Smashing is flourishing, but there’s a hole that’s been left by CSS-Tricks especially and I think I might know how to fill it. More on that as the year progresses.

Hobbies

I’ve really enjoyed gaming this year. I wanna give Zelda Tears of the Kingdom a shout out. It’s almost certainly the best game I’ve ever played and it’s helped me through a rough year. Also, I treated myself to the remake of Link’s Awakening. I bloody loved that game as a kid and it was great to complete it again in its beautifully remastered form.

Music-wise, I’m not sure this year has been one of the greats, but I’ve listened to loads. I’ll write about that when my last.fm “wrapped” lands tomorrow.

Resolutions

Aim to double the team at Set Studio
Release a course
Get back to being a prolific writer and content creator
Try to be calmer about finance (working class upbringing never rubs off)
Quit nicotine

It’s quite an ambitious list, but I feel like I can smash it.

Wrapping up

I’ve limped to the finish line of 2023 but I’m in a good place at the end. I feel like 2024 could be a banger for me, so I’m rested, refreshed and ready to take it head-on.

I hope you all have a happy, healthy 2024 💜

I’m looking for CUBE CSS quotes, logos and showcase

Tue, 05 Dec 2023 13:47:19 GMT

We’re redesigning the CUBE CSS site in the studio and I’m on a data gathering mission!

I’d love to hear from you if:

You’ve ever posted about CUBE CSS or have something you’d like to say about it that we can cite on the website
Your company has used CUBE CSS and wouldn’t mind us using the logo on our site
You and/or your team have built a site with CUBE and you’d love to show it off on our showcase

The most efficient way to reach me is via email: andy@set.studio, but you can find me all over the web here.

Thank you!

My Company is 5 today!

Wed, 29 Nov 2023 13:07:17 GMT

Half a decade ago today, I incorporated my business. I thought it would be rude not to acknowledge it on the ol’ blog.

So much has happened in the last 5 years in my company including:

Surviving a pandemic
Surviving market downturns
Thriving in 2023 while the tech industry collapsed on itself

Set Studio is going from strength to strength and I’m so proud of everyone involved, especially Leanne, Jason and Liridon: the all-star team we have. A huge thanks to everyone that’s supported the company over the years too. You know who you are 💜

What’s the next 5 years look like?

Steady, slow and sustainable growth is what I’m always shooting for. It’s how we’ve survived the last 5 years. I do want to push a bit harder in 2024 though and try to double the size of the team. I also want us to produce truly industry-leading work and for Set Studio to be the agency everyone wants to work with.

We’ve certainly got the skills to do that — I just need to find us clients that will give us the context to really show what we’re made of. We’re also dipping our toes into more educational stuff too.

On to the next 5 years!

2024, the year of CSS education

Wed, 22 Nov 2023 09:21:58 GMT

I’ve had [checks notes] around a year off from writing CSS education stuff. In fact, Learn CSS is over 2 years old at this point. Every Layout is over 4 years old 🫥

Sure, I’ve done a couple of articles here and there, but it’s about time I got stuck into something chunky again.

Here’s some stuff that’s coming up in 2024:

I’m doing a SmashingConf workshop: Scalable CSS Masterclass
I’m working right now on a brand new course, again, about producing better CSS in the real world
I’m working on a talk — you guessed it — on the same thing

CUBE is getting new shoes

We’re redesigning the CUBE CSS site at Set Studio in 2024 and we want to hear from you, regardless of whether you’re an avid CUBE CSS fan or have never even considered authoring your CSS with CUBE CSS.

The aim is to produce something truly special that will help everyone write better CSS, so a few minutes of your time to complete our survey could have a huge impact. You can see that survey here.

How you can help me produce better content

I’ve been doing this thing a long time and have seen a lot of stuff in those long years, so I’ve developed plenty of strategies to improve CSS authoring based on that.

What I would like to hear about though is what you find tough, writing CSS in the real world. I’m always open to getting emails at andy@set.studio or you can reach me in various other places, linked up here.

Wrapping up

I’ve already got started writing, but the difference is this time, I’ve got the support of the amazing staff at Set Studio. Trust me, you’re gonna be mind blown at the ideas we already have for all of the above. It’s just down to me to write content that matches the quality of the platforms and design treats the Set gang are working on.

If you want me to speak at your conference too, drop me an email: andy@set.studio

Time to get cracking ✍️

New CSS workshop coming in May 2024

Wed, 08 Nov 2023 11:16:24 GMT

I’m delighted to share that I’m going to be joining my good friends at Smashing to deliver a new workshop: Scalable CSS Masterclass.

CSS doesn’t scale right? I can tell you that’s not true. How do I know?

Well, over the last 15 years or so, I’ve written and consulted on both small CSS codebases and huge, complex codebases for some of the largest organisations in the world, such as Google, Harley-Davidson and the NHS.

I’ve seen it all: Sass, Less, methodologies, frameworks, Tailwind and CSS-in-JS. While each of these has brought both positives and negatives, there’s one core thing that’s brought success every time: planning, communication and writing CSS that leans into the power of the language, rather than fighting it.

In this workshop, we’re going to be operating in a real-world project, featuring tricky stakeholders, suboptimal design decisions and workplace drama.

I’ll teach you not just how to deal with these tricky situations, but also, how to thrive in them! You’ll learn communication skills, planning skills, iteration skills and of course loads of CSS skills.

It’ll be a relaxed, fun workshop, which I know if you have even a mild interest in skilling up as a developer, you will love.

I can’t wait to see you there in May 2024!

Enroll here: https://smashingconf.com/online-workshops/workshops/scalable-css-andy-bell/

How I’m using the fragments of social media now

Fri, 03 Nov 2023 09:39:08 GMT

It’s been over a year since Elon Musk started the process of dismantling Twitter, which has resulted in lots of fragmentation. It’s also resulted in new platforms arriving and some even disappearing (cya later T2/Pebble).

I think I’ve found the perfect balance, which I guess is an evolution of the holy trinity.

Mastodon

For work stuff, Mastodon is where it is at. A lot of the good tech world has seemingly settled there now and thanks to Ivory as my client, I’m really happy there now.

There was a period where Mastodon was definitely giving me the ick, but that seems to be improving now, too. I guess that’s related to there being a lot less policing going on, so if that put you off before, maybe give it another look?

Find me at @andy@bell.bz

Bluesky

This place is where I get my LOLs from. Mastodon is still mostly a humourless void and to be honest, it’s nice to not read about tech stuff too. Bluesky is definitely the place I go when I just wanna scroll and enjoy the posts. In fact, I actively curate my feeds and mute tech stuff to not see it at all on there at all.

There’s a fair bit of Twitter-like drama on there, but it’s also been very useful at keeping up with current affairs — especially the horrendous situation in Gaza.

Find me at @bell.bz

Threads

I don’t really care for Threads right now, but I feel like in the longer term it could be good for following sports stuff when they improve real-time content. Other than that, it’s unseasoned chicken: bland. There’s way too many brands on there still too.

Find me at @belldotbz

Extremely office-hours only, but I’m getting a little more active there. I still can’t bring myself to read the timeline on there though. Way too much broetry.

Find me here

Twitter

lmao

Half a decade since I went independent again

Tue, 31 Oct 2023 10:20:16 GMT

It’s a special milestone for me today. After months of being ground down by hiring processes — thanks to the agency I was working for, going out of business — I had a sudden realisation that I could go back to freelancing. In fact, it felt like the most secure option and still does. Especially with the tech industry fully pulling its own pants down this year.

A client that worked with our agency still had no one to look after them, so I reached out as a potential freelancer. They bit my hand off and 24 hours later, on October 31 2018, they signed a contract and I was back working for myself. The funny thing was, the first day as a freelancer, I was working on the same CSS file I was the day before as an employee.

I’d always been happiest in this industry working for myself, but it was slightly more stressful this time around because our second kid had just been born. In fact, my previous employers told me their company had failed 48 hours before she was born, which as you can imagine, was hell.

The stress has hugely paid off though. In these 5 short years, I’ve:

Written two courses
Co-wrote a book
Published a CSS methodology
Guest lectured at the local university
Worked with loads of fantastic clients
Delivered plenty of talks, keynotes and workshops, both nationally and internationally
Worked with some of the best people and companies in our industry
Founded an agency which is going really strong

It’s been by far, the best 5 years of a 15 year career and I can’t wait to see what happens in the next 5 years.

I just want to say a huge thank you to everyone who has made the last 5 years possible. Especially those who’ve hired me or Set Studio, or who bought Every Layout or Learn Eleventy From Scratch (when it was paid-for). You folks really are the best.

Stay tuned because the next 5 years of Set Studio — I hope — are going to be truly special.

A (more) Modern CSS Reset

Mon, 18 Sep 2023 16:21:20 GMT

I wrote A Modern CSS Reset almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version.

I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want!

To be super clear, this is a reset that works for me, personally and us at Set Studio. Whenever I refer to “we”, that’s who I’m referring to.

The reset in whole

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

Breakdown

As is tradition, let’s break it down:

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

This rule is pretty self explanatory, but in short, I’m setting all elements and pseudo-elements to use the border-box, rather than the default content-box for sizing. Now we’re focussing more on letting the browser do more work with flexible layouts with fluid type and space, this rule isn’t as useful as it once was. But, it’s rare that a project doesn’t have some explicit sizing somewhere, so it’s still got a place in the reset.

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

The best explainer for this is by Kilian. He also explains why we still need those ugly prefixes too.

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

I’ll always favour stripping out user agent styles for margin in favour of defining flow and space at a more macro level. With logical properties, I’m removing the end margin now instead of all sides in the older reset. It seems to work well in production.

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

Safari do some wild shit, which includes this one: if you remove list styling, they’ll remove the semantics for VoiceOver. Some will say it’s a feature and some will say it’s a bug. I say it’s daft, but to make sure that a role is added, I remove the list styling by default for it as a little reward.

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

I like a nice legible line height that gets inherited. Setting a min height as 100vh on the body is pretty handy too, especially if you’re gonna be setting decorative elements. It might be tempting to use a new unit like dvh, but if you delve deep like Ahmad has, you’ll see that can cause more problems than solutions, which is not what you want your reset to be doing!

The svh unit seems better than dvh, but I’m happy with vh. Always make sure you understand the newer units before diving head first into them, or recommending them as gospel is my advice. If something is already working for you, there’s no need to change it!

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

Just like it’s handy to have a generous line-height globally, it’s equally handy to have a shorter line-height for headings and buttons etc. It’s definitely worth removing or modifying this rule if your font has large ascenders and descenders though. The last thing you want is those clashing with each other and creating an accessibility issue.

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

This rule is rather specific to our projects, but the newish text-wrap property makes headings look lovely. I imagine some people will find this not appropriate, so you might want to remove this one.

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

This rule is first making sure the text decoration doesn’t interfere with ascenders and descenders. I think this is mostly default in browsers now, but it’s a good insurance policy to set it too. We like to set links to inherit the currentColor of text too by default at the studio, but if you don’t, you probably want to remove it.

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

The font: inherit shorthand is bloody useful and we certainly find that with inputs and form elements. It’s mostly going to affect <textarea> elements, but there’s no harm in applying it to other form elements too because it saves on some CSS later on in a project.

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em
}

Speaking of <textarea> elements, this rule is handy. By default, if you don’t add a rows attribute, they can be super teeny. This isn’t ideal with coarse pointers such as fingers and by proxy, <textarea> elements tend to be used for multiple lines of text. It makes sense to make that easier.

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

Finally, if an element is anchored, it makes sense to add a bit more space above it with scroll-margin, which is only accounted for if that element is targeted. A little tweak with lots of user experience power! You might want to adjust this if you have a fixed header though.

Wrapping up

Will this reset last another 4 years? Maybe! The other one certainly hasn’t caused issues.

Regardless, it’s pretty useful as a base to start projects, here at the studio. We don’t go back and retroactively update the other reset on client projects either because that one works absolutely fine.

Resets are one of those things that people get worked up about, but really, with browsers being so bloody good now, you probably don’t even need one in the first place. My advice is take bits you like from ones you find on the web and create your own, that works for you and your team.

You can also read this post in Japanese.

This post and source code is licensed under a Creative Commons Attribution License.

Rhodes wildfires

Tue, 25 Jul 2023 13:55:02 GMT

You’ve probably already seen that Rhodes is currently being hammered with wildfires on the news. We’re currently, at the time of writing, in Rhodes on a family holiday and we’ve been affected by the wildfires.

I’m going to note down our story and I’ll start by saying that we are safe, well and incredibly lucky to be able to say that. We’ve had a horrific and traumatic experience but we’ve had it so much better than a lot of people.

The reason I’m writing this is I want people to be aware of what it’s actually like being involved in a climate disaster event like this. It’s hard to picture it from safety, which I have admittedly struggled to do with other climate emergency events. I also want to use this as a warning for people who are planning to travel to Greece.

The current situation as I understand it

Right now, the fires have decimated the south east of the island. We were near Gennadi, but the fire is rapidly moving south further than that.

Around 10-20k tourists have been displaced and are either:

In emergency evacuation centres
In another hotel
Stranded at the airport
Off the island via boat rescue to mainland Greece and Turkey
Off the island because they managed to get a flight out

Several hotels and resorts have been burned down, including the one we were at. Most importantly though, many towns and villages are now ash — completely destroyed by the fire. The locals have to live with this forever. We tourists have an escape hatch, even if that has felt impossible at times.

The start of the emergency: Saturday July 22

We were at the Atlantica Dreams resort and woke up to our fourth day of holiday. There had been wildfires for a long while already (we saw them as we landed on Wednesday), but they were largely under control.

Saturday was different though. It was extremely hot and extremely windy, with gusts well over 30 mph. By the time noon came around, there was a very large smoke cloud travelling towards us, completely blocking the sun out.

Obviously we were concerned, but the TUI rep in our resort told us we were completely safe and that although firefighters were struggling with the fire, they were confident it would be back under control by the evening.

We trusted that at the time. We were wrong to do so. To be fair to the rep, she only knew what she had been told. At the time, the only way to find out what was going on was local media and Twitter (more on what a joke Twitter was in crisis later).

As it got around to mid-afternoon, there was a sudden shift. I went to check in with the situation and drop some towels off down at the main reception. When I arrived, the lobby had around 1-2k people in there. It turns out, these had all been evacuated from their resorts and at peak heat, walked for over 2 hours to our resort.

A lot of the people stranded in the lobby were young families. I spoke to a few to check they were ok and to ask what had happened. One spoke about how they were on the beach and because the fire moved so fast, it started approaching them there with little to no warning. They had to escape the fire then walk to safety at our resort with two children under 5. They had no passports or even hand luggage: just swimwear and towels.

Our resort looked after these people incredibly well and incredibly fast. Everyone was fed, had plenty of water and plenty of medical assistance. There was no sign of any travel reps apart from the one TUI rep that was already there. No one had any information. Everyone was told by them that the fire would never reach our resort and it was one of the safest places in the region, hence why everyone was sent there.

I went back to our room to try to find out what was happening online. Twitter is usually really useful in crisis, but of course, since Elon Musk bought it, it’s a useless cesspit of misinformation and absolute idiots wasting timeline space with stupid claims that global warming is a hoax. I actually found TikTok to be extremely helpful instead.

As it stood, we felt safe until the evening. You could see that the fire was over the hills most of the day, but you couldn’t see flames from our resort. By sunset, the flames were partially visible. By 9pm, the flames were huge and extremely visible. Shit started getting scary at that point.

At around 10pm we had a frantic knock on our door. It was a porter and he shouted “get all of your luggage together, we are evacuating on coaches”. We did as we were told and got up to the fire assembly point. There was thousands of people grouped together. We had 3 suitcases, hand luggage and two young children: 4 and 6.

As soon as we arrived it was absolute chaos. It was the Greek military, Red Cross and extremely kind locals that were evacuating because none of the travel providers had got their act together in time apart from Jet2 and EasyJet. They were further south though.

It was clear that we were going to be a hinderance with our luggage so we dumped two suitcases and kept one with all of the essentials, including medication. Just as we did that, who we presume was the boss at our resort, came out screaming that everyone had to run as there was no time, so as people do in a panic, they follow the herd. It was at that point where our eldest child turned to me and asked if we were going to die. That broke me into pieces. I’m sobbing as I write that even now.

We started running too with some other families with young kids. A soldier yelled “dump all large luggage” which was when we dumped our last suitcase, leaving us with only hand luggage. We didn’t care though; we were too terrified to care about fucking luggage.

We got picked up by a pickup truck that stuffed us into the trailer and drove us down to a larger gathering of people that were being picked up by coaches. That was the scariest scene because a lot of fights were breaking out (panicked people do crazy shit).

It was also in the middle of nowhere and pitch dark. We stayed for a while, waiting to be picked up, but the fire approached too quick, so a local led a group of us — walking in pitch dark — for over an hour to another location. Thankfully it was then that we were picked up by a coach and taken to safety at another hotel which was now an evacuation centre. We arrived at 1am on Sunday.

As an infuriating aside: if we had waited at our resort for 15 minutes, 5-10 empty coaches showed up and took everyone remaining to safety. It wasn’t until Monday afternoon when the fire finally burned down our resort.

The evacuation centre

We arrived at Atrium Prestige in Plimiri, which is the far south east. I can’t really describe the scene of what we saw that would do it justice, but imagine what 5,000 people in the lobby of a 250 bedroom hotel looks like. The rest of the night felt like a disaster movie, but this part really was.

People were strewn everywhere and there was no water or food for anyone. Luckily a heroic porter (who was old as fuck) was filling up people’s bottles with tap water with queues hundreds deep all through the night. What a legend.

He was the only legendary member of staff there though. As it got to 5am, one of the receptionists shouted that they had an announcement. They basically said, the thousands of stranded people didn’t matter to him and they will provide nothing because he didn’t want to upset his guests.

A straight-up example of “not in my back yard” snobbery that is at the root of society’s problems. Sure, it was a fairly posh hotel, but within hours all of those guests could find themselves in the exact position we were all in: stranded.

I spotted a group of people talking him down and eventually they negotiated that the children would at least be fed and water would be distributed. Those people are lifesavers.

The great escape to the airport

We arrived at the Atrium at 1am on Sunday and spent nearly the whole time there desperately trying to find out information.

Yet again, Twitter was next to useless, but thankfully later in the morning, the BBC started up a live page. I also managed to deploy several contacts at home to find out what they could because we were both trying to conserve battery (all of our chargers were in suitcases) and the network was shaky at best.

Hours and hours of sitting on a floor in a hotel lobby later, my best mate from home — who’s wife works in the travel industry — managed to find us a local minibus driver willing to get us to the airport. He told us he could take 19 in total. I rounded up a big group of people and we got the fuck out of there.

This was extremely lucky. In that whole time, only 3 or 4 coaches ever showed up. Each time, fights broke out or the coach driver would pick up specific people (presumably those who had flights that day). If it wasn’t for the minibus, I fear we might still be in that hotel lobby now.

We drove past the region we were originally staying in on the way to the airport. We had to go a windy, back-road route because a lot of the main roads were shut because the wildfires had either melted them, or burned out power lines.

The scene of the areas burned out by the fires was devastating. Again, like a disaster movie. Towns that are 100% tourist, burned to the ground, leaving the locals with no hope of ever recovering.

They are the real victims here. We can all leave Rhodes (eventually) but the locals have to stay and try to rebuild. By all accounts, talking with locals, the fires are probably going to carry on through the summer and take the island at least a decade to get back on its feet. Horrifying stuff.

We finally made it to the airport and thought it was nearly over. Of course it wasn’t…

The evacuation flights that never happened

As we arrived in departures at the airport, I spotted two TUI reps. They assured us empty planes were currently in transit and because we were there, we would be getting on one.

They said the turnaround to takeoff could be several hours, so they were going to transfer us to a local hotel. We of course complied, thinking we were going to be getting out of this hell we were in, but as soon as we checked into the hotel we received a message that all TUI customers would be returning on intended flights only.

We were happy to be safe, but this is a pattern of pure bullshit from TUI. They claim to be doing everything they can, but do absolutely nothing. They’ve since told us on 4 occasions we will be on early flights out and of course, that never comes to fruition.

A big factor in that is they insist on doing all text based communication via their app, which you guessed it, barely works when you have a sketchy connection. We probably could have gotten out, had they used text, email or even WhatsApp. A classic example of tech not considering crisis.

We’re safe and well

That leads me to the current status of my family and I. We are safe and we are well, aside from some sickness. The hotel were in is great and they’ve looked after everyone who’s been stranded there amazingly, even though they clearly don’t have the resources to.

TUI finally sent reps yesterday evening and to their credit, they’ve been really helpful. The company as a whole though have been useless.

I’ll finish with saying that we are incredibly lucky. It got real scary at points — especially based on the fact that both our original resort and the rescue centre resort have now burned down, or being seriously damaged by fire.

We’re still in Rhodes, but are due to fly out tomorrow. I’ll be honest, I can’t wait to land in the UK.

I haven’t edited or proofed this post. It’s the least of my worries right now, so please don’t reach out with spelling or grammar mistakes. I don’t care. I just wanted to get this out of my head while it’s fresh so I can deal with getting over the trauma and most importantly, helping my partner and kids get over it too.

The climate emergency is here now. Not in the future. If you are planning to travel to affected countries, I’d strongly recommend you don’t for yours and everyone’s safety.

Initial thoughts on Meta’s Threads

Thu, 06 Jul 2023 13:08:13 GMT

I’m doing a new talk and looking to do it at more events

Mon, 03 Jul 2023 09:51:45 GMT

I’m well under way writing my new talk for this year called “Iteration: a strategy for optimising UX for everyone”. It’s a much different talk than what I’ve done previously over the last few years. Usually I talk about CSS!

This new talk is more in line with what I do in my role, running an agency. I reckon in the last 12 months I could probably count the amount of times I’ve written CSS on one or two hands, so it feels right to move back to a more design focused talk subject now. I am a designer by trade after all.

What’s it about?

This is the outline that’s currently published on Web Summer Camp‘s upcoming event:

The market share of mobile devices and small screens is huge and ever-growing while large screen’s share continues to decline. Even with this data, productions teams still work desktop-down, often only testing on high spec machines with fast internet connections.

In this session, we’re going to look at how important products let users with small screens and slow connections down and how a thorough pre-production phase — using an iterative approach — can result in a simpler production phase, a solid roadmap and most importantly, a resilient, quality user experience for everyone.

The fun part is, I’m not telling the whole truth in that outline because I’ve got some surprising data to share with you. The over-arching theme of “you really have no idea what device size, device capability or viewport will visit your site” is very true though, and I’ll be running through a hypothetical client project to show you how you can use that fact as a basis for designing an excellent user experience that works for everyone.

I want to do this at more events!

Are you looking for speakers for you conference? I’d love to speak if that’s the case. I especially would love to speak at more design-focused events too. I’m also more than happy to go through a CFP process.

So far, I’m doing Web Summer Camp and Fronteers. Both are great events that you should definitely get tickets for.

If you want to chat more about me possibly speaking at your event, drop me an email at andy@set.studio.

Hope to catch you at a conference!

p.s this is the one I did last year

Viewport logger research tool

Wed, 21 Jun 2023 10:51:21 GMT

I made this little viewport logger: https://viewport-logger.netlify.app/

I’d really appreciate it if you could visit it on your devices — especially small screens — because I want to use the data to illustrate just how much screen fragmentation there is.

Please share with your pals too!

The holy trinity

Sat, 20 May 2023 07:59:05 GMT

I think I’ve found the optimal experience for each of the main three social networks I use:

Bluesky: lols and shitposts
Mastodon: tech stuff
Twitter: who’s on bluesky and mastodon?

Links to all my profiles here.

I broke my RSS feed

Thu, 18 May 2023 11:48:33 GMT

Sorry to everyone that got my last few posts in their RSS reader again. I broke my RSS feed with the latest update to this site. Should be all fixed now!

I hooked up Eleventy to WordPress API

Wed, 17 May 2023 14:39:57 GMT

I’ve got some plans for this site. The main thing I want to do is bring my music collection into my main site, instead of having a subdomain. That thing has been a “prototype” for over 2 years now…

The problem is that site uses Notion as its data source. I really like managing my music collection in Notion so didn’t want to change that, but integrating that data with WordPress templates might have gotten messy. I also really like WordPress as a CMS for my site. It makes posting a doddle.

I found myself in quite the conundrum so it had to be headless time!

A failed attempt at Next JS

I thought I’d refresh my knowledge of Next JS for this project. It seemed like a good idea on paper, but in the [checks notes] last 3 or so years since I last used it, it’s gotten way too complex.

Authoring code is fine, as it always is, but I was getting build errors on Vercel because I didn’t use their <Link> component and dared to use a — y’know — HTML <a> tag for links. That’s piss poor and is almost certainly causing long term damage for developers. The bundle size is hilariously large too, so I’m not into that.

With all that in mind, mixed with my very short attention span, Next JS was put in the bin.

Step up, ol’ faithful Eleventy

You simply cannot beat Eleventy. Y’all know I’m already a super fan, so I was always going to end up back using it for my personal site. The problem I had with Eleventy before was having a big ol’ folder of markdown files for posts. That’s not a problem this time because I’m using WordPress as the CMS.

WordPress sites come with a REST API built in, so in Eleventy, all I had to do was create a collection that pulls my WordPress posts and builds them as static. You can see that code here if you want. All in, it took me about an hour to grab my 11ty starter, plug in my existing CSS setup and grab posts from WordPress. Like I say, you simply cannot beat Eleventy.

The other cool thing I can do with Eleventy is replace the client-side LastFM widget in my footer with a rendered one. I now pull the data with a JavaScript data file and then render it in a little partial. I’ve got a cron job that runs a build every 3 mins that keeps it all up to date.

The music collection I’m bringing into the main site is already using this approach with JavaScript data files to grab Notion content, so porting that over should be pretty simple too.

I made it all open to folks to look at

I thought it might be a good idea to share the source code for my site. It always made me nervous when it was on WordPress because I come from the bad old days of WordPress sites getting hacked. With Eleventy though, it all feels safe.

The only thing that doesn’t feel safe is that the fellas (it’s always the fellas) love to rip off other peoples websites, which is absolutely not cool. The power play I have for that is no one is gonna want a site that looks like mine lmao.

Feel free to look around the source code though. You might learn something new!

Happy 10th birthday to these weird little guys

Wed, 17 May 2023 10:45:10 GMT

10 years since we rescued Dora and Delilah. They’ve been the best and weirdest little guys.

Identity theft

Mon, 15 May 2023 09:49:36 GMT

I listened to a terrifying episode of Darknet Diaries this week where a developer, Connor Tumbleson explained how their identity was stolen by some form of grifting company that created a fake Upwork profile pretending to be them. They then proceeded to hire freelancers to pretend to be Connor in interviews…

It’s all very weird and I urge you to listen to the episode and/or read their great blog post on the matter.

I can’t believe I have to even write this, but if you ever find my profile on Upwork — or any other freelancer hiring sites — it’s 100% not me and never will be. Definitely triple check before hiring on such sites would be my advice.

I don’t hate it though

Wed, 03 May 2023 08:33:28 GMT

Something I really don’t like is how “hate” is used so lightly — especially by tech folks. Same for “dead” too (tech doesn’t die it’s just sand that can think).

Over the last couple of years, I often get mischaracterised as “hating” stuff. Y’know, “Andy hates React”, “Andy hates Tailwind”, “Andy hates Twitter”, or more recently, “Andy hates Mastodon”. I don’t “hate” any of those.

In fact I use them all, quite happily. I use React on client projects, I use Tailwind on nearly all projects and use Mastodon most days.

I think people think I “hate” Twitter, React and Tailwind because I make fun of and shitpost about them. I don’t know how that gets categorised as hate — well, it probably is related to the modern tech industry being almost completely void of humour — but here we are.

Apparently I hate Mastodon for the same and also I dared to write about why it’s been giving me the ick recently. The horror.

Anyway it’s one of those thousand cut things. It doesn’t really bother me a lot of the time, but it is recently. It bothers me when people I consider friends claim I “hate” stuff too.

Being mischaracterised is one of only the few things I actually do hate, along with Nazis, Tories, Manchester City FC, Elon Musk and courgettes.

I don’t expect anything to change, but I dunno, maybe choose a new word, because hate is a very strong word and we’re using it wrong tbh

Some Bluesky, Twitter and Mastodon predictions for 6 months time

Thu, 27 Apr 2023 11:22:11 GMT

Predictions are fun and social networks seem to be in a period of turbulence, excitement and of course, decline. This is what I reckon it might look like in 6 months:

Twitter will be like Facebook: cringe and irrelevant. It certainly will not be “dead”, but just like Facebook is now: Twitter will be completely void of relevance. It’ll still be useful for people to connect though. Unless Twitter sorts revenue out (repair relationships with advertisers), it’ll probably go away.

Bluesky will be much bigger and feature a lot of big accounts like celebrities, but I think they’ll also maintain a presence on Twitter too, like they do with Facebook. The federation setup will probably result in a few smaller satellites of the @ protocol, but Bluesky will almost certainly be the canonical instance and by proxy, will be the new old Twitter. I think Bluesky will still be invite only too. Third party apps will be a massive contributor to the success.

Mastodon’s growth will slow and it’ll probably resume its position as a niche community. The Fediverse will remain strong, but I think Mastodon will mostly be populated by people who really want it to work, rather than people looking for a Twitter alternative who have mostly been scared off at this point.

I’m almost certainly going to be wrong about this, but I’m quite looking forward to seeing how it all shifts. I’m gonna set a reminder to check this post in 6 months to see how wrong I was.

Why pay $8 for a checkmark when you can get one for free?

Sat, 22 Apr 2023 20:13:32 GMT

Elon Musk has removed checkmarks from everyone now on Twitter, so I thought I’d make a web component so you can add one wherever you want!

CodePen Embed Fallback

First of all, you’re gonna need to add this JavaScript to your webpage.

<script type="module">
class CheckMark extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({mode: 'open'});
    root.innerHTML = `
      <svg role="img" aria-label="${this.name}" viewBox="0 0 22 22">
        <path d="M20.396 11a3.487 3.487 0 0 0-2.008-3.062 3.474 3.474 0 0 0-.742-3.584 3.474 3.474 0 0 0-3.584-.742A3.468 3.468 0 0 0 11 1.604a3.463 3.463 0 0 0-3.053 2.008 3.472 3.472 0 0 0-1.902-.14c-.635.13-1.22.436-1.69.882a3.461 3.461 0 0 0-.734 3.584A3.49 3.49 0 0 0 1.604 11a3.496 3.496 0 0 0 2.017 3.062 3.471 3.471 0 0 0 .733 3.584 3.49 3.49 0 0 0 3.584.742A3.487 3.487 0 0 0 11 20.396a3.476 3.476 0 0 0 3.062-2.007 3.335 3.335 0 0 0 4.326-4.327A3.487 3.487 0 0 0 20.396 11zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"/>
      </svg>
      <style>
        svg {
          display: inline-block;
          transform: translateY(0.1em);
          fill: var(--verified-color, ${this.color});
          width: auto;
          height: var(--verified-size, ${this.size});
        }
      </style>
    `;
  }
  get name() {
    return this.hasAttribute('name')
      ? `A verifcation check for ${this.getAttribute('name')}, who is definitely verified`
      : 'A verification check showing that I am definitely verified';
  }
  get color() {
    return this.hasAttribute('color') ? this.getAttribute('color') : '#2ca6f8';
  }
  get size() {
    return this.hasAttribute('size') ? this.getAttribute('size') : '2ex';
  }
}
customElements.define('check-mark', CheckMark);
</script>

Now, you can use the <check-mark> element wherever you want.

<check-mark></check-mark>

You can set your name on there, which will make for much better alt text like this.

<check-mark name="Andy"></check-mark>

You can change the colour like this.

<check-mark color="#ff00ff"></check-mark>

You can change the size like this.

<check-mark size="20rem"></check-mark>

Or, you can use CSS Custom Properties.

:root {
  --verified-color: #ff00ff;
  --verified-size: 20rem;
}

Here’s some cool stuff.

CodePen Embed Fallback

FAQs

Why?

Why not?

Will it work on every website?

Almost certainly not.

Is this on NPM?

No, but feel free to publish it there

Will you mantain this?

In all honesty, I’ll forget this exists within 2 weeks, so no.

last.fm + “AI”

Tue, 18 Apr 2023 14:25:53 GMT

Do you know what I’d love? An “AI” that’s constantly trained on my last.fm listening data that at any point in the day can recommend me something to listen to. I tend to listen to genres in phases, so I think this would be especially useful for me.

Is this even possible? Where would I even start?

Something to look into I guess.

New side project: owning my music

Thu, 13 Apr 2023 12:36:13 GMT

Folks that have been following along for a while will probably remember that over the last couple of years, I’ve been building up a music collection away from streaming services. You can see it over at https://music.andy-bell.co.uk.

I’ve slowed down purchasing physical vinyl copies because I’ve got most of the ones I wanted — especially my top 10 albums of all time — and I’m running out of storage space for them. I’m moving on to the next phase now: completely owning all my music digitally.

I don’t really have a huge problem with streaming services. They don’t pay artists anywhere near enough royalties but they vastly improve discoverability. It is what it is. I don’t want to contribute to that though and want to pay artists what they are owed. In a world of way too many streaming services across all media, it would be great to chip one off the list too.

Right now I use Apple Music and it’s fine. I do much prefer Doppler as an interface, both on Mac and iPhone. The problem is, my digital collection is rather thin, so I’m gonna slowly start to build it up. One part of that is buying CDs and ripping them, just like the glory days when I got the first iPod. The other is digitising my Vinyl collection.

I’m using VinylStudio to record and process albums. So far it’s pretty darn good. I could have used something free like Audacity or even Adobe Audition via my Creative Cloud licence, but I’ve spent way too many hours mixing, mastering and slicing audio in my previous work as a sound engineer to ever want to do that for fun. It would be like wireframing for fun these days lmao.

VinylStudio recording White Pony by Deftones

One thing that’s really good about this process is it’s getting me listening to vinyl again which I’m sorry to say, I’ve been pretty bad at recently. I’ve missed that analogue warmth, so it feels good to be doing it again.

I also know this is going to take ages. At the time of writing, I have around 240 vinyls to get through. Even at two a day, it’s gonna take well over a quarter of a year. I like the idea of a slow hobby project though.

Maybe this year is the year I finally give my music collection site a proper design too. It’s been in it’s proof of concept state for around 2 years now…

I think I’m not alone that Mastodon is giving me the ick

Wed, 05 Apr 2023 14:07:58 GMT

I first joined Mastodon in 2018 (even though my old profile says 2016?), so I’d say I’ve seen a lot of its evolution. I’m on my second private instance now and would definitely consider myself invested in its success. Decentralised social media is so much more web than centralised social media networks ad networks like Twitter and Facebook. In short, I see it as the future for sure.

But, right now, Mastodon is giving me the ick, again. Frustratingly, for the same reasons it did last time, a couple of years ago:

My pals aren’t all there and I miss talking to them
There’s so little diversity in comparison to Twitter
The tone policing makes me want to scratch my eyes out
There always seems to be a weird atmosphere which I can’t put my finger on. I think it’s caused by an extreme effort to keep it pleasant and not like Twitter
People relentlessly calling Twitter the “birdsite”
Sooo many content warnings for literally everything (I know you can remove them)
Folks are extremely defensive about fair criticism of the platform
I miss the chaos, speed of information and humour on Twitter
People get real nasty about others going back to “the birdsite”

I want to focus on the last point because this has definitely been a contributor to my recent ick. I’ve noticed a few folks getting frankly, horrible about people moving back to Twitter recently and I think it’s a bit unfair.

I empathise with people who are moving back because I am one of them. In my case, I’d say I’m straddling both platforms though. I definitely started getting some FOMO, but also, Twitter still provides value for me. I fucking hate Elon Musk and what he’s doing to Twitter. I absolutely will not support him, but I don’t think posting on Twitter does that — mostly because they’ve lost like 90% of their ad revenue and over 50% of the company value lol.

I’ll own the fact that many times, I have declared that I will never go back to Twitter, but I’m also a human who makes rash decisions. When Musk laid off most of the hard working folks, I was fuming, so rage quit. Now, after a few months of cool-off, I really started to miss people who never came over to Mastodon, so slowly started going back via lists and Feedbin. I’ll never embrace the “for you” bullshit, that’s for sure.

Maybe this is why folks getting nasty about other folks moving back to Twitter from Mastodon is pissing me off so much, because I feel like they are being a dickhead about me too. I know I personally care a lot less about what people think about me than others might do though, so I also worry that good people are being pushed away because they are made to feel like bad people (which they are not).

I’m personally gonna keep straddling both platforms. If that’s a real problem for you, no worries, but being an arsehole about it certainly won’t make me want to ditch Twitter for Mastodon 100%. It’ll have the opposite effect.

Also, you might be having the best time on Mastodon and hell yeh, that’s great. I’m really happy for you. Don’t use that to minimise other people’s less-positive experience though!

I honestly think Mastodon — or some other decentralised platform — is the long term future, but I also think unless Twitter literally disappears, it’s going to take a long time. That’s fine, in my opinion. It gives Mastodon time to evolve into something more people friendly, which will be great!

I’m still going to be an enthusiastic cheerleader of Mastodon too, even though right now, I’m not digging it as much.

Sitting ducks for AI automation

Mon, 03 Apr 2023 17:14:09 GMT

I tell you what, with so-called “AI” getting better and better at slinging code, I’d certainly be concerned if I was all-in on UI frameworks, because you just know that design implementation is gonna be automated out because it’s “easy”. Same goes for easy-to-automate components built with React/Vue/Whatever.

Yeh, it’s easy to bosh out a bang-average design implementation with frameworks like Tailwind UI, and a bang-average UI with React or whatnot, but the skills to make something great are much higher in the production process and frankly, much harder.

So-called “AI” can’t even get close to automating proper implementation details, quality user experience and well, proper planning, research and critical thinking. That’s what makes great websites, less so the code slinging part and rectangle drawing. That part is just the output of great pre-production work.

My advice would be to skill the heck up on that pre-production stuff, because if you’re part of the design/code sausage factory’s conveyor belt, I think your job safety days are numbered. Do I think that’s fair? Absolutely not — but what I do know is rich people will do anything to get richer, so the time to out-wit them was yesterday.

Thank you for my $0.01, Coil

Wed, 29 Mar 2023 16:31:11 GMT

After Coil decided to sunset, I got my “final balance” today: a whopping $0.01.

I’m a bit disappointed that the interledger thing never really took off, but it never was gonna work because the payouts were so small. There wasn’t really an incentive for publishers to part ways with ads. I still get a mighty $10 a month from those on piccalil.li, even though I never add content lol.

Let’s hope this is a bump in the road, rather than the end of web monetisation.

“AI” should be doing our boring work, not the fun stuff

Sat, 25 Mar 2023 07:07:51 GMT

I’ll give “AI” credit: it’s bloody good at boring menial stuff I can’t be arsed with. That’s what it should do: save time wasted on stuff that grinds you down, so you’ve got more energy for the stuff you actually like doing.

I have no interest in the “creative” stuff it does— well, maybe the image generators can help me with a bit of creative block sometimes.

The thing is, surely everyone wants to do less boring, menial shit. Why are the personality voids that are pushing it so hell bent on taking what makes us actually human away with “AI”?

If they came forward with “you’ll never have to process an expense again” or “our ‘AI’ will manage your inbox for you”, I’d sign right up for that shit.

Set Studio in 2nd place in carbon footprint table

Thu, 23 Mar 2023 12:12:39 GMT

Ecoping have these handy indexes of websites, ranked by their carbon footprint. They’ve added our new Set Studio site and it’s in second place!

https://ecoping.earth/indexes/digital-agencies/

What a nice surprise 🙂

How AI and Crypto combined, are the future of the web

Fri, 10 Mar 2023 13:25:29 GMT

Ha ha no they’re not. Got ya!

One in, two out

Mon, 06 Mar 2023 14:42:25 GMT

As I posted earlier, I’m half letting Twitter back in. I have a policy though: a new potentially addictive thing means another has to go. Because Twitter is even more dangerous, I’ve decided that two need to go, so TikTok and Instagram have now been deleted from my phone.

I don’t ever post anything to either of those ad networks, but they eat a lot of time and especially the case with TikTok, result in lots of late nights, mindlessly scrolling through videos.

I have a similar policy with subscriptions, so they don’t get out of hand. I recently subscribed to Paramount+ for Yellowstone (definitely try that show, it’s great). Spotify was the sacrificed subscription because I’ve gone back onto Apple Music, which I get with Apple One. As long as my last.fm stays up to date, I’m happy.

How I’m dealing with Twitter in a hands-off manner

Mon, 06 Mar 2023 12:17:38 GMT

You might have noticed I’ve spent more time on Twitter recently. I was chatting to a new client for my agency recently and — as I always do — I asked where they found us. They said their team members followed me on Twitter…

Sure, they came through our contact form, but the fact that Twitter was the original source ends my forever claim of “I never land clients from Twitter, just reply guys”.

So, with that — and after a very long period away — I thought I would dip my smallest toe in Twitter until Musk kills it off. I ain’t raw-dogging Twitter though. I can’t be dealing with the native app or site. Since Musk ripped away access to Tweetbot, that’s my direct access to the network gone. I though’t I’d get smart about it instead.

Every now and then, I need to come back to twitter.com, so in Arc, I created this custom CSS to hide all the engagement bait:

[aria-label="Trending"], 
[aria-label="Search and explore"], 
[aria-label="Twitter Blue"],
[data-testid="DMDrawerHeader"], 
[href*="promote"] {
  display: none !important;
}

It allows me to pop in > do what I need to do > bail out.

Timeline

I follow quite a lot of people on Twitter that didn’t move over to Mastodon, so I popped them in a private list — along with some dear old pals — then subscribed to it on Feedbin. This allows me to keep up to date with them (which I have missed a lot) and I don’t have to deal with the firehose that is the Twitter timeline.

Look how lovely and quiet it is

I did try the Twitter timeline last week and immediately bailed out when I was met with the same old shit takes and performatism, so this Feedbin setup is the only way I’m gonna keep up with Twitter, because now I’ve broken away from the site, I just don’t have the patience for it, or the dickheads that frequent my replies.

It also means I can treat Twitter as just another RSS feed and consume it whenever I want. I never miss my pal’s updates either, because it’s a list, which is genuinely chronological with no algorithm bullshit.

You’ve probably noticed I’ve even got TikTok and Tumblr in my reader. For Tumblr, I just subscribed to the blogs I was following via RSS and for TikTok, I used this cool trick.

There’s absolutely no chance I’ll be coming back to Twitter properly because the mental health benefits of being away from it are astronomical. This setup also reminds me of how little content I actually wanted to see on Twitter, versus how much was stuffed in my eye holes. That’s ad networks cosplaying as social networks for ya!

Posting and replying

The canonical source for nearly all my posts is Mastodon. The great thing about Mastodon is every user has an RSS feed. I wire that up with IFTTT, which tweets the same post on my behalf on Twitter without me ever having to think about it, or importantly, go near twitter.com.

If I post on my blog: it posts to Mastodon first, then Twitter via RSS. I like that setup a lot. I own all my Mastodon content because I have my own private server too, so I feel like this counts as POSSE.

I also use an app called Front for replying, DMs and occasionally posting Twitter-only content. I’ve already been using it again for a while because I get a lot of DMs. It’s just like managing an email inbox. I can also like and retweet stuff from there, which is handy.

It’s also a great email client, so keeping all that together is useful.

Wrapping up

As I said to to Shawna:

…activitypub is the destination. There’s just a bumpy road to get there

I genuinely see ActivityPub as the destination, long term — along with more people owning their space online, rather than ad networks owning them.

Mastodon is and will continue to be where I am, but if this extremely hands-off way of dealing with Twitter works out (until it eventually disappears), I’ll keep it going, because like a lot of my other independent peers, you gotta be where the people are.

My take-away advice for you, dear reader, is find a way to use Twitter in a more hands-off manner and start building away from there, because it will disappear, or at least become a wasteland of boomers like Facebook.

Help the good folks of Tweetbot out

Thu, 02 Mar 2023 07:07:15 GMT

In January, petulant man-child, Elon Musk kneecapped Tweetbot (and others) by removing their API access.

Because of this, it looks like Apple will be automatically refunding subscriptions. This isn’t fair.

You can help by downloading the latest Tweetbot and selecting “I don’t need a refund”

My favourite 3 lines of CSS, now in Japanese

Tue, 28 Feb 2023 10:36:52 GMT

Big thanks to コリス for translating my post about my favourite 3 lines of CSS into Japanese 🙌

Link: https://coliss.com/articles/build-websites/operation/css/about-css-owl-selector.html

Learn Eleventy From Scratch could really do with an update

Thu, 23 Feb 2023 15:11:24 GMT

Our Junior developer is currently running through Learn Eleventy From Scratch and I’m chiming in every now and then to help them out.

Thanks to Eleventy being—well—awesome, it runs perfectly for the 2.0 release, even though the course was written before 1.0. The problem, instead, lies with gulp.

Really, the whole course needs to be refactored to better-support new Eleventy stuff, but most importantly, lesson 18 onwards need completely re-writing.

The biggest issues are the Gulp and Sass setups. I don’t even use Sass anymore and we certainly don’t in the studio. This is another worry for me because our Junior has only done normal CSS, so Sass is gonna be confusing as hell for them.

I’m really glad I made the course completely free, but unfortunately, that causes a problem: I just can’t justify investing weeks of time into an update. I haven’t got the bandwidth for it—especially running an agency with billable work. If it was still paid, it would be justifiable and frankly, would already be completely up to date.

I don’t really know what the best course of action is for it. The course has helped so many people—still thousands a month, so it’s really worth investing in still. I guess the ideal situation is some form of sponsorship from a company (hello, Netlify) to fund a chunk of work on it and maybe put some sponsorship assets on there. Or maybe donations?

I dunno. Ideas welcome!

Quest For Fire – Skrillex

Tue, 21 Feb 2023 13:13:00 GMT

I’ve always been a fan of Skrillex, even in the nastiest dubstep era. What I also like about Skrillex (A.K.A Sonny Moore) is that he is (or was) the frontman of post-hardcore band, From First To Last. I got to see them at Download ’06 where non-other than Wes Borland played bass for them 🤯

Anyway, this latest album from Skrillex is bloody good. He’s really chilled out his sound and it’s more dance/electronica than filthy dubstep. Don’t get me wrong though, it’s still a fucken massive sound.

I think my favourite track has to be “Hydrate”. It features Flowdan (bloody good rapper), who’s lyrics sit beautifully on a nice sparse track. Lovely stuff.

Also, I’m really bloody excited about the prospect of Skrillex, Four Tet and Fred Again… making music together. They seem to be touring (of sorts) together at the moment, so we can only hope.

Listen here.

Added an about page

Tue, 21 Feb 2023 11:36:10 GMT

I can’t believe that I didn’t have one already, but I’ve actually made an about page: https://andy-bell.co.uk/about/

Check your CSS source code order before shovelling on more CSS

Mon, 20 Feb 2023 16:47:18 GMT

I’ve been writing a new issue of The Index today and came across a bit of a spacing issue in our prose CSS rules.

The image is bunched up against this heading

The culprit CSS is this:

.prose h1 + * {
  --flow-space: 1em;
}

.prose :is(h2 + *, h3 + *, h4 + *) {
  --flow-space: var(--space-s);
}

What that CSS does is look for heading elements and reduce spacing of any element that follows them, to create a nice section of content. It configures my favourite 3 lines of CSS I wrote about here.

The problem is, it’s overriding this rule which adds more space around elements such as a <figure>:

.prose :is(pre, pre + *, figure, figure + *, h2, h3, h4) {
  --flow-space: var(--space-l-xl);
}

Those two rules have the same specificity score as each other, 0, 1, 1. You can see them and how they are calculated here: first rule and second rule. The second rule appeared before the first in our source code.

This wasn’t a problem before, because most stuff we share has animation, we add a little motion warning, which then resets the spacing rule.

How did I fix it?

Well, admittedly my first reflex was moar CSS, but no more CSS characters were added. All I did was change the order of the rules in the CSS…

With that set, you can see the difference it caused:

Because they have the same specificity score, source order kicks in, which is why the second rule that appears wins.

What’s the lesson?

Instead of shovelling more CSS on the pile in these situations, check on that specificity first. If you need help with that, check out the specificity lesson I wrote on Learn CSS.

This Is Why – Paramore

Sat, 18 Feb 2023 13:12:00 GMT

Look, there’s bias here because I was extremely emo in the mid-2000s, so Paramore is always going to get a good review.

But, my god, I’m in to “This Is Why”: their recent album release. In fact, I think I’m low-key addicted to “Running Out Of Time” because it reminds me so much of Proceed (seriously good, check them out).

This album also makes me think of Finch, in the way that Paramore’s sound has evolved so much over time. Finch went from straight-up emo, to a more mature, clean sound, with smart-as-hell songwriting. I think Paramore are in a similar place too, but they went through a pop era (which I liked). I hope they stick at this evolution, because it really works for them.

Overall, it’s great to see Paramore back. They’re bloody great.

Listen here.

Just post

Thu, 16 Feb 2023 15:14:23 GMT

[starts stopwatch]

I see a lot of folks want to write more but struggle with how long it takes. I get it, a super detailed post takes hours of work. Especially when you’re building demos and stuff.

You don’t always have to do that, though. Take this latest post on my blog about text-decoration. It took about 25 mins to put together, proof-read and publish.

This isn’t in any way a brag though. What I’m trying to say is that if you pick some low hanging fruit or something real simple, you can get posts out quick. Get a lot of posts out quick, and suddenly you’re more confident in your writing, you’ve got some momentum and you get quicker.

Suddenly, the prospect of writing a big ol’ detail post becomes less daunting.

I learned this from the school of Chris Coyier. CSS-Tricks was one of the first blogs I really enjoyed reading back in the old days because Chris’ writing style is clear and to the point. He keeps his language really simple too, which I try damn hard to do the same.

Doing that also speeds you up and makes posting less daunting.

P.S if you think “no one will want to read my posts”, you’re wrong, because I do. If you think “X has already written about that, so I can’t”, then also, no, I want to hear your perspective, as do us all!

P.P.S if you think “I need a new blog” or “I don’t have a blog”, then first, look at the state of mine. I couldn’t have made it simpler if I tried. If you need something that’s plug and play: get this banger 11ty theme on the go, or get one of these banger 11ty themes on the go.

[stops stopwatch at 8:35]

Always aim high

Thu, 16 Feb 2023 15:02:32 GMT

I was doing a bit of tweaking on our agency site the other day. I introduced a <del> element to one of the headings in a new post. It looked pretty rubbish though because the text decoration was the same colour as the text and made it hard to read.

At first I thought, “easy, I’ll just add text-decoration-color to <del> elements”.

del {
  text-decoration-color: var(--color-secondary);
}

That was easy, but it feels a bit specific to me, especially when we already have this rule:

a {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

This makes links look like this:

I want both the <del> and the <a> to have that same text-decoration effect, including the thickness, so I do a grouped selector right?

a, del {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

Well, yeh, that works, just like the first snippet of CSS does, but it’s not global enough for my liking. What happens if say, I want to use an <ins> element one day?

The answer is a universal selector, also known as a wildcard:

* {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

Now, any element that has text-decoration—that doesn’t define it’s own text-decoration-color or text-decoration-thickness—will have this rule applied automatically.

This is the power of CSS right here. If you do as much as you can, as high up as you can, you write a hell of a lot less CSS. Then, when you use semantic HTML: pages just style themselves.

Now doesn’t that look lovely?

Eleventy Excellent truly is excellent

Thu, 16 Feb 2023 13:28:30 GMT

I’ve probably already shared this before, but the Eleventy Excellent starter kit by
Lene Saile (@lene@front-end.social) is bloody fantastic.

It’s based on the Build Excellent Websites site we made, for the Be The Browser’s Mentor, Not Its Micromanager talk I delivered last year.

I know I’ll certainly be looking in this kit’s direction next time I’m building an Eleventy site, that’s for sure.

https://eleventy-excellent.netlify.app/

The (extremely) loud minority

Tue, 14 Feb 2023 12:27:11 GMT

Often on Twitter, we’ll hear stuff like this:

Best practices don’t actually work

Or:

TypeScript has won, and it’s only a matter of time you’re using it whether you like it or not.

These may be true for a tiny minority of cases, such as in a code-factory: full of developers, independently working on small pieces of a very large product, but this doesn’t represent the web industry. In fact, the JS-driven cohort represents a tiny percentage of the web industry as a whole.

How small is that percentage, though? I’m glad you asked. We’re going to be using data from W3Techs, who crawl the top 10 million websites to calculate what market share certain technologies have. For this example, I’ll compare WordPress with React and Vue, because if you didn’t look at the data, you’d think everyone was building with them, right? Absolutely wrong.

WordPress is used by 63.4% of all the websites whose content management system we know. This is 43.1% of all websites.
W3Techs

And to compare:

React is used by 4.0% of all the websites whose JavaScript library we know. This is 3.3% of all websites.
W3Techs

And finally:

Vue.js is used by 0.9% of all the websites whose JavaScript library we know. This is 0.8% of all websites.
W3Techs

Emphasis on both examples, mine and the data is accurate as of February 14th, 2023. Also worth mentioning that this is just one data source. You could merge various sources, but the difference between the majority of the web industry—AKA people slinging websites with WordPress etc—and the loud, but very small web industry is huge.

Even when you consider the reality that these technology paths likely cross and some sites hide the tech they are using, the difference is extreme. Even if you add together React and Vue, it’s still less than 5% of all websites.

It’s also worth caveating (for the sake of my mentions) that React and Vue usage doesn’t mean that we’re only talking about single page apps (SPAs). Those likely account for such a small percentage of the web, it’s barely worth counting. That percentage is likely going to fall now too, because the JavaScript community have seemingly finally woken up to the idea that SPAs are not good actually. Shame about the decade we lost on them…

Just for fun, here’s React and Vue’s combined, rounded market share, visually represented by 100 people:

CodePen Embed Fallback

Now, here’s WordPress:

CodePen Embed Fallback

The point I am trying to make

It’s understandable to think that JavaScript frameworks and their communities are eating the web because places like Twitter are awash with very loud voices from said communities.

Always remember that although a subset of the JavaScript community can be very loud, they represent a paltry portion of the web as a whole. This means that when they say something like “Best practices don’t actually work”—what they mean is “Best practices don’t actually work for a small subset of less than 5 percent of the web”.

Now when you look at it like that, it makes you wonder why we give these people such a large stage while the very quiet majority don’t get a voice at all. The very quiet majority are out there building more than 90% of the web, after all.

Even a slight change in that dynamic would likely have a massive positive impact.

Update: I just want to emphasise that W3Tech’s data is for the top 10 million websites. Based on that, React’s < 4% share is probably microscopic on the web as a whole. Even if you discount that: considering React has been around for a decade now, < 4% share of the top 10 million websites is pathetic, considering how much we are made to feel like it is the “biggest framework” (well, at least in bundle size, that’s true).

Another point I want to address is the “well, the web is massive and old, so of course there are loads of WordPress sites”. This is very true, but WordPress keeps growing in popularity*! I’d accept that if its share was depleting. Also, again, all of the above is in reference to the top 10 million websites, which if React is as popular as it’s made out to be, it would feature a lot more prominently…

* based on when I last monitored this report for my talk on CUBE CSS when WordPress’ share was around 36%.

This is why performance matters

Mon, 13 Feb 2023 18:34:52 GMT

I just had a power cut and wanted to check how long it would be out for. The UK Power Networks power outage tool is handy for that, but there’s a problem: I only had a 3G network connection and the site is heavily dependent on JavaScript.

Can you guess what happened? Yep: I couldn’t access the content I really needed to get access to.

In this video, I tried to load the site. It took just under a minute to show any content, and then I ended up giving up completely after watching it load for 3 minutes. 3 minutes. Obscene.

I understand that the nature of how they display content requires JavaScript, but some progressive enhancement would be ideal in this situation. It could have rendered a simple list of incidents with HTML, then, if the JavaScript loads (not when), it could replace that with the map.

Performance matters because you never know what conditions your site will be met with, regardless of the “need” for JavaScript.

At the very least, test for very slow connections and consider who you’re building for.

The Index is launching next week

Fri, 10 Feb 2023 10:48:30 GMT

On Monday, the first issue of the Set Studio newsletter: The Index will be going live!

You may remember the newsletter that I used to run a few years ago: the Piccalilli Newsletter. Back then, I used to feature lovely websites, inspiring articles, helpful tutorials and signal-boost content from writers who weren’t getting nearly enough attention for their great writing.

The Index is going to be just like that newsletter!

The important thing is that it will be web first. Sure, we will be sending it to subscriber’s inboxes, but you’ll also be able to subscribe to a specific RSS feed, here. You can subscribe to the newsletter emails here.

I can’t wait to get stuck into this newsletter stuff again!

One day left

Wed, 08 Feb 2023 07:00:34 GMT

There’s only one day left to find your pals on Mastodon via Twitter before the free Twitter API gets shut down. Even if you’re not planning on leaving Twitter, it’s probably worth doing it anyway.

Services that are still working:

https://pruvisto.org/debirdify

https://fedifinder.glitch.me

Buttondown is pretty cool

Tue, 07 Feb 2023 14:17:20 GMT

I’m researching email stuff for the incoming Set Studio newsletter: The Index.

What I’m after is something that just does email and can be operated from afar. The reason for this is that The Index will be web first. Essentially it’ll be a blog category that users can subscribe to with RSS or email. Therefore email is very much a second class citizen in this case.

Buttondown has been on my radar ever since I was running the Piccalilli Newsletter (RIP). This was a few years ago now though and it looks like Buttondown has come along loads.

The killer feature for me: Buttondown will take an RSS feed then automatically slurp up the content (in their words) and then send it to our subscribers. Job done.

They seem like a good company too, so I’d say this is a winner.

My favourite 3 lines of CSS

Mon, 06 Feb 2023 14:18:46 GMT

Read this post in Japanese.

In Every Layout, we wrote about The Stack. It’s a marriage of Heydon’s Lobotomised Owl selector and my method of managing Flow and Rhythm with CSS Custom Properties.

.stack > * + * {
  margin-block-start: 1.5rem;
}

Let’s break the selector down: every direct sibling child element of .stack has margin-block-start added to it. This is achieved by the Lobotomised Owl selector, but the > combinator is added to prevent margin being added recursively. In writing modes that are left-to-right or right-to-left—such as English or Arabic—the margin is added to the top of the element.

I’ve been obsessed with this particular snippet for years now, and in recent years, I’ve enhanced it further with the flow utility:

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

As you can see, this is very similar to The Stack. The only difference aside from the name, is the use of Custom Properties—specifically the fallback value.

How fallback values work in CSS Custom Properties

If you try to grab a CSS Custom Property value that hasn’t been defined, the initial or inherited value will be used instead, but if the Custom Property is invalid and you don’t provide a fallback, it’ll fail.

In the context of the .flow utility, this would be pretty bad, because if you’ve removed element’s default margin, like I do in a reset, you could end up with no space at all.

The fallback value for .flow gives us two benefits:

There’s a sensible fallback for if --flow-space is accidentally set as an invalid value
If --flow-space doesn’t exist, the margin-top-value will be 1em, which will be relative to the element’s computed font size

The space is 1em by default, so if the font size is larger, there will be more space. This is a handy way of maintaining flow and rhythm if you’re using a type scale.

Why do I use flow over The Stack?

I get asked this a lot and it’s a valid question. The reason is twofold.

Firstly, I use this utility everywhere on projects. At our studio, it is in every project we do, and probably will be forever. The reason is that because we use fluid type and fluid space, the .flow utility’s flexible, fallback-based setup works in harmony with our methodology of letting the browser do all the hard work for us.

Secondly, in contexts like prose content (often long-form content like this article), we like to manage how certain HTML elements space themselves. For example, we might want to reduce the space of elements that directly follow headings and increase the space around figure elements.

This snippet is from this site you’re looking at now:

.prose :is(h2 + *, h3 + *, h4 + *) {
  --flow-space: var(--space-s);
}

What the snippet does is:

Look for elements that directly follow a h2, h3 or h4.
Assign --flow-space with the small item from the spacing scale

As for .prose itself, I’ve set the following:

.prose {
  --flow-space: var(--space-m-l);
}

By default, I tend to leave --flow-space as undefined, but in .prose contexts, I like a nice chunky bit of space between elements, so because Custom Properties are affected by specificity and the cascade, I create that more specific value.

With the spacing value used for --flow-space—which computes to around 2.5rem—we get consistent space between every element.

Why use margin and not gap?

Again, I get asked this a lot. I remember when Safari finally pulled their finger out with gap, I sent Heydon a message saying we should make everything on Every Layout gap, which we were rather excited about. While we were putting actual thought into the second edition—which introduced gap to the layouts—we quickly realised we didn’t want to change The Stack.

This was partly down to the fact that in order to use gap, we would have to make The Stack, either a flex or grid parent. This could cause all sorts of problems for people that grabbed the layout and dropped it in existing projects. This makes up a very large portion of the people who use Every Layout in the real world.

Along with that, all of the control is put on the parent and not the elements themselves. Back in the context of .flow and --flow-space with a fallback value: this wouldn’t be possible with gap. This is because gap is set on the parent (.flow) and controls the space between child elements. The parent is in complete control and the child elements have no say in what gap is at any given moment.

Lastly, along with the flexibility of letting --flow-space be affected by the cascade, and if it’s not set, letting .flow inherit spacing values from the child element it affects. The other key reason I don’t like to use gap is Logical Properties. I personally want everything we build at the studio to use Logical Properties as much as possible, because you get much better multi-language and reading mode support out of the box. They’re really well supported now, too!

Wrapping up

I honestly should have retired after making this iteration of .flow:

.flow > * + * {
    margin-block-start: var(--flow-space, 1em);
}

Especially now that we use that and the rest of the layouts from Every Layout at Set Studio. We’re essentially just colouring in front-ends at this point—apart from the odd occasion when we create a complex specific layout, where we use CSS grid layout to its full potential.

The main reason I’ve written this post though, is to send people to it when they ask why I use .flow or use margin, but also, I hope you’ve seen how damn powerful CSS Custom Properties are. They’re certainly more than just CSS variables, that’s for sure.

Twitter API unknowns

Fri, 03 Feb 2023 10:09:24 GMT

You may or may not have realised that I post only via my blog to Twitter now because that place is hell, but I recently started using Front again so I could get DMs etc as an inbox of sorts. As frustrating as it is, I get a lot of opportunities via Twitter still, which I can’t ignore.

Front is bloody great. I tried it a few years ago when Twitter was getting on my nerves and it worked well. I just couldn’t really justify the cost then.

The problem now is that next week, Twitter are removing free access to their API. It’s going to have huge consequences for bots, login with twitter controls and of course, Fedifinder (use it now while you can).

I really hope Front won’t be affected with this incoming change. It feels like a decent solution until Twitter inevitably succumbs to the whims of its petulant man-child owner.

I guess we’ll all see what happens next week…

How the CSS box-sizing property works

Wed, 01 Feb 2023 12:19:26 GMT

To celebrate International Box Sizing day—first celebrated by Chris Coyier—I thought I’d write a run-down of how the box-sizing property works. It’s one of the first things to trip you up when you’re learning CSS, so hopefully, this’ll be useful for those folks.

If there’s ever one really important thing to remember when writing CSS: it’s that everything displayed by CSS is a box. Regardless of how an element looks visually, it’s still a box.

Even when an element has 100% border-radius, the browser treats it as a box as demonstrated by the dashed border

Take the above example: it’s visually a circle—by proxy of border-radius—but it’s still a box, as far as the browser is concerned.

This is really important to remember when you’re working with CSS, but what’s even more important is understanding how these boxes are both sized and how they interact with their surrounding, sibling boxes.

Padding, borders and the content box

When we add padding and borders to an element: by default, their values will be combined with the computed width and height. This is because the width is applied to the content box in the default box model. This can be confusing—especially when you are first starting out with CSS.

.box {
  width: 100px;
  padding: 10px;
  border: 10px solid;
}

The width, padding and border contributing to a 140px computed value even though 100px of width is applied

What happens here is your box’s computed width is actually calculated as 140px. This is because each side of the border box is 10px (20px combined), and each side of the padding box is 10px (20px combined). The width of the box only accounts for these inline sizes.

This is how the box model works, out of the box (pun intended), and it’s expected behaviour. Most of the time though, it’s preferable for this not to be the case, so we add this little snippet of CSS to give us some more sizing predictability:

.box {
  box-sizing: border-box;
}

This completely transforms the browser’s calculation because what it says is “Take the dimensions that I specified and also account for the padding and border too, instead of adding them to the size”. What you get as a result, is a box that’s 100px wide, instead of 140px wide, just like you specified when you set width to 100px!

The fixed box with a predictable width. The lighter border shows the computed width when you don’t have box-sizing: border-box.

The most effective way of showing you this is with a demo. In this demo—which I made when I wrote the Learn CSS course—the box model parts are labelled. When you toggle the box-sizing: border-box switch to on, the content box, padding box and border box values are effectively ingested by the content box, because the width property is applied to the border box, rather than the content box.

CodePen Embed Fallback

Most folks add the box-sizing rule as a global selector to a reset, or default normalising styles, so to demonstrate a more complete example, this is how our CSS now looks:

/* Reset rule */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Box component */
.box {
  width: 100px;
  padding: 10px;
  border: 10px solid;
}

What this example does is instead of just targeting the box with box-sizing, it targets every element on the page and any pseudo-elements. This means that everything you add to a page, you can guarantee that your boxes will be the sizes that you think they are. Setting global styles like this is a great way to keep your CSS as simple as possible, because that’s how it’s designed to work.

Wrapping up

You can read more on box sizing over on MDN, where there is some very good documentation. You can also read the box model lesson from the CSS course I wrote.

Setting box-sizing: border-box is such a life saver for front-end developers. The days of CSS before box-sizing: border-box arrived were very frustrating days indeed, so hopefully now you know how it works, sizing elements in CSS will be much less frustrating.

The Artist In The Ambulance – Revisited

Wed, 01 Feb 2023 10:27:09 GMT

My favourite band, Thrice, have revisited my all time favourite album, The Artist In The Ambulance. It’s bloody marvellous!

It’s so good to hear this album, but more in the style of modern Thrice.

Speed for who?

Tue, 31 Jan 2023 14:55:02 GMT

Frameworks are often touted as something like “a lightning fast development experience” and that’s fine I guess, but the speed is in the wrong hands. Why not “a lightning fast experience for your users”?

Sure, some frameworks will claim to be very fast for end-users with some very meticulously, massaged data to “prove” that, but as Zach points out in this great post, it means nothing when the output bundle sizes are astronomical off the bat:

Well, wait. When you’re straddling the divide, you know that Remix (67.7 kB compressed) and Next.js (90 kB compressed) have not meaningfully reduced their bundle sizes at all. Measurement reveals that bundles are growing: Next.js was 72.2 kB compressed in 2021.

I’ve always found the focus on developer experience as a framework feature uncomfortable. The focus is all in the wrong place: spoiled developers vs people trying to use your website/app. I personally think developer experience is one of the least important aspects.

When I’ve mentioned that before, I often get a response like “yeh but because developer experience is better, we can do good work for users, faster”, but I’m yet to actually see that happening. Instead I see fad-chasing, like single page applications (SPAs), blockchain and now “AI” like Copilot and ChatGPT…

If a framework actually came along with a pure focus on user experience and thoroughly optimised output—something like a 99% reduction in output JavaScript vs current frameworks—I would be interested. As Dave pointed out in this article, that goes against the new framework trend.

Only recently too, the head-honcho of Vercel—who are responsible for the monstrously large output generating framework—Next.js, tweeted this rather cryptic tweet:

SPAs were a zero interest rate phenomenon
— Guillermo Rauch (@rauchg) January 29, 2023

I personally think this is broetry that really translates to “remember how we consistently said that SPAs are much better and faster than real HTML pages? Guess what, we were actually grifting our framework and now we’re going to go against that original grift with a different grift for the same framework”.

I dunno, maybe I’m being salty, but it’s justified saltiness. I actually genuinely care about users, you see. It’s why I constantly prattle on about progressive enhancement. Mainly, that makes everyone’s experience better, but the most important thing for me is that data is expensive.

Sure, if you’re based in San Francisco and you go to your adult daycare—sorry, I mean startup office—with ultra high-speed broadband: that 90 kB baseline compressed output might not feel like a lot, but what about if you live in Saint Helena? At the time of writing, a gigabyte of data there costs around $41 USD.

Your initial response to that might be “there’s a lot of kilobytes in a gigabyte”, and yes, you’re right, but there’s also a horrendous amount of framework-powered sites that could be HTML and CSS. Also, remember 90 kB is the framework’s default compressed output. Absolutely shoddy stuff.

You might also be tempted to say “our users only live in ‘developed countries'” (god I hate that term), but that’s like saying “all of our users are on desktop“. It’s also a piss-poor excuse for not building for everyone.

I guess what I’m winding up to say here is developer experience really isn’t important—especially when frameworks haven’t even got the absolute baseline experience anywhere near where it needs to be to service a world wide web. A world wide web that’s accessed with slow, expensive connections and cheap, underperforming hardware. How about taking a bit of “DX” on the chin to focus instead on “why are we using this framework that potentially excludes the majority of users?”.

As Alex says: a lost decade. I couldn’t agree with that sentiment more, to be honest.

Animated Set Studio Logo

Mon, 30 Jan 2023 14:02:40 GMT

Amit Sheen made this amazing animated version of my agency‘s logo. It’s cool as hell!

You should check out their other stuff too. They’re super talented.

https://codepen.io/amit_sheen/pen/gOjzgBL

CodePen Embed Fallback

Jotter

Mon, 30 Jan 2023 11:25:25 GMT

Nearly 3 years ago, I made a little Progressive Web App (PWA) with a simple goal. I wanted a web-based version of Tyke. It’s the simplest Mac app ever: a text box that pops out of your menu bar so you can take quick notes.

Tyke in action

I didn’t like that Tyke was native only and a rather small window too, so I created Jotter back in October 2019.

All it is, is a <textarea> that if JavaScript is available (not when, if), a little app kicks in and syncs the content of that <textarea> with local storage.

Jotter in action

For those interested, this is the app.js in all its glory:

import Content from './components/content.js';

class App {
  constructor() {
    this.today = new Date();
    this.todayLabel = document.querySelector('[for="jotterDay"]');
    this.weekLabel = document.querySelector('[for="jotterWeek"]');
    this.contentInstance = new Content();
    this.themeToggle = document.querySelector('[data-element="theme-toggle"]');
    this.jotterInstances = document.querySelectorAll('[data-element="jotter"]');

    // Show the button now that the JS is ready
    this.themeToggle.removeAttribute('hidden');

    // Set todays date on day label
    this.todayLabel.innerText = `Day notes (${this.today.toLocaleDateString(
      navigator.languages ? navigator.languages[0] : 'en-GB',
      {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      }
    )})`;

    // Set week number on week notes
    // Logic nicked from here: https://gist.github.com/IamSilviu/5899269
    if (this.weekLabel) {
      const firstOfJan = new Date(this.today.getFullYear(), 0, 1);
      this.weekLabel.innerText = `Week notes (Week ${
        Math.ceil(((this.today - firstOfJan) / 86400000 + firstOfJan.getDay() + 1) / 7) - 1
      })`;
    }

    // Run the initial content application and the listener
    this.applyContent();
    this.listen();

    // Set theme auto-apply and toggle apply
    this.applyTheme();
    this.themeToggle.addEventListener('click', () => {
      this.applyTheme(true);
    });

    // Prevent save shortcut
    document.addEventListener(
      'keydown',
      function (e) {
        if ((window.navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey) && e.keyCode == 83) {
          e.preventDefault();
        }
      },
      false
    );
  }

  // Listens for the jotter box content changes and applies to local storage accordingly
  listen() {
    this.jotterInstances.forEach((jotter) => {
      jotter.addEventListener('input', () => {
        this.contentInstance.save(jotter.getAttribute('data-id'), jotter.value);
      });
    });

    // If content changes in another tab, sync it up
    window.addEventListener('storage', (evt) => {
      const {isTrusted} = evt;

      if (!isTrusted) {
        return;
      }

      this.applyContent();
    });

    // Toggle focus attribute on body when jotter is focused or blurred
    this.jotterInstances.forEach((jotter) =>
      jotter.addEventListener('focus', () => document.body.setAttribute('data-state', 'focus'))
    );
    this.jotterInstances.forEach((jotter) =>
      jotter.addEventListener('blur', () => document.body.removeAttribute('data-state'))
    );
  }

  // Loads the content from the conten interface and applies it
  applyContent() {
    this.jotterInstances.forEach(
      (jotter) => (jotter.value = this.contentInstance.load(jotter.getAttribute('data-id')))
    );
  }

  // Apply the dark mode or light mode and optionally store in localStorage
  applyTheme(store = false) {
    let currentSetting = localStorage.getItem('user-color-scheme');

    // No storage found, so try to parse from CSS
    if (!currentSetting) {
      currentSetting = getComputedStyle(document.documentElement).getPropertyValue('--color-mode');

      if (currentSetting.length) {
        currentSetting = currentSetting.replace(/\"|'/g, '').trim();
        localStorage.setItem('user-color-scheme', currentSetting);
      }
    }

    // Store in localStorage if required
    if (store) {
      const reverseSetting = currentSetting === 'dark' ? 'light' : 'dark';

      localStorage.setItem('user-color-scheme', reverseSetting);

      // Apply the reversed setting to HTML element and toggle button
      document.documentElement.setAttribute('data-user-color-scheme', reverseSetting);
      this.themeToggle.innerText = reverseSetting === 'dark' ? 'Light mode' : 'Dark mode';
    } else {
      // Apply current setting setting to HTML element and toggle button
      document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
      this.themeToggle.innerText = currentSetting === 'dark' ? 'Light mode' : 'Dark mode';
    }
  }
}

const appInstance = new App();

Good ol’ vanilla JavaScript with no build step. It runs like a dream and Just Works™.

I only added one “major feature” since then: the ability to have weekly and daily notes next to each other:

Weekly notes in action

This is the key point of this post, really. Because I kept the tech stack super simple and built with progressive enhancement at the forefront, I barely ever have to touch it any more. I shipped a little update today, a simple view with no visible labels, which is the first time I’ve touched it since 2021!

It’s also a good case study of keeping things simple and then maintaining that attitude. Jotter doesn’t ever need to do anything more complex than it already does. Hell, it would be nice to have some sort of storage sync, but I think until browsers sync local storage with your other devices, it’ll just stay local because I really don’t want to add a complex build step or back-end.

The best thing about Jotter is that I know that whenever I need to make some notes, it will be there—ready—and it’ll work, because if all else fails, it’s just a humble little <textarea>. I’d honestly say its the work I’m most proud of in my entire near 15 year career as a designer and developer because of this.

So, if you need a quick web-based notepad that’ll always be there for you: give Jotter a try today!

Don’t snark on people who are learning

Thu, 26 Jan 2023 14:57:39 GMT

I saw a post on mastodon snarking at “the current state of web development” and it was a screenshot of a forum where someone was asking why nested <h1>s got progressively bigger, with a code sample that looked like this:

export default function Home() {
  return (
    <>
      <h1>
        test
        <h1>test2
          <h1>test3</h1>
        </h1>
      </h1>
    </>
  )
}

There’s two things going on here: nesting headings is not allowed, as per the spec. Only phrasing content is allowed; not heading content, which a heading falls under.

The second point is that the user agent styles (styles that a browser ships with) will size headings using em units. An em unit is a relative unit that is a ratio of its parent’s size. For example, say the computed size of a heading’s text was 30px and the child element had a font-size of 2em, it would be computed as 60px. This is why the user’s headings kept growing and growing, because each nested item was adding to the ratio each time.

See, that wasn’t hard was it? Straightforward, explanations.

I get the feeling that when folks see some JSX, like the code example above, they presume that the person writing the code is “learning in the wrong way”. There is no right way to learn. There never has been.

Everyone comes into development from different backgrounds, skill-levels and technologies. Some will learn HTML first, which yes, is ideal, but since when was anything in the real world ideal? Development is a very sought-after skill, so naturally, bootcamps will train users to match industry demand: AKA, JavaScript frameworks.

The point I’m making is instead of getting your snark on, help people learn instead. I’m extra sensitive to this because I’m training someone up at the moment, and damn, we take for granted a lot of “expected” knowledge and appreciation of the “right way” that straight-up doesn’t exist for a beginner.

Remember your roots, essentially.

Update to Build Excellent Websites

Thu, 26 Jan 2023 13:31:51 GMT

I’ve just added a little update to our Build Excellent Websites site: https://buildexcellentwebsit.es.

It now has a link to one of the versions of the talk I did about it, where I broke down how I designed and built that site and how you can improve the websites you build by letting the browser have more control.

It’s also got a link to the source code in the footer, so if you want to mess around and play with it, it’s ready and waiting for you!

Looking for a small project for our Junior Developer

Tue, 24 Jan 2023 15:39:39 GMT

I don’t know if you know already, but at my agency—Set Studio—we hired a junior developer—Liridon—who we are training from scratch. They’d never written a single line of code before December 2022, but are already flying with their internal training!

Right now, we are training them up with a collection of courses and small internal projects which is fine, but I know they’ll learn the most from a real life client project.

We are looking for a smaller-scale project for them to complete, with the rest of the team. Right now, most of our client work is way too big and complex to introduce a junior of their experience to. We’d hate for that to end up reducing their confidence. We feel like a smaller-scale project would be a great first one for them to do for the agency because of this.

Liridon is currently specialising in front-end development. Mainly HTML, CSS and JavaScript. We’re also going to get them into working with static site generators like Eleventy and CMSs like WordPress and Sanity.

The ideal project for Liridon would be a small to medium website. Even a one-pager, like a conference site would be incredibly useful for them. The key is limited scope that would benefit from some world-class design.

We’ve already made some pretty cool stuff at Set and are building Liridon up to being able to make stunning front-ends, just like these

Of course, this project would be done at an extremely reduced rate because as we all know from starting out, there will be rough edges. I’m confident that what Liridon, and the rest of the Set Team will deliver at the end will be stunning, though. This would be an ideal project for a startup that maybe didn’t think they had the budget for an agency to work on their project.

If this sounds good, I’d love to hear from you to chat things over in more detail at andy@set.studio

Improving “likes” on my site

Mon, 23 Jan 2023 14:39:01 GMT

I recently published an article that got quite a bit of attention and it resulted in a lot of “likes” at the bottom of the page. I pull likes from Mastodon, Twitter and anyone who posts a webmention “like” to my site.

First of all the block was ridiculously large…

A ridiculous wall of faces

Secondly, this particular post was loading around 40mb of images to render those likes 😱

The fix

The first part was leaning in to HTML’s built in lazy loading capability. This way, the browser only loads the images if they are in, or near the viewport boundary (depending on browser):

<img loading="lazy" src="<?= $avatar; ?>" alt="<?= $like->comment_author ?>" />

Next, I got my sketch on. The idea for display logic was:

If there are more than 15 comments, render a <details> element, with the <summary> being an overview of the comments
If not, render the comments as they are

My rough sketch in procreate

With the sketch done, I had some HTML and PHP logic to write:

<?php if(count($likes) > 15): ?>
  <details>
    <summary>
      <span>Liked by <?= $likes[0]->comment_author; ?>, <?= $likes[1]->comment_author; ?>, <?= $likes[2]->comment_author; ?> and <strong><?= count($likes) - 3; ?> others</strong></span>
    </summary>
    <!-- Avatars go here -->
  </details>
<?php else: ?>
  <div class="sidebar">
    <h3 class="text-base">Liked by</h3>
    <div>
      <!-- Avatars go here -->
    </div>
  </div>
<?php endif; ?>

This renders the <details> and <summary> if there are more than 15 comments, or renders the original <h3> and <ul> of likes, but this time, I use The Sidebar from Every Layout to render the heading inline with list.

Styling up the the <details> and <summary> smells like global CSS, using the CUBE CSS principles, so I added this CSS as high up as I could:

summary {
  display: flex;
  align-items: baseline;
  line-height: 1.2;
  gap: 0 1ch;
  cursor: pointer;
  list-style: none;
}

summary:hover,
summary:focus-visible {
  color: var(--color-primary-shade);
}

summary::before {
  content: '+';
  display: block;
  color: var(--color-primary);
  line-height: 0.5;
  margin-inline-start: -2ch;
  transform: scale(1.4);
  transform-origin: right bottom;
}

[open] summary::before {
  content: '—';
}

/* Hide default marker */
summary::-webkit-details-marker,
summary::marker {
  content: '';
  display: none;
}

This renders either a + or — depending on the closed and open state. A fun trick is because I’m using a monospaced font, I can use ch units for gap and margin-inline-start, to get a nice negative indent, just like I do with headings on this site too.

Also, this is why I’m using transform to scale the symbol, because then, the ch unit is still predictable. If I sized it with font-size, there’d be weird in-between sizes, so I’d have to do margin-inline-start: -1.6ch; or something.

The last neat CSS trick was this:

.comments .sidebar {
  --sidebar-target-width: max-content;
  --gutter: var(--space-xs);
}

I modified The Sidebar slightly by making it completely configurable with CSS Custom Properties:

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

Because our heading is the first child, I can use max-content to set the --sidebar-target-width, which means it’ll only ever be as big as the text itself. Lovely stuff.

And with all that, we get the finished products:

The details and summary view

The standard view with the sidebar

“Most of our users are on Desktop”

Sun, 22 Jan 2023 09:32:23 GMT

Whenever someone says “our analytics tell us most users are on desktop”, I always think of this diagram.

Back in WW2 they wanted to work out why planes were being shot down, so when planes returned, they noted where the bullet holes were most present, with a view to further protecting those areas on the plane.

On the surface, that checks out right? But what they missed was these were the planes that returned. Planes that got shot in the engines (notice how the engines have no dots on the diagram) never returned. They missed out this crucial pattern because they were looking at the data all wrong.

It’s classic survivorship bias.

Anyway, how is this related to “most of our users are on Desktop”?

Yes, your analytics may skew towards desktop usage, but is that actually accurate? Is your site super slow on mobile devices? Does it even work on mobile devices? Do mobile users land on your non-optimised site and bounce out to a competitor before your analytics load?

Sure, some sites are desktop only, but while mobile usage continues to grow and desktop continues to fall, it makes sense to at least dig deeper to make sure you know why you have more desktop usage.

Tinkering

Sat, 21 Jan 2023 09:41:22 GMT

The thing I love the most about my personal site is just tinkering away at it over time.

I wanted to put a little box at the end of proper posts—y’know like css stuff—so if someone liked reading it, the could see about me and the agency.

My new little box

I only wanted to show it only if my post was in a couple of defined categories, so I slung a bit of PHP and HTML together:

<?php
  $allowedCount = array_filter(get_the_category(), function($cat) {
    $allowedCategories = ['CSS', 'Agency', 'Design', 'Development'];
    return in_array($cat->name, $allowedCategories);
  });
?>
<?php if(count($allowedCount) > 0): ?>
  <div class="bg-primary-glare p-m flow">
    <p>👋 Hello, I’m Andy and I’ll help you build fast & visually stunning websites.</p>
    <p>I’m the founder of <a href="https://set.studio">Set Studio</a>, a creative agency that specialises in building stunning websites that work for <strong>everyone</strong>. If you’ve got a project in mind, <a href="mailto:andy@set.studio">get in touch</a>.</p>
  </div>
  <hr />
<?php endif; ?>

I added a utility class or two and job done! A nice little box that only shows on the right sort of posts.

I’ve decided to let this blog post to Twitter

Thu, 19 Jan 2023 11:03:13 GMT

I’ve bailed on Twitter since Elon Musk took over and have no plans to return there as an active user. I do genuinely believe it is in decline, but I’ve also accumulated a heck of a following there over the last few years.

A lot of people haven’t come over to Mastodon either (you should, it’s great), and now I’m getting back into writing some proper content, I thought it wouldn’t hurt to let this blog post out there automatically. Jetpack makes that easy and I know a lot of folks still rely on Twitter to discover posts (RSS is great for that, pals).

I’m justifying this as a perfectly good use of the POSSE: Publish (on your) Own Site, Syndicate Elsewhere. Elon Musk doesn’t deserve content, but as I see it, I’m just posting links to my content that I own.

Now I’ve had a long period of time away from Twitter, I’m less resolute to boycott it, but I also don’t want to go back there because the mental health benefits of not being on the hell site have been incredible. This new outlook feels like a happy medium until the eventual downfall of Twitter. I also don’t regret deleting my tweets and creating my own archive of them.

The beauty of POSSE is that when stuff gets beyond bad on Twitter, all I have to do is turn a checkbox off on my website. I’m in control of that: not a petulant man-child Billionaire.

What I won’t do is respond to comments on Twitter though. I absolutely do not want to go back there, so if you want to discuss stuff, pop a comment on my actual blog instead!

Front-end is so much more than building designs

Wed, 18 Jan 2023 18:00:38 GMT

I was unfortunately made aware of this tweet today and it felt like a blast from the past. Y’know what I’m talking about: the old days when you’d get a PSD from a designer and build it. It’s a real simplistic way of looking at front-end development so I thought I’d jot down what I do in that situation, hypothetically in definitely not a sub-tweet fashion.

To be clear, I am very much a designer who happened to get into front-end, so I guess I approach things differently than most. Also, I very rarely build things—let alone design them. These days I spend way more time doing pre-production work and spreadsheets, running my agency.

Still, maybe this will be useful to someone.

Hypothetical scenario: A high-fidelity design is plopped on my desk and I’m asked to build it

First up on this one: I’d straight-up not do this now because a hell of a lot of steps have been missed, but let’s persist with winding the clock back a few years. Let’s also say this is from scratch, greenfield stuff. Not an existing codebase.

Getting started

I’d start by printing out the mockups. You heard me correct: I would print them out.

Then, I’d grab a couple of different colour pens:

One for landmarks (<main>, <article> etc)
One for flow markup (headings, paragraphs etc)
One for layouts: straight-up divs that I’d need to wrap around content
One for pushback

I’d start with pushback—especially if there’s some show-stoppers in there. This will happen too because if a high fidelity mockup has just been put together without planning and circular communication between developers, designers, project managers and clients/stakeholders then there will be massive oversights.

Examples of pushback could be a complicated interaction that would be simplified with content strategy or content that follows no logical order, but looks nice, visually. Oh, of course, lots of pushback on the small grey text that would undoubtedly be present…

Ok, so let’s say the designer has done another pass now and I think we’ve got something cooking. It’s probably not perfect, but we’re ready to go (with a fresh print-out).

Landmarks

I grab my landmark pen and draw boxes (everything is a box on the web), making sure I get my <header>, <nav>(s), <main> and <footer> down first. Then I break content into <articles> and so-on.

Flow markup

With the main boxes in place, I start annotating the page with flow content. I start with headings: making sure a sensible heading hierarchy is in place. Then I move onto paragraphs, lists and so-on. After this point, we’ve got most of the core markup planned out.

Layouts

Time to get layout on. These days, that’s a solved problem most of the time because of Every Layout, but that doesn’t exist in the past, so I determine where flex can be useful and where grid can be useful. Remember these have had almost full browser support for over half a decade (even longer in flexbox’s case). For this exercise, I again, draw boxes and annotate them.

Time to build

With the plan in place, it’s time to write some gosh-darn semantic HTML. It’s a case of working through the printed plan in the same order I annotated it. By the end of this part, there should be a fully functional webpage that you could deploy right there and then. Progressive enhancement, baby!

Only at this point does any CSS more complicated than basic layout cross my mind. I’ve certainly not considered frameworks, that’s for sure. With a solid foundation of HTML already written, it would be a shame to then pollute that with more right?

Guess what, it’s time to go back to the printer, but this time, I get a pair of scissors out and cut out all the patterns and all the stuff I detect as global CSS. This helps me to organise and structure the CSS that’s about to be written and gives me precious time to actually think about what to name blocks and what to push up as high as possible in the CSS.

Then you know, maybe at this point, I’ve detected that some utility classes will be useful. I’ve also got a plan for what blocks, compositions and exceptions need to be written (but remember CUBE doesn’t exist yet, so let’s say we’re using BEM).

Only at this point do I feel ready to write a single line of CSS.

Going slow is fast

I guess the point I’m making in a way here is that I could never win a “dev race” because it takes me ages to even get to the point of writing code and that’s been the case for a lot of years now. The benefit to being like this though is I get to put out fires before they even start. If I’m racing along trying to write code as fast as possible, I’m gonna start plenty of fires instead. Short-terms gains with lots of long term pain comes from racing through code.

I’ve been doing this web thing a long time and let me tell you, I’ve started a lot of fires in that time. Only by starting those fires have I developed into a more experienced designer and developer who knows the danger signs and importantly, learned the value of working slowly and methodically. The irony is that I’d probably ship something of acceptable quality quicker than someone who is focussed on “dev speed”.

Flinging myself back to the present day and into my role at Set Studio, no high fidelity design is happening before there’s been a shit-load of planning and shaping of the work. A designer certainly wouldn’t fling a high-fidelity design at a developer either, like our hypothetical example.

Those folks are instead, working hand-in-hand with each other right from sketches, to prototypes, to lush high-fidelity output. That way, even more fires get put out before they even start!

Dear email marketers

Tue, 17 Jan 2023 16:39:15 GMT

Dear email marketers,

I can confirm that I didn’t “unsubscribe by mistake” when I clicked your 8px, low contrast unsubscribe link, buried at the bottom of the email. It would be a miracle for anyone to click that by mistake—let alone find it in the first place.

Lots of love,
Andy

Line heights in CSS work better with ratios

Mon, 16 Jan 2023 17:26:44 GMT

Say you’ve got this CSS and you need to set a nice, compact line height:

h1 {
    font-size: 40px;
}

You open up the designer’s static design and it says the line height should be 44px. Easy peasy, right?

h1 {
    font-size: 40px;
    line-height: 44px;
}

Technically, yeh: easy peasy. Let’s take a look at how that looks.

CodePen Embed Fallback

Now let’s say the font size needs to be changed to 80px instead. How does that look now?

CodePen Embed Fallback

Pretty crappy, right?

“Just change the line height again”, I hear from the distance. Yeh, but what if the line height wasn’t set in the same rule as the font size? You’re gonna get disconnect where you really don’t need to.

Step up, ratio-based line height.

I’d say three good ways to do this would be:

Unitless line height, like this: line-height: 1.1
Em-based line height, like this: line-height: 1.1em
Percentage-based line-height, like this: line-height: 110%

I’d also say it’s a good idea to use a relative unit to size the text while you’re there to give the browser—and more importantly—the user more control. Let’s pick a rem unit, which will be based off the user’s system font size, which if not set by the user, will be around 16px.

That switches our original CSS to this:

h1 {
    font-size: 2.5rem; /* 40 divided by 16 */
    line-height: 2.75rem; /* 44 divided by 16 */
}

Be wary of using em and % because the computed value is passed down to descendants. This article by Eric Meyer is a really good explainer. In short, I always recommend unitless if you want predictability

If we change the line-height to my preferred approach: unitless, the CSS now looks like this:

h1 {
    font-size: 2.5rem;
    line-height: 1.1;
}

Now, if the font-size was to change to something like 5rem (or 80px in the old way), that line height would change automatically with it and always be in proportion with the text.

Check out this demo and play with the font-size slider. You can also turn ratio-based line-height off to really see the improvement.

CodePen Embed Fallback

Why though?

Good question!

Setting very specific values may feel like you’re in more control, but you’re actually rescinding control by introducing fragility in the form of overly-specific CSS. The web is flexible and not at-all specific and we have no idea what the setup for our users is so the best approach is to make things as flexible as possible so your website works great for everyone.

This is especially the case when newer techniques such as fluid typography are considered. If the font size is determined like this…

h1 {
    font-size: clamp(2.5rem, 10vw, 5rem);
    line-height: 1.1;
}

…it won’t matter what the browser computes the font size as because that ratio-based line height will always be proportionate.

Handy, right?

Props to Heydon for posting about line height and inspiring me to write about it.

Careful what you click

Thu, 12 Jan 2023 14:11:47 GMT

Rickrolling is educational because it teaches you not to click on suspicious links.

I wired up my Feedbin likes to auto-post to Mastodon

Wed, 11 Jan 2023 17:14:20 GMT

A cool feature about Feedbin is you can get an RSS feed of posts you like.

You can see my feed here: https://feedbin.com/starred/91894d3eb1e30664631b3d475c213f5e.xml

What is even cooler is that can be wired up with IFTTT, which in turn, posts to my Mastodon feed.

I won’t write how to post on Mastodon with IFTTT because I have no idea what I’m doing. I followed this article instead.

I used to use Feedbin to read tweets then hook up the starred RSS feed to a horrible Node script that found the tweet, then liked it on my behalf. That was cool too, but Twitter is dead to me now.

Anyway, this is just another cool thing that RSS can do™️!

Looking to expand my Mastodon feeds

Wed, 11 Jan 2023 09:00:58 GMT

Having a private Mastodon instance is great—I love it—but my federated timeline is quiet as hell.

I’ve heard of relays, but I’m not sure I understand them. Am I right in thinking I’d subscribe to all the instances in the relay? Is it worth just setting up my own instead?

Any help would be much appreciated, so comments are very welcome indeed 🙏

Update

Big thanks to Mo Morgan for recommending this tool to me. It’s super easy and so far, seems to be working well 🙌

For when someone asks if I’ve written about my Tailwind setup

Fri, 06 Jan 2023 10:50:43 GMT

I forgot that I’d written a pretty in-depth article about how I use Tailwind—as a utility class generator—not as an all-encompassing framework. A couple of people have asked me recently if I’ve written about it and I said no, because my memory is like a colander…

Anyway, if you’re interested, here it is.

Be The Browser’s Mentor, Not Its Micromanager

Wed, 04 Jan 2023 11:59:57 GMT

I started last year with “I’m not going to bother speaking at conferences this year” and ended up speaking at 4…

I switched up my attitude because Josh invited me to speak at the legendary All Day Hey! in Leeds. I couldn’t refuse speaking there—especially in my home city (I’m from Bradford but spent way more time in Leeds in my youth).

I needed to write a new talk, so I thought I’d finally formalise what I’ve been obsessed with over the last few years: doing as little work as possible and instead, letting the browser do it for me. Browsers are smart as hell now: why do all the work yourself when they can, right?

I like to do stuff with a real-life context, so I designed a website and built it. You can see it here. The original plan was to break the site down and build key sections live, but luckily, sense took over and I opted for code screenshots and video-based demos of the sections instead.

The reason for this is I am an incredibly nervous speaker. You might not notice while I speak, but I am a trembling mess before and after I go on stage. Live-coding is very risky—especially when you get nerve-induced brain fog like I do. I didn’t want the added pressure and I’m so glad I did that, because showing code samples allowed me to explain them thoroughly to the audience, which I think turned out much better.

Anyway, there’s no point in me describing the talk. I’ll instead link you out to the recordings of each. They all vary because I wrote the talk in a modular fashion. Events vary in how long your speaker slot is, so I wrote the talk to support multiple lengths.

If there’s ever a pro tip from me, this is the one: write your talk in chunks then rehearse the shit out of it so you know how long each chunk is. Then you can show or hide those chunks in your presentation.

All Day Hey! – May 2022

The first recording is All Day Hey! where I was very fortunate to be the closing keynote. I absolutely crapped myself because I had the whole event to build up nerves (I prefer to be early in the day for this reason). I think it went well tho!

SmashingConf Freiburg 🇩🇪 – September 2022

The second was SmashingConf in Freiburg. It was an absolute honour to speak at this event. The SmashingConf series is legendary and I finally got to visit Germany. A win-win.

https://www.youtube.com/watch?v=JqnMI1AXl6w

WDC – October 2022

I love the WDC conference. It’s organised by really good people. The event had a great community vibe and the speakers on the lineup complimented each other really well. There was lots of anti-Tory sentiment to the talks too, which was great.

Content warning: swearing.

State Of The Browser – October 2022

This was a great event. I actually stepped in as a substitute speaker because another speaker fell ill with COVID. Dave, one of the organisers sent me a message while I was on holiday to ask me to step in, and because I’m a big fan of that event, I was more than happy to step in.

I’ll update this with a video when it’s available.

Wrapping up

What’s the takeaway from this whole thing? Well, I’m glad I went against my initial attitude of “no speaking” because I had a blast at these events. I got to hang out with pals I hadn’t seen for years and also meet some incredible people.

A huge thanks to all the organisers who looked after me while I was at their event too. Special thanks to Marc for rescuing me in Germany when the trains were in chaos. That was a hell of a stressful day!

This year, I’ll hopefully speak at events again. I was thinking about doing more of a design talk this year, but I’m leaning towards one on client discovery processes and project planning. If that sounds like it’ll be a good fit for your event, give me a shout!

Last.fm 2022 summary

Wed, 04 Jan 2023 10:34:17 GMT

My 2022 Last.fm year in music dropped on New Year’s day and I’ve finally gotten around to giving it a look today.

I made a conscious effort to scrobble more last year, hooking it up with Spotify, Mac and using Open Scrobbler to scrobble vinyl listening. It’s made a big difference because my scrobbles were up 47% vs last year. A tidy 12,785 scrobbles!

My listening trends for genre

The thing I’m most interested in though, is my listening trends—especially with genre. I have a very eclectic taste in music, but hip-hop and rock-based genres underpin it.

What’s interesting about the genres—when I look back over what I was doing in the year—is that I tend to lean into rock/metal and post-hardcore when I’m generally in a bad mood. The first three months last year were fucking hard work and I was on a particularly awful project, so this checks out. A lol addition of Disney in January there too, which is probably when I was obsessively listening to the Encanto soundtrack (a certified banger).

Hip-hop has definitely featured the most over the year—especially that heck-of-a-run from May to September. I’d definitely say I’ve enjoyed hip-hop the most last year and as far as 2023 goes, that’s staying too.

I’m making another conscious effort to listen to more music this year too, so it’ll be interesting to see what changes in my 2023 year in music.

You can see the whole run-down here.

Wrapping up 2022

Sat, 31 Dec 2022 10:25:00 GMT

I was very harsh on myself in last year’s review. I think it was because I published it almost immediately after finishing work, whereas this year, I’m now almost two weeks into a nice, long break.

It was useful to be harsh to myself last year, though, because I’ve approached 2022 with a much healthier, pragmatic and most importantly, a complete focus on self-care.

It means I have immediately succeeded in one of last year’s resolutions: be happier with myself, this time next year.

This leads us nicely to…

Resolutions from last year

I succeeded in all but one of my resolutions! The only one I didn’t succeed in was the weeknotes one. That’s no surprise though, because I hate writing to a brief, so it was never gonna stick.

The most important one was block booking holiday. This resulted in 6 weeks of holiday this year. That’s an eighth of a year! A massive contrast to the paltry 1 week I took last year.

The other most important goal was getting my weight down to 14 stone (88kg) and maintain it. I got a personal trainer to help me out for a few months at the start of the year which was fairly useful, but I’m giving myself full credit for success here. Sure he helped with nutrition and resistance training education, but to lose over 2 stone was all down to me changing for the better.

I’ve been in an around 14 stone since July, so it took around 6 months. I’m really happy with that because maintaining it has been easy. Im still enjoying life—especially wine—and I’m not killing myself with exercise I don’t want to do. I simply can’t do that because I’m so bloody injury-prone; I always have been.

All I do now is most days, consume around 2000 calories (not really tracking that tho), go for a 5k run 2-3 times a week and do a bit of resistance training like weights 1-2 times a week, tops.

I’m still carrying a bad ankle injury, so next year, I’m cutting down on running, but that doesn’t keep the weight off: diet does. Running is more for my mental health, but I’ll still do plenty to help that.

I feel like I’ve got a much better handle of this sort of stuff now and I’m much happier in my own skin because of that.

Work stuff

Work has been a bit too much this year, but I’m not mad about that: it’s to be expected when I’ve been transitioning from being a freelancer to running an agency. There was a few points where longer freelance projects got in the way of the studio stuff and took up a lot of time and energy.

Now Set Studio is 100% of the focus and I’m happy to say I’ve hired not one, but two people, so 2023 should be much more sensible.

I’m so happy that the studio is in a position to hire. I really wanted to be in a place where I hired one person, but two is unreal.

The first is Leanne: a designer and front-end developer. She is outrageously good and having her on board will mean I do a lot less production work. I’ve done too much of that and not enough business stuff. It’ll be nice knowing she can maintain and push the ridiculously high standards I set for our work.

The second is Liridon: a junior developer. Liridon is doing a career switch and is starting from scratch. I expect by the end of the year, they will be ready to work on client projects, but the focus for the year is they learn and develop a really strong, balanced skill set. I’ll be primarily training them myself, but I’ll be investing in courses, workshops and conferences to help with that too. I can’t wait to see how he develops.

The focus for the agency in 2023 is foundation building. I don’t want us to run before we can walk; I’ve worked for too many agencies that have done that in the past. Instead, we’re in a good position financially to build slowly and kick-on in 2024. Expect some cool stuff from us, but we certainly won’t be killing ourselves to produce too much. Instead, we’ll be focusing on quality and sustainability.

Speaking

I started the year thinking I’d do no speaking but instead I ended up speaking a 4 conferences lmao.

I wrote a new talk, “Be the browser’s mentor, not its micromanager”. I’ve got a draft post about the talk in the works so I won’t talk about that here, but I will say I thoroughly enjoyed speaking at conferences again. It’s nice to travel and hang out with pals again.

I think ongoing, I need to break out of the tech echo chamber and speak at different events. As rewarding as speaking at tech conferences is: I feel like I’m preaching at the choir. I think it’ll be more beneficial to speak at design and marketing-focussed events more, long term.

Writing

I’m finally getting back into writing. I spent a lot of this year struggling to find some rhythm, but posting a lot on my own site has got it back for me.

I’m going to write more design and tech articles next year. I’m not sure what they’ll be yet, but they’ll come!

It’ll be a split between posting them on here and the upcoming Set Studio site. We’ve also got a nice little design tips and inspiration project cooking up too (for fans of the piccalilli newsletter).

2023 will be a good year for writing—especially on this site as I can do it on my phone. In fact, this whole post has been written on my phone!

Social Media and the web

I can’t really be arsed writing much about the fall of twitter because I’ve already covered it and Mastodon this year. All I will say is that it’s seemingly triggered a movement away from algorithmic, ad networks (known as social media sites) and a movement back towards the open web.

So many people are building their own space on the web again and I love it. Long may it continue. Let’s make 2023 the year of websites!

Music

My music collection has grown nicely this year. I don’t think I’ll add much next year, other than a few key albums from the past and any new releases I really like.

I’ll write more about all of this when my last.fm review drops in the new year. What I will say is 2022 has been an incredible year for listening and discovering new music for me. Probably one of the best!

I’m also learning the piano in 2023. It’s about bloody time I did it properly. I’m pretty handy already, but I want to be able to play it properly and importantly, comfortably, so I can get back into composing and producing music in the long term.

I did that a long time ago and miss it. I used to make electronic and hip hop beats. Maybe 2023 will be the return of “andyvirus”…

Resolutions

I did well with last year’s resolutions so I’m hoping for the same again. 2023 will be different though because I only have one resolution:

Focus on building foundations and going slow. Move deliberately and end the year happy and healthy, ready to kick on in 2024.

I think it’s going to be a tough year with impending recessions, so I’m not going to set lofty goals. I want everything to just tick over as much as possible, while I do the groundwork for 2024.

So next year, it’s more principles for the year, rather than resolutions.

Wrapping up

I’d give 2022 a solid 8 out of 10. I’m ending the year in a good place. I’m well rested after a nice, long break from work too.

I hope that will lay the foundation for a great 2023.

I hope you all have a happy and healthy new year 💜

My top 5 albums released in 2022

Thu, 29 Dec 2022 09:37:16 GMT

2022 has been a damn good year for good new album releases, so I thought I’d recommend my top 5 for you.

5. Actual Life 3 (January 1 – September 9 2022), by Fred again…

Bloody hell this album is good. I’d never heard of Fred again… and stumbled upon a video of him playing some outrageous breakbeats on a sampler a couple of months ago. He’d just released this album and I then listened to it obsessively for weeks.

It’s nice dance/electronic/ambient stuff. The sample work is stunning too.

Listen here

4. Euthanasia, by Stray From the Path

I used to say Subliminal Criminals was my all time favourite Stray From the Path album, but this one hits different. It’ll blow your brains out.

As always, the lyrics are great; they’re angry as fuck. If you’ve not heard them before, think Rage Against the Machine, but more metal.

Listen here

3. PLOSIVS, by PLOSIVS

I listened to this album so much in the car this year, my daughter now asks for the “red music” whenever she gets in the car lmao.

It’s great, jangly, smart and catchy indie music with a bit punk in there.

Listen here

2. Mr. Morale & the Big Steppers, by Kendrick Lamar

It couldn’t be a 2022 favourite album list without hip hop. I spend the vast majority of my time listening to hip hop after all.

This album is really great. Kendrick Lamar has always had his own, definitive style and he really leans into it and matures it on this album. There’s not a bad track on there!

Listen here

1. Raw Data Feel, by Everything Everything

This is one of my favourite bands and this album might have to unseat one off my top ten albums of all time.

It’s just perfect and “Leviathan” still makes me cry a bit every time I listen to it. It’s such a beautiful track.

If you were to pick just one off this list, it has to be this one.

Listen here

Bring Back Blogging

Wed, 28 Dec 2022 08:52:36 GMT

I really like this post by Chris Coyier (@chriscoyier@front-end.social): https://chriscoyier.net/2022/12/26/bring-back-blogging/

This part specifically caught my attention:

Maybe “publish your own feed” is a better framing. “Own your RSS.” A feed doesn’t care what it contains. It is content-style agnostic. It’s just timestamped HTML, in a way. Put some audio in it, and it’s a podcast. A feed could be exactly what you would have tweeted before tweeting became cringe.

I’m going to make a conscious effort to post here first then syndicate out, ongoing. A blocker for me has always been feeling like a have to write a full post, but I should just write short little notes too.

I had this site setup to set the title as the current date if there was no title before to get over the other blocker: thinking of a title. I wonder if there’s a way WordPress could that that automatically 🤔

I really like the idea of a feed-like homepage, like Adam’s. It’s got me thinking of doing similar.

2023, the year of websites

Tue, 27 Dec 2022 09:31:13 GMT

2023 is going to be the year of websites—specifically personal websites—and I’m here for it.

It seems like the momentum for people to hyper-focus (or re-focus) on their personal home on the World Wide Web has come from the rapid decline in Twitter, since Elon Musk has taken it upon himself to destroy it.

Sure, it’s mainly created a surge in people creating Mastodon accounts, but people are also realising—including me—that betting everything on a single place is not great, actually. The only place you really can bet on with confidence is a place that you created and that you own. No one can break it, but you.

Embrace the personal site. Get an RSS feed on there and own your little space on the web. Not sure where to start? A few years ago, I made personalsit.es, which Henry made amazing after I handed the keys to them. It features loads of amazing personal sites that you can get inspiration from.

Start small and keep it simple, then chip away over time. It’s exactly how I’ve built this site 🙂

Elon, the accidental revolutionary

Sun, 18 Dec 2022 08:59:38 GMT

One thing I’ll give Elon Musk credit for is how he’s inadvertently demonstrating how terrible and fragile centralisation is—especially with online communities.

Who would have thought a narcissist’s paper-thin ego would destroy social media (read algorithmic ad networks) as we know it?

Welcome back, decentralised web!

The question is, what falls next?

Adam Kuhn’s top 10 albums of 2022

Wed, 14 Dec 2022 11:12:18 GMT

This summary of Adam Kuhn’s top 10 albums of 2022 is incredible: https://codepen.io/cobra_winfrey/full/yLEwKKg.

It’s making me think what I should add to my top 10 of the year too. It’s been a hella good year for new albums, that’s for sure.

The Daunting Prospect Of Writing Again

Mon, 12 Dec 2022 10:23:02 GMT

Getting the blog running how I like it has definitely got me writing more again. There was something about mucking around with markdown files and builds that created an invisible barrier that’s thankfully gone now.

I’m also completely over the very large wave of apathy that arrived after I’d finished Learn CSS last year. I just couldn’t bear the idea of writing anything related to design or tech after that. Thankfully, I’m over that (19 months later lmao) and I’m ready to start writing tutorials and stuff again.

The problem I have now is what the hell do I even write about? I think I got a bit bored of writing about CSS—even though the language and its capabilities have exploded over the last year or so. I also used to just come up with ideas really quickly over on Piccalilli and I’m getting pretty frustrated with myself that I can’t seem to do that now.

It would be helpful if you have read my stuff in the past, letting me know what you found really useful. It’d also be helpful if you want to learn something and you haven’t found anything that clicks for you yet. Maybe my style could help!

For now, I’m going to pick some low hanging fruit and scour through the client work I’ve done over the last year or so. Maybe I can pick something from there. The Modern Reset could also do with an update…Regardless, keep your eyes peeled 👀

A New Day, A New “CSS” Thing

Thu, 08 Dec 2022 12:04:18 GMT

So there’s this new CSS thing called Stylify which is getting people hot under the collar again. It’s been a while since a white dude re-invented CSS, so it’s been a long time coming.

I’m actually not really that fussed about it. Yeh it’s weird writing CSS rules in classes, but whatever. I don’t really know what problem it’s solving, but the author must have felt like there was a reason for it in whatever type of projects they work on.

What is refreshing about this, is (as far as I can tell), the author isn’t saying CSS is bad. Quite the contrary, where they (I think) are insinuating that frameworks are not great, which I’m on board with. What isn’t refreshing is the wall-to-wall dudes giving testimonials, but I guess this sorta thing attracts dudes like a pot of jam attracts wasps.

I guess the point I’m making with this post is Stylify is just another thing. Whatever works for you is right because it works, so I wouldn’t get too upset about it, personally. What gets me upset is when I get tagged in Tweets with “I bet Andy hates this”, looking for some sort of hot take (which so far hasn’t happened thankfully).

Also, I despise when framework authors make absurd claims, like the Tailwind dude does, claiming that “best practices don’t actually work”, when really what he’s trying to do is, I guess, create a case for making money, which must be getting harder with the year-on-year dwindling interest of their framework. Again, this doesn’t seem to be the case with Stylify.

I’m going to probably ignore Stylify. I don’t have any problems writing CSS and I’m certainly not the target. What I would say is before jumping into using it, consider what your Stylify project would look like 6 months, a year, two years down the line. Is it going to be a nightmare to maintain?

In closing: use it or don’t: you only live once.

Last speaking engagement

Tue, 06 Dec 2022 07:00:15 GMT

I’m doing my last speaking engagement of the year today: a best man’s speech.

Toto

Mon, 05 Dec 2022 10:58:09 GMT

There’s no day that can’t be enhanced by Toto IV. Absolute masterpiece.

I got a new Studio Display

Fri, 02 Dec 2022 14:11:43 GMT

Check out my new Studio Display! I’ve had my eye on them for ages and I finally went for it.

It’s so good to have a nice big Apple Display again. It’s gonna take me a while to get used to having two screens again tho, going back to using a MacBook, rather than an iMac.

Working on my personal site is fun actually

Thu, 01 Dec 2022 14:40:27 GMT

I mostly spend my days in spreadsheets or working on important projects™ so actually making things is a treat.

Should I have been doing client work today? Yes

Have I been doing client work today? No, I’ve been fiddling with Webmentions and having a great time.

Webmention support

Thu, 01 Dec 2022 12:47:53 GMT

I don’t know if this will work, but I think I’ve got Webmentions set up on this site now.

Toots are gonna be lit

Thu, 01 Dec 2022 10:20:39 GMT

Now I’ve got this nice markdown-style look and feel to my site, the auto-posting to Mastodon setup is going to be awesome.

I just need to find a way to bring replies etc over as webmentions/comments now 🤔

My Company is 4 today!

Tue, 29 Nov 2022 11:22:44 GMT

Today is my company’s 4th anniversary 🎉

Over the last 4 years, it’s evolved from me being a freelancer and consultant, to selling educational material (while still freelancing), to being a creative agency: Set Studio. It’s also had not one, but two name changes in the time too (pour one out for Piccalilli and Andy Bell Design).

At the end of last year, I set a target of being in a position to make our first full time hire. I thought at the time that was a bit of a push, but unbelievably, two new full time staff—a designer and a junior developer—are starting on January the 4th. I can’t wait for Leanne and Liridon to start.

Who knows what’s going to happen in the 5th year of my little shop. We’ve got some exciting stuff in the pipeline (and are still taking on projects).

I want to sign off with a huge thanks to everyone that’s helped this year with projects: Leanne, Amy, Nic, James, Robb, Mat, Jason and Greg. You’re all ace!

I’m genuinely enjoying social media again

Mon, 28 Nov 2022 07:47:35 GMT

I used to really enjoy Twitter, even if it is a complete hell zone. Almost certainly, amongst all the hell, there would be one tweet that would have me chuckling all day.

This is a bit like saying I used to really enjoy motorway pile-ups because there would be at least one thing I saw in the queue that would make me chuckle all day. Completely unhealthy outlook right?

The reality is I wasn’t actually enjoying Twitter. I was enjoying chatting to my mates, but I was really miserable on there and felt I had to be there.

The TTRG (time to reply guy) was getting so fast, that I can’t actually remember the last time I tweeted something helpful like a design or development tip. I just couldn’t be arsed, knowing some dickhead would be around to waste my time with whataboutisms and “will it scale”?

There doesn’t seem to be much of that going on, on Mastodon yet. I hope there won’t be, but as the user base grows, the probability of reply guys grows with it. It’s also probably the fact I have much less followers there which is honestly, a bloody dream.

Anyway, until things do degrade (I’m hopeful they won’t), I’m going to continue enjoying myself because as it stands, checking in on Mastodon is actually fun.

Mastodon is a gateway

Sun, 27 Nov 2022 09:44:06 GMT

I’ve been thinking about this for the last couple of days: I see Mastodon as a sort of gateway, rather than the final destination.

All this ActivityPub and federation stuff is pretty exciting because you can conceivably interact with mates from anywhere. I guess WebMentions etc allow you to also do that, but I never personally got along with it in its current form.

Just having my own instance of Mastodon again has made me feel like I’ve got proper ownership of my stuff, but even better would be this website itself being my little home on the Fediverse. It’s actually made me excited about fiddling around with tech stuff again for the first time in a very long time.

I’ve been very guilty of putting all my eggs in the Twitter basket over the last couple of years, especially, and all of that has been destroyed by one bellend billionaire. I’m determined not to make that mistake again and even more determined to make my little home on the internet—this website—as lovely and sustainable as I can make it.

An impromptu quiet week

Fri, 25 Nov 2022 16:55:40 GMT

I’ve been hammered with an OG cold of sorts this week (not COVID, thankfully) and it’s completely sapped me of any energy. I’ve mostly done…well…nothing.

I’m lucky that I run my own business. Because we’re mostly working with American clients at the moment and it’s Thanksgiving week, it’s been the perfect week to get ill (if there ever was a perfect week).

The problem is, though, I think this illness has hit me so hard because I’m legit running on fumes. It’s been a chaotic [checks notes] few months and I appear to have not learned much from last year, which I publicly bollocked myself for.

I’m letting myself off for over-working this year because the agency stuff took off way quicker than I planned, so I had quite a bit of crossover between agency projects and freelance/consultancy projects. That period is definitely over now, but the longer impact of that has been ridiculous.

There’s no real point to this post other than for me to look back on and next year I’ll be better at this whole overworking thing. I’m pretty sure it’ll be my only resolution (which to be fair I’ve done a good job of this year). Let’s see…

CSS refactor

Tue, 22 Nov 2022 14:40:06 GMT

With a view to doing some more work on my site, I’ve just replaced the Sass setup with PostCSS, Tailwind (gasp) and CUBE CSS.

It’s the setup I’ve been using for Build Excellent Websites and the Be The Browser’s Mentor talk I’ve been doing all year.

Next up: I’ll bring content from Piccalilli over here and add some more post styles for code etc.

Testing toots

Tue, 22 Nov 2022 12:10:02 GMT

If all goes well, this should have auto-posted to Mastodon via my RSS feed.

Free of the bird

Tue, 22 Nov 2022 08:17:08 GMT

I want my last post on Twitter to be a blog post as one last middle finger to centralised, algorithmic social media. If you’re still on Twitter, you’re seeing this because my blog automatically tweets out posts. This is the last one of those, because I’m cutting that off too.

As a preface, I appreciate I’m speaking from a position of privilege, upping sticks and leaving Twitter, but I’ve finally had enough of it. I’ve spent the last week or so, weighing up the pros and cons of the platform and the large following I somehow managed to accumulate—and let me tell ya, the cons far outweigh the pros (more on this later). Because a bad actor could, in theory, steal my handle if I deactivate and impersonate me, I will be keeping the account open until that is no longer necessary. I won’t be back next week either, just to spite this dickhead.

What’s been the kicker?

Elon Musk bought Twitter and has completely dismantled it. I actually deep-down thought it would be ok in the long term. He’s a complete clown, but I thought sensibility would take over and after a period of turbulence, Twitter would be ok. The straw that broke the camel’s back—resulting in my actually logging off—was twofold. The first part was Musk forcing staff to sign up to being exploited—by being overworked, or as he called it, being “hardcore”—or fired, then using a Twitter poll to determine if Donald Trump should be reinstated. The first part resulted in friends that worked there being put in an impossible position, which made me beyond mad.

I thought about just posting only on Twitter via this blog for a bit. I’ve somehow accumulated a rather large following on Twitter—around 16.8k followers at the time of writing—and even though I’ve never actually tried to get followers, I felt slightly proud of that number and didn’t want to let it go. Over the last week or so, though, I’ve put some thought into what that following has actually brought me, other than every time I tweet anything tech or design-related, a sea of insufferable dickheads find their way to my replies.

I don’t really plug anything other than the odd discount for Every Layout and I certainly don’t ever land client projects through Twitter for my agency, or as a freelancer previously. Granted, I’ve made connections on Twitter that have resulted in client projects, but they’re relationships built, rather than follower-count related.

I thought I’d look at some stats in analytics (I use Fathom)—specifically how much traffic arrives at my sites from Twitter:

On this site, Twitter is responsible for around 80% of traffic. That makes sense because it’s a personal blog
On Piccalilli, Twitter is responsible for a meagre 20% of traffic (that site will be merged with this one)

We don’t have analytics on Every Layout or Set Studio, but I’m sure they’re also very low in terms of Twitter referrals.

Based on the fact that the vast majority of the work I land, the books I sell and previously, the courses I sold came from the writing and talks I do, rather than the tweeting I do, Twitter really doesn’t bring any benefit to me anymore.

My conflicted relationship with Mastodon

I’ve declared recently that I won’t leave Twitter for Mastodon because since 2016, it has never stuck for me. I just could not be arsed with it again, but the thing that changed everything was not just Twitter falling apart, but most importantly, my friends all started moving there.

It’s all about the people, not the platform at the end of the day. It doesn’t really matter what tool you use to chat to your mates—so many tools rise and fall—but it’s the fact there is a tool to chat to your mates. That was Twitter, hands down, but now, people are moving over the Mastodon in their droves.

Mastodon does still give me the ick. There’s a lot of gatekeeping, but I think that’ll get better over time. It’s certainly gotten a lot better than a few years ago where you’d get lambasted for even mentioning Twitter without calling it the “bird site” (🤮).

I did, however, want to get back on to a private instance of Mastodon. I did have one before but I forgot to renew my domain lol. That’s ok though because I’m back in business at @andy@bell.bz. Mastodon is great when you have complete control of your little fediverse island. Once Mastohost are back accepting new accounts, I strongly recommend you give them money to host for you.

Wrapping up

Am I sad about leaving Twitter? Surprisingly not. I’ve really enjoyed my time there, but it’s also caused me a lot of grief over the years. Just like a bad relationship, when the signs are there that’s it’s a net-bad, you’ve got to cut ties and move on with your life.

I did create an archive of my tweets with this handy new tool from Zach and Co. You can see them all here. I didn’t really care if those tweets disappeared with Twitter—I see them as ephemeral—but because that tool made it so easy, I thought I might as well immortalise them. There are some absolute banger shitposts in there after all 😎 (aside I should collate those in to a best-of post).

If you don’t like Mastodon and still want to follow me, that’s fine. I’m going to hook up this blog with the Mastodon API and probably try to post from here first again, so my RSS will be up to date a lot. Otherwise, you can see my other places here.

I’ll sign off with this. Don’t feel under pressure to leave Twitter if it still brings you benefit. As soon as it becomes clear that it doesn’t, feel confident that you can leave Twitter and it’ll be fine.

Warnings About The Disastrous Modern Frontends Live

Sat, 19 Nov 2022 11:44:39 GMT

I just want to boost a couple of posts written by speakers at Modern Frontends Live.

I’ve been astounded at how that event has gone down and personally think the organiser, Gen Ashley, has conducted herself badly—both in how they’ve treated speakers and attendees. Unless people speak out, they will be able to go again in the future.

I’ll keep updating this post with posts as and when I find them. So far we have:

Time for a redesign

Thu, 17 Nov 2022 13:49:35 GMT

Does the day end in a Y if a designer doesn’t want to redesign their site?

I’ve got a bit of a hodgepodge of personal content and also tech stuff dotted around the internet and I feel like I need to bring it all together. Mainly:

I also don’t like the look and feel of any of it anymore. Especially, Piccalilli which feels really fucken dated now.

Tech-wise, I really like using WordPress as a CMS but find working on the front-end cumbersome. I’ll probably try and wire it up with a fresh install of Eleventy. I think I might also move from a Notion-powered music collection to a WordPress powered one too. It’ll be nice to own that, just like I own the music I collect.

Lastly, content. There’s bloody loads and it’s a mess. I think Piccalilli needs to go now, so I’ll move that content here and possibly a bit over to my agency’s new site (when it finally gets finished). It’ll be nice to have it all organised and up to date.

Then who knows, I might actually start writing again. I’m bursting with content ideas at the moment, but just don’t want to publish on sites I don’t like anymore (he says publishing a post on this site).

Keep your eyes peeled etc.

Don’t rob yourself of a good thing

Tue, 09 Aug 2022 11:28:14 GMT

Back when I was a teenager, I was super into punk, grunge and metal (I still am to be fair). With that, I had a natural tendency to reject the mainstream completely—especially with music. This rejection tendency lasted well into my early 20s too.

The reason I’m talking about this is because this attitude made me reject Biffy Clyro when they “sold out” (they didn’t). For context, Biffy Clyro are one of my favourite bands. Infinity Land is in my top 10 albums of all time! When Puzzle came out in 2007, they had signed to a major label, which I of course, detested. This is unwarranted, though, because as Chris Reynolds wrote in 2010, they had earned that right from over a decade of relentless touring and graft.

Puzzle was actually a pretty decent album and it does make me a bit sad that I initially rejected it. The real kicker, though, is I also rejected Only Revolutions, which came out in 2010. It’s a banger and I feel like I have missed out on—at this point—years of joy from listening to it. Now though—mainly thanks to my small child who spotted the cover on Spotify in the car and asking me to play “superhero and grass music”—I am making up for it big time and thoroughly enjoying it.

The irony is that when Biffy Clyro released their latest album, A Celebration Of Endings, I was—and still am—a superfan. I played the vinyl until it was pretty much see-through!

The flip-side: I was hugely into Nirvana when I was a younger teen, but then rejected them as cringe as I got older. It was only after reading Dave Grohl’s book, The Storyteller, I remember how incredible they were as a band and subsequently, listened the heck out of them.

The lesson? Don’t let your teenage (and adult) angst spoil a good thing for the present you. Check out the music that made you cringe then (and now), because heck, you might love it. Life is frankly, too short not to.

A Celebration Of Endings – Biffy Clyro

Wed, 03 Aug 2022 13:09:00 GMT

I’ll prefix this recommendation with the fact that I am a Biffy super fan. Infinity Land is in my top 10 albums of all time, after all. I’ve also seen them live at least 15 times over the years too!

Now, I could be a dickhead and say “the old stuff was better”, which is sorta true. Biffy rightly and deservedly enjoyed a lot of commercial success—and still do—so some of the albums that got released in the 2010s was a bit, mild. That doesn’t take anything away from the quality of the band as a whole though. Blackened Sky, Vertigo of Bliss and Infinity Land are elite albums and that’s just my personal favourite era, but even with large commercial success, they still put out quality music.

Speaking of which, A Celebration Of Endings gets us back towards that favourite era of mine. The production on the album is massive, it’s much heavier than the last few albums and the songwriting is nothing short of stunning. It’s up there with those three excellent older albums in my opinion. Simon Neil singing “bullshit” in his Glaswegian accent will never get old too.

Listen here.

That’s The Joint – Funky 4 + 1

Wed, 03 Aug 2022 13:08:00 GMT

This is absolute funk-tastic rap. Turn it up loud and really listen.

I’ve got a real soft-spot for live-feel hip hop and this album does not disappoint on that front. You’ll almost certainly recognise the track, “King Heroin”, too, because it’s been sampled so many times by other artists.

These folks inspired artists like Beastie Boys and Run DMC, so they’re a must listen.

Listen here.

Power

Tue, 02 Aug 2022 10:44:28 GMT

The only thing keeping my Netflix subscription was the kids stuff. My kids love it and it reduces the amount of annoying spoiled American kids opening toys on YouTube content.

I was still thinking about ditching Netflix, though, because we literally never find anything on there we actually want to watch. There’s the odd good show, but the library of content is weak as fuck.

Step up: Power. Holy shit it is good. Admittedly, my brother in law (and sister in law) have been telling us to watch it for years, but we just kept forgetting about it. We did finally start watching it last week and we are gripped. It’s the pre-algorithmic dogshit era of Netlix production, so it’s genuinely good. We’ve still got 5 seasons to get through too!

Definitely check it out: https://www.netflix.com/gb/title/70298433

It’s finally come home

Sun, 31 Jul 2022 21:01:47 GMT

Never in my 35 years did I think I’d watch England lift a major title.

I’m so proud and my kids, they’re so inspired. Thank you, Lionesses 💜

Getting into music recommendations again

Fri, 22 Jul 2022 13:05:00 GMT

I’m trying this whole music recommendation thing again and giving it a silly name: redrobotzoo. What does that mean, you wonder? Who knows—I’ve just had it for years and always wanted to do something with it.

The concept of this is simple. I share albums I like listening to and what I’ve listened to in the week. Super short. Super snappy. Job done. Let’s dig in.

Moral Panic – Nothing But Thieves

A bit Killers-esque with some Josh Homme style tone. A little bit Royal Blood in there too. I discovered it on Radio 1 of all places while I was driving to Tesco LOL.

Listen

Them Crooked Vultures – Them Crooked Vultures

A side project by Dave Grohl (Nirvana, Foo Fighters), Josh Homme (Queens of the Stone Age) and John Paul Jones (Led Zeppelin). Seriously good and sounds very much like a QOTSA album.

Listen

Dyn-o-mite – ZelooperZ

This popped up on Spotify yesterday. The sub-bass is so heavy (and pure) that I thought my fuckin’ phone was vibrating on my desk. Definitely worth a (loud) listen.

Listen

Bye bye, Boris Johnson

Thu, 07 Jul 2022 09:28:30 GMT

938 days after winning a landslide election after promising to “get Brexit done” and “level up the north”, Boris Johnson will finally resign today.

At the current count, 157,338 have died from Coronavirus (we know it’s much more)—a pandemic that he handled by telling the country to “take it on the chin”.

The man is scum. The Tories are scum. Maybe we never have to suffer this again.

Never forget what they did. Never vote for Tories.

Added Spotify to my music collection site

Thu, 30 Jun 2022 11:33:38 GMT

I’ve got a pet project, my music collection site: https://music.andy-bell.co.uk/

I mess around with it every now and then for fun. It’s powered by Eleventy and a Notion Database, where I catalog all the music I own, be it Vinyl, CD or digital.

I just added a new feature: my Spotify collection! I’m not a massive fan of Spotify, but I moved back because I got fed up of Apple Music’s UI (again). I also like the idea of playing with their web API.

Anyway, check it out: https://music.andy-bell.co.uk/spotify/

I should go ahead and actually apply a proper UI to it now…

Who knew? Blogging is helpful

Tue, 28 Jun 2022 09:24:03 GMT

I wrote a blog post: https://piccalil.li/blog/a-cls-punishment-for-progressive-enhancement/

Then smart people responded with smart solutions:

Blogging: it’s useful.

FFConf 2022

Mon, 27 Jun 2022 09:05:52 GMT

I just bought an early bird ticket for FFConf 2022 https://2022.ffconf.org/. My first real conference as an attendee since the last FFConf in [checks notes] 2019.

Hope to see you there!

Defensive CSS

Fri, 24 Jun 2022 13:35:51 GMT

The one and only, Ahmad Shadeed has launched defensive CSS—an outrageously detailed compendium of excellent CSS techniques to help you build resilient front-ends.

It looks great. Check it out! https://defensivecss.dev/

I hope Johnson doesn’t resign

Fri, 24 Jun 2022 06:17:19 GMT

I really don’t want Boris Johnson to resign after being thumped in by-elections. There’s a massive window of opportunity for a progressive alliance to absolutely wipe the floor with the Tories in a general election now.

We could see the Tories out the of the picture for a generation. Let’s go!

Learn Eleventy From Scratch Turns 2

Wed, 22 Jun 2022 09:09:02 GMT

Two years ago today, I published Learn Eleventy From Scratch. It was the first course I made and it blew me away how popular it ended up being.

I just want to take this opportunity to thank everyone who was kind enough to buy a copy of the course. I wanted to teach people not just Eleventy, but also, how to build a really nice looking website, well. I think I achieved that and even though I no longer maintain or update the course, I made it free to everyone last year, to expand that reach and to help as many people as possible learn how to build great websites.

Eleventy has changed so much since I released the course—always for the better. I’m so glad I backed Eleventy when I did. I saw almost straight away that it was going to be a fantastic tool that would evolve in the right way. So much so, it came straight off the tech tool carousel when it arrived. This is because it’s clearly web-first and rooted in performance.

Big thanks to everyone that helped me put the course together. Special thanks to Amy Hupe who edited the content. She not only did a great job of turning my nonsense writing into something very easy to consume, but she also dragged me through the most difficult part of the writing process when I was questioning whether or not I could even finish it. Nice one, Amy.

Will I work on that course again? Who knows, maybe. The way I build websites is near enough the same, but I also build a lot less websites now. Instead, I now run Set Studio, where my time doing production work gets slimmer and slimmer (because way more talented people than me do it instead). Maybe in the future, though, I’ll fire it all back up and modernise the course to feature all the fantastic features Zach and the team have added over the last couple of years. Maybe I’ll just start from scratch, featuring the evolution of how we at Set, build extremely flexible front-ends.

You will be happy—and no doubt—not surprised that Eleventy is almost always used on Set Studio projects and almost certainly will continue to do so. That’s why we continue to help fund the project!

I’ll close out with this: always—and I can’t stress this enough—back Eleventy.

EL-P uses my stuff

Tue, 21 Jun 2022 12:47:27 GMT

You’d think my proudest achievement from working in tech would be working with some of the largest organisations in the world, right?

Nah, it’s EL-P using my burger menu component on their site https://productomart.com/

Twice Thrice

Sun, 19 Jun 2022 11:11:39 GMT

I’m seeing Thrice twice in one year. What a treat!

For Father’s Day, my kids got me tickets for 2000 Trees in July to see them headline the Friday and I get to see them play with Coheed and Cambria in October.

I can’t bloody wait.

Just read: I Should Be Able To Mute America

Sun, 19 Jun 2022 09:06:59 GMT

https://www.gawker.com/culture/i-should-be-able-to-mute-america

A lot of nodding from me and belly laughing too.

Fav quotes:

Instead, we caused the tweet to go viral and before we realized what was happening it drifted over to that foulest of places: American Twitter.

And…

Before I sleep, I’m witness to many nightmares: Brooklynites are gutting each other over the sanctity of the bodega, Louisianan astro-poets are putting the wiccans to the torch because of their ongoing “amethyst erasure,” someone from Minnesota has gone viral claiming that it is an act of “class genocide” to know that drinking water keeps you hydrated, a Florida DSA chapter is publicly imploding over the contested value of feet pics, a Washington Post columnist is loudly pissing themselves over a petty workplace slight, the bassplayer from a long defunct hardcore band is begging people to share the gofundme page for a single mother made homeless by a twenty minute hospital visit, while armchair experts debate the value of mask mandates as #1milliondead and #bidenbts trend in your sidebar.

Finally…

Ted Cruz should be the name of an Italian pornstar in a Love Boat porn parody

Very funny article. You should read it

Some holiday resolutions

Sat, 18 Jun 2022 09:25:35 GMT

I got back from a nice week in Greece today. It was a much needed break with some much needed time to slow down and think. Because of that, I came back with the following resolutions:

No Twitter until 5pm

What I did—using iOS Downtime—was stop myself from looking at Twitter until 5pm at the earliest. That hell site has a habit of completely ruining my mood, so not looking until at least 5pm meant I get most of a day before I see the dickhead of the day’s shite take.

It’s been an experiment and it’s massively reduced the amount of time spent on there. I’m a full Twitter addict and I’m constantly trying to spend less time on there. Circles has been a godsend for this too. I can tweet without a sea of reply guys, which is great. I would love to have a Circle timeline so I can only see what those mutuals are tweeting though.

I really should post to Twitter from here—my website. I’ve got the posting setup real nice on my phone, so even short little posts are easy. Maybe I should have a rule where I only post to my Circle directly on Twitter and bring in replies as webmentions on my site for interacting with the wider Twitter community.

I still checked in on Twitter while on holiday, though—unfortunately it’s intrinsically linked to work and being self-employed, you can’t fully escape work while on holiday. I’d take that over having a boss though, any day of the week.

Read books every day

I read loads before the pandemic and really let that slip over the last couple of years. I only managed one full book this holiday—Fake Law, by The Secret Barrister—but bloody loved it. I did get very far into What If?: Serious Scientific Answers to Absurd Hypothetical Questions, by Randall Munroe (xkcd person). This one is excellent.

I’m going to read at least 15-20 mins a day ongoing. It’ll help keep me away from Twitter and hopefully, get me to bed earlier. I go to bed way too late and chilling with a book should help wind me down more (I hope).

Slow down and say no more

A consistent theme (along with my endless battle with Twitter addiction) for me is when stuff gets busy with work, I let it get the better of me.

I’m lucky—the new agency is flying a heck of a lot faster than I expected it too. That has brought a lot of stress and overlap with my existing freelance commitments though.

A big problem is I’ve said yes to too many things and I should know better. This has unfortunately resulted in a couple of truly horrible projects this year, that have really dragged me down. I’m going to sort that right out because I’m not taking full advantage of being independent by working on crap stuff!

Wrapping up

Anyway, I’ve had a lovely time and feel completely recharged. hopefully the above resolutions will make that feeling last as long as possible!

Edit: my circle timeline prayers have been answered

I think “Raw Data Feel” by Everything Everything is my favourite album of 2022

Wed, 08 Jun 2022 14:03:50 GMT

Closely followed by Plosivs’ self-titled album. Still got 6 months to go for the year yet though, so plenty of chances for someone to pip them to the top.

Check it out: https://album.link/i/1601439797

Desktop-down design is so painfully dated and damaging to user experience

Wed, 08 Jun 2022 12:44:50 GMT

There’s of course, some cases where design for desktop-first is essential, but friends, when you’re designing a responsive website, you have to give mobile so much more attention.

Check out this chart from StatCounter:

Now imagine starting with desktop, or worse, not even considering mobile. I hate saying “mobile” too, because a small screen does not equal a mobile device—it could mean anything. As I explain in my recent talk, there is so much fragmentation in device and viewport sizes, that picking just a couple is futile, but at least targeting the smallest viewport is a good place to be.

I’m telling you, when you do that, you will 100% improve how your website works for everyone, and that’s the most important thing.

The tech tool carousel

Sun, 29 May 2022 07:23:48 GMT

I recently described what I call “the carousel” to some fellow nerds so I thought I’d write about it.

I’m a lot of years into this web thing and I’ve seen a lot of “game changers” come and go. It’s all very cyclical and predictable.

I also have unbearably high standards for the work I put out too, so chasing new tools—like a dog chases a butcher who has a string of sausages—is highly incompatible with that. Because of this, I put new tools on the carousel and keep an eye on them, periodically.

The carousel is like one of those on a game show that shows the prizes that can be won. The tool will sit on there until I think it’s gone through enough maturing to actually be a viable tool for me, the team I’m working with and the clients I’m working for. React, for example, spent well over 7 years on that carousel.

It’s a really useful strategy because some tools stay on the carousel and then I take them off because they did in fact, turn out to be useless after all. Gatsby is a good example of that.

The unbearable amount of hype that tool generated was a bit of a tell-tail sign of its uselessness. So often, the most hyped tools turn out to be complete shit in real-world scenarios. By letting the most evangelical people get all that out of the way while it sits on my carousel saves me a lot time and frankly, energy.

You see, dear reader, I in fact do not enjoy coding. I enjoy what coding empowers me to do, but the process of writing silly little words, numbers and punctuation is not a pleasurable experience. I just want to get the thing that coding outputs. I only started coding because so often, developers—as I hypothesised—would build my design work with their eyes closed, so I learned HTML, CSS and JavaScript out of spite, mainly.

This is why the carousel exists and not many tools make it off. Some do then go back on. Tailwind is a good example of that. I used it a few years ago on a client project and found it to be near-useless. But, now, I’m using it on most projects because that thing does a damn good job of only generating the utility classes I need to finely season my existing HTML and CSS. It’s just a shame it’s most avid fans (and creator) are such unbearable dickheads.

Anyway, I’m prompted to write this because Remix and Astro get all the hype now and are enjoying their ride on the carousel. Will they be a Gatsby or and Eleventy (which had the shortest ride on the carousel in history because it’s so good)? Only time will tell.

He’ll get away with it

Wed, 25 May 2022 12:56:37 GMT

Our system is built so people like Boris Johnson get away with it.

The only way to remove him is via his Conservative party. The same conservative party responsible for the hostile environment and austerity. These people are scum.

They’ll probably still get votes though and they’ll still win elections because they have the support of the scum right-wing print media.

I empathised with people who voted Conservative and who voted for Brexit. They were promised change while the opposition only promised more foot-dragging. I get it—if you’re struggling to get by and you’ve spent your entire life being promised the earth by politicians, yet nothing ever changes, you’re going to gravitate towards that change.

It despises me when people claim to be on the left, yet describe people described above as idiots and scum. It’s a cheap shot that goes against everything it means to be on the left. You’re punching down.

Surely now people who voted for this government can see that they have let them down time and time again. In fact, they’ve almost certainly made your life worse. I plead with you that you remember that at the next election—even when the right-wing media gaslight you.

Please never vote Conservative again. It’s up to us to make sure they don’t get away with it.

Give me a design tool that supports responsive design

Wed, 25 May 2022 09:37:44 GMT

Tools like Figma are coming on leaps and bounds, but we’re still producing pictures of designs in them. I’ve been playing with Webflow a bit recently, but there’s seemingly not a simple way to use clamp() for sizing type and space—not to mention Every Layout layouts.

HTML and CSS are my preferred design tool—in fact, the design phase isn’t “done” at Set Studio until we have produced HTML and CSS because a picture of a design (even with all the prototype tooling) just doesn’t compare to the real deal.

A tool that let us do creative design and CSS in tandem, frictionlessly: that’s the dream.

I Deleted TikTok

Tue, 24 May 2022 06:48:52 GMT

It’s fun and always provides me with LOLs, but my god, it eats time. Like, a lot of time.

Blog more, Andy

Mon, 25 Apr 2022 14:50:42 GMT

Probably gonna have to blog more on here. Luckily I’ve got some syndication stuff set up already so could post out to a couple of places if we all bail on twitter.

Tumblr and Mastodon are sure looking attractive again.

Buying random albums

Tue, 05 Apr 2022 10:24:24 GMT

I’m doing a new thing. Now that I’m back working from a co working space once or twice a week, I’m back in town again. This means I’m back browsing record stores.

What I’m doing for this new thing is picking up an album that stands out to me that I previously had no idea existed and buying it. This is how I used to discover new music years ago: buying random CDs. For this, it doesn’t matter if it’s CD or vinyl; if I get a good vibe off it, I buy it, take it home and just listen.

The first album I’ve picked is Scaled and Icy by Twenty One Pilots. When I put the CD in, Apple Music told me it was indie, which made me do a bit of a sigh—I find a lot of indie music to be very bland, like unseasoned chicken. This album is very much not like that though: its a fucking banger! I’m super chuffed.

On to the next one

A letter to my MP

Tue, 29 Mar 2022 12:50:50 GMT

Today, the Metropolitan Police are issuing fines in relation to the illegal gatherings in-and-around Number 10 in 2020 and 2021. I’ve written a letter to my MP asking them to act.

I never voted this MP in. I would rather scoop out my own eyes with a rusty spoon than ever vote Tory. He is, however, our MP and has a duty to represent me and other Tewkesbury constituents.

The letter

Dear Laurence Robertson,

My Name is Andy Bell, a constituent of Tewkesbury. I’m writing to you today to ask you to act on mine, and other Tewkesbury constituent’s behalf.

In May 2020, June 2020, November 2020, December 2020, January 2021 and April 2021, members of staff at Number 10—including the Prime Minister—attended various events that were in breach of the laws introduced in response to COVID-19. These laws prevented not only social gatherings, but people attending funerals, spending the last moments with dying relatives and attending the birth of their children, to name just a few. Mr Robertson, people died alone because of these laws.

On December 1, in the House of Commons, the Prime Minister said:

“What I can tell the right hon and learned gentleman is that all guidance was followed completely in No 10.”

On the December 7—also in the House of Commons, the Prime Minister said:

“All the guidelines were observed.”

Lastly, on December 8—again, in the House of Commons, the Prime Minister said (paraphrased by myself for brevity):

“…all the evidence I can see, people in this building have stayed within the rules…”

As you will be aware, misleading Parliament is in breach of the Ministerial Code. There is an expectation that if a Minister breaches the Ministerial Code, they should resign.

Today, March 29 2022, the Metropolitan Police are issuing fines for breaches of the COVID 19 laws mentioned above. This confirms that rules were broken in-and-around Number 10, meaning that the Prime Minister misled parliament. It is likely that the Prime Minister themselves will be presented with a fine, which could be argued, is another breach of the Ministerial Code; especially as the Minister in question—along with MPs—is responsible for the law that they broke (if fined).

As a constituent of Tewkesbury, I expect you—our MP—to act on our behalf. I request that you do everything that is in your power as an MP and a member of the Conservative Party to ensure that this breach of the Ministerial Code results in the resignation of the Prime Minister. At the very least, I expect you to deliver a letter of no confidence to the 1922 Committee of Conservative Backbenchers.

I look forward to hearing how you have acted as our MP in response to this matter.

Yours sincerely,
Andy Bell

Taking it slow

Wed, 09 Mar 2022 10:34:54 GMT

Since January I’ve done back-to-back projects with no breather and bloody hell, I’m tired. The last one that ended on Friday was especially—shall we say—challenging and it’s because of that, I’m having a very easy going week.

I signed up for a co-working space in Cheltenham because 2 years since I last had some space (a hired office then), I’m a bit fed up of working at home every day. I am and always will be extremely into remote working, but remote doesn’t mean at home. It to me, means being completely flexible and having a bit of space away from home does exactly that.

I also managed to finally put a better landing page for my new agency—Set Creative Studio—together. I just haven’t had time to do the full site yet and I wanted the branding that I put so much work into, get some better representation. It was fun to do some creative front-end, that’s for sure!

Anyway, I’m just pootling around with some bits and pieces this week—like playing with my music catalogue site—and enjoying the incoming nicer weather. I am determined not to over-work like I did last year. Never again.

Moving streaming services

Mon, 31 Jan 2022 11:16:34 GMT

In light of the recent Spotify stuff—including their predictably poor response: people are rightly looking to move streaming services. I’ve not been on Spotify for a while—I found the relentless plugging of podcasts super annoying on a “music” platform, so I moved off before things got as bad as they are. I also, personally, found the quality of streaming sub-par, at best.

I moved from Spotify to Apple Music. I really like the service, although integration with Last.FM is difficult. The audio quality is really decent most of the time and they’ve ironed out a lot of the problems they had in the early days. If you’ve already got Apple services like iCloud storage and whatnot, you can get it cheaper with the Apple One subscription.

One thing I also like about Apple Music is that it works pretty good with my existing local collection of music. It’s not great, but it’s not terrible. I found players like Roon bloody awful to use. Bring back winamp!

An outlier, but very good service is Tidal. Their “master quality” streams are bloody good and very warm sounding. They’re very close to a good quality local FLAC file. I like that Tidal pay the most to artists per stream, too (nearly 10x more than Spotify). It is still pittance though, being less than a cent… You can read about those royalties here.

What’s my setup now?

I try to buy as much music as possible—be it Vinyl, CD, cassettes or digitally with Bandcamp etc. You can check out my physical collection here.

I’ve been on Apple Music for ages now, but I’m actually trying out Tidal again. I moved stuff around stuff really easily with songshift too, so definitely give that a look. I tend to share music links via song.link (AKA odesli) too, so regardless of platform, people can get access to recommendations easily. I track with Last.FM too, which again, makes moving platforms a non-issue. It’s also a pretty wholesome service, even all these years later! I use it to generate that little latest track thing on the bottom of the page.

I hope this little run-down helps if you are on the fence with streaming services.

I used Tailwind for the U in CUBE CSS and I liked it

Fri, 28 Jan 2022 11:33:00 GMT

A client project requirement meant I made a CUBE CSS with Tailwind prototype that actually turned out really well.

I’ve recently started a new client project where there’s a few developers involved. These developers vary in speciality and I of course, specialise in design implementation—what the folks at Clearleft describe accurately as Design Engineering.

With that, I’ve mostly taken charge of the CSS stuff and naturally suggested CUBE CSS, Every Layout and a fluid type and space system, powered by Utopia. This landed well with the developers, but there was an ask: “Can we use Tailwind, because we’ve used that for the last couple of projects”.

Normally, I’ll push hard on that sort of ask, because from lots of experience: very often when teams lean heavily into a framework, it accumulates a lot of expensive technical debt. But, a combination of a tight timeline and a need to practice what I preach—prototypes, prototypes, prototypes—I suggested that Tailwind should be part of the U in CUBE CSS for this project and I went ahead and made a prototype to test that approach.

This article is a report of sorts on that prototype and using Tailwind like this (and generally, I guess).

Why I didn’t want us to use Tailwind for everything

A big part of how I structure CSS—with CUBE CSS—is to reduce how much CSS is written and maintained over time. It’s also very important to present the browser with rules and systems that let them do the work, rather than micro-managing them to render exactly what you think the design has to look like.

This is firstly antithetical to the web as a whole: it’s a flexible medium that is open an accessible to anyone with an internet connection and a browser. With that, the sheer number of different devices, connection speeds, broken devices, dodgy software and dodgy connections is eye-watering. Writing very specific rules in that context seems a bit silly doesn’t it? I certainly think so. That’s why I aim to make things as flexible as possible with what I produce.

In my opinion, this is difficult when using Tailwind as the central, standalone CSS codebase. Sure, you can gain a lot of consistency with utility-first tools like Tailwind and Tachyons. Heck, Nicole Sullivan has been teaching us all to split out CSS like this since around 2009 with OOCSS. I even used to write extremely rigid CSS with BEM, mainly because browser compatibility was shocking last decade, so I wanted to make my code as safe as possible. This isn’t the case now, nor has it been for at least half a decade, so tools that write so-called “safe” CSS are much less useful than they were previously.

I look at this a bit how I look at CSS layout. For years we hacked layout together with floats, display: table etc. and it worked pretty well. Later on though, when Flexbox and Grid arrived, the need to hack layout together was redundant. That’s how I see super specific CSS now: because browser compatibility is stable and CSS is so much more powerful now, we can trust it do deliver truly stunning designs to everyone by writing it flexibly with progressive enhancement.

The proposed project setup

With that context and back-story out of the way, let’s get into the meat and taters of this article. The prototype’s CSS structure is as follows:

CUBE CSS as the overarching methodology
Every Layout layouts providing the C in CUBE
Tailwind utilities providing the U in CUBE
Utopia providing a fluid type scale and fluid space scale

On paper this looks like a real mashup, but aside from using Tailwind (I’ve been using Gorko for utilities), this is how I’ve been writing CSS for a couple of years now and it’s been very successful. A recent example of this is that it powers the web.dev front-end and design system.

A challenge for me in this project is that if we’re going to run with this approach, it’s looking we can’t really use Sass, which I am a fan of for keeping my CSS nice and organised. The way I see it though is that you need to meet each other in the middle in these situations, so I’ll pass-up Sass, just like the other developers are passing-up using Tailwind for everything.

What I want to really avoid is the PostCSS pretending to be Sass setup—which is very possible—but oh-so-fragile. I’ve had awful experiences with this too. Instead, I’ll be recommending that we lean into CSS Custom Properties. We could use Tailwind’s @apply to apply utilities in our components (Blocks in CUBE CSS), but that in my opinion is some potentially expensive technical debt. Mainly because I can already see issues with how Tailwind might clash with upcoming CSS features, such as @layer.

In the space of very little time, I managed to roll-out a little generator that takes Tailwind config groups and generates CSS Custom Properties. This is a good start and could rather easily create a solid system for creating reusable tokenised CSS—even if—or even, when—Tailwind is no longer preferable to the wider team.

So now, at this point, everything has a place. I like how adding a fluid scale was effortless in the Tailwind config too. That makes things much easier.

The CSS directory structure looks like this now:

src
└── css
    ├── blocks
    ├── compositions
    ├── utilities
    ├── cube.css
    ├── custom-props.css (generated)
    ├── global.scss
    └── reset.scss

Notice that there is a utilities directory. This is because—as per CUBE CSS—there are utilities that do one job and do that job well. The .visually-hidden utility is a great example of that. It just visibly hides content while making it available to assertive technology users, such as screenreader users.

Rather annoyingly, because PostCSS imports need to be at the top of a file, I had to import blocks, compositions and utilities in a separate cube.css file. This was because I wanted the Tailwind utilities to render last and the other partials to come after the global CSS, so I can lean into the cascade. Any tips on how I could not have to do that would be appreciated!

Things I like and dislike about Tailwind

One thing about Tailwind that I found super frustrating was that it took me ages to get up and running with it. This is often the case with tools that you don’t use a lot—I get that—and the problem with me is that I really didn’t want to use their whole config, which added time. That full config is massive. What would be nice would be a skeletal config that you can generate with the CLI. Something that just provides the bare basics. A bit like I do with Gorko.

A good example here is that the full config ships a lot of layout stuff—even bizarrely, Grid—which because we’ve got Every Layout and the Composition layer, we just don’t need them. I get that a lot of folks would find that stuff useful, but a middle-ground config without this stuff would be very helpful for others too.

On the subject of the config, I love that it’s JavaScript-based. Being able to manipulate data in place will undoubtedly make it useful when dealing with externally defined design tokens. This type of thing is just lush:

margin: ({theme}) => ({
  auto: 'auto',
  ...theme('spacing')
}),

The bit about the config I find extremely impressive and useful: the content section of the config. I piped the path to my little HTML page and bosh, it only generated the utilities I need. Versus what I’ve seen before—and talked about a lot—where Tailwind would generate a lot of cruft: this is a huge, positive step. Very nice work indeed, folks.

Lastly, the documentation site is excellent. I found nearly everything I needed, really easily. Well, it is fantastic, once you get past the frankly, outrageous copy on the homepage, such as this howler:

“Best practices” don’t actually work.

I don’t think I’ll ever stop side-eyeing that one 🥴

One thing that is frustrating about searching for Tailwind stuff on the web is that because it’s the Hot Framework Of The Moment™, there’s a lot of garbage articles out there, jumping on the hype train. That’s always the case, though, and I remember finding the same when searching React stuff, a few years ago, so I can’t really blame Tailwind for that.

Wrapping up

All of the above resulted in a nice little prototype, which you can see here. You can also see the source code here. It’s super rough around the edges, and you’ll see where I was exploring using @apply in places, but it should hopefully give you an idea of where I’m at with this.

I’m very often accused of being a “Tailwind hater”, but the reality is that I see flaws in using it for everything and people don’t like that. I also vehemently dislike how it is marketed (like the above quote), which is often mistaken for “hate” of the whole project. I actually used Tailwind for a project way back in 2018 when it was a much younger tool, so it’s not like I haven’t had exposure to it to form my opinions, which from that experience, were not overly positive. That is less the case now, as I’ve just demonstrated.

The thing I do actually hate about Tailwind is that when someone criticises it, a swarm of petulant men-children harass them on social media. I don’t imagine that will ever change—I can’t see the Tailwind folks actually doing anything to counter that either (although I would love to be proven wrong). What Tailwind is though, is a tool that has evolved very nicely and in the context I’m using it for in this prototype—as a utility generator—it works an absolute charm.

It’s likely this won’t be the last time it meets CUBE CSS in my projects.

The five levels of hype

Wed, 26 Jan 2022 10:34:48 GMT

This is bloody brilliant: https://johannesklingebiel.de/2022/01/12/hype-as-a-scale.html

You can link this to so much, but especially in the present, certain frameworks and of course, crypto bullshit like NFTs etc.

I’m posting it here so I can find it in the future, because I think I’m gonna be able to link it to a lot in tech.

Week 2 notes – 2022

Fri, 14 Jan 2022 13:31:36 GMT

Another week and I’m still on this weeknotes biz, so I’ll give myself a pat on the back. Yes, it might well only be week 2, but whatever.

I’ve spent the vast majority of my work week in meetings, which hasn’t been great, but, I have kicked off some absolute banger projects. Some super creative ones, too.

Most importantly, we are releasing the 3rd edition of Every Layout imminently (who knows it might even be live now) which features a brand new homepage that I’ve been promising to design for the past two years. We’re super happy with it.

A fun thing I did this week was take my eldest daughter stargazing because she won a science competition at school. The astronomer had a banger of a telescope which allowed us to see the moon in ridiculous detail. We also got a good look at Jupiter, which was ace.

I live in the middle of nowhere now, so I’m very tempted to get into astronomy with the little’n. We got her a little telescope for Christmas, so we’ve got everything we need already.

Brooklyn and the Astronomer’s banger telescope, looking at the moon

Last up, to fulfil my resolution to get down to 14st and maintain it, I started PT sessions this week. At the time of writing, I can no longer feel my arms as they are now actually made of jelly. This PT is really good. He’s not an in-your-face fitness dickhead, but a sports scientist. I’m super injury-prone, so that provides me with some comfort. He’s also going to get me set on a long-term and sustainable plan, so that should be good.

Anyway, the timer has run out, so with that, I bid you a good weekend!

Week 1 notes – 2022

Fri, 07 Jan 2022 10:47:16 GMT

I’m getting back on this week notes biz, because I think it’ll be good for the ol’ brain. I’m making it easier for myself now though and setting 5 minute timer before I start writing then publishing when it finishes (after a little proof-read). I reckon that’ll make me keep consistency and achieve my resolution of writing at least 40 week notes.

So with that in mind, let’s get started.

This week has been pretty full-on, being the first week back—even if I did only officially come back on Tuesday. I had a proper break over Xmas and new year. I broke up on the 16th of December, so nearly had 3 weeks off. I bloody needed it because I was completely done-in at the end of the year.

The main theme this week has been admin and re-desigining the homepage for Every Layout, which I’m hoping to get built out next week. We’re going to be releasing a 3rd edition of the book, so we wanted a proper landing page to sustain sales better, long term.

I also got a filling done this week. It was no where near as horrendous as I thought it would be. I’ve done pretty well to get to 34 without having any fillings—even if announcing that fact confused folks and made them think it was my birthday lol (it’s not ’til July 20th).

Next week I’m getting face deep in the Set Creative Studio website project too. Looking forward to doing that. Also, I start with my new personal trainer so might not even make it to the week notes.

Right, timer is up. Catch you next week.

First ever filling

Wed, 05 Jan 2022 10:38:18 GMT

I’m 34 years old and today, I’m getting my first ever tooth filling.

It’s a miracle I’ve made it this far without getting one to be honest.

Very handy HTML boilerplate

Tue, 04 Jan 2022 10:54:42 GMT

I’m a big believer in styling as much with CSS, as high as possible. Heck, I even made that the leading principle of CUBE CSS!

I have been thinking about marking up loads of HTML for this, but I don’t need to because Daniel Box has created this fantastic HTML kitchen sink already: https://github.com/dbox/html5-kitchen-sink

I will definitely be using this ongoing.

Last.fm 2021 summary

Sun, 02 Jan 2022 14:30:37 GMT

I got back into last.fm in the spring and they just sent me my 2021 summary. It’s quite interesting to look back on.

Last.fm is really good—albeit not amazing at scrobbling from Apple Music, because it’s definitely missed a lot.

I’ve been using it on-and-off for well over a decade and it feels more wholesome than the corporate “cool” vibe that Spotify gives off. 100% less horrendous marketing department cringe copy on this summary vs the Spotify wrapped stuff too lol.

Listen outside of your usual tastes

Sat, 01 Jan 2022 18:03:42 GMT

A bit of advice for the new year with music.

Try to listen to stuff outside of your usual music tastes—don’t let the streaming app algorithm dictate to you too much. This is especially the case with Spotify discover weekly.

If you listen to something completely off your radar and like it: I can guarantee it will make your day, week, month, or even year!

2022 Work Resolutions

Fri, 31 Dec 2021 12:24:52 GMT

I’m fully rested now after having 2 weeks off from working, so I’ve sat and put together my work resolutions for next year, which compliment my main, personal resolutions for the year.

Here they are:

The only priority is producing and enabling the production of cool shit
Ignore tech framework discourse and importantly, don’t contribute
Ignore crypto discourse and importantly, don’t contribute
Be in a position to make our first hire by the end of the year
Have fun and reduce the amount of boring work I do
Be creative again; it’s been too long
Be at peace with the fact that the tech industry will probably forever disappoint, but that should not stop me working in and around it

Points 1, 2 and 7 have been a consistent drain on me this year and getting salty about them on Twitter literally achieves nothing so I need to stop. I’m going to be bumping up my already massive mute lists on Tweetbot.

I am very much looking forward to producing some seriously cool and creative shit with Set Creative Studio this year too!

Joining Meta

Wed, 29 Dec 2021 14:04:44 GMT

As if I’d commit such a heinous, ethical crime!

Joining Meta (aka Facebook) or a company that does very high levels of harm—lets say, Coinbase, for context—rightly should raise eyebrows and question the ethics behind that choice.

If this is you: own it.

LEGO advent calendar done

Fri, 24 Dec 2021 09:37:09 GMT

I’ve always wanted one of those LEGO advent calendars and always missed out before they sold out.

I managed to get my hands on one this year and it’s got me well into LEGO again. I need to get on with my shoe now.

Wrapping up 2021

Thu, 23 Dec 2021 15:24:17 GMT

It’s safe to say I completely failed at everything I set out in last year’s post, but after how this year has gone with [gestures wildly] everything, I’ll let myself off. I say failed but actually, some parts were a success in an odd sense, and with this, let’s get stuck into 2021’s review.

I’ve worked far too hard, again

I’m getting fed up of myself now. I aimed to work much less this year but I think I actually worked more…Partly, this was because a couple of projects that I just couldn’t say no to turned up, but also I’ve spread myself too thin in other places too.

Last year I set out to work 4 days a week by the end of this year. I didn’t get there, but what I did do is change my work-life balance for the better. I used to tap around on my laptop in the evening: either shitposting on Twitter, or messing around with design and code stuff, but now, we just chill out, watch TV and relax in the evening. Although I have worked way too hard, this has had a big positive impact on my mental health.

Cya later Piccalilli

I said last year that I would get into content full time this year and that did not happen. Here’s why:

I was never “off” which I fucking hated
I wrote most of Learn CSS in a very short period of time which completely burned me out from writing tech content
I did some writing to a brief, which I hated
I couldn’t keep up with the ultra-positive educators which crowd the space
I was constantly monitoring “revenue”, which was exhausting and stressful

To add some more detail to those points: I am rather pragmatic, British and admittedly, a bit grumpy. Lots of people fed-back that my approach and “vibe” was refreshing vs the ultra-positive—bordering on toxic positivity—vibe from other educators, but unfortunately, that doesn’t sell very well. This mixed with the stress of constantly monitoring revenue was just bollocks and I hated it.

I always felt like I needed to constantly pump out content too. You get lucky and write a banger that brings lots of eyes to your site every now and then, but because high traffic turns into course sales, I had to try and keep up with the momentum. This had a detrimental effect on my creativity and mixed with blasting out Learn CSS, I just stopped writing altogether. I only wrote my first technical post since then in November, for CSS-Tricks.

I’ll keep the articles on Piccalilli—I hate link rot—but consider that site a goner now. I’m done with it. I might write more stuff in the future, but not for a long while now.

A new agency looms

All of the above provides context for where I’m going—work-wise—in 2022. I’m setting up a new creative agency: Set Creative Studio which builds on what I’ve achieved as a freelancer over the last few years. I’ve done client services for the vast majority of my 13+ years in this industry, so it makes a lot of sense to do that.

I’ve worked for and worked with lots of crap agencies over these years too, so a big part of this venture is putting into practice what I’ve been preaching this whole time. It’s going to be a lot of effort (I’m not even going to attempt 4 days week this year lol), but I hope it will be satisfying work.

I’ve done a lot of design system related stuff for clients this year—which is what I’m known for and do pretty darn well—but really, I’m a proper creative, so this agency should hopefully help me—and a crack team of ridiculously talented freelancers produce some super creative—yet fully inclusive—websites.

More to come next year.

Resolutions

Right, it wouldn’t be an end of year review without some goals:

Say no even more than I already do
Block-book holidays and stick to them and stick to my schedule
A strict ban on evening and weekend working
Get down to 88kg (14 stone) in weight and maintain it
Be happier with myself, this time next year
Write at least 40 week notes

On those, I only took one week of holiday this year, which is frankly, obscene. No wonder I’m fucking knackered and burning out. I need to look after myself more as a priority, because if I don’t, I’ll end up in a bad place.

The last points are related to this too. I’m really pissed off with myself for overworking again. I’m also pissed off with myself for letting my weight slip too. To be happier with myself, I think I need to prioritise those aspects and if I do: the last point will be achieved.

I’ve also written some specific work resolutions.

Wrapping up

In summary, I’d give this year a solid 6 out of 10. There has been plenty of good, but the overworking gets very bad marks.

To my family and everyone who has been a good pal this year and supported me: thanks very much. I love you all very much.

I really hope you, dear reader, have a fantastic and healthy 2022. Surely things will start to get better.

Until then, take it easy 👋

WordPress app is good

Thu, 23 Dec 2021 10:10:58 GMT

A big reason I put this site back on WordPress was that the iOS app is bloody excellent.

It’s definitely helping with the aim of making writing a personal thing, rather than a work thing, which as hard as I try, editing markdown files always is.

If you have a WordPress site, give it a try!

Yorkshire top-up

Wed, 22 Dec 2021 19:13:41 GMT

I’ve just come back from a lush couple of days back in my hometown, near Bradford.

My accent has had a top-up, as has my heart for seeing family I haven’t seen in over two years. I did put a massive fucken dent in my brand new car though, but that’s no biggie, all things considered.

All-in-all, a 10/10 time.

Importing Eleventy content into WordPress

Wed, 15 Dec 2021 16:14:41 GMT

Related to redoing this blog, I thought I’d quickly share how I exported all of my 11ty content and imported it into WordPress.

Steps

First up, I installed a fresh copy of WordPress and cleaned out the default posts, pages and comments.

Then, in the existing Eleventy project, I added the following page—which I named wp.njk—which generates an XML file, which the WordPress importer can understand:

---
permalink: 'wp.xml'
---
<?xml version="1.0" encoding="UTF-8" ?>

<rss version="2.0"
xmlns:excerpt="http://wordpress.org/export/1.2/excerpt/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:wp="http://wordpress.org/export/1.2/"
>

<channel>
  <title>YOUR NAME HERE</title>
  <link>YOUR WEB ADDRESS</link>
  <description>Just another WordPress site</description>
  <pubDate>Wed, 15 Dec 2021 10:27:40 +0000</pubDate>
  <language>en-GB</language>
  <wp:wxr_version>1.2</wp:wxr_version>
  <wp:base_site_url>YOUR WEB ADDRESS</wp:base_site_url>
  <wp:base_blog_url>YOUR WEB ADDRESS</wp:base_blog_url>
  <wp:category>
    <wp:term_id>1</wp:term_id>
    <wp:category_nicename><![CDATA[uncategorized]]></wp:category_nicename>
    <wp:category_parent><![CDATA[]]></wp:category_parent>
    <wp:cat_name><![CDATA[Uncategorized]]></wp:cat_name>
  </wp:category>
  <wp:term>
    <wp:term_id>1</wp:term_id>
    <wp:term_taxonomy><![CDATA[category]]></wp:term_taxonomy>
    <wp:term_slug><![CDATA[uncategorized]]></wp:term_slug>
    <wp:term_parent><![CDATA[]]></wp:term_parent>
    <wp:term_name><![CDATA[Uncategorized]]></wp:term_name>
  </wp:term>
  <generator>https://wordpress.org/?v=5.8.1</generator>
  {% for item in collections.items %}
  <item>
    <title><![CDATA[{{ item.date }}]]></title>
    <link>YOUR WEB ADDRESS/{{ item.fileSlug }}/</link>
    <pubDate>{{ item.data.title }}</pubDate>
    <dc:creator><![CDATA[test]]></dc:creator>
    <description></description>
    <content:encoded><![CDATA[{{ item.templateContent | safe }}]]></content:encoded>
    <excerpt:encoded><![CDATA[]]></excerpt:encoded>
    <wp:post_id>{{ loop.index + 5 }}</wp:post_id>
    <wp:post_date><![CDATA[{{ item.data.title | w3DateFilter }}]]></wp:post_date>
    <wp:comment_status><![CDATA[closed]]></wp:comment_status>
    <wp:ping_status><![CDATA[closed]]></wp:ping_status>
    <wp:post_name><![CDATA[{{ item.fileSlug }}d]]></wp:post_name>
    <wp:status><![CDATA[publish]]></wp:status>
    <wp:post_parent>0</wp:post_parent>
    <wp:menu_order>0</wp:menu_order>
    <wp:post_type><![CDATA[post]]></wp:post_type>
    <wp:post_password><![CDATA[]]></wp:post_password>
    <wp:is_sticky>0</wp:is_sticky>
    <category domain="category" nicename="uncategorized"><![CDATA[Uncategorized]]></category>
  </item>
  {% endfor %}
  </channel>
</rss>

The {% for item in collections.items %} part refers to the Eleventy collection—which in my case was items. I then loop through those to create a WordPress post. Make sure you replace YOUR WEB ADDRESS with your actual website.

Then, import it into WordPress and bish, bash, bosh: you’re all done.

Boosted 💉💉💉

Wed, 15 Dec 2021 15:44:36 GMT

I’m fully boosted! I just popped into my local doctor’s surgery, got a jab and walked back out again. Easy peasy.

Let’s hope that gives not just me, protection: but those around me too as Omicron gets scarier and scarier.

As an aside, I regret marking my first and second jabs on Twitter instead of here, but hey-ho, there you go.

Update on the day after:

The second Pfizer whooped my arse completely: I legit felt like I had been run over by a train.

This booster has been mostly fine tho: I just feel tired with achey joints and skin—like when you’re just about to come down with an illness.

Get the booster, if you can, in short.

Going for a haircut

Wed, 15 Dec 2021 10:37:20 GMT

I used to work in this horrible, toxic agency, years ago and one of the folks that worked with me was looking for a new job, on the sly. To sneak off for interviews, they would “go and get a haircut” and come back with exactly the same hair.

This was nearly a decade ago now, but me and pals still refer to looking for a new job as “getting a haircut”, even now. Makes me chuckle every time.

New Blog, who dis?

Wed, 15 Dec 2021 10:25:41 GMT

It’s that time of year again: personal sites getting a new lick of paint to close out the year. My personal site has been limping along for a few years now with some extremely basic CSS. It was also running a static site generator—Eleventy—but now it’s built with WordPress as an ultimate throwback to when I first started building websites for clients, back in 2009.

It’s extremely not finished. If anything, it’s just the start. I wanted to give myself a nicer starting point, so implemented CUBE CSS with Gorko and Sass. I also blew the dust off a basic WordPress theme starter that I made years ago, which was reminscent of Starkers, to give me a clean slate.

I don’t have a problem with Eleventy: I’m a big fan of it, but I also wanted to get back into more traditional web development stuff, now that I’m expanding my business into an agency. Eleventy is also a static site generator which meant writing was like working, by proxy of sitting and editing markdown files. I wanted to change that to encourage more writing—away from work, so I rebuilt the site with WordPress—mainly because I really like the block editor.

I did do some exploration with Kirby CMS too because I think that will be a key technology for client work in the new year. It really is a fantastic CMS.

Anyway, I hope you like the new dim look and feel I’ve gone for. I didn’t want to mess around with dark mode and light mode (I’ve spent too much of this year messing around with that shit), so went for the middle ground. The fantastic Cartridge font does all the heavy lifting in terms of character too.

Next year, I’m gonna probably make the front-end super creative, so keep an eye out for that.

1st November 2021 at 10:18

Mon, 01 Nov 2021 10:18:10 GMT

Three years ago today, I started my second stint as a freelancer. It’s still my best career move to date.

After the company I worked for went under—making me redundant 48 hours before my second child was born—and a subsequent hellish period of going through interview processes with Tech Companies™, I made the right choice to fuck all of that off and go back to being a freelancer. Three years on: I have absolutely no regrets whatsoever.

This year has by far been my most successful work year, but also, the busiest and most stressful. I vowed to work less this year, but after making what has turned out to be the right choice, to turn my back on making educational content: getting more into client services work has kept my schedule very busy.

This has now been my longest role in tech. The longest prior to this was 2.5 years in the agency I joined after my last stint as a freelancer.

I’m in a completely different place since then. Mostly, I’m a lot more experienced. I started freelancing when I was essentially a junior and that was a baptism of fire. I now recommend that people in a similar position work for a company—for at least a couple of years—just to get that early experience and hopefully, mentorship.

I would definitely recommend to people beyond that phase of their career to consider freelancing though. The freedom that freelance provides is worth so much. It helps me work to live, rather than live to work. There’s also a 100% guarantee that my employer—me—won’t turn out to be a horrible company.

Anyway, that’s enough work stuff on this blog. I’ve got big plans for next year that will hopefully—long term—make life all about working to live in a sustainable and sensible way. For now, though: I’m just off the back of a horror deadline, so I’m gonna make a celebratory brew and think fondly back to how happy and relieved I was on November 1st, 2018.

18th October 2021 at 10:14

Mon, 18 Oct 2021 09:14:44 GMT

Some things that have had nothing but an overall positive impact recently:

Removing my work email from my phone (turns out you can actually do this if you work for yourself)
Saying no, a lot
Allowing stuff to be suboptimal (in my eyes); not everything I deliver needs to be perfect (in my opinion) if it overall, makes things way better
Finally accepting that tech is no different, nor more special than other industries. It’s teeming with bellends, just like the rest
Setting myself set work hours and sticking to them relentlessly
Finally accepting that although making education stuff was cool, it’s realistically not for me and client services stuff very much is for me
Banning myself from scrolling all forms of social media
Setting my business operations and pipeline up that will almost certainly guarantee at least a couple more years of me working for myself, even if shit hits the fan
Prioritising personal and family life over everything else

9th October 2021 at 10:35

Sat, 09 Oct 2021 09:35:18 GMT

Our eldest kid is 5 years old today. We’ve been parents for half a decade. To say I’m proud of our little family is an understatement.

Happy Birthday, Brooklyn. You’re a good kid.

What Andy Listened To – Issue #4

Fri, 08 Oct 2021 11:10:00 GMT

This issue is teeming with emo and and heavy goodness to fill your ear-holes with. Thanks to the recent new Thrice album, I’ve done a full hand-brake turn into emo-land. It was a matter of time, frankly, so let’s dig in.

Let It Enfold You

Senses Fail – 2004 | emo

I’ve got you an absolutely iconic album here that was at the foundation of the best emo years. I managed to snag a copy of this on vinyl recently too, which is a double win. The album’s namesake track, “Let It Enfold You” is likely some of the most hilariously whiny, emo lyrics you will ever hear too.

Everyone You Love Will Slip Away From You

Speak The Truth… Even If Your Voice Shakes – 2017 | emo

Speaking of Sense Fail: imagine what would happen if you put members of Finch with the Senses Fail vocalist, Buddy Nielsen. Well, imagine no more, because that is exactly what this band are and frankly, I fucken love it.

MMXX

Eskimo Callboy – 2020 | party metalcore, post-hardcore

This sorta breaks the rules of this blog, but whatever: YOLO. This EP is great fun and reminds me of “The Hell”, quite a bit. I described it in the music Discord I run as, “If BMTH and Enter Shikari were to have a baby, it would sound like this” and I still can’t think of a better explainer.

Other emo treats

I’ve also been listening to my favourite Taking Back Sunday album, “Where You Want To Be”, which is also, iconic. It would also be rude of me not to recommend my favourite Finch album, too: give “Say Hello To Sunshine” a listen. It went down like a cup of cold sick with a lot of “die-hard” Finch fans when it launched, but I personally think it’s their all-time best album.

5th October 2021 at 10:47

Tue, 05 Oct 2021 09:47:34 GMT

It’s been over a month now since I stopped looking at the Twitter timeline and my mental health has improved drastically—so much more so than I thought it would. Thanks to tools like Front, I haven’t actually logged on to the site at all—only once to post an image because you can’t post alt text with Front…

The timeline is what has been the killer for me. The absolute awful daily takes were grinding me down and speaking of grind—the vomit-inducing coding journey bullshit was getting too much. Part of this is that I just gave up making courses and stuff—which by measure of feedback, I was doing pretty good at—because I can’t stomach the reflux-inducing hyper-positivity that a lot of educators use to flog courses. I’m too pessimistic and frankly, British to do that. I’ve actually enjoyed slingin’ code for clients instead.

I’ve pretty much already been booked up for 2022, too. So much so, I’m quietly considering building on that and looking at how I could potentially take on a junior/apprentice. I would love to give someone who comes from a similar, poor, working class background that I do, because as vomit-worthy as Tech Twitter is: the tech industry is a great industry for social mobility. A lot more thinking to be done on that front.

Anyway, I couldn’t recommend having a hands-off relationship with Twitter anymore if I tried. I don’t feel “behind” and treating it like an inbox, with Front, has actually made it all more manageable.

What Andy Listened To – Issue #3

Fri, 17 Sep 2021 11:19:00 GMT

I’ve had my head down a lot this week, so not listened to loads of music, but I have listened to a lot of hip hop (no surprises). We also have a new release I have been very eagerly waiting for.

Horizons / East

Thrice – 2021 | post-hardcore, alternative rock

Thrice are my favourite band, so I’ve been waiting for this to come out. It’s a shame it’s been such a busy week because when new Thrice albums come out, I like to listen to their entire discography in order (not the alchemy index though lol).

This record sees Thrice evolve even more. They started of very much as a hardcore punk / post hardcore band and over the years have gotten a hell of a lot more melodic—almost post-rock—while keeping a massive sound. They’re ace, this album is ace and you should listen to it.

Sometimes I Might Be Introvert

Little Simz – 2021 | hip hop

This album blew my fucking socks off. I spotted it on Apple Music because a few pals were listening to it and I’m so glad I did. I mentioned how much I love British hip-hop and the grim scene in a previous issue, so this was always going to hit the spot for me.

It’s a masterpiece and I think it’s gonna mop up the awards.

If You Can’t Join ‘Em… Beat ‘Em

DJ Format – 2005 | hip hop, turntablism

DJ Format is a music-making machine and I’ve been a big fan of this album since it came out. It sends me back to one of my favourite ever summers—2005, when I was just turning 18, finally being done with school and frankly, doing a lot of “extra curricular” activities and loving it.

Regardless of your music tastes, I can guarantee you will enjoy this. The raps by Abdominal (Format’s long-time collaborator) and D-Sisive are exquisite too.

Other albums worth a mention

I’ve been listening to Qveen Herby’s, A Woman a bit again this week. She’s not only a great rapper, but her singing voice is massive. There’s some real nice production on there too.

Special mention to Roots Manuva with Run Come Save Me. I’ll never forget seeing Roots Manuva at Leeds Fest in ’05. It was lunch time when he played but I don’t think I’ve ever boogied so hard in my life.

17th September 2021 at 11:45

Fri, 17 Sep 2021 10:45:33 GMT

I shared yesterday that I’ve been using Front to manage my Twitter replies and DMs and Sara asked me to write about how I have Twitter stuff setup at the moment, so here goes.

I’ve got documented issues with Twitter. It has a severely bad impact on my overall mental health and I’m addicted to it. I wish I could get rid of it completely, but unfortunately, the industry I work in insists on centering everything on Twitter, so I am in effect, held hostage by Twitter.

I refuse to use the main site and apps anymore and participate in the algorithm that dismantles communities by driving controversy. I also refuse to participate in the fucking awful takes of Tech Twitter Personalities™.

The setup

Let’s dig into the nuts and bolts. Because I still need to engage with Twitter, I want to do it from afar. All I’m interested in is:

Posting
Replying to mentions
Having control of my DMs

To tackle points 2 and 3 I’m using Front. It’s actually a support tool, but I’ve found it really useful because it lets me run Twitter like an inbox. I fucking love email, so this setup is perfect for me. I can set rules, snooze items, tag items and be super organised, just like I am with email. I now push my Gmail stuff into there too.

It’s not cheap though: $38 a month because you have to have at least two “seats”, which is daft. But, the way I see it, $38 a month is nothing if it helps my thinker stay healthy.

For posting, I’m using IFTTT. For this blog and my music blog, I have an RSS recipe that reads my feeds (this feed, music feed), the auto tweets the title, url and content. I can also post directly from Front. Perfect.

For Piccalilli, I decided to tweak it a bit. I still use an RSS applet, but I created a specific Tweets feed that allows IFTTT to post the title, summary and url. Works a treat.

IFTTT also make you pay for running multiple applets, but again, it’s worth it. It’s $3.33 for unlimited applets. I fucking love IFTTT as a service and use it for a few handy automations, so again, more than happy to pay that.

Hopefully this helps someone else have a healthier relationship with the hell site that is Twitter.

Take it easy ?

10th September 2021 at 18:40

Fri, 10 Sep 2021 17:40:17 GMT

You’d think the fastest thing is y’know, light, but it’s actually me muting a new channel in a community Discord.

What Andy Listened To – Issue #2

Fri, 10 Sep 2021 11:21:00 GMT

It’s been a heavy hip hop week for me this week with a large portion of alternative/party rock, featuring a long overdue listen of a band that continues to make waves.

Ghetto Pop Life

Danger Mouse and Jemini The Gifted One – 2003 | hip hop, rap

This album consumed a lot of my late-teen/early adulthood life and this week, I managed to land an original 2003 vinyl copy. Danger Mouse is beyond talented and is responsible for some of my favourite albums of all time: namely “The Mouse And The Mask” and “The Grey album”. This album firmly sits up there with those two classics.

What I love the most about this album is Jemini’s flow and lyrics. It’s a masterpiece which is perfectly decorated with Danger Mouse’s stunning production work. My track pick is “The Only One”—it’s super funky.

Fear Of A Black Tangent

Busdriver – 2005 | hip hop, rap

If you like Blackalicious, you will love Busdriver. He sits so far behind the beat (a bit like Jay-Z) that a lot of the time, he feels out of time, but I love that. The beats on this album are supremely good too.

My track pick is “Unemployed Black Astronaut”. It’s actually one of my favourite hip hop tracks of all time.

Technology

Don Broco – 2018 | alternative rock, party rock

For the longest time, I’ve been aware of the hype surrounding Don Broco—people fuckin’ love them—but I’ve never actually listened to them. I saw some footage of them absolutely owning it at Leeds/Reading and decided to finally get into them and holy shit, I’ve been missing out.

Like, this stuff isn’t super special by any stretch, but it’s just really enjoyable to listen too. Music doesn’t have to be critically acclaimed to be good: as long as you enjoy it and this album is exactly that for me. The guitar tone on this album is bloody outrageous too.

Other albums worth a mention

I also managed to land a copy of The Vertigo Of Bliss by Biffy Clyro on vinyl which is a must-listen because that album and Infinity Land are in my opinion, were when Biffy were at their best. You should give Curious Electric (extended EP) by Proceed a go too. That’s some lovely, melodic rock stuff right there.

9th September 2021 at 10:40

Thu, 09 Sep 2021 09:40:51 GMT

I got the best sentence in an email today:

“You were due to start jury service soon but you have now been excused”

I got a call yesterday and didn’t want to really believe it until I had it in writing. I imagine jury service is fine if you’re in a salaried position—mostly because you have to get paid your salary while you do it. As a freelancer with a very busy schedule at the moment (my fault), it was the cause of a lot of stress.

Feelin’ much lighter today.

8th September 2021 at 09:38

Wed, 08 Sep 2021 08:38:50 GMT

It’s our kid’s first day at school today. It literally feels like yesterday that I was driving her and her mum home at 20mph from the hospital.

That was nearly 5 years ago…

7th September 2021 at 16:02

Tue, 07 Sep 2021 15:02:09 GMT

It’s been a while since I’ve posted on this blog. If you’re reading this on Twitter, I’ve gone back to syndicating these articles with IFTTT. It auto-tweets via my RSS feed.

Anyway, Twitter is the subject of today’s article.

A week ago, I decided it was time to go on an extended—potentially permanent—break from Twitter. I did this because friends, I am terminally fed up with not just Twitter: but social media as a whole.

The reason I’m focusing on Twitter today is because I can’t escape it. Let me explain why.

Last weekend was a bank holiday here and we had a lovely few days where my partner’s family came over. Lots of good food and good LOLs were had. The subject of social media came up and me—being a few wines down—went into a full-throttle attack on Facebook and its devastating impact on society.

Long story short: after they learned of Facebook’s genocidal history and the penny dropped about how small rewards for engagement is the game—not “keeping up with family”: my partner’s sister and I decided to deactivate Facebook products in solidarity with each other. I only had an Instagram profile because Facebook itself is long dead to me.

I deactivated Instagram and all that was left…was Twitter. I have two accounts on Twitter: my main—what I call “work” account and a private, mutuals-only account. I opened the latter a few months ago because frankly, I got fed up of fucking reply-guys.

The problem we have here is that the main “work” account can’t be deactivated because the industry I work in decided that Twitter would be integral and I am freelance. Yep: the platform that limits content to 280 characters and actively rewards hot-takes and negative interactions is the bedrock of the tech industry. Yes, there are blogs and people read blogs, but really, it’s all on Twitter. The problem with my private, mutuals only account is that a lot of mutuals work in tech, so that content (through no fault of theirs) follows them into the no-work zone, so the nice LOLs I have on there are constantly tainted with Jon McWanker’s “well, really, the cascade was a mistake” shit-takes.

Ideally, I’d nuke both accounts and deal with the consequences later. The problem is that very rarely, Twitter does bring upon good opportunities. A lot of my work is credited to that Twitter account too, so loads of links would just stop working overnight, which is not cool. So in short: I’m fucking trapped.

What am I going to do then? It’s time to go fully hands-off with Twitter. This is the first step: posting from a third party. Even with Tweetbot muting the living daylights out of almost everything: Twitter is still hell. I just can’t be around it anymore. It’s severely impacting my mental health and as I’ve written before: I’m fucking addicted to it.

What I hate the most is the fucking asinine takes on everything. Lucky for us, Chad McDickhead has strong opinions on CSS frameworks and painfully naive takes on the impact of US Troop withdrawal on Afghanistan. He also thinks that the COVID vaccine is “experimental” and we should all “get back to normal”. Let me tell you dear reader: after losing a loved one recently to COVID, those latter comments hit different.

Anyway, I just thought I’d share what’s going on. You’ll be happy to know that since last week, I feel endlessly happier and also, weirdly burned out. I think I knew a big burnout was coming and luckily, I know the signs to deal with it now. Getting away from Twitter will only help that.

I’ll auto-post from here and my new music recommendation blog and hopefully, that’s all you’ll see from me on Twitter—for a few months, at least. The sad thing is that I like to use my following to give people a leg-up by signal boosting them. If anyone has ideas how I can still do that, let me know.

As always, email is the best way to contact me (hi@piccalil.li), but if you really have to: I will periodically check Twitter DMs using Twizzle.

In closing, I managed to quit smoking—after 15 years—and have a sensible relationship with cigarettes, so I can damn-well do the same with Twitter.

Take it easy.

What Andy Listened To – Issue #1

Fri, 03 Sep 2021 11:23:00 GMT

This is the first ever issue of this feature and we have some top notch albums this week.

The Exquisite Death Of Saxon Shore

Saxon Shore – 2005 | post rock, ambient, instrumental

This one has been a regular on my radar since it came out. I used to listen to it to wind down when I was at Uni after—shall we say—one-too-many “beers”. This album also got me through the worst part of now, permanent tinnitus.

My favourite track is and will forever be, “Silence Lends A Face To The Soul”. It’ll absolutely crush you—in a good way.

Heavy Is The Head

Stormzy – 2019 | hip hop, rap, grime

Whenever British music is mentioned, people often immediately mention The Beatles, The Rolling Stones or something like Led Zeppelin. I think Stormzy represents Britain better than all of those though—especially today’s fractured, broken, failed state, which—using his frankly, superb, lyrics—he documents perfectly. The production on this album is outstanding too. Stormzy is just a super nice lad, too.

My Favourite track is probably “Pop Boy”. It’s got a hell of a heavy beat.

Cult Drugs

Blood Command – 2017 | punk, post-hardcore

This will blow your socks off, like a spicy curry. This band are loud as hell and the outrageously powerful vocals from Silje Tombre are perfection. She’s definitely one of my favourite punk/hardcore vocalists, for sure. Top track for me is definitely the last track: “(The World Covered In) Purple Shrouds”.

Other albums worth a mention

I’ve really enjoyed getting back into Konnichiwa by Skepta this week, along with various EPs by June Jissle. Definitely check out A Celebration Of Endings by Biffy Clyro too.

I listed to Kanye West’s new Album, Donda, this week and frankly, it’s self-indulgent shit that’s clearly not even finished yet. To cleanse that, I went back and listened to my two favourite Kanye albums: The College Dropout and My Beautiful Dark Twisted Fantasy.

Getting started with CSS Custom Properties

Thu, 22 Apr 2021 13:38:00 GMT

Custom properties in CSS are exceptionally useful, not just for tokenising your CSS, but also for abstracting complexity and interactivity into smaller, easier to manage pieces. This short guide will get you up to speed with how they work and how to use them.

Say you’ve got some CSS like this:

h1 {
  background: goldenrod;
}

p {
  color: goldenrod;
}

.my-element {
  border: 1px dotted goldenrod;
}

There’s a lot of repetition in there, but how do you improve that with native CSS? You can use CSS Custom Properties—also known as CSS variables—to abstract and tokenise your CSS to make your code more manageable.

:root {
  --primary: goldenrod;
}

h1 {
  background: var(--primary);
}

p {
  color: var(--primary);
}

.my-element {
  border: 1px dotted var(--primary);
}

In this tutorial, we’re going to get a grip of the basics of custom properties and learn some of the extremely cool and helpful stuff they can do and how they can help your projects.

The basics

Let’s start right from the top and look at some basics. A custom property is just like a normal CSS property and value pair: a declaration. These declarations are defined inside a CSS rule.

:root {
  --text-color: rebeccapurple;
}

Once a custom property is defined, you can grab the value of it, using the var() function. This will retrieve the current computed value of the property, which we’ll cover in more detail, later in this tutorial.

With the combination of a declared custom property and the var() function, we can use them in our CSS to apply values, like this:

:root {
  --text-color: rebeccapurple;
}

h1 {
  color: var(--text-color);
}

CodePen Embed Fallback

Fallbacks

If a custom property value that hasn’t been defined, the initial or inherited value will be used instead, but if the Custom Property is invalid and you don’t provide a fallback, it’ll fail. This can result in some pretty lousy looking user interfaces, so a good shout is to provide a fallback to the var() function.

h1 {
  color: var(--text-color, royalblue);
}

By passing a second, fallback value, the <h1> will be royalblue if the --text-color custom property has not been defined.

Fallbacks are handy as heck, but they aren’t used by browsers that don’t support custom properties. For the microscopic share of browsers that don’t support custom properties, you can use custom properties as a progressive enhancement, like this.

h1 {
	color: royalblue;
  color: var(--text-color, royalblue);
}

We still have to pass a fallback to the var() function because as we just learned, an invalid value—which includes undefined custom properties—will result in the initial or inherited value being used.

CodePen Embed Fallback

Custom properties are computed

Once you set a value for a custom property, it can be changed in context and just like any other declaration—a property and value pair—it will be affected by specificity and the cascade.

Take the first example as a context:

:root {
  --text-color: rebeccapurple;
}

h1 {
  color: var(--text-color);
}

If this <h1> was inside an <article> with a class of .colour-change, which has a CSS rule, declaring a value for --text-color: that value would be applied.

:root {
  --text-color: rebeccapurple;
}

h1 {
  color: var(--text-color);
}

article.colour-change {
  --text-color: seagreen;
}

This CSS is applied because .article.colour-change has a higher specificity than :root.

CodePen Embed Fallback

You can set custom properties with JavaScript

This ability to contextually override a custom property makes them incredibly useful for interactive states and generally writing less CSS. The previous demo used a toggled CSS class to contextually set a custom property value, but you can also set them inside your JavaScript:

const article = document.querySelector('article');
const button = document.querySelector('button');

button.addEventListener('click', (evt) => {
  article.style.setProperty('--text-color', 'tomato');
});

CodePen Embed Fallback

The <article> gets the value for --text-color applied in its style attribute, which gives it a way higher specificity than :root.

Wrapping up

This quick intro to Custom Properties has hopefully given you the knowledge and confidence to explore them further. If you want to learn more about them, I recommend the following resources:

Until next time, take it easy 👋

14th April 2021 at 12:21

Wed, 14 Apr 2021 11:21:11 GMT

I’ve been working way too hard recently so I’m treating myself to starting a fun, personal project I’ve been meaning to start for a long time.

I’m creating an index of my music collection and will be rebuilding what I lost. I’ll be buying a combo of physical copies of albums and downloading high quality digital versions. I’ll record vinyls to digital, too.

It’s going to take fucking years but so be it. It’s going to be wholesome.

2nd April 2021 at 08:49

Fri, 02 Apr 2021 07:49:38 GMT

I just got that glorious feeling of opening a physical record—a vinyl. It was Led Zeppelin’s first album.

I was a fanatical music collector, once upon a time. I had a CD collection of over 350 albums! Because it got so hard to find an album I wanted to listen to, I bought one of those massive CD wallets DJs use and put every CD in order.

Proud of this system, I took it to a mate’s so we could listen to some albums. It got late, so I got a taxi home. I left the CD wallet in the taxi. I never saw it again!

I’m ashamed to say this is the day I decided I’m going to download Kazaa and pirate music.

I’ve realised recently, I miss having a physical copy of albums, a lot. I like streaming services—currently Apple Music because my collection is too big for Spotify’s arbitrary limits—they’re great for discovery, but artists get paid fuck all. I’m going to either buy a vinyl, cassette or at least go to their bandcamp and download a FLAC of their album instead.

I’m looking forward to getting back into this stuff. I’m not bloody losing it all this time though.

Update: You can see the collection on my Discogs. It’s modest right now, but it’ll get there.

28th March 2021 at 21:03

Sun, 28 Mar 2021 20:03:07 GMT

I’ve decided that the @hankchizljaw Twitter account is work-only now and I’ll only use and interact with it during work hours.
I took a little step away last week because I could feel the burnout apathy twinging again, so took swift action to nip it in the bud.

I’ve realised that the lack of separation between work and myself, a human, is killing me. Obviously, being independent, there’s an intrinsic link between personal and my work, which is sorta unavoidable.

This pandemic has taken everything away from us and left only work and trying to battle endless burnout waves during “all of this” is like fighting off an angry bull with a red rag. I’m yearning for some separation of personal and boring internet money, because the lack of it is clearly not helping me.

Coding is cool and I like it, but I’m not like, “passionate” about it. Music is where that passion really lies. Heck, if I hadn’t had to do an important audition at Leeds College of Music while I was still recovering from chronic flu, which had me bed-bound for a month, when I was 17, I wouldn’t even be writing this post lol.

I only got into the web because I could make cool stuff in flash or build out a MySpace profile and get paid for it—what a dream. All this happened after I dropped out of a music production degree which I found really boring. The web then was weird, still pretty new and fun as hell. It resonated with me, a weird, extremely chaotic (at the time) creative.

The web now has gotten extremely corporate and the community: hostile. That hostility has gotten so much worse over the last 12 months and the hostility is related to stuff that really doesn’t matter like opinions on frameworks and whether or not HTML is a programming language (it is you fucking melts). I really enjoy teaching folks how to make websites: I just find myself veering further away from “the industry”.

Anyway, I can’t fucking tweet about anything other than code stuff on @hankchizljaw without some arsehole in my replies, a lot of the time. If I’m really lucky, I get arseholes in my replies about tech too. Frankly, I can’t really be arsed with that shit anymore.

I set up a new Twitter: @piccalilli_. I’m gonna spend more time on there and tweet all the real life stuff.
I will now tweet only tech stuff on @hankchizljaw, like posts on the Piccalilli site and stuff that I like in tech world. Don’t worry, I’ll still shitpost because tech takes itself way too seriously and I like making fun of it.

So yeh, come and hang on @piccalilli_. It’s not private anymore. This blog won’t auto-syndicate to the work account after this post either: it’ll auto-syndicate to my personal account instead.

In an attempt to get some of myself back, I’m now going to obsessively collect vinyl, learn woodworking and cook a lot of pizza. I might even download FL studio and make some below-average electronica again.

Update: this one aged like milk in the sun, LOL

26th March 2021 at 13:28

Fri, 26 Mar 2021 13:28:15 GMT

Imagine if someone said:

“You have to be passionate about clearing sewerage drains. You can’t just do it for the money.”

Sounds pretty ridiculous, right? So why is tech any different and what makes it so special? It isn’t special and it’s more than acceptable to get your salary and live your life how you want.

26th March 2021 at 11:17

Fri, 26 Mar 2021 11:17:36 GMT

I’ve just seen someone refer to their job as “boring money internet”.

The endless tech “debates” like whether one programming language is actually a programming language or not feel very rooted in “boring money internet” to me.

More fun creative internet, please.

25th March 2021 at 08:39

Thu, 25 Mar 2021 08:39:01 GMT

I’m glad I’m stepping away from tech and design twitter for a bit. If you’ve sent a message or reply, I’ll get to it when I come back. I’m still on my alt and I’ll follow some pals on it, so keep a look-out ?

It seems like I need a quarterly break. I’m also super busy right now and tech twitter dickheads are even less bearable than usual.

It encourages me to blog too, which I should do more often–not just about CSS and other web stuff.

The 1 year anniversary of lockdown starting here in the U.K. has affected me more than I thought it would–I’m just super angry. That lockdown should have started much earlier and thousands died as a result. Thousands more have died since too, because at almost every turn, the tories have fucked it up and seemingly focused only on profiteering from a crisis. "Get Brexit done", though, right? FFS.

Anyway, here’s a shot that sums up that first lockdown. I came here every day and thankfully the weather was nice, a lot of the time.

I was a ball of stress because clients were pulling budgets and y’know, the pandemic, but this place always seemed to help.

24th March 2021 at 10:47

Wed, 24 Mar 2021 10:47:53 GMT

8 years ago, we had a pretty grim electrical fire with our dishwasher and every year, timehop reminds me of it with this grim resulting plug.

If I wasn’t fannying around with my espresso machine at the time, it would have undoubtedly turned into a proper house fire. I still wont let the dishwasher run when we’re not at home or at night, even now.

18th March 2021 at 20:27

Thu, 18 Mar 2021 20:27:55 GMT

Let me introduce a couple of terms that we coined in my old agency days because they still make me laugh.

A wanklet is a completely useless element on a page that does nothing other than satisfy the often ridiculous demands of a difficult stakeholder. A hero slider is a wanklet.

A tosslet is a lesser wanklet. It’s mostly pointless, but it does potentially provide mild amounts of usefulness. A burger menu is a tosslet.

18th March 2021 at 09:14

Thu, 18 Mar 2021 09:14:48 GMT

I’ve just discovered Lake Street Dive and holy shit, they are good as hell. They’re smoother than butter.

https://album.link/t/165710133

16th March 2021 at 08:32

Tue, 16 Mar 2021 08:32:58 GMT

My partner and I are the complete opposite to each other. I carefully and methodically maintain a backed-up, collection of plans and notes, to stay organised. She sends me random iMessages with notes, “for later”…

It works though, to be fair.

15th March 2021 at 15:19

Mon, 15 Mar 2021 15:19:48 GMT

This is absolutely essential reading. Accessibility overlays are snake oil that provide nothing but an awful experience for those that they claim to help and companies like accessiBe are harmful, charlatans.

Please read and endorse.

https://overlayfactsheet.com/

15th March 2021 at 10:06

Mon, 15 Mar 2021 10:06:51 GMT

My hearing is finally level again. I’ve had a pretty severe, double ear infection with a perforated ear drum over the last 10 days or so. The pain was bad enough—my partner even said that when she had a perforated ear drum, the pain waves were as bad as childbirth contractions—but the killer for me has been that one ear was more blocked than the other.

This matters to me because before I succumbed to being a web nerd, I actually used to do a lot of music production and sound engineering. Audio that is even slightly off bothers me a lot, so imagine what one side of my hearing being completely off has been like! I am also extremely into music, so listening to it has been a blag, rather than a joy.

Thanks to my past life in music, I have permanent tinnitus too which is all I could hear for 3 days. I’ll be honest: that and the pain had me literally crying at points. It was torture.

Protect your hearing, kids.

14th March 2021 at 22:24

Sun, 14 Mar 2021 22:24:36 GMT

“I hate all of this. To me, the hunger in the crypto world illustrates all the worst things about people: Our greed, our need to "own" things, and our inability to see the bigger picture. But then — how can’t I be happy for artists who are finally able to pay the bills? Gah! I’m so conflicted!”

This is pretty much exactly where I am with all the NFT and crypto stuff right now. This a a good read and and very good newsletter/blog: https://www.webworm.co/p/nfts

8th March 2021 at 09:33

Mon, 08 Mar 2021 09:33:40 GMT

A very apt song for our times: https://song.link/i/1207471421

I remember, after waiting for ever for At The Drive-In to release a new album (17 years!!), being over the moon when I first heard this track, especially.

8th March 2021 at 09:06

Mon, 08 Mar 2021 09:06:22 GMT

It’s a big day in our house today. Our eldest kid goes back to pre-school.

Sure, we’re nervous—there’s still a lot of COVID-19 cases—but locally, things are much better than the national picture. Our nerves were totally and rightfully put down the priority list as our kid jumped out of bed this morning and sang “I’m going back to pre-school” over-and-over. She’s struggled through this third lockdown.

To all the other parents who have homeschooled or have had to juggle childcare and demanding jobs: you’re amazing and as you’ll no doubt, understandably, be nervous today—try to enjoy it, too.

6th March 2021 at 08:50

Sat, 06 Mar 2021 08:50:24 GMT

An oldie but a goodie here from Jeremy Keith:

If one drink feels good, then ten drinks must be better, right?

The context is this 2017 article in response to an intro and justification of Tailwind.

Jeremy touches on something I’ve always been uncomfortable with Tailwind: the limitations of available CSS.

If you are in an environment where people won’t simply create a new utility class every time they want to style something, then you are also in an environment where people won’t create new inline style combinations every time they want to style something.

This was why I made Gorko for generating utility classes after using Tailwind (I must say, successfully) for managing design tokens on a client project. The limiting factor of "we can only generate what the framework creators want us to generate" didn’t really sit well with me back then, although technically, Tailwind near-enough nailed what we needed it to.

Anyway, I’m just enjoying reading Jeremy’s article because it’s the sort of internal response I’ve been having towards stuff like Tailwind and really all frameworks that inevitably become dependencies. Call me biased, but I much prefer a technology agnostic approach like CUBE CSS with a sprinkling of little tools to get the job done.

1st March 2021 at 10:39

Mon, 01 Mar 2021 10:39:38 GMT

It’s easy to look smart and dunk on NFT from the ivory tower of Twitter and it’s a real societal failing if creatives have to lean into technology that’s fundamentally flawed and terrible for the planet to get paid for what they do.

We should be dunking on copyright laws, media laws and capitalism: not the people having to approach surviving from a different angle. Creative works are fundamentally de-valued which is not only criminal, but why when an opportunity to actually get paid turns up: creatives jump at it.

Sure, rich boys will exploit this as a get even richer scheme but yelp, wait until you look at the tax system.

Art and culture are what define us a humans: not “haha business” and GDP. It’ll be all that’s left when we’re gone.

I’ve been thinking a lot about NFT for a while and struggling to articulate my thoughts but I guess here they are. I’m already really bored of the hype around NFT, but I’m not gonna take it out on folks trying to get by.

28th February 2021 at 08:56

Sun, 28 Feb 2021 08:56:40 GMT

One thing I can’t help but notice is how efficiently I get through Twitter after abstracting it to Feedbin. I’m usually done and dusted with the latest tweets in 10 minutes.

The Feedbin setup gives me back the control too. Tweets no longer feel like they’ll vanish before I get to see them, so naturally, I don’t run straight to Twitter when I grab my phone. I’ll look at other stuff like Dispo and TikTok.

Managing replies and DMs in Front is only helping that too. I just wish I could tweet alt text with images and reply/RT tweets by url. I’d probably never sign in to Twitter again.

It all feels much healthier.

25th February 2021 at 14:58

Thu, 25 Feb 2021 14:58:12 GMT

I’ve been building up to running a 10k for a while now and today, I finally did it!

I used to run a lot as a kid but bad knees and years of smoking weirdly stopped that. My knees have got so much better over the last 12 months, so this year, I started pushing for longer distances.

Next up: half marathon

24th February 2021 at 10:06

Wed, 24 Feb 2021 10:06:12 GMT

I’m really happy to see Dispo coming out of beta. It’s such a nice, fun little app.

The only “social network” apps that bring me any sort of joy these days are Dispo and TikTok. I guess I should lump Tumblr in that group too.

Everything else is just such hard work. Sure there are good bits—Twitter brings me, personally, a lot of benefits. It also brings a lot of bollocks with it too—especially with bollock-owning people in the replies.

Social networks like Twitter are booming increasingly corporate, too, as people’s work lives merge into their personal lives. I guess the pandemic and tech twitter’s obsession with “passion” are partly to blame for that. The link between people’s personal identity and work identity is certainly growing though.

Services like Dispo and TikTok bring back the raw creative joy that’s been mostly absent from the web for so long. Byte tried it and failed, in my opinion. I think that was a combination of it being dominated with extremely mild content and that content being produced by really unfunny white people. The users also did a lot of gatekeeping when they came out of beta which immediately turned me off the app. I hope Dispo users don’t do the same, but based on what I’ve seen so far as a beta user: they’ve been nothing but delightful.
I even got followed by @piss.

Anyway, go and grab Dispo and give me a shout if you need an invite. You can find me with the @piccalilli handle.

One last thing is it would be lush to see this stuff on the web alongside the walled gardens that are native apps. TikTok has a pretty solid PWA but whinges at you to download the app a lot. I guess that’s something that needs to change, long term.

23rd February 2021 at 20:55

Tue, 23 Feb 2021 20:55:42 GMT

I’ve got a personal site again! It’s the old microblog, back doing all the auto-posting to Twitter and stuff, which is cool.

It’s nice to have somewhere to dump little posts about stuff which means I can keep Piccalilli to be “tech only”. As much as I like reading newsletters, I can’t be arsed running the one on substack I was running, either.

I’m trying to keep Twitter at arms-length at the moment. The main site and apps are just too addictive, so I’m just doing what I can to make things more manageable. I wrote about this before in “Hello, I’m Andy and I’m addicted to Twitter”. It looks like I have an annual overload from this stuff maybe.

Also, no more hankchizljaw.com. I’m back using my andy-bell.co.uk domain.

Indieweb FTW.

23rd February 2021 at 12:12

Tue, 23 Feb 2021 12:12:49 GMT

Just posting a lil’ test tweet from the ol’ microblog to see if it’s all wired up right again.

23rd February 2021 at 11:37

Tue, 23 Feb 2021 11:37:58 GMT

I’m gonna use this micro blog again I reckon. It’s been a while…

5th July 2020 at 10:04

Sun, 05 Jul 2020 09:04:23 GMT

I feel incredibly demoralised today.

I’ve been super careful about COVID since February and after seeing scenes in Soho, Bradford and elsewhere, yesterday: it’s only a matter of time before another lockdown comes around.

It’s my kids I feel really bad for. They haven’t seen family or friends for so long and have only just gone back to nursery. They don’t understand, but it’s clearly all taking a toll on them.

This pandemic and lockdown has destroyed my mental health too–mainly because I’ve already got issues with health anxiety and obsessively hand wash at the best of times.

I’ve no idea what state my mental health will be in at the end of the year.

I’m really hoping for a miracle, but it wont come.

9th June 2020 at 10:33

Tue, 09 Jun 2020 09:33:40 GMT

This Eleventy course has been by far the most challenging writing project I’ve ever done. It’s been way over 20,000 words at this point, over—at the time of writing—21 lessons.

Even if it helps just one person get Eleventy, it’ll all be worth it.

27th May 2020 at 14:24

Wed, 27 May 2020 13:24:24 GMT

I’ve written 0 lessons for the eleventy course today. I planned to
write at least two (even though I have 4 in my bullet journal lol).

Having 37 lessons to write is a real mountain, I must say. I’m into
double-digits now, but I refuse to force myself to write, if I’m
not feeling it. I don’t want the quality of the course to suffer. This
is one of my favourite parts about being my own boss: giving myself
maximum freedom!

I’m just gonna do some admin and play with the kids in the garden
instead and maybe I’ll write a lesson later.

CUBE CSS

Tue, 26 May 2020 12:35:00 GMT

A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

If there’s one thing you can guarantee in tech, it’s that someone, somewhere, will declare that CSS isn’t up to the job of “big projects” and what will undoubtedly be recommended by those same people will be either a JavaScript-heavy approach or some sort of all-in utility class approach like Tailwind.

There’s mostly nothing wrong with these approaches—I quite like Tailwind for early-stage prototyping—but often the context of an all-in JavaScript project, or at least a completely greenfield project is conveniently left out, at the point of suggestion. The problem is, a huge number of projects are websites, so that advice normally doesn’t work for the vast majority of developers. For context, it’s estimated that WordPress powers around 36% of the internet and is still rising. Compare that to a paltry 0.3% of websites that use React, for example. It’s important to keep those figures in mind.

In this article, I’m going to tell you about how I like to write CSS, which I think could help a lot of folks—at least I hope so—because I’ve used this approach, or an earlier iteration of this approach, to power massive websites, tiny blogs, mobile apps and even intranet software! This methodology has roots in both huge projects that service millions of people all the way down to small websites and starter kits, thanks to its flexibility. This Flexibility has also enabled CUBE CSS to work in both very old and very new codebases.

The focus of the methodology is utilising the power of CSS and the web platform as a whole, with some added controls and structures that help to keep things a bit more maintainable and predictable. The end-goal is shipping as little CSS as possible—leaning heavily into progressive enhancement and modern techniques. I hope by the end of the article, it’ll help you to re-think how maybe you write CSS in the future.

What is CUBE CSS?

CUBE stands for Composition Utility Block Exception, and CSS stands for, y’know, CSS (Cascading Style Sheets). As mentioned before, the CUBE methodology is very much an extension of good ol’ CSS, rather than a reinvention. This mantra is very seriously maintained too, as the cascade and inheritance particularity play a big role.

CSS

The most important part of this methodology is the language itself: CSS. It’s key to note its existence in the name because some alternative approaches, such as BEM—which I have enjoyed for many years—can veer very far away from Cascading Style Sheets. I love CSS, though and think that it’s core capabilities are actually key to scalable CSS (sorry, I said it). This thinking has taken a long time and lots of experience to embrace, also. CSS is an incredibly complex programming language to learn because so much of the working knowledge is less of syntax and more how things work in specific domains, which is often browsers.

The Cascade is itself, magnificent, because it enables us to write very little CSS and really isn’t as scary as people often make it out to be. Sure, in the old days of Internet Explorer, the cascade was a bit tricky, but using old knowledge and techniques as the base of a modern approach is like feeding horse feed to a car.

The core of this methodology is that most of the work is already done for you with global and high-level styles. This means that before you even starting thinking about components—or the in the case of CUBE CSS—blocks, your typography is mostly set, your colours are working great and your elements are working harmoniously with each other. We use the rest of the methodology—CUBE—not to style everything, but instead, to provide contextual styles that deviate from the common, global system.

CUBE CSS in essence, is a progressive enhancement approach, vs a fight against the grain of CSS or a pixel-pushing your project to within an inch of its life approach.

Composition

Speaking of systems: let’s talk about design systems. I’m lucky that I’ve been around these for around half a decade now, and working with design systems has been one of the most valuable aspects of my career as a designer and front-end developer. This is mainly because a design system doesn’t just make you think at a micro-level, but also at a macro-level, because you have to make not just decisions about pixels, but also high-level organisation decisions which the design system helps to solve. Design system work is actually diplomacy work, a lot of the time.

This is often where I see narrow, component-only tunnel vision fall short and really, these approaches are less design systems, but more component libraries that solve a much narrower cohort of problems.

Often, in more recent conversations (read: tweet threads) about design systems, stuff is very micro-optimised. This is fine, because if it works for folks, it works! I would issue a warning though: the LEGO blocks analogy isn’t that relevant in the wider context of design systems. It is very useful at explaining a component’s role in an overall project, though.

I mention all of this, not to sound all smart about design systems, but because even if you break your design system into tiny molecules, it’s still going to be applied in a larger context at some point and that should never be forgotten, but so often is. I’ve found over many approaches, within many projects over the years, that wider composition often trumps micro-optimisations and the composition layer of CUBE CSS exists because of this

What do I mean about composition though? Let’s take a look at this classic layout:

A good ol’ classic hero and cards situation with a 3 column grid.

We’ve got various elements here that themselves are individual components. The composition of this layout is what controls the overall layout and rhythm of elements. Think of the composition as a skeleton.

As you can see, the composition handles how things stitch together, regardless of what component they happen to be.

To illustrate this further, we can put whatever components we like in our skeleton. Like this example, we replace a card with a call to action instead:

Our call to action isn’t out of place because the composition of this view handles all of the layout for us.

Composition is also key within components. Take our card component as an example. You will probably have some flow content in there somewhere, just like in the illustrations, where a heading and summary hang out together. What you could do is add a class to every single element in there and micro-optimise how they behave, like you would with BEM, or you could do something like this:

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

Then we’d apply it to our card markup like this:

<article class="card">
  <img class="card__image" alt="" />
  <div class="[ card__content ] [ flow ]">
    <!-- our content in here will auto-flow now -->
  </div>
</article>

We create a utility that provides us with a common flow and rhythm which in turn, helps us to compose our layouts and components. That seamlessly segues us in to the next section.

Utilities

If utilising the cascade is the backbone of this methodology, then utilities are the shoes that help it to walk comfortably.

A utility, in the context of CUBE CSS, is a CSS class that does one job and does that job well. This CSS class, more often than not, will have one CSS property defined, but it might also have a few, in a concise group, like this example of a wrapper utility:

.wrapper {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 60rem;
}

This handy utility provides a consistent max width, padded container that sits in the middle of the viewport when the viewport is greater than 60rem wide.

One job: done well.

Design tokens

These are a concept by Jina which completely transformed how I think about design systems. Here’s a direct quote about what they are, by Jina:

“Design Tokens are the visual atoms of the design system – specifically, they are named entities that store visual design attributes. We use them in place of hard–coded values in order to maintain a scalable and consistent visual system.”

Design tokens are really useful because they allow our systems to be scalable (sorry I said it again). This is core with this methodology—CUBE CSS—because we take those abstracted values and apply them to our context with utility classes.

For example, let’s say our primary colour is #ff00ff, which is a nice magenta colour. This could be defined outside of our context in a database or even a JSON file like this:

{
  "colours": {
    "primary": "#ff00ff",
    "secondary": "#ffbf81",
    "base": "#252525"
  }
}

For me, there’s usually a step between that and CSS where design token utility classes are generated. You end up with something like this:

.bg-primary {
  background: #ff00ff;
}

.bg-secondary {
  background: #ffbf81;
}

.color-primary {
  color: #ff00ff;
}

.color-secondary {
  color: #ffbf81;
}

With those classes generated, we would apply them like so:

<article class="bg-primary color-base"></article>

Applying our design tokens like this allows us to define things once and apply them everywhere. It reduces repetition and most importantly: reduces overall bundle sizes!

Block

On to the next part of the methodology: Block. A block is your building block or your component. It’s your card or your button. If you’ve already used BEM before, the definition is almost identical. A block at this point is really a minor thing, though, because so much has been handled by the other parts covered: CSS, composition and utilities. If you choose to write your CSS with this sort of methodology, you’ll probably find that your block CSS is tiny, because of this.

A major difference between BEM and CUBE is that whatever goes inside the block is open season. This is because—as mentioned previously—your global CSS, composition rules and utilities have most likely done most of the work for you, so having formal elements is sort of redundant.

I still personally like to use the BEM syntax for elements though, like this:

.my-block__my-element {
  /* Cool CSS goes here */
}

This is mainly a preference that stems from years of working with BEM, so it’s how my brain is programmed now.

You could quite comfortably give each element flat selectors or even apply HTML element styles, like this, too:

.my-block .title {
  /* Cool CSS goes here */
}

.my-block h2 {
  /* Cool CSS goes here */
}

It shouldn’t really matter because again, your global CSS, utilities and composition rules are doing the hard work for you already.

Exception

Lastly in this tour: Exceptions. These are little variations to a block. For example, you might have a “reversed” state or an “inactive” state. For these: we use data attributes.

Take this card as an example. By default, it’s a standard edition card:

Our standard edition card element

But when we add a “reversed” state, the image is at the bottom and the content is at the top.

Our exception gives it a flip.

We add the exception using a data attribute like this:

<article class="card" data-state="reversed"></article>

This provides a useful hook for both CSS and JavaScript! You can reverse the content like so:

.card[data-state='reversed'] {
  display: flex;
  flex-direction: column-reverse;
}

Grouping

There could be a lot of stuff going on with your class attribute with this methodology, so I like to group things with square brackets, like so:

<article
  class="[ card ] [ section box ] [ bg-base color-primary ]"
  data-state="reversed"
></article>

I tend to follow this order:

The main block class
Any subsequent block classes
Utility classes

I might even split up the utilities into standard utilities and design tokens, depending on how many there are.

I get asked about my use of brackets in class attributes a lot and quite a lot of the time, they get a very mixed reception. The important thing is clarity and I think they provide that.

If you don’t like brackets, you could use something like pipes instead:

<article
  class="card | section box | bg-base color-primary"
  data-state="reversed"
></article>

At the end of the day, it doesn’t matter what you do, because HTML and CSS are smart enough to ignore things either they don’t understand or things that have no meaning to them. They really are excellent programming languages because of this.

Wrapping up

This isn’t a heavily documented, complex methodology. Well, not now, anyway. It’s more of a concept method of organising CSS just enough to not pull to far away from the “classic” way of writing it. Really, it’s more of a thinking structure.

I’ve been all the way down the micro-optimisation rabbit hole and been down the “let’s build a library of skeletal components for all projects” (this almost never brings any benefit). On the opposite end of the scale, I’ve done all globals with direct HTML tag styling, too. Any method is extremely valid for your context and if this is how you write your CSS, keep doing what works for you and your team. All I would recommend is keeping other team’s contexts and caveats in mind before you recommend your way as absolute.

This project now has full documentation and guidance which you can check out here.

26th May 2020 at 11:24

Tue, 26 May 2020 10:24:09 GMT

I’m re-working a section of my talk “Keeping It Simple With CSS That
Scales” today. C-BEUT is gone and instead replaced with CUBE CSS –
Composition Utility Block Exception.

I see composition as a really important aspect of keeping things
simple. Micro-optimisation in my experience, has usually resulted in
fragile re-inventions of core language capabilities and we’re seeing
that again with various re-inventions of the Stack from Every Layout.

I’ll blog about it on piccalilli later.

C-BEUT was such a shit name.

24th May 2020 at 16:52

Sun, 24 May 2020 15:52:17 GMT

One thing I’m getting sick of hearing is "the government did a good job with the hand they were dealt".

They didn’t. They fucked up.

Every other government around the globe got dealt a similar hand, yet we’re only just behind America in deaths.

27th April 2020 at 08:33

Mon, 27 Apr 2020 07:33:08 GMT

‪If you write to get lots of views, your posts will probably never be great.‬

‪If you write really good content, though, you’ll achieve the former by proxy. ‬

‪It’s all about patience. So many of my old articles did nothing, but I’m a completely different and much better writer now for persisting.‬

‪I can also link pretty much all success in the web world back to writing. Publishing on my own blog has been endlessly useful too. ‬

‪The blog platforms will get you short term views, sure, but what happens to your hard work when they’re gone? ‬

Lastly: anyone can be a great writer. I did terrible at school, but over the last five or six years, I’ve persisted and improved. You just gotta work at this stuff, like anything else.

22nd April 2020 at 11:10

Wed, 22 Apr 2020 10:10:46 GMT

I’ve de-clamshelled my MacBook Pro and because I only use one screen, I wanted to keep it occupied.

I came across this: https://www.kaleidosync.com/visualizer

It reminds me of the old iTunes days.

21st April 2020 at 16:19

Tue, 21 Apr 2020 15:19:55 GMT

There is no faster (pun intended) way to slow down a site than to use a bunch of JavaScript.

https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/

This is a fantastically detailed piece by Tim Kadlec. The evidence really do paint a worrying picture and hopefully this can be a good source for those trying to improve things in their company.

21st April 2020 at 10:12

Tue, 21 Apr 2020 09:12:04 GMT

Tip for Firefox users on Mac.

By default, you can’t tab to links. To fix it:

Go to “about:config”
Search for “accessibility.tabfocus”
It won’t show up but will offer to create one. Set it to a “number”.
Set the value to 7
Done

8th April 2020 at 12:07

Wed, 08 Apr 2020 11:07:01 GMT

I’m doing some print CSS stuff for Piccalilli invoices. It’s not something I do very often!

Luckily, Rachel Andrew has written this excellent guide over on Smashing Mag: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

8th April 2020 at 10:43

Wed, 08 Apr 2020 09:43:03 GMT

After a ridiculously stressful few weeks, I’m finally slowing down a bit today.

We’ve been in self isolation (which isn’t that different to lockdown) for 13 days because both our kids have had coronavirus symptoms. We’re not convinced it was coronavirus, but at this time, even a standard edition kid fever hits differently.

Being a parent is hard work right now and I’ve certainly not experienced this level of anxiety for a lot of years.

I’ve also been deep in one of the largest client projects I’ve ever done. The peak of which happened while we were in this panic state about our children’s health. That’s been a real test, but it’s also given me a buffer which I’m incredibly privileged to have. I’ve got so much empathy for my fellow freelancer chums going through this time right now.

It’s all looking up though. I launched the pre-orders of my new Eleventy course yesterday which have been flying off the shelves. The support from folks has legit made me do a little cry over the last 24 hours. Y’all are amazing and you’re helping me to dedicate more resources to the end-product.

So, back to today: I’m just gonna muck around building some bits for Piccalilli and generally chilling out. It feels good starting my day at 10:43am BST. I’m back to normality a little bit.

6th April 2020 at 13:51

Mon, 06 Apr 2020 12:51:15 GMT

? Listening to my favourite hip hop album of all time today.

https://open.spotify.com/album/6fquTSHubECT65PJdRiMk1?si=fw5GtKL-RpqY6WUjB1rvyw

It’s a masterpiece.

29th March 2020 at 12:13

Sun, 29 Mar 2020 11:13:32 GMT

I keep hearing “when this blows over, we can go back to normal”.

We should never go back to normal. “Normal” has failed us miserably.

Everything—especially capitalist ideology—needs to change.

28th March 2020 at 09:57

Sat, 28 Mar 2020 09:57:58 GMT

Pro tip: American Pancakes don’t require many ingredients and are easy to make.

Perfect quarantine cooking.

All you need:

135g/4¾oz plain flour
1 tsp baking powder
½ tsp salt
2 tbsp caster sugar (normal is fine)
130ml/4½fl oz milk
1 large egg

Method

Mix the dry ingredients (sift if you have a sieve).

Beat the egg and add the milk separately. Then add the dry ingredients.

Let it rest. I leave it for about 10-15 mins but the more it rests, the more it’ll bubble up.

The batter should be thick!

Get a ladle (or just pour a small circle) of batter in the pan.

When it bubbles at the top, flip it until it’s nice and golden brown in both sides.

You’re done. Get some, butter, berries and maple syrup on those mofos.

25th March 2020 at 16:53

Wed, 25 Mar 2020 16:53:36 GMT

I’ve finally managed to produce some proper complex client work today.

I’ve found the last few weeks really tough and have been dragging myself through them in a haze, so this is a welcome change.

I’m still not up to scratch, but that’ll be the case for a long time now, I imagine. This pandemic is really testing the ol’ thinker.

23rd March 2020 at 09:42

Mon, 23 Mar 2020 09:42:21 GMT

? The Body Coach, AKA Joe Wicks has started doing a PE Lessons for kids (or anyone) at 9AM, GMT, Monday to Friday.

https://www.youtube.com/watch?v=Rz0go1pTda8

This is such a good initiative from them and my kids loved it.

You should definitely subscribe.

16th March 2020 at 14:17

Mon, 16 Mar 2020 14:17:36 GMT

? This is not a drill: Four Tet has a new album!

https://open.spotify.com/album/5gIa8hTQGPwVeNYjDwrraZ?si=RK7d56O0Ty-hjGmY3dXnPg

“Teenage Birdsong” is a masterpiece.

16th March 2020 at 12:57

Mon, 16 Mar 2020 12:57:00 GMT

? The little one and I went and did a bit of social distancing earlier.

We’re so lucky to live in the middle of nowhere and have places like this on our doorstep.

CSS Logical Properties

Fri, 13 Mar 2020 14:02:00 GMT

Create spacing that works regardless of the direction of your content or the environment of your users.

Say you want to put some space between two inline items: what do you do? Probably something like this:

.my-element {
  margin-left: 1em;
}

This approach is fine and has been for a long time with CSS, but what happens when the content direction changes? That left margin suddenly becomes problematic because it no longer matches and makes the content look awkward.

When the direction of content is switched, the left margin is problematic, rather than helpful.

Western languages read left to right, but other languages such as Arabic, read right to left. Some languages even read top to bottom, like traditional Chinese.

Our CSS should be as flexible as possible, so instead of explicitly setting a left, right, top or bottom value to margins, we should instead be using a logical property.

Here’s that same example from the start, but with a logical property:

.my-element {
  margin-inline-start: 1em;
}

What this now does is instead of saying “add margin to the left”, it says “regardless of direction, put margin on the starting side”. If the language of the document was right to left, like Arabic, that margin would be on the right hand side.

When we use logical properties, the margin becomes flexible based on the content direction.

Click the button in this demo to see how the margin is now reactive to the content direction:

CodePen Embed Fallback

Why is this important?

The web is global and open, so making presumptions about the users of your website is pretty dangerous.

A variety of factors come into play when someone visits your site, such as connection speed, device power and spoken language. They could also be using a translation extension. It’s our job as web developers to make our content as flexible as possible to meet user needs, regardless of what those needs are, using the powerful, flexible tools that are given to us by the web platform.

Logical properties are a perfect example of this and they have a huge browser support, so you should absolutely use them today.

Resources and further learning

This is only a quick intro to logical properties, but luckily, some other fine folks from around the web have written about them in detail:

12th March 2020 at 06:58

Thu, 12 Mar 2020 06:58:27 GMT

This coronavirus news cycle is brutal. It’s so fast paced.

We’re used to it in the U.K. with the Brexit situation, so I really feel for y’all who are not here.

I’m constantly anxious at the moment, not for myself, but for those who are gonna suffer the most.

11th March 2020 at 09:35

Wed, 11 Mar 2020 09:35:06 GMT

This self-hosted photo stream project looks great, by Max Voltar: https://github.com/maxvoltar/photo-stream.

Publish (on your)
Own
Site
Syndicate
Elsewhere
FTW

It’s good to see Jekyll get a run-out, too.

11th March 2020 at 08:36

Wed, 11 Mar 2020 08:36:18 GMT

A lot of people are suddenly going to experience the benefit of working from home, and companies that force staff to work in their noisy, open-plan offices are in real trouble.

Remote doesn’t work for a lot of people, either, but big changes are likely.

10th March 2020 at 11:30

Tue, 10 Mar 2020 11:30:45 GMT

? It’s Launch Day!!

I’m super chuffed to finally launch the brand new Piccalilli site!!

I’ve put so much work into it, so I couldn’t be happier right now.

https://piccalil.li

It’s now got tutorials, upcoming courses, a blog and of course, the weekly newsletter.

5th March 2020 at 12:09

Thu, 05 Mar 2020 12:09:38 GMT

? I’m back working from home now, which is making me v happy indeed.

My cat is certainly happy about it.

3rd March 2020 at 17:09

Tue, 03 Mar 2020 17:09:16 GMT

Maybe, separate dev and design teams are a bit like government and opposition. There’s an important relationship there that keeps things flowing nice.

If that relationship is toxic though (see current politics), nothing of any worth gets done.

It’s certainly something I can’t stop thinking about.

3rd March 2020 at 14:07

Tue, 03 Mar 2020 14:07:49 GMT

? I discovered this via the fabulous Flow State (https://flowstate.substack.com/). It’s super good working music:

https://open.spotify.com/album/7B6rBkpEo0yYgVUgKbcAHU?si=XxkwIQEDTwyOmOsXpUT6mg

3rd March 2020 at 08:48

Tue, 03 Mar 2020 08:48:29 GMT

Chris and Dave said on ShopTalk Show that we should have a like party by sharing your “liked” articles from your RSS reader.

Here’s mine from Feedbin https://microblog.hankchizljaw.com/likes/0/

RSS: https://feedbin.com/starred/91894d3eb1e30664631b3d475c213f5e.xml

2nd March 2020 at 13:57

Mon, 02 Mar 2020 13:57:23 GMT

It’s pretty likely I won’t be doing any streaming this week, pals. I’m heads-down trying to get content for the new https://piccalil.li done before I launch it next week.

2nd March 2020 at 10:00

Mon, 02 Mar 2020 10:00:47 GMT

? I’m leaving Patreon

Big thanks to everyone that has supported me on Patreon, but I’m calling it a day on there. To those that I support on there: I’ll be finding ways to support you (let me know what’s best for you).

https://www.patreon.com/posts/im-leaving-34510515

2nd March 2020 at 09:30

Mon, 02 Mar 2020 09:30:42 GMT

? This is a really interesting podcast episode on burnout and our often unhealthy relationship with work and identity.

https://overcast.fm/+QLhUwQ_QQ

It’s pretty long, but good. Hat tip to Dave Rupert for sharing it originally.

1st March 2020 at 10:38

Sun, 01 Mar 2020 10:38:41 GMT

“Some webshits have managed to completely remove any advantage of CSS while simultaneously making it an even bigger percentage of a given web page”

? http://n-gate.com/hackernews/2020/02/28/0/

This made me snort laugh. This is legit one of my favourite blogs.

1st March 2020 at 09:52

Sun, 01 Mar 2020 09:52:00 GMT

? I absolutely love the packaging that comes with GHG coffee. The coffee is rad, too.

https://www.girlswhogrindcoffee.com/

29th February 2020 at 18:47

Sat, 29 Feb 2020 18:47:29 GMT

I have an obsessive condition about cleanliness and hand washing. It’s been the case for probably about 10 years but has gotten much worse over the last 5 years.

It’s something that’s super hard and stressful, because it niggles at me, as with any obsessive condition. When I’m stressed, anxious or in an unfamiliar place, it gets much worse too.

The extra kicker is because I’m like this, I get super bad skin on my hands. That’s a bastard, that is.

All of this recent talk about washing hands makes me feel a bit better though. Coronavirus is horrific, but if it improves people’s hygiene, at least there is a micron of positivity.

This is what stresses me out the most: people’s awful hygiene. When I’m in a public toilet, I’m a wreck because there’s always a dude who either doesn’t wash there hands or just rinses them. Then they touch the door handle and that’s me done for the day: obsessing over how dirty my hands are, even though I washed them.

I’m not really sure where I’m going with this: I just thought I’d share to show solidarity with others like me. If you are like me, I’m sending hugs at this time ♥️

28th February 2020 at 21:10

Fri, 28 Feb 2020 21:10:17 GMT

? The bullet journal cover is getting there with a couple of my new stickers on it.

I’m gonna have to start overlapping soon.

28th February 2020 at 19:40

Fri, 28 Feb 2020 19:40:54 GMT

I do love sitting and catching up with my RSS feeds on a Friday.

Cat on lap, kids in bed, red wine in hand. Lush.

27th February 2020 at 21:47

Thu, 27 Feb 2020 21:47:47 GMT

I’ve gone back to using a paper bullet journal.

The Notion setup I had was cool, but I just wasn’t using it, and being the obsessive organiser that I am: I was getting very stressed.

I think the main issue was speed. Bullet journaling is supposed to be fast, but even though I had templates and formulas: Notion was just not fast enough. This just stopped me keeping on top of things.

This is no shade on Notion, FWIW. I fucking love that app and it runs so much stuff for me. I just don’t think it’s right for me and bullet journaling.

27th February 2020 at 14:53

Thu, 27 Feb 2020 14:53:23 GMT

I’ve been doing client services for a very long time now and there’s one thing that never changes: stakeholders going rogue. You can plan projects to the nth-degree, but that derailing amend will arrive and hit you for six, every damn time.

The thing for me is I have to have the right amount of energy to deal with rogue stakeholders properly. If I’m far into a big project, my energy is no where near high enough to tackle bad ideas and keep the project on the right path. It also takes a lot of patience.

I’m going through this scenario at the moment, but this time, the energy levels are very low, so I’m in a “do whatever you want” mood, which I’m sure will bite me in the ass in the long-term. I think the upcoming Piccalilli stuff contributes to that mood, too.

You’ve got to care for yourself too and ask yourself if fighting back against a rogue stakeholder is worth it. Sometimes—especially as a freelancer—you’ve just gotta send the invoices and get on with it. Do work, go home. In my case: Do work, get paid and focus on better, future endeavours.

27th February 2020 at 14:24

Thu, 27 Feb 2020 14:24:09 GMT

? Aphex Time.

https://open.spotify.com/album/1maoQPAmw44bbkNOxKlwsx?si=3Or3Ki6rQMe6M3KjZ_ytIg

This is my second favourite Aphex album. Richard D James is my favourite because it got me into electronica music in the first place!

27th February 2020 at 06:49

Thu, 27 Feb 2020 06:49:45 GMT

“The web is in bad shape – we need to readjust our understanding of what quality means and what we can expect our users to put up with.”

This is a fantastic post: https://matuzo.at/blog/why-543kb-keep-me-up-at-night/

26th February 2020 at 12:56

Wed, 26 Feb 2020 12:56:00 GMT

I’m going to stream some work on the https://piccalil.li site today.

Starts at:

15:15 UTC
16:15 Central Europe
10:15 US Eastern
07:15 US Pacific

See you there!

https://twitch.tv/hankchizljaw

24th February 2020 at 21:32

Mon, 24 Feb 2020 21:32:28 GMT

? Real Scenes: London

I really enjoyed this documentary about London’s legendary underground music scene and its battle for survival.

https://youtu.be/jN1XUBrwp5A

24th February 2020 at 13:20

Mon, 24 Feb 2020 13:20:06 GMT

I’m going to stream in about 2 hours. Today, I’m going to work on RSS stuff for the new https://piccalil.li site.

Starts at:

15:15 UTC
16:15 Central Europe
10:15 US Eastern
07:15 US Pacific

https://twitch.tv/hankchizljaw

24th February 2020 at 10:48

Mon, 24 Feb 2020 10:48:24 GMT

? Pro-tip

When you are writing a step-by-step tutorial, build along with your writeup to test that it works how you think it does.

When I write up tutorials, I build it in a private CodePen project. It works a charm.

23rd February 2020 at 09:43

Sun, 23 Feb 2020 09:43:15 GMT

A pro tip for companies.

Remember that candidates will almost certainly not just be interviewing with you.

Remember that when you set your “challenges”, as they will probably be balancing a few challenges, and their job and their day-to-day life.

Try to find more efficient means instead.

23rd February 2020 at 09:36

Sun, 23 Feb 2020 09:36:41 GMT

I binged “Don’t F**k With Cats: Hunting an Internet Killer” on Netflix last night and I’m still angry.

https://www.netflix.com/gb/title/81031373

It’s a fascinating story, but there was too much footage of animal and human cruelty that really, didn’t improve the story. The horror could have mostly been implied, instead IMO.

It’s a very difficult watch, but also very interesting.

22nd February 2020 at 18:29

Sat, 22 Feb 2020 18:29:46 GMT

? Join my Slack? Uhm Nah.

https://email-is-good.com/2020/02/21/join-my-slack-uhm-nah/

"Oh, sure, of course, would you like to crawl inside my shirt with me too?"

I really like Chris Coyier’s blog on email.

22nd February 2020 at 16:20

Sat, 22 Feb 2020 16:20:12 GMT

? I’m slow cooking a chicken, chick pea and lentil curry.

21st February 2020 at 13:35

Fri, 21 Feb 2020 13:35:22 GMT

? How to overlap images in CSS

This is a great, concise and practical tutorial by Bri Camp Gomez.

https://bricampgomez.com/blog/how-to-overlap-images-in-css/

21st February 2020 at 10:01

Fri, 21 Feb 2020 10:01:00 GMT

I don’t often work from my house now, but when I do, Delilah loves it.

I really should just work from home full-time again ?

20th February 2020 at 09:56

Thu, 20 Feb 2020 09:56:33 GMT

My minimal CSS reset is super close to hitting 1000 stars on Github. It’d be great if you gave it a little star to get it over the line ⭐️

https://github.com/hankchizljaw/modern-css-reset

20th February 2020 at 09:36

Thu, 20 Feb 2020 09:36:31 GMT

? The Postal Service: they’ll make your ears smile.

It’s making me want to make some electronica again.

https://open.spotify.com/album/4ssF0ppdJnMTtL2hg1CLKX?si=rrfONyPHRBivoAgu8Zv97A

19th February 2020 at 13:29

Wed, 19 Feb 2020 13:29:48 GMT

Today’s stream will be some more https://piccalil.li post/tutorial view work.

Starts at about 15:15 UTC

https://www.twitch.tv/hankchizljaw

19th February 2020 at 09:41

Wed, 19 Feb 2020 09:41:12 GMT

I run a little Telegram group called freelance pals. If you’re a freelancer (or contractor), you’re more than welcome to come along and hang with us: https://t.me/joinchat/OjFFbU1VA_2earovjCYAmA

There’s a code of conduct here, too: https://hankchizljaw.com/freelance-pals-code-of-conduct/

19th February 2020 at 08:28

Wed, 19 Feb 2020 08:28:39 GMT

? “Some Imaginary CSS”

This is a great article about CSS features that don’t exist, but would be great. I especially love the optical margin and pointer-box-offset.

https://cloudfour.com/thinks/some-imaginary-css/

18th February 2020 at 21:41

Tue, 18 Feb 2020 21:41:07 GMT

? New on the blog: Jamstack, IFTTT and Netlify: a power trio

It’s about time I wrote about this Micro Blog, so I go into how it works and importantly, how you can do it.

https://hankchizljaw.com/wrote/jamstack-ifttt-and-netlify:-a-power-trio/

18th February 2020 at 14:18

Tue, 18 Feb 2020 14:18:34 GMT

I’m going to do a stream this afternoon of some client work, working on a big ol Vue component with some Vuex action, within a prototype.

I’ll start at about 15:15 UTC.

https://www.twitch.tv/hankchizljaw

18th February 2020 at 14:02

Tue, 18 Feb 2020 14:02:52 GMT

? I’ve always been fond of Echo Park by Feeder. Such a beautiful album: https://open.spotify.com/album/2AqgHBVRkki14FLTOK2eU7?si=vH66nqcDRAuiQmlS0LBAxQ

18th February 2020 at 13:11

Tue, 18 Feb 2020 13:11:30 GMT

My Bonsai Tree is no longer. The poor little tree boi died.

I am a terrible plant parent.

18th February 2020 at 10:57

Tue, 18 Feb 2020 10:57:09 GMT

I’m super digging people creating feed of their Feedbin likes, so I’ve jumped on the bandwagon.

Here’s mine: https://microblog.hankchizljaw.com/likes/0/

This is done with Eleventy. Commit: https://github.com/hankchizljaw/microblog/commit/df05f000d61dce0342edc3d24cc0806d11c7a2b5

Thanks to Dave Rupert and Robin Rendle for their work on this.

Dave: https://daverupert.com/likes/
Robin: https://www.robinrendle.com/notes/rss-favorites.html

18th February 2020 at 09:47

Tue, 18 Feb 2020 09:47:45 GMT

This Google Fonts subsetting thing is cool. Append your url with &text= with the characters you want.

Tests:

With subsetting (~21k): https://cdpn.io/andybelldesign/debug/95773da82c7eaf769a6a9fb86c563c9d
Without subsetting (~11k): https://cdpn.io/andybelldesign/debug/b993258f2a59ce956eae99d94fe48ab5

I only use Playfair for headings on the new piccalilli site and I’ll still serve the font locally, but generating it like this is hella useful.

Nice work, fonts team!

On the WIP piccalilli site with Playfair Display (900) and Courier Prime (400):

Before subsetting: 55kb
After subsetting: 17kb

Fonts served locally still, but generated with Google Fonts instead of Font Squirrel.

I could almost fit one React in that space.

17th February 2020 at 21:50

Mon, 17 Feb 2020 21:50:49 GMT

A slice of apple pie is $2.50 in Jamaica and $3 in The Bahamas.

These are the pie rates of the Caribbean.

17th February 2020 at 10:39

Mon, 17 Feb 2020 10:39:05 GMT

I’m going to do a stream this afternoon of me starting the post/tutorial template on the new https://piccalil.li site.

I’m also giving Firefox another run.

I’ll start at about 15:00 UTC.

https://www.twitch.tv/hankchizljaw

17th February 2020 at 08:45

Mon, 17 Feb 2020 08:45:08 GMT

Some advice for both designers and devs.

Your first pass at something will almost always not be optimal, but you’ve got something to work with and iterate on.

Brute-force the solution and then optimise it after, instead of complicating things from the outset.

I have this on my shelf, by Brendan Dawes and I strongly recommend you do, too: https://producedforuse.com/products/process

16th February 2020 at 19:31

Sun, 16 Feb 2020 19:31:46 GMT

“A Reply Guy expertly advised front-end developers to leave out HTML and CSS from their CVs as they’re just there to fill space. This leaves more room to talk about the important stuff: JavaScript.”

https://parochial.tech/posts/html-and-css-are-just-cv-fillers/

15th February 2020 at 23:30

Sat, 15 Feb 2020 23:30:34 GMT

“Turns out, a character-limited platform that aggressively promotes hot takes is not suitable for a nuanced discussion about salaries.‌”

https://parochial.tech/posts/weekends-on-tech-twitter-salaries/

15th February 2020 at 19:56

Sat, 15 Feb 2020 19:56:18 GMT

This is a lovely post, by Robin Sloan about creating an app just for his family.

https://www.robinsloan.com/notes/home-cooked-app/

15th February 2020 at 14:45

Sat, 15 Feb 2020 14:45:01 GMT

I had psyched myself up to go to the gym on a Saturday and then when I got there, it was closed.

I’m having a nice biscuit and a cup of tea instead now…

15th February 2020 at 13:49

Sat, 15 Feb 2020 13:49:31 GMT

I really want to hear more underrepresented voices.

Please send me links to your blogs and RSS feeds!

15th February 2020 at 10:10

Sat, 15 Feb 2020 10:10:44 GMT

When you say "enjoy your weekend", it’s a nice thing to say.

When you say "enjoy the rest of your life", it sounds sinister.

14th February 2020 at 20:45

Fri, 14 Feb 2020 20:45:56 GMT

? I have glorious cats.

14th February 2020 at 16:45

Fri, 14 Feb 2020 16:45:42 GMT

? Thanks, everyone for stopping by to watch me re-design this Micro Blog live today. It was great fun.

You can catch the whole video, here: https://www.twitch.tv/videos/551830940

14th February 2020 at 16:31

Fri, 14 Feb 2020 16:31:19 GMT

This little Micro Blog has had a face-lift ?

14th February 2020 at 11:27

Fri, 14 Feb 2020 11:27:01 GMT

The Flow State subscription has really hit the nail on the head today. Really enjoying listening to Against All Logic.

This is seriously a good curated subscription and it’s 20% off today!

https://flowstate.substack.com/p/against-all-logic?r=2nf2g

14th February 2020 at 11:18

Fri, 14 Feb 2020 11:18:06 GMT

Today’s stream is going to be a bit different. I’m going to fire up this Micro Blog and make it look good, because at the moment, it looks a bit rubbish: https://microblog.hankchizljaw.com/

Tune in from about 15:00 UTC on Twitch and Periscope (Twitter) and learn some design stuff.

14th February 2020 at 06:43

Fri, 14 Feb 2020 06:43:56 GMT

“…if Instagram gets deleted tomorrow- goodbye to all the content I carefully created for it! At least here on my own website, I have a bit more control.”

https://www.christabelbalfour.com/journal/2020/2/5/a-new-years-resolution

The tide is changing. Blogging is on the up again!

13th February 2020 at 09:55

Thu, 13 Feb 2020 09:55:21 GMT

? One of my favourite albums: Entroducing is on the speakers today.

Super good working music.

https://open.spotify.com/album/4wvqGLk1HThPA0b5lzRK2l?si=xT3QWRYPRTC8AoOsgHG6eA

12th February 2020 at 09:47

Wed, 12 Feb 2020 09:47:47 GMT

? I treated myself to one of those dark, full size magic keyboards.

Desk is looking pretty sharp now.

11th February 2020 at 15:24

Tue, 11 Feb 2020 15:24:08 GMT

I like going to the dentist because I get to lie down for a bit.

11th February 2020 at 14:02

Tue, 11 Feb 2020 14:02:50 GMT

Days since I last got mad about white-space: nowrap: 0

11th February 2020 at 13:59

Tue, 11 Feb 2020 13:59:01 GMT

Something I can’t decide on for https://piccalil.li is wether to have comments or not.

On the vast majority of sites, they’re just spam and “well actually” fodder, but on some sites, there is absolute gold in there.

I wouldn’t know what to use on Eleventy either.

9th February 2020 at 13:18

Sun, 09 Feb 2020 13:18:10 GMT

“I do not know about you, but if I have to fight a tool that is supposed to help me, I do not think this is a good tool”

https://everyday.codes/javascript/7-really-good-reasons-not-to-use-typescript/

This is a decent read.

I only tried typescript properly once and the amount of cocking around for arguably tiny benefit wasn’t really worth it.

Fair enough for massive teams, but the vast majority of folks are not in one of them.

A shame this article is on Medium, though.

8th February 2020 at 17:24

Sat, 08 Feb 2020 17:24:01 GMT

I absolutely love this weekly “newsletter”. It‘s one of my favourite things in my Feeedbin.

http://n-gate.com/hackernews/2020/02/07/0/

It’s my favourite sort of content: satire. Double bonus that it’s aimed at the easily mockable joke site, “Hacker News”, too.

7th February 2020 at 13:56

Fri, 07 Feb 2020 13:56:48 GMT

? New on the blog: “Fluid scale and tokens: a match made in heaven”

https://hankchizljaw.com/wrote/fluid-scale-and-tokens:-a-match-made-in-heaven/

There’s a new fluid scale tool that I stuck to my design token generator and now I’m in CSS heaven.

7th February 2020 at 11:16

Fri, 07 Feb 2020 11:16:23 GMT

Do you want a zero-width, non-breaking space?

Here’s the HTML: ⁠

I’ve just used it to make sure that front-end never breaks on to separate lines.

7th February 2020 at 09:51

Fri, 07 Feb 2020 09:51:54 GMT

Utopia, by Trys Mudford and James Gilyead is right up my street! This is the sort of algorithmic approach we use at Every Layout, and fluid type (as Trys is all too aware ?) has been an obsession of mine for a long time.

https://utopia.fyi/

Trys and James are both incredibly talented folks, so subscribe and keep an eye on this!

I’m rolling this into the https://piccalil.li front-end as we speak.

6th February 2020 at 16:30

Thu, 06 Feb 2020 16:30:20 GMT

I’m seeing very few blog posts on Medium or DEV and a lot more on personal sites and that is great and it makes me happy.

Send me your RSS feeds.

6th February 2020 at 14:20

Thu, 06 Feb 2020 14:20:29 GMT

“This use of server-side rendering followed by hydration feels like progressive enhancement, because it separates out the delivery of markup and scripts. But it’s missing the mindset.”

https://adactio.com/journal/16404

This is a good’n by Jeremy Keith which is right up my street.

(thanks for the link to my post, too)

6th February 2020 at 13:34

Thu, 06 Feb 2020 13:34:48 GMT

? The fine folks at Faculty sent me some goodies, including this lush cup, which now has the important job of holding pens.

6th February 2020 at 13:24

Thu, 06 Feb 2020 13:24:51 GMT

This is a fascinating and harrowing deep-dive into the accessibility of the native HTML video element.
https://scottvinkle.me/blogs/blog/how-accessible-is-the-html-video-player

It’s grim to learn that this, among other elements (cough, dialog) are just not up to standard.

Do better, browsers and assistive tech makers.

6th February 2020 at 10:15

Thu, 06 Feb 2020 10:15:19 GMT

Just in case you needed a boost: I’ve been banging my head on my desk for about half an hour because my elements were refusing to push out to the end, because of this: flex-direction: flex-end;

Should be goddamn justify-content: flex-end;…

5th February 2020 at 16:58

Wed, 05 Feb 2020 16:58:29 GMT

? Extremely emo time as I finally get to write some HTML, CSS and JS after spending nearly all of January in static design tools: https://open.spotify.com/album/57d5dFo7oN2yUyGfSKPrRv?si=3o8eb4rDTUC3xuQcqKXr3A

5th February 2020 at 15:31

Wed, 05 Feb 2020 15:31:04 GMT

? New article on the blog: “Honesty is the best policy”

The Gatsby team compared JavaScript size to image size, so it’s time to get into why that is completely wrong.

https://hankchizljaw.com/wrote/honesty-is-the-best-policy/

5th February 2020 at 14:13

Wed, 05 Feb 2020 14:13:34 GMT

Days since I’ve needed container queries: 0

4th February 2020 at 13:26

Tue, 04 Feb 2020 13:26:11 GMT

? Pro git tip

If you want to remove already committed stuff from your repo, run the following:

git rm -r --cached path/to/your/stuff

Make sure you also update your .gitignore too!

4th February 2020 at 09:54

Tue, 04 Feb 2020 09:54:24 GMT

Remembering the web’s past is really important—especially in terms of how and why web standards came about.

We must not obsess over nostalgia, though. The web is a completely different place now, with a much more diverse workforce.

Remember that.

3rd February 2020 at 13:21

Mon, 03 Feb 2020 13:21:47 GMT

One thing I would like to see with client-side routers is feedback, like when you click a link, a browser shows something is happening. You don’t get that with client routers.

Maybe client routers should bail after X milliseconds and fall back to standard links.

1st February 2020 at 14:10

Sat, 01 Feb 2020 14:10:22 GMT

? We popped to Gloucester Cathedral today.

As a massive fan of architecture and art, it’s lush.

The religious bit isn’t my bag at all, though.

31st January 2020 at 22:46

Fri, 31 Jan 2020 22:46:46 GMT

This is my last post on this blog before we leave the European Union at 11pm.

Thanks for being so good to us, European pals—even as we, the tiny, insignificant “United” Kingdom ripped ourselves apart.

Keep a seat warm for us, will you? ???

31st January 2020 at 18:30

Fri, 31 Jan 2020 18:30:53 GMT

I can’t stress enough how literally any real success I’ve had in this industry has had a direct link to my blog: https://hankchizljaw.com

Coding and design ability have for sure been important, but nothing quite like writing.

To be clear, I’m talking about my blog, too. Not Medium or DEV or whatever—my blog. Content elsewhere is ephemeral. Content on my blog is permanent.

I made Hylia to make it as easy as possible for people to own their own content for that reason.

31st January 2020 at 10:41

Fri, 31 Jan 2020 10:41:06 GMT

I really need to listen to pretty music today, so it’s Maccabees time: https://open.spotify.com/album/7hRcDIP5CKDlCnjHVPb9qd?si=upl8DdhQQ6qnD5elykQdXA

30th January 2020 at 16:30

Thu, 30 Jan 2020 16:30:27 GMT

Web share API supported on Safari (inc iOS) makes me think it’s well worth looking into: https://caniuse.com/#feat=web-share

A solid pattern that lets the user share with what they like to share with.

Sounds like a win-win to me.

29th January 2020 at 13:43

Wed, 29 Jan 2020 13:43:24 GMT

I absolutely love Eleventy (https://11ty.dev). It enables me to make so many things.

Please, if you can, support it:

Become an Open Collective backer (like me): https://opencollective.com/11ty
Smash the star button on GitHub: https://github.com/11ty/eleventy

29th January 2020 at 08:35

Wed, 29 Jan 2020 08:35:12 GMT

This is such a good article by Uncle Bruce about favouring <article> over <section> more often than not.

I’ll be stealing the <section aria-label="Quick summary"> trick too!

https://www.smashingmagazine.com/2020/01/html5-article-section/

28th January 2020 at 09:49

Tue, 28 Jan 2020 09:49:16 GMT

Static design tools like Figma or Sketch certainly aid with creative ideation, but when it gets to the meat ‘n’ taters of design, I much prefer HTML and CSS.

I’m currently yearning for my Eleventy and dynamic data setup of projects past.

Static tools do really help with fast-moving projects that have a lot of stakeholders with opinions, though.

27th January 2020 at 17:27

Mon, 27 Jan 2020 17:27:53 GMT

I finally moved “CSS From Scratch” and “Let’s Build a Landing Page” into https://piccalil.li.

If you go to https://cssfromscratch.com or https://landingpage.build, you’ll get sent to their new homes ?

27th January 2020 at 17:11

Mon, 27 Jan 2020 17:11:44 GMT

? CSS pro tip

If you want to select SVG elements, use this CSS.

Super handy as SVG won’t fill the width if they’ve just got max-width: 100% on them.

Gist: https://gist.github.com/hankchizljaw/958b1f46d39931bfaed63c2b3e09f59d

26th January 2020 at 12:46

Sun, 26 Jan 2020 12:46:34 GMT

“The scrum board and the sprints and the inane meetings each and every day are not how you build another Super Mario 64”

A great piece by Robin. He’s one of my favourite writers.

https://www.robinrendle.com/notes/why-software-is-slow-and-shitty.html

25th January 2020 at 21:32

Sat, 25 Jan 2020 21:32:55 GMT

Seriously, this video by Marie Poulin is incredible https://youtu.be/CgxPTff_pQ4. I’m already obsessed with Notion, but this might well make me more obsessed.

This template for tasks they made is ace, too https://www.notion.so/9b0945e126ec47919e6f4251b71e9743?v=048d2bdb67e5400793810f224df5595f

24th January 2020 at 15:26

Fri, 24 Jan 2020 15:26:08 GMT

? Another new article on the blog: “Making the new Piccalilli logo”

You get to see my methodology, process and crap drawings I made during the design of the new Piccalilli logo.

https://hankchizljaw.com/wrote/making-the-new-piccalilli-logo/

24th January 2020 at 15:19

Fri, 24 Jan 2020 15:19:45 GMT

? New article on the blog: “Piccalilli: the future”

There’s a lot of change going on with Piccalilli, so I thought it would be a good idea to write about it.

https://hankchizljaw.com/wrote/piccalilli:-the-future/

24th January 2020 at 13:38

Fri, 24 Jan 2020 13:38:01 GMT

Holy moly. Setting Netlify to look after my nameservers has completely eradicated the time to first byte issues I was having on my site.

Just look at this Web Page Test report ? https://webpagetest.org/result/200124_72_6503fac05a6038bbaa1e21ac6fcf57e4/

24th January 2020 at 10:16

Fri, 24 Jan 2020 10:16:47 GMT

“Making it impossible to do something specific can often mean that people will do something far more destructive as their ways around your defences get more and more creative”

So much goodness from Harry Roberts here.

https://csswizardry.com/2017/10/airplanes-and-ashtrays/

24th January 2020 at 09:45

Fri, 24 Jan 2020 09:45:05 GMT

Today I learned that you can push your existing domain’s nameservers at Netlify. I just did that for https://piccalil.li and the resolve time seems to be much quicker.

I reckon I’ll do it for https://hankchizljaw.com too.

Handy.

23rd January 2020 at 13:25

Thu, 23 Jan 2020 13:25:32 GMT

I’m offering a new service: “Reply Guy For Hire”.

I provide drive-by reactive feedback with absolutely no context, consideration of constraints or actual thought as a tweet.

As a bonus, I’ll bring along a chip on my shoulder.

£500, ex VAT.

22nd January 2020 at 13:48

Wed, 22 Jan 2020 13:48:06 GMT

It’s not very often that I declare an article as perfect, but this one certainly is.

The cascade and specificity are so often labelled as the reason why CSS is hard. This guide by
Amelia Wattenberger will fix that: https://wattenberger.com/blog/css-cascade

22nd January 2020 at 12:44

Wed, 22 Jan 2020 12:44:30 GMT

I found this site and it’s had me giggling all day https://sendyourfriendapenisdrawing.com/

CW: dicks (that CW should just be on Twitter all the time)

21st January 2020 at 17:59

Tue, 21 Jan 2020 17:59:38 GMT

I’m sure it’s coincidental, but ever since I’ve put https://front-end-challenges.club on a Digital Ocean Droplet, it’s been ridiculously fast on a cold load.

Still not 100% happy with how the client router performs though.

21st January 2020 at 14:18

Tue, 21 Jan 2020 14:18:47 GMT

“It should never be the burden of a single individual to ensure accessibility”

A fantastic post by my pal, Nic. Super duper detailed!

https://www.nicchan.me/blog/usability-testing-popular-shopify-themes/

21st January 2020 at 13:45

Tue, 21 Jan 2020 13:45:00 GMT

I also updated my “Now” page: https://hankchizljaw.com/now/

21st January 2020 at 13:27

Tue, 21 Jan 2020 13:27:24 GMT

I made one of those “uses” pages for y’all to see my setup: https://hankchizljaw.com/uses/

I’ll put a PR into Wes Bos’ cool project, too: https://uses.tech/

21st January 2020 at 09:46

Tue, 21 Jan 2020 09:46:34 GMT

? Emo day today with Story Of The Year:

21st January 2020 at 09:34

Tue, 21 Jan 2020 09:34:38 GMT

Try not to get hung up on the language or framework you’re currently grokking. You learn so many transferable skills.

E.G. I picked up JavaScript and C# easier because I spent a lot of time writing ActionScript, so it wasn’t wasted time.

Enjoy yourself and learn what you can ?

20th January 2020 at 21:26

Mon, 20 Jan 2020 21:26:52 GMT

? The start of the new Piccalilli includes sketching out logo ideas in a Field Notes, of course.

Some fun concepts so far.

20th January 2020 at 18:49

Mon, 20 Jan 2020 18:49:55 GMT

It’s been 0 days since I got mad that HTML imports will probably never be an actual thing.

(cheers, Firefox)

20th January 2020 at 15:43

Mon, 20 Jan 2020 15:43:49 GMT

Remember LimeWire? A piece of software that would give your computer a terminal illness so that you could get a cracked copy of Photoshop.

20th January 2020 at 11:35

Mon, 20 Jan 2020 11:35:44 GMT

Did you know that Figma auto-saves your work?!?!

20th January 2020 at 11:09

Mon, 20 Jan 2020 11:09:17 GMT

This is a fantastic post by my pal, Chris Burnell.

The lobotomised owl is a staple of my CSS (thanks, Heydon) and this handy Sass mixin will undoubtedly find its way into my projects!

https://chrisburnell.com/article/sassy-lobotomised-owl

19th January 2020 at 19:55

Sun, 19 Jan 2020 19:55:54 GMT

It looks like Eleventy and Service Workers are an absolute power couple and I am very much on board with that.

19th January 2020 at 19:10

Sun, 19 Jan 2020 19:10:47 GMT

? We had a very foggy (and cold af) visit to Warwick Castle today.

18th January 2020 at 10:50

Sat, 18 Jan 2020 10:50:30 GMT

“We still track that someone visited our page, but it’s really only the basics that interest us.”

This is excellent to read and very much on my radar at the moment.

https://m.signalvnoise.com/the-last-tracker-was-just-removed-from-basecamp-com/

17th January 2020 at 15:43

Fri, 17 Jan 2020 15:43:39 GMT

Right, I’m done for the week.

Have a good weekend, pals ♥️

16th January 2020 at 15:16

Thu, 16 Jan 2020 15:16:08 GMT

This is a super handy mailto: link generator https://mailtolink.me/

As always, I love a simple tool that does one job well.

16th January 2020 at 14:42

Thu, 16 Jan 2020 14:42:55 GMT

? New article: "Piccalilli is changing"

TL;DR The newsletter is on hiatus because it’s turning into something really awesome and I’m very excited to share it with you.

https://hankchizljaw.com/wrote/piccalilli-is-changing/

16th January 2020 at 07:40

Thu, 16 Jan 2020 07:40:11 GMT

Now that Web Components are supported across all major browsers, you might want to use them but are still held back by IE.

Here’s some progressive enhancement links that might help:

16th January 2020 at 06:29

Thu, 16 Jan 2020 06:29:43 GMT

I really like Chris Coyier’s https://email-is-good.com/.

I’m a big email fan and the content in there might help you get better at email and you might start liking it more.

Check it out.

15th January 2020 at 20:36

Wed, 15 Jan 2020 20:36:54 GMT

? Oh hai there, Edge, with your Web Component support ?

15th January 2020 at 11:07

Wed, 15 Jan 2020 11:07:45 GMT

Fellow Mac users: I couldn’t recommend this app enough. It tells you when your next meeting is and that’s it.

It does one job and does it well. My favourite type of app.

https://apps.apple.com/us/app/next-meeting/id1017470484

15th January 2020 at 10:02

Wed, 15 Jan 2020 10:02:02 GMT

?? Static design tool pro tip.

Create an “Annotation” component that you can use as a sticky note to provide context for certain design elements. It helps not just developers, but also others on your team (even in my team of 1).

15th January 2020 at 07:32

Wed, 15 Jan 2020 07:32:07 GMT

I think I’ll celebrate today by making Edge my default browser rather than Chrome.

(I still like Firefox, I just prefer chromium dev tools)

14th January 2020 at 15:29

Tue, 14 Jan 2020 15:29:45 GMT

Just a periodic reminder that I’ve got a Patreon and if you support me on there, I will love you forever and ever: https://www.patreon.com/andybelldesign

14th January 2020 at 15:16

Tue, 14 Jan 2020 15:16:58 GMT

I’m really struggling with design work today. I’ve got no drive whatsoever.

If that’s how you’re feeling, too: don’t beat yourself up—there’s always tomorrow ♥️ *

* Unless you have a deadline today

14th January 2020 at 12:16

Tue, 14 Jan 2020 12:16:36 GMT

Folks who make incredible articles like this: https://wattenberger.com/blog/react-hooks. How y’all doing it? One-off static HTML jobs or are you doing some other fancy stuff?

14th January 2020 at 10:49

Tue, 14 Jan 2020 10:49:34 GMT

A dream setup for this microblog would be a Notion-powered setup that converts that content into 11ty content.

This thing has certainly provided food for thought: https://notion-blog.now.sh/.

The question is: can I be patient and wait for the proper API?

13th January 2020 at 18:43

Mon, 13 Jan 2020 18:43:51 GMT

I’ve handed the keys for https://personalsit.es over to the endlessly talented Henry Desroches. That project means so much to me and it’s in great hands with Henry, so expect great things.

It’s one of a few projects that will be moved along over the next few months.

You can find Henry here.

13th January 2020 at 16:20

Mon, 13 Jan 2020 16:20:40 GMT

A huge career milestone for me today. I was incredibly lucky to be invited to go on Shop Talk Show ?

I’ve been listening to this podcast for years, so to say this was an honour would be an understatement.

Check it out here: https://shoptalkshow.com/episodes/394/

12th January 2020 at 18:09

Sun, 12 Jan 2020 18:09:27 GMT

? First roast of the year: part deux.

12th January 2020 at 16:56

Sun, 12 Jan 2020 16:56:41 GMT

? First roast of the year looking pretty good.

12th January 2020 at 14:54

Sun, 12 Jan 2020 14:54:38 GMT

"Don’t be a clean code zealot. Clean code is not a goal. It’s an attempt to make some sense out of the immense complexity of systems we’re dealing with"

Smashing post by Dan Abramov: https://overreacted.io/goodbye-clean-code/

12th January 2020 at 13:25

Sun, 12 Jan 2020 13:25:26 GMT

⏱ Some time tracking stats. You can read why I’m doing it here.

I spent 16 hours doing client production this week with only 1 hour spent in client meetings (hell yeh).

For side projects, I spent just under 5 hours doing stuff for them (mainly Front-End Challenges Club).

I spent 3 hours and 45 minutes writing blog posts and finally, 4 hours and 30 minutes doing general business admin and email.

Around 30 hours all together, but I’ve not been hugely disciplined this week with it. I’ll try to do better next week.

12th January 2020 at 07:52

Sun, 12 Jan 2020 07:52:11 GMT

I was going to put lots of effort into getting images from here to show on Twitter but that defeats the object of a low tech, platform-agnostic micro blog. It’s not a Twitter tool. It just syndicates there.

I’ll instead keep using a ‘?’ as a marker if there’s images.

11th January 2020 at 19:30

Sat, 11 Jan 2020 19:30:45 GMT

? My kid trying to get a group of duck’s attention. It was not successful as she had no bread.

11th January 2020 at 19:26

Sat, 11 Jan 2020 19:26:13 GMT

Ignore me; I’m just testing IFTTT and its image detection, so I can blog about how this microblog thing works.

11th January 2020 at 19:18

Sat, 11 Jan 2020 19:18:40 GMT

Hot-damn this is a world class article by Sarah Drasner (their work always is, let’s be honest).

Async/Await can be hella confusing, so if that’s the case for you, read this: https://css-tricks.com/understanding-async-await/

11th January 2020 at 18:07

Sat, 11 Jan 2020 18:07:33 GMT

? The finished pizza with a crust so thin, you could smoke it.

(it was super nice and fiery as heck)

11th January 2020 at 17:09

Sat, 11 Jan 2020 17:09:19 GMT

? Homemade pizza ready to go in.

11th January 2020 at 14:40

Sat, 11 Jan 2020 14:40:29 GMT

This JavaScript course by Dan Abramov (React and Redux) looks fantastic: https://justjavascript.com/

He very much knows his stuff, so worth a look.

11th January 2020 at 14:15

Sat, 11 Jan 2020 14:15:02 GMT

? Trying out some Girls Who Grind coffee. I love the packaging ?

They do a good subscription, so check them out: https://www.girlswhogrindcoffee.com/

11th January 2020 at 07:40

Sat, 11 Jan 2020 07:40:13 GMT

Email pro tips:

Don’t send long ones. The receiver doesn’t have time to read an essay.
Don’t say "hope you’re well".
Don’t apologise for a late response, say "thanks for being patient".

10th January 2020 at 16:24

Fri, 10 Jan 2020 16:24:57 GMT

The moon is looking stunning as it rises up this evening. It’s so orange!

10th January 2020 at 16:00

Fri, 10 Jan 2020 16:00:37 GMT

? New article: “Screencasting – the secret sauce for less time wasted in meetings”

I let you peak behind the curtain at how I present work to clients with screencasts for better feedback and much fewer meetings.

https://hankchizljaw.com/wrote/screencasting-the-secret-sauce-for-less-time-wasted-in-meetings/

10th January 2020 at 14:03

Fri, 10 Jan 2020 14:03:15 GMT

I’m so glad my good pal, Heydon wrote this article. I have been having the same thoughts, but can’t articulate them as well as Heydon has.

His new site is bloody lovely, too!

https://heydonworks.com/article/the-word-user-is-fine/

10th January 2020 at 13:32

Fri, 10 Jan 2020 13:32:06 GMT

Currently listening to: “Golden Hour”, by Kasey Musgraves.

Lovely background music for some nice design work, this afternoon.

https://album.link/s/7f6xPqyaolTiziKf5R5Z0c

10th January 2020 at 10:29

Fri, 10 Jan 2020 10:29:22 GMT

Dear @figmadesign,

I know you like to remind me that you save my work every damn time I do it, but please, for the love of everything, stop.

Your quirky toast notifications won’t change my decades old muscle memory…

9th January 2020 at 21:28

Thu, 09 Jan 2020 21:28:48 GMT

I’ll be frank: the Royal Family are dated, elitist and completely irrelevant in modern society. This whole Harry and Meghan situation should be the start of a long-needed phase-out of their role in this country.

9th January 2020 at 20:43

Thu, 09 Jan 2020 20:43:13 GMT

“Lost in the basement” by Canterbury is goddamn masterpiece. The harmonies are outrageous.

It’s been a top track of mine for a good few years now: https://open.spotify.com/track/1fzIjU8pTbxpynsxsnzVyx?si=EuqT4ceHTKaTQ976nHXEPg

9th January 2020 at 18:51

Thu, 09 Jan 2020 18:51:51 GMT

I can’t stop thinking about an embarrassing moment today.

I was working in a coffee shop and decided to listen to the Frozen 2 soundtrack. I got about 3 songs in before I realised my AirPods weren’t connected. My noise cancelling AirPods ?

MacBook speakers are loud…

9th January 2020 at 16:36

Thu, 09 Jan 2020 16:36:03 GMT

I can’t believe I’m asking this, but who has made a good beginner’s course about Docker?

9th January 2020 at 13:56

Thu, 09 Jan 2020 13:56:57 GMT

My prototype of the Moscow hotel slippers has escalated in me buying some goddamn SPACE JAM SLIPPERS instead!!!

9th January 2020 at 13:37

Thu, 09 Jan 2020 13:37:48 GMT

Micro blog update: fixed my silly time stamp issues and set a nice limit on the RSS feed (15).

I should get on with client work now…

9th January 2020 at 12:43

Thu, 09 Jan 2020 12:43:44 GMT

The "statement" mode on the new Twitter "@" settings will be great for dudes telling people that CSS isn’t a programming language.

9th January 2020 at 11:42

Thu, 09 Jan 2020 11:42:41 GMT

Microblog updates:

Added pagination
Tweaked post list

9th January 2020 at 10:46

Thu, 09 Jan 2020 10:46:24 GMT

I’m working from my favourite coffee shop this morning: The Coffee Dispensary.

The make the best Cortado.

9th January 2020 at 10:29

Thu, 09 Jan 2020 10:29:24 GMT

I created a little PWA for myself, which is like https://jotter.space for creating these posts for my little micro blog. You might find it useful: https://github.com/hankchizljaw/post-helper.

It works by setting the microtome in frontmatter and 11ty does the rest.

Magic.

8th January 2020 at 22:33

Wed, 08 Jan 2020 22:33:09 GMT

? Yesterday, I spent way too much time making a tiny React base project spit out the tinest bundle I could: https://hankchizljaw.com/wrote/a-minimal-react-base-project/

(spoiler: it spits out Preact)

8th January 2020 at 22:00

Wed, 08 Jan 2020 22:00:30 GMT

I need to test links, so here’s a couple of plugs.

Buy Every Layout: https://every-layout.dev/
Subscribe to Front-End Challenges Club: https://front-end-challenges.club/

8th January 2020 at 21:50

Wed, 08 Jan 2020 21:50:09 GMT

Standup: just casually posting on my new eleventy blog from my phone.

Sent from my iPhone ?

8th January 2020 at 21:38

Wed, 08 Jan 2020 21:38:11 GMT

Let’s try again. Welcome to my new micro blog. This should post to Twitter! (pls work)

8th January 2020 at 21:35

Wed, 08 Jan 2020 21:35:51 GMT

Hello, world. This is the first post on my brand new micro blog ?

With any luck, it should have posted to my Twitter, too.

A Modern CSS Reset

Tue, 01 Oct 2019 12:02:00 GMT

This post is 4+ years old now, so I’d recommend reading this more up to date version!

I think about and enjoy very boring CSS stuff—probably much more than I should do, to be honest. One thing that I’ve probably spent too much time thinking about over the years, is CSS resets.

In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days. That era was when resets such as normalize.css came about and saved us all heaps of hell. Those days are gone now and we can trust our browsers to behave more, so I think resets like that are probably mostly redundant.

A reset of sensible defaults

I still like to reset stuff, so I’ve been slowly and continually tinkering with a reset myself over the years in an obsessive code golf manner. I’ll explain what’s in there and why, but before I do that, here it is in its entirety:

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Breaking it down

We start with box-sizing. I just flat out reset all elements and pseudo-elements to use box-sizing: border-box.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Some people think that pseudo-elements should inherit box sizing, but I think that’s silly. If you want to use a different box-sizing value, set it explicitly—at least that’s what I do, anyway.

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

After box-sizing, I do a blanket reset of margin, where it gets set by the browser styles. This is all pretty self-explanatory, so I won’t get into it too much.

html:focus-within {
  scroll-behavior: smooth;
}

The “resetting” is now mostly done, so the first thing I do for core styles is set smooth scrolling. This was previously set right on the html element, but recent updates have resulted in this being updated to only apply smooth scrolling when there is :focus-within the html element.

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

Next up: body styles. I keep this really simple. It’s useful for the <body> to fill the viewport, even when empty, so I do that by setting the min-height to 100vh.

I only set two text styles. I set the line-height to be 1.5 because the default 1.2 just isn’t big enough to have accessible, readable text. I also set text-rendering to optimizeSpeed.

Using optimizeLegibility makes your text look nicer, but can have serious performance issues such as 30 second loading delays, so I try to avoid that now. I do sometimes add it to sections of microcopy though.

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

I only reset list-style where a list element has a role=["list"] attribute. This assists with some accessibility issues, expertly explained by Scott.

a:not([class]) {
  text-decoration-skip-ink: auto;
}

For links without a class attribute, I set text-decoration-skip-ink: auto so that the underline renders in a much more readable fashion. This could be set on links globally, but it’s caused one or two conflicts in the past for me, so I keep it like this.

img {
  max-width: 100%;
  display: block;
}

Good ol’ fluid image styles come next. I set images to be a block element because frankly, life is too short for that weird gap you get at the bottom, and realistically, images—especially with work I do—tend to behave like blocks.

input,
button,
textarea,
select {
  font: inherit;
}

Another thing I’ve finally been brave enough to set as default is font: inherit on input elements, which as a shorthand, does exactly what it says on the tin. No more tiny (mono, in some cases) text!

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Last, and by no means least, is a single @media query that resets animations, transitions and scroll behaviour if the user prefers reduced motion. I like this in the reset, with specificity trumping !important selectors, because most likely now, if a user doesn’t want motion, they won’t get it, regardless of the CSS that follows this reset.

ℹ️ Update: Thanks to @atomiks, this has been updated so it doesn’t break JavaScript events watching for animationend and transitionend.

Wrapping up

That’s it, a very tiny reset that makes my life a lot easier. If you like it, you can use it yourself, too! You can find it on GitHub or NPM.

🇯🇵 If you would prefer to read this article in Japanese, head over here, where コリス has very kindly translated it for me.

🇷🇺 If you would prefer to read this article in Russian, head over here, where Stas has very kindly translated it for me.

🇪🇸 If you would prefer to read this article in Spanish, head over here, where superSimple has very kindly translated it for me.