🏳️⚧️ Queer Art & Code 🏳️🌈
:oddbird: Co-Founder @OddBird
:w3c: Working on CSS in a (@w3c) Group
🤘🏼 art.miriamsuzanne.com, teacupgorilla.com, & grapefruitlab.com
:pinkraccoon: Server admin (see @mods)
What are we building here? Is it a world we want to live in?
Public Key
npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Profile Code
nprofile1qqsxfz0564n2x83latz882nrh4av54tsj7tcnwmjwey7geww9hca4hcpz4mhxue69uhhyetvv9ujuerfw36x7tnsw43qr07znd
Show more details
Published at
2026-05-20T19:27:59Z Event JSON
{
"id": "9c1614c78b3185cc2461e3d6eaf46ee0e2d33675b9394fe3629b7730557409c0" ,
"pubkey": "6489f4d566a31e3feac473aa63bd7aca5570979789bb727649e465ce2df1dadf" ,
"created_at": 1779305279 ,
"kind": 0 ,
"tags": [
[
"emoji",
"oddbird",
"https://cdn.masto.host/frontendsocial/custom_emojis/images/000/007/574/original/c1443e81bd9514f2.png"
],
[
"emoji",
"w3c",
"https://cdn.masto.host/frontendsocial/custom_emojis/images/000/007/750/original/cf1f51d5ec19e252.png"
],
[
"emoji",
"pinkraccoon",
"https://cdn.masto.host/frontendsocial/custom_emojis/images/000/026/667/original/9387b31196bbe7e2.png"
],
[
"proxy",
"https://front-end.social/users/mia",
"activitypub"
],
[
"client",
"Mostr",
"31990:6be38f8c63df7dbf84db7ec4a6e6fbbd8d19dca3b980efad18585c46f04b26f9:mostr",
"wss://relay.ditto.pub"
]
],
"content": "{\"name\":\"Mia (web luddite)\",\"about\":\"🏳️⚧️ Queer Art \u0026 Code 🏳️🌈\u2028:oddbird: Co-Founder @OddBird\u2028:w3c: Working on CSS in a (@w3c) Group\u2028🤘🏼 art.miriamsuzanne.com, teacupgorilla.com, \u0026 grapefruitlab.com\u2028:pinkraccoon: Server admin (see @mods)\u2029What are we building here? Is it a world we want to live in?\",\"picture\":\"https://cdn.masto.host/frontendsocial/accounts/avatars/109/287/575/127/245/522/original/0b4a5e7e3baf5a07.jpeg\",\"banner\":\"https://cdn.masto.host/frontendsocial/accounts/headers/109/287/575/127/245/522/original/3faa6be14bf9c282.jpg\",\"nip05\":\"[email protected] \",\"fields\":[[\":oddbird: OddBird (Agency)\",\"https://oddbird.net/authors/miriam/\"],[\"🎨 Art \u0026c.\",\"https://art.miriamsuzanne.com\"],[\"👩🏼🎤 Personal Site\",\"https://www.miriamsuzanne.com/\"],[\"💸 Impersonal Site\",\"https://business-business.business/\"]]}" ,
"sig": "b6352244d932fe16ffa3c4cfa9288738b9278b35088b5ba3a5c19fbbbbf7aa41a511081eb9d219b1369e1ab3d74831bcda452f1eb643c61b374dea0c3ffc2dfe"
}
Last Notes npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Some large noodle bowls that came out over the holidays. #pottery One has a slight glaze blemish, but otherwise I'm happy with them. Using Rocky Mountain BMX clay. https://cdn.masto.host/frontendsocial/media_attachments/files/115/888/835/307/125/266/original/82dd56acfbcbea52.jpeg https://cdn.masto.host/frontendsocial/media_attachments/files/115/888/835/049/372/129/original/996699ab790660e9.jpeg npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Very happy with the concept, but had some serious glaze issues… like it just totally filled in the holes. lol, oops. I'll try again. Porcelain with clear glaze and a cobalt wash. We all agree which is for salt vs pepper, right? #pottery https://cdn.masto.host/frontendsocial/media_attachments/files/115/691/983/629/643/792/original/ffc4af478f5d4fe3.png npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) My latest pieces online, and I expect to add a few more over the coming week. If you're thinking about holiday gifts, consider some handmade pottery! If you like it, I want you to have it. #pottery #art https://art.miriamsuzanne.com/ https://cdn.masto.host/frontendsocial/media_attachments/files/115/611/537/401/288/976/original/d8852e195f21653a.png npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) New pieces going online next weekend! Here's a quick taste. If you're shopping for gifts, consider some handmade #pottery https://cdn.masto.host/frontendsocial/media_attachments/files/115/545/332/068/981/256/original/03b2318a4089c89a.mp4 npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) For spacing values on a website – is it better to respond to font-size, or available space, or stick with static units? You don't have to choose! Sometimes the best unit in CSS is a combination – with calc()/clamp() or min()/max() or round() & other math functions. https://www.oddbird.net/2025/09/23/type-units/ #css npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I'll be missing out on the big masonry conversation starting soon at the CSSWG meetings in Paris, because I'm not in Paris, and it starts at 1am here. I did enjoy the recent Webkit blog post about item-flow: https://webkit.org/blog/17219/item-flow-part-2-next-steps-for-masonry/ But I need sleep before the end-of-day/7am scope topics. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) 🎉 Happy 30-month anniversary to Container Queries – in every browser since Feb, 2023. It was supposed to be impossible, but here we are! Why 2.5 years? Nothing will change tomorrow, but Baseline uses this milestone to signal confidence a feature has gained "wide" support. https://youtu.be/bhHV0rQ3-CQ #CSS npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) CSS mixins & functions are coming! And the best way to prepare is by re-visiting CSS variables. Don’t let the Guaranteed Invalid value & Invalid at Computed Value Time behavior trip you up. Watch my CSS Day talk, or book a workshop to go in depth with modern #CSS! https://www.oddbird.net/talks/mixins/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) as a child, I always wanted to be older. And I've been achieving that goal pretty consistently. I've put in my hours. Every year, I get farther than I did the year before. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…xq7g I didn't know about subitems. I'll look it up. One day I throw a batch of say 10 small planters, or 12 mugs, or something. But the next day I only have time to trim half of them. So now my set of 12 has 2 sets of 6 at different stages. Maybe 4 of those get loaded in a kiln. I like knowing when a set is split up at different stages, but also I like tracking the set as a whole. Sometimes they get back in sync, etc, and I wish I hadn't split them into individual rows. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…xq7g Currently a name, clay used, starting weight / size, a series of dates for each step of the process (which doubles as a progress bar and next-step indicator), count (when doing multiples), glazes or other decorations applied, who/what it's for, how it came out, final weight / size, notes. Then another sheet for tracking sales. I'd like to have photos, see different views, and track when multiples get split at different stages or different glazes/decorations, etc. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I've been tracking my pottery projects in a spreadsheet, but i keep thinking of better ways. There are a few apps available, but all of them (so far) were Not Invented Here, and that bugs me. Do better! Seems hard to track in Obsidian. Maybe coda? The world's my oyster / hard to open npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) We created Susy for CSS layout on 13 July, 2009 – 16 years ago! – & deprecated the project in 2020. But the Susy pages are still our most visited content on the @nprofile…u8mh website. If you're interested in learning modern #CSS approaches, I'm working on a course: https://www.oddbird.net/learn/courses/design-with-code/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Cis friends in the US, please consider calling your senators about this. This amendment would strip health care from so many trans people if it goes through. https://front-end.social/@[email protected] /114716485966798431 npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…6h3y trust has had a rough day, and is reaching for the expensive booze. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…6h3y Please boost trust, Adrian. Life is stressful. We could all use the added confidence. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I made it home, after a lovely series of conferences in Europe. Good to see many of you in person. At the end of my talks, I announced (with a broken qr code) that I'm working on a #CSS course: Designing with Code. Subscribe for updates if you're interested! https://oddbird.dev/learn/courses/design-with-code/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Having now left JSHeroes, I've decided that I should provide an alternative for the JSVillains. CFP is open, please submit topics. Coming soon: CSS Night npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Oh I see now @nprofile…4tpe is using my plan exactly, but without a build step. Just link the meta tag to a screenshot api, and move on. Done. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Seeing a lot of posts about generating OpenGraph images for 11ty posts, and suddenly realized my new approach will fail. I generate an html page, and I just want to snapshot that page in a build step. Right now it's looking for a URL, but (obviously) the URL doesn't exist yet. That's the point. But all the other approaches involve non-html image generation, or HTML/CSS limitations. And I don't want to do that. I just want my thing to work, please. Thanks. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Just 3 more days to register for the Cascading Layouts workshop! If you haven't seen it yet, here's an intro and demo from the workshop – creating faster layouts with CSS grid areas: https://www.youtube.com/watch?v=8k6m87woEpQ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) RSS is great, but after someone does a personal site re-design you are legally required to click through and read all their posts on-site for at least a couple months. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) CSS Working Group resolved to add an nth-item() function, for selecting a value from multiple options. That could be useful in a lot of situations, but i'm excited to combine with sibling-index(): nth-item(sibling-index(), red, orange, yellow, green, …) #css npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…pye9 https://www.youtube.com/watch?v=YtIQVaSS5Pg npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I watched a debate between Emily Bender and Some OpenAI Guy, and I just… - Bender: As an expert in linguistics, we have a pretty good grasp on "meaning" vs "form". LLMs are just putting words together. People will read meaning into it, but that's a lie. People will get hurt. - OpenAI Guy: If people read meaning into it, there's meaning in it *for them*. If things go wrong, that's a user problem. Capitalism, baby. Check mate, humanities and also sciences. Horoscopes are AGI now. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…4tpe I heard that in Jeopardy! voice: "I'll take Systemic Problems Left To Individuals for $10, please Alex" npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…4tpe Is there a 'bribecodable' list I can join? Please do bribe my code, thanks. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Can we get CSS 'logical shorthands' unstuck? The WG recently added a `size` shorthand for width & height. People asked about inline-size & block-size as well. But that issue has stalled. With a little funding, we could make it happen! #CSS https://www.oddbird.net/2025/03/20/logical-shorthand/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I don't care if llms can "replace me" - what an absurd question - I care about how the hype is already being weaponized by oligarchs to lay off tech workers & public servants, while decimating all US safety nets. Why are we acting like this is a hypothetical about what *the software* can do? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…4tpe i love that there are always consequences* when they get these predictions wrong *vc funding npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) 🏳️⚧️My friend played a gig tonight supporting Trans Continental Pipeline - helping queer people move to CO for safety. They've gone from ~40 requests per month in October, to ~400/mo since november, and need support. Can you chip in? Or do you need help? https://tcpipeline.org/ https://cdn.masto.host/frontendsocial/media_attachments/files/114/170/798/014/208/854/original/2e05a4a6e78bf460.jpg npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Installed LibreWolf and Servo, because the more the better. Already have Zen and Vivaldi (which I like) and Floorp (though I haven't really played with it) and Arc (good, but too much ai), and all the old guard of course. An abundance of browsers. (But never Brave) What's fun about Servo for checking CSS is they're missing a lot of features, but not in chronological order. So it's a great way to view your enhancements acting all progressive. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Since 2009, I've been contributing to open web tools & standards, with a focus on CSS and related platform features at the W3C. But that work takes resources, making it hard for independent contributors like us @nprofile…u8mh to stay involved. We need support. If you appreciate what we're doing, you (or your company) can sponsor our work directly: https://opencollective.com/oddbird-open-source Let's keep building an open web for everyone. #w3c #css npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Did some trimming on this guy today, and decided to leave the slight chattering marks from the trimming tool. Looking at the photo I want to touch-up the neck-to-rim transition: It's a reclaim mix of brown clays, I'll be curious to see how it come out. #pottery #art https://cdn.masto.host/frontendsocial/media_attachments/files/114/106/739/556/246/342/original/22cacbea7f49eae9.jpg https://cdn.masto.host/frontendsocial/media_attachments/files/114/106/739/579/790/988/original/340706c6e042df2b.jpg npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I love how much we can do by "setting aside the ethical and climate concerns" at the start of every modern tech talk, podcast, and article. So much we can do without those annoying ethical and climate concerns! Just set em aside! Cool trick! (real "I'm not transphobic, but -" vibes) npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…4tpe If only it was the colorado, i would feel right at home fixing it. https://junghansarchiv.de/uploads/1912_03_0031_grossuhr_bfc44272ef.pdf npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) The first chiming clock I've worked on, a Junghans Nebraska from ~1912. Still learning my way around. Here a cam on the chime side (right) sets up the hour strike (left) - dropping the rack to the correct hour notch, based on the snail (center) - but not letting it run until the chime is complete. I really want to understand it before I take it apart. 😅 https://cdn.masto.host/frontendsocial/media_attachments/files/114/072/894/011/165/396/original/cbc1825c4e375a51.mp4 npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) The thought experiments for ai centrism are always so grim. so, we're asking if it's ok for an artist to… stop making art? but they still want to sell art, that looks kinda like art they used to make? why…? just say we're all burned out on capitalism. we don't have to debate the ethics of being tired or whatever. i'm tired too. i just don't see fake art as some great solution. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) La tech continue d’être politique Et la politique ne s’annonce pas bien Traduit par @nprofile…ltca https://www.miriamsuzanne.com/2025/02/12/tech-ai-wtf-fr/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Really gets to the heart of technical agency: https://www.youtube.com/watch?v=QEJpZjg8GuA Why did I write a post last week? I should have just waited and shared this video. Then I wouldn't have anxiety about exposing emotions on main, and the inevitable context collapse of social media. Next time I'll know better (I won't). npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) What if, some day, I kick you in the shin so hard that you hallucinate a cure to cancer? We could cure cancer! Wow! I'm mean, wow wow wow! Doesn't this make it a Moral Requirement that I kick you as often as possibe, to achieve that perfect kick?! Yes! Yes, I must kick you! For humanity! npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I have feelings about AI & the web & my experience being trans "in tech" in 2025 - so I screamed some thoughts onto my personal web log. I hope for all of us a more queer & humane future. Keep building communities & dreaming better paths. https://www.miriamsuzanne.com/2025/02/12/tech-ai-wtf/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Next week, @nprofile…tvk7 & I will be Winging It live with @nprofile…009q to talk about debugging #CSS anchor positioning. Joins us on Thursday at 1pm ET / 10am PT https://youtube.com/live/3vwruYb9du4 https://cdn.masto.host/frontendsocial/media_attachments/files/113/988/279/001/685/986/original/f9bb3138017a3832.jpeg npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Yesterday a reporter asked me what I would say to someone who opposes public arts funding because a field that is maintained through subsidies clearly lacks a business model. I said a business model is not something I consider valuable. It's not a metric I care about. I don't think markets are a measure of what's good. I guess I feel similarly about gen AI and Tailwind? It's hard to discuss their utility, when we seem to disagree about what the goals are. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…8xvq @nprofile…cjdl I have my personal and mods here - but use browser profiles, and a third-party phone app. It works, but yeah - multiple logins would be a useful feature. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…8xvq @nprofile…cjdl It's actually slightly more difficult on the same server, but i don't mind if you want to. To do it on one server you need to get yourself an invite link (in your preferences), log out, and set up a new account. Or use browser profiles/different browsers. Or there are third-party tools that might allow logging into multiple at once. With different servers, there's no conflicting logins issue to deal with. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Installing these new pendant lights in an existing track, we had to debate using space-around vs space-between. I assume this is what @nprofile…67lt meant by CSS IRL. https://cdn.masto.host/frontendsocial/media_attachments/files/113/710/636/835/677/129/original/f9b21f024530f140.jpg npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…6h3y Automated youtube captions are there this morning. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @nprofile…6h3y Good question. I'm not sure how fast the turnaround is on that – I'll look into it. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Join us for a fun holiday game show celebrating the #CSS specification birthday - with @nprofile…67lt, @nprofile…qksf, @nprofile…7dpu, @nprofile…9eh4, and our host @nprofile…s69q! We're going live in an hour: https://www.youtube.com/watch?v=fYfs6sKGciQ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I want a browser that lets you WYSIWYG adjust pages as you surf. I want to land on your site and be like nah, here, let me just change the font size and colors and contrast so they work for me. With a ui for quick edits, and code only for advanced stuff. I know all about the various plugins, and browser preferences, arc boosts, etc. I want non-technical customization to be a front-facing feature of the "User Agent" itself. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I am very tired of conference talks that start by telling me - everyone is excited - these tools are the future - now is the time to get on board - you don't want to be left behind You do not need to be excited for the machine they wish could replace you already npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) People now trust 'information' coming from black box algorithms controlled by just a few companies, as though they have "looked it up" somewhere, but also we can copy/paste relevant code snippets, with some amount of success! so it's great, actually! ✨ this industry is fucking stressful npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Hey #btconf - remember when I couldn't seem to get `max-content` to work in live code? I had `display: block` set on 'Awesome', forcing the line-break. The CSS was working, it was my own code conflict that embarrassed me. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I'm available for speaking gigs in 2025, if your conference or team is interested in talks/workshops on #CSS! I love to go in-depth on the classics –cascade, grids, alignment, etc. But I can also teach the new hits: container queries, colors, layers, :has(), et al. Let's get scheduled! npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I'm still here, and still trans, and the plan is the same: take care of each other. 💜 (😭) npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) A happy Miriam to all who celebrate this ninth annual day of being called Miriam. I am Miriam, and so can you! 🏳️⚧️ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) 30 years of the World Wide Web Wide World Wide Web Wide World Wide Web Wide World Wide Web Wide World Wide Web Wide World Wide Web Wide World Wide Web Wide World Wide Consortium #w3ctpac https://cdn.masto.host/frontendsocial/media_attachments/files/113/201/250/580/991/091/original/8dbccba26af9d31d.jpeg npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) This is a nice little monthly update on the support status of various features, from the Web DX community group. And it has an RSS feed! 🥳 Cascade Layers have been supported on all major browsers for 30 months! (That's the criteria used for 'widely available' in Baseline) #css https://web-platform-dx.github.io/web-features-explorer/release-notes/september-2024/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) The CSSWG as agreed to publish a first Working Draft for Masonry layout – with the two major proposals merged where possible, and otherwise presented side by side. Most of the differences are syntax only. Here's the Editor's Draft that will be published: https://drafts.csswg.org/css-grid-3/ And the discussion: https://github.com/w3c/csswg-drafts/issues/8195#issuecomment-2344098078 #css npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) "Google, Amazon, and Microsoft control seventy-five percent of the cloud computing market. Meta and Google own half of the fiber optic cables supplying internet services across continents." … "So what did GAMM do? They convinced us that our notetaking apps require an internet connection and forty thousand dollar GPUs located on a server three hundred miles away." https://www.fromjason.xyz/p/notebook/any-technology-indistinguishable-from-magic-is-hiding-something/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) We'll be Winging It Live with @npub1xed…yg9w in an hour! https://www.youtube.com/watch?v=c9l-01cySkQ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub1zyl…t54n Not yet, but there should be, and there's an open issue for it. Seems to be some sticking points on the exact syntax: https://github.com/w3c/csswg-drafts/issues/1724 npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) As a collaborative artist, I wanted to push back on the idea that creative teams need a strong leader. Collaborative process is a skill that people study and practice. Most teams aren't trained in that skillset, but they could be. https://www.miriamsuzanne.com/2024/08/08/vision/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) :has() is at 94.41% of tracked global browser support. That's pretty good. Cascade Layers are at 96.3%. oklch at 93% (with issues) color-mix at 91.18% CSS Nesting at 90% (if you're careful) @ scope at 84.83% (0% Firefox) light-dark() at 82.7% custom property style queries at 73.49% (0% Firefox) There's no magic number, and a lot we can do with progressive enhancement – but these are some of the recent #CSS features I reach for most often, and wish they would Just Work Already, Please. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I'm trans, and also terrifying. All my friends cower in fear at my obvious and innate power. (please cower) npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Have you often felt like fluid typography is just a bit too fluid? No one wants their fonts to get soggy and moist! Media-query breakpoints had all the jumpy crunch you long for, but they just take up too much space? Well you're in luck! Try my new Un-Fluid Typography™️ https://codepen.io/miriamsuzanne/pen/dyBGVjq?editors=1100 npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I often think about non-technical people i knew in the early oughts - like my exs parents - who had selected custom fonts for their browser. Their web was all papyrus! People often talk like no one changes their settings. And it's true I see it less often. But I don't believe it's the natural state of things - I think we trained them out of it? What did we do to discourage people having preferences? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Figma: we deeply apologize for our plagiarism machine copying work that you recognize. Please give us time. In the future, we promise to rip off many more designers you haven't heard of. It's not plagiarism if you don't recognize the source! npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) When I tell friends I just launched an NSA website, they seem concerned. But then I explain it and they are Even More Concerned. 😬 Registered this domain in 2014 (when it felt timely) and finally launched it last week. Still likely relevant? But not exactly the hot topic anymore: https://nsa4.us npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) When I have time, I want to add a page of links to other web artists. Not just in the CSS space. Who do you like? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I'm presenting some of my digital art projects this evening as part of The Enthusiasts at Buntport Theater (https://buntport.com). Come by to hear people talk about their side projects and obsessions! To prepare, I launched https://webart.mia.wtf, and finished two of the projects that were half-built: - https://men.mia.wtf (started in 2017) - https://nsa4.us (started in 2014) npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Excited to join @npub1jme…qdcc for a Smashing Hour, starting on the hour (in 10m) https://ti.to/smashingmagazine/smashing-hour-miriam npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Writing an explainer to propose a new `wellactually` attribute in HTML. But it's possible browsers will prefer a different name for it. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) #CSS container queries are super cool, and worth your time. But I'm not at all worried about how fast or slow they become standard practice. We're still 15 months from baseline "wide support". Grid, on the other hand… You have no excuse. Grid is the best thing in CSS, and has been for years. https://www.oddbird.net/2024/06/13/css-layout/ npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I'm sitting with @npub1n4t…ery5 at Igalia, trying to find when the media attribute first appeared in #HTML. I'm fairly sure it pre-dates #CSS media queries, but by how much? Was it there from the start? It seems like you (Mastodon) would be the best person to ask. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Interesting case that just came up at the CSS Working Group. Browsers don't currently agree, and the spec isn't very clear: What's the specificity of an `&` without a parent selector to refer to? We know what it selects (the :scope or :root) – but we never clearly defined the specificity. (we resolved on [0,0,0] no specificity) npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I'm not saying we *need* anchor-relative sizing units (`aw`, `ah`, etc), but it would provide us with a clear path to having `ai` in #CSS. And that's guaranteed funding for the web platform. Why would we need additional use-cases? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub1hyh…eqpr not only advocating for utility-first CSS, but for constructive debate: "it doesn't have to be petty or religious" #CSSDay https://cdn.masto.host/frontendsocial/media_attachments/files/112/569/094/142/774/878/original/f5dff804ed367db2.jpeg npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Ok, most of these images still need alt text and captions. I can't do all 500+ at once. But at least I have a system (and a way for people to help out)! Thanks #eleventy Men In Brackets is online: https://men.mia.wtf npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) We need unions. And we also need employee-owned collectives that reject eternal growth, increased production, and shareholder profit as the goals of our labor. The infinite growth model is destroying our world. We can build alternatives. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Exciting! See you there! https://fosstodon.org/@eleventy/112362467654735800 npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I want something like a windows manager for mac, but I want it to arrange my spaces & fullscreen apps. It doesn't seem like any of them do that? I almost exclusively work in fullscreen - but with the spaces arranged differently depending on what monitors are attached. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub16mu…qy4m Oh yeah, even with everything implemented, it's still only a block-level thing. No distribution of individual line-boxes or inline-level content. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub16mu…qy4m I don't know if there have been good explainer articles about this, but it is defined in the spec. See… - content distribution on block containers: https://www.w3.org/TR/css-align-3/#distribution-block - self alignment section also lists block and abspos behavior: https://www.w3.org/TR/css-align-3/#self-alignment It would be great to have more people teaching how it all works! (Sad that it's still rolling out a bit at a time. That makes it harder to teach the whole system.) npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Blink & Webkit both have beta support for #CSS `align-content` on block layouts (no grid/flex required): https://codepen.io/miriamsuzanne/pen/VwNYxLV?editors=1100 Blink also has self-alignment/justification of absolutely positioned elements: https://codepen.io/miriamsuzanne/pen/gOybzmO?editors=1100 (see Chrome/etc 123 & Safari TP 17.4) npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub1eqg…fncn thumbnail view includes notes or no? i imagine compose view does? presenter view is one slide/note at a time, or is there some context? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) What views do you need for a slide deck? there's the view that gets projected, maybe another view on a confidence monitor? another view for seeing the big picture while you work? are there others? one for reading the presentation later? for taking notes during? which do you use, or wish for? what do you call them? what do you call the main one? what do you need to see in each? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) I have a big archive of files on an external hard drive, which I only ever reference every several years. At this point it's a relatively old drive, but it's always worked, and has important stuff. My newish (2021?) mac says it can't access the drive. my only options are 'eject' or 'ignore'. any advice on how to get those files back? and follow-up: is there a better way to handle a long-term archive? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub19lt…qfjk first thought was attr(), but I don't know if it would really warrant a list of features that long? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub1c35…9pmh My first draft: https://codepen.io/miriamsuzanne/pen/MWLoKJr?editors=1010 npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub1c35…9pmh Ohio, I've been wanting a generic custom element similar to this. Maybe it's time to build it! Thanks for such a great overview. I've gone down this path before, and still found your take helpful. Excited to take another try at it. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) @npub1xed…yg9w @npub1a32…msdj Eckles has an L, just saying. So do Manuel, Michelle, and Rachel. I think that's pretty much it, tho. I can't think of any other L names. Should narrow your search significantly. Cheers. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Oh sure, of course NFTs aren't worth anything - but the AI is still real, right? right? npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Finished another TPAC. Closed out all the CSS issues. Marked the language as Complete. Moving on with what's left of our shattered lives. npub1vjylf4tx5v0rl6kyww4x80t6ef2hp9uh3xahyajfu3juut03mt0se80ze5 Mia (web luddite) Over at @npub1c0m…dylq, we launched a color contrast checker for working with new color formats like oklch, display-p3, and so on: https://www.oddcontrast.com/ What other features would you want from a tool like this? We're interested in feedback and ideas.