Very Extremely Practical CSS Art @ CSS Tricks
“What is one thing you learned about building websites this year?”
It’s time to re-think what we’re measuring @ SuperYesMore
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.
“What is one thing you learned about building websites this year?”
I join Ari, Ben, and Tessa to talk about getting into CSS from other languages, the absurdly massive problem CSS is designed to solve, and the mental model behind the language.
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.
Learn how design engineering brings together form and function.
CSS Custom Properties allow us to manage and control both cascade and inheritance in new ways.
Jina and I answer questions about CSS, Sass, Design Systems, and more!
A spinoff of the Party Corgi Network discord. I chat with Chris Biscardi about The CSS Working Group, open-source projects, art, and music.
I wrote this at the start of the Iraq war (2003), and later made the short film. It’s been on my mind again during COVID-19 isolation.
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.
“What about building websites has you interested this year?”
Firefox 69 was the first to implement selector feature queries, but other browsers are following suit. I’ll show you how it works, and how to start using this new feature query right away.
Horizontal text overflow has always been difficult to manage on the web. The default visible overflow is designed to make sure content remains accessible no matter the size of a containing box, but it’s not our only option.
Why waste your time on half-measures? Make your site THE MOST NORMALEST with this ULTIMATE CSS RESET.
When we’re scrolling down a page, or through a gallery of images, snap-targets can help guide us from one section or image to the next. In the past, developers have used JavaScript to hijack scrolling, but now we can manage scroll alignment directly in CSS with only a few lines of code.
I drop by the show to talk about Sass in 2019, design tokens, Oddbird, unused CSS, new CSS properties, and Dave & Chris’ explanation of revert.
The display
property has been in CSS from the beginning,
handling everything from block
and inline
boxes
to list-items
and full layout systems like flexbox
or grid
.
Now the display
syntax is getting an upgrade
to match it’s multiple uses.
There are a number of property & value combinations that can lead to CSS being inactive, and now Firefox will tell you why. Open the developer tools, and look for the greyed-out property with an info-box on hover.
It’s a common pattern to align form labels and inputs in grid-like layout. I’ll show you how to do it quickly using CSS subgrid, with several quick fallbacks.
Card layouts are popular on the web, rows and columns of boxes with similar content. CSS grids can help align those cards, but it’s still be hard to line-up content inside the cards – headers and footers that might need more or less room.
For years, we’ve struggled to build resilient layouts on the web, but CSS Grid promises to change all that – and you can start using it now, with only a few properties and basic concepts.
I’ve often used initial
and unset
in my CSS –
global keywords that can be applied to any property.
The difference is small, but important:
unset
allows inheritance,
while initial
does not.
But then Firefox implemented revert
and I was confused –
how is this one different from the others?!
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.
Love it or hate it, CSS is weird: not quite markup, not quite programming in the imperative sense, and nothing like the design programs we use for print. How did we get here?
When you create lists in HTML, browsers add bullet-points or numbers we call list markers. Now CSS gives us the tools to style those list markers, and even create our own!
In the CSS naming-convention arms race to lowest specificity,
I’ve decided to only use universal *
selectors.
I call it F*CSS.
We start by talking about design systems and design tooling – how they differ, and the problems they solve.
Pushing past the “variable” metaphor, CSS Custom Properties can provide new ways to balance context and isolation in our patterns and components.
The Narrators is a live storytelling show and podcast featuring true stories on a monthly theme.
Steve Jenkins interviews me about the state of CSS, and what’s coming next for the language – from Intrinsic Design to Dynamic CSS.
Thunder Nerds interview me before her talk at VueConf US 2019.
The panel and the guest talk about grid systems, fonts, and more!
On Episode 18, the TalkScript team continues the live-ish at JSConfUS podcast series with guests Myles Borins, Tim Doherty, and Miriam Suzanne. Listen in!
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?
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.
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 don’t have many guy friends, but my guitarist is one. Parting, I lean in for the cheek-kiss but he plants a good one right on my lips.”
I used exerpts from Body & Gender Fragments to talk about the contradictions of transition – a sort of “crossing over” without going anywhere.
Inspired by Robin Rendle, I demonstrate some of my early experiments combining CSS Grids and custom properties to create dynamic layouts and data-visualizations.
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.
“I’ve seen myself in the mirror. I find me… disorienting. What do they see that I don’t? Why aren’t they laughing at me?”
“Mother finds me at her wardrobe, in her pumps and pearls. What are you doing? Being a mommy. Are you, then? She clips on the earrings (they pinch!), reaches for her lipstick.”
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.
I wasn’t born in the wrong body. I was born, a body. Without my body, I don’t exist.
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.
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…
My friend Maureen Maloney asked to document my reaction to the 2016 election, as part of the America Heard film series.
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.
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.
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…
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.
Miriam Suzanne creates experimental experiences with her band and her fellow developers.
Chris Coyier interviews Miriam when she joins the CSS Tricks team as a Staff Writer. We talk about gettting started in the industry, name confusion, fouding OddBird, building Susy, and more.
In this episode of the Versioning Show, Tim and David are joined by Miriam Suzanne, best known for Susy, a responsive layout toolkit for Sass. They discuss going from being a lurker to finding your voice, the importance of writing about what you’re learning, stumbling into fame, approaching new projects, and unit testing in Sass.
There are some questions that come up again and again if you are trans. A few of those questions are terrible, but most of them are well-intentioned. I’m lucky to have a supportive community around me, so I thought I’d write down my most common answers to help ease your stress about getting it right, and ease my stress about answering the same questions over and over.
This interview serves as a follow up to my performance of The Obsolete Book in a Post-Obsolete World as Represented by a Post-Obsolete Book About Dance at the Media Archeology Lab.
An interview with the insightful Ryo Yamaguchi at Michigan Quarterly Review.
interview with Richard Wall of the Boulder Writers’ Workshop
I wrote this at the start of the Iraq war (2003), and later made the short film. It’s been on my mind again during COVID-19 isolation.