Sass, Susy, Unit Testing, and Finding Your Voice, with Miriam Suzanne

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.

Show Notes

• oddbird.net
• Miriam on Twitter: @mirisuzanne
• MiriamSuzanne.com
• Clarity Conference
• Susy
• Chris Eppstein
• Natalie Downe
• Natalie Downe’s 2008 presentation on writing maintainable CSS
• Eric Meyer’s css/edge
• Rachel Nabors
• True, Miriam’s Sass unit testing tool
• Miriam’s talk at Clarity in San Francisco on SitePoint Premium
• Riding SideSaddle, a novel that Miriam released in the form of a box of index cards
• More Twitter links: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

Conversation Highlights

I think in some ways it’s the self-confidence thing. I was a lurker because I didn’t think my voice mattered or I had anything say. Then at some point Sass got big around me. I happened to be playing with it when it got big. I became an expert at something accidentally. I had to catch up with that mentally. People wanted my opinion before I was quite ready to give it, and I’ve been trying to come along and figure out how to give my opinion and get comfortable with that role.

---

I saw these people that were standards evangelists. They were always inspirations to me, and I thought, I would like that. That would be fun. I could be a standards evangelist. I don’t know. Now I’m I guess a Sass evangelist by mistake.

---

My method is gather as much information as you can and start writing it all down. My sense is, instead of going for a shitty first draft, you just go for a shitty pile of shit. It doesn’t matter. You just fill your head with things. Click links on Wikipedia — anything that’s related to where you’re trying to go. The more information you have to connect to each other, the more likely you’ll make an interesting connection.

---

I would say write down what you learned doing something. And I think that’s always the most interesting thing to share. I’ve talked to lots of people on my team who say their favorite blog posts are the posts written by beginners, because those are the most useful when they’re a beginner … If you figure something out, you may assume that a million people have figured it out before you. But they didn’t write about it.

---

I think I come at it from very much a sense of I figure out what I want to create, and then I just figure out what technology I need in order to make that happen. So the final product comes first, or the idea for it comes before any interest in following a technology.

Transcript

Tim:

Hey. What’s up everybody? This is Tim Evko …

David:

… and this is M. David Green …

Tim:

… and you are listening to episode number 8 of the Versioning Podcast.

David:

This is a place where we get together to discuss the industry of the web, from development to design, plus some of the people making it happen today and planning where it’s headed in the next version.

Tim:

Today, we’re going to be talking with Miriam Suzanne, all about her background, what she’s been working on lately, and we’ll talk about Sass today, which is exciting — a tool that I use all the time.

So, let’s go ahead and this version started.

David:

So, Miriam, how are you doing today?

Miriam:

I’m good. How are you?

Tim:

Fantastic. It’s wonderful to meet you.

Miriam:

Yeah. You too. I’m happy to be here.

Tim:

I saw you give your presentation at the Clarity Conference in San Francisco a few months back, and I really wanted to meet you and talk to you some more about your philosophy behind design systems and the development with design.

Miriam:

Let’s do it.

David:

Cool. To get things started, since this is the Versioning Show, we have a philosophical question we like to ask for all of our guests. Our philosophical question is this: in your current career, what version are you, and why?

Miriam:

I’m going to say somewhere in the 3 as the major release or the major version. Then it’s probably like a 3.9 or something. I don’t know. 3.9.2. Probably a few bug fixes in there.

Tim:

Cool. Is that something that you’ve come to after trying a bunch of different things?

Miriam:

I don’t know. I just feel like my career has happened in various stages. The first one I was a lurker, and then suddenly I wasn’t. That happened quickly and without me paying attention. Then there’s just been a few shifts since then as I — I don’t know — get comfortable and figure out where I belong and get on with this career thing.

Tim:

How do you characterize the difference between being a lurker to where you are right now?

Miriam:

I think in some ways it’s the self-confidence thing. I was a lurker because I didn’t think my voice mattered or I had anything say. Then at some point Sass got big around me. I happened to be playing with it when it got big. I became an expert at something accidentally. I had to catch up with that mentally. People wanted my opinion before I was quite ready to give it, and I’ve been trying to come along and figure out how to give my opinion and get comfortable with that role.

Tim:

Miriam, I was looking at your blog earlier today, and you do a lot of very interesting writing and blogging related to development and outside of that. How did you get started with all of that?

Miriam:

The development specifically, or the art side of things?

Tim:

Yeah, very interesting. Let’s start with development, and then let’s move on to art, because that sounds pretty interesting too.

Miriam:

You mean the blogging about code and writing the book I released recently with SitePoint? Yeah. That was again part of that accidental shift as soon as I realized that people were using tools I had built, and they were interested in what I had to say. I thought actually a thing that I loved to do is to play around with new toys and then show people what I learned and get input from everybody else.

I was thrown into the open-source world. Susy was just a little thing I wrote for myself on the side, because it was useful in my client work. I had no GitHub account. I didn’t know much about open source, and my brother put it on GitHub and said, Here you go. You’re now an open-source contributor. You’re not a maintainer. Good luck.

So, that was the start of my GitHub account, and I really liked the way it worked. At that point, only a few people were paying attention, and Chris Eppstein I guess didn’t have anything better to do. I got some quick, good feedback from people in a low risk setting and I really enjoyed that.

I liked the back and forth and getting to put out my idea and then get a lot of critique from the community and make changes and adjust. I thought that was a lot of fun.

David [4:05]:

Susy was a really great idea. I don’t know if all of our listeners are familiar with it, but I am, because I actually used it on a project about two, maybe three, years ago. What I loved about it, it’s a grid system that doesn’t require taking over the entire page as a total layout. That’s an interesting approach. I’m curious how you came up with that.

Miriam:

Nothing in it was unique to me. I was working with an approach that I had seen on a talk by Natalie Downe. She had given a talk I think in 2008 about building systems rather than using existing frameworks. Building systems, languages, tools that you could reuse across different projects and they’d be very unopinionated.

I was using her system for layouts. It was very flexible. Using fluid grids on the inside, and then putting them inside of elastic containers. I really liked that approach, but it was a lot of math. Not hard math, but a lot of math, and I didn’t like doing it. So I started complaining about that, and asking if there was a better way to do it. Somebody pointed me to Chris Eppstein’s video about Sass. I just put Natalie Down’s thing in the Sass and said, Great. That will work well for me. At that point it was really simple. It was two equations.

David:

It worked well for a lot of us I think.

Miriam:

Great.

David:

Was that your initial introduction to Sass, or had you already been doing a lot of Sass before then?

Miriam:

I hadn’t done anything before then. I wrote Susy the first night I played with Sass. That was the only reason I wanted to use Sass. That sounds shocking at this point, because Susy got large and complex. At that point, it wasn’t large and complex. It was two mixins and a couple of variables. There were already grid systems. I looked at how other grid systems were doing, and then I said, OK, I’ll take these things and I’ll do Natalie Down’s approach instead.

David:

Very cool. You’ve really taken Sass a lot further than a lot of people. I’m curious, what was it about Sass that really drew you in?

Miriam:

Yeah, that’s a good question. I think I enjoy being a programmer, and I don’t understand being a programmer in the complete abstract. I don’t like playing with data, quite, but I like designing things. So it made sense to me to fall somewhere in the middle, and I get to play with logical structures and programming but in a way that I can see the final results. I can see a grid layout. I can see something come to life in front of me. It was a nice mix of things that made sense to me. So I enjoy playing with it.

I have to say, the way I got into CSS was somebody pointing me at Eric Meyer’s css/edge page back in the day. I don’t know if you remember that, where he was playing with just weird experiments with CSS. That’s always been what I loved. I said, Oh, you can experiment with this. Let’s do it.

David:

Going back a little bit, I’m interested how you got into programming to begin with, and what turned you on to that?

Miriam:

Yeah. I had a theater company that needed a website, and I asked my brother to build me a website, and he said no. So, that was it. I had to learn. I built that website, and then one for myself, and then I think a few of my friends asked for websites. And then suddenly I had a client, and then a job, and it just built from there. And it turns out it pays better than theater!

David:

[Laughs] I love that. We’re finding out a lot of the folks that we’re talking to here are essentially self taught when it comes to programming. Although I know you also have a musical background, and sometimes those two go together.

Miriam:

Yeah, that does seem really popular. I feel like — at design conferences especially — you get more people raising their hands with a music theory background, or some sort of music background, rather than programming or computer science.

Tim:

And you haven’t let go of that. You’ve managed to keep that active while you’ve been working as a programmer, I believe.

Miriam:

Yeah. Part of that’s because I always thought the programmer thing was a side gig, and that’s part of the reason I was a lurker for so long. I didn’t think of myself as a programmer. I wasn’t hanging out in programmer communities. I’m an artist. When I moved to Denver, I met artists. All of my friends are musicians and theater people. Then suddenly I had a following in the ether, and I had to start rethinking who I was. But art hasn’t left. That’s still part of the primary gig. I think of it as all part of the same thing to me. I’m playing with the same ideas. I’m interacting with an audience. I’m building experiences. I don’t know. I enjoy all of it, and feel like it all ties together.

Tim [8:34]:

I was actually just going to ask you, do the two — art versus programming — do you ever find them influencing each other and helping you come up with ideas for one or the other?

Miriam:

Yeah. I feel like learning to be a professional creative really helped my private creative. I learned how to use processes. In some ways, that’s a thing that you have to learn in theater anyway, because you’re dealing with groups, which is different from — a lot of painters don’t have to learn process necessarily in the same way, but in theater you’ve got to bring in together 15 people to create one piece of art.

So that — being a director in a theater, and then moving that into being a project manager and a designer in tech — that was a smooth transition. The feeling like, OK, these are very similar things. Working with teams. Trying to inspire them. Trying to edit. Trying to get a better tool before you launch. Then it went back the other way, saying Yeah, I’ve learned how to have ideas on a deadline and how to make inspiration happen because I need it tomorrow.

David:

I imagine that that also translates into the work you’ve done with the open-source community, because again, coordinating teams of remote people you’ve never met all working together on a project, that’s a challenge for a lot of folks.

Miriam:

Yeah. It’s a thing, though, that I’ve never had to deal with in some ways. I get occasional submissions to Susy. I’ve had a few other people be regular contributors now and then, but never at a scale where I was really managing a team in that way.

So I don’t know if that’s a mistake I’ve made in how I run the communities around Susy or my other tools. I’m curious about that, and I’m thinking of trying to make a few changes and see if more people come on board and what teams we can build.

David:

That’s interesting, because everybody has a different approach to what works for them, and I’m not sure that there is a right and a wrong about that kind of a thing.

Miriam:

Yeah.

Tim:

I’m sure there are people listening who feel that they’re in a place where they need inspiration, because they have a deadline tomorrow. Do you have any advice or tips that you could give out to people who find themselves in that situation?

Miriam:

Yeah. My method is gather as much information as you can and start writing it all down. My sense is, instead of going for a shitty first draft, you just go for a shitty pile of shit. It doesn’t matter. You just fill your head with things. Click links on Wikipedia — anything that’s related to where you’re trying to go. The more information you have to connect to each other, the more likely you’ll make an interesting connection.

I especially like following one link too far. So I’ll say, Well, OK. I followed one link that got me here, but this is still related. Plus follow one more link. It takes me somewhere completely unexpected, and see how we can tie that back to the first. That one link too far ends up being the slip in logic that you need to have a creative inspiration.

David:

I don’t know. The last time that I did that I found myself up at 2:30 in the morning watching episodes of Steven Universe.

Miriam:

See? So it was successful. Good.

[Laughter]

David:

Absolutely. I love that you’re integrating the creativity into your work process. What about the technical side of your work as well? As a self-taught person, are you attracted to certain technologies other than the Sass in particular?

Miriam:

Well, probably. I think I come at it from very much a sense of I figure out what I want to create, and then I just figure out what technology I need in order to make that happen. So the final product comes first, or the idea for it comes before any interest in following a technology.

There’s lots of things that I’m interested in, like I wish I knew more about animation. I need to follow everything Rachel Nabors is doing, because it’s brilliant. There’s lots of things like that that I would love to learn, but I just need a project that pulls them in and makes me do it.

David [12:12]:

What attracted you to like going out and presenting? Because you’ve been giving talks and giving presentations. It’s not something that everybody does.

Miriam:

Yeah. That was part of that initial discovery that this may be a thing that I enjoy: not just making the things privately in my living room — or in my bedroom as I started out — but actually going out and talking to people and finding out how other people are using it and how I can make it better. That interactive part of it is exciting to me.

And people kept asking what I was thinking, so I started telling them. So I really enjoy that. I mean, I saw at one point — I think back still when I was mostly lurking — I saw these people that were standards evangelists. They were always inspirations to me, and I thought, I would like that. That would be fun. I could be a standards evangelist. I don’t know. Now I’m I guess a Sass evangelist by mistake.

David:

And a separation of concerns evangelist as well, I believe.

Miriam:

Yeah. That’s true.

Tim:

I think I’m a yelling at my bosses adopt performance evangelist.

Miriam:

Great.

David:

I am good at that.

[Laughter]

Tim:

It’s interesting, because you’ve been working on so many things. I’m curious what you’re working on now that we might not have heard of yet.

Miriam:

Yeah. I don’t know how many people have heard of the newer toys. True is one in Sass that I think has the most life, but also the smallest niche audience. I’m really curious where that goes. It’s a unit testing tool for Sass, which is I think not useful for most Sass projects. Most Sass projects are designing a site, and there’s no way to unit test that in Sass. If you’re doing something that uses a lot of functions or a lot of mixins, a lot of manipulating variables in some way, then unit testing is useful.

So it’s a tool really targeted at people like me who are building tools like Susy or other Sass tools. I hope that’s useful to people. I think that Susy has a shelf life. I’m still surprised that it’s useful to people. I felt like it would die years ago. Just the technology of layouts changes. Browsers are getting better at handling layout. When Susy first came out, it was handling some ten different hacks to make all the browsers work together. You just don’t need that anymore.

So Susy has a shelf life, but unit testing doesn’t in the same way. That’s only going to get more and more useful in the Sass world. But it’s niche.

David:

I appreciate that, and I think that there are definitely people out there who can take advantage of things like that. And it’s the sort of thing that you don’t get exposed to unless you’re out there in the community, really working with people, I suppose.

Miriam:

Yeah. The other tools that I’m playing with — and I haven’t done much to publicly show them (I started to a little bit at the Clarity Conference that you mentioned) — is a set of modular site configuration toolkits, one to handle colors, and one to handle sizes, and one to handle fonts, in such a way that the machine and humans can find the information readable. And that means you can automatically generate style guides from it. You have one source of truth in your documents. I’m finding those fun, but they have a little ways to go before I think they’ll be widely popular.

David:

So, for the listeners out there who might also be attracted to this idea of evangelism, how do you recommend people look at their work and the things that they’re doing and move into that phase?

Miriam:

Yeah. I would say write down what you learned doing something. And I think that’s always the most interesting thing to share. I’ve talked to lots of people on my team who say their favorite blog posts are the posts written by beginners, because those are the most useful when they’re a beginner. How did you set up this new tool? How did you get it to work? How did you use it for the first time? Those posts are really useful to people. If you figure something out, you may assume that a million people have figured it out before you. But they didn’t write about it. If you figure it out, write it down and share it with people. That’s always going to be useful, and you don’t need to be an expert to do that. In fact, a lot of the expert speakers are proposing talks before they even know the topic. They’ll pick a topic they want to learn, and they’ll propose a talk on that topic, and then they’ll go learn it. It’s a great way to do it. It’s available to everybody.

Tim [16:15]:

Well, I think I have certainly learned something new, by the way, of how to propose for talks. Maybe I’ll give that a try!

Yeah. That was very informative. Thank you so much for stopping by. How can people find you, talk to you, follow you, do all of those things?

Miriam:

Yeah. You can go to oddbird.net, and you’ll find plenty of links there. I’m also @mirisuzanne on Twitter, or you can find my website MiriamSuzanne.com.

David:

Excellent. We will definitely put links to all of those in the show notes. Miriam, thank you so much for coming by and talking with us today.

Miriam:

Absolutely. Thank you.

[Musical interlude]

David:

I’ve been looking forward to meeting Miriam ever since I saw her talk at Clarity. This was so much fun.

David:

Yeah. It really was. I haven’t seen her speak, but I certainly was interested, because I know her from the Sass community. I dove into Sass pretty much as soon as I heard about it. One of the things I liked about that community is that it is so large. It’s so extensive. I feel that there’s always something new. I’m always popping in on CodePen, and seeing a demo where someone wrote a whole bunch of math and made a floating cube that spins or something like that. I’ve heard of Susy since, I think, years ago. But yeah, that was very fun, very interesting. I feel like I want to go write some Sass now.

David:

I know what you mean. The Sass community also has some of the coolest people in it. You hang around with these folks and you’re impressed how these folks integrate the design side of their life with the coding side of their life. It brings out a really eccentric and interesting personality type, I think.

Tim:

Yeah. It really does. It was never really for me to program in Sass. I’m sure I could do it, but I never came to a point where I was thinking to myself, Let me really try to program in Sass. That’s coming from someone who writes JavaScript libraries. Maybe not good ones, but I’m certainly not a stranger to programming. But I’ve always admired it from afar, if you know what I mean.

David:

I do. I do. I’m also one of those people. I was using Haml and Sass together as soon as I discovered them. At the time, my language of choice for the back end was PHP. (Don’t hurt me!) I was figuring out ways that I can have my sites dynamically generate the Haml and Sass into the HTML and CSS that I needed from a PHP background.

So, it’s like these were technologies that sucked me in right from the start.

Tim:

O yeah, definitely. One of the things that really piqued my interest was Miriam talking about speaking and getting out there and engaging in the community. I’m very introverted, so I have to force myself to do that. So it’s always nice to talk to someone who gives encouragement — Go out. Meet people. Speak at places. Propose a talk somewhere.

I think that’s a good reminder — for me, at least — that it’s really just important to go do that stuff. You learn so much.

David:

She makes it sound so easy. Just start writing things, and start writing what you learn. I think that that’s probably the best piece of advice. Take whatever you’ve recently learned. Write it down not only for the community out there, but also for yourself.

I’ve had the experience where I’ve written myself notes about a tool or a technique, and just posted it up on my blog. And then, searching the internet years later, to try to figure out how to do something, I found I was giving myself advice based on things that I had written years earlier.

Tim [19:55]:

Yeah. Actually, on my other screen here have a CodePen demo that I’m trying to work out through my head. It’s nothing crazy. It’s just like if you’re scrolling through an infinite list, once certain items get above the viewport, you want to take them out of that list so that your list doesn’t get too long and your computer doesn’t crash.

I’m trying to think, all right, how would I write that by myself, not looking for any help, just trying to see, if I were to do this, how would I approach that?

Now, nine times out of ten, maybe ten times out of ten, when I do this, it’s like a thousand times worse than the correct way to do something like that, but I always end up learning a ton about either DOM manipulation, or performance, or frame rate, or stuff like that.

And again, as soon as she mentioned when you’re doing this, just write it down, I’m thinking to myself, Wow. Here’s a blog post. Just right here. Stuff about scroll event listeners, and how to batch your read and writes at the same time.

There’s just a whole bunch of information. If it doesn’t help anybody, it will at least help me one day when I have to remember, Oh, how did I attach that event listener right there?

David:

Exactly. Exactly. And things move so quickly in programming. We’ve discussed this before, and with other guests who’ve been on this show. The fact is that you can’t stay on top of the technology. It’s always changing. Whatever you’re learning today, there’s somebody out there who hasn’t learned it yet. And there’s somebody out there who’s going to need it next. Just sharing that with people and putting it out there, it’s benevolent for the community, and it also helps support who you are, and puts your name out there so that you can then start meeting people who are working in the same things that you’re working on, and maybe develop those communities.

Tim:

Yes, definitely. One thing that I do want to touch in, I think it is a little bit of a privilege for at least people like you and me who actually can afford to go to meetups outside of work. Because there are people who, for example, have a family to take care of. There are people who are working two jobs at once and don’t have that space to do those things.

I certainly don’t have the answer, but I’m curious what the solution is for people who find themselves in that position, who would love to go to these things but genuinely really just can’t manage to make it work for them.

David:

That’s a legitimate challenge, and I believe that there are people out there; you don’t meet them, because they don’t come to the meetups, because they can’t make it to the meetups. But of course, you and I are also living in New York and San Francisco.

Tim:

Yes.

David:

That is a privilege in and of itself, and we have immediate access to a large community of people. There are people living outside of these great metropolitan centers that do not have such easy access. If it’s not online, and they can’t access it in the time that they have available, it’s just not going to get to them.

Tim:

I think it would be helpful for these events. For example, right now as we’re recording this, it’s July. In a couple of weeks, I’m going to go to a CodePen meetup and give a quick talk. Those smaller events, while they are not big conferences, I think it helps as much as you can to try and get that stuff on video. Make sure people can interact with what you’re doing from home if they can’t be there in person, because that way it can still benefit.

You definitely won’t get as much of the networking value out of it, but you will at least not be left out. You’ll be able to see what’s going on. And I, for one, love to load up videos of talks when I can, because, again, you continue to learn so much from those sorts of things, and it helps when they’re available for people who can’t make it to those events.

David:

Right. Actually, on that note, I believe Miriam’s talk at Clarity in San Francisco a few months back is up on SitePoint Premium right now. But I spoke recently with the founder, Jina, who founded the Clarity Conference. She said that she made an arrangement with SitePoint that 6 months after we’ve got published on SitePoint Premium, she’s going to be releasing all the videos from Clarity, which was a conference about design systems.

She’s going to release them for free, so that anybody can see them — including Miriam’s talk. That’s exactly the sort of thing — making these presentations accessible to the community, it’s so valuable. It brings everybody together.

Tim [24:10]:

Yeah. That’s excellent news. That’s great to hear. If you’re listening to this and you’re interested, I’m sure we will have a link to that in the show notes, and go and learn and be prosperous.

David:

I like that. That’s good advice for anybody.

The other thing about Miriam is the way that she blends art and coding. I don’t know if you’ve gone and looked, but she has a novel that she released in the form of a box of index cards that you can mix and match and shuffle together. It’s just brilliant. It’s like, who comes up with that approach to writing?

David:

That is amazing. That’s like, not only do you have to be a good writer, but then it’s mixed into this art form. That’s incredible.

I always admire people who can mix things like programming and art and draw inspiration from the other. I don’t actually publish anything, but I do write a lot in my spare time. But I haven’t yet been able to mix the two. After hearing Miriam talk about her process and how she goes about making that happen, I think I might try. Not publicly, mind you, but I might try where nobody can see.

[Laughter]

David:

At some point somebody’s going to see, and then it’s going to get interesting. I encourage you. I’m looking forward to reading what you’ve been working on on the side there.

Tim:

Yes. All right. Sounds good. One day. One day.

David:

One day. One day. Yeah. One day people will see my creative prose as well. I do occasionally release a little bit of short fiction, a little bit of poetry, but it doesn’t consume the work that I do. I like putting it out there, and I like getting a little bit of feedback for it. It’s a tentative thing. You’re not sure who’s going to see these things, what kind of reaction you’re going to get. You have to be open to anybody possibly responding and the way that they’re going to respond from wherever they happen to be coming from.

Tim:

First off, that’s really cool. I didn’t know you’re into writing. We should compare some time.

That brings me to an idea now. What if we do an episode where we have guests come on and we just talk about stuff you like to do outside of writing code? I think that might be a little bit interesting.

David:

It’s definitely something we should integrate into what we ask people about, because we’ve talked to a few people now and we’ve talked mostly about the code work that they’ve done. Like Ken Wheeler we spoke with: he was talking a lot about the music that he does, and that’s cool. That plays into this idea that coding doesn’t have to consume your whole life in order for you to be successful and to enjoy it.

Tim:

In fact, I think I’m starting to learn this a lot — doing stuff outside of spending all your time on open-source work, and writing talks and coding, is helpful. It makes you a better coder, and a better developer, or a better designer.

David:

I would definitely agree with that.

Tim:

Good stuff.

---

David:

Well, thank you so much for listening, everybody. We always enjoy getting to talk technology with all of you.

Tim:

We would also like to thank SitePoint.com, and our producers, Adam Roberts and Ophelie Lechat. Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes to let us know how we’re doing.

David:

We’ll see you next time, and we hope you enjoyed this version.