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 words, and put in new words?
(yes)
Over the last several years, I’ve leaned – or devolved? – into an approach that is not quite digital gardening but also not ‘posting’ in a blog format. It’s become almost a retroactive digital archive of shifting, cross-referenced, projects and events. A digital timeline of what happened along the way.
(I have found there are sometimes good reasons to break a promise)
Lately I’ve been feeling the evaporative nature of so many art projects. I work hard, I’m proud of the work, but once it’s done it becomes… one more markdown entry to file away with yaml metadata in this digital cabinet.
A semi-sorted mound of detritus – the results of living, trying things, changing my mind, and trying something else. A curriculum vitae, with too much color and detail.
(let me show you the lovely flier from my latest live performance and a single line documenting my first one)
That feeling has bled into my relationship with social media. I have a thought. I hit publish. There is no middle step. I hit the nearest publish button I can find. It’s on Twitter. A momentary live performance, and then…
(15 years on that site, and all I have to show for it are a load of lovely friends, some acquaintances who seem swell, a weirdly web-obsessed audience, and a few reply guys)
Somehow that all leads us here. An attempt at reviving something more alive inside the archive itself. Adding WebMentions, cleaning up the RSS feed, and writing more… short notes?
(have a thought, add a commit message, wait for Netlify to publish)
I’ve also been reviving and curating my Feedly account, to get back in the habit of following other personal sites. Maybe even responding to them here? Who knows, maybe there’s something to this idea of a slow social back-and-forth.
(this is a reply to
, but you wouldn’t know it yet)I’m attempting to develop a new habit, with this site at the center. Not to post more or less, but to think more carefully about what I want from posting in the first place. There’s no folder full of draft articles, or trello board of ideas, or resolution to post every day. Only a mental reminder that I’m already posting all the time. Sharing, replying, testing ideas, having a laugh.
Social posting. It’s a way of thinking out loud, and building relationships. I’m just not doing it here. Platforms like Twitter make the flow of conversation so easy. Too easy, sometimes. Other times, just right.
I don’t want to lose that. But what if some of those thoughts – some parts of the conversation – could also have a home (and a longer life) here? What if this site wasn’t only a log of past events, but a place where something can happen? Something social, even?
(syndication really is cool sometimes)
The latest post from Matthias is a lovely reminder urging us all to Just Put Stuff Out There – with a well-deserved shout-out to Chris Coyier’s regular short posts across a wide range of topics. Both Chris and Matthias have been a big inspiration in pushing me to try this.
(it would be super embarrassing if this short note spirals into a long one)
I already put stuff out there. The problem I have here is a little different. I tend towards the extremes. I will either write the most in-depth complete guide possible – or I will condense the entire thought into 240 characters and hit send.
When I do start to get precious – ahem – it is absolutely helpful to remember I can ‘just hit publish’. But right now it also feels helpful to take a second and ask: What happens after I publish?
(I spent hours writing this, and yes, I’m thoroughly embarrassed)
(an after-thought, a chaser, a postscript)
I spent part of my summer in 2012 at the Naropa Summer Writing Program. It’s a weird place, and I had a lovely time. Between classes, there were often large group gatherings in the auditorium.
Naropa keeps audio documentation of every event on campus – a tradition that goes back years. Somewhere along the way, it also became tradition to acknowledge that when speaking. Anyone who was handed a microphone would prefix their thought with the same strange phrase (using their own name). Here it is:
Miriam Suzanne, for the archive –
WebMentions
123 ‘post’ episodes
2022
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.
Miriam, for the Archive
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.
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 in my mentions.
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?
Pity+Fear (a travesty) @ Buntport Theater
What does it mean to be a person – to have a body, and live in it – to make choices, and change over time – to tell the truth?
CSS Cascade 5 (Layers) @ PostCSS Polyfill
Cascade & Inheritance Level 5 defines Cascade Layers – allowing authors to define explicit contained layers of specificity.
My Theatrical Delusions @ The Narrators (live)
Reflections on making theater, and my family reacting to it.
CSS State Toggles [WIP] @ Proposal & Explainer
Declarative controls for presentational state
A Complete Guide to CSS Cascade Layers @ CSS Tricks
Cascade layers are a new CSS feature that allows us to define explicit contained layers of specificity.
CSS Cascade 5 (Layers) @ Released in Browsers
Cascade & Inheritance Level 5 defines Cascade Layers – allowing authors to define explicit contained layers of specificity.
2021
CSS Containment 3 (Container Queries) @ Working Draft
CSS Containment Level 3 defines Container Queries and container-relative units – allowing authors to build more intrinsic responsive components without knowledge of the overall layout.
CSS Cascade 6 (Scope) @ Working Draft
Cascade & Inheritance Level 6 defines scoped styles – allowing authors to provide bounded ranges for selector-matching, and give priority to more ‘proximate’ scope origins.
Designcember Community Highlight @ web.dev
I was Interviewed by Rachel Andrew for the web.dev Designcember (and finally got around to posting a link here)
Developing the Future of the Internet @ Wix, Now What?
Miriam talks to Now What? about why the internet looks the way it does, why designers and developers need to collaborate and how the future of the web must be built around inclusivity and respect.
What’s the job of a “design engineer”? @ Pencil & Paper
We discuss the role of the ‘design engineer’ and what it means for workflows, collab with their product team, and the end-user experience.
What’s Happening in CSS & Sass @ Front End Nerdery
A podcast focusing on front end development but also covering a wide range of web development and design topics. We talked about CSS, Sass, and work being done in the W3C CSS Working Group.
CSS Cascade 6 (Scope) @ Editor’s Draft
Web Ecosystem Health Part VI @ Igalia Chats
Igalia’s Brian Kardell sits down to chat with Miriam and Rachel Andrew about who works on standards, and who pays for that work.
CSS Container Queries, Layers, Scoping and More @ Syntax.fm
In this episode of Syntax, Scott and Wes talk with Miriam about all things CSS – container queries, layers, scoping, and more!
CSS State Toggles [WIP] @ Unofficial Draft
CSSWG, Container Queries, Scope, and Layers @ Word Wrap Show
I talk with Claire and Steph about my journey into webdev and onto the CSSWG, what I find frustrating about how others use CSS, and the three specs I’m working on.
Support (Not) Unknown @ OddBird.net
Working on a new CSS feature like Container Queries, one of the most important considerations is to ensure a “migration path” – a way for developers to start integrating the new code, without breaking their sites on legacy browsers.
Framed | Born To Choose This Way @ The Narrators (podcast)
A reflection on change, desire, choice, and the stories we tell about ourselves
Container Queries & the CSSWG @ The F-Word
I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.
What Is The Future Of CSS? @ Smashing Magazine
Starting a new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to Miriam to find out.
Container Queries Explainer & Proposal @ CSSWG
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.
CSS Containment 3 (Container Queries) @ Editor’s Draft
CSS Cascade 5 (Layers) @ Working Draft
CSS Cascade 5 (Layers) @ Explainer
2020
CSS Containment 3 (Container Queries) @ Proposal & Explainer
CSS Cascade 6 (Scope) @ Proposal & Explainer
Very Extremely Practical CSS Art @ CSS Tricks
“What is one thing you learned about building websites this year?”
CSS, Sass, and Playwriting @ Enjoy The Vue
I join Ari, Ben, and Tessa to talk about getting into CSS from other languages, the absurdly massive problem CSS is designed to solve, and the mental model behind the language.
Open CSS Notebook @ css.oddbird.net
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.
CSS Containment 3 (Container Queries) @ Public Notes
CSS Cascade 5 (Layers) @ Public Notes
CSS Cascade 6 (Scope) @ Public Notes
CSS Cascade 5 (Layers) @ Editor’s Draft
Design Engineering Handbook @ inVision
Learn how design engineering brings together form and function.
Custom Property “Stacks" @ CSS Tricks
CSS Custom Properties allow us to manage and control both cascade and inheritance in new ways.
Design Systems AMA @ Jina Anne
Jina and I answer questions about CSS, Sass, Design Systems, and more!
Authoring the future of CSS @ Party Corgi
A spinoff of the Party Corgi Network discord. I chat with Chris Biscardi about The CSS Working Group, open-source projects, art, and music.
Fallout
I wrote this at the start of the Iraq war (2003), and later made the short film. It’s been on my mind again during COVID-19 isolation.
Alcohol affects the frontal cortex @ Sommer Browning
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.
2019
Embracing the Universal Web @ CSS Tricks
“What about building websites has you interested this year?”
Selector Support Queries @ Mozilla Developer
Firefox 69 was the first to implement selector feature queries, but other browsers are following suit. I’ll show you how it works, and how to start using this new feature query right away.
Overflow-Wrap in CSS @ Mozilla Developer
Horizontal text overflow has always been difficult to manage on the web. The default visible overflow is designed to make sure content remains accessible no matter the size of a containing box, but it’s not our only option.
CSS Most Normalizer-est
Why waste your time on half-measures? Make your site THE MOST NORMALEST with this ULTIMATE CSS RESET.
Scroll Snap in CSS @ Mozilla Developer
When we’re scrolling down a page, or through a gallery of images, snap-targets can help guide us from one section or image to the next. In the past, developers have used JavaScript to hijack scrolling, but now we can manage scroll alignment directly in CSS with only a few lines of code.
CSS Cascade 5 (Layers) @ Initial Proposal
On Sass & CSS @ Shop Talk Show
I drop by the show to talk about Sass in 2019, design tokens, Oddbird, unused CSS, new CSS properties, and Dave & Chris’ explanation of revert.
Inner & Outer Values of the Display Property @ Mozilla Developer
The display
property has been in CSS from the beginning,
handling everything from block
and inline
boxes
to list-items
and full layout systems like flexbox
or grid
.
Now the display
syntax is getting an upgrade
to match it’s multiple uses.
Why isn’t this CSS doing anything? @ Mozilla Developer
There are a number of property & value combinations that can lead to CSS being inactive, and now Firefox will tell you why. Open the developer tools, and look for the greyed-out property with an info-box on hover.
Laying out Forms using Subgrid @ Mozilla Developer
It’s a common pattern to align form labels and inputs in grid-like layout. I’ll show you how to do it quickly using CSS subgrid, with several quick fallbacks.
Subgrid for Better Card Layouts @ Mozilla Developer
Card layouts are popular on the web, rows and columns of boxes with similar content. CSS grids can help align those cards, but it’s still be hard to line-up content inside the cards – headers and footers that might need more or less room.
Faster Layouts with CSS Grid @ Mozilla Developer
For years, we’ve struggled to build resilient layouts on the web, but CSS Grid promises to change all that – and you can start using it now, with only a few properties and basic concepts.
CSS Revert @ Mozilla Developer
I’ve often used initial
and unset
in my CSS –
global keywords that can be applied to any property.
The difference is small, but important:
unset
allows inheritance,
while initial
does not.
But then Firefox implemented revert
and I was confused –
how is this one different from the others?!
Introducing Sass Modules @ CSS Tricks
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.
Why is CSS so Weird? @ Mozilla Developer
Love it or hate it, CSS is weird: not quite markup, not quite programming in the imperative sense, and nothing like the design programs we use for print. How did we get here?
Styling Lists in CSS @ Mozilla Developer
When you create lists in HTML, browsers add bullet-points or numbers we call list markers. Now CSS gives us the tools to style those list markers, and even create our own!
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.
Design Systems & CSS @ Views on Vue
We start by talking about design systems and design tooling – how they differ, and the problems they solve.
CSS Custom Properties @ Smashing Magazine
Pushing past the “variable” metaphor, CSS Custom Properties can provide new ways to balance context and isolation in our patterns and components.
Framed | Born To Choose This Way @ The Narrators (live)
A reflection on change, desire, choice, and the stories we tell about ourselves
Has CSS finally come of age? @ Creative Bloq
Steve Jenkins interviews me about the state of CSS, and what’s coming next for the language – from Intrinsic Design to Dynamic CSS.
On Dynamic CSS @ Thunder Nerds
Thunder Nerds interview me before her talk at VueConf US 2019.
2018
Fonts & more @ Views on Vue
The panel and the guest talk about grid systems, fonts, and more!
Ethics, ES6 in Practice, and Dynamic CSS @ TalkScript
On Episode 18, the TalkScript team continues the live-ish at JSConfUS podcast series with guests Myles Borins, Tim Doherty, and Miriam Suzanne. Listen in!
Rejecting Maleness @ Journal of Mennonite Writing
The Journal of Mennonite Writing asked me to submit for their queer issue. I don’t identify as Mennonite, but I did grow up in the church, so I asked my friends what to write about. They suggested the common question: In a world without rigid gender roles, would anyone need to be trans?
Chosen Family (Thank You)
Yesterday, I shared an article about my impending surgery, and a request for help – both social and financial – as I go through this. I was embarrassed to ask, and not sure what to expect, but your response has been swift and overwhelming. I can’t thank you enough, but I’ll keep trying.
Mia’s Medical Upgrade
Denver Health has started offering vaginoplasty in addition to their other trans medical services. While I’ve been on the waitlist for various surgeons around the country, Denver Health called me this week to give me a date: September 10, less than two months away.
Essential Knowledge: The Book @ t-h-e-b-o-o-k.com
100 Colorado Creatives 4.0 @ Westword
2017
18 designers predict UI/UX trends for 2018 @ Figma Design
Sex, Love, & Romance @ PS I Love You
“I don’t have many guy friends, but my guitarist is one. Parting, I lean in for the cheek-kiss but he plants a good one right on my lips.”
Crossing Over | Teaching You To See Me @ The Narrators (live)
I used exerpts from Body & Gender Fragments to talk about the contradictions of transition – a sort of “crossing over” without going anywhere.
More CSS Charts, with Grid & Custom Properties @ CSS Tricks
Inspired by Robin Rendle, I demonstrate some of my early experiments combining CSS Grids and custom properties to create dynamic layouts and data-visualizations.
(Mis)Gender
At the family vacation in Moab, everyone is doing their best. It’s not enough, and my day is peppered with the wrong name and pronouns. I hide in my room through dinner so they won’t see me crying.
Shifting Nouns @ Twined Fragments
“I’ve seen myself in the mirror. I find me… disorienting. What do they see that I don’t? Why aren’t they laughing at me?”
Mothers, Fathers, Husbands, Wives @ Twined Fragments
“Mother finds me at her wardrobe, in her pumps and pearls. What are you doing? Being a mommy. Are you, then? She clips on the earrings (they pinch!), reaches for her lipstick.”
Stop Being Productive @ SuperYesMore
A reflection on the nature and value of productivity for the SuperYesMore series: The Human in the Machine.
Fun with Viewport Units @ CSS Tricks
Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them. I thought it would be fun to review the basics, and then round-up some of my favorite use-cases.
Body & Gender Fragments
I wasn’t born in the wrong body. I was born, a body. Without my body, I don’t exist.
Getting Started with CSS Grid @ CSS Tricks
It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it’s becoming something we should learning.
Some Kind of Resistance Tour @ Open Grounds | Charlottesville, VA
It’s been a month since our country pseudo-elected a bigoted blow-hard for president. I’m heading to DC to protest his inauguration in January, visit friends, and go on a mixed-media resistance tour…
Some Kind of Resistance Tour @ Women’s March | Washington, DC
America Heard: Transitions
My friend Maureen Maloney asked to document my reaction to the 2016 election, as part of the America Heard film series.
Some Kind of Resistance Tour @ Small Rain | Fredrick, MD
Some Kind of Resistance Tour @ House Show | Silver Spring, MD
Some Kind of Resistance Tour @ House Show | Baltimore, MD
Some Kind of Resistance Tour @ Wooden Shoe Books | Philadelphia, PA
Some Kind of Resistance Tour @ in your ear | Washington, DC
Some Kind of Resistance Tour @ The Operating System | Brooklyn, NY
Justice [Under Construction]
I’m still reeling from this year of insults, a traumatizing campaign turned traumatic election. I’m not sad about a contest lost, but what those results mean for real people around me. 2016 is over, but 2017 is going to be even harder.
2016
Some Clarifications on Trans Language
There’s a lot of language that gets thrown around, but much of it comes loaded with over-simplified baggage and misconceptions. Here are a few that have been on my mind – from gender identity to biological sex, transition, passing, and visibility.
Some Kind of Resistance Tour
It’s been a month since our country pseudo-elected a bigoted blow-hard for president. I’m heading to DC to protest his inauguration in January, visit friends, and go on a mixed-media resistance tour…
Loops in CSS Preprocessors @ CSS Tricks
No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your patterns more readable and maintainable, baking them directly into your code. We’ll take a look at what loops can do, and how to use them in the major CSS preprocessors.
*Beyond Pixels Profile @ Net Magazine
Miriam Suzanne creates experimental experiences with her band and her fellow developers.
An Interview with Miriam Suzanne @ CSS Tricks
Chris Coyier interviews Miriam when she joins the CSS Tricks team as a Staff Writer. We talk about gettting started in the industry, name confusion, fouding OddBird, building Susy, and more.
Versioning Show, Episode 8 @ SitePoint
In this episode of the Versioning Show, Tim and David are joined by Miriam Suzanne, best known for Susy, a responsive layout toolkit for Sass. They discuss going from being a lurker to finding your voice, the importance of writing about what you’re learning, stumbling into fame, approaching new projects, and unit testing in Sass.
Sass Toolkits, Live Q&A @ SitePoint
Miriam: A How-To Guide
There are some questions that come up again and again if you are trans. A few of those questions are terrible, but most of them are well-intentioned. I’m lucky to have a supportive community around me, so I thought I’d write down my most common answers to help ease your stress about getting it right, and ease my stress about answering the same questions over and over.
2015
Ideas, Process, Obsolescence, and the Iterative @ Media Archeology Blog
This interview serves as a follow up to my performance of The Obsolete Book in a Post-Obsolete World as Represented by a Post-Obsolete Book About Dance at the Media Archeology Lab.
On Riding SideSaddle* @ Michigan Quarterly Review
An interview with the insightful Ryo Yamaguchi at Michigan Quarterly Review.
2014
2013
2012
Collaboration & Queer Art @ Boulder Writers’ Workshop
interview with Richard Wall of the Boulder Writers’ Workshop
Susy 1.0 Release
Sass Striped Backgrounds
2010
Blood & Bones
2005
Fallout @ shortfilmfest05
I wrote this at the start of the Iraq war (2003), and later made the short film. It’s been on my mind again during COVID-19 isolation.