Poetic CSS Course, Early Bird Launch
Understand CSS as a system – so you can write, review, and maintain web styles with confidence on a timeline and under budget. Play Video: Behind the scenes Register now » Reply via Email | Mastodon | Bluesky
Miriam Suzanne
Art & CSS & other digital artifacts of my life as a hybrid creator/teacher based in Denver.
Latest posts
There's no point resisting
I’m afraid nuclear weapons are here to stay. There’s no point resisting. I’m afraid assault weapons and school shootings in the US are here to stay. I’m afraid cars are here to stay. Corporate social media, I imagine, is also here to stay? Addiction-honed algorithms, and constantly expanding surveillance – on and offline? To quote one Marx or another: I’m against it . We too easily conflate “ this…
Butter bells, fresh from the kiln
Play Video: Butter bells, fresh from the kiln When you fire the lid/bell and jar together, it helps keep them from warping – but it also requires some effort to get them apart, and sand the connections for a smooth sit. Reply via Email | Mastodon | Bluesky
I had to look it up
The other day I got a comment on youtube: YWNBAW . You Will Never Be A Real Woman . And I thought: well first, you’re missing an R. But then, yeah! What physical woman – made of biology, pumping blood through veins – could possibly achieve the Ideal Form of Real Womanhood ? How could something physical ever capture the essence of a pure Idea!? We are all but shadows on the cave wall! This…
I've been making pots
Saturday I had my first pottery market. But just a few days before the event, Rae handed me some cash and took home a moon vase. I started doing weekly pottery sessions at the local rec center a couple years ago, coming out of lock-down. But last fall I decided to commit more time, and joined a studio with 24hr access. Now I’m checking in almost daily to throw, trim, decorate, or see what’s fresh…
Laser-cut pottery throwing gauge
I designed a pottery throwing gauge that I could laser cut with scrap material, and assemble using only friction and bat pins. Choose a format to download the design templates: DXF drawings LightBurn 2 This is inspired by Darren Ellis and Toby Duncan , with some adjustments to simplify the construction. Build your own To make your own gauge, you’ll need: 1/4" plywood, MDF , or acrylic 1/8"…
Tech continues to be political
Being “in tech” in 2025 is depressing, and if I’m going to stick around, I need to remember why I’m here. ( en français ) You are here, on my personal web log A note of warning, before you proceed: this is a journal entry, at a difficult time. It’s very hard to think or act when you can’t tell if you’re about to lose your job, have your research killed off, have your healthcare terminated, witness…
Aggregating my distributed self
Most of the content on this site is an aggregate view of my work in other venues. How do I want to manage that process going forward? 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…
A web component for CodePen embeds?
David Darnes already made a <code-pen> web component . It’s great. It takes code, and creates a pen from that code. But I don’t want to create a pen, I want to embed one. The default CodePen embed is pretty good already. So right from the start, this whole project is unnecessary. The code looks like this: < p class = " codepen " data-slug-hash = " BEvjbm " data-height = " 600 " > CodePen Demo: < a…
We don't need a boss, we need a process
Robin says design ain’t a democracy . “ great design can only thrive with a dictator/director. ” I aim to push back. Everyone can agree that design by committee usually fails. But it’s not because there are multiple people involved, it’s because (most) committees are not made up of skilled collaborators with a shared vision and process. Shared vision and collaborative process don’t just happen…
Eleventy buckets & cascade layers
I’m re-working this site from scratch – sticking with Eleventy , but moving from Nunjucks templates/macros to WebC and web components. Outside of static-site templates, one goal of this refresh is to keep things as ‘vanilla’ as possible. This isn’t some purist stance on my part. There are a lot of great tools that we recommend to clients every day. But this is my personal site, and a place to…
A slash-why proposal
Get yourself a fancy little manifesto page, and tell us all what you’re about. I’m working on a personal site refresh, oh so slowly. Part of the process has been considering what slash pages I have or want. Robb Knight has a great list of ideas over at slashpages.net But there’s one I’ve had for a decade, that I think others might consider adding: /why . It’s an opportunity to say what you care…
Custom element, two ways
Sometimes I build a custom element, and then I have second thoughts about it. hotpink teal #22f6 #f226 The first is just a clever use of CSS. The second (registered) custom element simplifies the markup, but adds a JS dependency. The markup: <code style="--color-tile:hotpink">hotpink</code> <color-tile>teal</color-tile> Maybe that small syntax improvement is a job for HTML templating , rather than…
User styles on the web
You’re allowed to have preferences. That’s what the web is designed for. Set your preferences. I’ve been playing with user styles. Not like fancy site-specific styles, just setting the defaults that I want. Slightly larger text, nicer fallback fonts, etc. Why not? Firefox /Gecko: about:preferences (GUI) Chrome /Blink: chrome://settings/appearance (GUI) Safari /WebKit: go to… Settings / Advanced /…
New year, same (terrible) Mia
It wasn’t always a great year, but I’ve been moving the right direction . In 2024, the plan is to just keep moving . (maybe too literally) I don’t like to define my year as a series of measurable OKRs achieved or failed. To quote Robin Rendle : I am a poem, I am not software . But at the end of 2022 my anxiety was pretty high, and I was feeling pretty low. So I set out to turn things around : I…
CSS @scope
The new @scope rule is here! It’s a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions. Reply via Email | Mastodon | Bluesky
Reclaiming my time
So that when I am busy, it should be from an abundance of creative projects, not a scarcity of time . Here we are, 1/4 th of our way through the year: 2023. Today is Last week was International Worker’s Day , or beginning of Q2 if you’re more into business business business (like I am). (Yay, capitalism! Let’s all get rich through exploitation, and then shoot ourselves into space, to achieve our…
Cascade Layers
Don’t let specificity force you into strict selector conventions. Cascade Layers allow us to manage specificity without resorting to naming hacks or the !important flag. Reply via Email | Mastodon | Bluesky
Javascript automation on Mac
When my Alfred word counting workflow stopped working (flowing?) I discovered it was written as a php script – and could be re-written with JS. So I did! I’ve been using Alfred for Mac as long as I can remember – occasionally installing ‘powerpack’ workflows or building simple flows with the graphic interface. The other day, I discovered one of my third-party workflows wasn’t working. It’s a…
Personal Histories
How would our words change if we were writing for someone in crisis? Would our language soften? Would we ask for less? — Sara Wachter-Boettcher If you don’t know Sara’s work, go read a copy of Technically Wrong – one of the best tech books I’ve read. Personal Histories is an older post on a similar topic, linked in the web archive, but still worth your time – a reminder that the personal questions…
Ancient Web Browsers
An archive of the earliest web browsers – from WorldWideWeb, LineMode, and ViolaWWW up through Mosaic. The first three browsers here are the ones I know the best. There are emulators of both WorldWideWeb and LineMode (though the latter seems to be broken). I mention these two regularly in my talks, because they represent an important philosophy of the web itself: progressive enhancement . CERN…
Critical CSS? Not So Fast!
Harry Roberts provides a lot of detail about when/how to use ‘Critical CSS’ as a performance optimization – and some strong warnings that it might not be worth the effort. I have long held very strong opinions about the Critical CSS pattern. In theory, in a perfect world, with all things being equal, it’s demonstrably a Good Idea™. However, in practice, in the real world, it often falls short as a…
CSS tie-dye gradient backgrounds
[As] a flame, Which oft, they say, some evil Spirit attends, Hovering and blazing with delusive light– —John Milton Playful gradient inspiration Last week, my friend Dylan (a junior dev looking for work, if you have any leads!) sent me a question about improving the performance of this fun blurry-blob background animation: It performs ok on my machine, but can get choppy on less powerful devices I…
Personal website redesign
I’m a sucker for a good personal site redesign, especially when it comes with an attached blog post. I especially like that the post shows how the old design looked. Both the before and after pics show inspiring, fun designs. Both designs represent Melanie’s interests in beautiful visual clues – from computers to quilting. It makes the designs feel personal. Reply via Email | Mastodon | Bluesky
Request for Comments: Sass Color Spaces
Browsers are starting to roll out support for new color spaces in CSS as part of Interop 2022 . My proposal for the Sass implementation is live, and ready for feedback. I’m very excited about this. It will allow us to: Define colors in new color spaces like oklch & display-p3 Convert colors between spaces Mix & manipulate colors in any space Gamut-map colors for a target space as needed Safari is…
A long-term plan for logical properties?
The CSS Working Group is discussing ‘logical properties’ today with the Internationalization Working Group – and there’s a great new article on the topic this week from Jeremy Keith. CSS has historically revolved around physical directions: width , height , top , right , bottom , and left . Those make sense in a world where what you see is what you get – but that’s fundamentally not how the web…
Container queries in browsers!
After nearly 15 years as a highly-requested feature in CSS – and 15 years being told it was impossible – (size) Container Queries and units have shipped in both Chrome/Edge 105, and Safari 16! Firefox is not far behind. Chrome 105 [ August 30, 2022 ] Safari 16 [ September 12, 2022 ] If you want to start using these features (I recommend it!) just make sure you’re using the right syntax ! Some…
I never let things be small
I’m bad at short posts, or even just sharing a link. I feel like, if I’m going to post the link, I should have more to say about it. Something you haven’t considered already. I created a folder here for ‘micro’ posts. It will even generate a title for me. I also created a folder for links. All I need is a URL, and maybe a pull quote. So far I’ve barely used either one. I’m bad at keeping this post…
A whole cascade of layers
I really enjoyed Dave Rupert’s Modern alternatives to BEM , which concludes with a link to my redesign. So let’s talk about my seven-layer burrito of styles – what he calls SBRDFLT . What’s that all about? TL;DR I don’t know yet. NOTE: This post refers to an exposed layer-toggling feature that no longer exists on my site. But the thought process is still relevant to writing CSS with cascade…
This content won't architect itself
Continuing the slow redesign process, I spent a weekend rearranging the deck chairs content files on the Titanic this website. Can I really call it a ‘no-demo’ reno , when I keep moving all these files around? I don’t know. Maybe? It was always going to be a tenuous metaphor. What if I just tear out all the walls, and design an open-concept site? When I asked Erin to comment on a new idea for…
No demo [website] reno
I want to re-think the front-end of my site, without too much change to the (Eleventy/Markdown) content that drives it. And I want to do it slowly. Erin & I had a lovely vacation last month, driving around southwest Colorado – Bishop Castle, the Great Sand Dunes, Chimney Rock, the Durango-Silverton Railroad, the (terrifying) Million Dollar Highway, the Black Canyon of the Gunnison, and so on. It…
2 days of cordwainery
Erin and I spent a couple days last week at the Colorado Shoe School in Bellvue, CO – learning, designing, and making our own sneakers. Yes, actual sneakers, fit for wearing, and built from scratch. Only the soles come pre-formed out of recycled plastic. TL;DR Annabel (my teacher) posted a tiktok of my process and results – my first outing as an amateur cordwainer . The Shoe School Annabel Reader…
Body margin 8px
All browsers add an 8px margin on the body element – it’s part of the w3c-recommended default stylesheet which browsers generally use as a starting point for their own ‘user agent’ styles. But why 8px ? Where does that come from? Initial values vs browser defaults Every property in CSS has an initial value . That initial value is the same for all elements across the entire web. The initial value…
The gray areas of HWB color
Working on Sass support for color spaces , I ran into a question about the proper handling of hwb() colors. That lead me down a rabbit hole, exploring the edges of hwb (and powerless color channels) in CSS. Intro to HWB colors The HWB format has been around in design tools for a long time, but it is fairly recent on the web. It works by taking a fully-saturated hue , and then mixing in whiteness…
Miriam, for the archive
This post has been written and published, and filed away for safe keeping as an event that happened in my past. This post is also a live performance, and an invitation to engage. Thanks for dropping by. I’ve had this site for a very long time – though the domain and the underlying tech (and most of the content) has shifted more than once. Is it still the same site, if I can just take out all the…
Complex vs compound selectors
In CSS, there are compound selectors and also complex selectors , and I never remember which is which. Do you need to learn the difference? Probably not. But I’m tired of looking it up. From the specification: A compound selector is a sequence of simple selectors that are not separated by a combinator, and represents a set of simultaneous conditions on a single element. Simple selectors are all…
The spam has arrived
The other day, I posted an article about implementing webmentions on this site. Today, I’m battling an endless stream of spam. I first noticed it on a Netlify deploy preview. A faceless mention from ‘admin’ at ‘imoneyhub’. I assumed right away it must be spam, but I’m glad I clicked through. It turns out Geoff Graham wrote a lovely CSS-Tricks reply about his own struggle setting up webmentions,…
Am I on the IndieWeb yet?
I’m really into the IndieWeb , or the ideas behind it. I like to own my data, I like a space to play and experiment, I like the idea of syndicating content to be read/experienced in a variety of formats. I love microformats , and RSS feeds , and… wait… how do webmentions work? Slow Social A few weeks back there was another round of social-media panic (which is reasonable), and the ever-present…
My theatrical delusions
Reflections on making theater, and my family reacting to it. My grandpa – my dad’s dad – was an academic, and a school administrator. He had PhDs in both religion and physics, I think, from Princeton? He was also a big fan of opera. They had a TV upstairs in the bedroom – this was the 80s, early nineties. And we would all pile onto the bed, or pull up chairs, to watch The Marriage of Figaro or Don…
A Complete Guide to CSS Cascade Layers
Cascade layers are a new CSS feature that allows us to define explicit contained layers of specificity. We now have full control over which styles take priority in a project without relying on specificity hacks or !important . This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels of support, and the syntax.…
Container queries explainer & proposal
Media-queries allow an author to make style changes based on the overall viewport dimensions – but in many cases, authors would prefer styling modular components based on their context within a layout. My proposal builds on David Baron’s @container proposal , which works by applying size & layout containment to the queried elements. Any element with both size & layout containment can be queried…
Very Extremely Practical CSS Art
“What is one thing you learned about building websites this year?” I’ve always enjoyed the CSS art people create, but I’ve never ventured into it much myself. I’m familiar with many of the tricks involved, but still find it surprising every time: the way people are able to make such fluid and beautiful images out of little boxes. I always end up digging around in dev tools to see how things are…
An open CSS notebook
As I spend more of my time working on the CSS language, I wanted a place to take notes and explore new ideas in the open. The official conversation for CSS language development happens on The CSS Working Group GitHub issues – but it’s useful to have a more open notebook for developing new ideas before they are ready for Working Group discussion. My notebook is a public collection of markdown files…
Custom Property “Stacks"
CSS Custom Properties allow us to manage and control both cascade and inheritance in new ways. <code-pen @src=“https://codepen.io/miriamsuzanne/pen/GRpmOjr” @title=“Custom Property Cascades (sass function)” Reply via Email | Mastodon | Bluesky
Alcohol affects the frontal cortex
Sommer asked people to record themselves reading a poem from her collection, Backup Singers . I put together this video of the poem Alcohol affects the frontal cortex . My submission, and the full merged video collection I put out a call on social media asking for people to record themselves reading a poem from my poetry collection Backup Singers in order to create a crowdsourced version of the…
Embracing the Universal Web
“What about building websites has you interested this year?” There are constantly new features appearing in browsers – from subgrid to variable fonts to better developer tools. It’s a really great time to be re-thinking everything we know about design on the web. Responsive design has served us well over the years, but it’s still rooted in the limitations of the web from 2010. Ten years later,…
CSS most normalizer-est
Why waste your time on half-measures? Make your site THE MOST NORMALEST with this ULTIMATE CSS RESET . *, *::after, *::before { all : initial !important ; } Replace all (non-important) styles with (very important!) specification defaults. Reply via Email | Mastodon | Bluesky
Introducing Sass Modules
Sass recently launched a new module system. The new syntax will replace @import with @use and @forward – a big step forward for making Sass partials more readable, performant, and safe. Reply via Email | Mastodon | Bluesky
F*CSS
In the CSS naming-convention arms race to lowest specificity, I’ve decided to only use universal * selectors. I call it F*CSS . It’s a recursive backronym: the “F” is for F*CSS When asked “why?” you must say “for F*CSS sake” [1] * { box-sizing : border-box ; margin : 1em auto ; max-width : 40em ; padding : 0 ; } See the CodePen Demo » The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL…
Not clear to me, an installation
Art installation featuring a mix of pieces from Riding SideSaddle* , PROPHETIA VETITUM MUNDI , Gods on the Lam , and elsewhere. I also put together an original diptych for this show, commissioned by Kelcie Glick. Prints are available » Reply via Email | Mastodon | Bluesky