In web development, one of the most crucial aspects of creating efficient and maintainable CSS is the ability to reduce code duplication and establish a reliable system of reuse. This approach not only streamlines the development process but also enhances the overall performance and scalability of w

When I migrated my site from Eleventy to Astro I was more concerned with making sure everything was functional. The overall design of this site has been something that has bugged me for the last 8 months; the blue and gold didn’t really feel like me, it was more a placeholder than anything else. I w

Shorter post today. After a few months of delays and reworks I finally decided on an overall theme for the site, put together the design, and got it out the door. I’ll write up a longer overview and breakdown later on, but I’m super happy with the final result and even more so that it’s finally out

Starting off day two strong, I was lucky enough to get upgraded access to the leadership collective, massive thanks to our Figma rep for pulling in that favor. Opening Keynote Leaving Fingerprints Karla and Nash kicked off the talks with Leaving fingerprints: product, design & stories at The Bro

Figma started off the day strong with their opening keynote. UI3 looks like a fresh take on the editor interface, and aims to solve a number of existing issues, from small improvements to massive overhauls that needed a refresh to tackle. The improvements to dev mode are a welcome addition given my

With the release of Firefox 117 CSS nesting has full browser support coverage. Let’s take a look at how nesting works in CSS, how it compares to pre-processors like Sass, and some tips, tricks, and gotchas to watch out for. What is Nesting? In any programming language, when you have a declaration in

Did you know that the DOM (Document Object Model) defines the web as objects? Or that this representation of web pages is object-oriented so that it can be modified by scripting languages? While these may seem like basic ideas it’s always interesting to dig into the details of the web that we work i

There’s been a lot of talk over the last few months about using AI to improve accessibility. I’ve seen and heard people talk about the potential for a browser or OS level AI to swoop in and solve “last-mile” accessibility issues for a user that a designer or developer has not considered or accounted

This past week I got enticed into and pulled down a web design rabbit hole. Chris Coyier wrote on FrontendMasters back in mid February about part 2 of Jim Nielsen’s The Case for Design Engineers. The post Chris links to is a great argument for why we need people who can "bridge the gap" be

Josh's tutorials are always a joy to read and interact with. Even as someone who is familiar with all of these methods Josh provides such an in-depth and details analysis, with incredible examples. For a long time, centering an element within its parent was a surprisingly tricky thing to do. As CS

This past week I spent some time exploring using Starlight as a potential replatform for our design system documentation. The major reason I was drawn to starlight is that because it’s built atop Astro, it has support for all of the major players in the UI framework market. Our current system is bui

I doubt he was specifically talking about this blog; but after reading Chris' post I checked and realized that I am one of those sites taht does not auto-expose their RSS feed in the HTML. I've since added the relevant line in my head and we should be good to go. What a week, first I learn how to e

One thing I've struggled with on many iterations of this blog is the constant ../../path/to/file string for references, whether imports, css, or images. I've never really understood how to set up import aliases and always just dealt with the tedious task of updating or changing those strings if I e

It's been about 3 years since I moved this site over to 11ty (Eleventy), and it's been a great ride. I still think 11ty is a fantastic static site generator, but I wanted to try out some new front-end frameworks and I feel like a personal website is always the playground to learn new things. The two

I’ve been wanting to learn more about indieweb tech and how to incorporate more if it into my site. This past week Anne over at Apple Annie’s shared a post collecting her recent writing about her own indieweb adventures using indiewebify.me I plan on reading and learning from these over the next few

What is Semantic HTML? In programming, semantics refers to the meaning of a piece of code. HTML (Hypertext Markup Language) is the backbone of the web, it is ultimately what is rendered in a browser when someone visits a website. Semantic HTML is the concept that markup should be coded to represent

This past week I partook in my very first Codepen Challenge. This month’s Codepen challenge is Style Trends. It’s an interesting “meta-challenge” where every week the HTML template provided is exactly the same and you need to create a unique design that matches the theme of the week. This past week

import { Picture } from "astro:assets"; import twitter from "@images/writing/social-block-message/twitter.png"; import mastodon from "@images/writing/social-block-message/mastodon.png"; Back at it again, Chris and Dave on the Shoptalk Show (ep. 590) mouth-blogged the id

It seems I wasn't the only one who went to visit Andy Bell's post A Modern CSS Reset after it made an appearance on the Shoptalk podcast. He's since put out an updated post, so I figured since I commented on the first it was worth sharing the new one. A (more) Modern CSS Reset

For years now there have been programs, tools and libraries that all claim to deliver on the same promise, delivering to you “Production-Ready” code. Dreamweaver was entirely based on the idea that you could design a website in their visual tool and it would generate all of the HTML for you, neat! A

In my work with Design Systems, accessibility often comes up as a topic. Questions can range from the incredibly basic, "What is accessibility?" to the more complex and nuanced, "Is the language of this modal clear enough?" Part of my job is to help guide the designers, developer

Here's my answer to the Sept. 18th Rendezvous with Cassidoo newsletter interview question. It was a fun little coding challenge. It's a little more verbose than needed, but I liked the idea of calling out and explicitly naming the variables so that other people could follow the logic. I also adding

Inspired by a conversation between Dave and Chris on the recent shoptalk show episode 582, I wanted to take a look at the history of CSS resets and see what I could put into a “reset” or “normalize” file that was tailored to my specific sensibilities. Why did we need to reset CSS? Since the earliest

import { Picture } from "astro:assets"; import { Icon } from "astro-icon"; import contrastExample from "@images/writing/design-a11y/contrast-ratio.png"; This is an introductory overview of Accessibility and how it relates to designing and building digital products and e