Jen Simmons: The Tools I Use
The second installment in our series on “The Tools We Use” features Jen Simmons, Developer Advocate at Mozilla.
My absolute favorite tool for designing is CSS. Especially now that so many new styling superpowers have landed in browsers, I come up with my best work by using our medium directly, and writing simple HTML + CSS. I wouldn’t know how to invent new things any other way.
What specific tools am I using to come up with new designs and to write CSS?
Coda: The place I write code. An old favorite. Why switch?
CodeKit: I don’t want to be on the command line while my brain is focused on thinking visually. CodeKit runs Sass and Autoprefixer for me in a GUI application, so I don’t have to remember any CLI commands.
Tower: Ditto. Git Tower lets me clicky-click buttons to make git commits and push. No need to spend braincells on remembering the syntax of each git command.
MAMP: I don’t need a web server to run simple HTML & CSS files, but I like using local domains like demos.local instead of long complex local paths. MAMP Pro lets me easily define a local domain for each project.
Firefox Nightly: I use All The Browsers™ to test code, but Firefox Nightly is my favorite. It’s fast. The built-in Developer Tools have everything I need. And I can use the latest version of my absolute favorite developer tool—the Firefox CSS Grid Inspector. I don’t know how a person could write Grid CSS without being able to see the lines. If you turn on the Layout Panel, you can access the bleeding edge of what’s coming next, including the ability to see the numbers of each line, or change the color of the grid lines. Sure, I’m totally biased in this opinion, since I had a heavy hand in making the Grid Inspector happen and in designing how it works, but… it’s still my favorite tool ever. (If you have any ideas or requests for what you’d like to see in layout inspector tools in Firefox, please let me know!)
Those are the applications I use, but my design tool kit includes much more. Over 100 layout design books from around the world sit on the shelves above where I work. I’ve been collecting and reading them over the last two years, soaking up as much tradition and wisdom about graphic design as I can. Taking inspiration from outside the web. Flipping through any of these books sparks dozens of ideas for new layout designs. Reading the science and theory teaches me the why of when to make which choices.
Finally, these days I lean heavily on the CSS specifications. I’ve come to realize there are a lot of things CSS can do that we haven’t noticed yet. Almost nothing had been written about Writing Modes or Feature Queries before I figured out what they can do for us. I’m increasingly convinced that the way we’ve been trying to use Flexbox isn’t quite right. Just yesterday, I realized my entire understanding of the display property is no longer accurate.
In all these cases, the place to go to find The Correct Information is to the CSS specification itself. You can find a list of the relevant specs at https://www.w3.org/TR/CSS/#css. These documents are not always easy to understand, but if you are ready to take your CSS skills to the next level, read some specs.