Miriam Eric Suzanne

Handmade holiday gifts

2025-11-24T00:00:00Z

I like making them, and I hope you like gifting them

Selling things stresses me out. But making things is fun, so here we are. If you’re looking for holiday gifts – for yourself or others – I’d love to help out. Take my pots, please!

Erin offered to decorate some of the pieces I made this fall, if…

I would use white clay, and
leave flat surfaces for decoration

So I did! I even got some mid-fire Kota porcelain from Kentucky Mudworks, for a bright white (and sometimes-translucent) finish.

Today’s ‘drop’ includes several of these bright and colorful pieces inspired by the decorations around our home:

The wall, as inspiration

I also worked on few commissions that resulted in extra pieces – like a stemmed wine goblet, a number of large soup bowls, and two-tone bottles/soap dispensers made from a combination of Rocky Mountain Clay BMX and New Mexico Clay Ironstone.

Pay what you want, more or less

When you look around at pottery prices, the range is dramatic. I’ve tried to price my pieces where I think they fit “the market” in terms of style and refinement – but it still feels somewhat arbitrary.

I know these prices are higher than your average Etsy seller. But I’m not in it for the money. I’m just happy if I can afford to keep making pots – and I’m especially happy when other people are enjoying the things I’ve made.

Ideally, I’d prefer a pay-what-you-want model, but my shop setup doesn’t allow that – and people seem to get stressed out choosing a price. Relatable!

Instead I’ve added a page of discounts and a tip jar. I encourage you to use them!

15-OFF (15% off your order)
30-OFF (30% off your order)
45-OFF (45% off your order)

Don’t hesitate to bring those prices into a range that fits your budget. If you see something you like, I want you to have it. That’s more fun for me than storing it in a cupboard.

Feel free to pass this along to other people you think might be interested!

Commission something specific

A recent goblet commission, one still available!

I’ve done several commissions, and I enjoy it! Here’s the deal:

You tell me what you’re looking for (like a wine goblet or a soap dispenser or a tissue box cover, etc).
I tell you if that sounds fun. The more finishing details (like color) you leave to my discretion, the more fun I’ll have.

If it sounds fun, I’ll try to make it!
If you like what I make, you can pay what you want for it.

You can ask me for a price, and I’ll make something up. But the whole point is to make things that sound fun, for people who would use them. So I won’t take the commission unless I’m excited to try it for the experience.

It usually takes at least a month of turnaround time, depending on the complexity.

Get updates!

If you’re interested in updates when I make new work, sign up for the occasional email. I promise to keep them rare.

I called the newsletter Mia Culpa because it means something like through my fault, which is an accurate description of how my pottery comes to be. I also like apologies, and think it would be funny to call this whole endeavor My Bad Pottery.

Oops, sorry, here’s some pots!

I've been making pots

2025-06-22T00:00:00Z

And my website isn’t ready for them

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.

Laser-Cut Pottery Throwing Gauge

2025-05-16T00:00:00Z

As simple as I could make it

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.

Tech continues to be political

2025-02-12T00:00:00Z

And the politics aren’t looking great

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?

Enjoy some handmade functional art? Keep fighting for your neighbors.

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. ↩︎

Aggregating my distributed self

2024-09-22T00:00:00Z

Where does all this content belong?

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

A web component for CodePen embeds?

2024-09-09T00:00:00Z

It’s not essential, but it took me down a path…

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.

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

2024-08-08T00:00:00Z

(and our team will probably need some training)

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)

Eleventy Buckets & Cascade Layers

2024-07-06T00:00:00Z

Solving a problem I created

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

(Eleventines? Eleventonians?)

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? ↩︎

A Slash-Why Proposal

2024-07-02T00:00:00Z

What are you aiming for?

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)

User Styles

2024-01-24T00:00:00Z

You’re allowed to have preferences. 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?

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 (‘real’) custom element simplifies the markup, but adds a JS dependency. The markup:

<code style="--swatch: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?

See the Pen custom element, two ways by @miriamsuzanne on CodePen.

New Year, Same (Terrible) Mia

2023-12-31T00:00:00Z

I don’t know where I’m going, but I’m on my way

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!

Following my curiosity. Maybe I should take up lock picking next?

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

CSS @scope

2023-12-15T00:00:00Z

Keep selector conflicts to a minimum

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.

Bookmark from 12 Days of Web

Scoped styles have always been the primary goal of CSS. Selectors scope declarations to matched elements. Those selectors can be combined to create more specific scopes – each modified by its relation to others. But the @scope feature, already available in Chromium browsers, will make that functionality even more powerful.

HTML Web Components are Just JavaScript?

2023-11-17T00:00:00Z

I’m still getting used to this

There’s been a recent flurry of articles about web components, with advice on how to shape them as extensions of HTML. I decided to dig in, and see how these ‘HTML web components’ could become a part of my own workflow.

Bookmark from OddBird.net

Cascade Layers, CSS Functions, and More

2023-11-14T00:00:00Z

I drop by the show to talk about CSS updates and news on container queries, rolling out cascade layers, !important things to remember, custom properties, exit animations, CSS functions, state queries, and more.

Bookmark from Shop Talk Show

https://cdn.simplecast.com/audio/167887a0-ac00-4cf9-bc69-b5ca845997db/episodes/02c9a71e-21e8-4ee9-b0ca-b2d8f6ebf030/audio/9f538fb5-34bf-49fe-9616-1874a2e488f1/default_tc.mp3

Listen to the podcast…