I've been doing some client performance work lately. It's a Next.js project, and it looks like Google's INP update has punished it. Organic search rankings are tanking. I thought it would be a quick gig because there was a ton of low-hanging fruit. After fixing, waiting and constantly checking the…

Securing Buy-In for Your Design System: A Lifecycle Approach Discover how to secure stakeholder buy-in for a design system at every stage, from pre-building to post-launch, and transform your product development process. Nezar Mansour , Content Writer Apr 3, 2024 Foundations The introduction of a…

May 13, 2024 The Times You Need A Custom @property Instead Of A CSS Variable About The Author Preethi is a web developer and writer. She jots down mostly on front-end development, especially designing with CSS. Preethi is also a chai addict and strongly … More about Preethi ↬ Email Newsletter Weekly…

Daily Tips Every piece of code is a potential vulnerability, really. Not just dependencies. But code that you don’t own, that’s outside your control, is particularly vulnerable. One of the big myths of using frameworks and libraries and cloud services is that you no longer have the “own” that piece…

Updated January 27, 2025, originally posted January 16, 2025; In my post Brief Note on Figure and Figcaption Support I demonstrate how, when encountering a figure with a screen reader, you won’t hear everything announced at once: No screen reader combo treats the caption as the accessible name nor…

Copying code from code blocks, without having to manually select it all first, is very handy convenience feature. But despite having published a ton of code snippets on this website, adding copy functionality wasn’t a top priority so far. A bit sad, considering that it can be done in less than an…

16 January 2025 – Baldur Bjarnason interim notes Accidentally wrote this while trying to figure things out, so I might as well publish it here. And, no, I didn’t bother to edit it, so expect fluff and rambling. Everywhere I look, it’s becoming more and more clear that a lot of job markets are in…

light-dark() makes it easy to build websites that respect the user's preferred color scheme while also providing the ability to override the color scheme without code duplication. Be sure to check out the demo at the bottom! Before we dive into light-dark(), let's take a quick detour to understand…

I keep hearing people worry that AI will take over software development, product development, writing, video production, and other areas. I'd be worried if you write low-quality, spammy, clickbait articles (AI can do that easily). If you write simple, boilerplate code for a big company, your job…

Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers by Alexander Muzenhardt published on Dec 27, 2024 Introduction Imagine you’re tasked with building a cool new feature for a product. You dive into the work with full energy, and just before the deadline, you manage to finish it.…

Cory LaViska of Shoelace fame posted this a few days ago: when building a component library, what component do you build first and why is it always button? It’s a similar question that starts Dan Mall’s talk he first performed at Clarity 2022. Dan argues that the button doesn’t provide impact to…

Our 10 most popular web performance articles of 2024 core web vitals javascript performance budgets metrics We love writing articles and blog posts that help folks solve real web performance and UX problems. Here are the ones you loved most in 2024. (The number one item may surprise you!) Some of…

I know I'm still a bit of a 11ty n00b, so I hope this isn't frowned upon in the community, but on rebuilding my blog using 11ty, I decided not to use the standard Bundle plugin that was added in v3.0.0. Instead, I decided to write a custom Shortcode to customise my CSS output. In this blog post, I…

Let’s say you don’t know JavaScript. Like, at all. You haven’t needed it. You’re a web designer and you’re focused largely on UI and UX. Your skills with design tools, HTML, CSS, and team communication have served you well. But you know what JavaScript is. It’s another part of the native web. It’s…

Daily Tips There’s not really a “wrong” way to build Web Components. But there are some approaches that are, in my opinion, antithetical to the spirit of them, and maybe miss the point of what makes them so great. Today, I wanted to talk about that in the context of a project that’s been getting a…

Anchor positioning in CSS enables us to position an element relative to an anchor element anywhere on the page. Prior to this we could only position an element relative to its closest positioned ancestor, which sometimes meant doing some HTML and CSS gymnastics or, more often than not, resorting to…

This guide is designed to help everyone with Markdown, even if they have never written it before. It is deliberately simple. There’s links to further resources and learning at the end of the article. I’m not going to spend ages explaining what Markdown is or how it works because there’s already…

Daily Tips Last week, we looked at different ways to setup the HTML in a Web Component. One of the challenges with running your code in the constructor() is that sometimes the custom element is created, but none of the nested HTML inside it is ready yet. We looked at a few different ways to fix…

Sometimes I look at this list of “slash pages” and I’m like ughkgh I love these, I should do like all of them. Then something stops me and I think I’ve figured out what it is. They seem more like blog post ideas to me than permanent (if occasionally updated) pages. For example /carry is one of the…

There've been some folks sharing their 2024 default apps; let me join the fun! Heads up! Some of this post's links are affiliate links. If this rubs you the wrong way, it's probably not for you. 🫣 Browsers My daily driver remains Firefox. Not because it's the best or fastest browser but because I…

Daily Tips One of my favorite ways to customize Web Components is with custom attributes. Since writing that last article, I’ve gotten some questions around using custom attributes in Web Components, and I’ve also see their popularity increase a fair bit. Let’s talk about some caveats and things to…

Cristian Ghita 7 min read· Dec 23, 2024 -- I’ve been thinking a lot about this lately. For years, responsive design has been our go-to solution for crafting web experiences that adapt across devices. But with foldable screens, rollable displays, and dynamic viewports becoming more common, it feels…

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…