Many an inclusive design conundrum stems from the tension between logical document structure, compelling visual layout, and intuitive interaction. Where we dispense with any one of these, someone somewhere will have a diminished experience. Compromise is inevitable, but it should be an equitable sort of compromise.
Great adivce on how to make a reasonably inclusive/accessible card component.
If you find yourself removing a border from an element that has a border and are tempted to use border: 0 , border: none, or outline: none, I’d urge you to stop for a moment and reconsider.
In many cases, users with high-density screens could be the majority of your traffic.
Design systems become a “hair on fire” problem and get buy-in when people in the organization encounter a catastrophic or near-catastrophic event. Design systems are not a cure-all, but they are an aspirin for a very common set of headaches.
Thehsl()color model is not reliable for manipulating and creating color palettes because it can lead to accessibility issues.oklch()offers the same intuitive approach as HSL, but provides much more consistency in its output.
How I implemented the dynamic theme on this site
Some other great links related to oklch:
It’s time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness.
This is a natural reaction when facing something where we don’t have a correct mental model. It’s an essential step in learning, to face this, and to learn to push through it and correct your mental model. It’s a reaction we see all the time online regarding CSS. If we’re honest (and we can recall well enough), it’s a reaction we all felt at one point or another when we were learning CSS.
If you are looking for CSS mental models, I think Josh Comeau does a great job with his courses and posts when explaining his CSS mental model.
However, it’s not 2013 anymore. This resignation regarding new browser features especially in the realm of CSS is outdated. These days, most brand spanking new features are ready for production use within months, not years.
I've been mostly a frontend developer since the earyl jQuery days. I feel like I lost track of many features along the way as they were supported in Chrome, but everyone else was a maybe sometime in the future. It's neat to see so many things being implemented across the the ecosystem at a reasonable pace.
By the way! For putting curly quotes on blockquote, might as well do that in CSS rather than in the content.
blockquote {
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
It actually has many different feeds! I wasn't aware of them when I wrote the article, but I recently discovered them.
Here's the basic format
The key realization I had is that CSS is so much more than a collection of properties. It's a constellation of inter-connected layout algorithms. Each algorithm is a complex system with its own rules and secret mechanisms.
As React, Vue, et al continue to evolve, we're seeing more and more metaframeworks pop up. It's almost as though you can't be successful as a framework without having a metaframework. React has Next.js and Remix. Vue has Nuxt.js. Angular has Analog. Svelte has SvelteKit. Solid.js has SolidStart. This seems like complete madness to me. We're building abstractions on top of abstractions, further locking users into those ecosystems and making churn more of a problem than ever.
Switching the entire operating system's color scheme can get annoying real quick, so Chrome DevTools now allows you to emulate the user's preferred color scheme in a way that only affects the currently visible tab. Open the Command Menu, start typing Rendering, run the Show Rendering command, and then change the Emulate CSS media feature prefers-color-scheme option.
I knew this was possible, but the chrome dev tools don't exactly make it easy to find.
This blog post explains how to automate the aggregation of content from multiple RSS feeds into a JSON file stored in GitHub. This workflow uses AWS Lambda and AWS Step Functions, triggered by Amazon EventBridge.
Years ago, I was an avid user of Google Reader. After it shutdown, I never found a new reader and slowly lost track of a large swath of useful content from reliable folks I had curated over the years. As a side project I am starting to think about building my own.
I like using the AWS services above, but this looks interesting as well. Using a github action on a cron schedule.
Maybe the hardest / most complicated part of building this blog was adding Dark Mode. Not the live-embedded code snippets, not the unified GraphQL layer that manages and aggregates all content and data, not the custom analytics system, not the myriad bits of whimsy. Freaking Dark Mode. It's a good reminder that when it comes to software development, a simple feature can have a complex implementation.
Adding dark mode to this site, proved to be a bit of challenge as well. This article helped a lot though. Here is how I did it.
I've used dotenv for years while developing for nodejs. Node > 20.6.0 now has support for .env files by default. Just use node --env-file .env.
Even though this implementation is missing some features, it has some benefits over using a third-party package. Node.js loads and parses the .env file as it is starting up, so you can include environment variables that configure Node.js itself, like NODE_OPTIONS.
It really is an honor, regardless of the outcome, even if it is an honor I wish nobody had had cause to think of in the first place.
The web can be compassionate. At least in the corner I spend my time in. I never knew the story of the web color rebeccapurple but happened upon it today. As a father my heart goes out to Eric and his family.