Writing tagged with #Development
-
CSS Architecture Archeology
Posted on
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
-
Site Redesign Retrospective
Posted on
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
-
Site Rededesign is Live
Posted on
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
-
Config 2024 Day Two
Posted on
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
-
Config 2024 Day One
Posted on
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
-
Native CSS Nesting
Posted on
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
-
Learning through Teaching
Posted on
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
-
Leveraging AI to Improve Accessibility
Posted on
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
-
Declarative Design and the Unknown Web
Posted on
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
-
How To Center a Div
Posted on
import PostLink from "@components/PostLink.astro"; 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 wi
-
Taking Astro’s Starlight for a spin: Design System Documentation
Posted on
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
-
Chris Coyier - Exposed RSS
Posted on
import PostLink from "@components/PostLink.astro"; 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
-
Coding in Public - Import Aliases
Posted on
import PostLink from "@components/PostLink.astro"; 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 t
-
Taking off with Astro
Posted on
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
-
Learning IndieWeb with Apple Annie
Posted on
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
-
Semantic HTML and Accessibility
Posted on
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
-
Learning Grid Thanks to Codepen Challenges
Posted on
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
-
Using Block Quotes for Social Embeds
Posted on
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
-
Andy Bell updated his CSS reset!
Posted on
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
-
The Production-Ready Myth
Posted on
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
-
A Playbook for Accessibility
Posted on
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
-
Rendezvous with Cassidoo Newsletter 9/18 Interview Question
Posted on
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
-
CSS Reset, Normalize, and Base Styles
Posted on
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
-
Be a Design A11y: An Introduction to Accessibility
Posted on
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