It’s 2024, and I’m including this post in a series called redesign 2022. That’s when I ripped out all the styles on my site, and declared my intent to renovate with a light touch. How much can I change, without moving any of the walls? —Me, 2022 But the walls got in my way. Instead of minimal…

I’m pretty proud that I managed to keep my iPhone 8 going for over five years (with one battery replacement in that time). But recently it’s been increasingly unreliable, switching itself off at random times, and spontaneously draining the battery after doing anything remotely taxing. This combined…

Daily Tips So far in this series, we’ve looked at buildless testing, an overview of testing approaches, and how to write unit tests. Today, let’s talk about how to organize your tests! Split tests up When you’re testing just one library, class, or chunk of code, you can keep everything in one test…

May 2, 2024 Combining CSS :has() And HTML For Greater Conditional Styling About The Author Amit is an experienced web developer who mainly does front-end, specializing in CSS, animations, and creative coding. Over the years, he’s taken part in … More about Amit ↬ Email Newsletter Weekly tips on…

Whenever a post about Specificity in CSS – and by extension the Cascade itself – gets published I get very excited as it’s a core concept of the language that everyone should know. The more articles on this, the better! However, I also sometimes raise an eyebrow as from time to time I,…

Table of Contents I recently added a Gaming Library page, which involved a bunch of API calls via Notion, as well as the PlayStation Network for that extra nerd factor. I initially only used Notion’s API for my Now page, but as I was reusing a lot of code, I ended up consolidating everything into…

Adding Random Content Using Eleventy 13th of December 2024 Since I've had a rejuvenation in writing again after I finally pushed this sites redesign live I have had a link component at the bottom of every article stating that I have availabilty for new client work. Fast forward ~9 weeks from the…

Daily Tips Yesterday, I talked about my evolving thinking about JavaScript testing. One of the things that often gets missed in articles about the kinds of tests you can write is how to actually write them. Today, let’s talk about that! Assertions Testing libraries use assertions to run there tests.…

Daily Tips Testing your code is one of those things that a lot of folks agree is a good idea, but that as an industry we generally don’t do enough. And I personally think a lot of that is because JavaScript testing often feels complicated, time-consuming, and over-engineered. Personally, I think a…

Daily Tips Earlier this year, I completely ditched build steps in my developer process for personal websites and small projects. My CSS is vanilla. I keep it organized in a bunch of small, modular files that I load individually as-needed (my SSG helps me out here). My JS is all vanilla, again…

A Design Tokens Workflow (part 4) Converting Tokens with Style Dictionary 5th of December 2024 On This Page: Implementing Design Tokens can become the backbone of a consistent, scaleable Design System across your organisation and the platforms your products are on. However, different platforms have…

A Design Tokens Workflow (part 3) Beyond JSON: Exploring File Formats for Design Tokens 28th of November 2024 On This Page: Before we go further into the tutorial series I thought we should take a look at the file formats you can use to generate your Design Tokens into the file outputs you need. The…

Subscribe Blog RSS feed Notes RSS feed or Combined and follow Mastodon Bluesky Thursday 5 Dec 2024 Play Synthesised Audio Hyperlinks are cool. They’re what make the web, The Web. You know what’s really cool? Linking to specific sections of a web page. We’ve done that forever with the URL…

After seeing the Web Components community on Bluesky share a couple of components for embedding Blueksy post threads, I thought I'd throw my hand into the ring. I'm not knocking them; it's great to see them out there. However, I prefer something a bit more low-level that can utilise HTML and CSS as…

24 November 2024 Last week my friend, Rachael got married. I ordered her a gift using MoonPig and arranged delivery for Tuesday (the day she’d arrive back). But on Monday I received this email: Yes, MoonPig let me choose the date and then ignored it. Also the email was addressed to Rachael, not me.…

Generative AI features have a large climate impact and water consumption. We can weigh that impact against those features' benefits, but what if they are left unused? If lots of people don't in fact use the thing? That seems like lots of avoidable waste. Which matters, we're in a climate emergency…

Using the ':not()' pseudo-class to remove styles from ':last-child' Published on 01 Dec 2024 Tags css notes I was re-designing the footer for my blog when I added a list of social icon links. I needed to add some padding between them, as one does, and was preparing to apply padding to the left of…

Can it be done? This plucky front-end developer intends to find out. Can we do it? We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie…

Have you ever wished there was a way to determine if your website’s UX/UI design is delivering the value it’s supposed to? Enter: The design audit. A website design audit is an in-depth analysis of your site. It considers everything from usability principles to visual storytelling. For UX designers,…

1 December 2024 On Friday, I met up with a friend for lunch. The day before, he’d been a research participant to taste-test 4 different brands of Jaffa cake. Let me tell you what happened (because this is exactly what you don’t want to do if you want good UX): Jaffa Cake #1: It tasted amazing. My…

Framing the problem is vital for designers. We need to be relentlessly talking about the core benefits that a product or service delivers, and why. I’ve found that framing the problem is something that teams really struggle with. This should be something we constantly refer back to as we look to…

Back then my approach to syndicating to Bluesky was to piggy-back off my micro.blog account (which is really just the RSS feed of my notes): Micro.blog can also cross-post to other services. One of those services is Bluesky. I gave permission to micro.blog to syndicate to Bluesky so now my notes…

Nov 24, 2024 · 1 minute to read Tags: 11ty performance Photo by Matthew Brodeur Ever since the Eleventy v3.0.0 came out and the new Eleventy Image plugin came out with the its new Transform capability, I had been wanting to give it a try. We'll I did that today and coverted my entire site into using…

CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some practical use cases. No promises, though. Before we get into things, there’s one important ground rule: infinity can only be used inside a…

This post assumes some knowledge of view transitions. If you're looking for a from-scratch intro to the feature, see this article. When folks ask me for help with view transition animations that "don't quite look right", it's usually because the content changes aspect ratio. Here's how to handle it:…

I bet all of you have seen that little trick where an SVG path is animated to look like it’s drawing itself. It’s super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a…

When it comes to the core of CSS stuff, we do things very much the same each time at the studio. The output varies project-to-project, but the core principles stay the same regardless. Because of that, I recently created a boilerplate which I’ve made open to everyone. I thought it would be a good…

“Asterisk” (CC BY 2.0) by Steve Snodgrass When filling in a form—be it signing up for a newsletter or applying for a credit card—you must provide a minimum amount of information for the form to function. A newsletter sign-up form may only need your email address, whereas a credit card application…

Daily Tips My preferred style of authoring Web Components is to start with existing HTML and enhance it once the Web Component loads. For example, if I were building a show/hide component, I might start with a and some content that it controls. I’d also use the [hidden] attribute to hide the button…

A Design Tokens Workflow (part 2) Outputting to Different Formats with Style Dictionary 31st of October 2024 On This Page: In the first tutorial in this series I walked us through creating up a simple Style Dictionary setup that can transform your Design Tokens (in .json) to different formats (a…

What Else Can We Do With Design Tokens? 22nd of October 2024 Design Tokens are a solution in Design System that allow teams to define and use their design decisions across disciplines, codebases, and frameworks. Simply put they hold a name or ‘key’ for what the design decision is called and a…

A Design Tokens Workflow (part 1) Getting Started With Style Dictionary 24th of October 2024 On This Page: What are Design Tokens Design Tokens have become a widely-adopted method to store design decisions (such as colours, typography, spacing, border-radius, and other visual properties) across…

As we navigate through 2024, the world of graphic design is buzzing with new and exciting trends that are reshaping the industry. This year has brought a lively mix of fresh styles and classic element

Daily Tips That should be the goal when writing code. As little of it as possible. I don’t mean in the code-golf, how-short-can-I-make-this-line-of-code kind of way. I meant that we should prefer HTML over CSS, and CSS over JavaScript. We should prefer pre-rendered HTML over dynamic, and…

Bora 7 min read· Feb 13, 2024 -- Press enter or click to view image in full size Creating a successful design doesn't have to feel like wandering through a maze. There's a proven design process that keeps things smooth and helps you nail it every time. It's like a recipe with four steps to make your…

I will base this article on a list found at MDN as a reference but will add some extra upcoming things in the mix later on. The idea is that this is more than just an MDN copy and yes, there are a few units out there that I didn’t try out before writing this article. So take this little journey with…