Miriam Suzanne

Butter bells, fresh from the kiln

2026-05-29T22:37:52Z

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

Poetic CSS Course, Early Bird Launch

2026-07-21T00:00:00Z

Understand CSS as a system – so you can write, review, and maintain web styles with confidence on a timeline and under budget.

Reply via Email | Mastodon | Bluesky

There's no point resisting

2026-06-16T22:05:21Z

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 is not going away” (whatever that means) with “there’s no point resisting”

It seems to me like the reverse is true. The longer something harmful has-been or will-be around, the more resistance is essential in limiting that harm.

In fact, if you are interested in keeping something around despite the well-documented harms – maybe you ought to be right out front in doing that resistance work.

My job as a designer/developer is not to hype new tech, but to carefully protect my communities against it’s mis-use.

Reply via Email | Mastodon | Bluesky

I had to look it up

2026-05-23T00:00:00Z

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 commenter truly understands Platonic Realism.

Reply via Email | Mastodon | Bluesky

I've been making pots

2025-06-22T00:00:00Z

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 out of a firing.

The first several months of 2025 were dedicated practice – working my way through online courses from (mostly) Mea Rhee. I’ve also been taking assignments from friends – planters and ramen bowls and a tissue box cover for our new home, shallow dishes for Lars, a gaiwan tea set for Gwyn, a trinket tray for Rae…

A few of the commissioned pieces for friends

I have a lot more that I’m excited to learn, but I’m also proud of how far I’ve come. This month I even started teaching beginner wheel throwing classes at Kinship Studio. I’ll be teaching the Tuesday class again in July, and registration is still open!

Since teaching covers my studio membership, I’m no longer spending money to make my pottery. First goal achieved! The next goal is to sell some pottery, then see if I can sell it consistently. I’m starting to pitch local shops, putting together a web store, trading pottery for hair cuts, and this weekend I participated in my first market!

Some of the pieces that I made for this market

I’m aware of the dangers that come with turning a hobby into a hustle, but right now I’m interested in anything that helps me spend more time in the studio. I’m already back to work on some commissions I’ve promised to local shops and also to family.

A few of the new pieces currently under construction…

At some point I also need to find time for getting this website in a better state – ready to display (and sell) my work more easily.

If you’re interested in updates on my pottery or other creations, sign up for my new ‘Mia Culpa’ newsletter. It will be rarely used, but give you first access when I do have something new to show, or new work available in my online store.

Reply via Email | Mastodon | Bluesky

Laser-cut pottery throwing gauge

2025-05-16T00:00:00Z

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:

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" plywood, MDF, or acrylic
<1/8" flexible rubber or plastic
1/4" bolts & nuts (bat pins will work!)

This requires a laser cutter, or some other way of cutting out the parts from a template. Maybe you’re good with a jig saw? Once you have the parts, you can fit and bolt them together. There’s no carving or gluing required.

I made mine using whatever I could find in the scrap pile at my local maker space – a combination of 1/4" MDF, 1/8" plywood, 1/8" acrylic, and flexible magnetic sheeting for the pointers. It’s assembled entirely with bat pins and wing nuts.

None of the width measurements need to be precise, as long as they are consistent, so it should also be fine to do rough metric conversions as needed.

The frame

The frame is ideally made from thicker, more structural plywood. I cut three rectangles for the base, and slot two uprights through them in order to match the stepped foot design. I had to do some minimal sanding of the slots, but a tight fit is good. This frame is quick to assemble and disassemble, and the sliding-bolts for the pointer arms will provide additional structure.

The bottom base piece isn’t ‘held on’ by anything besides friction. That’s worked fine for me, but you can also fasten the layers together if you prefer. Glue, nails, screws, bolts – whatever you like. That’s optional.

These photos are from my first draft. More recent versions include a nut and bolt at the back of each arm to keep the layers aligned.

The pointer arms

Each arm consists of a pointer and core sandwiched between outer plates. Darren recommends making the core from acrylic, and that’s working well for me. The essential thing is that the core must be slightly thicker material than the pointer. If there’s not enough space, it might be hard to adjust. But if there’s too much space, the pointer will flop around.

The pointer should be cut from something flexible, so it doesn’t damage your work. Rubber seems ideal, but I used scraps of magnetic sheeting, because I found some in the scrap pile. That’s been working fine for me.

Hardware

Each arm takes 3 bolt/nut pairs – one as an adjustable mounting point attaching the arm to the frame, one as a pivot for the pointer, and a final one at the back for stability. The mounting bolt should be over an inch long, with a wing nut for easy adjustments. The other two can be shorter, and don’t require quick access.

All these connection points are designed for 1/4" bolts. Standard bat pins (in the US) are 1/4 20 socket-head screws with wing nuts. You can get them from most pottery supplier, or any old hardware store. I designed it specifically so that these could be interchangeable with tools & equipment already in the studio, but any 1/4" bolts will work.

If you have different bat pins or bolts that you’d like to use, you might need to adjust the drawings. All the bolt holes and slots are 0.26" in my designs.

Reply via Email | Mastodon | Bluesky

Tech continues to be political

2025-02-12T00:00:00Z

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 unstoppable crimes, or just experience extended and apparently unescapable moral injury.

—Erin Kissane, Against Entropy

TL;DR – This is a post about billionaires who love eugenics^[1], support a pro-eugenics government, and sell us a product that they promise will help their longterm eugenic goals. But really this is a post about how I feel, when colleagues treat that product as though it might have merit, if we just give it a chance.

For some reason, I find that opinion to be in bad taste. I know I shouldn’t yuck your yum, or whatever, but I don’t like eugenics.

Reader, it fucks me up.

Chill out, it’s just a tool

For years we’ve been saying that tech is political, and that tech is not neutral. But I don’t know if we’re communicating the full nuance of that adage. It’s not just a warning about bad Apples (or Palantirs) who might use code to dabble in evil extracurriculars. More important to me is the understanding that technologies often carry an ideology inside them:

It is something of an amusing curiosity that some AI models were perplexed by a giraffe without spots. But it’s these same tools and paradigms that enshrine normativity of all kinds, “sanding away the unusual.”

—Ben Myers, I’m a Spotless Giraffe

Tools tend to exist between us and a goal, and the shape of the tool tells us something about how to proceed, and what outcomes are desirable. Tech enacts and shapes our world, our lives, and our politics.

Guns don’t kill people, guns are designed to help people kill people.

Maybe we should consider the beliefs and assumptions that have been built into a technology before we embrace it? But we often prefer to treat each new toy as as an abstract and unmotivated opportunity. If only the good people like ourselves would get involved early, we can surely teach everyone else to use it ethically!

Every tool is a hammer, with context lost to history – and it’s up to us to determine individually what looks like a nail. There is no system, no society, no marketing department, no regulation. Each of us is an island of isolated ~~trolly conductors~~ hammer enthusiasts.

Once we’ve established some useful norms – a ‘best practice’ or two – I can’t imagine anyone [crowd cheers for CEO giving sieg heil salute].

Meanwhile, back at the hammer factory…

The AI projects currently mid-hype are being developed and sold by billionaires and VCs with companies explicitly pursuing surveillance, exploitation, and weaponry. They fired their ethics teams at the start of the cycle, and diverted our attention to a long-term sci-fi narrative about the coming age of machines – a “General Intelligence” that will soon “surpasses” human ability.

Be it god or demon, only the high priests of venture capital can summon and tame such a powerful being for the good of humanity! It will only cost you all your labor (past and present), a reversal on climate policy, and a rather large fortune.

What does that mean? Hand-waving eugenics. We have no way to measure intelligence, no idea what it means to surpass humans, and no reason to believe that ‘intelligence’ might be exponential. Unless you rely on debunked race science, which many of these CEOs seem obsessed with. Now they are eager to jump on board an authoritarian movement that wants to exterminate trans and disabled people, fire black people, and deport all my immigrant friends and colleagues.

It’s wild to see major tech companies throwing out all pretense – giddy to abandon previous commitments around diversity, equity, inclusion, or accessibility. Run free, little mega-corps! Be the evil you’ve always dreamed for the world!

Surely this has nothing to do with their products, though.

But her use-cases

I know that ‘AI’ broadly has a long history, with ‘language models’ and ‘neural nets’ developing real use-cases in science and other fields. I’m not new here. But this background level of validity-by-association is used to prop up absolute garbage. The chatSlop we’re drowning in now is clearly designed and deployed for a different purpose.

Haven’t you heard? They’re building a digital god who will lead us to salvation, uploaded into the virgo supercluster where we can expand the light of exponential profit throughout the cosmos! This is the actual narrative of several AI CEOs, despite being easy to dismiss as hyperbolic nonsense. Why won’t I focus on the actual use-cases?

Why won’t you focus on the actual documented harms? Somehow there is always room for people to dismiss concerns as “overblown and unfounded” past the first attempted coup, and well into an authoritarian power grab.

But the bigger issue is that they don’t have to be successful to be dangerous. Because along the way, these companies get to steal our work and sell it back to us, lower our wages, de-skill our field, bury us in slop, and mire us in algorithmic bureaucracy. If the long-term space god thing doesn’t work out, at least they can make a profit in the short-term.

The beliefs of these CEOs aren’t incidental to the AI product they’re selling us. These are not tools designed for us to benefit from, but tools designed to exploit us. To poison our access to jobs, and our access to information at the same time.

I said on social media that people believe what chatbots tell them, and I was laughed at. No one would trust a chatbot, silly! That same day, several different friends and colleagues quoted the output of an ‘AI’ to me in unrelated situations, as though quoting reliable facts.

So now a select few companies run by billionaires control much of the information that people see – “summarized” without sources. Meanwhile, there’s an oligarchy taking power in the US. Meanwhile, Grok’s entire purpose is to be ‘anti-woke’ and anti-trans, ChatGPT’s political views are shifting right, and Anthropic is partnering with Palantir.

Seems chill. I bet ‘agents’ are cool.

Wouldn’t want to eat a shrimp cocktail in the rain.

Tech workers seem to like tech actually

There’s a meme that goes around regularly, about the attitudes of tech enthusiasts vs tech workers…

Tech enthusiasts: My entire house is smart.

Tech workers: The only piece of technology in my house is a printer and I keep a gun next to it so I can shoot it if it makes a noise I don’t recognize.

—Pranay Pathole

I can relate to that sentiment, but many in our community seem unfazed or even excited about ‘AI’ and ‘agents’ and ‘codegen’ and all the rest of it. As far as I can tell, most of our industry is still on board with the project, even while protesting the changes in corporate politics, or occasionally complaining about the most obvious over-use. There are certainly a number of people raising alarms or expressing frustration, but we’re often dismissed as uninformed.

Based on every conference I’ve attended over the last year, I can absolutely say we’re a fringe minority. And it’s wearing me out. I don’t know how to participate in a community that so eagerly brushes aside the active and intentional/foundational harms of a technology. In return for what? Faster copypasta? Automation tools being rebranded as an “agentic” web? Assurance that we won’t be left behind?

This is your opportunity to get in at the ground floor!

I don’t know how to attend conferences full of gushing talks about the tools that were designed to negate me. That feels so absurd to say. I don’t have any interest in trying to reverse-engineer use-cases for it, or improve the flaws to make it “better”, or help sell it by bending it to new uses.

When eugenics-obsessed billionaires try to sell me a new toy, I don’t ask how many keystrokes it will save me at work. It’s impossible for me to discuss the utility of a thing when I fundamentally disagree with the purpose of it.

I don’t care how well their ‘AI’ works – or if you found a fancy fun use-case. It fucks me up watching peers treat this tech from people who want to eradicate me as a future worth considering. I don’t want any of this.

I don’t need an agent, I want to maintain my own agency.

I don’t know

I used to see the AI bubble and trans rights as distinct issues. I no longer do. The fascist movement in tech has truly metastasized, as evidenced by Elon Musk’s personal coup, his endless supply of techbro supporters, tech companies’ eagerness to axe DEI programs once Trump gave them an excuse, erasure of queer lives from tech products, etc.

To the extent that AI marketing is an attempt to enclose and commodify culture, and thus to concentrate political power, I see it as a kind of fascism.

—Cassandra Granade

I know the anti-DEI(A) sea-change in mega-corp C-suites doesn’t reflect the desires of my friends and colleagues now working for (surprise!) AI arms dealers, but just trying to do their best for open web standards. I don’t know what I would do in that situation. Labor and capital are often at odds. I imagine we all deserve a tech union. But I worry about how few people seem to see the need for it.

Every time I log on I feel like I’m being gaslit – asked to train my shitty replacement, and then step aside. The future is not women, I’m learning now. You can be sued in the US for intentionally hiring women. The future is actually inhuman word synthesizers.

Oh no, I was tricked by the genders and their sneaky ideology! Now I’m a crime! Haha, oops!

Work is already harder to find, and companies mostly want help slopping more slop into the slop machine. Because it will help users, you ask? Of course not! Because everyone now has slop on-tap, and needs to turn that flow of garbage into a cash-flow!

~~That’s the trouble with tribbles.~~ Money, gain, profit!

What are we doing here? What am I doing here? How do I stay engaged in this field, and keep paying my bills, without feeling like a constant outsider – about to be dismissed from my career? I know I’m not the only one feeling this way, but the layering of threats and betrayals add up. It feels so isolating.

It’s probably good to get this clarity

“Tech” was always a vague and hand-waving field – a way to side-step regulations while starting an unlicensed taxi company or hotel chain. That was never my interest.

But I got curious about the web, a weird little project built for sharing research between scientists. And I still think this web could be pretty cool, actually, if it wasn’t trapped in the clutches of big tech. If we can focus on the bits that make it special – the bits that make it unwieldy for capitalism:

Large companies find HTML & CSS frustrating “at scale” because the web is a fundamentally anti-capitalist mashup art experiment, designed to give consumers all the power.

—Me, before all this

What are we going to build now – those of us who still care about diversity, equity, inclusion, accessibility, and giving consumers the power? Can we still put our HTML & CSS to good use? Can we get back to building a web where people have agency instead of inhuman agents?

Where are you looking to put your energy next?

Addendum, 2025-02-16

I’ve been spending a lot of time in the pottery studio instead of keeping up with my RSS feed – so I wasn’t aware of the most recent AI discourse. Jeremy Keith does a great job putting my thoughts in context of a larger blogging conversation. I recommend reading that summary, and the excellent linked posts by Baldur Bjarnason and Michelle Barker.

I find it particularly troubling the way we talk about current harms of current technology as temporary and therefor insignificant – as though something being “solvable” means that it’s basically solved already, and we shouldn’t worry about it. The logic seems so obviously backwards to me. Solve the problems first, if they are so easily solvable.

This is often used to dismiss the current energy use of LLMs, but also a common rhetorical trick of CEOs as they lay off their workforce. Don’t worry, your current unemployment could someday be solved with a universal basic income. Please ignore the harms of capitalism as we weaponize it against you – because socialism could eventually make it better!

And yet (surprise!) when the tech titans take over government institutions, they don’t seem to have much interest for improving social safety nets. It’s almost (almost) like their goal is to weaken the bargaining power of labor, and they don’t consider this a flaw in the first place.

In our marketing-department imagined future of a new technology all harms will somehow disappear (details TBD), but the potential benefits are endless and extraordinary. We could cure cancer! But are any of the AI companies trying to cure cancer, as a primary goal of their work? Well, no…

Step 2 may be actively harmful, and step 3 might be perpetually absent, but the profit described by step 4 is undeniable. Critics always lack the proper imagination.

Hashtag Not All Billionaires, or whatever. I chose this language, because I’m feeling vulnerable and upset – and because it reflects what I see when I look at the longtermist and pro-natalist and ultra-utilitarian comments and actions of many AI-backers, and their ties to rationalist (lol) forums. I’m not the first one to suggest that there’s a hint of eugenics in the way these LLM-as-AI-enthusiasts talk about their techno-utopian dreams.

I understand it is not always productive to rely on the strongest and least nuanced terms available. I imagine some of the billionaires involved are primarily in it for the money, actually. But that seems like distinction with very little difference to me, especially as it relates to how I feel about this moment. Even without citing eugenics-per-se, I remain opposed to their project, and the documented exploitations at every step.

Anyway, this is a journal entry, not an explainer on billionaire ideologies. ↩︎

Reply via Email | Mastodon | Bluesky

Aggregating my distributed self

2024-09-22T00:00:00Z

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 in my way. Instead of minimal renovation, I got just far enough to live with it and then started a brand new Eleventy repo.

The plan was to prototype over there, and bring back well-formed solutions. To echo Dave Rupert, prototyping is useful. It’s easier to play with new ideas when you’re not carrying a decade of content and old code along with you.

But prototyping evolved into what I would call tinkering (complimentary). Maybe I mean procrastinating (also complimentary), but it’s a wandering process that also helps me better understand what I want from a website. I might not make visible progress over two years, but I start to form a point of view:

I want minimal site furniture, and a focus on only what’s essential (usually text). What is the least navigation required, and can I move it out of the way? How simple can I keep the layout?
I want maximum style customization. Not just a theme picker, but as many user controls and interactions as possible – from useful to playful to absurd.
I want content maintenance to feel easy. Right now it feels redundant.

Keeping things easy is always where things get complicated. And it brings me back to where my redesign started – a desire to clarify the information architecture. Not only for visitors, but for myself.

The objects of my web desire (again)

I’m still thinking about roughly the same content types I’ve discussed before, though maybe the boundaries have become slightly more clear.

First, there are posts. Short or long, posts always have a date & time attached. They are active, part of a feed, and might appear in an RSS reader.

Then there are projects, maybe – the things I’m doing. But that’s too broad. Let’s break it down:

Sometimes I do events where I speak, or teach a workshop, or perform. Events happen at a time and place.
Sometimes I create artifacts like a book or an album, a website, or specification. Artifacts often have a home URL. They might have a launch date, but they are not date-specific.
Some of my projects are other channels with their own feeds, their own events and artifacts.
Those channels are often maintained by an organization that I work with long-term. A band, a web agency, a performance company, etc.

These boundaries aren’t always clean. A post that remains relevant could be considered an artifact. Events can generate artifacts, and vice versa. An entire organization might exist to curate a single channel.

But all these projects tend to exist elsewhere. Adding them to my website, even in advance, is an archival act – documenting that the event, artifact, channel, or organization exists off-site.

What belongs in the feed?

Posts are simple enough to simplify. The web is littered with what’s on your mind text-areas. Hit publish, and the date becomes not just a sorting mechanism, but an ID, a URL slug, and a placeholder title. My layout should allow for more, but not rely on anything beyond a bit of text.

As part of my desire to prioritize page content over site furniture, I’m also leaning into my ‘cold open’ design – with a small content block that comes before the title & credits roll. For a short post, would I put the entire contents up-front? I think so.

Right now, I’m re-purposing a summary field in my YAML front-matter to split out that pre-title content. But that doesn’t feel accurate to the purpose. Maybe I can use an HTML comment as the divider? Then it all goes cleanly into an RSS feed, but I can splice a header in for my own purposes.

I also want to think about what happens to posts over time. Some remain relevant, becoming a sort of artifact. Do I need a way to promote them? Other posts becomes less relevant, even obsolete. Maybe they can be unlisted, so the URL remains (cooly) in place but not linked from anywhere.

What belongs in the archive?

It’s possible to have artifacts that originate here, but most of the ‘archive’ is aggregated from off-site activity – often with a more ‘canonical’ online home. Conference talks are announced on the conference website, theater productions on the Grapefruit Lab site, albums on the Teacup Gorilla site, specs live on the W3C servers, even my novel has it’s own URL.

At their most basic, these things can all be represented by a name and URL – with dates that are more or less essential depending on the type of project.

So the eternal question is: how much do I duplicate in my own archive?

At one extreme, I can re-post the entire contents – articles, videos, music embeds, event details – with canonical metadata pointing to the original. Each archival item gets a document in my repo, and a URL on here in the archive, in addition to any off-site links. That’s where things start to feel like busy work, redundant.
On the other extreme, the archives can be simple data structures slotted into the Eleventy ‘data cascade’ wherever I see fit.

In either case, there’s a question of detail. Do I link to channels and organizations as a whole and leave it at that, or do I link to each article I post on the OddBird blog, each Winging It live stream, each spec and explainer for the CSS Working Group, each album, conference, and production?

All those things can be found on other websites. The purpose of having them here is only to aggregate my sprawling work in a single location.

Is that useful? For me or for you? Is it interesting, apart from any utility?

A first pass

At a high level, I’m thinking:

List all the items in yaml data, with links off site
Group the items onto index pages by channel when useful
Don’t duplicate the details, that’s what links are for

In practice, that means:

Organizations and channels get their own pages
Those pages act as tag-list pages for related posts, and home for relevant offsite links
Artifacts & events start as data/links, and only get promoted to page status if a tag page would be useful to group multiple related items

Reply via Email | Mastodon | Bluesky

A web component for CodePen embeds?

2024-09-09T00:00:00Z

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 href="https://codepen.io/miriamsuzanne/pen/BEvjbm">
    CSS-only 'mixin'
  </a>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

There are other optional attributes, but those are the essentials in my experience. You can put anything you want inside the paragraph, since the entire element is getting replaced.

To my eye, that’s a custom element waiting to happen. And I had a few small adjustments in mind:

The pen data-slug-hash could be extracted from the link
If we provide the height in CSS, we can use it to avoid layout shift?

I’m not sure it’s enough to make this worthwhile, but it was enough for me to create a new pen and start playing around.

With the first draft, my fancy new embed looks like this:

<embed-pen style="height: 600px">
  CodePen Demo:
  <a href="https://codepen.io/miriamsuzanne/pen/BEvjbm">
    CSS-only 'mixin'
  </a>
</embed-pen>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Ok, so not much has changed. But it works! Here it is, doing the thing:

CodePen Demo: An embed-pen web web component

If I was to flesh this out, I think:

The custom element should stick around, instead of becoming div.cp_embed_wrapper
The embed/ei.js logic should be part of the element definition, not a separate script

Along the way, I learned that the height attribute is only allowed on specific elements, which is why I had to use the style attribute instead. One of those elements is the iframe.

Looking closer, the CodePen Embed docs demonstrate using an iframe from the start, if you need to avoid JS:

<iframe src="https://codepen.io/miriamsuzanne/embed/BEvjbm" height="600" width="100%" loading="lazy"></iframe>

Well that sure gets right to the point. Maybe that’s all I need? I don’t feel like I’m losing essential behavior, here. All the parameters are still available via the URL.

Reply via Email | Mastodon | Bluesky

We don't need a boss, we need a process

2024-08-08T00:00:00Z

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 when good developers sit around a table. Like anything else, collaborative art and design are skills that people learn and practice. We have to exercise new muscles, not usually covered by a developer bootcamp or design school. The process can have a lot in common with agile approaches, but it’s a different set of skills from collaborating on a codebase.

Skills we can learn. But skills we won’t have unless we study and practice.

Or we can skip all that and get one person to make all the decisions. That’s an option, but it’s not the only way. It’s just the way most of us were taught.

I’m not saying this theoretically. Not all theaters or bands are collaborative, but many are – and there are long traditions around ‘devised’ or ‘ensemble’ theater in particular. Learning to write plays or act in them does not prepare you to devise with an ensemble, but there are many people who do study, learn, practice, document and teach those skills.

(In fact, it’s what I’ve spent most of my life doing, with occasional CSS distractions)

But I suppose Robin is right that even good collaboration generally ain’t a democracy. It’s more involved and messy than voting, or tallying a majority opinion. It requiring deep engagement, and shared ownership of a vision. Let’s call it anarchist, maybe, with an emphasis on mutual aid?

Creative collaboration requires effort, argument, trust, and play. The ability to fight for an idea, and then let it go. To be open, and then decisive. Knowing when to work together, and when to work apart. Cycles of action, reaction, reflection, etc.

Developers have excellent tools for that last bit – working together, while apart. Many artists would benefit from something like GitHub. These skills are not entirely unrelated. But they’re also not directly equivalent.

I don’t remember the source, but at some point I learned that ‘brainstorming’ tends to fail because the strength of collaboration comes from pushing back. Not off-hand rejection, shooting ideas down – but honing our ideas by articulating what makes them work or fail.

What we like about a dictator is that they have a vision, and set the process, and take the responsibility to be decisive when necessary. But it’s not impossible for us to do that together, if we learn how to hold a strong vision collectively.

We must become a team, united against our work. Our job, together, is to hone and curate that work towards the exclusive vision through continuous questioning and articulation.

We define a vision by the choices we make, and we clarify that vision by the choices we reject.

(Now I want to re-read Anne Bogart’s A Director Prepares, and The Viewpoints Book)

Reply via Email | Mastodon | Bluesky

Eleventy buckets & cascade layers

2024-07-06T00:00:00Z

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 experiment. What happens when I let go of all the tools that I’m used to, and rely entirely on the web platform?

Along the way, I’m trying to find the best pattern for organizing my CSS into Cascade Layers. Layering can be done within a file, using the @layer <name> { … } rule block, or it can be done with a layer(<name>) function on-import. I prefer the latter for my top-level layers, because:

The layering can happen in one central place
Renaming and reordering is more more flexible
There’s less nesting in the CSS files

A few other rough criteria for how I write CSS:

Component-specific styles can be embedded in ‘single file components’ (WebC handles this well), but most of my CSS will be global
I like the global styles split into ‘partials’, so it’s not all one long document^[1]
Each partial will be assigned to a cascade layer

Without any build steps, I get an HTML <head> that contains something like:

<style webc:keep>
  @layer reset, config, default, layout, component, utility;

  @import url('/css/reset.css') layer(reset);

  @import url('/css/config/colors.css') layer(config);
  @import url('/css/config/sizes.css') layer(config);

  @import url('/css/default/type.css') layer(default);
  @import url('/css/default/links.css') layer(default);
  @import url('/css/default/buttons.css') layer(default);
  @import url('/css/default/forms.css') layer(default);
  @import url('/css/default/media.css') layer(default);
  @import url('/css/default/blocks.css') layer(default);

  @import url('/css/layout/page.css') layer(layout);
  @import url('/css/layout/nav.css') layer(layout);
  @import url('/css/layout/header.css') layer(layout);
  @import url('/css/layout/main.css') layer(layout);
  @import url('/css/layout/footer.css') layer(layout);

  @import url('/css/utility/a11y.css') layer(utility);
</style>

The component styles are missing from that global list. CSS is designed to be global, and the best way to write minimal CSS (in my experience) is to focus more on reusable patterns over individual components. So I don’t expect much to end up in our component layer, but there’s always something. We can access those styles as a WebC asset bundle:

<style webc:keep
  @raw="`@import url(${getBundleFileUrl('css')}) layer(component);`"
></style>

I love that there’s very little build-time magic involved! Still, that’s a whole wall of imports, and I have a decades-old flinch reflex when I see that. Should I be worried?

Am I creating performance issues?

I’m not a performance expert, so I asked mastodon, and got a generally positive but mixed response.

It might not be the best performance, but (with HTTP 2/3) it shouldn’t be bad. My personal site doesn’t need eXtreme optimization, so that might be good enough for me? I’ll probably ship it, and find out.

Still, I know the first step in optimizing CSS is to concatenate – so I did explore a few approaches along the way, which could work if I need them.

Sass can `load-css` into layers

In the past, I’ve used Sass. I like Sass a lot. In Sass, I concatenate and layer the partials using meta.load-css() in my primary Sass file:

@use 'sass:meta';

@layer reset {
  @meta.load-css('reset');
}

@layer config {
  @meta.load-css('config/colors');
  @meta.load-css('config/sizes');
}

// etc.

That works pretty well. It’s what I’ve been doing on this site ever since I originally added layers.

But if I’m not using Sass for anything else, maybe I can avoid the dependency altogether?

When in Eleventy, do as the Eleventies do

I’m already using WebC, which provides asset bundling. I’ve already used that feature (above) to concatenate individual component styles. That compiles all the CSS into one bundle, and all the JS into another (unless you opt-out with webc:keep). Those bundles are available as either raw output or external files:

<!-- direct output -->
<style @raw="getBundle('css')" webc:keep></style>
<script @raw="getBundle('js')" webc:keep></script>

<!-- external files output -->
<link :href="getBundleFileUrl('css')" rel="stylesheet" webc:keep></style>
<script :src="getBundleFileUrl('js')" webc:keep></script>

But you can take that even further with asset bucketing – assigning <style>, <link>, or <script> tags to individually named CSS or JS buckets:

<style webc:bucket="good">/* … */</style>
<link webc:bucket="bad" href="terrible.css" rel="stylesheet" >
<style webc:bucket="bad">/* … */</style>
<style webc:bucket="ugly">/* … */</style>

And each bucket will get bundled up individually:

<!-- just the bad styles -->
<style @raw="getBundle('css', 'bad')" webc:keep></style>

Are you thinking what I’m thinking? Probably. It’s the title of the post.

Bundles let you concatenate CSS partials, and buckets let you group them as needed. That’s what I’m trying to do.

My CSS partials are external stylesheets, not attached to any particular WebC component, so first I have to pull them into buckets. I can do that with <link> tags in the header:

<link rel="stylesheet" href="../../_css/reset.css" webc:bucket="reset">
<link rel="stylesheet" href="../../_css/config/colors.css" webc:bucket="config">
<link rel="stylesheet" href="../../_css/config/sizes.css" webc:bucket="config">
<link rel="stylesheet" href="../../_css/config/fonts.css" webc:bucket="config">
<!-- etc -->

Since I’m using webc:bucket and not webc:keep, these <link> tags won’t appear in the HTML output. But now I have my buckets.

Since I’m interested in layering the buckets ‘on import’, I’ll need to generate external stylesheets. And since layering is not yet possible with the <link> tag, I’ll need to use @import rules instead. WebC makes that simple enough, using JS template tags. These, I’ll keep around:

<style
  webc:keep
  @raw="`@import url(${getBundleFileUrl('css', 'reset')}) layer(reset);`"
></style>
<style
  webc:keep
  @raw="`@import url(${getBundleFileUrl('css', 'config')}) layer(config);`"
></style>
<!-- etc -->

We can simplify that even more, using webc:for loops. I don’t know if there’s a way to access the list of buckets in WebC, so (for now) I’ve just added some front-matter data. While I’m at it, I’ll use that data to define my layer order up-front:

<!-- <style>@layer reset, config, default, etc;</style> -->
<style
  webc:keep
  @raw="`@layer ${($data.layers).join(', ')};`"
></style>

<!-- <style>@import url('bucket-name.css') layer(bucket-name);</style> -->
<style
  webc:keep
  webc:for="layer of ($data.layers)"
  @raw="`@import url(${getBundleFileUrl('css', layer)}) layer(${layer});`"
></style>

That’s it! Not quite as compact as the other two approaches, but it’s close – and it works great, without any extra dependencies.

I might be able to simplify that even further with webc:type='js', but I’ll cross that bridge if I decide that concatenation is worth the effort.

Back in the late aughts and early 2010s, I was a big fan of CSSEdit (now part of Espresso, I believe). One of the best features was viewing a single massive CSS file as though it contained many smaller folders. Maybe I should go back to that approach, or even back to that specific app? ↩︎

Reply via Email | Mastodon | Bluesky

A slash-why proposal

2024-07-02T00:00:00Z

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 about, what direction you’re heading, and how you hope to exist in the world. A minifesto on the purpose of your site, or your work.

Mine could use an update, but here’s the current state: Notes Towards a More Queer Art (and a more humane technology)

Reply via Email | Mastodon | Bluesky

Custom element, two ways

2024-01-24T00:00:00Z

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 a custom element?

If we had support for the full attr() function in CSS, we could simplify the CSS markup. Now it’s a custom attribute, instead of a custom element:

<code color-tile="hotpink">hotpink</code>

Down the road I can imagine more interactive features for the component. That could sway things towards use of JS. But still – is it a custom element? I’m not sure.

What do you think?

Reply via Email | Mastodon | Bluesky

User styles on the web

2024-01-24T00:00:00Z

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 / Style sheet… (you’ll need to write CSS)

As a developer I worry about seeing something different than what other people will see by default. But then I think: that’s the whole point, right? We should be mindful of that anyway.

What do you want the default web to look like?

Reply via Email | Mastodon | Bluesky

New year, same (terrible) Mia

2023-12-31T00:00:00Z

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 want to cultivate a spacious openness for curiosity and discovery… So that when I am busy, it should be from an abundance of creative projects, not a scarcity of time.

Now, heading into another new year, I want to celebrate and re-affirm that direction. I haven’t made progress exactly, because there’s no end goal, and no metrics – but I’m feeling a lot better about how I waste my time. I’m feeling better about having time to waste. Not because my days are any less full, but because I’m the one filling them up.

Here are some things I enjoyed in 2023. And some projects that will continue into the new year!

Some highlights from my year

I performed in Curious Theatre’s New Voices festival, and designed lights for their regional premier Letters of Suresh
Grapefruit Lab has officially formed as a non-profit, and we should hear soon about getting 501c3 status
Our spring show Strange Bird, Queer Bird was a huge success, and a fun opportunity to work with new collaborators
Teacup Gorilla has mostly finished recording a new album, and we’re collaborating with Grapefruit Lab to make a fully-staged live performance based on it (opening in May!)
I got really into clock repair, and I’ve fixed several old wall clocks for friends (I even made a video about the Rack and Snail strike mechanism)
I joined DenHac, the local maker space, and learned a number of new tools – from laser cutting and 3d printing, to the metal lathe and (just this week) the embroidery machine
I’ve been learning parametric CAD, using OnShape and Fusion 360 along with the DenHac tools to design a mechanical pendulum clock from scratch
I’ve started exploring custom elements and web components (huge thanks to Zach Leatherman and Westbrook Johnson for significant guidance)
I’m half done with a major re-build of this site, and a few other web side projects that I want to get back to
I joined a the local recreation center pottery class, and really enjoyed getting my hands back into the clay (classes start again soon!)
I did “something active outside” (usually a walk) every day of the year (though some days were much more active than others)

I absolutely love my daily walks, and plan to keep that up. I thought I might track another daily (or weekly?) habit this year – I’d like to get back into a regular creative writing practice. It might even be fun to re-program my Yetch calendar, so it can track multiple habits at once. I also have some ideas to make Front-End Social more sustainable over the long term. But all that will have to wait for another couple months. That’s ok, there’s plenty of time.

For now, I’m moving and preparing a new CSS workshop for Feb/March. I’m really excited about this one, and have big plans to do more teaching for work this year. Maybe even make some videos again?

But more immediate than any of that, Erin and I spent the holidays cleaning and painting our condos – putting anything we can into friends’ basements. This home that I’ve curated for myself for the last eight years no longer feels like mine, and it will go on the market next weekend. I’m sad to leave, but excited to start something new.

Having separate space has been important to us here, and will be important to us in a new home as well – but without the public hallway between, and no need for the extra kitchen.

Bring on the new year.

(oh fuck. the election. we’re fucked.)

Reply via Email | Mastodon | Bluesky

CSS @scope

2023-12-15T00:00:00Z

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

2023-05-06T00:00:00Z

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 post-human potential through exponential utilitarian value-unit simulations on Mars – like ~~self-proclaimed gods~~ selfless and reasonable altruists!)

It was May Day when I started writing this. The second time. The first draft was way back on New Years Day. Who knows when I’ll hit publish. Could be any day now, all possible deadlines are behind us. I’m several months late for a 2022 ‘year in review’, or a ‘new years resolution’ for 2023. I’m even late for the intro I wrote a few days ago.

That’s ok. This is my website, not my side hustle. Anyway: 2022 kinda sucked, and I don’t usually align my resolve with the arbitrary Gregorian boundary condition (to borrow a phrase). Every day is the right day to make changes.

2022 kinda sucked

I spent most of the year working too much, and struggling with depression. I’ve been kinda depressed for the last few years. I know I’m not alone in that. It’s the hip thing to, while surviving a pandemic.

There was one major highlight for me in 2022: writing and performing a new show, Pity+Fear. I’ve spent most of my theater career behind the scenes – writing, designing, producing, and directing. I always wanted to enjoy acting, but the reality let me down. I was too self-conscious to let a story carry me on stage.

This time was different. I had fun. I loved it. Transition means I only have to play one role, instead of two. I’m more comfortable in my own skin, and able to take on another. I imagine my web-related speaking has also given me confidence on stage.

But that high point was also a low point. The collaboration went poorly, and lead to a falling-out with a close friend & collaborator. My first show in several years, and it felt like a personal failure. By the fall I was having regular panic attacks. Then Twitter imploded, and I started front-end.social, and the panic attacks got worse.

I don’t like it when people rely on me. Oops. (We’re getting through it, things have been pretty chill so far)

Let us be (un)resolved

A mentor once encouraged me to set priorities rather than goals – not individual targets that will succeed or fail, but a reason to keep pushing through from one project to the next, and a criteria for choosing which projects should get my attention.

I’ve never written them down before, but my priorities have always been fairly clear to me – and they haven’t really changed over the years:

I enjoy imagining and then building things
I enjoy collaborating with people I admire
I enjoy exploring new media, learning new skills that expand my creative toolkit
I want to feel ownership over how I spend my time, and the projects that I work on (I don’t do well with external motivation)
I want to keep making art at a professional level (even if that’s not my main source of income)

Building websites and writing specs aren’t really on the list, but they fit in there pretty well. I never set out to have a career in tech, but found myself exploring a new medium, learning new skills, collaborating with people that I admire, building things we imagine online. And we were able to turn that into an Odd little agency where we have autonomy and ownership over our work – and control over our own (part-time) schedules.

We started when this was a much smaller field, and every company needed a new website. We put in a lot of work, but we also got lucky – riding several waves of growing demand for our specific skills.

And all throughout, I was able to maintain a split-focus double-career in the arts. It’s not a side-hustle, or a hobby – but another aspect of my work as a self-employed cross-media artist. Blah blah blah, whatever. They’re both hobbies. Neither one is a hobby. Who cares.

It’s ~~possible~~ ~~likely~~ very clear that I have ADHD, and this is one way that I manage it. So I’ve been careful to maintain that balance, and insist on following my priorities over any more reasonable ‘career goals’ or ‘health benefits’ or ‘stability’.

And then there was a global pandemic. (you may have noticed)

Everything else in my life shut down – socializing, theater, music, poetry readings – but the web just kept on going. By the end of 2022 I realized I was working a single full-time job for the first time in my life – and I was unhappy.

Trying to make art again felt impossible. There wasn’t enough time or energy in my day. There weren’t enough days in a year. Do I even remember how to be creative? How do you make art in a world where you just want to scream about longtermist eugenic billionaires worshipping their fancy auto-complete while your friends suffer from long-COVID and massive layoffs?

Would I ever make art again? Does it even matter? Time felt scarce, and slipping away. Turning 40 – a cliche – it felt like there wouldn’t be enough years in a life.

But the problem isn’t a lack of time. That scarcity, like other capitalist scarcity, is artificial. To quote a play I saw years ago – life isn’t ‘too short’, it’s the longest thing you’re ever going to do. The problem is how I feel trapped in the time I have right now.

There is no joy in seeing time as a limited resource for me to extract more value. I don’t want to spend my life mining time for the sake of productivity goals. I want to cultivate a spacious openness for curiosity and discovery. I want to wallow in the possibilities of all this time that I have.

It’s maddening that this feels like a luxurious demand – something I’m lucky to have, and should feel grateful for.

Q1 OKR KPI ROI (a report, with data)

I started the new year with some updated priorities:

I want to have so much time that I’m not scared to ‘waste’ it
I want the process of making theater/music/art back at the center of my routine
I want to get outside and be more active

I didn’t think of these as resolutions exactly. But I did buy an unnecessary habit-tracking wall-calendar from Simone Giertz because I like how it looks.

Then I went into my work calendar and blocked off every weekday afternoon. It’s not a strict cut-off. If I need to get on a zoom call some evenings, that’s fine. If I want to work on a model of Boba Fett’s starfighter after breakfast, so be it.

I’m not going to time-block the details either. Spaciousness is the goal, an invitation for other creative projects to grow.

The goal isn’t to impose hard rules on myself, but to reset my default expectations. After several months now, both mornings and afternoons (and evenings!) feel somehow reclaimed. A mental reset, reminding me that the time is there, and I will use it how I want.

A walk after lunch, a new pottery class on Tuesdays, writing group Wednesday, band sessions on Thursday, and plenty of time for theater, knitting, reading, and model-making. Maybe I’ll take up clock/watch repair? I need to buy a loupe, and some very small screw drivers. I’ve started designing a clock, but haven’t found great resources to guide the process. Hit me up if you have leads.

Meanwhile, the theater company (Grapefruit Lab) just closed a new original piece – Strange Bird, Queer Bird – which was an excellent success both in terms of collaboration and audience. We’re applying for 501c3 status, and raising funds to make it more financially viable. Now we’ve scheduled three more shows over the next year.

The band (Teacup Gorilla) wrote and performed original music for that show, and we’re back to weekly sessions – working towards another theater score in November, planning two separate albums, and talking about a 2024 tour.

I took an acting gig at Curious Theatre in January as part of their Curious New Voices, and I’m keeping my eye out for more of those opportunities. I also have some leads on light design gigs around town. (Before web design, that was my most lucrative skill and expected ‘day job’)

That all has me out of the house and moving more. But still, for the sake of my new habit-tracker, I added the phrase ‘every day’ to the final priority – to get outside, and be more active every day. It took some experimentation to get that new habit worked into my schedule: morning walks didn’t work out – who wants to wake up that early? – but a walk after lunch doubles as a transition in my day. Sometimes I only make it around the block, and other days I’ll go 2-3 miles. I’ve started listening to podcasts, which is new for me.

2023 is going well so far, according to the data. The days on my calendar are all lit up. And empty future dates are handy for writing Erin little pixelated love notes, or marking a big deadline on the horizon.

I expected to spend more time posting on this site, but my attention has been drawn mostly offline instead. How am I going to set up space in my small apartment for ceramics and also clock repair? I expect those day-to-day projects will continue to shift, and shift again, and I’ll write more when it feels right. Today, at least, this seemed like a fun project.

Not everything I’ve tried has gone well, or felt like the right choice. I still have my share of bad days, depressed or working too much. Setting unreasonable standards, and falling short in my mind. Trying something, and failing. Writing and re-writing a single post for months.

Shorter hours will mean a tighter budget, but I’ve lived on less, and I know I can make it work. I hope. Life is unpredictable, so I’m making adjustments as I go.

I guess I’m here to report a successful first quarter of 2023, and a positive outlook for the remaining months. Hopefully the investors are satisfied with my personal growth. This is the direction I want to be moving. Let it be written down for all to witness.

(Ok, it’s time for a walk, and then… who knows.)

Reply via Email | Mastodon | Bluesky

Cascade Layers

2022-12-17T00:00:00Z

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

2022-12-11T00:00:00Z

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 word/character counter that I don’t use often, but like to have available.

Digging into it, I found a simple php script defining the entire word-count logic. That’s interesting, I didn’t know you could write Alfred workflows in php. I wonder what other languages are supported? Here’s the list provided in a dropdown:

/bin/bash
/bin/zsh
/usr/bin/php [not installed]
/usr/bin/ruby
/usr/bin/python [not installed]
/usr/bin/python3
/usr/bin/perl
/usr/bin/osascript (AppleScript)
/usr/bin/osascript (JavaScript)
/usr/bin/swift

Well, that explains why the php script wasn’t working – it must have broken when I got my new Mac. But JavaScript support means I can re-write this workflow myself, without learning a new language?

Yes! It turns out Apple now supports JavaScript for Automation as an alternative to AppleScript. You can do this in Automator as well as Alfred.

The basics of JS in Alfred

After selecting /usr/bin/osascript (JavaScript) from the language dropdown, I left the next option as-is: with input as {query}. That gives me the input pasted to Alfred.

For output, the docs recommend returning a JSON object. The object has a single items key, with an array of objects for each result row to be displayed. The essential properties of an item seem to be the title and arg keys. There’s more you can provide, but that’s enough to get started.

The title is what’s actually shown in the row
The arg is the value that gets passed along to any further actions (like copying to clipboard)

In my case, the result I want is:

{"items": [
  {
    "title": "Words: <word-count>",
    "arg": "<word-count>"
  },
  {
    "title": "Chars: <char-count>",
    "arg": "<char-count>"
  }
]}

There doesn’t seem to be much magic around using the {query} or returning the JSON. If we define a function called wordCounter() that accepts a single argument and returns a JSON string, we can run it like this:

wordCounter(`{query}`);

The {query} itself seems to be supplied as a direct text replacement before the script is run. If I remove the backticks or quotes around {query}, it assumes the first word is an undefined JS variable and throws an error.

My simple word counter

I didn’t put a lot of thought into edge cases beyond ‘the query is missing for some reason’, so we’ll see how well it holds up. Here’s the logic I used for counting:

const words = (text || '').trim().split(' ').length;
const chars = (text || '').length;

Nothing clever, and it seems to work even when I copy text with line-breaks – so that’s good enough for now. The rest is just to make sure the query is a string (maybe unnecessary since I’m already forcing it), and build the correct JSON from the results. Here’s the full script:

// generate an Alfred return item
const item = (title, arg) => ({
  title: arg ? `${title}: ${arg}` : title,
  arg,
});

// count words/chars and return as items
const count = (text) => {
  const words = (text || '').trim().split(' ').length;
  const chars = (text || '').length;

  return [
    item('Words', words),
    item('Chars', chars),
  ];
}

// count or error, and return as JSON string
const wordCounter = (txt) => {
  // error if query isn't text (maybe overkill?)
  const items = (typeof txt === 'string')
    ? count(txt)
    : [item('ERROR: please provide a string', null),];

  return JSON.stringify({ items });
}

// run the script
wordCounter(`{query}`);

That works great so far. The only other thing in the workflow is copying the output to the clipboard.

Now that I know how to do it, I wonder what other automations I might want to write!

Reply via Email | Mastodon | Bluesky

Personal Histories

2022-10-31T00:00:00Z

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 we ask in a web interface are personal questions:

How many children do you have? might sound like the simplest question, until it brings a grieving parent to their knees. When is your anniversary? might create a moment of pause for someone who’s recently separated. Even What’s your hometown? or Where did you go on vacation as a child? might feel painful for kids who grew up without that kind of stability or privilege.

At the end of the post Sara suggests a few principles for form design. I was particularly struck by principle #4 – communicate what happens next.

I recently bought a membership for Denver Parks & Recreation facilities. The registration form includes a required ‘gender’ select input with the options:

Male
Female
Intersex
Transgender
Other

There are many issues with that list, but in the moment I needed to know: why are you asking, and what will you do with this info? If they need to know what it says on my ID, or what changing room I’ll use, the answer is female. If they just need demographic data, I’m happy to mark transgender. Without more details, I’m selecting the option least likely to be used for discrimination.

Reply via Email | Mastodon | Bluesky

Ancient Web Browsers

2022-10-30T00:00:00Z

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 first developed WWW with a graphic user interface for NeXT computers. But the web itself is intended to work for everyone, on everything. So they hired Nicola Pellow to develop a second text only LineMode browser.

Pei Wei’s ViolaWWW also represents an important milestone in the history of web design, as the first browser to support external stylesheets (more than just browser ‘user agent’ styles). It even looks pretty similar to the eventual CSS syntax:

(BODY,INPUT,P   FGColor=black
                BGColor=grey70
                BDColor=grey70
                align=left

(H1             FGColor=white
                BGColor=red
                BDColor=black
                align=center

I didn’t realize that Lynx is also one of the early browsers. I installed it on my modern mac just last month.

Lynx now has the distinction of being the oldest continuously-maintained web browser.

That’s pretty cool. But I still haven’t figured out how to load https sites, which is pretty limiting.

Reply via Email | Mastodon | Bluesky

Critical CSS? Not So Fast!

2022-10-23T00:00:00Z

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 fragile and expensive technique to implement, which seldom provides the benefits that many developers expect.

I have so far avoided this pattern, as I’ve never seen an approach that looked reliable & maintainable. Glad to see I’m not missing out on something essential.

This link brought to you by my (unwarranted & self-serving) sense of vindication. 😅

Reply via Email | Mastodon | Bluesky

CSS tie-dye gradient backgrounds

2022-10-21T00:00:00Z

[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 made a few small suggestions, and sent links to other animation performance resources. But this isn’t a post about animation performance. I love the sense of playfulness that Dylan has already discovered in CSS – despite code bootcamps generally not giving the language much attention.

Now I want to play with blurry blob backgrounds too!

Looking for texture

Over at CSS { In Real Life }, Michelle Barker wrote a great post on CSS Halftone Patterns. I’ve always enjoyed halftone patterns, and I’ve been looking for something to add texture to my new site design. The last several designs used semi-random semi-transparent bubbles – something like this, but with colors based on the site design:

Hit 'rerun' in the bottom right to generate new circles

I like that randomness, but it’s time to try something new.

After playing with the half-tones effect, it didn’t feel quite right in context. So I went looking for more inspiration. There are a lot of CSS background pattern ideas out there:

Lea Verou’s classic CSS3 Patterns Gallery
Temani Afif’s CSS-Pattern.com
Ana Tudor’s Background Patterns, Simplified by Conic Gradients
Jim Raptis’ CSS Background Patterns tool
And many more

As always, Ana Tudor also has a series of fantastic gradient demos on CodePen:

A conic & radial first draft

I might revisit some of those ideas down the road. I imagine this site potentially having different patterns for different areas of the site – or maybe a way to select your favorite pattern? But for now I went with a pattern by Temani Afif that I really love:

I swapped in my own subtle site background colors, and an extra radial gradient on top. I think the pattern would get overwhelming if it continued too far down the page, so this gives it a nice fade-out with soft/curved edges.

Blended gradient tie-dye

As part of playing around and exploring these patterns, I realized both conic gradients and background blend mode are both well-supported features.

That’s not surprising, they’ve been around for a while now, but I’ve never integrated them into my work before. So I spent some time exploring, and really enjoyed this result:

Almost tie-dye, if only we had spiral gradients

It’s fun to just sit and tinker with the colors, gradients, and blend modes to see what happens. I also experimented with using oklch to get a more uniform lightness – but found that didn’t have the same impact. I guess variation is part of the charm. If your browser supports oklch, you can uncomment that code to see the results.

I also experimented with animating the positions of each gradient, but that didn’t seem to play well with blend-modes? I’ll have to look into that more.

I might use this effect in my site footer – where I previously had a trans flag. What happens if we use the trans colors?

Reply via Email | Mastodon | Bluesky

Personal website redesign

2022-10-12T00:00:00Z

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

2022-09-21T00:00:00Z

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 the farthest along in terms of browser support for the new color spaces, but this is all part of Interop 2022 – which means every browser is trying to get it done this year. I recommend installing the latest Safari Technology Preview, and playing around with all the new colors!

Reply via Email | Mastodon | Bluesky

A long-term plan for logical properties?

2022-09-16T00:00:00Z

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 works.

Over time, new layout methods like flexbox and grid have started to introduce ‘flow-relative’ or ‘logical’ directions: inline-size, block-size, inline-start, inline-end, block-start, and block-end.

That allows more meaningful and resilient design in the face of translation – both for multi-lingual sites, and for a web that supports more and more automatic translation.

It’s not bad to use the physical properties sometimes, when they best express the design intent, but they shouldn’t be encouraged as the default choice.

So the goal in my mind is that it should be simple to write an entire site without reference to physical coordinates. And doing that should be encouraged by the language.

For example, we currently have a margin shorthand that defines physical margin properties. We could add a margin-logical shorthand, but it feels like a second-class citizen of the language. If the physical property feels like the ‘default’, then the language is encouraging authors to stick with physical dimensions.

Yesterday, Jeremy Keith wrote a great article – Let’s get logical – about his attempts to refactor a site using only flow-relative properties, and the limitations he ran intro with existing CSS. It’s a great run down of what works already, and what’s still missing.

We’re not there yet. So how do we get there?

Well, I don’t know for sure – but articles like this are very helpful as we try to work it out!

Fantasai and I did spend some time working on this last year, and came up with a multi-year and multi-step proposal. Maybe there are other approaches we should consider as well?

We’re discussing all of that today at W3C’s annual TPAC conference, in a joint meeting between the CSS Working Group and the Internationalization Working Group. Maybe we’ll have something new to report later today?

If you have ideas, or additional issues that we should have in mind – let us know!

Reply via Email | Mastodon | Bluesky

Container queries in browsers!

2022-09-14T00:00:00Z

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 things have changed between the first prototype and the final version that’s shipping in browsers. But don’t worry – it’s stable now, and won’t be changing again!

Both Chrome 105 and Safari 16 come with an impressive list of new features in addition to container queries. The main highlights are the :has() selector (in both) and subgrid (in Safari). But I recommend digging through the release notes linked above.

(For more about container size queries and units, see my list of Container Query Resources.)

Style Queries Prototype

Meanwhile, Chrome Canary & Edge Canary have both shipped a prototype of style queries. Rather than measuring the dimensions of an element, style queries measure the computed value of a given property on that element.

To test the feature:

Download either Canary browser.
Navigate to about://flags/#enable-experimental-web-platform-features.
Set it to Enabled.
Restart the browser.

For now style queries are limited to strict equality (we can’t query number ranges, or partial values) – and the prototype is limited to custom properties. Even with those limitations, it’s a pretty powerful feature. Here’s my first experiment, establishing two ‘button themes’ – mia and mia-plus – toggled by a single custom property:

I’m excited to experiment with this more. It should enable most of the use-cases in Lea Verou’s request for Higher Level Custom Properties, and I’m excited to see what else people come up with. If you make any demos, please send them my way!

Browser Support for Size Queries & Units

Reply via Email | Mastodon | Bluesky

I never let things be small

2022-09-09T00:00:00Z

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 short. Maybe the title could have been the whole post? Instead, I’ll tell you about knitting a sock, without looking at the pattern. I’ll probably fuck up the heel. Why am I worried about that? No one cares if I knit a sock with improperly twisted stitches.

Very often, there are no stakes. None at all.

For fuck’s sake, there’s nothing else I need to say here. Hit send.

(Worry about it.)

(Worry about what???)

Reply via Email | Mastodon | Bluesky

A whole cascade of layers

2022-09-06T00:00:00Z

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 layers.

Some day I hope to write a longer post about my overall approach to CSS. My methodology? Sadly, I don’t have an acronym for it yet. The rough summary is use the tools provided to write meaningful code. I think that’s also what Dave is getting at with his post:

While SBRDFLT doesn’t exactly roll off the tongue (”S-Bird Felt”?), maybe it’s time we break out of catchy three letter acronyms and focus on finding good scalable architecture patterns instead.

Setting aside the bigger questions, Dave’s ‘SBRDFLT’ acronym is based on the ‘layers’ I expose in the layer-selection settings below. Roughly, they imply:

/* SBRDFLT */
@layer spec, browser, reset, default, features, layout, theme;

But you won’t find that ‘SBRDFLT’ layer list anywhere in my code. The first two ‘layers’ are fundamental aspects of the web itself, and I have an additional sub-layer that I’ve been keeping secret. Still, let’s take that list supposed-layer-by-supposed-layer. What have I actually implemented, and what’s the thinking (if any) behind this particular organization?

Cascade Layers allow you to specify exactly which CSS selectors should take priority in any given situation. Later layers will override earlier layers, regardless of the specificity used within each layer. For more info, check out my Complete Guide to Cascade Layers on CSS Tricks.

The first two (implicit) layers

The first two layers – ‘spec’ and ‘browser’ – represent styles that exist on every site, before we even get started. These aren’t technically ‘cascade layers’ as defined by the new @layer syntax, but they work in a similar way, and so I’ve exposed them using similar language.

The CSS specification defines an initial value for every property in CSS. The initial display is inline, The initial color is CanvasText, and so on. Initial values are only applied when no other value is specified through cascade or inheritance. We can think of them as an initial layer that all other styles will override.

You might be thinking that doesn’t sound right – divs default to block display, and links default to a blue color. And you’re right! The browser provides a second layer of defaults called user agent style sheets. This is where paragraphs get their spacing, headings get bigger and bolder text, and an 8px margin is added to the body.

Initial (spec) values are defined per-property, the same across all elements.
User Agent (browser) styles are defined per-element, to provide differentiation and readability.

The spec styles aren’t part of any actual style sheet in the cascade, but the browser styles live in a Cascade Origin below our ‘author’ styles. Since cascade layers were designed to work like origins-within-origins, it’s fair to flip that around. We can think of user agent styles as another ‘layer’ below all our layers.

Both initial values and user agent styles are always there, on every website in the world. But in order to see what they look like, we have to turn off all the styles that normally go over top. If you click the ‘browser’ option in the layer-selection settings, I use JavaScript to turn off all my site styles, and let you see the ‘naked’ HTML, as styled by the browser.

Initial ‘spec’ values are a bit harder to see, since we have to turn off browser defaults as well. I do that by applying the Most Normalest Ultimate Reset:

/* add an !important flag if you also need to override your own styles */
*, *::after, *::before {
  all: initial;
}

The result is so extreme that it’s nearly impossible to find your way back to the settings. So I also include a few styles that draw attention back to the layer-selection buttons, and give them basic button styling. I don’t want people getting lost around here.

I haven’t technically created Cascade Layers for either the ‘spec’ or ‘browser’ style options – I only expose them in the UX.

I also get some some default dark-mode support, and theme colors before ever applying CSS – directly from meta tags in the head of my documents:

<meta name="color-scheme" content="dark light">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="hotpink">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="mediumvioletred">

Actual layers, with styles I actually wrote

This is where I start making suspiciously vague distinctions between layers. I’m trying to balance two slightly different goals here. One is to define a layer structure that works well for me as I redesign the site. The other goal is to make an interesting layer-selection widget, such that each layer option ‘reveals’ a step in the process.

In order to achieve the second goal, I’m thinking through layers a bit differently than I might otherwise. This is still very much a work-in-progress, likely to change over time.

Reset layer

The reset layer represents minor cleanup of legacy browser styles.

In addition to CSS Remedy, I’ve also made tables fluid-by-default, and replaced the 40px indentation used on lists, figures, blockquotes, etc with a more reasonable 1em. Buttons and inputs inherit the global font, [aria-pressed] gets basic styling, replaced elements work how I expect, the root font size is a bit larger, and there’s a readable max line-length on the body. Also, that 8px body margin is replaced by a full 1em margin. I’m wild like that.

At this point, I’m roughly still following the CSS Remedy approach:

CSS Remedy sets CSS properties or values to what they would be if the CSSWG were creating the CSS today, from scratch, and didn’t have to worry about backwards compatibility.

It’s possible that I was overzealous here. Maybe adjusting the font size is not something the CSSWG would do if we could. Maybe some of these styles should move into the default layer instead. I don’t know.

I was tempted to stop here. I really want to keep the styles pretty basic until I’ve made further progress on the content architecture and other goals of the redesign.

Default layer

Reader, I didn’t stop there.

For the default layer, I gave myself slightly wider parameters. What default styles would I design for myself? I’m still trying to think generically about built-in HTML elements & attributes, but I get to make more opinionated choices. These are defaults that I like, even if I don’t think they belong in the browser.

Even larger fonts, and more whitespace
Lists that ‘outdent’ when there’s space for bullets in the margins
Basic styling for links, buttons, form inputs, and horizontal rules
Styling for focus-rings, a skip-to-content link, and a .visually-hidden utility class.

Default config secret sub-layer 🤫

Along the way, I realized my ideal default stylesheet would come with custom properties in two forms:

A few pre-defined color, font, and sizing variables.
Some ‘free’ variables that can be defined later.

For the first part, I considered something like Adam Argyle’s Open Props, but decided I don’t need anything quite so fleshed out. Instead I used some browser defaults as a guide.

There are three font variables – --ui-sans, --ui-serif, and --ui-mono. Operating system UI fonts are generally nicer than browser defaults, while still being a good ‘unbranded’ option.

For colors, I used the CSS System Colors as a guide. I considered using them directly, but found there are some inconsistencies and a11y issues involved with that. Instead, I created custom properties with similar names (--Canvas, --CanvasText, --Link, --VisitedText, etc) and filled them in using the Firefox default values. I didn’t want to think about it too much – just get a set of useful colors with useful semantics behind them.

For sizing, I used a variation on the defaults that we often start with at OddBird. First a --gap (we’ve often called it --gutter), and then divisions of that which I called --half-gap, --shim, and --half-shim. I also like having a larger --spacer for section-breaks.

All of those spacing variable are relative to typography. That starts with a --root font size, and then a --line-height ratio, a calculated --line height, a --measure for readable line-lengths, and a --smaller font size mostly for inline monospace fonts.

I also started using a number of undefined variables throughout. For example, setting a main font-family:

html {
  font-family: var(--font-body, var(--var-serif, var(--ui-serif)));
}

At this point in the code, --font-body and --var-serif are still undefined, so the result is my --ui-serif font stack defined earlier. In future layers I can choose to add a variable serif, or override the body font entirely, just by setting those variables.

All of this is part of the hidden default.config sub-layer. there’s not much use exposing the config to users without also exposing the styles that apply those configurations.

I would appreciate if you don’t tell anyone.

Features layer

Over the years, there are a few code patterns that I’ve come to rely on:

Call-out boxes, like the ‘note’ above
Image galleries
Exclusive button groups
A way of creating ‘erasure’ texts from certain articles/pages

I also added a new one as I was working, which allows me to show inline color-swatches next to a given color value. Here’s rebeccapurple for example.

These patterns are specific to markup conventions on this site, and require CSS in order to function properly. They’re not quite defaults, but they’re a bit more foundational than the themes I might apply in future layers.

Turn off the features layer, and the swatch will disappear, image galleries will go single-column, etc.

Layout & theme layers

I don’t have much to say about these final two layers. I wish I wasn’t so eager to give my site an aesthetic, but here we are. I sometimes get carried away.

My new favorite web resource – The Public Domain Review – inspired me to go find Alegreya Variable, and I came up with a quick color palette based around my favorite CSS colors: mediumvioletred and teal.

These layers are by far the most incomplete and half-assed. Just enough style to make me enjoy the site while I continue working on it.

Update 2022-09-26: These two layers have been merged. While I’m still using separate files, and could still ‘layer’ them technically – the difference is more in what is being styled rather than in the intent of those styles.

Reflecting on all those layers

For a personal site, this is probably overkill. It’s absolutely clear that I’m writing more CSS than I need. I could combine my reset with my defaults for a more focused baseline, and streamline the stack in general. But I’m intentionally approaching each layer as a complete ‘design’ – even where I plan to override those styles later.

This is an exercise in thinking through what different concerns go into building a site design. I’m trying to give each viewpoint the stand-alone attention that it deserves, to see what I learn from the process. And then I’m layering all those viewpoints, to see how they cascade together.

It’s also an experiment in exposing those layers to users.

None of that is strictly necessary, but it’s enjoyable, and I’m learning as I go. I believe this layered thinking is useful, even if we don’t always need all the layers split out this way.

And it’s a mindset that translates especially well to situations where different teams are contributing to a single product – stacking a design system on top of an external CSS library, and then building a site on top of those. That’s why we designed Cascade Layers in the first place.

Useful or not – I’m having fun playing with my new toys, to see what I discover along the way.

Reply via Email | Mastodon | Bluesky

This content won't architect itself

2022-08-25T00:00:00Z

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 navigation, she said –

It doesn’t matter how you organize it, you’ll never be happy with the result. The problem isn’t the navigation. You just can’t decide what the site is for.

Why did I make this site in the first place?

I started building websites as a way to market my first theater company.^[1] It was a place for the audience to see what’s playing this season, or find the (web 1.0) phone number for tickets. There were clear reasons for people to show up at our site, and a clear set of goals for them to achieve.

My personal sites have taken a number of different forms. For several years I had a one-page ‘business-card’ website. Short and simple. My name, a few links, and some aggressive aesthetic choices:

My 2008-2012 business-card site. I call this rainbow brutalism.

There’s something refreshing about a single-page site. All it has to do is send you somewhere else, with a bit of flair.^[2] Meanwhile, the target sites each have a clear focus defined by the brand and goals of the project.

But in 2012 I got frustrated, and it’s been all downhill from there.^[3]

Another theater company had recently imploded from internal conflicts. I was looking for new ways to get my art out, and become part of a local scene. I was also actively looking for a publisher. To do that, I would have to sell myself better. I wanted to have more of a ‘presence’ online – to move from lurking to participating.

I built a new website on Tumblr.^[4] It was meant to be a digital resume/portfolio, and also a place to write more, and interact directly with a (very small) audience. There was a blog on the front page, and a page for those same project links. One publisher asked me for an artist manifesto, so I included that as well.

Some things change, some things don’t

The earliest styled archive I could find is from 2014, when I moved off Tumblr:

My 2014 blog site, becoming an active participant on the indieweb.

Since then, it seems like I’ve redesigned the site every couple years. For a while the navigation became more and more complex:

2015, 2016, & 2018 sites, with increasingly complicated navigation.

Until 2019, when I removed all the navigation and moved onto Eleventy. I was tired of trying to sort my life into a nav hierarchy. The new design would rely on tags instead:

From 2019 to 2022, a series of variations on a tag-driven theme.

It’s interesting to look at those last few years. It seems I’ve been struggling to determine what belongs in ‘navigation’ vs ‘filtering’, and how to highlight the most relevant content… while treating everything as equal.

That’s what really strikes me – the sameness of all the content. It doesn’t matter if you’re looking at a blog post, or a new album, a book, a theater production, an open-source project, or a talk that I’m giving next week. There’s no distinction at all.

As a reaction against trying to categorize my content, I removed any distinctions at all. Everything is a card on a timeline. Every card has a title, a date, a summary, and some tags.

The objects of my desire

Over at OddBird, Sondra has been using Sophia Prater’s Object Oriented UX as a guiding philosophy for our design process.

I’m not an expert on the approach, but the guiding principle is that humans have an object-oriented perception of the world around us. When we walk into a room, we quickly process objects like tables, chairs, couches. We recognize their familiar shapes, and understand how they can be used.

In an Object-Oriented UX, we can aim for a similar object-recognition:

A given site ‘object’ ought to be recognizable no matter where it appears on the site.
Different objects ought to be distinct from each other.

Ha. Well, oops.

I’ve started to create a short list of object types like posts, books, albums, orgs, scripts, talks, etc. I thought maybe, in addition to distinct styling, those objects could form a new sort of navigation. But right away, they started overlapping and falling apart. That’s when Erin stepped in to dismiss the entire idea.

All those things do exist on my site, and may deserve styling consideration, but they’re still basically just tags. And they’re tags that I already use. I think, in a sense, they’re too specific to provide a more clear understanding.

Looking back at previous versions of this site, I’m struck by the original ‘objects’ that I used for navigation from 2012-2016. They fit smoothly with my more recent thought that this site is both an archive, and a live event:

By archive, I don’t mean content that is out-of-date, but content that exists here as a sort of documentation – a record of my life and work elsewhere:

Organizations (OddBird, Teacup Gorilla, CSSWG) that I work with. In 2014 I called them co-belligerents.^[5]
Artifacts that are the result of my/our work, like albums, books, specs, and open source projects.
Events past, present, and future. These also tend to have two parts – the script/talk which can be performed multiple times, and the individual performances.

By live event, I mean content that exists for itself – intended to show up on a website, in a feed, not as an avatar of something else:

Posts that I write.
Links that I want to share.
Announcements about upcoming archival stuff. I wrote a book, or I’m giving a talk, or whatever.

I think these categories start to get at something more useful, or informative about what this website is and how it works.

Of course this isn’t unique or original, beyond (maybe) the language I use. Most content management tools are organized around posts (feed), and pages (archive) – with special handling for calendar events, and products (artifacts).

But why, though?

I still haven’t addressed Erin’s critique.

Over the last 8-10 years – since I moved away from the single-page approach – I’ve tried to re-imagine the content architecture and navigation of this site multiple times. But I’m not sure I’ve spent much time reflecting on the purpose of the site.

The other day, someone on Twitter told me:

The homepage should always be a selling point. It doesn’t matter if it’s selling yourself personally or the value of your blog. To be blunt, no one who landed on your personal site got there because they care about you personally.

I’m not sure that’s entirely accurate. I do actually have friends and family who care about me, and also look at my site. They just go to a different school. You wouldn’t know them.

But in 2012, selling myself was front-of-mind. I needed a resume and portfolio of my experience and expertise, because I needed work. A times, I’ve also tried to sell the results of my work. The artifacts. Books, albums, prints of my art, etc.

Both of those are reasonable objectives for a personal site with a sales pitch. But it’s also reasonable to have a personal site that acts as more of public journal – entirely unrelated to selling. A site entirely dedicated to the people who care about me personally.

It would be reasonable to have an entirely unreasonable website, just-for-the-fuck-of-it. Often, my site is just where I play around with ideas. Or it’s an extension of my social life online – which includes work, but isn’t limited to work.

I don’t need this to be a professional site. That’s why I have OddBird.net, TeacupGorilla.com, and GrapefruitLab.com. This site can be anything I want. Parts of this site are very personal, and not at all appropriate for a professional resume or portfolio.

This is my home, online. Sorry for the mess. Can I get you a glass of water?

Robin Rendle, who has continued to inspire this redesign, seems to be thinking through some similar questions (in much more concise posts).

About the redesign is an excellent reflection on their process so far – what’s working, and what isn’t. Then also, All the things a post can be:

Saccharine, careless, melancholic, naive, questioning, questionable, dashing, daring, and vengeful. Inquisitive. Soaring! Doubtful, distrustful, apprehensive, hesitant, unready, unabridged, undecided, unwavering. Woeful. …

It goes on. I love it. An expansive set of options, all interesting in their own way. I wonder what a website can be?

I don’t have an answer to this, exactly. But I know that some of my own conscious and unconscious goals come from a joy of making and sharing, and some of them come from fear.

Irrelevance maybe? Unemployment?

I’ve built my life around a willingness to turn down better-paying jobs in order to protect my voice and my time. But the flip side has been a rollercoaster of self-employment highs and lows, and a fear that I need to always keep selling.^[6] Sometimes that’s been a helpful motivation, but I don’t think it’s as relevant now as it was in 2012.

There are many ways for a career to crumble, but I think mine has become about as stable as I could hope for.

What can my website be?

Erin will tell you that the reason I find this difficult is because I’ve been trying to do all of the above and more. I’ve been trying to document my entire existence, and organize it into a simple site navigation.

Is that unreasonable? So be it.

I think one goal of this redesign has to be prioritizing my own joy of making and sharing – wherever that takes me. But I still want to step back, and think through the implications.

I’m reminded of the criteria that Abigail Thorn uses to guide episodes of Philosophy Tube:

Is it made from curiosity, not ambition?

Is it made out of compassion for myself and others?

Is it my unique creative vision?

Anne Bogart also has a set of questions for defining the boundaries of a theater piece. I use these prompts often when I start on a new writing project:

What is the question that motivates the piece?

Who or what is the anchor through which we explore the question?

What is the structure of our exploration?

Some things to think about. Quoting Robin again:

I guess the reason why it’s so hard to make an about page for me is that the goal is so murky. What do I want folks to get out of this? I guess a photo of me, an email address, and then…what exactly? Ugh.

All that to say, Erin has a point. Which is rude.

A simple ‘database’ of shows – hand-written CSV files – with a PHP script to give me server-side includes. My own proto-Eleventy. ↩︎
Ted Nelson calls web links a diving board into darkness. He means that as an insult, but I think it sounds rad. ↩︎
If you’re on a bike, downhill is a good thing. Are we on a bike? ↩︎
Cameron Moll had just moved onto Tumblr at the time. I think that was the inspiration. ↩︎
This is a phrase that I saw on a historical marker for a failed political uprising. I don’t remember the details, only the phrasing. ↩︎
I would like to sell you my mediocre personality, and terrible humor. These aren’t my best qualities, but you can have them both for only ~~$9.99~~ ++$4.99 and a back-link++.) ↩︎

Reply via Email | Mastodon | Bluesky

No demo [website] reno

2022-08-07T20:57:46Z

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 was absolutely beautiful.

This post isn’t about our vacation, or any of the amazing places we visited.

Every night we would end up in a hotel room, where we turn on the Food Network (back-to-back Diners, Drive-Ins, and Dives) or whatever is showing on HGTV. Nested between extensive house remodeling shows, No Demo Reno starts with the premise that you can make big upgrades to a home without moving a single wall.

This post isn’t about HGTV or home renovations, either. I’ve seen a total of two or three episodes while knitting, winding down, and getting ready for bed.

But that’s my goal with this site redesign. How much can I change, without moving any of the walls?

Some background, and goals

I’ve had a number of ‘personal’ sites over the years, but landed on this URL in 2015. The first version of this site used rstBlog – a small Python static-site generator without any documentation.

In early 2019, I migrated from rstBlog onto my current Eleventy setup – a complete overhaul of the site, inside and out. The demolition was extensive, and I likely broke a few promises.

This time I plan to leave all the content and Eleventy infrastructure basically intact. Here are the goals:

Clarify the information architecture

I’ve always found it hard to sort my activities into organized ‘categories’, so I’ve been treating basically everything as an event with the same data, look, and feel. Something happens – a presentation, performance, album release, novel, article, spec – on a particular date, with any number of relevant tags.

I like some things about that – embracing the mess of my ADHD life – but I haven’t yet found a great solution for navigating & displaying it. Part of the problem is simply that everything looks the same. It would help if site visitors can more easily see the different types of content reflected in the design and navigation of the site.

The previous design also relied heavily on extra-long ‘calendars’ of content at the bottom of every page. That solution felt very bulky to me – both in terms of page-load, and user scrolling. It may have been technically Finite, but it didn’t always feel as finite (or as easy to navigate) as I’d like.

Clean up the HTML (& Nunjucks)

Technical debt often builds up in HTML over time – extra wrapping divs, stray classes, and other complexities that originate more from style than content. It feels good to clean that out and start fresh. Specifically, I want to:

Simplify complex Nunjucks templates
Strip out any HTML that is not absolutely essential
Improve my use of microformats
Rethink how WebMentions are displayed
Rethink how user design customizations are provided
Always improve accessibility where I can

I hope to end up with an HTML architecture that feels more minimal – a blank canvas, that I can treat more like a Zen Garden or Style Stage for my CSS. My early websites (back in the 00s) all had multiple ‘alternate stylesheets’ to choose from, and I would love to do that again.

Make RSS a first-class part of the site

While I was working on WebMentions last month, I also made major updates to my RSS feed. But I don’t love the way browsers display a raw xml file. Developers may be my biggest audience, but they aren’t my only audience, and I want that link to make sense and feel like part of the site.

So I looked into it, and it seems like I can use XSL and CSS to better design and integrate that page as a part of the site.

Try out new CSS features (slowly)

It’s been fun working on new CSS features with the CSSWG, but now that those features (and more) are starting to roll out in browsers I want to use them on my site.

Some of features are available already, or even a few years old. Things like is() & :where(), min()/max() & clamp(), variable fonts, color-scheme/accent-color, and Cascade Layers. Some of those were already being used in the old design, but this time I get to design around them from the start.

Over the next months and years I also hope to start playing with size-based container queries & query units, scope, subgrid, new color spaces (okLCH/display-P3), and more.

I want to take this slow. Start simple, and build more interesting themes as the various features arrive. That means keeping things simple for as long as possible, so it’s easy to integrate new ideas without major rewrites.

Highlight user customizations

As part of the previous design, I launched Cascading Color Systems – a tool for giving users total control over the colors on the site. That was inspired by Håkon Lie’s original 1994 CSS proposal, which includes the following text-art diagram:

        User            Author
 Font   o-----x--------------o 64%
 Color  o-x------------------o 90%
 Margin o-------------x------o 37%
 Volume o---------x----------o 50%

I still want to explore that idea of making the site design interactive, but I don’t want to keep relying on HSL colors to make it happen. For now, I’ve removed Cascading Colors, while I rethink the approach.

I’d also like to expose the ways a CSS design is layered – from specified initial values, user agent defaults, resets, global typography, layouts, components, etc. It’s a cascade! What if users could turn on and off the various Cascade origins, and layers to see how the site looks at different steps of the process? Check out the Theme Settings below, for a first-draft of the idea.

A way of turning CSS layers on and off... These settings were also saved in `localStorage`, so they persist across visits.

This idea is absolutely inspired by the personal site of Nils Binder. Nils provides a slider from 0 to 865 lines of CSS, with animated transitions between the styles. It’s a lot of fun, and I recommend checking it out.

The order of things

My instinct was to strip out all CSS, and then work on getting the HTML cleaned up while my site remains ‘naked’ of style. I didn’t quite do that, but I’m aiming for something close. Here’s what I’ve done so far:

Remove the old CSS (done)
Begin re-arranging the HTML & Nunjucks templates
@layer reset » just the bare minimum needed for HTML tags and attributes to work the way I expect, starting from CSS Remedy.
@layer default » just enough colors & typography to make the site feel usable to me, without making decisions about how I’m going to theme it long-term.
@layer theme » adds a few site-specific features and opinions on top of the typographic defaults.

The distinction between layers is still fluid, as I try to figure out what I’m doing. I’ll keep adjusting the reset and default styles as I go, but hope to leave the theme layer as minimal as possible, while I focus on the architectural issues.

For now, the default layer has colors based roughly on Firefox CSS System Colors. I experimented briefly with using the System Colors directly, but support seems a bit inconsistent, and there are additional accessibility considerations with that approach. I might revisit in the future.

The theme layer colors are based on Named Colors, with some minor adjustments for accessible contrast. While darkslategray works fine as a text color over azure in light mode, I used Sass to darken it as a background-color in dark mode, providing enough contrast for my accent colors as well. The result is hsl(180deg 25% 6%).

There’s a lot more to do. WebMentions are temporarily hidden, RSS isn’t highlighted in the nav or styled, and all content still looks the same in a list – but I have to start somewhere. We’ll see where it goes (slowly).

Some links I’ve been keeping open while I work

Articles:

The Smallest CSS by Robin Rendle
Style with Stateful, Semantic Selectors by Ben Myers (with links to several others)
Beginning to Style Your RSS Feed by Jon Christopher

Sites:

tink (Léonie did a lovely redesign recently, with tags for navigation)
IndieWebify.Me
microformats
Humane by Design
Sorted Colors
Contrast Ratio

Reply via Email | Mastodon | Bluesky

2 days of cordwainery

2022-07-12T00:00:00Z

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 and Dan Huling are wonderful artists with a background in performance, and started the shoe school out of their back yard. ‘Back yard’ is entirely underselling the magic they’ve created on their property. We stayed in the tiny home they converted from a 1940s train car, between the two days of our workshop.

The entrance & yard (notice the log rocking chair) – along with some videos about the school and the converted train car.

They have several workshops available, but we went with the two-day option – making ‘Chuck Taylor’ style sneakers.

Day 1: Design

Day 1 was entirely dedicated to design. We spent the morning pulling out rolls of up-cycled leather and fabric to see what’s available, and sketching ideas on patterns they provided. Since we were the only two students, we each got a teacher to ourselves – Erin working with Dan, while I worked with Annabel.

Erin had done the workshop before, and came prepared with some fabric from home. I was starting from scratch (with almost no sewing experience), and didn’t really have any idea what I wanted to make. Eventually Erin suggested I work from some of my Riding SideSaddle* art, and Annabel helped guide me through translating from digital collage into shoe leather.

By the end of day 1 I had selected and cut out an assortment of bright, saturated leather for the sides, and gold leather toe caps. I still wasn’t sure about the design details, but my main concept involved using the high-top pattern for the outsides, and creating a shoe-within-a-shoe effect on the inside – with high-top uppers stitched onto a low-top base.

At this point it doesn’t look like much (besides a lot of bright fabric), and I think both Annabel and I were worried about how it would come together.

My cut leather & fabric at the end of day 1

I guess I’m making clown shoes?

Day 2: Construction

Annabel and I both came into day two with ideas that had been brewing over night. We agreed that the floral fabric wasn’t matching the other ideas, and she re-cut my lacing panels from leather, while I began experimenting with how to stitch the designs.

It’s clear that they have a strong sense of timing, and will jump in to help with repetitive tasks when you start to fall behind. It’s also clear at this point I was falling behind. Once I picked out leather for my tongues, Annabel built the entire toe-and-tongue parts for me.

We had experimented on day 1 with sewing scraps of fabric to create the collage effect of my art, but I decided to simplify: using various colors of thread to get different stitched effects – sketched moths, hard lines, and scribbles. We found that it worked well to tack down my drawings onto the leather, and sew straight through the paper.

Sewing, gluing, and building on day 2

It was surprising to me – despite experiencing the same in other mediums – how much things come together in the last few steps, and the last hours of the day. What seemed like a random scattering of bright colors, came together into actual shoes I could see myself wearing. Shoes I’ve been wearing daily for a week now.

We used bike inner tubes to cover the heal seem, and provide a heal pull.

All that’s left to do is try them on.

Trying them on in the workshop, and some closeups on the ride home

A little more

During the two-days of the workshop, I got my tan stitched moths, black stitched perpendicular lines, and red stitched scribbles. All that’s missing are a bunch of tiny errors!

When I got home, I ran some tests with red & black fine-tip sharpies on scraps of leather. Only the black is consistently visible, so I went with it.

Now I’ve been wearing the shoes for a week, and I love them. I’m on the road this week, exploring southwest Colorado, but here are some more closeups I took in the hotel room:

Two-weeks worn in, now with more arrows

Reply via Email | Mastodon | Bluesky

Body margin 8px

2022-07-04T00:00:00Z

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 of display is inline, and the initial value of every margin property is 0.

Initial values are used when no other value is specified by the Cascade, or inherited from elsewhere. We can also revert our styles explicitly to their initial value using the initial keyword.

But if we stop there, initial values don’t provide a great reading experience. When all the properties are the same on all the elements, there’s no visual differentiation between a link, a paragraph, a heading, or a list. We can see that by using the Ultimate CSS Reset:

/* you can't get any more 'reset' than this */
* { all: initial !important; }

This is why we need browser styles, which provide different defaults from one element to the next. Some elements should be display: block (divs, paragraphs, lists, headings, etc), and some of those elements should have margins on them to improve readability.

We can revert any property on a given element to the browser default style by using the revert keyword. Technically this removes any styles from the author origin, but since user-origin styles are rare, it often results in styles from the browser.

Standardizing browser defaults

Browser styles are essential, but we often only notice them when they seem ‘wrong’ or unexpected – and think of them as a problem to be solved with ‘resets’ and ‘normalization’.

Resets remove defaults to achieve a more ‘blank canvas’
Normalizers attempt to make the defaults more consistent across browsers

The CSS Working Group and browser vendors also understand that default styles work best when they are more consistent across different browsers. While browsers are free to provide whatever styles they want, most browser defaults can be traced back to the (non-normative) default style sheet provided in the CSS specifications.

~~I’m not sure if there’s a more recent version somewhere, but I couldn’t find it?~~

Update 2022-07-27: The recommended default styles are now part of the HTML Living Standard, rather than the CSS specification.

CSS 2.2 default style sheet

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: flow-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

Some of those default styles seem obvious – block elements should have block display, table elements need table displays, and list elements need list displays. Headings get larger, bolder text. But other default styles seem pretty arbitrary. About a third of the way down, we find this one:

body { margin: 8px; }

It makes some sense to me that we would want some default spacing around the edges of our document, but why 8px? Where did that come from?

Nothing ever goes away completely

The default style sheet isn’t only there to ensure consistency between browsers, but also to ensure consistency across time. The entire web is designed to be forwards-and-backwards compatible. That doesn’t mean the web is static – we’re getting new features all the time – but it means those new features should never break existing websites.

On rare occasions a browser will decide to break existing sites if there are privacy or security issues. But we do everything we can to avoid those situations. And often, browsers will choose to ‘deprecate’ a feature (like the old marquee element) without actually removing support.

Browser default styles follow a similar pattern. Since CSS was first implemented in browsers, there have been default browser styles. And, while browsers add new defaults on occasion, it’s very uncommon to remove an old default. There’s too much potential to break sites that relied on the default when they were made.

Many of the default styles we have in browsers today are the same defaults that existed back when an HTML element was first introduced.

Purity vs reality in specification

There’s another rule that impacts the development of standards – even non-normative standards (not officially ‘required’ for conformance) like the default style sheet:

A standard is meaningless unless it describes reality.

To be successful, a standard has to be both prescriptive (telling browsers what to implement), and also retroactively descriptive (describing what browsers actually implemented). It’s not helpful to have a specification that is theoretically perfect, if it doesn’t accurately describe the web.

While we often write new standards to explain how a new feature should work, and then expect browsers to implement the feature as specified, that’s only the first step in a more complicated back-and-forth process. We also regularly revisit and revise existing standards to reflect how features actually work, after they have been implemented.

Ideally, when an implementation doesn’t match the spec, we want to consider that a browser issue, and fix the browser. But sometimes – depending how big the change, how many browsers would need to change, and how many sites would be impacted – we’ll update the specification instead.

That’s not the only way we end up with mistakes in the design of CSS, but it makes mistakes harder to fix when they do show up.

Again, we’re prioritizing consistency across browsers and time, over theoretical purity of the standards themselves.

A margin on all our bodies

Last month I decided to track down the origins of this style:

body { margin: 8px }

I knew it was part of the default style sheet, and I assumed it would be a legacy style – initially provided by one of the early browsers, and eventually standardized for the sake of web-and-browser consistency.

But where did it come from originally? I decided to ask twitter, and eventually we were able to (mostly) track it down.

Step 1: The specification

Alan Stearns (one of the current CSSWG chairs) pointed me to the first specification with 8px margin in the default style sheet:

Spec-wise, it first showed up in 2003 https://w3.org/TR/2003/WD-CSS21-20030128/sample.html. The version from the previous year had padding: 8px

—@alanstearns, June 17 @ 8:34pm

Whoops, off by one. The 2003 had padding. 2004 changed to margin https://w3.org/TR/2004/CR-CSS21-20040225/sample.html

—@alanstearns, June 17 @ 9:26pm

The change from padding to margin is interesting. But I figure these spec style sheets were likely describing some prior browser reality – not inventing the style from scratch?

Step 2: The original browsers

There are several links that I revisit on occasion, when I’m curious about the early history of CSS. My favorite are the source documents themselves:

Cascading HTML style sheets – a proposal by Håkon Lie (the proposal that became CSS)
Historical Style Sheet proposals

But there are also great articles that tell the story of how CSS came to be:

A brief history of CSS until 2016 by Bert Bos (co-author of the original CSS spec)
A Look Back at the History of CSS by Jay Hoffmann on CSS-Tricks
The Languages Which Almost Became CSS by Zack Bloom

All of these are excellent, and I highly recommend reading through them to understand why this language works the way it does.

That got me a list of the first browsers with CSS, but it didn’t give me any more detail on the body margin question:

For context, IE3 was the first commercial browser with CSS. That’s 1996. Then Netscape 4 added some support. Before either of those, CSS was being tested in Argo & Arena… How far back does it go???

https://www.w3.org/Style/CSS20/history.html

—@TerribleMia, June 17 @ 9:52pm

Step 3: The www-talk & www-style archives

Of course, most of those ‘historic style proposals’ were originally written as emails to the www-talk@w3.org mailing list, or (later) the more focussed www-style@w3.org list – both of which are well-archived, and searchable.

(One advantage of having a medium created by a bunch of information-science nerds.)

Searching the archives lead me to an email from Todd Fahrner in March of 1998 – Re: IE, NN and background-position: thpppt!

My most recent revision to the “Base Stylesheet”[1] has the body margin set to 0 and the padding set at 8 pixels. Previously I had the margin at 8 pixels, 0 padding, and the background-position set to -8px.

…

[1] https://www.verso.com/agitprop/corestyle/base.html

It’s an email thread about the proper handling of background-images, so not exactly on topic, but there’s our 8px padding-or-margin on the body.

Step 4: The wayback machine

That reference link is broken, so I jumped over to The WayBack Machine to see if there was an archived copy – and there are several!

First, I landed on The Base Stylesheet - February 22, 1999, which claims it was last modified 7 November 1998. Then I clicked through to the earliest archive of the page – The Base Stylesheet - January 30, 1998 – which says it was last modified 07/04/2022 16:39:51 GMT (the exact moment I loaded the page).

Wait, what? Inspecting the source code, I found this:

<p>
  This is a work in progress, last modified
  <script>document.write(document.lastModified);</script>
  <noscript>quite recently</noscript> GMT...
</p>

I assume the document.lastModified is getting updated by The WayBack Machine every time we load the page?

Final answer: the base stylesheet

This is what we’ve been looking for: the original default style sheet, still under development. There are a few quotes that stand out:

The Base Stylesheet describes the “consensus default” rendering of all HTML 4.0 elements in Mosaic-derivative Web browsers (Netscape Navigator and Microsoft Internet Explorer). It … captures the status quo in order to move beyond it.

Those are the major browser-engines at the time, and they both trace their roots back to the previous Mosaic browser.

The Mosaic browser’s allegedly “neutral” default stylesheet is a simple adaptation of the normative style for (printed) scientific writings in Europe (cf. Wanning, Frank; Internationaler Typographie und wissenschaftliche Textverarbeitung; Haag + Herchen, 1996). This is appropriate enough considering the Web’s origins at CERN. In view of the Web’s far more common applications in commerce, entertainment, journalism, and the humanities, however, and the deeply entrenched market dominance of Mosaic-based browsers, it is fair to say that “correct” HTML has been infected with a reliably inappropriate style, like a cancer or virus.

The escape of the Mosaic Browser Default Stylesheet (MBDS) virus from the scientific community at CERN has produced Web generations of mutant tools and authors who misapply markup solely to invoke certain MBDS effects. The use of <p> to produce vertical whitespace and table structures for nontabular information are signature examples. The high reliability of such manipulation accounts for HTML’s grotesque cannibalization beyond academia, and the market success of architecturally incongruous HTML extensions for symptomatic relief. To reverse this epidemic, it is necessary first to isolate the virus, and expose its genes to precise and comprehensive manipulation. The Base Stylesheet is a CSS1 model of the MBDS virus, and the first step toward the development of “style antibodies” - comprehensive alternative stylesheets for HTML.

Lol, the snark.

So there you have it. This style sheet is meant to capture what was already happening before CSS existed in Mosaic-based browsers, and recreate those styles in CSS. The 8px spacing on the body predates CSS! The style likely comes directly from Mosaic’s internal rules, before CSS was invented, so the only remaining question is how to represent it – as either padding or eventually a margin.

Todd Fahrner's (early draft) Base Stylesheet

A, ABBR, ACRONYM, ADDRESS, BDO, BLOCKQUOTE, BODY, BUTTON, CITE, CODE, DD, DEL,
DFN, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, IFRAME, IMG, INS,
KBD, LABEL, LI, OBJECT, OL, P, Q, SAMP, SPAN, STRONG, SUB, SUP, UL, VAR,
APPLET, B, BIG, CENTER, DIR, FONT, HR, I, MENU, PRE, S, SMALL, STRIKE, TT, U {
  background: transparent;
  width: auto;
  height: auto;
  text-decoration: none;
  margin: 0;
  padding: 0;
  border: 0;
  float: none;
  clear: none;
  vertical-align: baseline;
  list-style-image: none;
  list-style-type: disc;
  list-style-position: outside;
  }

ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5,
H6, OL, P, UL, CENTER, DIR, HR, MENU, PRE {
  display: block;
  }

A, ABBR, ACRONYM, APPLET, BDO, BUTTON, CITE, CODE, DEL, DFN, EM, IFRAME, IMG,
INS, KBD, LABEL, OBJECT, Q,
SAMP, SPAN, STRONG, SUB, SUP, VAR, B, BIG, FONT, I, S, SMALL, STRIKE, TT, U {
  display: inline;
  }

LI {
  display: flow-item;
  }

/* Begin tree of inherited properties and cascades. */

/* Describes the default type, color, and link decoration specs of
Mosaic-derivative browsers to the extent and degree of granularity that users
may typically override. Uncomment for "factory settings."

HTML {
  font-family: "Times New Roman", Times;
  font-size: medium;
  color: black;
  background-color: #BFBFBF;
  }

PRE, TT, CODE, KBD, SAMP {
  font-family: "Courier New", Courier;
  }

A:link, A:visited, A:active {
  text-decoration: underline;
  }

A:link {
  color: #0000FF;
  }

A:visited {
  color: #7F007F;
  }

A:active {
  color: #0000FF;
  }

end pre-CSS user settings */

HTML {
  line-height: 1.12;
  word-spacing: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-indent: 0;
  white-space: normal;
  }

BODY {
  padding: 8px;
  }

H1 {
  font-size: xx-large;
  margin: .67em 0;
  }

H2 {
  font-size: x-large;
  margin: .75em 0;
  }

H3 {
  font-size: large;
  margin: .83em 0;
  }

H4, P, BLOCKQUOTE, FIELDSET, FORM, UL, OL, DL, DIR, MENU {
  margin: 1.12em 0;
  }

H5 {
  font-size: small;
  margin: 1.5em 0;
  }

H6 {
  font-size: x-small;
  margin: 1.67em 0;
  }

H1, H2, H3, H4, H5, H6, B, STRONG {
  font-weight: bolder;
  }

BLOCKQUOTE {
  margin-left: 40px;
  margin-right: 40px;
  }

I, CITE, EM, VAR, ADDRESS {
  font-style: italic;
  }

PRE, TT, CODE, KBD, SAMP {
  font-family: monospace;
  }

PRE {
  white-space: pre;
  }

BIG {
  font-size: larger;
  }

SMALL, SUB, SUP {
  font-size: smaller;
  }

SUB {
  vertical-align: sub;
  }

SUP {
  vertical-align: super;
  }

S, STRIKE, DEL {
  text-decoration: line-through;
  }

HR {
  border: 1px inset; /* questionable */
  }

OL, UL, DIR, MENU, DD {
  padding-left: 40px;
  }

OL LI {
  list-style-type: decimal;
  }

UL LI {
  list-style-type: disc;
  }

UL UL, UL OL, UL MENU, UL DIR, MENU UL, MENU OL, MENU MENU, MENU DIR, DIR UL,
DIR OL, DIR MENU, DIR DIR, OL UL, OL OL, OL MENU, OL DIR {
  margin-top: 0;
  margin-bottom: 0;
  }

OL UL, UL UL, MENU UL, DIR UL, OL MENU, UL MENU, MENU MENU, DIR MENU, OL DIR, UL
DIR, MENU DIR, DIR DIR  {
   list-style-type: circle;
  }

OL OL UL, OL UL UL, OL MENU UL, OL DIR UL, OL OL MENU, OL UL MENU, OL MENU MENU,
OL DIR MENU, OL OL DIR, OL UL DIR, OL MENU DIR, OL DIR DIR, UL OL UL, UL UL UL,
UL MENU UL, UL DIR UL, UL OL MENU, UL UL MENU, UL MENU MENU, UL DIR MENU, UL OL
DIR, UL UL DIR, UL MENU DIR, UL DIR DIR, MENU OL UL, MENU UL UL, MENU MENU UL,
MENU DIR UL, MENU OL MENU, MENU UL MENU, MENU MENU MENU, MENU DIR MENU, MENU OL
DIR, MENU UL DIR, MENU MENU DIR, MENU DIR DIR, DIR OL UL, DIR UL UL, DIR MENU
UL, DIR DIR UL, DIR OL MENU, DIR UL MENU, DIR MENU MENU, DIR DIR MENU, DIR OL
DIR, DIR UL DIR, DIR MENU DIR, DIR DIR DIR  {
  list-style-type: square;
  }

U, INS {
  text-decoration: underline;
  }

CENTER {
  text-align: center;
  }

CAPTION, COL, COLGROUP, LEGEND, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR {
  background: transparent;
  text-decoration: none;
  margin: 1px;
  padding: 1px;
  border: none;
  float: none;
  clear: none;
  }

TABLE, TBODY, TFOOT, THEAD, TR {
  display: block;
  background-position: top left;
  width: auto;
  height: auto;
  }

CAPTION, LEGEND, TD, TH {
  display: inline;
  vertical-align: baseline;
  font-size: 1em;
  line-height: 1.33em;
  color: black;
  word-spacing: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-indent: 0;
  white-space: normal;
  }

TH {
  font-weight: bolder;
  text-align: center;
  }

CAPTION {
  text-align: center;
  }

/* not part of the legacy browser default sheet, but an obvious enhancement */

OL OL LI {
  list-style-type: lower-alpha;
  }

OL OL OL LI {
  list-style-type: lower-roman
  }

A remedy for the MBDS virus?

The plan didn’t work out exactly the way Todd Fahrner imagined. That base style sheet lives on, with a number of Mosaic-based styles intact. There are no comprehensive alternative stylesheets for HTML – at least not from the w3c or the browser vendors. Both are too invested in backwards-compatibility to make any radical changes to the default styles of the web.

If it’s going to happen, it will have to come from web authors who can choose to opt-in to a new stylesheet, without worrying about backwards compatibility. To some extent, you can think of various resets and normalizers as attempts at a new comprehensive stylesheet – tho resets generally remove too much (relying on authors to put it all back), and normalizers often worry more about browser-consistency more than improved styles.

This is what lead Jen Simmons to create CSS Remedy. (I’m one of the core contributors, though there hasn’t been much work on it recently). The goal is to re-imagine a ‘default’ stylesheet for the modern web. What would we come up with now, if we weren’t constrained by what Mosaic did almost 30 years ago? There’s still a lot of discussion, but one thing is clear on line 47 of the main remedy stylesheet:

body { margin: 0; }

For the most part, CSS Remedy isn’t trying to make things pretty – just trying to provide a better default. There are also projects that take a more opinionated approach, providing fully-designed styles for basic HTML elements.

Last month, Robin Rendle posted some thoughts on The Smallest CSS – What’s the smallest amount of CSS that you can write to make HTML look halfway decent? It’s a great little exploration, landing on about 15 lines of CSS.

I also appreciate the ‘no-class frameworks’ – based entirely on writing semantic html, without any need for special selectors. Here are some more classless CSS libraries to look at.

I’m tempted to try something like that myself. We’ll see. Maybe this site is almost due for a refresh.

Reply via Email | Mastodon | Bluesky

The gray areas of HWB color

2022-06-29T00:00:00Z

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 and blackness to achieve less-saturated lighter and darker variants. For any given hue, you can visualize a triangle with a fully saturated color in one corner, and then white and black in the other corners. This is how the old Chrome color picker used to show HWB color:

The side of the triangle across from our saturated-hue corner is entirely grayscale – the line at which blackness and whiteness together reach 100%, and wash out any contribution from the hue.

I think it’s a pretty good model for adjusting colors. Mixing with white or black is often the best way to ‘lighten’ or ‘darken’ a color. Under the hood, HWB still relies on RGB color math (which is not perceptually uniform) and the sRGB color space (which is fairly limited) – but that’s also true of the more popular HSL format.

HWB in CSS

The hwb() function in CSS expects a hue angle (usually in degrees) and two percentages representing the amount of ‘whiteness’ and ‘blackness’ to mix in:

/* a bright cyan with only slight whiteness & blackness */
html { background: hwb(180deg 5% 10%); }

Because we’re using numbers here instead of a triangle, it’s possible for the combined whiteness and blackness to overshoot 100%. If you lay the results out in a table, the triangle is still visible – where the combined whiteness & blackness are less than or equal to 100% – but we also see a reflected grayscale triangle where the combined values are greater than 100%:

w0%

w10%

w20%

w30%

w40%

w50%

w60%

w70%

w80%

w90%

w100%

b0%

b10%

b20%

b30%

b40%

b50%

b60%

b70%

b80%

b90%

b100%

An HWB table of colors using 180deg hue, incrementing whiteness and blackness from 0 to 100%.

That extended grayscale triangle is useless. There’s nothing meaningful to find out there in the wilderness beyond 100% grayness – so CSS just scales whiteness and blackness down until they fit the triangle again. The rendered color hwb(0deg 50% 50%) is identical to hwb(0deg 60% 60%) and hwb(0deg 100% 100%) – because all of them have the same relative mix of white and black washing out the hue.

‘Powerless’ & ‘missing’ channels

It may be a bit strange that we have access to so many duplicate grays in HWB, but there tends to be some duplication in any color format using hue angles. In HSL colors, for example, a lightness of either 0% or 100% will wash out both hue and saturation. The rendered color hsl(0deg 20% 100%) is identical to hsl(0deg 60% 100%) and hsl(0deg 100% 100%). Still, that’s a much smaller portion of the table:

s0%

s10%

s20%

s30%

s40%

s50%

s60%

s70%

s80%

s90%

s100%

l0%

l10%

l20%

l30%

l40%

l50%

l60%

l70%

l80%

l90%

l100%

An HSL table of colors using 180deg hue, incrementing lightness and saturation from 0 to 100%.

In both HWB & HSL colors, we can describe white and black and a full scale of grays using any hue we want. It doesn’t matter what hue we provide in either table – the grayscale cells will remain the same. In those cells, hue has become ‘powerless’.

CSS Color Module Level 4 defines a number of situations that might result in powerless color components:

hsl:
- If the saturation value is 0%, then the hue channel is powerless.
- If the lightness value is either 0% or 100%, then both the hue and saturation values are powerless.
hwb:
- If the combined whiteness and blackness values (after normalization) are equal to 100%, then the hue channel is powerless.
lab/oklab:
- If the lightness value is 0%, then both the a and b channels are powerless.
- The current spec has an open issue to determine if high values of lightness (whites) should make the a and b values powerless, but there is no clear upper boundary to rely on.
lch/oklch:
- If the chroma value is 0%, then the hue channel is powerless.
- If the lightness value is 0%, then both the hue and chroma channels are powerless.
- The current spec has an open issue to determine if high values of lightness (whites) should make the hue and chroma values powerless, but there is no clear upper boundary to rely on.

For the most part, powerless channels are a harmless result of representing colors through math. But sometimes, when we want to mix or adjust colors, a powerless component can show up suddenly and cause issues. Imagine a gradient from hsl(0deg 100% 0%) (black, with a powerless red hue) through hsl(180deg 100% 50%) (a bright cyan). If we do naive math to get from one to the other – adjusting each channel along the way – we have to go through a full range of hues just to get from black to cyan:

Lucky for us, browsers don’t generally render gradients using naive HSL math:

Currently browsers convert everything to sRGB before mixing. Gradients in RGB can still get muddy at times, but there are no ‘powerless’ components – gray scales involve an equal mix of all three channels – so that’s a separate issue.

The new spec provides a more explicit way to ‘leave out’ a powerless channel, so that it can’t cause issues like this. We can use the none keyword in place of a value to notate a ‘missing’ channel:

/* full black, the hue and saturation are powerless */
html { background: hsl(none none 0%); }

Browsers are instructed to use none when they are converting from one format to another, if the conversion results in a powerless channel. Rather than converting #000 to hsl(0deg 0% 0%), we convert it to hsl(none none 0%) with a missing hue and saturation.

There’s a lot more we can do with missing channels, even using ‘impossible’ colors in interesting ways, but I’ll leave that for a different article sometime.

Clamping vs scaling

So HWB is doing something familiar, but it’s also doing something unique. I don’t know of any other hue-angle system that generates a table like the HWB example above – where only half the cells contain a useful color.

Other color formats will clamp a channel when it goes outside the meaningful range. These HSL colors are the same, because percentages below 0% or above 100% are clamped to the boundaries of that range:

html {
  --red: hsl(0deg 100% 50%);
  --same-red-clamped: hsl(0deg 2530% 50%);
}

HWB works the same way – whiteness and blackness outside the 0%-100% range are clamped. But HWB has to go one step farther. If the sum of whiteness and blackness is above 100%, they both have to get scaled down while maintaining their relative ratio. That means these colors are also the same:

html {
  --gray: hwb(0deg 80% 20%);
  --same-gray-scaled: hwb(0deg 100% 25%);
  --same-gray-clamped-scaled: hwb(0deg 2530% 25%);
}

Wait, what’s the order of operations?

That final clamped-and-scaled color is what caught my attention. At first I wasn’t sure about the order of those two operations, and we get a different result depending on which happens first. Does 2530% 25% first get clamped to 100% 25% and then further scaled down to 80% 20% – or will it get scaled first to roughly 99% 1%, at which point it no longer needs clamping?

The answer is in the spec, though it’s a bit subtle and I missed it at first (emphasis added):

Values outside of these ranges are not invalid, but are clamped to the ranges defined here at computed-value time. If the sum of these two arguments is greater than 100%, then at computed-value time they are further normalized to add up to 100%, with the same relative ratio.

At first that seemed like a mistake – why not maintain the ratio where we can? – but in practice it makes sense. We have to clamp the lower boundary, since negative values have no meaning, so it’s reasonable to start by treating the upper boundary in the same way.

Out-of-range percentages are meaningless, and corrected like a typo, but redundant grays are a natural outcome of the math – still meaningful, even if they aren’t that useful.

The answer to my question

All of that, just to show you this light gray box. It’s a ‘gradient’ of the three HWB colors above, showing that they are actually the same color – one defined appropriately, one needing to be scaled, and a final version that needs both clamping and scaling:

Sass will soon be adding support for all these new color features, and a few more. If only I would stop documenting the rabbit holes, and get back to work on the proposal.

Reply via Email | Mastodon | Bluesky

Miriam, for the archive

2022-06-17T00:00:00Z

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 Matthias Ott, 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 type:

Miriam Suzanne, for the archive –

Reply via Email | Mastodon | Bluesky

Complex vs compound selectors

2022-06-15T00:00:00Z

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 little bits – a class, a tag, an ID, etc. Those can be combined in various ways.

These are compound selectors:

img#hero { … }
a:focus { … }
.only.with.all.of.these.classes { … }

A complex selector is a sequence of one or more compound selectors separated by combinators.

Those compound selectors weren’t complex enough for you? Try combining them! These selectors are complex:

#hero img { … }
a:focus > .icon { … }
.only.with ~ .all.of ~ .these.siblings { … }

Simple selectors describe element properties, that can get merged together into compound selectors describing entire elements, and then joined into complex selectors that put those elements in the context of relationships. And we can string all that together into selector lists, targeting multiple elements based on a variety of properties and relationships. It’s a big world out there, kids. A big, declarative, cascading world.

Now ~~you~~ I know. Now ~~you~~ I can forget again, and know exactly where to look.

Reply via Email | Mastodon | Bluesky

The spam has arrived

2022-06-09T00:00:00Z

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, and some of the Wordpress plugins that can help.

But I didn’t see a mention from CSS-Tricks (at least not right away). Instead, Geoff’s post has been re-posted by ‘admin’ on a long list of random URLs, all (web)mentioning my original post. The webmention.io dashboard shows me all of them (with a few legit mentions scattered through):

All of these mentions made it into my local cache, but only one made it into a build. It seems the rest were caught in a simple filter that came from Max Böck’s Eleventy Webmentions starter. It’s a quick JS function that ensures every mention has an author name and a timestamp.

// only allow webmentions that have an author name and a timestamp
const checkRequiredFields = (entry) => {
  const { author, published } = entry;
  return Boolean(author) && Boolean(author.name) && Boolean(published);
};

That caught all but one of the spam mentions (‘admin’ made it through!), but it also caught the mention from CSS-Tricks, which doesn’t include Geoff’s info, a timestamp, or even content. So I already have both false negatives and false positives in my filtering. Fun!

I can go through these by hand, and delete/block each one in the dashboard. I also have to delete them in my local cache. And while I’m at it, I’ve added author info in the cache for Geoff? We’ll see if that sticks. But there has to be a better way, right?

Right?

There has to be a better way, right?

Reply via Email | Mastodon | Bluesky

Am I on the IndieWeb yet?

2022-06-04T00:00:00Z

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 reminders to Use A Personal Site.

Personal sites are great! But I have some issues with that reply, and I posted about it on Twitter:

Personal sites are wonderful. But they can be a lot of work to set up & maintain. Also: personal solutions don’t solve the problem of building networks & public digital spaces.

If we want ‘personal sites’ to be an answer to social platforms, we have a lot of work to do.

—Me, on Twitter

At the core, I’m skeptical about treating “public space” issues as a matter of personal responsibility.

Chris Coyier made a point of replying on his personal site – a lovely little post about how cool RSS is, and the benefits of “slow social” web interactions.

And I agree completely! [insert requisite mourning for Reader]

But then I look at my site – this site, here – and it’s a struggle to get all the pieces working the way that I want, especially when it comes to syndication.

I do have a feed that you can subscribe to, but I’ve struggled to categorize what on my site is a “post” worth syndicating vs a “page” vs ???.

And I’m not always sure I have it set up right? Validators flag the style attribute (setting custom props in some content), or embedded iframes (for audio/video), or scripts (usually for embedding content). How much should I worry about these issues? Do I need to run my content through a tool like sanitize-html, and if so, how strict should it be? I often have similar questions when setting up microformats, and trying to match the needs of the format to the needs of my content.

These are very solvable problems with testing and research – but they start to add up.

WebMentions

Since making that post, I’ve also started to explore WebMentions, following instructions from Matthias Ott, Keith Grant, and Max Böck. I recommend all three articles, but the first thing that becomes clear is that this requires multiple steps, and is not a simple or straight-forward process.

The first round required several online services along with HTML & JS changes to my static site, just to verify my indieweb identity. Then more changes to the site and more online services to help fetch any mentions ~~(so far, nothing to see, but that’s probably expected)~~. It seems the only way to test the setup is to launch all those changes publicly, and then ask for other devs to send you mentions.

(That’s partly the goal of this post.)

Every time I think I have the basics in place, I find some other set of instructions suggesting there’s another step to take.

Update 2022-06-05: I seem to have things working here now, but I’m still not entirely clear on how it works. In the end I’ve added some metadata to the site head, a number of microformats to the markup, several third-party services, and an API call to download the data from one of them. I’m not convinced I have all the details right, and I’m not sure which validators to test against.

If I want live updates (this is a static site) there’s still more to learn.

A Proof Of Concept (for developers only)

I’m an experienced web developer, and I can figure it out. But the steps aren’t simple, and most of my friends are not web developers. So, to me, this all feels like the prototype of an idea – a proof of concept.

We have the technology to implement a slow social network of personal sites. I’m excited to keep playing with that code. But proving the concept is not the same as actually making it easy & accessible in a way that can replace platforms.

What’s Next?

I know there are plugins for WordPress and other blogging software to help make the setup simpler. That’s great!

What I would like to see is a tool that helps bring the entire system together in one place. Somewhere that non-technical people can:

build their own site, with support for feeds/mentions
see what feeds are available on other sites, and subscribe to them
easily respond to other sites, and see the resulting threads

That’s a large feature set, I know. In my mind, it would make the most sense for those features to live in a browser, but it might be possible to build as a web service with browser plugins?

Whatever it looks like, it will take a lot of work to get there.

Reply via Email | Mastodon | Bluesky

My theatrical delusions

2022-04-20T00:00:00Z

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 Giovanni or whatever. There must have been subtitles. This was on VHS, I don’t remember.

I loved the part where they drag Don Giovanni to hell, The orchestra swells, there’s smoke and red lights coming through the stage floor, and I think hands reach up to drag him down? Like, can you imagine anything cooler?

Probably. But, I couldn’t.

For context, this was Indiana before the Web went World Wide! And my dad – maybe rebelling against his own father – became a car mechanic & a farmer. Working with his hands. So I grew up splitting firewood, and throwing hay bales.

But every summer, my uncle Bruce would come stay with us. That’s on my mom’s side, her brother. He was a stage manager at the Indiana Repertory Theater, and would get 3 months off every summer.

And eventually he started doing Shakespeare in the Park while he was in town. And he would cast me as one of the fairies in A Midsummer Nights Dream, or part of the Night Watch in Much Ado About Nothing. Which, nepotism? Great job, if you can get it. But honestly, it’s a small town. The auditions were not exactly packed. If you really wanted to be in the show, you probably were in the show.

So I’m in Much Ado – maybe middle-school at that point, I’m not sure. My uncle’s directing, and my dad is cast as The Friar. We’re both in this show together, and I can’t drive yet, so dad is my ride home after rehearsal, and… He spends that time telling me all the things I got wrong – explaining to me why I’m not a very good actor. I need to work a lot harder, or, you know, stop deluding myself. Find something I’m actually good at.

And after that show, and a few more rounds of that fatherly feedback, I mostly stopped acting (until recently). But I did keep doing theater. I found my place off-stage – lighting design, and then writing and directing. Pointing the spotlight at someone else.

And he seemed to like that batter. I was not in the room, but I overheard him once, telling a friend that he liked a play I wrote. So, big win for me. Since then he’s said it to my face, but that’s the first I remember hearing it.

Still, what he usually said to me was that it’s good to make art, but not healthy to be an artist. “Every artist I know is in therapy. It’s bad for you, emotionally, to play make-believe all the time. You also have to do something to keep yourself grounded. Something with your hands.”

And I was like, ok but counterpoint: therapy is actually pretty great, and you should try it sometime? That didn’t go over well.

I do now make my living writing code and stuff on the World Wide Web. So I don’t know if typing counts as using my hands, but I’m not just an artist.

When I get to college, I’m studying theater, but I also start running a theater company downtown with some friends. So we’re rehearsing at the college every night, like 6-10, then grab a snack, head downtown, and rehearse our own shows until 2 or 3am.

And at some point my mom is like: does it really make sense to run a theater company while you’re a full-time student? And I’m like: no, not really. You think I should drop out of college?

That’s not what she thought.

Grandma would always come to our shows, but then had concerns about the violence, or the swearing. I mean, she also recommended I watch A Clockwork Orange, so it’s not like she couldn’t handle the occasional artistic violence.

But she’d point to Shakespeare, like you know, he doesn’t say the F word even once! And I’d try to argue that Much Ado About Nothing is basically a single extended sex joke for three and a half hours.

If you don’t know, some people have… dangly bits. And other people do not have those same bits. Some people have… nothing. And so this play is just people getting all hot and bothered about… nothing! It’s like 16th century American Pie.

Grandpa, the opera lover, would also come to my shows. And he generally liked them, but then every time he would suggest ways we could explain the show better? Like if it was magical realism, he’d be like “that’s great, I love all the magic, but wouldn’t it be more clear if it was just realism realism?”

(Probably, yeah.)

He also would ask me about what classes I was taking in college, of course, but then he’d realize they were all art classes, and ask if I was studying anything real, you know.

I think it was his brother, or maybe brother-in-law, who asked a writing professor: Why would anyone write fiction, it’s not even true? So there you go. It runs in the family.

Somewhere around that time, in college, I got married, and then divorced. That’s another story. But my ex used to say that all theater is pornography. And not in a good way, she was not getting off to it!

I mean, I think she liked theater fine when I wasn’t doing it, but then… I’d be at rehearsal late, with other women, and… You can’t trust actors, right?!

You can trust me, I’m not an actor. I’m just on stage, holding a script.

But ok, my senior year – my second senior year? – I was there 5 years and never graduated, so maybe mom was onto something, I don’t know.

I was asked to write subtitles for the big spring opera production – one of grandpa’s favorites – The Marriage of Figaro. They were performing it in the original Italian, and they wanted subtitles to help people follow along.

And I’ve been training for this my whole life!

But Figaro has the same problem as Much Ado, right? It’s written in Italian, in 1786, and it’s a sex comedy?! Somehow I missed that as a kid, watching it on VHS with grandpa, but that’s what it is. And these Italian sex jokes are not going to land well in Indiana two-hundred-some years later. Even worse, if the jokes did land, it would be a fucking scandal!

So they’re not asking me to translate – there are plenty of translations out there – what they need is someone to make it funny, while keeping it G-rated? Which… I tried, and I guess it caused some faculty fights? Theater department loved what I was doing, but the music department thought I was basically spitting on Mozart’s sacred grave.

The show was fine, my subtitles were mostly there, redacted slightly, and grandpa came to see it. And then, for the rest of his life, another 15 years, we have this one conversation over and over.

My Grandpa died early in the pandemic, but for the last few years of his life his memory was getting worse. And he sort of latched onto a single thought, or a single question he had, for each person when we would visit.

For my brother, the question was: “how do cordless phones even work? There’s no cord! Is it like wifi or something?” But for me, the conversation was always about that production of Figaro, and my subtitles.

He loved it? He loved the subtitles. So creative, and so much fun! He would laugh every time just thinking about it. But… had I considered? It might have been more clear, if I had just done a literal translation? Word for word, you know? Like on the VHS?

(Yeah, probably. I miss him.)

Eventually my company fell apart, and I moved to Denver. Now I have my web work, the bands, other art I’m doing. I got an accountant to help with self-employment taxes. And the accountant says “That’s really cool that you like doing so many different things, but some day you’ll have to pick one thing to actually focus on, right?”

And like, ma’am: I’m almost 40. So… no. But I love that you’re giving it a go as a life coach! That’s excellent for you. Do you still do taxes, because I really need help with my taxes.

There’s another cousin, I think maybe grandma’s cousin – once or twice removed, I don’t know – we just called him “uncle Chuck”. As kids, he was like an extra grandfather from out of town, kind of clown-like, entertaining. We thought he was cool.

But in 2005 he was dying, and I drove with my parents to visit him in the hospital. And he wanted to talk to me, specifically? He pulls me in close, and says:

“I dedicated my life to theater”. Which, I had no idea actually. But really, I think, he dedicated his life to Drama Therapy. He was a psychologist, I think? Which is different. But what am I going to do, fact-check him in the hospital?

Uncle Chuck was also an evangelical, a missionary. Something I didn’t really understand as a kid. But when I was going through my divorce, he sent me this bulging envelope: pages of clipped articles from Focus on The Family or whatever – explaining the sacred permanence of marriage, one flesh, etc, and the psycho-spiritual damage I would cause (or suffer?) if I ever had sex again? I don’t know.

He didn’t live to find out that I’m a queer trans woman, and that’s fine.

So we’re there, in the hospital, and he says “I dedicated my life to theater, but now I see all these movies coming out of Hollywood, full of drugs and sex and swearing and violence. It’s evil. I thought theater was good! I thought I was doing something good with my life. You do theater. Was I wrong? Was it all a lie? In the end, is theater evil?”

And… I don’t know, Chuck. Yeah, probably.

Anyway, here we are now. I have a new show opening in a couple weeks. It’s a one woman show with two women, a tragedy but also a comedy, and it’s dealing with identity and change. I wrote it. It has a lot of swearing, and some violence, for sure some weird bits that grandpa would cut… and I would say, some Significant Ado about Very Little.

And I’ll be on stage again. Acting? And I think my parents are flying out to see it? So… I hope dad likes my acting better this time. But we’ll see.

Reply via Email | Mastodon | Bluesky

A Complete Guide to CSS Cascade Layers

2022-02-21T00:00:00Z

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.

Reply via Email | Mastodon | Bluesky

Container queries explainer & proposal

2021-05-02T00:00:00Z

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 using a new @container rule, with similar syntax to existing media-queries.

The approach has been approved by the CSS Working Group, to be added in CSS Containment Level 3, with me as one of the authors.

See the Contain 3 Project for issues and progress.

Establishing Containers

The first step is to establish containers. Any element can become a container, by adding layout, size (generally inline-size), and style containment:

/* Establish containers */
main, aside {
  contain: layout inline-size style;
}

This syntax works in the prototype, but is clearly not ideal for readable and clear code. There is an open issue to discuss better syntax for establishing query containers

Note: See the Editor’s Draft Specification for the latest syntax. The Chrome prototype already has basic support for container-type and container-name.

Writing Queries

Each container creates a containment context that can be queried by their descendant elements. We can query the current containment context (the nearest ancestor container) using an @container rule that is very similar to existing @media queries:

/* Change styles according to container size */
@container (min-width: 35em) {
  .media {
    grid-gap: 1rem;
    grid-template: "media content" auto / max-content 1fr;
  }
}

The .media class above is now responsive to any container it is in. Each instance of the .media class will query its nearest container.

That means we can have one .media element that moves around, responding to the context we put it in – or multiple .meia elements, each one responding individually to its own location.

Prototype

Chrome has released a prototype in their nightly build. To experiment with the feature, and leave feedback while it is still in development:

Download Chrome Canary,
Go to chrome://flags in the url bar, and
Search for “CSS Container Queries” & enable the experimental feature
Restart the browser

This is a draft prototype and may not match the final design.

Demos & Articles

For a quick introduction, check out:

Container Queries: a Quick Start Guide by David Herron
My collection of codepen demos

Or dig into more resources, for the full details:

MDN Documentation by Rachel Andrew
Container Queries are actually coming by Andy Bell
Say Hello To CSS Container Queries by Ahmad Shadeed
(Annotated on CSS Tricks by Robin Rendle)
CSS Container Queries: A First Look + Demo by Bramus Van Damme
Awesome-Container-Queries by Stuart Robson

Reply via Email | Mastodon | Bluesky

Very Extremely Practical CSS Art

2020-12-08T00:00:00Z

“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 done, but I had never seen the process unfold.

Any time CSS art starts getting attention, there is always someone around to say “that’s not practical” or “just use SVG” or something similarly dismissive and boring. It’s a terrible argument, even if it was true – no one is required to be Practical At All Times. What a terrible world that would be.

In October, I took the time to watch Lynn Fisher (Twitter, CodePen), one of my favorite CSS artists, live-stream her single-div process. Somewhere in the back of my mind, I assumed single-div artwork relied on highly complicated box-shadows – almost a pixel-art approach. I’m not sure where that idea came from, I probably saw someone do it years ago. But her process is much more “normal” and “practical” than I even realized: a number of reasonably layered, sized, and positioned background gradients.

Wait. I know how to do that. It’s not the technique that’s magical – it’s the audacity of turning a few gradients into a block of cheese with cake inside!

I’ve used all these properties before on client projects. I’ve created gradients, layered images, sized them, and positioned them for various effects. None of that is new, or complicated, or radical. I really didn’t learn anything at all about the CSS itself. But it had a huge impact on my perception of what I could accomplish with those simple tools.

Within a few weeks, I was using that in production. Again, it’s nothing fancy or complicated – the perfect low-hanging fruit where a custom SVG feels just slightly too bulky. Here’s the effect I created, for a personal project, with a few custom properties to make adjustment easier:

Last week we used a similar trick as part of a Very Practical & Official client component library. It was Stacy’s idea, and it worked great.

Thanks Lynn, and all you other fabulous CSS Artists! Thanks for showing us all how much farther we can push this language that we love so much, and the Very Serious tools we use every day.

Reply via Email | Mastodon | Bluesky

An open CSS notebook

2020-11-17T00:00:00Z

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 that are also generated into a static site at css.oddbird.net.

Reply via Email | Mastodon | Bluesky

Custom Property “Stacks"

2020-06-22T00:00:00Z

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

2020-02-13T00:00:00Z

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 book. What resulted is a kind of double-sided diary told by my friends, family, peers, and total strangers. They are my words but read in other peoples’ bedrooms, on their porches, on their commutes, with their children. Two kinds of intimacies are joined and rather than them canceling each other out they are somehow multiplied.

—Sommer Browning

Reply via Email | Mastodon | Bluesky

Embracing the Universal Web

2019-11-26T00:00:00Z

“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, we’re able to create more “Intrinsic” designs (a term coined by Jen Simmons) and hopefully re-think some “best practices” that are now holding us back.

That’s exciting but even more interesting to me in the context of a universal web. I began my career during the height of the Web Standards Project, CSS Zen Garden, Designing with Web Standards, and A Dao of Web Design – saturated in the philosophy of universally accessible design. CSS was relatively new, and explicitly designed to balance the desires of a web-creator (like me) with the needs of each individual user (also me), on any number of devices. Terms like “progressive enhancement” and “unobtrusive JavaScript” dominated the industry. We were moving away from “only works in X browser” warnings, to embrace an accessible and resilient user-centered medium.

Over the years, some of those concerns have become industry best-practice. CSS is now standard, and responsive design is the norm. But I also see (and build!) more and more apps targeted at a narrow range of modern, evergreen browsers. Or we ignore new features for years in order to support a browser like IE11. We’ve become resigned to a sense that browser support is binary, and we can only use the features that exactly match our “supported” browsers.

There are many reasons for that shift, including excitement around very cool new features. I don’t think it’s surprising for an industry to have these cycles, but I do think it’s time to reflect on where we’re heading. New CSS features are designed with universal accessibility in mind, and we also have new features for managing browser-support on a continuum, much like viewport-size.

Whatever we want to call it Intrinsic Design, Resilient CSS, Progressive Enhancement, Universal Accessibility, or something else – I think we’re poised for a new movement and a new era of web creation. It’s time for us to take the lessons we learned from Responsive Web Design, adapting to screen sizes, and expand out: adapting to screen readers, legacy browsers, “smart” speakers, and any number of other interfaces.

I’m interested in new methodologies and conventions that move past managing specificity and cascade, or phones and laptops, to help us all manage accessibility and universal compatibility. I’m interested in finding ways to embrace all that is wonderful and new on the web, without abandoning the beautiful vision of a universal web.

We have the tools. Let’s do this.

Reply via Email | Mastodon | Bluesky

CSS most normalizer-est

2019-11-02T00:00:00Z

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

2019-10-07T00:00:00Z

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

2019-08-28T00:00:00Z

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”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in this document are to be interpret… ↩︎

Reply via Email | Mastodon | Bluesky

Not clear to me, an installation

2019-07-05T00:00:00Z

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

Framed | Born to choose this way

2019-06-19T00:00:00Z

A reflection on change, desire, choice, and the stories we tell about ourselves

Last week, my dad sent me a newspaper clipping from the Gary (Indiana) Post-Tribune – December 20, 1999. There’s a photo of me at 17, a senior in high school, leaning against a mountain bike. I’m wearing baggy jeans, socks, and Birkenstock. Because it’s the 90s and I’m into fashion.

To quote the caption, I had been living rustically since September, when I moved into a small cabin at the edge of my parents farm, along the Elkhart River. An experiment in simple living according to the article. That’s true. I had a hand pump over the sink, a wood stove for heat, an outhouse, some oil lamps, and a typewriter for my homework.

I read a lot of Thích Nhất Hạnh in that cabin, and wrote some truly mediocre poetry. What a writer friend referred to recently as poemy poems, about stones.

The article also says I had aspirations towards a monastic life after high school. I don’t remember serious monastic plans exactly, but now I’m a software developer, and a musician living in a loft just off South Broadway. It’s not rustic or monastic. When I want to write mediocre poetry now, I walk down to the Bardo coffee house and listen to Lizzo on my Airpods. What happened?

Here’s the headline from the article: Teen son lives like Thoreau, says dad.

Teen son. I couldn’t read the rest of the article. I went back to watching Project Runway. I don’t want to spoil anything, but Bishme is great, and Garo’s a total hack.

So I’ve been thinking a lot about change. . Identity change. I was raised Mennonite, but at some point that label stopped making sense. I was raised a boy, too, but that didn’t stick. I was also married, once – that’s another story. But I remember talking to my aunt during the divorce. This was 2004, maybe 2005. We’re sitting around her kitchen table late at night, and she says You can start dating again once your ex doesn’t come up in daily conversation – once the stories you tell don’t involve her.

It’s not a perfect rule – date whenever you want to – but I still love something about that: using our internal narrative as a guide. Not in some spiritual sense, but very practically. My identity is a story that I tell to myself, and to you, and I can change the way I tell that story, but it takes time to write that new material. Or to live that new material.

In this case, material without my ex wife – which is awkward, ‘cause here I am 15 years later, standing on stage, talking about her.

Sorry Erin! I guess I’m not ready to date yet!

But back then, living in that small community, small Mennonite college town, everyone knows me – knows us. Everyone needs to hear the story, so I tell it over and over for months. And it’s clear, every time, that I’m being cross-examined. I’ve done something bad, and I have to defend my actions. And I can do that. I can tell that story, but it feels gross.

Why do I need to explain myself to you? It was bad and I left. Trust me.

And I think about smaller changes, too. I remember moving to Denver – driving in on 76 for the first time. This is August 2007 now, and I remember the sun setting over the mountains due west, and storm clouds rolling in from the southwest – lightning flashing behind a city skyline.

The scale of it! The expanse. To see that storm from a distance, between a skyline and a mountain range. That’s not a thing in Indiana. It feels like space and possibility. So much room for something new. So much more to the world than right here or right now or just me. It felt like home. Driving home. A home I’d never been to?

I would sometimes walk down 16th street at night just to feel invisible – part of a crowd. Someone else might frame this as a move from the peaceful woods to the bustling city, but my experience was the opposite. Being unknown gave me room to think, and space to change – emotional space the cabin couldn’t provide.

And then I would meet people, and they’d ask where I’m from, and they’d mean before Denver, and I guess Indiana? But it felt wrong, like the wrong question. Not because Indiana is bad – this was before Mike Pence – but because, I don’t know, I was eager for my narrative home to catch up with my experience of home.

And a year later I was on the road back through the Midwest, touring a theater production with new friends. And every night, after the show, audience members would ask where we came from. I was so happy. I’m from Denver! I mean, it’s super silly – this gentrified mess of a city. Shrooms are legal, but being homeless is a crime.

Still, at that point, I guess: home is important. It gives your story context. The frame matches the content.

But what happens to that old story when the new one comes along? Suddenly we’re correcting everyone. I’m not Mennonite anymore. I’m not married. I’m not a boy. You’re thinking of Yesterday Me! Yester-me! She’s a whole different person! And again, coming out – this is 2015 now – I’m asked to explain and defend my actions.

It was bad, and I left. Trust me. This frame matches the content.

And the story we expect to hear – want to hear – is that born-this-way narrative. Trapped in the wrong body, whatever that means. This body is mine. It just needed some estrogen up in there, that’s all. Anyway, I remember being that boy in that cabin, talking to the South Bend Post-Tribune about simple living and monastic life. I was that titular teen son.

But I do also remember – all along – how much I wasn’t a boy when I lived in that cabin, and talked to that reporter. I mean, obviously: it was me in the cabin, and I’m not a boy. We grow. We change. We have to tell a new story, and bring people along. We have to get our stories straight.

Not straight, straight, but straight. You know.

I wasn’t born this way, I grew into it – like every child grows into their adult narrative. I chose it. I looked at my options, and chose estrogen, and I’m proud of that choice. It’s ok to have choice. Choice is a good thing. I’m tired of the narrative that my queerness is ok as long as I didn’t want it. I wanted estrogen, and I got it. If you want estrogen, you can have it too.

All of that is true, and also. Also I was born with all of this inside of me. Born to grow into this desire, this choice. Born to choose this way. Because biology and choice aren’t at odds, they’re both part of life – being alive. Life isn’t static, it moves and changes. As it moves, we tell new stories. We take a snapshot, we add a caption, and we publish it in the Gary Post-Tribune. One moment in time. One boy who’s also a girl. One boy who will grow into a woman.

Anyway, I got Erin to read the article out-loud to me – translate it so I could hear myself in the story. “Teen daughter lives like Thoreau, says dad. Miriam needs space and quiet, and she’s got that now.” And it’s interesting to read that – or hear it – knowing what I know: about myself, about my loud father, about being introverted, and an activist, a writer, caring about the world – what I’ve done with those feelings, those beliefs. Not letting them go, but letting them grow with me, to become who I am now.

And, well yester-me, fuck. The world hasn’t gotten better. Shit’s bad, and you’ll have to keep fighting. But you’ll be glad to know: you get to be a girl, you love it, you’re not from Indiana anymore, and you finally – after many failed u-haul-lesbian relationships – you finally live on your own, not entirely monastic, surrounded by friends, with a wonderful partner just down the hall.

If I’m still allowed to date after this.

Reply via Email | Mastodon | Bluesky

Last Bullet, live music video

2019-04-20T00:00:00Z

Last Bullet at Seventh Circle

Reply via Email | Mastodon | Bluesky

A Dark Plain, live music video

2019-04-14T00:00:00Z

A Dark Plain at Seventh Circle

Reply via Email | Mastodon | Bluesky

Guts | Let's Faint for Each Other

2019-02-15T00:00:00Z

Erin talks about fainting from too much empathy before my surgery.

Erin Rollman, a call for empathy

Erin is a founding member of Buntport Theater and the co-host of The Narrators. Erin originally told this story on 17 October, 2018 at Buntport Theater in Denver, Colorado. The theme of the evening was “Guts.”

Reply via Email | Mastodon | Bluesky

Rejecting maleness

2018-08-01T00:00:00Z

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?

Thanksgiving with friends and strangers. I still wear a beard, but my nails are iridescent. This is how I measure time, before Caitlyn. The conversation turns to a trans woman I’ve never met. I’ve never met any trans women, that I know of. My friend says:

—If we eliminate these rigid gender roles, would anyone need to be trans?

Over the years, this question takes many forms:

—What does it mean to “experience” one’s gender as this or that?
—What does it mean to “feel like” a woman?
—What does “being a woman” mean to you?
—Can’t you just be a feminine man?
—Can’t you just be gay?

Interviewing a trans man, the reporter writes:

—But, surely the revolution is in re-defining what feminine or female attractiveness means rather than rejecting femaleness?

Is your gender part of the revolution?

We have a story in my family. My brother is young, nursing his favorite doll.

—I’m going to be a mommy when I grow up.
—Boys grow up to be daddies.

My mom is only trying to be accurate, but he sets down the doll, and never picks it up again. Cis doesn’t mean simple, he tells me now, a father of two. If I had a story like that, maybe everything would make sense. Maybe I could string this together into a narrative: beginning, middle, and end.

As a child, I want to climb trees and play make-believe. I love dolls and swords and video games. I want to be a princess, an astronaut, a ballerina, firefighter, artist, acrobat, scientist, and ninja.

Which one of those is my gender?

On the playground, I play tiger-family with the other girls. We lay in the grass at the far end of the field, talking about our tiger lives. This is short-lived, before the boys set me straight. Boys are allowed to spend the night, and they do. We play Double Dragon, and I learn that “joystick” is a euphemism.

Is my gender a hardware problem, or a software problem? Is this a bug or a feature? Can I turn it off and back on again?

Dysphoria never takes the time to stop and explain itself. For 35 years, I trust what I’m told about genitals and genders. I never present the clinical criteria. I’m not consistent, insistent, or persistent. I have no hate for these dangly bits – only detached disinterest.

You go your way, and I’ll go mine.

The term cis- means on this side of while trans- means across from – prefixes that describe a relationship between our assigned and subconscious sex. As a trans woman, I live across from the maleness decreed by doctors. I have transitioned – socially, legally, and (in some ways) medically. This is a process that takes years, without a clear start or end.

People often assume cis genders are hardwired, while a trans gender requires explanation and intent. In order to transition, I must look at womanhood and want something about it.

Doctors assign gender based on genitalia, the length of a clit.

Strangers assign gender by the length of my hair, absence of beard, and the cut of my clothes. What we call secondary sex characteristics and presentation. Essentialists would gender me by gonads and reproductive ability. Mom only has a single ovary, and is only half a woman. Olympic organizers relied on the Y chromosome, until it failed them. Now athletes are gendered by their testosterone levels.

We imagine two circles that never cross, equal and opposite. Instead we have infinite bell-curves that only part at the edges. Intrinsic inclinations, and imperfect correlations.

I believe that gender is only a performance as long as my own gender is a performance. Others believe that gender aligns with genitals, because theirs do. It’s hard to look beyond your own experience. I tell Grandma that I’m a cross-dresser.

—Well, of course! You’re an artist, and men’s clothes are so… drab.

I try on dresses, and feelings, and crossing my legs. I try on eyeliner, and soft skills, and knitting in public. I wear nail polish, and colorful scarves. I try it all with a beard, because men can be anything – and if I don’t try, I can’t fail.

Women can be anything too. I move to the city, and start a company. I get divorced, and leave the church. I’m an artist. I’m part of the revolution. I build myself a world without rigid roles – a safe place to be a new man, feminine and free. My friends are queer, and encourage it. I can do anything, and I do.

It only makes the pain worse. The closer I am, the farther I feel.

Mom writes:

—I saw your profile picture in high heels. Have you been exploring bisexuality?
—No. I’m exploring my gender. I can’t find it.

I report in, as my understanding develops:

—Maybe I’m genderqueer.
—What is genderqueer?
—What does it feel like to have a gender?

Mom can talk for hours about the fluid nature of god as mother and father – as masculine and feminine together. Her congregation uses all the pronouns, and all the metaphors. She finds it beautiful, and so do I. We can’t agree on calling it god, but we agree on how it moves. I could sit with her for hours.

—You understand, then. My gender, and your god. These pronouns don’t contain us.
—Oh. I’m not sure I can think of my son that way.

We talk instead about cycles of abuse, perpetuated through generations.

Erin asks my pronouns. I have no idea. She tries them all, switching mid-sentence. Within a week, the answer is clear. Relief whenever she comes around, and a flinch with every him and his. I don’t understand. I never asked for this.

At a reunion, I tell my family of 60 that I’m trans. I still don’t know what that means. Grandma asks how often I wear dresses. It depends on the weather. She seems happy with that.

—What pronouns should we use?
—She… or they.
—I don’t like they. Are you going to have surgery?
—I don’t… think so?
—Will you still date women?
—Will they still date me?

Grandma has friends on hormones, trans men. It looks hard. Expensive. Awkward.

—I hope you don’t transition. You look so good as a boy.

I’m trying to answer the question, but I’m not sure the words exist. We rely on half-baked metaphors and thought-experiments. Imagine being trapped in a body. Imagine no one sees you. Imagine you could flip a switch. Imagine you always played with dolls. Imagine wanting something else. Imagine experiencing gender. Imagine just knowing. Imagine no other choice. Imagine suicide.

Imagine my gender can’t be captured in a soundbite. Imagine I have agency, but I didn’t make the rules. Imagine I live in the world as it is. Imagine biology is complex and fluid. Imagine social constructs are part of my reality. Imagine I don’t have all the answers.

Have you seen Michelle Pfeiffer in Batman Returns? Transition is basically like that.

All my old raincoats become skin-tight catsuits.

—I’ll admit, I find this “transgender” thing confusing.
—I’m as confused as you are.

I don’t transition to escape social expectations and rigid gender roles. I know better. I have access to the internet. I read all the wrong articles, and watch the wrong movies. Wherever we go, cis people vomit and trans people die.

In this world with rigid gender roles, it’s a miracle that anyone transitions at all.

—Caitlyn plunges in popularity as baby name on Social Security’s list
CBS/AP: May 12, 2017, 12:42 PM

—A lot of parents are naming their babies Kylo after the new bad guy in ‘Star Wars’
LA Times: May 12, 2017, 4:15 PM

Natalie sets me straight:

—I don’t think I’d make a good woman.
—Women can be anything. Transition first, and then find out what kind of woman you are.
—But… I’ve seen how women are treated.

I call mom:

—I think I’m more binary than I thought. Maybe I am a woman.
—What happens next?
—A new name might help. I’m not sure about the rest.
—We were going to name you Miriam. Or Mary. Mary Sue, or Miriam Suzanne.

Pain isn’t the end of this story. There is a euphoria in putting these pieces back together. I see myself in the mirror for the first time, just a glimpse. I can never go back. I start hormone replacement as an experiment.

It’s a slow magic.
A fog lifts.

I uncover ancient dys- and euphorias, buried deep. Suddenly, surgery makes sense to me. Not for gender roles, or beauty, or sex, or the revolution. There is no right way to have a body. This is for me, and cannot be put into words.

I call mom:

—Some people will struggle with this.
—What are they resisting?
—It’s the same way they feel about tattoos. Permanent changes to your body.
—Like having an ovary removed?
—Maybe it’s harder when it’s on the outside.
—Great! I’ll move it to the inside!

I am a biological woman, because all women are organisms.
I am a natal woman because all women are born.

Somewhere along the way, I must have discovered the difference between feeling constricted by the trappings of gender, and feeling mis-identified in the gender itself – but I can only point at this distinction as it fades into my past. Somewhere back there, I tried both and they were different.

Painting my nails did not make me a woman. Neither did hormones, or the F on my ID. I don’t have to become a woman at all. I just have to accept it.

The trans woman experience is not identical to the cis woman experience, like a white woman’s experience is different from a black woman: and poor women, and rich women, and tall women, and short. Until one of us achieves that ideal platonic womanhood, we’ll all just have to live at our intersections.

I ask my friends and family:

—If we lived in that world without gender roles, would you still be a woman?

Some would, others wouldn’t. Everyone assumes their experience is universal.

Maybe the answer is that simple:

Before transition I could wear dresses and makeup, but I was always seen as a man. Now I wear jeans and let my nails chip, but I’m still a woman.

The roles are still too rigid, and the revolution continues. I don’t need to understand it. My faith has made me whole.

Reply via Email | Mastodon | Bluesky

Chosen family (thank you)

2018-07-19T00:00:00Z

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.

Wow, you all are so wonderful and generous. Thank you so much. I am entirely floored by this outpouring of support and love from friends, relatives, and strangers. I should not have expected anything else. You’ve been there for me over and over. Why does it still take me by surprise?

Thank you.

I keep trying to write an update worthy of your generosity. Maybe something about how we build up shame around money, and asking for help – friends had to convince me it was ok. But that’s looking the wrong direction. I want to talk about you, my family by choice (and sometimes also genetics).

I’ve been watching Pose on FX, and thinking about the power of finding your chosen people – rebuilding family out of trauma, on our own terms. I think about the years that “family” felt distant for me, even dangerous. I put up every wall I had, and moved to Denver.

I still don’t know how we got here from there. My favorite part of transition has been the people it keeps bringing into my life – including people I’ve half-known for years, now pulled closer. The queers and cousins and sisters and aunts and friends who reach out to me, and share their own stories. Who bring me into their lives, and become chosen family: not in spite of our traumas, but because of them. Because we can cry and laugh and scream together.

It’s too easy to look back and say “I built that!” – but it rings false. At every step, it’s been the generosity of others inviting me in. People sharing their struggles, their pain, their vulnerability, their art and vision… until I might learn to share mine. I’m only sorry it’s taking me so long.

There’s a card in my novel that’s been rumbling around my mind lately. The card I’ve always want to lean into, and build my life around (though I fail regularly):

When I die they will say she kissed us all she could. What more could we ask? And I will say, through a video I recorded this morning, I’m sorry that I didn’t kiss you more.

—Riding SideSaddle* (a novel about chosen family)

Much love and gratitude,
❤️ Mia

Reply via Email | Mastodon | Bluesky

Mia's medical upgrade

2018-07-17T00:00:00Z

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.

I’m excited, and terrified, and I might start crying. It’s hard to unpack all my feelings, so I try to focus on the details: what needs to happen so this goes smoothly. Let’s do this!

Grandma, I was wrong

Early August, 2015 – I come out to my extended family at a reunion in Michigan. The same reunion I’ll be at next week. It’s the first time I call myself trans in front of other people.

I still don’t know what that means.

Grandma asks how often I wear dresses. It depends on the weather. She seems happy with that.

—What pronouns should we use?
—She… or they.
—I don’t like they. Are you going to have surgery?
—I don’t… think so?
—Will you still date women?
—Will they still date me?

In October of that year, I change my name publicly. In January, I swallow my first hormone replacement pills – a mix of Spironolactone (an androgen-blocker) and Estradiol (an estrogen).

On September 10, 2018, I will stop taking the androgen-blockers, after completing the first surgery of my life: a procedure officially called vaginoplasty, but more colloquially referred to as bottom surgery.

Grandma, I was wrong.

“The Surgery” Disclaimer

When we come out as trans, the most common reaction (after losing friends and family) is to ask about the surgery.

When we ask to change the gender-markers on government-issued documents, many states require proof of the surgery.

When we say transition people only hear genitals.

Historical terms like Sex Reassignment Surgery (SRS) or Gender Reassignment Surgery (GRS) also imply a centrality and finality to this one procedure – as though we aren’t real men or women before we’ve undergone genital reconstruction.

But there are many aspects to transition – social, legal, and medical – with every person choosing their own path. There is no right way to be trans, just as there is no right way to be a woman.

Bottom surgery is only one in a long list of medical interventions that can help reduce gender dysphoria, and improve our quality of life. It is absolutely necessary for some of us, but it does not validate our genders or transitions. It is not the primary intervention, nor the most common, nor the final – but in a society that places the full weight of gender on our genitals, this one procedure tends to grab the most communal (often salacious) attention.

There is no “the surgery” for all trans people, and there are no correct genitals for womanhood. I’m already a complete and real woman – I only hope to relate to my body in new ways: to trade in some of my body dysphoria for a chance at bodily joy.

Our stories don’t have to be defined by pain. We can also strive for comfort and pleasure and even ecstasy in our own bodies.

Change of Plans

Trans people are often asked to explain ourselves, and defend our medical interventions to a cis public that finds us fascinating or disgusting. We are expected to beg for validity at every step – a mindset that leads directly to the current moral panic around trans children.

(I don’t love linking The Atlantic here, since they stoke the flames from all sides – but it’s a good article on the topic.)

I don’t want to play that game, but I am happy to share some of my experience in case it can help other trans people in similar situations.

I spent years dissociating from my body – entirely unaware of the pain or identity driving that distance. Looking back, it’s easy to read all the signs, but at the time no one in my life (especially me) knew what to look for. One of my favorite comedians expresses this best, with her roommate metaphor near the end of this wonderful set. Laugh break!

Carina Magyar performs in the FPIA 2017 finals

Over the course of my transition, I’ve begun to heal that relationship with my body – but the progress is not linear or clean. Every step forward reveals a new layer of repressed trauma in my body, along with a euphoria of new discovery.

In the spring of 2017 I begin to consider bottom surgery more seriously. I do my research on how it works, and learn about the development of genital tissue. I begin to see my body in new ways, and find that it’s much easier to own and understand my physical form. I talk to friends, and learn what to expect from surgery. I research available surgeons, and eventually send an application to Dr. Marci Bowers – a ground-breaking expert in the field.

One week later, I get a phone call from her office:

—Are you available on June 9, 2020?
—Uh… Sure?

I call mom:

—Some people will struggle with this.
—What are they resisting?
—It’s like they feel about tattoos, permanent changes to your body.
—Like having your ovary removed?
—Maybe it’s harder when it’s on the outside.
—Great! Tell them I’m moving it to the inside!

The Wait

With limited surgeons and increased interest, waitlists have been growing quickly. We’ve come to expect a 2-5 year wait, and out-of-network (out-of-pocket) treatment, far from home. Many people wait on multiple lists, and hope to get moved up after a cancelation. But recently, there’s been a push for more doctors to become certified.

This is a wonderful development, but what we gain in access and affordability, we lose in detailed knowledge about our surgeons and their credentials. This used to be a specialty procedure, performed by the well-known expert of your choice (if you can afford it). As it becomes more common and covered by insurance, most of us simply have to go where we’re told. Meanwhile, there are no national standards for certification, and each hospital is making it up as they go.

While I’m looking into insurance options, I discover that Denver Health is working with Dr Bowers to train two local surgeons, and a Denver Health insurance plan would be guaranteed to cover this new Denver Health surgery. I switch my insurance at the end of the year, apply for the new DH waiting list, and immediately begin preparation. With an unknown timeline, I want to be ready.

In the meantime I do some research on my new surgeon, Dr Chris Carey. Previous patients of Dr Carey recommend him, and he seems to have experience and training to back up his new credentials. I sure hope that’s enough.

In early July, I get the call:

—Can you be ready in August?
—No, I’ll be traveling.
—Have you completed hair removal?
—Mostly.
—Get it done.

They call again this week:

—You’re traveling, right? When will you get home?
—September 9.
—Can we schedule you on September 10?

😳😳😳😏😂

“How Can I Help?”

As I’ve started to share the news, several people have asked how they can help.

I’ll be in the hospital for 3-4 days. After that, recovery is slow and difficult – with 4-6 weeks of limited movement before I’m back to my routine, and back to work. My bills and my boredom are likely to pile up, so you can help with either or both:

1. Boredom

I have three amazing women who will be my primary caretakers during recovery – Erin, Rachel, and my mom – but it would be great to have visitors, or help with meals along the way. This is hard to plan in advance, since we’re not entirely sure when I’ll have time or energy. If you want to drop by the hospital (Sept 10-13), or my house (through mid-Oct), get in touch with one of them.

If you need contact information, let us know.

2. Bills

With my insurance, I expect to pay roughly $1,300 in preparation (surgery-site hair removal), and another $7,150 for the surgery (my out-of-pocket maximum). I will also lose 6 weeks wages, while trying to cover all my normal expenses. All told, I’m looking at $10k-12k in surgery-related costs.

That’s a debt I’m willing to take on, but it’s not money that I have. If you want to help financially, either by purchasing art, or with a direct gift, any amount will help make a difference.

3. Support Others

Thank you for all the support that you’ve shown me through my transition. I feel very lucky to have friends and family that have stood by me, and asked how to be helpful.

Many of my friends are less fortunate. Here are a few places you can volunteer or donate to help trans people more broadly:

I know there are other issues in the world that also need money and attention. Support immigrants, and refugees, and anyone else who needs it.

Thank you again for all your love and support over the last few years – it means the world to me.

Much love,
❤️ Mia

Reply via Email | Mastodon | Bluesky

Speaking of pride

2018-06-09T00:00:00Z

An LGBT concert of writers and composers by the Playground Ensemble, with three works by LGBT authors and the composers.

Fragments @ Invisible City (by Miriam & Nathan Hall)

Miss Furr and Miss Skeene – Gertrude Stein & Linda Dusman
Howl – Allen Ginsberg & Lee Hyla
Fragments – Miriam Suzanne & Nathan Hall

Fragments (lyrics)

We have a story in my family. My brother is young, nursing his favorite doll. He says I’m going to be a mommy when I grow up! Mom is proud but corrects him – boys grow up to be daddies.

He sets down the doll, and never picks it back up. Cis doesn’t mean simple, he tells me now, a father of two. I keep my dolls much later in life, their unexpected aunt.

I never felt like a girl. What do girls feel like? I didn’t always know, and dream of wearing dresses. I wasn’t consistent, insistent, or persistent. I was frustrated.

A friend asks me what it means to be a woman. I have no idea. What does it mean for you to be your gender?

Hanson is on the radio.
Why is Hanson on the radio?

If I had a story like that, maybe everything would make sense. Maybe I could string this together into a narrative: beginning, middle, and end. Life doesn’t work that way.

A visiting trans friend asks where I get my Testosterone. I make it inside my body, I tell him. I’d give it to you if I could.

Hormones are slow magic.

In my dreams, I’m transgender.
In the mirror, I’m uncertain.
In public, I’m a woman.

In Colorado, your chosen name has to sue your given name for the right to exist.

I don’t get to put all the pieces together. “Passing” is not something I do, but something that happens to me — not a way of presenting, but a way of being seen. Fickle. In a single moment I can be seen and not seen, gendered and misgendered. Ungendered, and undressed.

I don’t believe in authenticity, but I do believe in pain, and doing something to survive it.

Trying on clothes to see if they fit is way better than trying on clothes to see if your gender fits. I didn’t know there was a difference, until everything changed.

I can finally hate my body for the normal reasons.

Reply via Email | Mastodon | Bluesky

More CSS Charts, with Grid & Custom Properties

2017-08-11T00:00:00Z

Inspired by Robin Rendle, I demonstrate some of my early experiments combining CSS Grids and custom properties to create dynamic layouts and data-visualizations.

Reply via Email | Mastodon | Bluesky

(Mis)gender

2017-07-11T00:00:00Z

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.

Gender is strange and elusive. Sometime we attach it to genitals, and sometimes we attach it to boats. In Spanish, I can misgender my table. Every day we gender each other, even strangers – at a glance, on instinct, with very little to go on.

Some gendering is obvious – from pronouns (he/she/they) to honorifics (sir/ma’am), and gendered nouns like ladies or gentlemen. Things get more subtle when we talk about groups (hey guys), or the way servers (should I say waiters or waitresses?) are trained to serve women first and bring men the check. No matter how we see ourselves, our existence is constantly gendered (and misgendered) by the people around us. I notice every instance.

I’ve been misgendered most of my life, usually by accident. As a child, I was only gendered correctly with insults. Looking back, “long haired African girl” seems a bit on-the-nose. I had long hair, was born in Lesotho, and now I discover I’m a woman. Three for three! How is that insulting?

Now that I’m mid-transition, the gendering (and misgendering) has taken on a new flavor – a sense of personal success or failure added to the experience. I don’t mean to imply that the goal of transition is always to be properly gendered, but wouldn’t it be nice? When people assume I’m cisgender, life is simpler and safer – if lacking the nuance of queer diversity. Even condescending and sexist phrases can feel refreshing – at least I’m being gendered correctly.

People rarely misgender me these days, so the sting is worse when it happens. Strangers on the phone, old friends on occasion, or someone just discovering that I’m trans; but mostly family. The people who have known me since birth. And when it happens, someone is always there to say: well, it’s hard.

I’ve misgendered people too, used the wrong pronoun, or even a deadname in my worst moments. It’s an accident, of course, and I feel terrible about it – most of us do. Intentional misgendering is violent verbal abuse, but accidental misgendering is more complex. And more painful.

Gendering is instinct, learned at a young age – deeply ingrained, subconscious, and instantaneous. We use names and pronouns without thinking, and get them wrong without noticing our mistake. Sometimes it means we haven’t shifted our perceptions of a person and have work to do. Often, we’re just bumbling our way through every child-and-dog-name in our heads before we get to the right word. My aunt flips through all her children and my deadname before she gets to Mia. It would be funny if I wasn’t already hurting.

Brains are strange and language is fragile. When people tell me (over and over) that it’s hard, I know what they mean. It is hard for all of us. I know. We know.

But when I’m misgendered, none of that matters.

The room becomes a sudden minefield and time slows down. Everyone seems on edge, unsure what happens next. One person is feeling bad for their mistake, aware that they’ve hurt me, and everyone can relate. There, but for the grace of various gods… All eyes are on me. I’m not thinking about the semantic slip or the person behind it, I’m trying desperately to hold my fear and self-loathing at bay.

I never wanted to be trans. When I look in the mirror sometimes, it’s all I see. Then I have to leave the house – go out in public, where my existence is so offensive they pass laws about it. I’m a national threat. I get my own special TSA pat-down and papers-please potty regulations.

I’m not fragile, and I don’t want pity or condolences. I have a good life, with supportive friends and family. I’m not depressed, and I’m not in constant or unbearable pain. But the othering and double-standards wear me down. The shame becomes ingrained and internalized.

Can I go outside? Can I use a bathroom? Who might attack me? Will I ever date again? What if I’m a pathetic joke everywhere I go? Is everyone laughing behind my back?

If the misgendering were intentional, I could brush it off more easily. Being an asshole reflects poorly on the offender, not on me. But when it’s an accident it feels personal, like it’s my fault. I brought this on myself. I’m asking too much of the people around me. I look too trans, or speak too deep. Maybe people are only humoring me, and the ruse is up. Now everyone feels bad because of something I did. My trans pain is upsetting these people I love, and I’m responsible.

I imagine people are thinking about my genitals, or my deadname, or my years as a ‘boy’. I know I am.

There’s no time to take care of myself. Everyone is anxious, alert, and watching me. If I fall apart, I look fragile. If I get upset, I’ll make it worse. Simply pointing to the mistake can make people defensive, and I’m seen as the aggressor. If I brush it off, people think it doesn’t bother me – not like the others, thank god. I don’t want a confrontation. I don’t want anyone to be sorry, or feel terrible, or lose sleep over me. I don’t want a conversation, and I don’t want a reminder that it’s hard not to hurt me.

Being misgendered is not like being offended – not intellectual, but emotional. In that moment, I’m not mad or insulted – I’m sad and lonely, discouraged and afraid. I feel bulky, masculine, and in the way. My mind is racing, and I need a way out.

When we misgender people, we tend to focus on the shame of our mistake, and how bad we feel for causing pain – or how hard it is to change our gendered instincts. We jump to long-winded apologies and explanations that only take us away from the opportunity to make things better…

Back in Moab with my family, I post a note to Facebook knowing my trans friends, at least, will send me support – and they do (along with others). My brother also senses the problem, and he’s ready when I come downstairs. In the kitchen, he slides up beside me and says the one thing that actually helps:

Hey sis.

Reply via Email | Mastodon | Bluesky

Stop Being Productive

2017-06-09T00:00:00Z

A reflection on the nature and value of productivity for the SuperYesMore series: The Human in the Machine.

Every Christmas, my dad’s family rents a lodge with space for 30-some people to play board-games (and occasionally sleep). We crowd in for three days, living on top of each other. I love these people, but I live alone for a reason, and the chaos is overwhelming. I find a corner with my partner, and work on jigsaw puzzles – talking to aunts and uncles and cousins one-by-one as they visit my makeshift office between rounds of Mahjong or Pandemic or Clue. People still play Clue?

At some point, the entire group gathers for a round of sharing – updates about our past year, from youngest to oldest.

I’ve been meaning to write this article for a few weeks now. I keep putting it off. How do I write about something I can’t really articulate? I don’t have answers, only frustrations.

Grandpa has two PhD’s, and presided over several colleges before retiring to write a book or two. He has parkinsons now, but still works whenever he can. Grandma is active in every community organization you can imagine, and will never retire. My aunts and uncles are mostly professors, doctors, engineers, and university administrators – each admired in their field, writing books and speaking at conferences.

My family is productive. Going around the circle, each minute of sharing is more impressive than the last, until someone finally breaks the pattern. She’s been struggling with depression, and apologizes for not being as impressive as the rest.

I’m crushed. My life isn’t the raging success that I shared three minutes earlier. I’m struggling too. I’m sad, and insecure, and I feel like an imposter. I also have friends who keep me going – people I love, and people who love me. There is so much to share beyond my resume. This is family, why am I treating it like an interview?

My stomach is upset today, and everything feels difficult. I stop to write some code, but it’s a frustrating mess. I’d rather go on a walk or play Zelda. This article isn’t coming together like I wanted – but if I stop now, I’ll be distracted all afternoon. I need to finish so I can clear my mind. I hope.

I’ve read the productivity books and blogs. Self-help can be an addictive distraction. When I feel like an imposter, I hope the experts will give me insight to take over the world, or feel useful again. And sometimes the tips help: break a problem down into small steps, and work in short sprints until you find momentum. That’s good advice for anything. We can all learn to be more agile in our lives – but that’s not the same as learning the rules of Scrum.

My uncle played rugby. So did my old roommate. I’m pretty sure that’s not relevant to this article.

I’ve used a mix of philosophies over time, from Getting Things Done to Pomodoro, depending on the work in front of me. My job requires me to be productive, and I try. It’s useful to know your way around a road-block. I apply these techniques to my art, and find writer’s block more manageable. But when does productivity cross from being a tool to an obsession?

I’m skeptical about the whole self-help industry. I’m skeptical about productivity. I don’t actually recommend getting things done, so why recommend GTD? I don’t believe in a strong work-ethic, or career success, or getting ahead – but I try to do them all. Why do I fall for it over and over? Why do I take on so many projects? Who am I trying to impress?

To be more productive, I’ve heard that you should wear the same clothes every day, and get up at 4am. That sounds like a shitty life. I’m not interested.

I see other people’s accomplishments on-line and wonder if I’ll stack up. I should be working harder. I should be more productive. I wonder if they feel the same. I wonder if we’re fueling each other in a constant struggle to be relevant. I don’t want to play that game. But look at Rachel Andrews and Jen Simmons, with their amazing work on the future of web layout, while I maintain a dying grid system. Sarah Drasner is talking every weekend, and building animations to die for. Abby Covert wrote this exact same article a week before me!

Maybe I should work harder. Maybe a new version of Susy will convince the world that I’m still relevant. Maybe another novel will break me into a best-seller list, and I’ll retire on a boat at the age of 35. Maybe I’ll be a literal rock star. Maybe I’ll gain a million followers on Twitter, and clients will break down our doors. Maybe I should get back to work.

I agreed to write this article because look at the company! What a list! What a lineup! These people inspire me every day! I know a few of them in person, and they’re wonderful! What an honor! Bang bang bang! Interobang?!

I read somewhere that “what gets measured gets done” and I’ve seen that play out. The ways we define success change the ways we work. Apps like Facebook and Instagram often measure click-interactions, and optimize for more clicking. “We’re just giving people what they want, according to the data,” I’m told. But who decided that quantitative click-tracking is an accurate measure of my desires? When did socializing become measurable through likes? How do we measure something new?

I remember a mentor telling me to set directions instead of goals. If you reach your goals, you have no idea what’s next – but you can follow a direction as long as you want. I wonder if this is the same as focussing on the journey instead of a destination. Same cliche, different flavor?

When I have to finish a project on deadline, a good system can make all the difference – but where are we going with this? Productivity has become a belief-system that eats itself, without care for the world outside. I care about the world outside. At best, productivity is a way to get where we’re going. I hope I’m going somewhere interesting.

My partner just linked me to an app called Minutia – an “anti-social” app that facilitates anonymous photo-sharing around the world. No likes, or comments, or profiles involved. It’s beautiful, and there is nothing to click.

The best productivity tip is entirely unfair: do something else. Take a walk, play a game, watch TV. Fill your mind with otherwise-worthless junk. You can’t build new ideas without new material to work from. The best way to be productive is to have free time, and leftover energy to travel, daydream, and explore.

That’s not advice, that’s privilege. Like saying do what you love – only the wealthiest and healthiest can act on it. Everyone else needs a paycheck.

When life is easy, I can write open-source software all day long. But when I’m struggling personally or financially, my production goes to shit. I’m lucky to have a job with some flexibility, teammates who will cover when I fail, and a family who will let me do a puzzle in the corner when I’m overwhelmed.

Want to be like Steve Jobs? Try exploiting cheap international labor!

The next time I share about my year, I hope to let go of my productive ego, and share what life is really like. It’s been a hard year, and a good one. I’ve made new friends, and enjoyed collaborating with some amazing people. I’ve struggled to feel productive, and also to take time and enjoy myself. When I focus on productivity, I only make things worse.

We need to find a better metric.

Reply via Email | Mastodon | Bluesky

Fun with Viewport Units

2017-06-05T00:00:00Z

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.

Reply via Email | Mastodon | Bluesky

Gods on the Lam

2017-06-02T00:00:00Z

Cover art commissioned by Perpetual Motion Machine

Christopher David Rosales and Perpetual Motion Machine commissioned me to create custom artwork for the cover of this great new book. They were particularly drawn to imagery and style from my Screwtooth instsallation.

Reply via Email | Mastodon | Bluesky

Body & gender fragments

2017-03-01T00:00:00Z

I wasn’t born in the wrong body. I was born, a body. Without my body, I don’t exist.

Some bodies have freckles, while some are six-foot-four and near-sighted. Some grow thick hair, while others have autism. Each body comes with a unique mix of experiences — affordances and constraints. This body isn’t wrong, it’s trans. My genitals don’t match my gender, the way some bodies do.

You might need help with insulin. I need help with estrogen. I don’t mean to medicalize this experience — only to claim it, and put it in my body.

I operate best on hormones I don’t produce. Most women call that menopause. I call it transition.

are my own, not a guide to trans experience. Some will relate to parts. Others won’t.

There’s a temptation to cherry-pick the past, to emphasize one particular story-arc, associate myself with the proper stereotypes, and prove I was born this way — a girl from my first breath.

In the final years before my transition, I was begging the pieces to fit perfectly. I wanted a narrative that could prove my gender, once and for all. That story doesn’t exist.

A friend asks me what it means to be a woman. I have no idea. What does it mean for you to be your gender?

Dysphoria is a subtle, grumpy, subconscious beast — like an upset stomach, or the anger you feel when you haven’t eaten.

Gender dysphoria is hangry.

There’s no instruction manual, or arrow pointing you are here. Your hunger doesn’t take the time to stop and explain itself before making you frustrated.

I watch Eddie Izzard, and think maybe I’m an action transvestite, but the lazy kind, who has no time for makeup, and finds dresses unflattering.

Megan asks if I’ve been a good boy this year. I’m not very good at being a boy, if that’s what you mean. She says I’m genderqueer, so I attend the Trans and Genderqueer Poetry Symposium.

Rose asks what pronouns do people use for you? That’s not the question she meant to ask, and not the question I wish I was answering. Neither of us correct our mistake.

Erin asks me point-blank, but I don’t know the answer. For a week, she uses all the pronouns interchangeably, but I only like the moments of she/her/hers.

It’s hard getting anyone else to follow suit. I think maybe changing my name will help, but it doesn’t much.

I tell Nat how I’m feeling. That’s because you’re not on hormones yet. I believe her, but there’s a waiting list.

I never felt like a girl. What do girls feel like? I didn’t always know, and dream of wearing dresses. I wasn’t consistent, insistent, or persistent.

I was frustrated.

Even after I pinned that pain on gender, it took years to make sense of the fragments.

Sometimes you don’t know the pain is real until it goes away.

I first call myself trans while speaking to 60-some relatives at a family reunion. Sometimes I do things the hard way. Everyone is supportive, but no one notices their pronouns, and it feels like nothing will ever change.

Grandma asks if I’m planning to transition medically, and I say no. I’m wrong.

Cis women warn me about the emotional terrors of estrogen. Clearly you haven’t tried testosterone, I say. That shit’ll fuck you up.

Transition is a wild waffling between dysphoria and euphoria. The changes all seem minor, but the results are life-changing. I’m the same person, completely, and not at all.

I lose two shoe sizes, and twenty-two pounds. I can’t lift my bass amp, and rarely get turned on — but when I do it’s electric. The world is several degrees colder, to make up for global warming, I suppose. Emotions live in my body, taking root. I’m all nerve endings, raw and exposed to the elements. When I pay attention, I love every second of it.

He genders me right, in that condescending tone reserved for women. I’m excited and horrified.

Many people become frustrated by the trappings of gender — the rules and regulations imposed by our culture. We are not the only people to push against these limits. Then the boys find their inner princess, and girls grow up to be president (please), and everyone else moves on.

As my brother says, cis does not mean simple.

I wanted that story too — a complex gender, breaking from tradition without crossing any lines. I hoped gender was only a construct, and a change in performance could destroy my dysphoria. I wanted to express my feminine traits and move on.

But feminine is not my gender. Painted nails are not what it means to be a woman. Gender is often performed, but the performance is not the whole story. The play is not the thing.

A visiting trans friend asks where I get my T.

I make it inside my body, I tell him. I’d give it to you if I could.

My doctor doesn’t require a therapist’s approval, but she tells me it’s helpful if you have one. I don’t know what that means. My therapist writes a letter, just in case.

I have to sign a form that explains the effects of hormone therapy. They bring me the wrong form: Consent for Masculinizing Hormone Therapy. I ask for the other form, please. Probably a clerical error, but it feels good.

This is called informed consent. Expect breast growth, changes in body fat, and thinning body hair. Don’t expect changes in voice or facial hair. The form is full of typos, but I sign it anyway. Later that day, I take my first hormone pills.

Everyone asks me if I’ll keep dating women. The better question, I say, will women keep dating me? I wonder which part of transition should change who I find attractive. The name and pronoun, or hormones, or a possible surgery down the road? This all sounds absurd. I was bi before, I’m bi now, and I expect to be bi for a very long time.

Some do find that transition allows them more comfort in dating or noticing different genders than before. Sometimes sexuality is just about feeling comfortable and paying attention. Nothing is set in stone.

I’m still learning to identify as a woman, and as a lesbian. Both are over-simplifications. Maybe a non-binary genderqueer trans woman bi/pansexual femme tomboy dyke?

I was assigned male, and learned to identify as a man — no matter how odd or painful that felt. My identity was male for 33 years. Even when the label means nothing to you, it can be hard to shake off.

My gender identity is frustrated?
My gender frustration is female?

I’m terrified that all I want is the mythical teenage sleepover, and I’m too late for that. The Internet is all tweens and early teens, afraid they are too old for hormones. I read all the wrong things, and cry for weeks.

I told myself I was too masculine to transition.

I told myself I looked too young without a beard. I told myself a beard would allow me to be more queer. I used my beard as a beard, in the way gay boys and lesbians team up to throw you off the scent. I told myself if you don’t try you can’t fail. If I have a beard, no one will think I’m trans. I was right. My own fear and self-hatred became my strongest defense. I told myself it’s only a body. I told myself nothing fit right.

A friend jokes about the useless buttons on the back of my new coat. Those buttons aren’t useless, I tell him. That’s how people know I’m a woman.

I believed gender was only a performance when my own gender was a performance. Others believe gender aligns with genitals, because theirs does. It’s hard to look beyond your own experience. That’s why we have empathy.

I realized I was trans when rejecting gender only made things worse.

I’ve been fortunate to have the partners I have. None of us knew if our relationships would survive this transition, but both are queer as fuck, and I don’t know how I would have survived without them.

Thank you Rachel. Thank you Erin. You mean the world to me.

I’m not trans because of the things I like, or the people I sleep with. I’m not trans in order to paint my nails, fuck boys, join a coven, or get a free drink on Ladies Night. I’m not exploring my feminine side, or enjoying the realities of sexism, objectification, double-standards, mansplaining, and harassment. I could do all those things before.

I’m trans because the doctors called me a man and they were wrong.

I thought I was borrowing a scraper, but then he just cleaned off the car for me. This doesn’t happen when you look like a boy person.

The bank ask to see my marriage license. When I don’t have one, they ask the reason for my name change? I make a list of possible reasons:

Just in case.
That time of the week.
I lost my old name, on the bus to Boulder.
Identity theft.

There’s a period where I can’t use he/him/his for anyone. I pause before every pronoun, confused.

I don’t know how many trans people I know. After transition, many fade from view. Cis-assumption helps us blend in, for our own safety. Others haven’t come out yet.

Visibility is dangerous, but without it we’re monsters under the bed.

“Passing” is not something I do, but something that happens to me — not a way of presenting, but a way of being seen. Fickle. In a single moment I can be seen and not seen, gendered and misgendered. Ungendered, and undressed.

I start using the women’s restroom when others start seeing a woman — not 100%, but enough to feel un/safe.

Suddenly the men’s room feels impossible. I’m terrified, but I’m waiting for the FF2 from Boulder, and can’t hold it any longer. It’s been a year now, without incident.

When I say gender change, people only hear genitals.

We talk about socialization, as though kids only ever hear the half story intentionally directed their way. As though we’re not all taught to hate women equally. As though I can’t see past the mistake when I’m assigned male, and build my own feminine shame outside your view. As though I could survive 33 years without learning to cower.

A friend asks if I like to dress femme in the bedroom, or roleplay with crossed genders. I don’t think my pain is that sexy.

I tell my mom on the phone, I think I’m more binary than I think. She’s confused. So am I. I think I need to transition.

I watch a video of Kate Bornstein, and think finally, yes. Nothing she says, just her existence is enough. Nat says Women can be anything. Transition first, then explore.

Trying on clothes to see if they fit is way better than trying on clothes to see if your gender fits. I didn’t know there was a difference, until everything changed.

I can finally hate my body for the normal reasons.

Transgender and Transsexual always existed somewhere else, in another world. Extreme terms. I felt an affinity for cross-dressers, drag queens, and trans women alike (I wouldn’t distinguish until later), but the connection was fragile. They seemed so fierce and fabulous — wisp-thin and perfect-femme — nothing like a thick Indiana farm-boy.

On screen, their stories always ended badly.

Robert spent the night, but Audrey wasn’t allowed to. Later, the boys tell me not to play with her on the playground, and I listen.

A stranger asks me if I’m like, full tranny. That’s not a thing.

Living as a boy, pink became a symbol of something I could never fully articulate. Pink was a personal rebellion — pain played-off as politics.

But pink is only subversive for men. In the end, my rebellion reinforced my misgendering. A month into transition, I cleared all the pink from my closet.

Hormones are slow magic.

If you are wondering, am I trans, the answer is almost certainly yes love, and you are beautiful. No two stories are the same, but what we have in common is that pain, and that wondering. You aren’t stuck forever. You have options.

In my dreams, I’m transgender.
In the mirror, I’m uncertain.
In public, I’m a woman.

Being trans isn’t about knowing anything clearly, or even seeing it when others do. I transitioned on faith — my intuition jumping out ahead of my identity. I’m still surprised when I look in the mirror, but I look as often as I can — for the euphoria of that surprise, or just to normalize it over time.

—Ma’am, that account says ‘Eric Meyer’
—That’s my old… boyfriend? Can I change it?

I took a few voice lessons, for a better sense of control over my presentation. I don’t worry about a particular pitch, or gender-socialized speech patterns — just dropping some of that bass chest resonance. It was something small I could do before the hormones kicked in.

This was never a male body, it was always a trans body.

My body was trans as a kid.
My body is trans now.
My body will always be trans.

Recently, I had a nightmare about swimming. First I was worried about the swimsuit I don’t have. Will I try some on? Then I saw the locker room doors, and woke up in a panic.

I change my last name to Suzanne to avoid identity confusion in my career. I pick Suzanne from a list of family names my parents kindly send over. I’m half-aware at the time that I should be changing my given name instead. I move unspecified “M” to the middle, with a sense that I might need it later.

Given different genital circumstances, I would have been Miriam Suzanne Meyer at birth, or Mary Sue, or another variant. After three years, I change my first name to Miriam, and move Eric to the middle — for a sense of gender-queering history that I can drop to an initial at any time.

The man at TSA looks confused. Is that supposed to say Erica?

My first night out with a new name, I stumble and hate every minute. Erin holds my hand and introduces me to friends. This is my girlfriend. I’m trying to be dainty, maybe, or demure. It’s disgusting, and I want to vomit.

Hanson is on the radio. Why is Hanson on the radio?

I know that woman is not an action, but a description — what I am, not what I do. Knowing in my mind and knowing in my body are different things. Eventually I’m able to relax and be myself. It’s a new feeling.

An ex said she won’t be happy until I’m dead, gay, or castrated. I’m going for the hat trick.

After years of looking queer, it’s strange to realize you’re suddenly no-longer noteworthy — just one more woman walking down the street. It happened while I wasn’t paying attention: the queer kids stopped giving me that knowing nod.

Whatever made me stand out before, now only blends me in.

A few months on hormones, and flying becomes surreal. The woman checking ID says I guess you’ll want to get that changed as she hands back my license. Another woman beckons me through the scanner, and presses the pink button as I enter — then pulls me aside when the machine highlights my gender-failing crotch.

—I’m sorry ma’am, you triggered an alarm. I mean, excuse me, we don’t say alarm now, we say anomaly.
—Yeah. I’m trans.
—I know, ma’am. Is it ok if I pat you down?

I buy PreCheck to avoid the scanners. Later I learn that a good tuck — or six more months blocking testosterone — is enough to pass their gender test. Press that pink button all you want. I guess this is what it means to be a woman?

In Colorado, your chosen name has to sue your given name for the right to exist.

Transition is not a binary. We all exist on a spectrum, stretching out in many dimensions. My transition will never be complete, and my gender will never be simple or static. Woman is only one label among many. None are perfect on their own, but we all live at intersections. We all contain multitudes.

I don’t believe in authenticity, but I do believe in pain, and doing something to survive it.

Reply via Email | Mastodon | Bluesky

Trans Interviews & Photography

2017-02-26T00:00:00Z

The project attempts to humanize, educate and destroy the assumption that trans folks are solely defined by their physical experience. We aim to weave transgender lives into the overall human experience instead of merely focusing on the transition.

Reply via Email | Mastodon | Bluesky

Getting Started with CSS Grid

2017-02-20T00:00:00Z

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.

Exploring CSS Grids with Geoff Graham

Reply via Email | Mastodon | Bluesky

Just Like That

2017-02-13T00:00:00Z

Just Like That music video

Reply via Email | Mastodon | Bluesky

Adaptation: SideSaddle/Myths

2017-01-10T00:00:00Z

The Denver Quarterly vol 51 no 2 features side-by-side excerpts from Riding SideSaddle*, and Buntport’s adaptation: 10 Myths on the Proper Application of Beauty Products.

Reply via Email | Mastodon | Bluesky

Justice [under construction]

2017-01-01T00:00:00Z

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.

I’ve had a good year in many ways, and so has the world generally. Transition has been scary, and confusing, but also wonderful and rewarding.

But over the last few months, I’ve watched my friends (and the Internet) cycle through denial, anger, depression, and a million other painful emotions — often turning on each other out of fear or misunderstanding. I’ve been through a similar cycle of my own — constantly distracted, making phone calls, updating my legal documentation, struggling to get work done, building little toy models to calm myself, sending donations, hugging friends, and breaking into tears reading article after article.

I’ve tried to write this post at least 20 different times, and I still can’t get it right. There is no right to get.

Like many of us, I live at an intersection of worlds — female, white, transgender, able-bodied, lesbian/pan-sexual, neurotypical, etc — not sure if I’m the primary problem or a primary target. Probably both. I’m tired, and I don’t know how to be useful. How effective is art? Am I in personal danger? How useful is my writing? How complicit am I in which problems, and how do I fight back? How can my experiences, my love, my donations, my company, phone-calls, or protests help anyone?

I want to be strong, but I’m not. I want to be effective, but I don’t know what that means, and I’m pretty sure it’s a myth of our culture.

Personal & Political

There are several tensions pulling me in different directions. Zooming in, I see individuals hurting — scared like me. I know how to be a friend. I can reach inward, and care for my community. I can listen to what’s needed day-to-day, and be there for the people around me. I see you, and I love you.

Zooming out, I get overwhelmed by the scale of our problems — the ways neoliberal capitalism, misogyny, ableism, and white-supremacy take physical form to destroy lives in the most mundane ways. Our representative democracy doesn’t represent us all, and never has. The best we can hope for is a few simple rights doled out selectively, or not taken away — rights we should have by default.

We don’t want better jobs, we want to stop selling our bodies and lives to corporations for their profit. We don’t want to hug police officers, we want to end the police state. We don’t want access to marriage on hetero terms, we want to redefine “family” for ourselves. We don’t want legal weed for white entrepreneurs, we want the prisons emptied and the war-on-drugs annulled. We don’t want the DAPL re-routed, we want full sovereignty and reparations for native tribes, and an end to environmental destruction.

The status quo was bad enough, how are we supposed to deal with Trump?

Known Unknowns

No one knows exactly what will happen next, but the threats against marginalized people (and the environment) are clear. We understand the direction, if not all the details.

We know our government is designed to resist change, and maybe that will work in our favor now. But we also know how easily our institutions are corrupted by money and fear. Who will fight beside us? How bad will things get?

The unknowns don’t make this transition less terrifying, and the fact that things were bad already is no consolation. There’s a lot to do, and a lot of people that need our help.

Queering the Revolution

I see a temptation to grasp for simple explanations, with simple sides, and even simpler solutions. But simplifications are what got us here — a distraction, not a plan for change. It’s time to embrace the complexity of human rights, human systems, and human identities. Not to be stopped by wishy-washy complacency, but to fight for all the people, no matter how messy that gets. We need movements for intersectional empowerment, when it would be easier to throw our fringes under the bus. We need to challenge all our assumptions about what is “normal” in this queer and unusual world.

Listening is radical, emotions are radical, silence can be radical, and efficiency is not the definition of your value. Speaking up can also be radical, along with rational thought, action, and visible results. Progress comes in cycles of action and reflection, mourning and anger, give and take, analysis and emotion. Don’t get stuck in one place. Keep cycling. Keep showing up.

There will always be arguments about what tactics are better, more effective, or enough. Change will require all of us doing what we can, finding new ways to define action, and new ways of acting. That will look different for different people. The bigger and more diverse the movement, the better.

I know it’s annoying, but we need anarchists and politicians.

We need to accept that no question is either or. Individuals are not either privileged or marginalized with a simple on/off switch, but shades of intersectional identity and experience. Resistance doesn’t have to be either violent or polite, when confrontational nonviolence has the only reliable track-record.

We must both acknowledge our collective and individual racism, while we more clearly distinguish between ignorance, complacency, prejudice, and active white supremacy. All bigotry is real, no matter the intentions, but different forms of bigotry call for different forms of resistance.

We can learn to dissect and identify all the subtle micro-aggressions of the kyriarchy, and identify where ideas become problematic, while also understanding that a barrage of facts and “callouts” will never bring about the change we need. We can recognize that personalized education on privilege and oppression is not our responsibility as minorities, but may be our primary responsibility as activists.

We can acknowledge that general education is essential in the abstract, but degrees and certifications are often an excuse for new hierarchies, moral requirements, money, power, and exclusion.

Our bubbles separate us, but also keep us safe. Self-care is essential, and a clever cover for complacency. Real America is rural and urban, and infinitely diverse. Action is essential, and a clever cover for insecurity. Incremental progress leaves people behind, while revolutions often kill the most vulnerable. We have to be political and empathetic, listening and fighting. Move fast and slow, think personal and systemic. Respect our feelings enough to act on them, and respect our actions enough to feel them. Soul-searching won’t end oppression, but it’s an important part of our work.

We have to be human, in systems that are larger than ourselves.

Alok Vaid-Menon sums it up well in their recent new years resolution:

stop using politics to legitimize my feelings
affirm people for being needy & vulnerable in public
recognize everyone else’s complexity as much as i do my own
admit when i operate from a place of hurt & loneliness
believe in all of our infinite capacity for transformation
provide care as much as i provide critique
respect limitations & constraints
honor silence as a form of presence
feel & love, militantly
refuse the dismissal of art & interdependence & magic
find immensity in what they call insignificant

And a few of my own:

accept that my experiences are not universal
embrace a lack of answers and fear of uselessness
show up with my entire self, broken and scared and opinionated

Notes on Showing Up

Some incomplete notes to myself, for being present in a time of struggle.

Find and join the efforts already under way. Find marginalized people already building movements, and support them. Don’t take over, or dictate the terms, or concern-troll and tone-police the movement. Find ways to stay involved over the long-haul — pace yourself but take risks, and keep showing up.

Check in with people who are scared or in danger. Take care of each other. There’s emotional work to be done. This is difficult and important. Don’t let anyone downplay emotional experience and expression — listening, laughing, and having fun together.
Focus on bringing new people into the movement, and creating a new culture. Let marginalized groups set the priorities, and help to amplify their voices. Do outreach.
Understand and study privilege.
Donate time and money to organizations focused on women, people of color, immigrants, queers, Muslims, disabled people, indigenous people and our global climate.
Support the Movement For Black Lives and Campaign Zero. Get involved with SURJ.
Donate to high-poverty schools, and establish long-term plans for charitable and political giving.
Follow these helpful guides for calling your elected officials and learn how to affect political change.

Fight for diversity in your own industry, company, and organizations — in who you hire and what you build. Create a better training pipeline, improve your hiring funnel, write a code of conduct, address harassment and micro-aggressions in the workplace, and keep an eye on retention rates. There’s not one single problem, and it will never be fully resolved.

The long arc of the universe bends wherever we bend it.

Learn to bring family and friends into the movement. It’s a skill that takes practice — emotional labor that can’t be done by listing the facts. Outreach requires vulnerability, discomfort, and a lot of patience.

Build a practice of sustainable and ongoing action. Keep looking for new ways to show up, and leave your ego at home. Welcome to 2017.

Stay strong. Stay weak. Stay present. Keep dreaming, and get real. Keep crying, keep laughing, keep fighting.

Take care of each other.

Reply via Email | Mastodon | Bluesky

Some clarifications on trans language

2016-12-24T00:00:00Z

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.

(See also Julia Serano’s wonderful Transgender Glossary if you are interested in more. I link to it throughout.)

Gender “Identity”

Identity comes up regularly in trans politics, but refers to two very different concepts — often interchangeably, and without distinction.

Our of identifying with a gender or sexuality — male, female, non-binary, fluid, straight, bi, gay, cis, trans, non-conforming, or otherwise. We all have multiple conscious identities, that intersect and change over time.

Those identities are curated, public, and often fluid. I’m still learning to identify as a woman, trans, and lesbian — even while the realities are more complex, queer, and fluctuating. I also identify as an author, a web developer, bi/pansexual, genderqueer, and polyamorous. None of this is unique to the trans experience.
Our vague and often-elusive sense of innate gender — something most people seem to have, but trans people spend more time dealing with. Subconscious sex is really a better term for understanding trans identities. This is not a conscious or curated self-labeling, but more like the sensation of being angry because you are hungry — a feeling that can be difficult to pin down. For some it is simply male or female, and becomes obvious early on — but for most of us it is more complex, and takes years to dig through the rubble of assumptions, fears, and prejudices around our bodies.

Cis people also have subconscious gender identities, though it’s more easy to assume that your sex is completely constructed or flows seamlessly from your genitalia when it has never been called into question.

“Biological” Sex

Many people distinguish “gender identity” (between the ears) from “biological sex” (between the legs) — as though one is natural and static, while the other is invented or fluid. That’s a vast oversimplification of the science, and a dangerous false dichotomy. Our identities don’t exist outside of biology, and sex is not fixed concept outside our identities. These two ideas are inseparable.

When a doctor assigns our gender at birth, they base the assignment on our genitalia alone. For the many people born with “ambiguous” genitalia, it’s common practice for doctors to perform surgery — assigning their “biological sex” by force. There were never two discrete categories to begin with.

When we try to talk about sex as a reproductive distinction, we’re really talking about internal gonads producing eggs or sperm: testis and ovary. Reproductive gonads often align with genitals, but not always, and not in any simple binary. Some people are infertile, some past menopause, or vasectomies, or other common reproductive changes — making it clear that gonads don’t directly correlate with what we call “biological” sex.

When we’re in public no one knows what genitals or gonads exist between our legs, but they feel comfortable assigning our sex anyway — based on the assumptions between their own ears. Social gendering relies mainly on “secondary sex characteristics” (especially masculine-associated facial hair etc) and gender presentation. Our lived sex — the way we are perceived and treated by others — has nothing to do with genitals or gonads.

Organizations like the International Olympic Committee have gone further, attempting to find a definable “biological sex” in chromosomes and hormone levels. The results are the same wherever you look: our biology is a complicated mix of genetic inclinations that interact with our experiences in complex ways over time.

Biology is fluid, identity is biological, and the male/female binary is more social than scientific.

“Transition”

Some trans people decide to change how we present to the world. We transition our public personas, hoping to bring our social lives and/or bodies more in line with our subconscious sex.

That means different things for different people, but “transition” is not a surgery, transgender is not a medical term, not all trans people transition, and we’re not all simply men or women in the wrong body moving from one binary to another. Transition is a million little things, for a million different reasons.

Some of us change our pronouns, or our names — either informally, or through legal channels. Some take hormones and/or hormone-blockers, a few get “top” surgeries to augment or remove breast tissue, and even fewer opt for genital surgery, tracheal shaves, and cosmetic interventions.

“After” transition (which has no real start or finish) we are the same person that we were before. With or without surgery, our genders are just as real. Transition does not complete us or make us “real” men and women. My body was already female, because I was. How and when and why we transition is more personal and complex than simple assimilation into cis society.

In October 2015, I decided to start a more intentional transition — first socially, and then medically. I don’t believe in a “true” self that was hidden before, or in vague concepts of authenticity, or finally becoming whole. I wasn’t born male, I was never a woman trapped in a man’s body, I’m not finally complete, I was never broken, and I will never be fixed.

People regularly assume that my transition has or will soon involve genital surgery. Maybe. Maybe not. But transition was never about my genitals. Women are not vaginas, and men are not penises. I won’t finally be a woman if I have surgery, or let a man penetrate me. I’m not a new or different person, and there really was no chasm to cross over. My gender and orientation have not changed — only my social presentation and hormone levels.

I am not finally a woman, but you are finally aware of my womanhood.

“Passing”

Now that strangers correctly identify me as a woman, people say that I am “passing” as a woman. They’re wrong.

The language of passing is borrowed from racial politics (people of color passing as white) and later gay/lesbian politics (femme lesbians or butch gays passing as straight), where “passing” means your marginalized identity is not seen.

Passing is a complicated privilege — making it possible for marginalized people to avoid harassment and violence, at the cost of rejecting or hiding our marginal identities.

It’s also complicated because passing is done to us. In a single moment, different people will come to different conclusions about me, leaving me in a state of Schroedinger’s gender. My “passing” is based on other people’s assumptions about my history.

But passing language is particularly strange for trans people, who are said to be “passing” when we are identified correctly, in our appropriate genders. This plays into the popular notion that our gender is a costume we put on, and “passing” is the entire point of transition — the only way to be trans. People regularly try to help out by giving us unsolicited advice on our looks, voices, or movements — assuming that’s what we mean by transition.

There’s a history to that idea, enforced by the medical community since the 60’s when hormone replacement therapy started to become a medically-accepted treatment. Doctors established themselves as gender gatekeepers, determining who could transition medically — in part by enforcing strict binary stereotypes. Until recently, medical transition was only available if doctors thought you could “pass” well, and you promised to live straight and stealth after transition. The goal of “passing” was forced on us, and made trans communities invisible.

It might be more accurate to say that I “pass” as cis-gender at times, or that I previously learned to “pass” (well enough) as man. Trans people face a real and constant threat of violence, so blending in as cis can save our lives. It’s hard to constantly have your gender called into question, or made the center of conversation. Still, “passing” is not a goal we otherwise share.

Trans “Visibility”

In the last few years, everyone is talking about trans visibility. Chaz Bono danced with the stars, suddenly Lavern Cox is everywhere, Caitlin Jenner made transition a reality TV experience, and now you’re reading my blog.

New media comes out every year highlighting design trans characters — but most of them are written, directed, and acted by straight white men, reinforcing stereotypes more than reality. When a new show or movie comes out, we’re often more scared than excited.

These stories tend to focus on “men who think they are women” and love doing their makeup more than anything else. After transition they are either beautiful straight women who get the boy (making them finally “real” women), or pathetic creatures who need more help passing to be “successfully” trans.

Even the true stories are limited to rich and beautiful women who fit easily into our existing binary categories: men and women, just like you. Those stories are important, but they aren’t the whole picture. That’s not how we all do trans.

Where are the gender outlaws, the fluid identities, the femme boys and butch women who have always faced the brunt of harassment? Where are the trans people who are complex and confused, or happy to mix up our notions of gender? When we argue for bathroom rights based only on our ability to conform, we’re throwing our own community under the bus.

This narrow visibility has been a mixed bag for the trans community. More of us are coming out, and we’re doing it more publicly. For a minority that’s been forced into “stealth” invisibility, it’s wonderful to see (some of) us moving into the light. There’s power in numbers.

But the backlash has been swift and deadly — moving faster than our cultural gains. Trans women (and especially women of color) were already being killed at unprecedented rates — and those numbers are higher than ever. We’ve been using bathrooms since the invention of the toilet, but suddenly states are passing laws to mandate our bowel movements, or protect housing and job discrimination (a more basic concern for many trans people) as religious freedoms.

I was much more visibly queer a year ago. In some ways my transition has made me safer, by making me one more white woman on the street. All my femme interests or traits that used to make me queer now make me invisible. It’s easy for me to disappear into this over-simplified binary trans identity that doesn’t really reflect my experience. I want to be a proud gender-bending dyke, but that’s often used as proof that I’m really a man, not trans enough, or in need of gender-assimilating guidance.

Just because some of us are in the spotlight doesn’t mean we’re all being seen.

Just Like (Not) You

Across the board, marginalized groups face a complex problem often referred to as respectability politics. The quickest way into the mainstream is conformity — but what are the costs, and who is left behind? Many rights-movements have devolved into “just like you” or “born this way” rhetoric, allowing those of us who “pass” in the mainstream to go about our lives as long as we’re willing to blend in.

For a few of us, that’s great — or at least good enough — but it’s not the whole story, and it’s not the end of our movement. I don’t want to get married, and use gendered toilets like any “normal” cis straight person — I actually want these systems to break down, and conform better to us. No matter how well my looks or identity fit the popular trans mythology, I want to fight for something more fluid and open, that helps the whole world be more queer.

I am a woman, and I am not just like all cis women. I will continue to fight both sides of that argument, until all my friends have the right to live all our identities in the ways we see fit: monogamous or polyamorous; straight or bi, pan or gay; sex workers, sluts, and prudes; trans-binary, gender-fluid, butch and femme; black, brown, immigrant, Muslim, and interracial; asexual, intersex, closeted, and queer.

We can’t keep accepting identities one-at-a-time, based on their ability to assimilate with established (straight white cis) norms. We have to rebuild these systems with new, more fluid and queer assumptions.

Reply via Email | Mastodon | Bluesky

Some kind of resistance tour

2016-12-09T00:00:00Z

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…

I’ll be:

reading from my queer-as-fuck novel Riding SideSaddle*, while being a loud and vocal trans woman.
speaking about empathy in art and code and software.
chatting about queer identities, hate, politics, and intersectionality.
hugging people.

I’m not changing the world here, there’s more to do, but it feels like a nice way to get started, find my energy, and find my people.

Any profits will go to one of these rad organizations committed to empowering women, people of color, immigrants, queers, Muslims, and disabled people — or fighting climate change. If you have a specific organization to recommend, I’m all ears.

Reply via Email | Mastodon | Bluesky

Loops in CSS Preprocessors

2016-12-02T00:00:00Z

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.

Reply via Email | Mastodon | Bluesky

An Interview with Miriam Suzanne

2016-10-15T00:00:00Z

Chris Coyier interviewed me when I joined the CSS Tricks team as a Staff Writer. We talk about getting started in the industry, founding OddBird, building Susy, and more.

Now CSS is becoming an extensible language, with programmatic power. I’m excited to see how that plays out.

—Miriam

Reply via Email | Mastodon | Bluesky

Estrogentrification

2016-10-10T00:00:00Z

Jordan and I were never close. Her colleagues say she was private, but I only experienced her generosity, kindness, and humor. She was one of the first trans women I talked to before coming out.

She was blunt about her own experience, but endlessly supportive. You do you, girl. You have to do you. After that, she checked in regularly — making sure I was ok.

I know I wasn’t the only trans woman she helped. Jordan saved lives.

EstroGentrification comedy album

I only saw her perform once, and it was amazing. She’s also a great writer. I recommend a trip down the rabbit hole. Is that gross? It sounds gross.

I look in the mirror and see a person looking back at me every day, a person I didn’t necessarily think I’d ever see. I like that person. I genuinely like that person. I like the way she holds herself. I like the confidence you can see behind her muted green eyes. She has seen me at my worst and she has seen me at my best. She is a person that makes me happy and I am so thrilled I get to spend the rest of my life with her. I wish everyone could look into that mirror.

—Jordan Wieleba, The Happiest Place on Earth

Reply via Email | Mastodon | Bluesky

Miriam, a how-to guide

2016-08-17T00:00:00Z

There are some questions that come up again and again if you are trans. A few of those questions are creepy, 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.

These answers are very much my own. I am not attempting to speak for anyone else. If you don’t know how to relate to another trans person, you should talk to them!

If you are interested in queer art more than queer answers, check out my novel: Riding SideSaddle*. It’s totally about transition, and totally not-at-all about transition. It’s about bodies and identities that won’t stay put. I think you might enjoy it.

I heard you shouldn’t ask trans people questions…

You should relate to trans people the same way you relate to other people. Some questions are appropriate, and some aren’t. You already know how to filter what’s appropriate: you do it every day, in millions of different situations. My transness doesn’t change the calculation at all. If we’re really close and talk about everything, you can ask me anything! If we’re not, you can’t.

If you do have appropriate questions, I’d love to talk! Some questions are better in person, but I’m always hanging out on Twitter as well, and I have a nifty contact form if you need it.

What should I call you?

Miriam.

Or Mia, if you’re into brevity.

What pronouns should I use?

She, her, and hers.

Or they, if you’re into ambiguity.

How do I refer to you in the past?

See above. My name is Miriam, and I use she/her pronouns. That name and those pronouns can be used for any time period, because they refer to me, not my age or presentation-at-the-time.

If you went by “Johnny” as a child, but now you go by “John”, and maybe you used your middle name for a few years in High School, I don’t need to adjust for the exact time period I’m talking about — I can just use your name. Your name is John. Remember when John was a kid?

Unless my dead name is specifically relevant to the conversation (it usually isn’t), there is no need to use it or mention it. Even if you are quoting someone in the past, it won’t ruin the story to use my current name — it will just make things more clear. Who are you talking about? Miriam. Oh, I know her. She’s right here.

You are probably paraphrasing already, because your memory isn’t that good. What’s one more editorial adjustment going to hurt?

If my dead name is relevant, just make sure you aren’t outing me. You might not notice, but even when people are well-meaning, they treat me differently once I’ve been outed.* If they’re not well meaning, I could be in real danger.

I’m very public, and usually happy to be out, but not in every situation, and not when I’m outed by someone else.

* See Julia Serano’s concept of “ungendering” trans people — seaking out any physical/habitual traits that might “prove” their “real” gender. I can’t find a good link…

But I have fond/terrible memories of E—

Those are memories of me, and my name is Miriam. I was not a different person then. I haven’t transitioned lives, I’ve only transitioned what you call me.

When I say “I’m transitioning” I mostly mean “I’m teaching you to see me”.

What if I get your name or pronoun wrong?

If you slip up, you may feel nervous or upset with yourself. I’m not thinking about you — I’m feeling guilty, sad, and worried about what’s going to happen next.

Best case scenario, you correct yourself and move on.
Hopefully you’ll slip the correct name/pronoun into the conversation asap.
You can apologize later, but I’d rather you just get it right the next time. The sooner the better.
Please don’t make a big fuss about it, especially in a group setting.

Pronouns can be hard if you’ve never had to think about them before. Most people use them without even noticing. Pronouns are instinct, and if you’re not paying attention to them, you’ll get them wrong without even realizing it.

So it’s time for everyone to start practicing. Make an effort to notice every pronoun you ever use. It takes some work, but it’s worth the effort. Once you are paying attention, it’s much easier to adjust from one situation to the next.

Should I update my old blog post or website that mentions you?

Probably. I’d love for you to update my name anywhere you can. I’m not scouring the interwebs to find every instance, but I might ask you to update my name if I see it. Not because any mention of my past, but because it’s confusing to refer to a person by a name they don’t use.

What about this old photo I have?

If you have a headshot of me before I started transtion, please replace it with a recent headshot. You can find one on my about page.

If you have a photo of us together, or me in some specific context (like at a conference), leave it up. I don’t love old pictures of me, but who does? That was me, and I’m not interested in losing all proof of my existence before 2015. It’s a trade-off I’m happy to live with.

Many trans people will want to remove all old photos, and they have very good reasons for it. If you know someone else transitioning, don’t assume my answer is true for them — ask!

Can I be a helpful friend/ally?

You can!

If you hear someone misgender or deadname me in person, use my correct name and pronouns as soon as you can. It will help them remember without making a fuss, and it will help me relax.
Again, if I’m around, try not to make a big fuss. You can pull them aside later if you have to.
If you see an old site/post that needs updating, feel free to contact the author and point them here.
If we’re in a group with people I’m not out to, or you aren’t sure, don’t out me.

If you’ve known me for a long time, you might have a hard time updating your perception of me. You might think other people see the same thing you do. They don’t. Most people I meet never question my gender. Learn to see me like those people.

You should also feel free to share this post, or point people to it, if you find it helpful. I posted it on the internet for anyone to read.

What trans terms should I use, and where can I learn more?

If you are interested in the specific meanings and political debates around trans terminology, I recommend starting with Julia Serano’s extensive writing on the topic. I recommend everything Julia has written, especially her first book: Whipping Girl. You can also read Jennifer Boylan, Kate Bornstein, and Janet Mock, to list a few popular ones. Books and articles by cis people, about transgender people, should be taken with salt or avoided entirely.

I call myself trans, transgender, or a trans woman. I’m also gender-queer, non-binary, and a bunch of other good words. I’m transsexual, but that one feels like a medical term — similar to using “females” when you mean women. You can probably just call me a woman.

Some people like to differentiate between “sex” and “gender” — as though one is biology and the other is identity. Don’t bother. Biology and identity are deeply intertwined, and neither of them is binary. There is only gender, and it is always a rough approximation of a million different factors: social, biological, and experienced.

Sex is something else entirely, and I recommend it, if you’re into that sort of thing.

Stay safe, kids.

Reply via Email | Mastodon | Bluesky

Holes / SideSaddle midwest tour

2015-08-01T00:00:00Z

A joint tour for Teacup Gorilla’s debut album The Holes They Leave, and my debut novel Riding SideSaddle*.

Reply via Email | Mastodon | Bluesky

Underground music showcase

2015-07-25T00:00:00Z

Founded in 2001, The UMS is an annual three-day celebration of music featuring hundreds of bands across multiple venues.

Reply via Email | Mastodon | Bluesky

Species of the stars

2015-07-10T00:00:00Z

We’re excited to be part of the single release for Species of the Stars by our good friends Open to the Hound!

Concert live stream

Reply via Email | Mastodon | Bluesky

PROPHETIA VETITUM MUNDI

2014-08-02T00:00:00Z

A Screw Tooth installation & performance built from the prophetic 1982 science-fiction/horror movie, “Forbidden World,” filtered through the mind of an obsessive, self-proclaimed prophet. Created by Adam Stone & Erin Rollman at Buntport Theatre, with contributions from myself and many others.

Also available as prints

Reply via Email | Mastodon | Bluesky

Pig Sez, song demo

2014-08-01T00:00:00Z

The last demo of new material (for now):

Pig Sez demo, including words from CA Conrad’s Book of Frank

Hear studio recording of this track on our debut EP: The Holes They Leave

Reply via Email | Mastodon | Bluesky

I'm Not Ready To Go Yet, song demo

2014-07-29T00:00:00Z

Another demo: this one features Daniel Rule on the second guitar & vocals. Daniel has started playing with us regularly these days — we’re excited to have him in the band!

I’m Not Ready To Go Yet is our follow-up to the earlier Suicide Note.

Hear studio recording of this track on our debut EP: The Holes They Leave

Reply via Email | Mastodon | Bluesky

UMS day 4 (the end)

2014-07-28T00:00:00Z

I love this city. It may feel like a small town at times, but we have a music scene to prove otherwise. Over the four day indie-music orgy of UMS we’ve seen (and enjoyed) everything from Americana & country, through shoe-gaze and psychedelic rock, to some brilliant post-punk noise (and a fair number of strange mashups in between). I wish I could do it all again.

I’ve been a fan of Broken Spirits, Land Lines, and Kitty Crimes for some time now. Porlolo, In the Whale, Blonde Redhead, and Gora Gora were all very entertaining. But the lucky surprise of the night was wandering past Eslinger Gallery on our way home, and discovering the wonderful noise of Emerald Siam.

Thank you, Denver!

Photos from UMS day 4

Reply via Email | Mastodon | Bluesky

UMS day 3

2014-07-27T00:00:00Z

I have no time to write this before I dive back into the fray. Magic Cyclops is always magic, and we love Jen Korte in all her incarnations. We played with Abandin Pictures back when they were just getting started, and it was great to see them rocking the Hi Dive. If you haven’t heard them yet, it’s time.

Photos from UMS day 3

Reply via Email | Mastodon | Bluesky

A Dark Plain, song demo

2014-07-26T00:00:00Z

The first in a new set of demos:

Demo recording of A Dark Plain, lyrics by Gil Scott Heron

Hear studio recording of this track on our debut EP: The Holes They Leave

Reply via Email | Mastodon | Bluesky

UMS day 2

2014-07-26T00:00:00Z

I’m overwhelmed by all the music! At this point I wander half-aimless, in and out of venues — quick to judge, but more often inspired. Glad to discover that most of my favorites are local, and I can stalk them like a groupie until the next UMS arrives again.

I’ve always loved Accordion Crimes and they pulled through again last night — full of dynamic surprise. Mako1972 has a similar post-punk thing going, which I always enjoy. Raven Jane and The Truth & Spectacle were excellent (from our unbiased opinion of Daniel in a hat). I’ve followed Ian Cooke for a while, and was glad to see him returning to a simpler, cello-driven sound. Only caught the tail-end of StaG, but they earned another listen. Saturn Cowboys was a raucous fun time, and Dragondeer got the whole room (including us) excited like no effect-heavy lead mandolin has ever done before.

This was a wonderful night of live/local music, but my favorite discovery was the intricate shoe-gazing soundscapes of Dave Devine Relay.

Photos from UMS day 2

Reply via Email | Mastodon | Bluesky

UMS day 1

2014-07-25T00:00:00Z

So many people! So much music! And Elin Palmer is a badass on the Nyckelharpa.

Tonight — Daniel is playing with both Raven Jane (7pm @ Moes Original BBQ), and The Truth & Spectacle (midnight @ The Hornet). Also at midnight, Accordion Crimes is worth checking out if you like Fugazi-style noise coming from an aluminum guitar.

Photos from UMS day 1

Reply via Email | Mastodon | Bluesky

Media Archeology Lab, Artist in Residence

2013-09-25T00:00:00Z

An artist residency at the Media Archeology Lab, working on development of The Post-Obsolete Book.

The piece requires a few props:

overhead projector & transparencies
digital audio/video
party hats
noise makers
an old book (about dance)
10-page printed powerpoint handouts

Reply via Email | Mastodon | Bluesky

Stratified design

2013-04-18T00:00:00Z

Layer tennis is a design game made popular by Coudal Partners. Two competitors (myself & Aaron Liechty) pass design files back and forth, riffing on the same work under extreme time constraints. Each 30-minute “volley” is posted live as it is created, along with commentary thanks to Jacob Liechty.

Sondra Eisenstat agreed to help us with the thankless task of posting it all online, since the rest of us were pre-occupied with writing & designing under pressure.

The battle took place on Sunday afternoon. The full experience is still available on the Exit Strata blog, but here are the volleys:

A game of Layer Tennis used to design a journal cover

Reply via Email | Mastodon | Bluesky

(re)Thinking on your feet

2013-03-29T00:00:00Z

Sometimes you have a great idea for a project, or one aspect of a project, and you throw everything at it, but the idea turns out to be a dud. You can’t ditch the project after putting so much into it, but neither can you force it through. The only way forward is to take a step back.

How to everything (again)

Chalk Outline

When I started writing this blog series in November, I was in a hurry to post articles right away — ignoring everything I know about good process. I posted a few pressing thoughts, and then tried to write my way through the 5-step process from one end to the other.

It didn’t work, and each post is now taking me longer and longer to write, with more frustration than the last. I’ve written this post 4 times now, each time on different topics.

Starting from an outline can be comforting, but it’s not possible to organize material you don’t yet have, and you end up pushing yourself off in the wrong direction. That’s where I went wrong.

Play it Again

I skipped a step, and now I have to go back and do it right.

It’s time to gather all my material and see what I have, generate more ideas, scrap the failures, and rearrange what’s left into articles. This may take some time, but once that is done I should be able keep up a regular posting schedule.

Recycle

Lucky for me, none of my failed posts are wasted effort. They all work towards the goal I should have started with: collecting material. I have a recycling bin for every project — a file or folder to catch all the scraps as I work. Now I have a substantial start on what I need: my very own “Fuck the Muse” shitty pile of shit.

Reply via Email | Mastodon | Bluesky

Five(5), song demo

2013-03-12T00:00:00Z

Demo recording of Five(5)

Reply via Email | Mastodon | Bluesky

Poetry readings are terrible

2013-03-08T00:00:00Z

You don’t publish without editing, why would you perform without rehearsing?

Words don’t speak for themselves: they require punctuation.

Reply via Email | Mastodon | Bluesky

Explosive growth

2013-02-14T00:00:00Z

It’s always useful to remember where you are in the overall creative process. Here’s a refresher:

Define: What’s the idea, question, or hypothesis?
Explore: Reasearch, gather, and create the materials.
Organize: Outline the structure, or impose one.
Draft: Compile a complete first draft.
Revise: Consider, critique, and edit as needed.

We’re still following up on Step 2, which we started last week by compiling our curiosity shopping lists. We need to push out from our seed in every direction, and the list is there to help guide us.

Now it’s time to go shopping.

Surround Yourself with Material

It's time to get your hoarding on

The goal of this phase is to collect all the material you might possibly need to create your piece. It doesn’t matter what genre or medium you will use at the end, right now you want everything. You are building your shitty pile of shit that will get organized into a draft down the road.

Get your facts first, and then you can distort them as much as you please.

—Mark Twain

You need to fill your head (and your notebook) with possibilities. You need to start understanding the world you are creating — not by thinking about it, but by surrounding yourself with it. Your creative mind works by copying, transforming, & combining — so the more ideas you put into your head, the more you can get out when it’s time.

Research » Steal » Create

The first instinct of most artists is to sit down with a blank paper and stare at it until the muse strikes. Fuck the muse. Start with material that already exists. Use your shopping list as a guide and follow your curiosity. Explore your list of “things that will inspire you” — use Wikipedia and Google to follow one hyperlinked thought to the next, and add more inspirations to your list.

When you read/see/hear something you like, take it. Clip it out of an article, take a photo, make a playlist, or just take notes. When ideas start to merge and you are inspired to say something, then say it.

Cut it up. You can put it back together later

Ebb and flow with the cycles of research, theft, and creation. Let your inspiration drive you back and forth between exploring what’s there, and creating what isn’t. If research isn’t working, make shit up. If you can’t think of anything to make, find something to steal.

For Example

Following up on my list from last week, I spent time reading about Hermaphroditus & Mother Clapp. I started to see patterns around social gatherings, betrayal, and water. I copied and pasted large sections of pro-anorexia websites, wrote down important lines from Lou Reed songs, and wrote about my own memories of body and sexual experience. I even pulled from old email conversations that seemed relevant.

I used NaNoWriMo to get through this phase with a massive pile of 50,000 shitty words, along with a number of images and songs. Some are stolen, and some are my own, but all of them will be useful when I come back to start drafting.

Checking it Twice

Look back at your list. focus on researching the “things that will inspire you,” and stealing or creating the “things that need to be gathered” so you can cross them off your list. Add to the list if you realize something is missing, but focus on exploring each item in extreme detail, and following where it takes you.

There are several interesting tools you can use to help push you along when you get stuck — both as a solo artist and in collaborative settings. I’ll go into more detail on some of those next week.

Reply via Email | Mastodon | Bluesky

Get curious

2013-02-07T00:00:00Z

Now that you have a seed worth exploring, you are ready for step 2 of the creative process. The goal of this phase is explosive growth, following your curiosity out from the seed in every direction.

You’ve heard of the shitty first draft? It’s a nice sentiment, writing full shitty drafts without fear or judgment, but I think you can do even better:

Write shitty piles of shit, and leave the drafting for later.

I often refer to this as the fertilizer or bullshit stage

Drafting is an organizational problem. You can’t organize ideas you don’t have. Start by exploring and playing and wondering, free from fear and judgment, but also free from purpose, organization, and planning.

Don’t start with outlines. Don’t start with drafts. Start with curiosity.

A Shitty Shopping List

Our goal is to develop all the raw (shitty) materials we will need in order to start drafting. I’m not talking about pen & paper, or computers, or three cans of latex paint. I want to know what concepts, phrases, images, and aesthetics I am working with. I want to soak up inspirations, and understand my constraints.

Final cover design for The Posture of Contour

I start with three questions:

What already exists?
What still needs to be gathered or created?
What will inspire me?

Working on the book cover for The Posture of Contour, I asked the publishers and author for everything they had. Based on their answers, I ended up with these lists:

What already exists?

Dimensions: 5.5" x 8.5"
SpringGun Press wordmarks
ISBN & bar code (on white background)
Title: The Posture of Contour
sub: A Public Primer
Author: James Belflower
The content of the book itself

What still needs to be gathered or created?

Color palette
Artwork

What will inspire me?

Diagrams, schematics, & maps
Processes of abstraction & representation
Mouths, hands, & black spots
Collage
Cover art for Network by Jena Osman
Richard Serra drawings
Franz Kline
Paul Sharits colors
Stan Brakhage & Joan Miro
“The line between language and graphic”

They had done most of my work for me. That’s not always the case, but if you have a seed, you have enough to get started.

Sparking Curiosity

Bodies. A diagram.

The seed I developed in phase 1 can be used directly to start a list of materials in phase 2. Unlike the cover art, this project has no pre-existing material that I am required to use. Most of the material will have to be found or created, but I do have plenty of inspiration to draw from:

What already exists?

Format: a stack of note cards that can be shuffled
Some collaborative poems with Jacob Liechty that might fit

What do I still need?

A writing style
Characters? Story?
Specific memories
More on trauma (ptsd, etc)
More on bodies (eating disorders, etc)
Other voices
more?..

What’s the inspiration?

“The Invention of Heterosexuality”
Research on out-of-body experiences
Bodies & identity
Sex, gender, & sexuality
Memory & trauma
Hermaphroditus, Mother Clapp, & Molly Houses
Jacob Liechty, Tom Waits, & Lou Reed

It’s OK that this list isn’t complete, it’s enough to make me curious, and enough to point me in the right direction.

Coming Soon

In the next few posts we’ll talk about gathering vs creating, blind variation and selective retention, judgmental brainstorming, the viewpoints, and composition — all useful tools for this explosive curiosity phase.

Reply via Email | Mastodon | Bluesky

The Posture of Contour

2013-01-22T00:00:00Z

The editors at SpringGun Press asked me to design cover art for The Posture of Contour, a new book by James Belflower. I used the opportunity to get my mind out of an all-digital space, and spent most of my time with pen, paper, and oil pastel.

Sketches

My favorite experiments involved blind contours with a capped pen over homemade (oil-pastel) carbon paper, then arrows traced on a third layer using my iPad as a light table.

Final(ish) Design

In the end, James decided on the abstract jawbone pattern in red arrows.

What was once a diagram of the tongue, teeth, and bottom jaw.

Reply via Email | Mastodon | Bluesky

Starting from a seed

2012-12-13T00:00:00Z

You can’t start working until you know what you are working towards. That doesn’t mean knowing all the answers, it means knowing the questions that will guide you.

I refer to those guiding questions as the “seed” of a project.

A Range of Specimen

What do we have against these cute little insects?

There are many ways to find, define, and refine your seed. The LIDA Project borrows from Scientific Method, starting with a question and related hypothesis.

Formulate a question
Do background research
Construct a hypothesis

Simon Sinek's 'golden circle'

Simon Sinek starts his projects with “why” then “how” and finally “what” - statements of belief, values, and finally product.

Anne Bogart covers similar territory with her three-part seed:

What is the question that motivates the piece?
Who or what is the anchor through which we explore the question?
What is the structure of our exploration?

These are all variations on finding a seed. It doesn’t have to be a formal process, but it helps to know more-or-less what you need in order to move forward.

My seeds usually start with a single idea floating around in my mind until other ideas attach themselves. Once the parts begin to gel, I know it’s time to pay closer attention. In the end, I have a list similar to Anne’s before I move to the next step.

A Seed of My Own

One of my current projects-in-development started with a quote I found on the internet:

We name and speak of a troublesome ‘transsexualism,’ the feeling of being the other sex… We do not name and talk much about the feeling of being the same sex — the sex we think we are, the sex most of us desire to stay. But does not our feeling relatively comfortable with our sex, and our intense desire to maintain the integrity of our sex, indicate something that needs to be explained?

—Jonathan Ned Katz, The Invention of Heterosexuality

Out-of-body studies are super weird, y'all

I combined that with an article describing the science of out-of-body experience. It raised some questions for me:

How do we relate to these bodies we live in?
What does it mean to identify with a body, let alone a sex or gender?
How are trauma and memory involved?

Those questions became the motivating “why” of the project. With a little background research (I used Wikipedia, Google, and my local bookstore), the other pieces fell into place.

A herm (named for Hermes) is a statue with carved genitals on un-carved block legs

The fragmented & unreliable nature of memory inspired a structure: note cards, each written as a fragment of memory, and then shuffled before reading.

The anchor is a mashup of several existing characters and places taken from history, mythology and song: The transformation of Hermaphroditus, Mother Clap’s 18th-century Molly Houses, and the songs of Tom Waits & Lou Reed.

DIyourself

The goal isn’t to do it exactly the way I do it, or the way LIDA, Anne Bogart, or Simon Sinek do it. The goal is to know what you need, and then pay attention to how you get there.

De-mystify the process, then learn to repeat it.

Reply via Email | Mastodon | Bluesky

Portrait of Sondra & Dan

2012-11-20T00:00:00Z

Dan Eisenstat & Sondra Eby, a sketchy couple

I began this portrait in the same manner as the Kitten Karlyle illustration, and quickly found that it was the wrong style for these two. I made several more stylistic attempts, and was unhappy with all of them. We call that “the creative process”. I finally found the style I wanted by accidentally viewing all my sketches layered on top of each other. The rest was just a matter of cleanup.

Reply via Email | Mastodon | Bluesky

Creative modes and cycles

2012-11-08T00:00:00Z

Cycles have become the core of my creative process. Thinking in cycles means I always know where I am and where I’m going, even when I feel overwhelmed by the size of a project. If I’m stuck, it’s time for a new mindset. If my last move was to zig, my next move is to zag.

In his 1991 lecture on creativity, John Cleese describes two modes of operating: an “open” playful mode, and a “closed” productive more. Creative people, he claims, are simply the people that cultivate the open mode of operating.

We need to be in the open mode when we’re pondering a problem, but once we come up with a solution, we must then switch to the closed mode to implement it.

John Cleese is full of dad jokes

Your Brain at Work

Renowned psychiatrist Iain McGilchrist uses the same general framework in his RSA lecture on the Divided Brain:

The right hemisphere gives sustained, broad, open, vigilant alertness where the left hemisphere gives narrow, sharply-focussed attention to detail… Let me make it very clear, for imagination you need both hemispheres.

Both sides of your brain, together at last

Working in Cycles

Like all tools, our different modes of thinking allow us to solve different types of problems, or to solve the same problems in different ways. You have to know when to set down your hammer and pick up a chainsaw. That’s where cycles become useful.

How to everything

Cycling through different modes has become the core of my creative process. Thinking in cycles means I always know what to try next, even when I feel overwhelmed by the size of a project. If I’m stuck, it’s time for a new mindset. If my last move was to zig, my next move is to zag.

But open/closed and right/left aren’t the only modes available to us. I keep various mode cycles in mind as I work, and invent new ones when they seem useful:

Open vs. Closed
Action vs. Reflection
Expanding vs. Contracting
Inspiring vs. Perspiring
Work vs. Play
Intake vs. Output
Create vs. Destroy
Zoomed-In vs. Zoomed-Out

What cycles are useful to you?

Action & Reflection

Putting these ideas to use is a cycle of it’s own — stepping in and out of the work. When you hit a snag, step back and consider your approach. Often, an obstacle to the open mind can be overcome with a closed mind, and vice versa.

If I’ve been looking at the details, I step back and look at the project from a distance. How does it all fit together? Are the problems on page 12 caused by something on page 3? If I’ve been writing stream-of-conscious (expanding), I start editing with a vengeance (contracting). Creativity is subtraction as much as creation.

Garbage In (Please)

Similarly, If I’m all out of ideas, I spend some time doing research. It’s important to have a deep well of material to draw on, and that well needs to be maintained. Sometimes I’ll study a related topic, or I’ll read a book, watch a movie, or just watch TV. Ignore the old “garbage-in, garbage-out” mantra. Watch shitty TV, eat some candy, and enjoy it. You can learn a lot from garbage.

Practice being critical without being dismissive. The important thing is to replenish. Getting new ideas into your head is part of the work.

Stay Agile

And now for a callback framed as a diversion

No one technique is going to get you the whole way there. Practice changing directions quickly. What happens if you switch modes every five minutes?

Stay responsive to problems as they come up, changing your approach based on the problem in front of you. When you get stuck, that’s a good thing. Use your frustration as motivation. Frustration is just a cue for change. Push back. Ask why you’re stuck. Explore your stuckness, reflect on it, dive into it, adjust, and keep moving.

Creativity happens in cycles: the end of one cycle is the start of another.

Reply via Email | Mastodon | Bluesky

Ordinary tools of thought

2012-10-23T00:00:00Z

Kirby Ferguson argues that the three basic techniques of remixing (copy, transform, combine) form the foundation of all creative process. He refers to these techniques as the “Elements of Creativity”…

Creativity isn’t magic. It happens by applying ordinary tools of thought to existing materials.

—Kirby Ferguson

It seems I can’t dive straight into the five steps of creative process — my content wants to take a different route (more on that later). Instead, let’s start by establishing some broad themes that will resurface regularly along the way.

The Elements of Creativity

Kirby Ferguson’s fantastic video series, Everything is a Remix, argues that the three basic techniques of remixing (copy, transform, combine) are actually the foundation of all creative process. He refers to these techniques as the “Elements of Creativity”.

I won’t go into the details of his argument, but you should. My goal is to pick up where he leaves off, turning creative theory into creative practice.

Go watch the entire series. I can wait.

(Pause.)

I’m serious. Consider it homework.

Spark & Slip

Douglas Hofstadter, a writer and professor of cognitive science, makes the same argument in his book Metamagical Themas. He talks about creativity as a process of “sparking & slipping”:

There is a way that concepts have of “slipping” from one into another, following a quite unpredictable path… An example of such a slip is furnished to us whenever we make a typo or grammatical mistake, utter a malapropism… or confuse two concepts at a deeply semantic level.

This isn’t just technique, this is how our brains work — sparking off ideas and slipping towards other ideas — copying, transforming, & combining into new ideas.

The Art is Inevitable

I invented nothing new. I simply assembled the discoveries of other men behind whom were centuries of work… So it is with every new thing. Progress happens when all the factors that make for it are ready, and then it is inevitable.

—Henry Ford

Art is no different. Like inventors and scientists, our job is to facilitate the process of experimentation and transformation, then capture the results.

These can be difficult skills to master, but they aren’t magic, and there are tools that can help us. It’s nothing new — conceptual artists and remix artists have been honing these tools for years, and we’ll borrow from them regularly — but I want to show that the conceptual/remix process is essential for every medium and every genre.

Reply via Email | Mastodon | Bluesky

Portrait of Kitten Karlyle (nsfw)

2012-10-18T00:00:00Z

My good friend, Kitten Karlyle

Reply via Email | Mastodon | Bluesky

Fuck the muse

2012-10-16T00:00:00Z

I’ve been told that you can’t teach creativity, but I disagree. We think of creativity as sudden, sexy, inexplicable moments of inspiration — ignoring the hard work that makes those moments possible.

The Art of Control

Taking control of your art isn’t a matter of brute force. You have to let go, explore, take risks, and throw yourself off-balance. A good process will give you that freedom, while nudging you in the right direction.

Ease the burden of originality. The pressure to be unique and interesting can paralyze you. Don’t try to be interesting. Set up the conditions, and make sure you capture the results.
Do the unthinkable. The only way to create something beyond imagining is to explore outside your own imagination. Let the process take you there.
Make informed decisions. Stepping back from the work allows you to see it more clearly. Once you have all the options in front of you, you can see what works and what doesn’t.
Put your strengths (and weaknesses) to use. Measure your skills against each step of the process. Learn what you can count on, where you need training or practice, and how to turn your flaws into assets along the way.

Class Overview

I break the creative process down into five major steps. We’ll look at each one in it’s own post:

Define the Seed: What’s the idea, question, or hypothesis?
Explore: Reasearch, gather, and create the materials.
Organize: Outline the structure, or impose one.
Draft: Compile a complete first draft.
Revise: Consider, critique, and edit as needed.

There’s more than one way to skin the walrus, and each project will call for unique adjustments, but the same basic tools are needed to create genre fiction, absurdest drama, lyric poetry, or conceptual installation art.

This isn’t paint-by-numbers — it’s a toolkit and a way of thinking. What you do with it is up to you.

Credit Where Due

My approach is influenced most heavily by Anne Bogart’s Viewpoints, Chuck Mee’s (re)making project, The LIDA Project’s “bucketing”, Agile web development and graphic design processes, scientific method, Steal Like An Artist by Austin Kleon, Everything is a Remix by Kirby Ferguson, Don Fry’s Writing Your Way, queer theory, and many years of working with ensemble theaters and bands.

Reply via Email | Mastodon | Bluesky

Susy 1.0 release

2012-08-14T00:00:00Z

This release is loaded with new features, but don’t let that fool you. Susy has become shockingly simple to use. See the website for more details and demonstrations.

Susy 1.0 has officially launched! Thanks to everyone who contributed.

The interface and syntax have been simplified so that the language is consistent and easy to understand. We cleaned up the output, taking into account Compass browser-support settings, and giving you more control over exactly how your grids are built. Then we added a load of responsive tools and optional new settings to make Susy as absolutely flexible as possible.

Happy coding!

Reply via Email | Mastodon | Bluesky

Oddities & Curious Lands

2012-07-24T00:00:00Z

In case you are ever bored, there are some things you should be doing on the internet. Several of those things were made by Jason Nelson.

You might start with the games (“i made this, you play this, we are enemies” shown above), then perhaps some “Stunningly Harmful Songs… for spreading and baffling and loving.” You can explore on your own from there.

Reply via Email | Mastodon | Bluesky

Sass striped backgrounds

2012-07-20T00:00:00Z

Jina asked twitter for Sass advice the other day. She was working on a bit of code to create a rainbow-striped background gradient using any set of arbitrary colors. This is my solution, in the form of a Sass function.

It requires Sass 3.2 in order to run.

Stripes Function

Start by setting a variable to the colors you want:

$rainbow: red orange yellow green blue indigo violet;

You could set individual variables for each color as well. You would still pass them all as a single argument, or join them into a single variable before passing, as you see fit.

Here’s the function:

// Returns a striped gradient for use anywhere gradients are accepted.
// - $position: the starting position or angle of the gradient.
// - $colors: a list of all the colors to be used.
@function stripes($position, $colors) {
  $colors: if(type-of($colors) != 'list', compact($colors), $colors);
  $gradient: compact();
  $width: 100% / length($colors);

  @for $i from 1 through length($colors) {
    $pop: nth($colors,$i);
    $new: $pop ($width * ($i - 1)), $pop ($width * $i);
    $gradient: join($gradient, $new, comma);
  }

  @return linear-gradient($position, $gradient);
}

And how to use it:

.rainbow {
  @include background-image(stripes(left, $rainbow));
}

Jina has posted a demo and explanation on CodePen.

(The real lesson here is that all the colors of the rainbow are acceptable CSS color keywords. Go forth and queer the web.)

Reply via Email | Mastodon | Bluesky

I See Rockets, song demo

2009-05-14T00:00:00Z

Demo recording of I See Rockets

Reply via Email | Mastodon | Bluesky

Miriam Suzanne

Butter bells, fresh from the kiln

Poetic CSS Course, Early Bird Launch

There's no point resisting

I had to look it up

I've been making pots

Laser-cut pottery throwing gauge

Build your own

The frame

The pointer arms

Hardware

Tech continues to be political

You are here, on my personal web log

Chill out, it’s just a tool

Meanwhile, back at the hammer factory…

But her use-cases

Tech workers seem to like tech actually

I don’t know

It’s probably good to get this clarity

Addendum, 2025-02-16

Aggregating my distributed self

The objects of my web desire (again)

What belongs in the feed?

What belongs in the archive?

A first pass

A web component for CodePen embeds?

We don't need a boss, we need a process

Eleventy buckets & cascade layers

Am I creating performance issues?

Sass can load-css into layers

When in Eleventy, do as the Eleventies do

A slash-why proposal

Custom element, two ways

User styles on the web

New year, same (terrible) Mia

CSS @scope

Reclaiming my time

2022 kinda sucked

Let us be (un)resolved

Q1 OKR KPI ROI (a report, with data)

Cascade Layers

Javascript automation on Mac

The basics of JS in Alfred

My simple word counter

Personal Histories

Ancient Web Browsers

Critical CSS? Not So Fast!

CSS tie-dye gradient backgrounds

Playful gradient inspiration

Looking for texture

A conic & radial first draft

Blended gradient tie-dye

Personal website redesign

Request for Comments: Sass Color Spaces

A long-term plan for logical properties?

Container queries in browsers!

Style Queries Prototype

Browser Support for Size Queries & Units

I never let things be small

A whole cascade of layers

The first two (implicit) layers

Actual layers, with styles I actually wrote

Reset layer

Default layer

Default config secret sub-layer 🤫

Features layer

Layout & theme layers

Reflecting on all those layers

This content won't architect itself

Why did I make this site in the first place?

Some things change, some things don’t

The objects of my desire

But why, though?

What can my website be?

No demo [website] reno

Some background, and goals

Clarify the information architecture

Clean up the HTML (& Nunjucks)

Make RSS a first-class part of the site

Try out new CSS features (slowly)

Sass can `load-css` into layers