Jen Simmons : Writing

Thinking About An Event Apart and 2017

Hello, from a coffee shop on the road. I’m in Seattle for a CSS Working Group meeting, where we are nerding out on the details of coming-soon CSS properties. Being in Seattle makes me think of An Event Apart, since it was AEA who first brought me to this beautiful town in 2013. In April, I’ll be back here for AEA Seattle 2017.

I love An Event Apart. If I could get in a time machine, I would go back to 2005 and tell myself to attend the first one, in Philadelphia. I lived there at the time and easily could have gone, but I didn’t know about it. It must have been a few months later when I first heard of AEA. I desperately wanted to go. I just didn’t. Year after year, I decided not to attend. First living on a grad school fellowship income, and then struggling as a web designer who was charging clients only what they could afford (and not what I could afford), I watched AEA from afar. I knew I could probably scrape together the money, but I wasn’t sure it’d be worth it. It seemed like a lot to spend on just a few days.

I now wonder how my life might have been different – better – if I had gotten to know the community that surrounds AEA sooner. I was well into my 40s before I figured out how important personal relationships, face-to-face networking, and community are to shaping your trajectory. It’s only looking back that I can see that yes, the investment of paying to go to AEA would have been worth it. I feel like if I had, opportunities to work on some amazing projects would have come my way.

Meanwhile, I did attend and speak at many conferences. I was part of the Videoblogging community. I went to one DrupalCon after another, lots of WordCamps and DrupalCamps, too. I made websites because I believed they’d be powerful tools for clients I cared about. I believed in accessibility, HTML semantics, web standards, great design, putting users first, diversity, and having empathy for everyday people. I used open source software because it was cheap, and it put powerful content publishing tools in hands of organizations with tiny budgets. I expected everyone was involved with the web for similar reasons — to empower others.

It was painful when the Drupal community started rejecting me, first in NYC and later internationally. I was too opinionated of a woman, too much of a designer, and I just didn’t fit into their flavor of nerd. I considered leaving the tech industry completely. Why should I work so hard to try to fit in with people who don’t really want me around? Why pour so much energy into convincing arrogant developers they shouldn’t use tables for layouts — in 2010!? Or that design is important. Or that other humans don’t experience the world the same way as they do, and we should be making decisions based on what our audience needs, not what they personally prefer. Such battles are exhausting. And when you are one of a tiny minority saying such things, you quickly become “the problem”.

Then I crashed AEA Boston. Well sort of. I didn’t go into any of the conference sessions because I hadn’t bought a ticket. (I respected the organizers too much, and the attendees who had stretched their last dollar to be there.) I took the cheap bus up to Boston, and stayed in the conference hotel, on a cot in the room of friends who were attending. And I did the “hallway track”. I came down for coffee breaks and chatted with folks (without eating anything — again, no stealing). I went to dinner with those same friends, and met more people. And it changed my life. It changed the course of my career. Not because it led to speaking at AEA — no, that came much later through other channels. Being around the attendees of AEA changed my career because I realized I didn’t have to struggle so much. I didn’t have to fight with people who didn’t want me around in order to have a career in this field. I just needed to slide over a bit, and find people who see the tech industry like I do. These were smart, friendly people, the kind of people with whom I could easily collaborate. An Event Apart reminded me of what I believed, and showed me a lot of other people did, too. It told me I’m not crazy.

Within the year I stopped going to Drupal events, stopped working for Drupal shops, and refocused my own public speaking on Design, HTML & CSS. I had a better sense of what kind of clients to find, and who to avoid. A year and a half later I was speaking at AEA. Three years later, my whole professional world looked different.

I’ve now presented at An Event Apart twenty times. It’s an honor to be there. I feel just at home now as I did the first time. The crew running the show works incredibly hard to make sure all the speakers have everything we need. They challenge and inspire everyone to do the very best job we can. I speak at a lot of events these days, all around the globe. There’s still something very special about An Event Apart, and the high level of the craft that goes into putting together each show. Something special about the level of passion Jeffrey and Eric have for the web and why we make websites.

In 2017, I’ll be at five more — Seattle in April, Boston in May, Washington DC in July, Chicago in August, San Francisco in Oct/Nov. (There’s also a show in Denver in December, but sadly I can’t make that one because of a scheduling conflict.)

In each city, I’ll present a one-hour talk titled Designing with Grid. In Boston, I’ll also be presenting the whole day on Wednesday, Designing Layouts: The New Superpowers of CSS. You can use the code AEASIM when registering, and save $100 off a two or three-day ticket.

I’d love to see you there. We can have lunch. You can share with me what you are passionate about. We can talk about design, and what’s next, and why we still like being part of this crazy industry. Because I am still here. And I have AEA to thank for that.

Type of post: thought

Replacing the Jet Engine While Still Flying

Safari runs on Webkit. Chrome runs on Blink. And Firefox runs on Gecko. Which is old. Like really old. I think it’s the oldest rendering engine still in wide use.

Of course, after two decades of experience, we now have Mor Better Ideas™ about how to make a browser rendering engine (and software in general). So for the past several years, Mozilla’s been working on a brand new, top-secret engine. Except it’s totally not top-secret. Never was. At another company it would have been a top-secret project. At Mozilla, it’s all done out in the open.

The project is called Servo. It was started as an experiment. It’s coded in a new programming language called Rust. (Gecko is written in C++.) And it’s open source. You can totally help us make it.

So what does this mean for Firefox? Well, first, I’m talking about the rendering engine here, not the whole browser. (The rendering engine is the part of the browser that parses and displays each webpage. Which is separate from stuff like tools for managing bookmarks, the URL/search bar, and the menus of Firefoxy things.) If we could snap a finger and magically replace Gecko all at once, normal people would have no idea it’d happened — well, except for the fact websites would load insanely fast. Insanely. Fast. Because Mor Better Ideas™.

The trick of the thing comes with figuring out how to switch from the old rendering engine to a new one. You can’t just do it all at once. It’s like figuring out how to replace a jet engine on a jet that’s still flying. I guess we could land the plane, let all the passengers disembark so they can wander over and take other planes, and not provide any service for a while while we change the engines out… but no — no, we can’t do that. Not gonna happen.

We could keep flying the current plane, while starting from scratch and building an entirely new plane on the ground — special ordering every nut, every bolt, designing a new cockpit, and waiting many years before we to get to fly that plane. But we don’t want to do that either. We already have a giant plane. And it’s a pretty good plane. We should keep using it. We just want a new engine on that plane. As soon as we can get it.

Enter Quantum, the codename for the project to figure out how to replace the engine on our still-flying plane. One piece of it is called Quantum Style (aka, Stylo) — that’s where we transition from having Gecko render all the CSS, to using Quantum for CSS. Quantum Style morphs Gecko and Servo together, asking each to do the job they do best. Because, actually, even though it’s been around for 20 years, Gecko does some pretty amazing things, and we want to keep leveraging The Good Parts. New isn’t always better.

At some point in mid-2017, all new CSS will be built with Quantum plane parts, not Gecko. Going forward, it will be much easier and more enjoyable to implement new CSS properties. Which makes it easier for folks in the open source community to contribute. Which makes new things come out faster.

This next year should be a good one for Firefox. If you haven’t tried it in a while, do. After refocusing in 2015 and laying groundwork in 2016, Mozilla has setup Firefox to impress over the course of 2017.

Type of post: thought

Slicing your page

If you follow my work, then you know I've been encouraging designers to break up our old stale layouts for years now.

Box. Box. Box.

We can stop using rectangular boxes for everything. We've got several things in our CSS toolkit to get away from the rectangles. CSS Shapes. Clip-path. Transform. Masks. But how do these work exactly? What's possible and what's kinda still not?

This morning I ran into an article by Kilian Valkhof debating the best way to slice a diagonal across the page, Sloped edges with consistent angle in CSS.

It's a pretty-great walk-through of the options in CSS for creating a big diagonal line across the page. He does point out that the best solution is unworkable because Firefox doesn't yet support basic shapes for clip-path — you have to use an SVG. (Which he then explains how to do).

Luckily, we've been working on full clip-path support at Mozilla. It currently works in Firefox Nightly, and will hopefully ship in Firefox 53, in mid-April 2017.


Kilian recommends using this code to isolate his Firefox-only code from other browsers.

Referencing this file in your CSS looks like this:
@-moz-document url-prefix() {
header {
clip-path: url(path/to/yoursvgfile.svg#header)

The @moz-document is a cheat to prevent the rule from being applied in other browsers.

The trouble with this is that once Firefox ships support for shapes in clip-path, this code will be a problem. Rather than targeting Firefox, it's better to target the feature, or lack of support for that feature, using a Feature Query.

Type of post: link

Apologies for My Lady Brain Taking Up Space

Too long for Twitter…

Current status: Using my substandard lady brain to write an article for you about the most complex CSS module of them all, the CSS Writing Modes Module Level 3. Too bad for you I’m the only one around here who can explain this. Wait — I mean, I’m sorry that my presence is taking up a spot that should be going to by a guy who’s smarter and better than me. I feel sad for him. He should write this article for you instead.

Only, I don’t know of any white men who understand this spec. I’m sure there are some, since all the white men who invented the web didn’t bias the entire thing toward English, and only support Latin-based languages. No, not at all. The web is only 25 years old. Of course it didn’t take until late 2015 to have full support in CSS for languages that flow in different directions. No. You had this from the beginning. You are fully qualified to be the authority here. Go for it. It really is the white men who deserve to get a spot on stage to talk about this first. Sorry that I did an hour long talk about it last November, and will again all next year. Sorry it wasn't a white dude first, even though the only other people that I know who understand this stuff are people of color — most of whom live in Asia and speak fluent Chinese or Japanese. So. Sorry to the white men who’s rightful spot we’ve taken away. We are thinking of you and offering you our sadness. We grieve for your loss of the right to be seen and heard.

And I apologize to those of you reading this that you are stuck with my lady brain writing this article for you. I know you would rather hear from another white man. Truly, you would. I know. I look at the Twitter follow counts across the industry, where a woman around a certain place in her career will have 10–25k followers, and a white man at about the same place in his career will have 50–150k. We know who you listen to more. So I'm sorry. So sorry I can’t be that trusted white man for you. I know you would rather have him.

Type of post: thought


I didn't write anything yesterday, election day here in the U.S., because I didn't want to write about politics. I wanted the day to go by, and to return to talking about graphic design and layout CSS on Wednesday, today, the day after.

Instead, I'm stunned. Overwhelmed. We just elected a hateful man. Who will bring us a terrible, terrible future. I couldn't walk through my neighborhood without crying this morning. How do I look friends in the face, knowing they could be snatched from their beds one night next year and dragged away to a country they don't know anymore. It seems crazy to care about CSS right now.

I quit Twitter today — at least for the week. I'm sure I'll return eventually and use it as a announce things again, but I'm not sure whether I'll ever return to Twitter as my main space to have conversations. It's time we stop relying on one central location that we don't control. And today, it seems especially fruitless and hollow to shout into a void full of trolls. So I'm here again. Writing.

I have a vague sense I want to post here everyday. So here's the second day. This site is very raggedy and needs a lot of work. I'm just doing it as I can, bit by bit. Today I added all the events I've already booked for 2017.

Meanwhile, I'm making another demo of CSS Grid and writing an article about it. Here's a peek:

a screenshot of the Spacejam homepage half done, laid out using CSS Grid

I won't publish it for a while. Today feels like September 12th, 2001. How can we do anything publicly but grieve and fear? And reconsider what's important in life. What kind of world we want to build. How we want to use these powerful technologies with more care, more morality.

Feel free to comment below. We can have a conversation here. You can link your your website, your blog posts. And I'll go read them. The formats of comments are awful right now. I'll fix that soon. One step at a time. One breath at a time. One meal at a time. One sleep at a time. If we can sleep.

We would really rather have a rapist for our leader than a woman? Of course there are thousands of ways to understand what just happened — but this is one of the loudest ones in my head today. We would rather put a man who's repeatedly raped young teenagers in charge than dare to have a woman President. That's how much our culture hates women.

Oh, and the planet is done. We have no chance of slowing climate change now. It's over. If we didn't have a loud clock ticking, we could go through a round of fascism and economic depression, camps and killing, and come out the other side. Eventually people want peace. Eventually people realize love and tolerance make for a better life for everyone. But never before have we had the very health of the planet at stake. This time will will miss our very last window to stop burning fossil fuels, to slow the melting of the ice, to save some natural habitat. Maybe it wasn't possible anyway, but we were all set to try. Now we aren't going to try. Now we are simply and completely fucked.

I passed a friend this morning in the street, and she said simply "Where are you going to go?" I replied, "There is no where to go."

I couldn't walk past toddlers this morning without apologizing with every cell in my body — I'm so so so sorry. Your life, you... you will be fucked. We just destroyed your planet. I'll hopefully be dead before it gets really bad. You won't.

I've never been so relieved that I didn't have children.

Type of post: thought

Hello again world

I don't have anything profound to say. And that is the point. I haven't been writing, haven't been publishing. And I should. I want to. It's funny how by not doing it I turn it into something precious. The pressure to write builds up into this thing where in order to write I have to come up with something REALLY GOOD. Something really good to beat the silence. To make the silence worth the wait. Or something.


I'm just tired. Busy. Until last Thursday I was traveling like mad, presenting at conferences. Now I'm home for a while. Well, for a month. Which seems like forever. I haven't been home for four weeks in a row since February. Now it's November.

So I have nothing much to say in this post. Or more honestly, I have so freaking much to say, I don't know where to start. So I'm going to start here. I just need to break the silence. And get into a habit of posting. So I'm posting this. And I'm going to publish it without thinking about it. Without proof-reading it really. Without thinking about how it will be received.

This is how so many people used to blog. Before Twitter. Before follower counts. Before we wanted or worried about massive audiences. We were few in number, talking to each other. Having simple conversations.

Now everything seems so complicated. So IMPORTANT. Or not, and therefore, not worthy.

I worry about Twitter. The company doesn't care about things I care about. It will do whatever it needs to for the money it wants. It might go away. It might get even worse. By outsourcing our whole means of connecting to each other to a company we seem to agree we hate... we are putting our relationships at risk. So I'm determined to at least start getting away from the monopoly of Twitter by posting to my website. A lot. I'll setup RSS (or double check that it's already been setup, or setup multiple options or whatever something better) and I'll try for the dozen-teenth time to get the CMS that runs this site to connect to Twitter and crosspost in some way. But... all of that is a delay. An excuse to not write until all is perfect. Forget that. I'm posting this. Resetting expectations. Building a habit.

Do we dare to write on our own sites again? Do we dare to not be polished or perfect? Do we dare to ramble for tiny audiences who might not care? I hope that I can dare to do just that. Starting here.

Type of post: thought

Assessing 2016 & Planning 2017

I sat down tonight to get a handle on just how much I’ve been doing this year. Invitations for next year’s conferences are starting to come in, and I wanted to get some metrics from this year to assess what’s reasonable for next year.

* March–October 2016
* 8 months
* 118 days on the road
* 130 days home
* 30 presentations
* 5 week-long, in-person work sessions

Ok. That is way too much. It’s hard not to be home. I love presenting, and want to be at ALL THE CONFERENCES, but I can’t travel that much next year. I’d like to be on the road 20-30% of the time, not 50%.

If you are interested in having me at your conference, especially to do an all-day workshop, please contact me soon. Otherwise it will likely be too late.

Type of post: thought

To Comma-Separate, or Not to Comma-Separate, That is The Question

An interesting debate popped up on the weekly CSS Working Group phone call yesterday, and I’m sitting here eating lunch, still thinking about it.

So I want to know what you think — you people who write CSS all the time, who care, who will be living with the results of this decision.

So here’s the deal.

The oldest values you can use to specify a color look like this: #eee or #fefefe or red. More recently we gained RGB and HSL. They look like this:

color: rgba(255, 255, 255, 0.5);
color: hsl(240, 100%, 50%);
background-color: rgba(108, 210, 136, 0.65);
border: 1px solid color: rgb(0, 0, 0);

Note the commas that separate the values.

There’s a new property coming in the world of color, it’s called color(). There is a proposal to make it look like this:

background-color: color(0.1 0.2 0.3 50%);

Note the lack of commas.

Meanwhile, there are other properties in CSS where a list of values specifies something, and they may or may not have commas.

Here are a few examples:

margin: 0 2em;
padding: 1em 2em 0.5em;
border: 1px solid #000;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(8, 15vw);
grid-template-columns: repeat(5, 1fr 1.2fr 1.2fr 0.5fr);
shape-outside: circle(at 50% 50%);
clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3% 93%);
color: rgba(255, 255, 255, 0.6);
color: hsl(240, 100%, 50%);

There are people in the CSS Working Group who want to get rid of the commas in the new color function, because to them, it feels more consistent with the rest of CSS. They know it’s inconsistent with the other color values, but think those other color values are dumb — and never should have been created with commas. They want to fix that now by making the new thing not have commas.

Then there are other people who think it will be very confusing to have some color values use commas (like rgb() and hsl()) while the new color() function doesn’t. Like many things in CSS, perhaps we would do it differently if we were starting from scratch now, but once something is shipped, we need to stick to it. Values for specifying colors have commas, the new one should be the same.

Some folks are proposing that the new function not have commas, while the old functions (rgb and hsl) get new rules — where you could use commas (which we have to do to support older websites) but you could instead “switch” and no longer use commas. You’d be required to be comma-less for color(), while using commas or not — your choice — for rgb() and hsl().

Some folks think, ok, this comma-optional idea has merit. Let’s make this so the people who don’t want to use commas can write new code across all our color functions (color, rgb, rgba, hsl, hsla) without commas. But let’s also allow commas in the new color() function so that people who are used to commas don’t have to change their practice, and they can do what they would expect, and use commas in the new thing. Basically, make commas optional everywhere.

Then there are people who think, OMG, we are going to make this overly complex and crazy-making by allowing commas but not requiring them. Let’s just keep things simple. We’ve already started out with commas in color functions. Just keep it that way. color() should use commas so that the new thing is consistent with the older things. Maybe it’s not “pure” when thinking about code syntax across all of CSS, but it’s easier for people who write CSS, and that’s important.

What do you think?

Type of post: thought

Ruby Test

I just saw THE BEST TALK — by Mariko Kosaka. I hope you get there’ll be a video to see it, too!

Type of post: thought

Resources for Learning How to Code Layouts

You got excited about the new possibilities for layout design. Now you want to try some things out. You want to learn the new CSS. Where should you start?

1) Rachel Andrew

You should get to know Rachel Andrew's work. She's been writing, presenting, demoing, and advocating for new layout technology for several years now. And she has a Giant Pile of Helpful.

  • Books by Rachel, including Get Ready for CSS Grid Layout
  • Rachel built an entire website of examples of Grid:
  • She's presented at dozens of conferences, search for videos of her talks and watch the most recent ones for the most up-to-date information
  • Best of all, Rachel has made a video series for learning All the CSS for Layout, from floats to display:table, from Flexbox to Grid: The CSS Workshop. It's a high-quality course that costs money to access. Meaning she gets paid, and you get an efficient way to really go deep with this stuff. It's totally worth it, if you can afford the $200 for the whole course.
  • And check out her blog and website for more.

2) Flexbox Games

There are several games for learning Flexbox — or really, for learning the Alignment module. Doing some fun drills is a great way to master your memorization of the new lingo.

3) Dive In

Really, the best way to learn how to code CSS is to code some CSS. Download Firefox Nightly for the most-recent implementation of Grid. It will just work in Nightly, you don't have to flip a flag.

4) Read the Specs

If you want to get to the Real Truth, the original source where everything else comes from, then read the CSS Grid specification, the Flexbox specification, and any of the many more.

Type of post: link

Learn Alignment by Playing Flexbox Games

Flexbox introduced a lot of new CSS lingo. Justify-content? Space-between? Align-self? It can get confusing fast. But to use Flexbox — to really use it — you need to memorize all these words. You need to know them cold.

And guess what? All of this terminology isn't just useful for Flexbox. It's part of CSS Grid spec, too. In fact, it's becoming so important, the CSS Working Group pulled this part of the spec out of Flexbox and put it into it's own new spec: The CSS Box Alignment Module. Eventually these properties will work in block containers and multicol containers.

The time you spend studying and memorizing this new terminology will pay off. It's time to pretend you are back in school. Flashcards anyone?

Or… maybe not. There are some fun games popping up that will drill the concepts into your fingers. Here are two:

If you know of any others, drop links in the comments. And if you are about to make yet another Flexbox 12-column grid framework, please don't. Make an Alignment game instead!

Type of post: link Flexbox, alignment, learning

Let Clippy Help You With Your Math

If you've seen me present on stage anytime in the last three years, then you've seen me get excited about CSS Shapes. Clip-paths are also awesome. Both require (if you want to make a anything besides a circle or ellipse) some strange polygon math. I've been tossing random numbers at my CSS, hunting and pecking my way into what I want.

This is better:

a screenshot of the Clippy tool in action

Type of post: link clip-path, shapes

The Computers: The Remarkable Story of the ENIAC Programmers

Six years ago, I created a new theme for Drupal 7 to be the new default face of Drupal. I'd been experiencing some problems with sexism and hate in the Drupal community, and I wanted to take a stand when I named the theme. My goal was to replace the Garland theme, named after Judy Garland. So I chose to name it Bartik, after one of the ENIAC programmers.

Six people programmed the world's first electronic digital computer, and they had to invent programming in order to do it. They were all women. In fact, women did all the early software programming; it was only later that men took over the industry.

I wasn't sure which of the six women to choose, and I wasn't sure whether I should use her maiden name — the name she'd use during the years she programmed the ENIAC — or choose her married name, the one she'd have used throughout the rest of her career. But best I could tell, the team was led by Betty Jean Jennings, known for most of her years as Jean Bartik. So Bartik it was.

There's a new film out about the six ENIAC programmers, with lots of interviews. You can watch it here:

Type of post: link ENIAC, Bartik, women in computing

Don’t Read This. It’s No Good. And It’s On An Ugly Website.

I originally wrote this essay on an earlier version of I wanted to redo the website, but I also wanted to start writing before I'd have time to build a new site. Turns out, I didn't. This was the last post I made on the earlier site. This new site is built on a fresh new database, and I wiped out the old database. But I thought I'd move this one essay over.

I have so many blog posts I want to write. I’ve been waiting forever to get started. I’ve been waiting for the time to be right. To be ready. Really ready. To be done with this other project, first. Oh and that other thing. And these other 57 million things.

Plus my website looks horrible. The layout is incredibly boring. How can I travel the country, inspiring people to change up their boring layouts, while my layout is the most boring of all? I better to not post anything, ever, and not have anyone go to my website and see how bad it is. And worse, never mind how it looks — the content is a mess! What in the world is going on on these pages? The home page? The speaking page? The site is full of weird rambly lists that sort of have good content, but mostly are repetitive and weird. Can’t Jen do way better than that? I thought she was a great web designer. I aspired to be like her. Clearly, I was wrong. She sucks. This is useless.

Yeah. That.

So my plan is wait until I totally redo my website before I post anything. That’s a great plan. Such a good plan, it’s been my plan for the last two years. No, five years. No, longer. Which is why I’m not publishing anything.

But isn’t it weird that I’m starting now? Why now? Why not 12 years ago? Ten to fifteen years ago is when all the cool kids started blogging. I missed the boat. I should have started 5 years ago. I could have written about responsive web design when it was new. Or HTML5, when people were looking for information. I could have written so many things. I missed them all. So why start now? Isn’t that awkward and stupid and weird? Just out of the blue? In August 2015? Just because I say so? Haven’t I said all this before?

Well. Plus. I mean. I secretly think I have to potential to be a great writer with a lot to say. To have a voice. To have an audience. To accomplish something. But if I actually start to attempt to make such a possibility real, and then it turns out none of this is true — and I suck, my ideas are flimsy, and no one cares or worse you hate me for it and harass me — then what? Then what will my Big Grand Scheme of How Awesome My Future Life Will Be Just As Soon As I Get It Together? What will I have left to imagine about my fabulous future? I’d rather have a plan for my amazing future then have a memory of a train wreck in my past.


Yeah, it’s time for that era to be over. Seems like I’ve… well, I finally have gotten it together to an extent. Not in a way that was pre-planned, but I have removed one obstacle after another until there’s not much left. There is really no reason to not be writing. In fact, now I’ve done gone setup my life so I have to write. It’s my job to blog.

“Write like no one is reading.”

You aren’t reading this anyway, are you?

“Write like no one is reading.”

This is something Zeldman is saying on stage at An Event Apart this year. Well, I’m going to take the advice.

I have a lot to say. A lot. It’s busting out of me. And I’m ready to let it.

And you aren’t going to read it anyway, right?

Type of post: essay
Subscribe to Jen Simmons : Writing