MDX Conference speaker interview with Cole Bemis
Chris Biscardi: [00:00:00] Hey, Cole, do you want to take a moment and introduce
Cole Bemis: [00:00:05] yourself? Uh, sure. Um, I'm call I, um, I recently graduated from Cal poly, um, with a computer science degree. Um, and I think by the time this podcast is out, I will have started as a software engineer on the design infrastructure team at get hub.
Chris Biscardi: [00:00:27] Cool.
When is that? Is that
Cole Bemis: [00:00:30] next week or? Yeah, next Tuesday. The 18th. Awesome. Yeah, that's exciting. Yeah, I've been working with the team. I interned with them, uh, last summer and then I contracted with them to work on Octa cons all of this past school year. Um, and I took a break over, over summer break to kind of relax.
Chris Biscardi: [00:00:54] So the intern contracting, uh, employment route sounds pretty interesting. Um, what, what was that like? What was it like getting the internship and then, uh, was the, did the contract come after you committed to sort of working there full time?
Cole Bemis: [00:01:08] Um, yeah, it happened kind of at the same time. That's how I actually got the internship is, is kind of interesting and a little nontraditional.
Um, I. I was on Twitter one day and I saw Diana or broccolini. She posted like a job ad for a design systems engineer on the GitHub team. And I responded, and this was, I had two years left in school at this point. And I, I basically said like, This would be my dream job if I didn't have like two years left in school and she responded and was basically like, um, well, we, we love the work you've done on feather.
Um, we're doing, we might be doing internships next summer. Like keep us in mind. And then I just, I followed up with her and we chatted back and forth a few times. And then when summer came around, they, they opened up internships and. And I got in, which was, uh, pretty exciting. Um, and then, okay. How or how I got the contracting.
So get up actually does like, um, for most of the interns, contracting is usually an option. Um, so when, usually around midterm reviews, uh, managers will talk to the interns about. I'm staying on as a contract or not. And then, um, at the end of the internship, they'll make offers for both contracting and full time.
And those, those offers are like kind of independent of each other. Okay. Yeah.
Chris Biscardi: [00:02:51] That's cool. Um, so you mentioned feather icons, which I'm familiar with, but, uh, people listening to the podcast might not be, you want to talk about that a little
Cole Bemis: [00:03:00] bit? Yeah, sure. Um, feather icons is a open source icon set that, um, yeah, we released a while ago now.
I started them when I was 13 or 14, um, as just kind of like a, a way to learn how to use illustrator, uh, and have, have things to post on dribble well about. Um, and then there was, there was interests, so I put them up on GitHub. Uh, And it's kind of, it's kind of taken off from, from there.
Chris Biscardi: [00:03:33] That's awesome. Um, I'm on the site right now and the sort of the sliders and the stroke with like the, the dynamic color changing of everything on this page is really fun to play with.
Cole Bemis: [00:03:45] Yeah. That was a recent, that was a recent addition. I, I, um, I always knew that like SVGs could do that and I had been able to. Do that in my own code. Cause I knew how to manipulate SVGs, but, um, I, I liked the idea and I implemented the slider thing last summer to show like people who might not be as familiar with how flexible SVGs are, like how you can actually customize the icons.
Chris Biscardi: [00:04:14] Nice. Um, how, how has this distributed, like a, I noticed if you click on one of the icons that sort of downloads the SVG for you. Um, is there like an MBM package? Is it just down like straight up individual icon downloads on the
Cole Bemis: [00:04:27] website? Yeah. So the, the core of the core of the like the project is just a directory of SVG files.
Um, So, yeah. How on the website, you can just download those SVG files directly. Um, and you can actually, you can, if you shift, click on the icon, which most people don't know about, it'll just copy it directly to your clipboard. Um, but we also, I maintain like a small NPM package that basically exposes all of the, the SVG information, um, as like a JavaScript object.
Um, and then some community members have made like framework specific packages. So the most popular one is react feather, um, which makes it pretty easy to use in react projects. But there, there are others. I think there's a list of all of them on the read, me
Chris Biscardi: [00:05:22] sweet. Um, so I know that you've worked on icons, not only with feather, but also on Oxycontins.
Um, How did working on feather impacts the work that you did on icons?
Cole Bemis: [00:05:35] Um, a lot, I, uh, it was nice to kind of have like a starting point and I, I had, um, I feel like I, I learned a lot from, from feathers, so I knew kind of like. What to experiment with, if that makes sense. Like, I, I knew I saw Okta kind of, this is probably not the right way to frame it, but I saw it as a way to like, uh, try again, you know, like just to start fresh and, and think about how I would like design a new icon set.
Um, So, yeah, it was, I made a few like, um, decisions I made that were kind of, um, different from what I did in feather was I, I used 1.5, um, pixel stroke with which, for people who, who aren't icon designers, like won't care about that. But for people who like care about icons, like probably have strong opinions.
I'm not that, um, But yeah, that was, that was kind of a result of. Of comparing the different struck with, to, to the type that we actually use on, on GitHub. And 1.5, just, it felt the best with how we were using them. Uh, Oh, I, I have like way departed from what the original question was.
Chris Biscardi: [00:07:13] Totally good. Um, I'm actually going to dive in a little bit deeper and like, yeah.
So you said that people have strong opinions about like stroke with an SVG icons and stuff like that. Um, what are, what are the opinions like why, why do people care about half a pixel?
Cole Bemis: [00:07:31] Um, people care about half a pixel because, um, Traditionally monitors like one pixel, uh, displays really nice on monitors, but when you do half a pixel, um, it kind of, it blurred the way that the monitors render that, uh, shape it'll like blur the edge, um, which, which looks pretty bad on, on older, uh, non retina displays.
Um, but. Yeah, it's just, it's so hard. It's so hard to get around around that. And we. We did a lot of experiments with it. Um, and we ended up aligning the way that we aligned the, the lines made it so that the outer edge of most shapes like squares and circles, they're aligned to full pixels. So even on, um, non retina displays, they'll be sharp, but then the inside ends up being pretty blurry.
Um, Which is why people, people hate them.
Chris Biscardi: [00:08:42] That's really interesting. Um, so you've, you've built now these two, uh, pretty, pretty massive by my consideration. Uh, icon sets, uh, you sort of built feather. It got you into your internship at GitHub. Then you got a contract and you built Oxycontins or integrated Oxycontins, and now you're going to now you're going on.
So like work actually act, get hub as an employee. Like what, what are you working on? What are you going to work on when you start?
Cole Bemis: [00:09:10] Um, I don't actually don't know, like for sure what my like first project is going to be. Um, but it will probably be related to some of the component work we've been doing. Um, one of my colleagues, uh, Emily plumber, when she started, she started the, um, primer react components project.
And we've been using that, um, more and more. So I'll probably be working with that. And then we're also, um, starting to do dark mode, um, which I think we can talk about, um, I might be doing some work work there as well, and then just. Um, I'm really interested in, in design and developer tooling. So, um, hopefully I get to work on, uh, some new design tools and, and picking up plugins and stuff like that.
Chris Biscardi: [00:10:09] When you say like design and developer tooling, like aside from whatever GitHub thinks that is, right. W what does that mean to you? I know you mentioned Sigma, uh, and I've seen sort of really interesting projects in the past, like react, SketchUp and whatnot. Um, so what, what do you mean when you say like developer designer
Cole Bemis: [00:10:26] tooling?
Yeah, it's, it's a very like big space. Um, I think what I'm excited about is being able to like visually represent code in a way that makes it easier to build things. Um, I think some, some projects that I'm like excited about, um, blocks is, is something that's, um, pretty exciting, um, modules. Um, what, what else?
There's a, there's an app called plasmic. That's doing similar work. I don't know. Did I answer your question? Yes. Okay.
Chris Biscardi: [00:11:18] Um, I haven't heard of plasmic at all. I have heard of blocks, um, which is sort of like a visual block editor, page builder kind of thing. Um, very interesting project. Um, do you see the future of like design, developer, tooling being these kind of like.
Um, drop in blocky, like put things around and then use to kind of like a sketch, like sidebar or a Photoshop, like sidebar to modify pages and stuff like that. Or do you think we're going to head in a different direction?
Cole Bemis: [00:11:50] I don't know. I it's really hard to say, but I feel like, I feel like it's web development needs like its own Swift UI experience.
Um, Cause I've, I haven't worked with myself. I've been like looking for an excuse to try it, but everything I've seen on Twitter, like the, the inner greeted IDE, where you have like code on one side and then the, like the preview on the other. And they're like, like very connected. I don't know. I feel like that's like a really nice way to work.
And, um, I really want something like that for the web.
Chris Biscardi: [00:12:30] Yeah, I have done a little bit of work with Swift UI and the, uh, like the previews are a little bit unstable, but like the concept of having that built into your editor where you can just like write some code and then see it run and then like have that hot loading and also the sidebars and the autocomplete and everything is it's really, really nice to work with.
Um, and I think you're right.
Cole Bemis: [00:12:51] Yeah. I think it. Uh, everyone has kind of their own like workflow. Um, but something like that, I feel I could be accessible to like a wide range of people, like people coming in from, uh, a more development background that might help them like level up their design skills and then people with, uh, more experienced in like design tools, like fig Emma, that seems like a more.
A welcoming like, environment for them than just like a plain text editor. So
Chris Biscardi: [00:13:26] yeah, that makes a lot of sense to me. And sort of like, sort of implies like a, what, what can we actually build into vs code as extensions instead of just having a text editor as well, right?
Cole Bemis: [00:13:38] Yeah.
Chris Biscardi: [00:13:40] Any case where we're starting to run out of time?
So where is there anything else that you'd like to say before we close out the show?
Cole Bemis: [00:13:48] Mm, no, I can't think of anything.
Chris Biscardi: [00:13:54] That's totally cool. Where can people find you on the internet, uh, to find out about your icon work and future work?
Cole Bemis: [00:14:02] Um, they can find me on Twitter. My, my username is called Bemis. Um, and you can find me on, on GitHub at the same username.
You can follow along with the work that we're doing. On the GitHub design systems team@primer.style. All of our, all of our stuff is, is linked there. Yeah.
Chris Biscardi: [00:14:24] Awesome. Thank you so much, Cole. And I'm looking really forward to your talk and I'm the ex con
Cole Bemis: [00:14:28] yeah, me too.