An Interview with Una Kravets
I had the pleasure of talking to Una Karvets one Sunny Sunday, and was super excited to do so because I’m a huge fan of her work. If you’re not that familiar with what she does, here are some pretty cool links to check out:
http://alistapart.com/article/finessing-fecolormatrix
http://una.im/CSSgram
http://una.im/svg-icons
http://una.im/classy-css
http://una.im/bokeh
http://una.im/3d-effect
http://una.im/bokeh
https://github.com/una/personal-goals
The following is a transcript of my interview with Una. I learned a lot from her and wanted to share that wisdom here.
Sarah Drasner: When I think of you, I think of somebody who has been a breath of fresh air in the CSS community. You seem to ask, with good data to support your inquiries, “Wait, did we throw the baby out with the bath water?” You post a range of materials—from creative implementations for things like CSS filters, to “Hey, let’s be really reasonable about what this is and how to use it.” That’s really great.
Una Kravets: I’m glad that you picked up on that. In my heart, I want to just say “Whatever, let’s just be creative and art the web. Let’s push it forward and just worry about the rest later.” But in my head, I’ve learned to reign that in and be a bit more pragmatic.
At work, I’ve been working on component libraries (for Watson and Bluemix), for what has amounted to over a year now. Aside from just worrying about browser compatibility, component libraries pose a really big problem to solve. On one hand, you can create a system that’s perfectly semantic, using mixins and extends, which produces the smallest file size, and beautiful code, but that also comes with a lot of assumptions. So, you can’t say, “Well, everyone is going to use Sass,” since not everyone may be familiar with it yet. We learned that we needed to take a step back and think about the user—provide CSS for those who might not have experience with Sass, and for those who do, we need to think about how to build a system that is easy to get started with.
SD: Yeah, there are a lot of really brilliant server-side engineers that use these kind of component libraries, but then there’s also the maintenance of a code library. Those are different roles but, at some point, you have to decide if a Junior Engineer just won’t be able to work on the maintenance part. If you’re going to write mixins and extends in a certain way, you silo the work a bit towards Sass experts and people who feel more comfortable working with the markup.
UK: I think that’s important to realize. Also, a lot of time people hear these new terms in the dev world and they get kind of worried because the more people are talking about them the more it seems like everybody is using them and you’re just behind. But really, people are just talking about new things because they’re new. Making that distinction is kind of freeing because you realize that it’s okay to not have all the answers immediately and take a second to understand why people are using something instead of jumping in because it’s “the new hotness.”
SD: Yeah, I know that’s a really great thing to do. There’s a certain amount of anxiety when you see all the new things coming out. You have to have time to review technology before you take the plunge of putting it in production and maintaining it indefinitely.
You’re doing a lot of engineering work lately, but seems like you used to do a lot of design. Have you moved away from design?
UK: I always have difficulty answering this question—I do still design, though not as much and not in the traditional sense of visual design. I pretty much only design via code because I find it a lot faster to design in the browser and don’t like spending time on an extra step if I don’t have to. Sometimes I’ll do a sketch, and then figure the rest out on the screen.
SD: Personally, I love when you post calligraphic drawings on Twitter. What was the one you had done just recently that was really good? It was when you were learning React.
Sharing methods & their scope in React#codecalligraphy #reactjs pic.twitter.com/dt9A8xK5Di
— Una Kravets (@Una) December 27, 2015
UK: Oh, I did a React one about props and how they’re passed between items, and recently did one on ES2015 string templating and then another on default parameters. I really wanted to learn calligraphy a little over a year ago, so I ended up taking a calligraphy class at a local art gallery which turned out to be a Roman calligraphy class. I thought that was cool, but it’s not really what I wanted to learn so I learned the rest on SkillShare and YouTube.
? #CodeCalligraphy: ES2015 Default Params ?https://t.co/PAuqgZb98L
Another handy feature I recognize from Sass ? pic.twitter.com/2bl88Y7Xv2
— Una Kravets (@Una) February 13, 2016
SD: It’s nice to put the two together because some of the concepts can be dry. Doing technical diagrams are difficult because finding the best way to visualize concepts is tough. Once you do, I think it makes things clearer not just for you, but also other people trying to follow along. Do you find the process clarifying?
UK: Definitely. It’s so hard to find posts that explain complex subjects in a high level way.
SD: One of my favorite of your articles was the one about Sass extends.
UK: You liked it? I knew posting it would get some people angry at me because a lot of developers have opinions on extends and how to architect CSS. I remember posting it on a Friday and thinking, “Hmm, this is definitely the best time to post the article,” [laughs] and I got ready to go out while waiting for the angry comments to roll in.
SD: I thought that was great because there were some previous articles that were particularly damning against using extends and, as a result, a lot of people threw them out entirely.
UK: Oh yes.
SD: So, when you defended them, it revisited that premise and, to be honest, it was something I was thinking all along, too.
UK: Extends are there for a reason. In an article I have coming up I talk about ES2015 classes and how they’re akin to Sass @extend when using super() in class constructors to pull in the JavaScript methods of the parent class. And then go on to talk about 5 more concepts that transfer over pretty well.
Editor’s note: Una has since published the article.
SD: That sounds like an awesome article. I’m going to read it for sure.
UK: Yay!
SD: Yeah, I mean, that’s a really good point.
Are you still working at IBM?
UK: Yep! It’s been really cool to see how the company culture has transformed since I’ve started there. It’s been really, really exciting to watch the front-end development community in particular grow so much and find its place within a design studio.
SD: Do you feel like you’ve been part of a group that has pushed that idea forward?
UK: Yeah. I used to work at a company called Viget that I absolutely loved and the front-end developers had these knowledge-share sessions where they would watch tech conference videos together over lunch. It was a way to catch up and learn new things. I really missed that kind of knowledge-sharing when I started at IBM so I figured why not make it happen? From October 2014 until now, almost every week we’ve had either a speaker or a video that we watched. There have been over 40 unique talks from different coworkers, most of whom had never given talks before. It gives people a chance to practice speaking and making slides and teaching while giving other people a chance to learn.
SD: Well, that’s really cool. That seems like fostering some growth as well for people who might casually be interested in some of these things and not have a way of learning more.
UK: It opens people’s eyes to things they might not even realize exist yet and also who to turn to for more information on a topic. We’ve had talks about React, Ember, performance monitoring, the web audio API and SVG animation. We’ve had talks about everything! It’s a place where people have an excuse to dive deep into a topic they’re interested in and, as an aside, they now have prepared presentations for meet-ups in town!
SD: Oh, that’s awesome. Does this mean mentorship is a part of what you’re doing now?
UK: In the office, I’ve always been a go-to Sass person. That’s continued and I’ve always helped different teams with front-end questions and getting designers started with GitHub. Outside of work though, I get emails now. People will ask me for advice and I honestly try my best to answer them pretty quickly because I know I used to be that girl sending emails to people who inspired me online. I would say, “I really love your work on this, this, and this. I’m a student. Is there any advice you can give me or books I should read or things like videos I should watch?” I think the people who are sending these emails and making the effort to reach out are the people who are going to be really successful in the future because they’re putting that extra time in and putting themselves out there.
SD: Yeah, I don’t know if you heard there’s a recent Shop Talk Show episode where Chris [Coyier] and Dave [Rupert] were going through old questions and one of them was, “How do I get involved and how do I learn more about the web community?” It was from somebody who is like now part of the web community.
UK: I heard him reading it. They’re like, “I think he’s fine now.” [Both laugh.]
SD: I remember even when they said the name I thought, wait, I know that name. So, yes, I think that’s true. I think especially in this community being passionate is 9/10 of the law.
And now, with you so active, people probably ask you to speak a lot. You shot up like a rocket.
UK: That’s exactly what it’s like. It’s like a roller coaster and I don’t want to stop because I have so many ideas and people actually listen to them, which has allowed me to rationalize spending my weekends toying around on the Internet with random thoughts on how to make designing in the browser better.
SD: Absolutely! And that leads into my next question: how do you find time to balance your work life, your passionate web life and all of the conferences. You travel a lot for conferences. How does that work with your job and balance in general.
UK: Oh girl [laughs], you’ve got to make time is what I learned. It’s hard. It’s not easy.
I think last year I spent a lot more time being focused on my career and making sure I was doing good work, and then going home and making sure I was doing good work outside of work. It sounds bad, but I can’t hate on it too much because I think everyone needs that experience of buckling down and focusing on building things until they hit a point where they realize, “OK you need to maybe take a step back now.”
I use lists a lot to make sure I’m doing all the things I want to do. If I don’t write something down, then I’ll probably forget. I actually keep them pretty public on a GitHub repo.
SD: Yeah, yeah, I’ve poked around there and looked. I do a very similar thing, but mine’s analog and not public. It’s pretty special that you use GitHub as a tool this way.
UK: Exactly. I mean, whatever is most accessible for you. For me the terminal is where I live. I just organize everything in the terminal and then I post to the web, but it’s so important to write things down and that’s how I make sure I’m making the time for things. This year I’ve spent more time focusing on a balance: if I am spending X amount of time working, I have to balance that out with X amount of time hanging out in Austin, which is a really cool city, or doing things that aren’t code-focused. I get a lot of inspiration for the talks I give outside of my computer screen, so it’s nice to prioritize getting some time away from it.
SD: That’s awesome. When you say you’re solely designing in the browser now, I assume you’re still looking at things that inspire you in the same way and then just changing output.
How do you find inspiration? Do you find that your inspirational tools are he same for that kind of output? Are you still looking at Dribbble and CodePen? What are you doing in order to get cracking on those things?
UK: I like to find inspiration outside of the Internet and the computer screen. When it comes to art, I really like things to have a raw edge to them and less of a Web-2.0-everything-is-perfect-and-flat aesthetic, which I think is still running the Internet. What I try to do is make things have a little more texture and that’s sort of what you see in nature.
It’s organic. There’s nothing perfect in nature. There’s nothing flat in nature. So, I guess that’s really where I see my inspiration coming from more recently.
SD: That probably lends really heavily into your work with the bokeh filters and your other Sass experiments.
UK: Yeah, those things are just like making sketches. I throw them into a browser and see how they work there. I did this travel site. It’s at travels.surge.sh and it’s a mix of my travel writing with images I took on location and CSS experiments. I literally designed every layout on there by throwing them together in the browser and applying filters and blend modes on them.
SD: I didn’t even know about this site! How do you make the time to do all this?
UK: Well, I built this site as a tester for some concepts that I was giving at a talk. It was my example site. One of my favorites is the Berlin one. If you resize it you can see how the different blend notes interact. That’s what I really like about them. You never really know what you’re going to get when user interaction comes into play.
I understand that every different art movement is a reaction to the previous one$mdash;flat design is a reaction to CSS3 and the capabilities that the browser allowed us. Browsers are getting even better with graphic rendering, so I think we’ll see a shift back to unique textures and expressive layouts, which is why I like to say #ArtTheWeb.
SD: That’s a nice rallying call and projection for the future. It’s nice to push that boundary and see how far you can go and then come back a little.
UK: I definitely agree with you. I think the browsers will get there and you have to push the boundary to get them there. One of the best examples that I love is how Lea Verou has been pushing for conic gradients, and that’s something she talks about at conferences. She gives the audience a call to action to let browser vendors know this feature is in demand. Browser vendors want to implement features that you’ll use, so you have to be playing around with them and give examples of use cases to get that feature implemented.
SD: Yeah and I think Sara Soueidan did the same thing with clip-path. She had a rallying cry and it brought a ton of votes to MS Edge and now they’re going to ship that feature. I do think we do have more control over these things than we might think we do.
So, one last question about something that really interested me. I saw your post about 3D glasses. Can you tell us a little bit about that whole process and how that went?
UK: I haven’t done that in a talk yet! I’m planning on showing it at an upcoming conference. What you’re referring to is a blog post I wrote about this anaglyph, or 3D red-and-blue effect. Basically, you can use a mix of darken and lighten blend modes to color a duplicated image, then layer them to cancel out and create red-toned and blue-toned shadows on either side of the image. Then you use the transforms to push images back with perspective in a way that would mimic eye distance, the way you would to help with the 3D image effect. It definitely depends on the screen, so keep that in mind, but if you put 3D glasses on (the traditional red and blue plastic ones) you can see a 3D image. Then, with CSS animation, you can animate in your browser with Dev Tools if you wanted to. This is why I love designing in the browser$mdash;it’s such a good sandbox medium. I just started working on this haphazardly, but it looked pretty cool so we’ll see how it goes. I wrote an entire blog post series on a few different effects.
SD: I saw some of them and it’s really impressive work. It was so exciting. I was kind of sad that I wasn’t at the talk so maybe I’ll get to see it! Looking forward to that, along with the other articles you have cooking! Thanks for taking the time to talk me.
UK: Absolutely! My pleasure.
An Interview with Una Kravets is a post from CSS-Tricks
