…In the run-up to Grid support being released to the public, I was focused on learning and teaching Grid, creating test cases, and using it to build figures for publication. And then, March 7th, 2017, it shipped to the public in Firefox 52. I tweeted and posted an article and demo I’d put together the night before, and sat back in wonderment that the day had finally come to pass. After 20+ years of CSS, finally, a real layout system, a set of properties and values designed from the outset for that purpose.
And then I decided, more or less in that moment, to convert my personal site to use Grid for its main-level layout.
As I’ve said before, I understand being hesitant. Based on our field’s history, it’s natural to assume that Grid as it stands now is buggy, incomplete, and will have a long ramp-up period before it’s usable. I am here to tell you, as someone who was there for almost all of that history, Grid is different. There are areas of incompleteness, but they’re features that haven’t been developed yet, not bugs or omissions. I’m literally using Grid in production, right now, on this site, and the layout is fine in both Grid browsers and non-Grid browsers (as the article describes). I’m very likely to add it to our production styles over at An Event Apart in the near future. I’d probably have done so already, except every second of AEA-related work time I have is consumed by preparations for AEA Seattle (read: tearing my new talk apart and putting it back together with a better structure).
Again, I get being wary. I do. We’re used to new CSS stuff taking two years to get up to usefulness. Not this time. It’s ready right now.
“Dad, where is the core of the house?” the youngest asked me this morning, as I made his lunch for school.
I might’ve answered differently if he’d asked me what, but this was specifically where. Still, I wanted to be sure what he meant, so I asked what he meant by “the core.” It turned out that, as I thought, he wanted to know the location of the center of the house, like the core of an apple.
I didn’t ask why he wanted to know. I try not to, in cases like this, although sometimes I say something like, “Why do you ask? It’s okay that you want to know, I’m just curious about what led to that question.” But I try to reserve that for questions that seem like they could lead to dangerous activity — e.g., “What would happen if I jumped off a roof?” (Which, to be clear, I don’t think he’s ever asked, but if he did, I’d answer his question seriously and then ask why he wanted to know.)
This time, I just said, “It’s a good question! Let’s figure it out.”
First I had him determine which was wider, the living room or the dining room. He counted off steps and determined the living room was wider. Then he counted the steps across the front hall (such as it is), and then added up the steps from the three spaces. They had been big steps, so it was 18 steps across the house.
More steps were taken to measure the house front to back, at which point we figured out that the center was somewhere in the main stairwell. (Also the only stairwell.) But then I threw the curveball: we’d measured the house side to side and front to back. What else had to be measured?
He thought hard a moment, and then he got it. The slow-blooming grin on his face was priceless. Then he laughed. “How am I supposed to count steps from the basement to the attic?!? I can’t walk in the air, of course!!”
So we counted the floors and their heights in our heads, and considered that the roof’s peak was a bit higher than the attic ceiling, but that the attic and basement had lower ceilings than the first and second floors. In the end, we decided the core of the house was probably the step just below the first landing of the stairwell, about two-thirds of the way across it. He sat in that spot, looking pleased and maybe a little smug. Then he slid down the stairs, telling me his head felt weird when he thought about how he was sitting in the exact center of the house.
A few minutes later, he’d hauled out the deluxe snap circuit set his uncle had gotten him for Christmas, and was building a circuit of his own making. Once it was completed, we talked about current flows and why the fan went slower and the light came on when he opened the switch, and the light went off and the fan sped up when it was closed.
And then it was off to kindergarten. As we walked up the street, he asked why a leaf had moved closer to the door when he slammed it shut instead of being blown further away, so we talked about fluid displacement. The conversation lasted until he spotted a friend getting out of a car, at which point he ran off to compare outfits. (Today was Pajama Day at the school.)
I love talking with him about the world and how it works, because it lets me see the world through new eyes. I felt the same way when I had the same kinds of conversations with his sisters. It’s a cliché that a small child constantly asking “Why?” is annoying and exasperating, but not to me. I never, ever want them to stop asking why. I will always answer their questions, or tell them I don’t know and we’ll find out together. The internet makes that last part much, much easier than in the past, admittedly.
I have another reason to always give an answer, though.
If I always answer my childrens’ questions, I teach them that questions are okay, that questioning is a good thing. And more importantly to me, I teach them that they can come to me with anything, and be taken seriously. Kat feels and acts the same, thankfully.
This has been a real advantage with our eldest, as she moves through middle school and into her teenage years. She knows she can be honest with us. More than once, she’s come to us with serious situations in her peer group, and known that we will listen, take her concerns seriously, and will act as needed. She’s… well, I don’t know if she’s exactly comfortable discussing the biological ramifications of growing up, but she’s able to do so without hesitation or shame. Because she knows I’ll take her seriously, and listen to her, and not tell her she’s wrong or inappropriate. A lifetime of answering her questions about ice and airplanes and the Moon and the color of the sky taught her that.
Always listen. Always give an answer, even if it’s “I don’t know.” Always take them seriously.
Because one day, that open door may give them a place to go for help and shelter, right when they most need it.
The story of a mixer-breaking cookbook, the vault of all practical human knowledge, and what I see when I look at my hands
It all started with an afternoon date. It ended in grease.
Kat and I took a weekend afternoon by ourselves to head down to University Circle, to have some early tea and macarons at Coquette and to see what we might find for a late lunch afterward. We wandered up and down the new Uptown section, chuckling to ourselves over the massive changes since we’d each come to the city. See that bowling alley? Remember when it was a broken parking lot? And when this bookstore was a strip of gravel and weeds?
In the window of the bookstore, I was looking askance at a coloring-book-for-grownups based on “The Walking Dead” when Kat exclaimed, “Oh, that looks fabulous!” It was, I was not surprised to discover, a bakers’ cookbook. Kat loves to bake, mostly for others. In this case, it was Uri Scheft’s Breaking Breads: A New World of Israeli Baking.
The bookstore was closed, so I took a picture of the cover and we moved on, eventually ending up at a ramen shop. I had an unagi don.
I gave Kat the book for her birthday. It’s one of the few things I got right about that celebration this year.
Not long after, Kat had to work at the clinic on a Friday, and asked if I’d make challah from the book so it was ready for dinner that night. I figured, what the heck. What could go wrong? So I hauled out the stand mixer and digital scale, assembled the various ingredients in a line, and started to work.
The challah recipe is sized to make three loaves, because (according to Mr. Scheft) the dough mixes better in large quantities than in small. I was pleased to see the recipe gave all ingredients first as weights, so I didn’t have to convert. I’ve never been great at cups and spoons, especially with baking ingredients, and most especially with flour. I either leave too much air or pack down too hard. A kilogram of flour seemed like a lot, but once I realized it was only a bit more flour than in the overnight bread recipe I’d made several times before, I forged ahead.
Everything fit fairly well into the mixing bowl, which had been my first concern. There was enough room to not have the flour overtop the rim and form a glutenclastic flow over the countertop, at least as long as I started slow. So I did.
Our mixer is a KitchenAid 325W model, bought many years ago and since put to hard service. Kat as I mentioned before, enjoys baking, being good enough at it that she can often free-style in baking and produce wonderful results. I do some baking of my own from time to time, though cooking is more my area of strength. Carolyn has enjoyed learning to bake, and it’s common for her and a friend to decide to make a cake or some cookies when hanging out together, or bake cinnamon rolls for breakfast on a Saturday morning. One of the last things Rebecca did entirely by herself was hold the dough paddle and slowly, methodically eat raw chocolate-chip cookie dough off of it. Joshua isn’t as interested in baking yet, but he’s certainly a fan of paddle-cleaning.
As the challah dough started coming together, it kept climbing the dough hook and slowing the mixer, making the motor whine a bit. I kept shoving it back down, turning the mixer off occasionally to really get it down there. I was faintly smiling over the possibility that the dough would end overtopping the bowl instead of the raw flour when the hook stopped dead and a buzzing noise burst forth from the motor housing.
Uh-oh.
After I’d removed all the dough from the hook and set the bowl aside — the dough was basically done at that point, thankfully — I tried flipping the gear-speed lever back and forth. Nothing but buzzing. It sounded exactly like what you’d expect an unseated gear to sound like, as the teeth buzzed past the gear it was supposed to turn.
There was still bread to make, so I set the mixer aside and got on with the kneading and stretching. Once the dough started its first rise, I went back to the mixer. I figured, what the heck, so I banged on the housing a few times to see if the gear would reseat. And, lo and behold, it started spinning again! There were still some odd sounds, but it seemed to be mostly okay. I decided to clean it off, put it away, and see if the “fix” held.
It was a week later that we found the fix had not, in fact, held. Kat was making babka — from, once again, a recipe in Breaking Breads — for this year’s St. Baldrick’s event in Cleveland Heights when the paddle seized and the buzzing noise once more erupted.
We finished the recipe with a hand mixer (my hand ached for an hour) and I retired to the dining room to search Amazon for a replacement mixer. We could get the same model for about $300, or a more powerful model for more — although that would mean tossing a bunch of accessories, since the more powerful models use a completely different bowl type. There wasn’t, so far as I could find, a stronger motor in the same form factor.
On a whim, I opened a new tab and typed “kitchenaid stand mixer stripped gear” into the search bar, and clicked the “Videos” tab. There were, of course, multiple videos at YouTube, that vast repository of all practical human knowledge. If you want to know the history of stand mixers, you go to Wikipedia. If you want to know how to use or fix them, you go to YouTube.
I started watching the first result, realized it was for a different mixer model, and skipped to the “Up Next” video, which was just what I was looking for: same model and everything. I was a couple of minutes into it when Kat walked into the room saying, “Hey, why don’t you see if maybe you can fix — oh.”
I have not, generally speaking, been what you would call a handy person. Most of my repair attempts made things worse, not better. On occasion, I managed to turn a minor inconvenience into a major expense. I was never particularly ashamed of this, although I was annoyed by the cost. I wasn’t a stranger to manual labor, but I was always better with a keyboard than I was with a hammer — first 88 keys, and then 104.
But for some reason, one of the first things I did to try to manage my grief, late in 2014, was ask my friend Ferrett to help me do some rough carpentry. He had the tools, having taken woodworking classes in the past, and I wanted to put a bookcase in the wall of our finished attic. From that first painful attempt — it took us all day to put together a not-particularly-well-made case — we started getting together once a week or so to just build stuff. Our friend Jim got into the act as well.
A bookcase here, a shelf there, we’ve gotten better at it. We’ve managed to use every tool in the arsenal, though not always wisely. We’ve made abstruse jokes based on the biscuit cutter being made by Freud. We’ve invented hacks on the spot to make cuts easier and figured out later why things didn’t go quite as intended. We’ve learned that you can never be too rich or have too many clamps. (We depart from standard societal attitudes toward thinness.)
As we’ve progressed, those attitudes and skills have osmosed into regular life. Minor home repair is now a thing I do, and approach with confidence instead of trepidation. No real surprise there: practice at anything, and you’re likely to become better at it. But when the screen door latch broke, I bought a replacement and improvised a way to make it work when the frame bracket and latch didn’t line up. I took a Dremel to my aging laptop stand in order to keep it from scratching desks. I’ve fixed more than one damaged or jammed toy.
So, sure, why not see if the mixer could be fixed with a cheap part replacement? After all, a handyman told me years ago, if it’s already broken, trying to fix it can’t make it any worse. Though I remember thinking to myself that he’d never seen me try to fix things.
I assembled my tools, covered the dining room table in several layers of drop cloth, and started the video. I had real trouble getting out the roll pin that held the planetary in place, but WD-40 and persistence won the day. I had to stop for a while while I searched for surgical gloves, but eventually they turned up and I got into the great globs of grease that keep the gears going. And yes, just as the video had prophesied, the problem was the one plastic gear in the mechanism, nestled in amongst the chain of solid metal gears.
Well, see, there’s my problem.
I’m not annoyed by this. That gear, I believe, is intentionally plastic as a last-ditch defense against burning out the motor or shattering a metal gear or the paddle itself, should somethiing seize up the planetary. Think of a metal bar that somehow gets thrust into the paddle, forcing it to stop. Something has to give. A small worm gear acting as a fail-safe is a better option than most others.
I went back to Amazon, this time to order a replacement part. When I found out they were $6.24 each, I ordered three. Until the new worm gears arrive, the various screws and pins I removed are taped in groups to a piece of printer paper, each group labeled according to their points of origin in the mixer assembly. The gear tower pieces I put in a plastic sandwich bag, also taped to the paper, to keep their grease contained.
The broken worm gear I may throw away, or I may keep as a memento.
I am, in my way, pleased with myself about all this. Proud both that I may be able to fix a problem for $7 and an hour or two of time, instead of having to replace an entire appliance for a few hundred dollars; and also for having developed the skills and familiarity to let me try it in the first place. True, I likely couldn’t have done it without YouTube, but in years past, even with YouTube I’d have been hesitant to try, for fear of making it worse, or just being hapless and frustrated by the feeling that if I only knew more, I’d be able to do it right.
Now I know more. I’ve learned — not at internet speed, but at slow, methodical, human speed. I’ve changed, but in ways of my own making instead of ways that circumstance thrust upon me.
When I look at my hands now, I see tools that not only create, but can also repair. They can put to right at least some things that have gone wrong.
There is much more solace in that than I would ever have guessed.
I don’t know, as I write this, whether the mixer will work again. I may reassemble it incorrectly, or even correctly but without success. Sometimes that happens. Sometimes you do everything right, and still have no path to success. But if we do have to junk it after all, I’ll know it wasn’t for lack of first trying to correct the situation.
I will draw pride from that, just as I did from the challah I made for my family and friends, an entire loaf of which was quickly devoured. Just as I have drawn pride from things I’ve written, shaping words that have helped others in ways large and small, and sometimes in ways completely unexpected.
The difference is that when I fix things, I fix for myself, not for others. One small repair at a time, I fix myself.
It has been one thousand days since our daughter took her last breath.
I don’t know if it’s a cruel irony or a fortunate happenstance that this coincides with an upward adjustment in my antidepression medication. It was necessary, because I was losing the will to do anything but the bare necessary minimum to function. Now I can actually initiate conversation, and see life as something other than a state to be passively endured. But the surge in serotonin reuptake inhibitors has also distanced me from grief.
I can feel, distantly, the despair that accompanies this milestone and its root cause. I can feel, distantly, the instinct that I should bring that despair closer, to mourn a little more and honor Rebecca’s memory. It stays on the horizon of my awareness, something to be noticed when my gaze happens to turn that direction. Not more.
I can feel, distantly, the conviction that this is abnormal and should be unacceptable. Maybe that’s true. Maybe it isn’t.
I still miss her. I still, from time to time, wonder how I managed to get this far in the wake of so shattering a loss. I honestly didn’t think I’d have the strength. Maybe I was born with it. Maybe it’s paroxetine.
I don’t know how I’ll feel toward the end of the month, when I reach 210 days, and I guess in some ways it doesn’t matter. The day will come, the day will go, and it will be whatever it is.
I’ve been working a lot with the clip-path property recently, as I write the chapter on filters, blends, clipping, and masking for CSS: The Definitive Guide’s long-delayed 4th edition (available now in early-release format!). One of the nifty things you can do with clipping paths is define them with percentage-based coordinates. For example, here’s a hexagon-like clipping path:
It didn’t work because, as I discovered to my horror, SVG does not allow percentage coordinates. I could just strip all the percent signs out, but that would be the same as saying this in CSS:
I didn’t want pixels, though. I want percentages, darn it all!
So I asked around on Twitter, and Markus Stange pointed me to the solution: converting all the SVG coordinates to the range 0–1 and using the clipPathUnits attribute. The working version looks like this:
That yields the same result as the polygon() CSS shape with the percentages I showed before.
All that is great if you’re writing your own SVG shapes and can make sure you set it up properly, but what if someone hands you a shape to be used as a clip path and it’s in absolute coordinates like 100 75? If you’re really lucky, the shape has a viewbox of 0 0 100 100 (or all the coordinate points are in that range) and you can just divide all the coordinate points by 100 to get the proper values. But that’s really tedious for any but the simplest of shapes, and besides, what if it has some other viewbox? That’s where the transform attribute saves the day.
For example, suppose you get an SVG file that looks like this (with the actual path coordinates removed because there are a lot of them):
Next, look at the viewBox attribute on the <svg> element itself. The value there is 329.6667 86. That means 329.6667 coordinate units horizontally, and 86 units vertically. So all you need to do now is divide all the horizontal values by 329.6667, and the vertical values by 86. Which would be super tedious, except we have scaling transforms at our disposal:
Those two values are 1/329.6667 and 1/86, respectively, and they effectively scale every point in the d attribute to fit into the needed 0–1 range. (That’s not precisely what happens, but the outcome is the same.) Thus we have an SVG clipping path that scales with the element and fits to its dimensions!
This works just as well for other markup patterns. To return to the hexlike path from before, assume it was written like this:
If that were applied as-is, via clip-path: url(#hexlike), it would create a hex-like clipping path that fits a 100px by 100px box, positioned in the top left of the element (in left-to-right languages, I presume). The quick fix:
Bingo bango bongo, it will now scale to the element’s dimensions, whatever those turn out to be.
Of course, if you apply that to something like a short paragraph, it will be verrrrry stretched out, but the same would be true with a percentage-based polygon() shape. The beauty here is that you can scale any coordinate set, so if you have a tiny path that you want to blow up, or a huge path you want to shrink down, you can transform it without using clipPathUnits to stretch it over the bounding box. Something like this:
That gets you a hexlike shape that fits a 400px by 400px box, for example.
Now all CSS needs is the ability to size and position clipping paths in a manner similar background images, and we’ll be in clover. I hope such properties are in the WG’s mind, because I’d love to be able to just point an at SVG clipping path, and then say something like clip-path-position: center; clip-path-size: contain;. That would remove the need for fiddling with SVG attributes altogether.
Thanks to Markus Stange for the technique and his invaluable assistance in proofreading this article.
We’re about halfway through February, he said with some deliberate vagueness, and that means the launch-month special on my Udemy course “Design for Humanity” is also half-done. If you haven’t taken advantage yet, use the code MW_BLOG to get a nice little discount off the list price.
You may be wondering if this course is really for you. There are some videos available as free previews on Udemy. I’m including one here, which is a single “lecture” (as they’re called by the Udemy) from early in the course. It explores a single concept and also establishes some of the landscape for the course, which is one of the reasons I chose it.
Again, the discount code above ends at the end of February, so if you’re interested bu haven’t signed up yet, don’t delay too much longer. And if you have already taken the course, could you do me a favor and leave an honest review at Udemy? It will help other people. whether they find the course from me or through Udemy, decide whether the course is right for them or not. Thank you!
As longtime readers know, my professional focus has been very different the past couple of years. Ever since the events of 2013-2014, I started focusing on design and meeting the needs of people — not just users, but complete people with complex lives. I teamed up with Sara Wachter-Boettcher to write Design for Real Life, and presented talks at An Event Apart called “Designing for Crisis” (2015) and “Compassionate Design” (2016; video to come). I’m not done with CSS — I should have news on that front fairly soon, in fact — but a lot of my focus has been on the practice of design, and how we approach it.
To that end, I’ve been spending large chunks of the last few months creating and recording a course for Udemy called “Design for Humanity”, and it’s now available. The course is based very heavily on Design for Real Life, following a similar structure and using many of the examples from the book, plus new examples that have emerged since the book was published, but it takes a different approach to learning. Think of it as a companion piece. If you’re an auditory processor as opposed to a visual processor, for example, I think the course will really work for you.
Who is the course for? I put it like this:
This course will help you if you are part of the design process for a product or service, whether that’s a website, an app, an overall experience, or a physical product. You might be a product designer or product manager, an entrepreneur or work in customer service or user research, an experience designer or an information architect. If you have been impacted by bad design and want to do better, this course is for you.
I know a lot of courses promise they’re just right for whoever you are, no really, but in this case I honestly feel like that’s true for anyone who has an interest in design, whether that’s visual design, system design, or content design. It’s about changing perspective and patterns of thinking — something many readers of the book, and people who’ve heard my talks, say they’ve experienced.
If you’ve already bought the book, then thank you! Be on the lookout for email from A Book Apart containing a special code that will give you a nice discount on the course. If you haven’t picked up the book yet, that’s no problem. I have a code for readers of meyerweb as well: use MW_BLOG to get 20% off the sale price of the course, bringing it down to a mere $12, or slightly less than $3 per hour! (The code is good through February 28th, so you have a month to take advantage of it.)
If you like the course, please do consider picking up the book. It’s a handy format to have close to hand, and to lend to others. On the flip side, if you liked the book, please consider checking out the course, containing as it does new material and some evolution of thinking.
And either way, whether it’s the book or the course, if you liked what you learned, please take a moment to write a short review, say something on the interwebs, and generally spread the word to colleagues and co-workers. The more people who hear the message, the better we’ll become as an industry at not just designing, but designing with care and humanity.
For a number of reasons, I’ve been thinking a lot recently about the two and a half months between Rebecca’s second tumor being discovered and her death.
I remember the looming senses of dread and paralyzing horror, which we shoved down as much as possible in order to get through each day. Partly it was for the kids, all of them, to give them as much stability as we could in a profoundly destabilizing time. Partly it was for everyone around us, who looked to us as much as they looked out for us. And partly it was for ourselves. Faced with the unceasing sense that nothing made sense, that the world was nothing like what we’d hoped or believed, we had to find ways to get out of bed each day and move forward.
Time was precious, and time was the enemy. As the quite literal deadline approached, we would find ourselves looking for ways to just stop time, to freeze the moments a bit longer, somehow. To hold short of the final day, to stretch out the time we’d have with her. But we kept being carried toward the future at one second per second, as if slowly, slowly dragged by a monstrous grip and only being able to look around to focus on what glints of beauty we could before finally being consumed.
And then the day came, and we lived through it while our daughter did not.
If you’re a parent, then you know the feeling of being bound to your child’s being. When they’re sick, you feel their fever in your own body, even if no thermometer could register it. When they cough, your throat seizes with theirs. When they pause between breaths, you pause too, holding yourself in perfect stillness, not drawing in your next breath until they do.
But when their breathing stops forever, you keep breathing, and can never quite figure out how. Or why.
The same inexorable passage of time that dragged you to the moment your child died keeps dragging you on past it, away from the last time you held them, the last time they smiled at you, the last time they said your name or that they loved you or that they wanted another popsicle or another kiss or another bedtime story. The last time their eyes were open for you to peer into, and see their spark.
The numb shock of all those absences perverts the world in profound ways. You can barely comprehend that your life continues, let alone what’s happening around you. It’s almost impossible to understand why the world continues at all. There seems no point to it. You can find your way past that in moments, focused on loved ones like surviving children, but then those moment pass and you stand up and look at the world as if it’s a soap-bubble illusion that will pop and vanish at any moment.
And sometimes, you numbly reach out, one finger extended, waiting for the moment you finally touch the bubble.
Other times, your shock gives way to flashes of rage, angry with the world for continuing as if nothing had happened, as if the clocks should not have been stopped and the mocking facade not torn apart and burned to ash. Angry with yourself for not finding a better timeline. Angry with existence itself.
I remember the moment I realized that pediatric hospitals and the people within them remain unburnt and unshot by grieving parents, and regained an iota of faith in humanity. It didn’t matter that Rebecca had died of biology run amok, and the people in her oncology wards had done everything they thought was right in an attempt to keep her alive. The rage of grief obliterates all hope of rationality, and seeks only to inflict the same pain it feels on whatever targets it seizes on. When Michael Brown’s father shouted to burn everything down, a month or so later, I nodded in bleak recognition.
I can say that the rage can fade over time. I’m sure some people take it in, nurture it, stoke it, burning it for warmth in the cold hollow where their child’s love used to be. Using it for fuel, just to keep going. But it’s also possible to let it go, one way or another, through whatever slow mechanisms of healing can be found.
Although I do wonder how I will react if I ever run into the doctors at the grocery store, or at the airport. Perhaps there will be a sad reconnection. Or perhaps I will simply turn and walk away, stiff and silent. I honestly don’t know. I hope, most of the time, that it’s the first one.
But the numbness, the pervasive sense of disconnect and artifice — those may have receded somewhat, but they have never left. I read recently that research shows that the worst period of hopelessness and despair in grieving parents often comes two to three years after their child’s death, which for us is right now, right as our remaining children pass significant life milestones: Carolyn passing out of childhood, and Joshua becoming older than Rebecca.
A world where a youngest child can become older than their sibling can never, ever make sense. Time seems illusory, and there is a corner of my mind that is always looking for a way to go back, to unwind the clock and undo the changes, to go back to when things were right and find a way to stop them ever becoming wrong.
But I can’t. There is no way back, just as there is no way to skip forward. I can only be dragged forward at one second per second, and look around whenever I can rouse myself to find what glints of beauty there may be. There can be many, if I look in the right places, and I try to do so. It does nothing to slow the dragging, but it can sometimes ease the grip.
