I really had a fun time recording this one. I sat down with Styled Components co-author and passionate coffee lover Max Stoiber. In a matter of years, Max went from dropping out of University (twice) to creating one of the most popular libraries in the React ecosystem. I wish I could say we covered a lot, but his dropout story was so interesting that I just focused on that for the majority of the interview
¯\_(ツ)_/¯. If you’re new to the industry or just want to get more involved with OSS, this interview will be especially beneficial for you.
const Tyler = 'Tyler McGinnis' const Max = 'Max Stoiber'
Tyler: Hello, welcome to the third episode of the Tyler McGinnis podcast where I decode the implementation details of successful software engineers. I had a blast with this one. I sat down with Styled Components co-author and passionate coffee lover Max Stoiber. In just a matter of years, Max went from dropping out of University (twice) to creating one of the most popular libraries in the React ecosystem. I wish I could say we covered a lot, but his dropout story was so interesting that I just focused on that for the majority of the interview. If you’re new to the industry or just want to get more involved with OSS, this interview will be especially beneficial for you.
Tyler: What I find interesting about your story is you’re pretty young.
Tyler: And you’ve gotten pretty far in your career pretty quickly, right? But one thing I don’t know about you that I’ve never really heard is your back story. I think because you’re not in the states, that just kinda gets overlooked. So I want you to start from maybe like ten years ago. Or whenever really you started getting into programming, and in more detail than you’re probably comfortable with, tell us how you got from there to where you’re about to speak at React Rally in four hours.
Max: I really started getting into programming with HTML and CSS because when I was in high school, we had to take a computer class, right? And in that computer class, we made a website because our whole school, every pupil sort of had a pupil website, right? Where you could click on the school website, you could go to pupils and you could click on a pupil and they’d have their own space, right?
Tyler: Interesting. Yeah.
Max: Which was pretty cool. That sadly doesn’t exist anymore at that school. But we did a bit of HTML and CSS and that’s what really got me captivated. And I spent a lot of time on that tiny website that nobody ever saw.
Tyler: Yeah. What year was this?
Max: I was probably like 14, so 6 years ago.hj And then, so I had like calendars and visual calendars and there was a guest book and all this cool kind of stuff that you did when you learned HTML and CSS. Gotta have those marquee tags and blue tags and all that stuff. And then I kind of forgot about it. I didn’t really do much programming anymore but I started getting more and more into computers. So I played Minecraft a bunch and through playing Minecraft, I got into servers because I wanted to run my own Minecraft server for my friends and myself because, obviously, that’s what you do, right?
And so I tried setting up a server and obviously, it just failed because that’s hard. But through that whole gaming thing, I got more and more into, “Hey, I can download this mod and I mod my thing. How do mods work?” And like, “How does all this even communicate with each other?” But I didn’t really get into programming, still. It was more like, “Well, I want to play Minecraft with my friends, so I’m setting up a server,” right? And then my final year of high school rolled around and I had to write a paper. Currently, at all schools in Vienna, when you graduate high school, there’s a standard exam for every pupil in all of Austria and you have to write a 40-page thesis paper about a topic of your choice. And the idea is to get people more interested in publishing papers, basically, plan to go on to higher education.
And I didn’t know what to write about because, obviously, you can’t write about Minecraft or League of Legends, for that matter. So that was out of the game. But I thought it’d be a great chance to learn more about how the internet works. So I wrote about TCP/IP, right? I wrote about how the hosting stack works and I wrote about how the TCP/IP stack works and all the different layers. And at the end, it took me like a year to write that, that 40-page paper. And at the end, I had this like huge paper, very theoretical and very dry about how exactly TCP/IP worked. But I’d never really used it. It’s not very practical knowledge, right? It’s great that you know what layer three does and how the bits are transferred and stuff but it’s very theoretical and dry.
Tyler: So what’s interesting so far is you went from very pragmatic to which it’s like, “I just want to build a server for my friends,” right, to very like, “I’m writing a paper for school,” which is essentially the opposite end of that spectrum, right?
Max: For sure, yeah, yeah. So that was pretty boring. I didn’t really enjoy it but then you have to give a five-minute…defense for that paper, is that an English word?
Tyler: Yeah, yeah.
Max: And so, like in front of, like, your teacher and the director of the school and you have to defend your paper and talk about what you wrote about. And I realized that in five minutes, I couldn’t really talk a lot about TCP/IP because it’s a huge topic, right? And so what I did was I illustrated TCP/IP with an email I sent to sort of get the audience engaged, right? I talked about how when you send an email, what happens in the network? How do all the layers affect email and how do we get sent over, which headers go, data, etc, etc? And through that, I realized that I actually kind of want to use this more pragmatically because it’s very dry and very boring.
And so I set up all of the simple things you could do with TCP/IP, which is a web server. Because I wanted to understand how the internet works. So now I knew how the internet works, so I might as well use that knowledge. And through setting up the web server, I realized a web server without a website is pretty useless because what are you doing with a web server? So I put a [inaudible 00:04:36] HTML file into that directory and then just really never stopped tinkering with that website, you know? That’s really what got me into it.
And then I tried…so I thought, I’m interested in computers, so I’ll study computer science because that’s what people do. But I started studying computer science and it was super boring. I really didn’t enjoy it. I felt like it was too theoretical again, right? It took away everything I loved about programming and made it very boring and dry and about data structures and databases and, like, binary numbers and stuff, which I didn’t really care about at the time. And so I studied for like three months but really, what I did wasn’t studying. I mostly just programmed HTML and CSS because that’s what I wanted to do, right? I just experimented with a bunch of different things and built stupid websites because that was more fun than doing the course work. And then I applied for an internship in London with a company called Animade. And for some reason that’s still unknown for me, they accepted me and I joined them. I moved to London for three months and worked as a front-end development intern.
Tyler: And this was how long ago?
Tyler: At this point, were you still…was this like an internship or…?
Max: Internship, yeah. Total internship. And then, they were like, “Well, so Max, we’ve already told you a lot and we don’t really know what else we want to teach you, you know. What are your interested in?” I was like, “I don’t really know. What’s going on right now? Like, what’s the hot new thing?” And James Chambers, the sort of owner of the business, went, “Well, there’s this cool new framework that’s called React and something with Flex or something. And we don’t really know how it works but we might want to use it on some of our projects. So why don’t you build something with that?” And that’s what really got me into React. So over a month, I built an app with React. And from there on, I basically just tried making it as a developer, right?
Tyler: So did you drop out of university or…?
Max: I totally dropped out of university. Then…
Tyler: How did your parents…?
Max: They hated it.
Max: I lied to them and didn’t tell them for the longest time. So the internship was in January, February, March, I think or in February, March, April. And then basically, I tried going back home and becoming a freelance developer, right? I wanted to do work for real clients but nobody hired me, right? Nobody even remotely considered hiring me even for tiny jobs. So in September, I was like, “Well, I haven’t done anything for the past few months except work on my own shit and I’m obviously not getting any freelance clients anytime soon. So I should probably go back to university. Apparently, you still need a degree.”
So in October, I started studying computer science for the second time, which my parents weren’t that happy about. And then comes around December Two-thousand, must have been 2015, yeah. And in December, my React boilerplate, which I’d created for sort of myself, right? I’d done a few React side projects and I thought that it’s stupid that I have to do the same thing over and over again because of all the setup, so I just put it on GitHub. And somebody posted that, just found it and posted it on Hacker News. And I literally woke up one morning and the Boilerplate had 500 stars where when I went to bed, it had 50. And I was like, “What the fuck is going on? Why does this Boilerplate suddenly have 500 stars? Whoa, what is happening here?” And I tweeted and nobody knew, right? And the stars just started rising, rising, rising and I was like, “What is going on?”
And then somebody tweeted to me, “It’s on Hacker News,” and it was on the front page of Hacker News for, like, 13 hours, right? Just by pure luck. Like, I didn’t even do anything. I just got lucky and somebody posted it and it got on the front page. And then after like three days, it had 2,000 to 3,000 stars. And then everybody wanted to hire me. So I dropped out of university again and did a bunch of interviews around companies in Vienna, the agencies in Vienna. But didn’t accept any jobs because they all viewed me as a junior developer and wanted to pay me very little, where I felt that I was a junior developer and that was fair but I also knew that I could learn very fast and I knew that I wouldn’t be a junior developer for very long under the right mentorship.
And so I thought it’d be stupid to take a cheap job if I…I didn’t really need the money because my parents paid for my apartment. And so it didn’t make sense for me to go work for no money at a company that I didn’t really care about. So I didn’t. I basically still didn’t work and then just did open-source a bunch. And then I flew to San Francisco in February of 2016. And I flew there because they were cheap like six months before that. There were cheap flights and it cost, like, $400 to fly back and forth. And I was like, “I’ve never been to San Francisco, it’s supposed to be cool, might as well just go,” you know?
Tyler: It’s a dream city.
Max: It’s a dream city, exactly. So I’ll just fly there in six months. And then three months before my flight in December, Facebook announces ReactConf. And it’s on the day I leave.
Tyler: I remember that, you tweeted me. I remember you tweeted me.
Max: I was so angry. Yeah.
Tyler: I believe it was like, “Why are you just starting?”
Max: That was so annoying. And so I flew on a Monday but I hung out with everybody that was in the city before then. And I met Jed Watson, who is the creator of Keystone and Elemental UI and has this company called Thinkmill. And we started chatting. I was in San Francisco with my friend Nick, who worked at Stripe. He got like the open-source grant, I think, and worked there for three months. And I was talking to Jed about how cool it is what Nick is doing, working open-source full time. And Jed looked at me…
Tyler: This in the graph?
Max: In the graph, that’s right. In the graph. And Jed sort of looked at me and went, “Well, do you want to do this as your job? Like, do you want to be employed as an open-source developer?” And I like, “Yeah. Hell, yeah. I’d love to do this. For real?” And he was like, “Yeah, sure. Okay. Come work for Thinkmill as an open-source developer.” So I joined Thinkmill as an open-source developer and basically spent a year doing open-source and nothing else.
Tyler: Did you move to Australia or did you…?
Max: No, no, no. So I’ve always been in Austria. I just flew down there once so I’d be down there for, like, months at a time.
Tyler: Have you ever told this story in depth before?
Max: I don’t know if I’ve told this in depth before.
Tyler: That’s amazing, yeah. I had no…I mean, I knew some of the steps…
Max: Yeah, yeah.
Tyler: …and I want to dive into this because this is super-interesting. So you were at a point where you could have gone back to college or you could have just done open-source?
Tyler: So a motto that I try to live by is like, “Always be choosing between a good thing and a great thing”, because then it’s like no matter what happens, you’re good. If you would’ve went back to college, like you still would’ve been fine, right?
Tyler: What were the reasons that you chose open-source? Because with that you have, if I’m understanding correctly, you have like your parents, right? It’s like, “Go to school,” right, like you have that whole thing hanging over your head. So with that, like what were the key factors in that?
Max: It wasn’t as much a conscious decision. I just didn’t do any coursework anymore, right? You know, like it just turned into, “Oh, shit. Maybe I shouldn’t go to university anymore.” I didn’t tell my parents until way down the line again. They felt that for the longest time that I was at university for the second time and took it for real.
Tyler: So you were waiting until you were successful, can I put it that way?
Max: Yeah, yeah.
Tyler: Like, ask forgiveness instead of permission?
Max: Kind of like that. They were very angry with me, though. But by now, they understand. They respect the decision. But because the React Boilerplate got really big and because the Boilerplate, there were lots of questions, right? Where most of the React Boilerplate issue trackers had questions about React or Redux or Redux Angular. Any of these technologies that we have in the Boilerplate, right, they asked us, “How do I use this to build my app?” We kind of like [inaudible 00:12:00], I guess. And I was just on GitHub 24/7 answering issues, right? That’s just what I did. I would just spend all of my time on GitHub answering questions by random people who are using the Boilerplate. And I spent all of my time making the Boilerplate better, exploring new things to put in the Boilerplate. And I still kind of went to university but not really. And then it just kinda ended up in me dropping out again. It wasn’t like a, “Oh, shit, I could do this or I could do this,” it just sort of, I just did what I did and then it ended up happening this way.
Tyler: That’s amazing. So, all right. So at this point, you’re working with Jed, doing open-source stuff.
Tyler: I know you did…so you did the Boilerplate, you did a few other open-source projects. I’m assuming the biggest one so far has been Style Components, is that right?
Max: The React Boilerplate is quite a bit bigger than Style Components in terms of a couple of metrics.
Max: But that being said, Style Components is more…React Boilerplate was, I used it to scratch my own itch. And Style Components does too but Style Components, I think what I wanted for the library was for it to not be irrelevant. In the sense that, whatever comes after Style Components, like I’m not arrogant enough to think that there won’t be something else than Style Components, right? Obviously, there will be more innovations and I can’t wait for these innovations. But what I want these innovations to say is, “Okay, we looked at the sort of concept behind Style Components, we looked at how Style Components the new ideas that Style Components pioneered and we’re changing it,” right? Whatever comes after it should refer back to it. It should go, “Rather than completely discarding the idea and doing something…”
Tyler: The bible of Styling Components, I guess, right?
Max: Yeah, but more like, we said we looked at all these other libraries and they didn’t work for us, so we built this. And we we have this whole concept of styling and components and shit. And whatever comes after this, what I wanted for Style Components to be is something where whatever comes after says, “So Style Components did this and this. But we think that was a bad decision, so we’re doing that and that.” And I don’t mean that in like a sort of small sense where somebody goes well, they read…see this as strings rather than objects. I mean that in whatever comes after Style Components, like the next radically different idea, right? Where Style Components was a radically different idea with the whole binding styles components.
Tyler: Yeah. So take me through the process of how Style Components came to be. And then from there, yeah. Talk a little about…I guess, just with that answer, encompass like why it exists, what problems it’s solving, kinda how it fits in the React ecosystem. Is it just for React? Like kinda those things.
Max: So it all started off with Elemental UI. Jed kicked off this node.js content management called Keystone, which I was originally tasked to maintain that. That was my job, basically. And the Keystone Admin Interface, it was rebuilt with React. And that React app that we used as the admin interface, where you could like add posts and stuff, those components we made as a separate library called Elemental UI. And so the Elemental UI component library was pretty great. We used it on some projects, I think, as well as Keystone, the admin interface. But the issue we ran into when we tried to use it outside of Keystone and some other projects was that it wasn’t very adaptable. The whole component library was built with Less. And so users who were using Elemental UI had to use Webpack and they had to use CSS loader and they had to use Less loader for them to be even able to render a component.
Over time, it sort of got to the point where we were like, “Well, we don’t really know what we’re gonna do here. Like, we don’t really want to create another library.” In fact, we really didn’t want to create another library because there’s already 50 out there. But also, nobody seems to want to work with us on this problem. Nobody seems to have the same use case. And then I met Glen. I flew down to Sydney and I was there for a month, I think. And Glen Maddern, one of the…well, the co-creator of CSS Modules lives in Melbourne. And he came over to Sydney for a couple days and I met him.
And we met over a whiskey and we started talking about CSS because he’s the creator of CSS Modules and I was thinking about that in the back of my head. And he mentioned some similar issues where he was building apps and he wasn’t quite happy with theming and how he could adapt his components. And we’d also both kind of found the Style Components pattern, not Style, the Style Components pattern that Michael Chan [inaudible 00:16:33] gave a great talk about a Full Stack Conf where you have components that style things, right? Like a greet component or a rote component. So you basically make everything a component, which works really nicely in React apps because React fundamentally is just components. So everything stays in React and it just feels really good to use, you know. And we both use that pattern in our apps.
And we started thinking about how you could build something like CSS Modules or a CSS and JS library that made that concept that concept, right? How do you enforce something like that? How do you make people do that? And we didn’t get anywhere and then the next day, he came to the office and we just sat next to each other, basically, with two open laptops and we typed out API ideas for a new library, right? And we tried figuring out what could a library looks like that enforced this Style Components concept?
And it started out very weird where Glen had some ideas where you would write CSS with functions, so every CSS rule was a function. So you had, like, a font size function and a margin function and etc.. Which was very weird and I still don’t understand why he went there but eventually, we realized that you could have a function that returns a component and you pass in styles. And that was really the first breakthrough idea where we went, “Wait, this could actually be great,” because if you force people to write their styling and it returns a component and they never see the class name, they’re forced to write style components like a greet component or a rote component.
So if you were to put a function in a normal temperate literal, it would be two-stringed or…yeah, I think two-stringed. And you would just get function…yeah, literally a string, right? Which is not what you want. But when you have a tagged temperate literal, you get the actual function, meaning we from our style.div function can call this function, right? We can call this piece of code and make it do something, right? And then we realized that we could do dynamic styling very beautifully with that because since every piece of styling is a component, you can pass the prop to that function. So suddenly, you can adapt your styling based on the property’s paths to the created component. And that was the second really big breakthrough where we went, “Wait, this could actually work out. This could actually be a thing that’s nice to use, you know?”
And then we started tackling theming. And theming, we knew it would be context-based, based on React-router and Redux and all these libraries that were using context under the hood. We knew we wanted something context-based to be able to update it dynamically, right, and on the fly. And so, I built this theme provider component, which was a pretty easy decision because that’s what…for example, Linux has the provider component, right? But rather than passing a story, you pass a theme and it’s just provided to all of your components. And then the question was how do we make it acceptable in the function, right? Like, there were different ways of doing it. We could have made it two arguments, so the function had two arguments, props and theme. But it’s super-annoying when you don’t want to use props but you do want to use a theme, right? You’d have to sign an unused variable, which is not what you want to do.
Tyler: [inaudible 00:21:06]…or something?
Max: Yeah, which is annoying. So we thought about using EEL [SP] 60 structuring to fake named arguments, right. So we could pass an object to every function that had a props key and a theme key and you could pick which of those you wanted with a curly bracket, right? So you choose either props or theme or both or none of them. So that would have been nice. There were two problems with it. One, it’s a new API that people might not understand and tagged temperate literals are already pretty weird so we didn’t necessarily want to introduce another layer of confusion there. But in second, and that was a bigger factor is, what happens if you don’t use CSS? What do you call that what we pass in there? It’s props and theme but, like there’s no name for that object.
So that didn’t quite work out either. And then we realized that we could just pass theme via props so that it would be props.theme. And that works out really nicely because that means you can use the React APIs to set stuff like default themes or writing it, right? If you want to send a default theme for a style component, you just go component.defaultprops, theme equals whatever your default theme is, right?
Tyler: So is there an example of when Style Components isn’t the best choice?
Max: If you’re not using React, Style Components is probably not the best choice.
Tyler: Okay, so it sounds pretty coupled to React?
So for me, when we built the first prototype of Style Components and I tried it—because at that point, we had tried the library and I tried building something with it—and it just felt really great to use, right? To me, just the feeling that I have in writing Style Components code just was great. That’s why I push it so hard because I think it’s a great feeling using it. But I think if you don’t have that experience, if you feel like it’s hindering you or it’s in your way or it’s annoying, then you probably shouldn’t be using it, right? Because there’s other there’s so many other CSS and JS frameworks, if this one just doesn’t feel nice to use, use another one, you know? Or maybe don’t even use CSS and JS if at all if you don’t want to.
Tyler: If you were to design a curriculum for like a boot camp—it’s like three months, you go there, you learn to program, right—what would that look like?
Max: That’s a good question. What I like about the web is how easy it is to get to build something that’s useful. With very little knowledge, you can put something out there that’s useful for people. You don’t have to publish in the App Store, you don’t have to package it, you don’t have to do anything, you just write your HTML and put it on a website. And now there’s even hosting companies like Zeit where you just drag and drop and you have a website, you know? So I would definitely start with the web. I think that’s what got me really motivated about programming. This is probably influenced by my story but for me, the web was really what got me passionate about programming as a career and programming as the thing I wanted to do. I did some Java in university and I did well in it. But I didn’t like it because there never was anything useful.
Tyler: Yeah. That’s a pretty common sentiment, I feel like.
Max: Yeah, yeah. You never get anywhere where you’re building anything useful. Whereas with the web, it’s hard not to build something that’s not out there because everything on the web, it’s so easy to put something there.
Tyler: I think what I always say is like, “When you’re first starting, you just wanna share something with your mom.”
Tyler: You gotta say, “Go to this URL and like, look what I built.” With the web, I don’t know if there’s another, like an easier platform to do that.
Max: Yeah, agreed. So I think starting with the web makes sense. As you get further along as a developer, it makes sense to know the history because…for example, if you’re using React, if you’re a junior and you’re learning React and you built something with it, you go, “Why is it so complex? I could do this so much easier. Why do I need to use React?” and you feel like you’re fighting against the framework. But if you know the history and you know how people started out with MooTools and product.js and JCreator and then got into Backbone and Angular and then eventually React came along, the purpose that these frameworks solve isn’t very apparent when you’re not aware of the history. They just feel like, “Well, I mean, I’m using it, but…”
Tyler: You’re doing it because everyone is telling you to do it.
Max: Yeah. You’re not doing it because you’re having a problem, right, that you want to solve. You’re doing it because you’re told to. At the same time, if you’re doing a boot camp I don’t think it makes a lot of sense to teach all the history because that’s a very long time, you know? It kind of, I guess, depends on what you’re trying to achieve, where you could do a boot camp where you teach, where you go quickly through the whole history, right? Where you start out, “Hey, we’re gonna build a dynamic app with JCreator. And hey, we’re gonna build a dynamic app with Backbone.” Not so that the people understand what Backbone is and how it works but that they know why certain things change over time and why React, for example, is the way it is or why Vue is the way it is or any of these more modern frameworks.
I think if I wanted to get productive within three months, I would probably learn React. I would probably spend two months learning HTML and CSS, building non-dynamic websites, whatever that looks like. And then start getting into real web apps with React just because React, A, because I like React. But B, because there’s the biggest market out there for jobs, I think. You’d probably have the best chance getting hired after three months.
Tyler: All right. So we’re gonna go into rapid fire mode, okay? I have a bunch of questions I want to ask you but we’re running out of time. So keep the answers between like 10 to 15 seconds, okay?
Max: Got it.
Tyler: Where do you want to be in three to five years?
Max: I founded a startup, so I want the startup to be successful.
Tyler: Perfect. What’s the startup about, real quick?
Max: We’re building a platform for large online communities.
Tyler: Beautiful. What’s the worst advice you consistently hear in our industry?
Max: The worst advice I hear? Don’t listen to any thought leaders. They don’t know what they’re doing.
Tyler: That’s beautiful. What makes Vienna’s tech scene special?
Max: The community in Vienna is incredible. It’s very tight-knit, everybody knows each other. And I organize a React Vienna meetup and every single time I go there, I’m like, “This is family,” right? And everyone is super-friendly and welcome to newcomers and it just feels great, you know?
Tyler: What’s your favorite open-source project besides Cero and…?
Max: My favorite open-source project? Prettier. It makes my life so much easier.
Tyler: What’s your favorite memory throughout this whole process?
Max: My dad…when React Boilerplate exploded on GitHub, we were skiing, we were skiing all day, And so all day long, whenever we went on a lift or in an escalator…I don’t know what you call it in English, like the thing that picks you up the mountain.
Tyler: Like the gondola?
Max: Oh, yeah. Gondola, thanks. I was refreshing GitHub to see how many stars I had and my dad was like, “What is this? Why are you doing that?” And I explained GitHub to him and I explained what was happening. And since then, he’s checking GitHub every single day. He’s the first person to notice when Style Components and React Boilerplate reaches a new milestone, right?
Tyler: And he’s on Twitter, right?
Max: Yeah. And he tweets me all the time.
Tyler: And the thing is I know he’s gonna listen to this, so shouts out.
Max: Yeah, a shout-out to my dad. Anyway, so the story is that after we got back home, it was my birthday. And so he got me a GitHub shirt and a GitHub sticker for my birthday.
Tyler: There you go. That was beautiful. Well, all right, we’ll end it there.