[00:00:01] (Music) SY: Hey, CodeNewbies, we want to make sure this show is helping you on your coding journey. To do that, we need your feedback. We put together a little survey and we would love for you to fill it out. The first 100 people who do so will get free CodeNewbie stickers and we’ll also randomly select five people and raffle off CodeNewbie mugs. The deadline to submit is September 1st. Link is in your show notes.

[00:00:27] Last year, more than a hundred thousand developers participated in Call for Code 2018, a virtual hackathon with the goal of finding ways to reduce the impact of natural disasters through technology. Submit your idea by midnight Pacific Time, July 29 for your chance to win $200,000 and support from IBM and other partners. Last year’s winner was Project OWL, a deployable mesh network that brings connectivity to survivors of natural disasters which you can learn more about in Episode 1 of this season. Start building your life-saving app today. Just a heads up that after this episode’s end credits, we’ll be playing a trailer of Command Line Heroes, the other podcast I host that’s all about open source and produced by Red Hat. So stay tuned.

[00:01:18] (Music) Welcome to the CodeNewbie Podcast where we talk to people on their coding journey in hopes of helping you on yours. I’m your host, Saron, and today, we’re talking about user interfaces with Senior Engineer at Slack, Mina Markham.

[00:01:31] MM: So it really helps in keeping a visual drift from happening where your brand starts to look a little less cohesive and little less polished.

[00:01:40] SY: Mina talks about her time creating the Pantsuit User Interface for Hillary Clinton’s 2016 Campaign, the importance of understanding the basics of UI and design and some of her favorite tools after this.

[00:01:59] Whatever your profession or passion might be, you’re going to need a website and Hover can help you with the first step of sharing your passion with the world, getting your domain name. They’ve got a really beautiful and easy to use interface where you can find and register your new domain in just a few steps. To get started, go over to hover.com/newbie to save 10% off your first purchase. That’s hover.com/newbie.

[00:02:24] Actualize Online Live is an online bootcamp created and taught by expert educators. It’s 100% live and can be taken from the comfort of your home. They use video conferencing, so you get to actually see and talk to your instructors and classmates in real time. That means you have live interaction and feedback, not just during instruction but during all your exercises and projects as well. Learn more at actualize.co/codenewbie. That’s actualize.co/codenewbie.

[00:02:53] Whether you’re building an app for millions of users or a small personal project, MongoDB is the most popular non-relational database. And now with MongoDB Atlas, you can take advantage of MongoDB’s flexible document data model as a fully automated cloud service. Try MongoDB Atlas today at MongoDB.com/cloud.

[00:03:20] SY: Thank you so much for being here.

[00:03:21] MM: Thank you so much for having me.

[00:03:23] SY: So tell us a little bit about what you do at Slack and what kind of projects you’re involved in.

[00:03:28] MM: So as a senior engineer, I work on what we call our Customer Acquisition Team, which really is just kind of a fancy way of saying I work on trying to get more people to use Slack, people who don’t know what Slack is or never seen it. My job as an engineer is to explain what Slack is via UI interfaces and entice them to start using it. So that means I work on our main marketing website, which is Slack.com. I work on pretty much everything up until you hit the login or create an account or buy button. And I build out landing pages, like specific one-off landing pages. I build that entire experiences depending on the narrative flow that our competitors have come up with. I also work on SlackHQ.com, which is our official blog. It’s another means to educate people about the benefits of using Slack. I get to do kind of cool stuff like I get to build out plan and infrastructures to figure out better ways to increase developer productivity to make my team be able to work faster.

[00:04:32] SY: So when you’re doing things specifically for the Slack homepage, I’m wondering, have there been any tweaks or things that you have implemented that you were surprised with the results?

[00:04:43] MM: The homepage is kind of like our very first interface with a brand-new customer. So there’s a lot of eyes on our homepage. And for that reason, we do a lot of experimentation on it occasionally, kind of trying to see what works and what doesn’t. We recently launched a brand-new version of the homepage. If you go to Slack.com right now, everything you see, there’s a project that I ended up doing. It was the first time I got to use sort of interesting animations. If you look at the site now, there’s a bunch of like floating little icons that are happening.

[00:05:14] SY: I know. There’s so much fun.

[00:05:15] MM: Yeah. That’s done via JavaScript animations, which is the first time I’ve actually used JavaScript in this way to animate, to do more fluid animations. Normally, I like to use CSS animations as much as possible because they’re more lightweight usually. But for the type of. movement that our designers envisioned, I really needed that next level. There’s a library called GreenSock or GSAP and we needed that next level like to make it really smooth and really like fluid. I needed that extra from that library. So that was kind of fun for me to dive in. It’s kind of all the different ways to perform more fluid animations and not just doing like fades or like shift and left and right but actually doing some next level information so to speak.

[00:06:04] SY: So you are probably best known for your work on the Hillary Campaign. You built something called Pantsuit, which is their user interface. Tell me a little bit about that campaign, the Pantsuit Interface that you built.

[00:06:17] MM: I was the first engineer that was hired on the Hillary’s tech team. So that was kind of a fun thing to kind of be in very much at the beginning. And the first project they really had me focused on was building what they called a bootstrap for our campaign, which really what they’ve meant was they needed a design system or a pattern library or some way to standardize our UI interfaces so that our other developers and engineers who would soon be hiring would be able to build and iterate quickly but still maintain a certain level of visual consistency. So I built this pattern library out of… we had an existing site at the time that I ended up stripping down under the hood all the code level, I ended up stripping it down and rebuilding the entire code base from the ground up while not changing the visual look of it. So it was more of a code refactor. And I build it in a way that I modularized and sort of componentized the existing interface so that we can then build on top of it and make it easier for us to iterate and build on top of it. And that was done in about six weeks, which really wasn’t enough time to truly like do a complete code refactor and make a system out of it, but that’s kind of the nature of how campaigns work. Everything is like it’s beating so fast. So I was able to kind of crank that out and then continually iterate throughout the life of the campaign.

[00:07:46] SY: So conceptually, I understand that we want to create a tool set for other engineers, other developers to build their stuff really quickly and not have to kind of redesign and reconfigure what the design looks. I conceptually understand that. But if you ask me to define what a pattern library actually is, I don’t think I can do that. Can you tell me a little bit more about how you define a pattern library?

[00:08:10] MM: Sure. This is actually kind of a controversial question just because there’s not a good consensus on what a design system is, like some people use the term design system or pattern library interchangeably and that’s not the way I personally define it. To me, a pattern library is a part of a larger system. So a design system in my mind, at least, it consists of everything from brand guidelines to the documentation of the actual components you use to the voice and tone of how your editorial voice sounds. It also includes the front-end code for how you build out the visual interfaces and includes the design sketch or Figma files that powers of pattern library. So it includes a lot of things in my mind. It truly is an end-to-end system where some people might just say, “A pattern library is all you need, or a style guide,” which is slightly different than the pattern library in the sense that a pattern library includes actual components that you can kind of take and put on the interface, whereas a style guide is more instructions on how to build things with the visual guidelines that you have. But in my mind, a design system, a robust design system has all of those things.

[00:09:29] SY: Okay. So let’s get specific. Let’s talk about an example. Let’s say I’m building a website for the Hillary Campaign and I am making a donate page with a button on it. Where would the Pantsuit User Interface come in when it comes to me building out that page?

[00:09:47] MM: If you’re building a page with a button on it, hopefully that button you use has been styled, has been tested, has been audited everything via Pantsuit.

[00:09:59] SY: Oh, okay.

[00:09:59] MM: So you’re copy and pasting or pulling in an actual React Component. We didn’t actually use React Components on the campaign. But for this example, it could be a React Component. You’re actually pulling the mark-up for that button on that page from the front-end framework or the pattern library or the design system. You’re pulling that directly from this one source of truth and that’s how you know that, one, it matches up with our brand guidelines, that it has the correct specs, that it’s been tested for accessibility and color contrast. It’s been QA’d manually and automated QA, if we go through that, like you know that when you grab that component from design system that it’s truly ready to go.

[00:10:42] SY: So as you’re saying all these things, I’m thinking, “Okay, it makes total sense. We want something that is tested, that is accessible, that has someone has really checked and made sure is really durable and reliable.” But at the same time, I’m kind of like, “But it’s just a button though.” You know? How many terrible things can happen to a button?

[00:11:03] MM: You would be surprised, not necessarily it’s just one button, but if you don’t have some kind of like system in place, that one button tends to multiply and suddenly you have two buttons that are kind of the same, which is a little bit of a tweak, and then suddenly you have three buttons and then all of a sudden you look, you’re like, “How do we have 10 different versions of buttons on this site? Do we really need this many variations?” A design system truly helps kind of to corral and keep things consistent and in check. Whereas if you’re going to deviate from what the standard is, hopefully you have a good reason for it and you have a new use case that hasn’t been considered. So it really helps in keeping a visual drift from happening to where your brand starts to look a little less cohesive and little less polished.

[00:11:53] SY: Yeah. You mentioned the word components a couple of times so far. Can you help me understand what that is? What’s a component?

[00:12:00] MM: It’s the basic building block of what a pattern library would be. It can mean different things to different people like much of the design system world there’s no one definition, but essentially a component is, to me, an individual piece of UI that can be represented on its own or in conjunction with other pieces of UI. A button is a perfect example, like it by itself can live but it also can live within a form, which means it’s living in relation with other components such as text and puts or media uploads or it could be a button that behaves like a link that looks like a button or a button that truly is a button. It’s essentially one identifiable piece of UI that either can be representative solely on its own or with other components.

[00:12:55] SY: So if we walk through maybe a couple examples, if I think about a form, is a form a component or is there like too many things going on with a form?

[00:13:02] MM: I wouldn’t say a form is a component. A form of probably a collection of components that could be in a specific layout. So that could be an example of what I would call maybe a pattern where a pattern is a predefined arrangement of components. A form is a perfect example of that. Forms generally will look the same. It’s just the data you collect from them would be different, but it’s made up of implied text input components, button components, all those different pieces.

[00:13:32] SY: Those pieces.

[00:13:33] MM: Yeah.

[00:13:34] SY: So I want to go back to the pattern library idea and why it’s so important. You mentioned brand drift. You mentioned this idea that, you know, if you don’t have a pattern library, if you don’t have this system to go back to, you might end up in a situation where you have a few different types of buttons, maybe slightly off in style, not quite so cohesive. But even in that situation, it doesn’t sound like the worst thing in the world. What is the worst-case scenario that we are trying to protect ourselves from?

[00:13:59] MM: It really does help developer productivity and designer productivity in the sense that we don’t have to keep recreating the will and keep rebuilding things, which doesn’t necessarily sound like the worst thing in the world. But when you work on a team that has high velocity and high churn, the less time you spend kind of making the same thing over and over again the more time you can spend actually innovating and doing something unique and creative. So I think that even with the worst-case scenario, it’s really just saving everyone involved time and efficiency so they can focus on things that are not usually more important things that could have higher impact. If you’re spending less time in the everyday kind of churn of creating interfaces and you can actually focus on thinking of and developing a cool new feature for your product or a cool new art direction for your editorial layout, that’s time much better spent.

[00:15:09] SY: Registering a domain name can be a pain, but Hover makes it easy with a super intuitive interface where you can find and register your new domain name in just a few steps. They must have listened to our episode on UI and design and to give you full control, they separate your domain name from your hosting so you’re never stuck with one service. Not only do they have over 400 domain extensions to end your domain with, classics like .COM and .NET and tech friendly ones like .DESIGN and .TOOLS. My personal favorite is .COFFEE. They also give you free WHOIS privacy so your personal information is safe too. To get started, go over to hover.com/newbie to save 10% off your first purchase. That’s hover.com/newbie.

[00:15:52] Actualize Online Live is not only a super convenient way to receive a top-notch bootcamp instruction from the comfort of your home, they also have nifty tools to help you learn everything from new coding concepts to syntax. They even produce a free weekly video called “Think Like A Software Engineer”, which teaches you things like how to debug code, how to research problems, and how to teach yourself new languages. Learning the mindset of a software engineer is the key to getting past the hurdles that can bog you down as you code. Check out the series at actualize.co/codenewbie. That’s actualize.co/codenewbie.

[00:16:34] SY: So I want to paint myself a picture of what Pantsuit actually looks like. We talked about what a pattern library is and what components are and what the design system is all about. But specifically Pantsuit, what did that one look like?

[00:16:47] MM: That one could be more easily described as a pattern library. It really was a CSS framework that I created that used a certain methodology that’s called IT CSS. It’s called the Inverted Triangle CSS. That’s just a way that I organized my CSS files and naming conventions for those individual components that I created. So it was really a collection of CSS files that styled a predetermined sets of visual elements that our designer came up with it. It also included documentation site where designers and engineers could go to see what’s included in the system and what was available for them to use. So the documentation site could be called a style guide if you want to give it a name, but include the documentation site that was a resource for really anyone who wanted to know information about the system. It included the CSS framework, which was a bunch of examples of Markup and CSS combined and it was a set of written guidelines for how to write our CSS standards potentially. So how we wrote CSS on the Hillary tech team. A good example is being accessible and building new accessible components if you need to build something that wasn’t included in the system. So it was a combination of actual CSS, documentation on that CSS and the Sass that powered some of that CSS and written documentation on our coding standards and how to make sure we were maintaining a level of accessibility.

[00:18:30] SY: So I want to go back to the six weeks it took you to build Pantsuit, which I think is amazing. Six weeks is not a lot of time. Take me back to that time. Take me back to that experience.

[00:18:41] MM: So I had never really done something like this before. So a lot of the days in that six weeks was me being slightly panicked because I was like, “I don’t know what I’m doing and I hope I’m making the right choices,” but I’m just kind of powering through it and kind of going with what my instincts told me was a good idea. I spent the first week or so of that just doing research. What I mean by that was I first look at the current state, I call it the state of the UI, so the current state of the visual interface I had to redo and just kind of see, “Okay, how many different types of font stylings do we have? How many different types of buttons do we have? How many different forms of navigation do we have?” So I collected kind of a visual inventory and I wanted to see just how much drift had occurred. I didn’t really know the term or think of the term drift at the time, but essentially that’s what I was doing. I was trying to see how much visual inconsistency there was. Once I got a good sense of where we were, I then looked at all of the code. I ran the code through a CSS audit and I just kind of wanted to see where there were some quick wins, like how many different color declarations we were using, how many different colors we’re using entirely, how many different times are we overriding the same kind of CSS property. So I took all of that information and that helped me to kind of figure out what my plan of attack would be when I started to refactor. Any given day I was looking at one page and attempting to recreate it using that organizational structure that I come up with to try to make sure that everything that I was building was consistent, but it was also easy for other people to onboard and understand if they just looked at the code bases. They’ll be able to tell pretty easily where everything was.

[00:20:40] SY: What are the high-level steps look like to build a user interface in general?

[00:20:45] MM: I think a good first step and hopefully some step that you’ve taken before you got what a coding is, who are you building for? When I was thinking about building Pantsuit, I had to figure out who this thing would be used by, which was the other developers of my team. So knowing who it’s for helps. From there, if you don’t have any coding standards or any sort of coding guidelines to follow, I would suggest writing some and creating some so that way going forward, no matter who on your team is writing code, it all looks like it’s written by one person. I think that is a good indication of a healthy codebase is that you can’t really tell which person wrote it.

[00:21:25] SY: I love that. Yeah.

[00:21:26] MM: From there, after you get the coding guidelines in place, we just start building piece by piece. I don’t actually like to build things on a page level basis. I always build individual pieces of UI as if they can live anywhere, like the example of a layout that I’ve been given by a designer, that’s one example of a use case, but I always try to envision, “Okay, where else could this potentially be useful?” So that way it kind of gets you in a frame of mind that you’re not building specifically for one thing and you’re more likely than to build it flexible enough so that if a new stakeholder comes along who’s like, “Hey, I want that thing that you build for so and so.” You can easily abstract that out and go build it for them and it’ll still work for their use case as well. It may not always work out one to one that way, but it helps to think about the potential other use cases before you start. I like to build things in context that I’m given but also out of context, which is I always build things out of the context that they’re actually meant to live in and then I insert them in the context of the layout later. So that’s how I know that it works both for the project I’m currently working on but it also will work on its own.

[00:22:43] SY: When do you start thinking about accessibility?

[00:22:45] MM: Oh, I think about that pretty much from the moment I start creating the first markup. When I think about accessibility, the first thing I think about is using semantic HTML markup. So the moment I started coding, I’m starting to think about what is the purpose of all of these different elements. Like this saying that looks like a button on design, what does it actually do? Is it a length that go somewhere? If so, it should be an H element. If it’s actual like a button that’s supposed to submit a form, then it probably should be an action button. I always try to think about what the use case is and how this piece of UI will be used and that informs how I build it, which means I’m trying to build it accessible from the beginning so that way I don’t have to try to retroactively make something that’s inaccessible accessible again.

[00:23:36] SY: What about things like offline first or even just responsive, making sure it works on mobile, desktop, all of that? How do you think about those other factors?

[00:23:44] MM: For responsive, I tend to build things mobile first kind. It’s kind of just… honestly, I don’t even think about it anymore. It’s just my default go-to where I will build something from the smallest viewport possible and then I will create breakpoints when the layout starts to break, when the content starts look strange. So I build everything basically from the moment I started coding. If you get like static markups from your designer for like mobile or tablet or desktop, if you get those individual markups, I like to think of those as like keyframes and an animation where that’s how the layout should look at one specific moment in time. But as you move your browser back and forth and as you move up between different viewports, it’s kind of on the engineer or on the developer to figure out how the UI should behave in those in between spots that the markups don’t necessarily give you a representation of. It’s more of an organic kind of way of building things possibly, like as building things with accessibility in mind, I don’t necessarily think of it as a step. It’s just something that I do from the beginning.

[00:24:51] SY: That’s great. That’s how it should be. Do you personally have a favorite type of UI or design style that you like to use?

[00:24:58] MM: It’s kind of coming back I guess in style at this point, but it’s something called a Memphis type of style or it was done by the Memphis group. This group, I believe it started in the ’90s. I’m not quite sure. But anyway, the style itself feels very early ’90s reminiscent of like the bright colors. If you’ve ever seen Saved by the Bell, if you think about that opening sequence with all like the colors and the shapes and all of that, like that’s kind of becoming my new favorite design style and it just so happens to be making a comeback right now as much of the ’90s is making a comeback right now. But yeah, that’s kind of where I’m at right now. I don’t know if my design shops are good enough to actually pull it off without it looking kind of took too much, but I let other people do it.

[00:25:46] SY: Oh, I think you can do it. I think you can do it. I believe.

[00:25:49] MM: I hope so. I hope so. I’ll try. But yeah. I’ve been seeing that style pop up more and more recently and I love it. I love everything about it.

[00:25:59] SY: Is there a style that you can’t stand?

[00:26:03] MM: All the styles that I can’t stand I think have kind of gone out of style thankfully, like the whole Web 2.0 one where everything was like bevels and drop shadows and everything was like photorealistic, I really didn’t like that. I’m also not really a huge fan of super wide typefaces. I feel like I’m just seeing those more and more. It feels like the texts are like stretched and like hued. I don’t like it.

[00:26:33] SY: Well, it’s interesting because the way you’re talking about styles and design styles, it’s almost as if there were talking about fashion where things kind of go in and out of style. Is that the way you think about web design?

[00:26:44] MM: A little bit. I kind of noticed it, like things do kind of go in trends for a while skeuomorphism, which is what they call that that photorealistic style. That was the trend and every website did that. Before that, everything was done in Flash, which there wasn’t really like a visual style associated with it, but it was still like everyone did the same thing. And now for a little bit, minimalism was in and people were doing super minimal interfaces and very little assets, images, colors, and whatnot. So I feel like as fashion trends, design also has trends, and if you look at one of those websites that kind of aggregates like current designs or pop-up designs, like I’ve definitely noticed that sometimes you’ll see similarities between the more recent design styles that are there.

[00:27:42] SY: So we’re do you personally draw inspiration from when you’re working on your projects?

[00:27:47] MM: I draw inspiration from non-web things. I’ve been trying to kind of go offline and find something that sparks my creativity. For that reason, I mentioned where websites start to look alike after a while where people are constantly essentially mimicking each other. So I’ve been looking at for actual layout inspiration. I look at old magazines or I look at old graphic design books and see how these print layouts could possibly be reinterpreted on the web. For things like color inspiration or just kind of general like inspiration of a feel or something, I also look at interior designs. I get a lot of my ideas for color palettes and color schemes by looking at Interiors because I find there’s something about like people using physical space that inspires me, maybe because all the work I do so intangible. I just get really fascinated by people who actually work with something that you can touch and feel and all of that. But yeah, I get a lot of inspiration from interior, specifically lots of color inspiration. I decorated my apartment myself and my living room has this very big, blue, bold color for an accent wall and I kind of played off of that bold color and started to influence my own personal web design style as well.

[00:29:09] SY: Oh, interesting.

[00:29:09] MM: And I’ve been designing my own personal sites for years because I’m an engineer and I can’t help myself. But I’ve been using that color of that color scheme that I saw in my apartment, like visually, physically in my apartment. I’ve been trying to figure out the best way to pull those colors that I like from my own personal living space to my personal online space. So far what I’ve been playing with has actually been kind of working. The color combination I definitely wouldn’t have thought of if I just been playing around in Sketch or Figma. I have this bright blue and this pink and this gold kind of scheme going on in my living room and it works really well when you’re sitting in the physical space. So I’m trying to see if how I can make that work online as well.

[00:29:55] SY: I like this idea of using tangible objects in the real world to kind of influence your online designs. That makes a lot of sense to me. Nice break away from what you normally do too.

[00:30:05] MM: Yeah. It actually started where I went out purposely looking for something to do with my hands. I wanted to do and make something real and something physical.

[00:30:15] SY: Yeah.

[00:30:15] MM: So it started with me decorating cakes. And then I started looking at Pinterest boards of cakes, then that kind of spiraled into looking at kitchens and that spiraled into looking at interiors and it just became a whole thing. But I like the idea of like handling something tangible and then letting that influence the other work that I do.

[00:30:38] SY: So you probably have a bunch of Pinterest boards then.

[00:30:40] MM: I have a lot of Pinterest boards. I haven’t actually look at some of them a long time. I went back and looked at them probably a few weeks ago to just kind of see what I collected, and man, there’s a lot of stuff there. I have one board that’s literally just pink objects. I don’t remember why I was looking for pink objects, but I have a board that’s anything pink, shoes, walls, clothes, like strange shots of websites, just anything pink. I have a board that’s just for cake decorating, a board that’s for interiors. Yeah, I have boards for everything.

[00:31:18] SY: What are some other resources you use to do the work you do?

[00:31:21] MM: What I’m looking for are new techniques or I’m going to see what is new happening in the case of tech industry. I will sometimes look at CSS-Tricks.com or Smashing Magazine. Those are probably two publications I go to for reading up for like how to implement something. I look at CodePen a lot for just visual inspiration for how to build certain things and new front-end or CSS-Tricks. The CSS Grid spec is probably one of my new favorite things and I always look to Rachel Andrew and Jen Simmons. They’re sort of the leading experts on how to use CSS Grid and the possibilities of it. So I look a lot to the content that they put out when I’m trying to figure out new ways of using Grid. Other than that, I go to a lot of conferences, which I know isn’t really accessible for everyone, but I do find though information that I received at conference is going to help me to think about the next new technology I might want to try working with or something that I’ve been outside of my immediate sphere of reference for a while. Other than that, I spend a lot of time, way too much time on Twitter. So in the midst of all the crux, there are nice resources that people were paying out or new sites I should check out. So I kind of scroll through there occasionally to see what people are talking about.

[00:32:53] SY Coming up next, we chat with Mina about her own coding journey, what it’s like being a black woman in tech and advice she would give to her younger self after this.

[00:33:09] We’ve talked about open source a bunch of times on this podcast, but frankly, open source is so big and complex, and fascinating that it needs its own show, and it has one called Command Line Heroes. It’s produced by Red Hat and it’s hosted by me. That’s right. I’ve got another podcast talking to incredible people about all things open source. We talk about the history of open source, the introduction of DevOps and then DevSecOps, and we even do an interview with the CTO of NASA. And that’s just the beginning. We also dig into cloud and serverless and big data, and all those important tech terms you’ve heard of, and we get to explore. If you’re looking for more tech stories to listen to, check out redhat.com/commandlineheroes. That’s redhat.com/commandlineheroes.

[00:33:55] MongoDB is the most popular non-relational database for a reason. It’s super intuitive and easy for developers to use. And chances are as a software engineer, you’ve crossed paths with it before. Now with MongoDB Atlas, you get its flexible document data model as a fully automated cloud service. It handles all the costly database operations and admin tasks like security, high availability, and data recovery so you don’t have to. Try MongoDB Atlas today at MongoDB.com/cloud.

[00:34:34] SY: So I want to shift gears and hear a little bit more about you. Tell us about how you got into code.

[00:34:41] MM: I got into code because I wanted to make a portfolio for my design work. I used to be a print designer. So it’s also probably why I still get a lot of inspiration from print design. And I wanted a place for me to put my design so it would help me get a job. And so I took one web design class. It’s about creating websites in Flash. And so I did this really quick Flash site to put my designs out and I have a lot of fun doing that so I kind of kept tinkering with my portfolio site and eventually that led me to start googling how to do certain interactions, like I would see a website, I’m like, “Wait, they made their button like change colors when you hover over that. I don’t actually know how to do that. How does somebody do something like that?” So then I went Google how to do it and I kind of just kept building my knowledge piece by piece by doing that and eventually I figured out that, “Wait, I actually know quite a bit now and I can make a website from scratch.” So it was very organic for me becoming a full-time engineer. It wasn’t something I actually set out to do. It was something that I eventually became because I kind of kept tinkering and kept playing and this is before the code schools or the Pluralsights and Udacities of the world. So I really was just going to people’s websites and doing view source and seeing how they did what they did and copy and pasting code and going from there. So it was a lot of trial and error on my part to get there.

[00:36:19] SY: Good for you.

[00:36:21] MM: Yeah. It took me probably the span of four or five years of tinkering while I was a working designer before I actually felt like I can get hired to do this full-time and really before I even thought about it’s something I could do full-time because I didn’t really think of myself as an engineer for a long time because I didn’t see myself in people who were called those things. So it took me awhile to think that I could do to begin with.

[00:36:50] SY: Why didn’t you see yourself as one of those people?

[00:36:52] MM: I don’t want to get into like the stereotype of everything, but there wasn’t a lot of representation of people who look like me. There wasn’t a lot of black people, black women, women in general. I only see a lot of people who I can identify with doing that kind of work for a while. So it just didn’t really register in my head as it was something that I could do. I can’t honestly tell you what clicked and what shifted in me that let me see that I could do it. But yeah, for a long time, it just wasn’t even something I thought about consciously.

[00:37:25] SY: Do you remember the moment or maybe the time when you decided, “Hey, wait a minute, I actually am an engineer”?

[00:37:33] MM: One of the very first sites I did that was not built in Flash, it was actually built entirely with CSS, I think it got featured on one of those like CSS Site of the Day or something kind of deals. I think the very first time that happened, I was like, “Oh, wait a minute. Other people actually think that I’m doing a good job at this. Maybe I am actually good at this.” It’s kind of sad that it took that external validation for me to get there, but at the same time, it wasn’t something I was actively seeking out. So having someone else kind of like even from afar tap me on the shoulder and be like, “Hey, you’re doing a pretty good job.” That’s the first inclination that maybe I could actually continue to do this and do just this.

[00:38:16] SY: So you mentioned that there are issues of representation in tech and that’s definitely true. We don’t have nearly as many women, as many people of color as we should, is that something that you’ve had to deal with or struggle with as you became an engineer and a relatively high profile engineer at that?

[00:38:31] MM: Yeah. It’s something that I kind of still continue to deal with only in the sense that I’m getting into spaces where I tend to be the only one again and I find that a little frustrating and it’s kind of like sometimes very exhausting to be either the only black person or the only woman or usually the only black woman around and it’s just draining to be the only one regardless of how you identify yourself. Actually up until recently, up until the Hillary campaign, I had never actually worked with another black woman at all in the tech industry or as I was working as a designer. Like I hadn’t actually worked with another black woman at all. I work with other black men, but none other black woman. And so working on Hillary’s campaign, the very first project I did, first one that wasn’t Pantsuit, I should say, the designer was a black woman, the product person was a black woman. That was like a very big deal for me. And even coming here at Slack, like I’m surrounded by black people and black women and that is… I never really realized how much like psychological safety there is and the feeling and seeing other people who just look like you around. Even if I don’t work with them, I directly use the fact that they’re. It just makes me feel so much better.

[00:40:02] SY: It’s so hard to explain that to people.

[00:40:04] MM: It really is.

[00:40:07] SY: It’s just there’s something about it that just makes you feel more comfortable, just like you can breathe. It’s a very interesting feeling to have because I’m always the only person, like always. I’m always the only person and so it frustrates me. I hate it so much. But when I’m not the only person, it’s nice sigh of relief.

[00:40:24] MM: Yeah, so much. I kind of grew up as being the only one in certain areas for a long time. So I guess I just didn’t realize how much low-level tension I always carried around with me and so like it was gone. And I’m just like, “Oh my God! Wait a minute. I can breathe.”

[00:40:44] SY: Low-level tension. I love that. That’s what I’m going to start calling it from now on, low-level tension.

[00:40:48] MM: Yeah.

[00:40:49] SY: Yeah. It’s accurate.

[00:40:50] MM: I didn’t always feel like worked up, but it was always just a little bit of just like a little bit. I mean, there’s a little bit of like just guardedness that I always have. And then when it was gone, I was just like, “Oh my God! Can I feel like this all the time? Does everyone always feel like this?”

[00:41:07] SY: Yeah. So if someone in our audience wanted to do what you do now, what some advice you would give your younger self now?

[00:41:16] MM: Don’t wait so long. I waited a long time before I felt like it was okay for me to do this kind of work or that I waited until I felt that I had reached a certain like unimpeachable level of skill before I actually started to like really put myself out there.

[00:41:35] SY: So do you think it’s important for everyone to learn a little bit about UI and design even if it’s not the focus of their career?

[00:41:41] MM: Yeah. I think that if you’re working in tech, it’s really important to have at least a bare minimum understanding of how the products were all working to build end up being representative to the user. It’s kind of like someone who sells art at least knowing like what the difference is between oil and acrylic paint so to speak. Some of the basics of like visual hierarchy, you know, why something looks good? I think at the very least if we could all learn a little bit about visual interfaces and kind of the rules that govern graphic design and web design, it would help us to articulate why we don’t like something or why we do like something because so many times people will look at interface and say, “Oh, I don’t like it,” or, “There’s something about it that kind of puts me off.” I think that if we all had a similar understanding or similar vocabulary to speak on, it would help to at least articulate what we’re actually feeling about these things.

[00:42:45] SY: now the end of episode, we ask our guests to fill in the blanks of three very important questions. Mina, are you ready to fill in the blanks?

[00:42:53] MM: I am, yes.

[00:42:54] SY: Number one, worst advice I’ve ever received is?

[00:42:57] MM: Oh, don’t worry about it. We’ll fix it later.

[00:42:59] SY: Oh, tell me about that.

[00:43:03] MM: It’s kind of a generic piece of advice that I keep getting whenever I’m worried about something that I’m shipping or worried about something that’s about to launch where it’s like, “Well, it’ll be fast follow,” or, “We can fix that part later,” or, “Let’s just get this part out and we can fix it later.” Later never comes. Later never happens. It either it just sits there and it pokes at me and it irritates me and every time I see it, my eye twitches a little bit or worst-case scenario, it actually leads to a bug and then people were like, “Why didn’t you fix it before we launch?” I’m just like, “Well, I was told it wasn’t a big deal.”

[00:43:41] SY: Yeah, later though. Yeah.

[00:43:42] MM: Yeah. Later never comes later. It never happens.

[00:43:46] SY: Number two, my first coding project was about?

[00:43:50] MM: It was about getting my graphic design work visible to the public. So I made my own personal website. Again, I built it in Flash and I don’t know who I expected to actually look at it, but it was very important to me that I get a website up on my own where I could show people all the work that I was doing. And so my very first project was me tinkering around in Flash, trying to figure out how to make the drawing that I made come to life with code. It was very pink, very, very pink.

[00:44:20] SY: That’s you knew that Pinterest board.

[00:44:22] MM: Exactly. That was it. There you go. But yeah, basically it was pink and white. It was pink and white and nothing else.

[00:44:29] SY: Number three, one thing. I wish I knew when I first started to code is?

[00:44:34] MM: There’s always than the next big thing. Don’t get so distracted by the tooling. I remember I would get so frustrated because I would learn one thing like, for example, I learned how to use Grunt and I was so excited. I felt so accomplished. Grunt being this sort of build system, my task runner. Anyway, I got good at it and I’m afraid I have finally figured out how to make it work and the people are like, “Oh, well, have you tried to Gulp?” And I’m just like, “Wait, what’s a Gulp? I just learned this thing.”

[00:45:07] SY: I just learned.

[00:45:08] MM: And so I didn’t learn Gulp, but I was like, “Okay, I’ll learn this one and this is cool.” And they’ll be like, “Oh, wait, do you even webpack?” I’m like, “Wait. What’s a webpack?” Anyways, it can get frustrating. So always have something the next new thing that everyone’s learning, everyone’s moved on to. So being able to kind of stick with the basics and then use the tooling as a supplement is definitely good.

[00:45:32] SY: Well, thank you so much Mina for being on the show and sharing all your experience and knowledge about user interfaces and pattern libraries.

[00:45:39] MM: Thank you so much for having me. I had a great time talking and hopefully I’ll see you later.

[00:45:50] SY: This episode was edited and mixed by Levi Sharpe. You can reach out to us on Twitter at CodeNewbies or send me an email, hello@codenewbie.org. Join us for our weekly Twitter chats. We’ve got our Wednesday chats at 9 P.M. Eastern Time and our weekly coding check-in every Sunday at 2 P.M. Eastern Time. For more info on the podcast, check out www.codenewbie.org/podcast. Thanks for listening. See you next week.

Command Line Heroes trailer:

[00:46:28] GC: At the end of the meeting, they were in agreement. They wanted one data-processing language. The language which came to be known as COBOL.

[00:46:35] SY: That’s programming pioneer, Grace Hopper. We told her story last season and there was so much love for the tale of Hopper and the early days of programming languages that we decided to follow up with a whole season of amazing language stories. This is Season 3 of Command Line Heroes, an original podcast from Red Hat. And I’m your host, Saron Yitbarek. In Season 1, we tracked the emergence of open source.

[00:47:03] MAN: I think a world without open source is almost bound to be evil.

[00:47:08] SY: In Season 2, we pushed the limit of what developers can shoot for.

[00:47:12] MAN: One day we’re going to put humans on Mars. We’re going to explore even further to find Earth 2.0.

[00:47:18] SY: But we cannot wait to share Season 3 stories with you. Each episode takes you further into the world of programming languages. We’ve been out on the road, listening to hundreds of developers and sysadmins, and your excitement for languages, your curiosity has inspired us to devote a whole season to exploring their secret histories and amazing potential.

[00:47:41] MAN: The language I love the most right now is Python.

[00:47:44] MAN: One language I love is JavaScript.

[00:47:46] WOMAN: Okay. I know this sounds weird, but a language that I love is VAX Assembler.

[00:47:56] SY: There’s no wrong answer. We’ve got COBOL. We’ve got JavaScript. We’ve got C and Perl and Go. We’re taking you to the college campus where basic was COBOL together. We’re diving deep into shell scripts so we can master the language of ops. Around the globe, heroes are using programming languages to develop a brighter, more open future. And we’re all along for the ride no matter where we’re coming from.

[00:48:20] WOMAN: We now see all of these collaborative projects that are interwoven. So it’s quite an evolution.

[00:48:27] WOMAN: Most programming languages, you can just learn a bit and you can really like make it do whatever you want.

[00:48:34] SY: It’s a meeting of the minds between humans and our technologies, a journey that extends the possibilities of programming past anything that’s come before. Command Line Heroes Season 3 drops this summer. You can subscribe today wherever you get your podcast so you don’t miss an episode. Check redhat.com/commandlineheroes for all the details.