Ep. #23, Introduction to Downshift and Glamorous

Brian Douglas: Coming through at me live through Zencaster is Kent C. Dodds. Kent, you want to say hi?

Kent Dodds: Hi there. Thanks for having me on.

Brian: It's a pleasure to have you on. I know, it might have been months ago you had tweeted out a tweet of one of the podcasts that I tweeted out and I was like "man, I should have kept Kent on. And now it's real, real life."

Kent: Yeah, bringing it to pass. Twitter, where amazing things start, of course.

Brian: Yeah, it's good things and bad things on Twitter. But that's besides the fact. So Kent, who are you and why are you here today? Basically, what's your day job?

Kent: So, I work at PayPal. I do a lot of Javascript stuff, and I'm involved on the TC39. I'm an instructor on Egghead and Front End Masters. I'm a Google Developer expert. I do a lot of open source stuff. I totally love Netlify, the JAMstack is awesome. Yeah, and maybe those are a couple of reasons why I'm on here today, I guess.

Brian: Cool. That's quite the list of things and part of the reason why I wanted you to come on because I know you do Javascript and you do stuff at PayPal and you mentioned TC39. I know you have a family outside of work too, that's something that's developed even before your career. But so how do you balance all that into that whole paragraph that you just listed?

Kent: Yeah. That's the question that I got a lot. I even had somebody interview me for a blog post and I can give you a link to that. because yeah, I do a lot of open source and I do a lot of involvement in the community and teaching and stuff. First off, I just want to say that I am in a really privileged position because I don't have to worry about a lot of things at work. I just have been really lucky that way I guess.

And so I can focus on doing pretty much lots of the things that people know me for, even while at work. Lots of the open source stuff that I do is going to be relevant to work and so I can do it during work hours. And I even will teach my co-workers at PayPal about different technologies and things. And so I will spend some of my work hours developing that instruction content as well, preparing to teach my co-workers.

I think a lot of people do this stuff already. You code for your job and you teach your co-workers. You have a workshop or you give a talk for your co-workers or something, for a lunch and learn. I think what makes it seem like I do so much more is because I spend a lot of time making as much of what I do open and public.

When I give a workshop to my co-workers or if I give a talk or something I'm going to record my screen, and I'm going to put it up on Youtube. If I've got a project to work on at work, PayPal's very interested in being involved in the open source scene, and so

It's pretty easy for me to finagle my way into a situation where the solution that I'm building here with just a little bit of extra work could be a useful open source project for other people, so I'm going to just put that extra work in to make it open source.

And now all of a sudden, you see the many hours of work that PayPal has paid for, and you see that and you think, oh my goodness, he has a full time job in addition to this? No, it's not really that. It's just I'm able to do, I guess combine that effort into one. And so, yeah I do a lot of stuff. I have four kids, just had my fourth a couple weeks ago.

Brian: Congratulations.

Kent: And I'm married and I have church responsibilities and stuff so I am a very, very busy person and I do a lot of stuff. Take it all with a grain of salt because some of it I can kind of work into my day job. That doesn't just naturally happen. It's not like my boss is begging me to take all my work and open source it. I do have to put effort into making that happen. But I think that people can do that, and I think that people should try. So, anyway, if you're looking for take aways, I guess that's one.

Brian: Yeah. It reminds me of the Talk that Max Dorber did at React Raleigh about contributing to open source. And right at the beginning, he kind of pulled up the curtain about all his open source contributions and showed his graph said, see all those green dots? Well that's when I was working full time on open source, and that's why I had so much time to do it.

I guess the moral of the story is if you want to do open source, see if your work will, not quote sponsor you, but actually appreciate the efforts in actually making things open source. I know not everybody's in that position, but that might be some sort of aspiration someone might want to get to.

Kent: Yeah, and I think that people, when they face a hurdle in an open source project that they're using. We'll take, I don't know, Redux, for example, just random library, X library.

If you face a hurdle, I think lots of people just try to find a workaround immediately. But I think a better way to approach that is to go to your boss and say "hey listen, we've got this problem with this library. I could work around it or I could go and improve the library in some way, and then we don't have to have that maintenance cost of this weird workaround."

So I think even not just turning the stuff you're working on and creating new open source projects but also contributing back. So that not only do you have to do this work around, but other people probably have to. And so if you can contribute back, then you don't need to worry about the workaround of it all. Just asking. Lots of people don't even ask their boss if they can work on open source.

One trick that I have in addition to asking is not asking. And I just figure that it's part of my job to deliver a good end result, and if that requires that I give some of my code or some of my work time to this open source project then that's just part of the job. I realize that some companies do protect their intellectual property and every finger typed on their keyboard is going to be their intellectual property and so you want to double check that.

But I've been in a pretty good position and I think that more and more companies are getting more comfortable with their employees contributing to open source. If you haven't asked, ask. And if they say no, then shucks. You could always follow the advice from Softskills Engineering and quit your job. But yeah, anyway, that's just a bunch of words. Sometimes I can ramble so you can interrupt me if I do that.

Brian: It's good insight, because I think a lot of people are in the position where they don't know what's the first step or how would I even convince. And I think one of my first engineering managers, or one of my earlier engineering managers was do first and ask for forgiveness later. So if you have to use a third party library or if you need to do some open source work to make sure this is going to pass code review, go ahead and do it.

And if your time was used incorrectly, you can always apologize later, but I think if you're able to solve the problem, I don't think many people, unless you do have some sort of licensing issue, most companies or managers aren't going to say "oh no, throw out that code. I don't think you should have done that." They're going to say, "wow that works. Let's ship it." Speaking of licensing. Were you guys affected at all with the whole React license, with the recent change? Is that better for you?

Kent: That whole licensing thing is just kind of funny to me. All of a sudden all these developers become lawyers and know exactly what this patent thing is. That was so stupid to me.

Yeah, PayPal uses React, Apple uses React. Google internally uses React. All of these huge companies with amazingly intelligent lawyers are using React and I guess it's OK. But then these little startups are like, oh freak, we can't use React because the patents thing.

I think most of the fear and uncertainty and doubt that was being spread throughout the community was from people who don't use React and were just looking for an opportunity to slime ball it.

And so, that was just super frustrating. I'm glad that it's MIT now just because it's easier to just. You know, the patents thing, who cares. Whatever, it's done, whatever. I really didn't care one way or another, personally. There's a blog post called, "Why The React License Is A Paper Tiger" or something like that, from an actual lawyer who is like, yeah this isn't ever going to be a problem for anybody.

And then, I think that same guy, he's now a developer, software developer. His name is Dennis Walsh. After React moved to MIT, he posted a new blog post. I haven't gotten a chance to look at it yet, but the general vibe is well now things are actually a little bit worse, because if Facebook does have pieces of React patented then they can sue you immediately rather than waiting until you sue them.

I think some people have gone through Facebook's patents and discovered that there's nothing in React that's actually patented, so nobody should worry about using React. I think the whole thing is just kind of stupid and people should move on and come up with more useful and helpful reasons to use something else. Good luck to them.

Brian: Yeah, yeah. I'm glad that whole movement's passed and I guess to zoom out for the listener too as well. React and Facebook's entire open source libraries all switching to MIT from the BSD licensing? So, if you are interested in that, can't miss and there's a lot of blog posts you can catch up on that or tweet storms.

Kent: Only read blog posts from people who are actually lawyers, though. There are way too many blog posts from these developers who think that they know something about complicated patent law and it's just so dumb. If the first couple lines don't say something like, I am a patent attorney, then I stop reading. because it's just going to be somebody who doesn't know what they're talking about.

Brian: A lot of people who think they know a lot about certain things, but mainly because they read blog posts from other people who are not attorneys. But anyway, moving on, I wanted to talk more a little bit about your role at PayPal. So there are a couple libraries I've noticed that you've open sourced since being there, but I know you've done a lot more outside of those two libraries.

So, can you talk about Downshift and Glamorous? How did you get to the point where you needed know you needed to make these libraries and then how did you get to the point where you finally decided this should be open sourced?

Kent: Yeah, cool, good questions. So, Glamorous came first. It was back in April, is when I released that, 2017. I actually have a talk where I kind of give the history. You can find that at KenCDodds.com/talks. But I was given a task to make our landing page more flexible. And so the landing page I'm talking about is the send money landing page. So if you go to PayPal.com, log in and click on send and request money, that's the landing page I'm talking about.

We call it the funnel page and it's highly experimental because you can do tons of things. You can send money, you can request money, you can send money internationally, and you can send a gift and you can do all kinds of different things on that page and so because that is such a critical page it's really experimental. We'll show these links, or we'll show this description above the title.

Everything about that page is really experimental. And so every time we added a new permutation to this experimentation it just added so much more complexity to that page. And one of the biggest problems when I came to add another piece of dynamic capability to that page, one of the biggest problems I had was with the CSS, because I didn't know whether I should duplicate some CSS or amend to some existing CSS, because there were so many different permutations that were using this CSS that it was really difficult for me to know what impact my change was going to make on the rest of the pages or the rest of the permutations of that page.

And so that was a real frustration. It took me like two weeks just to add another link based off of another experiment. And so then they came to me again and they say "hey we need to add another thing. And I said, listen it's going to take like two weeks again to do this. I didn't learn it and now I know everything about that page. Nobody knows anything about that page. It's really complicated." So they said, "OK, we don't want that. We're going to keep coming to you with these things. So let's sharpen the saw a little bit. We'll revamp that page to make it more flexible."

And so as part of that process of making it more flexible, one of the biggest problems I wanted to solve was the CSS, and this is around the time that Styled Components was really popular and so I decided to just try it out for the first time.

And I loved it. I just thought it was the coolest idea to be able to make components that carry their styles with them and they compose together just so nicely. We were using Aphrodite in part of the app, and so I was thinking oh, "CSS in JS is the bomb, I love it," and so Styled Components was just a really nice. It was basically like the coolness of Aphrodite but coupled with React, because you could make components out of these styles.

To make a long story a little shorter, because I do tend to ramble, I like Styled Components but I had a couple problems with it. I wasn't huge on the string syntax. I know that it's like normal CSS. A lot of people think that's like the killer feature of Styled Components, but I actually liked the object syntax better. And then the other, one of the other biggest show-stoppers for me was the size at the time.

Styled Components was still shipping post-CSS to the browser, and so it made it 72 kilobytes or something, it was huge. It was also very slow because I had to parse all that in Javascript to create the CSS it would inject. It would apply auto prefixing. Lots of these problems have been solved, but one problem, as far as I know, that has not yet been solved is the ability to do right to left conversion automatically for the CSS.

For apps like PayPal where we need to support all kinds of languages, lots of these languages are right to left languages like Hebrew or something and that makes it difficult with CSS because sometimes you'll add a margin to the left because it makes it look nicer with the way that everything else is styled, but if it's reading right to left that looks funny. There are tools to automatically change it so it'd be margin right instead.

And so I'd already built a convertor for Javascript objects that represented CSS. It's called RTL CSS JS, that I was using for Aphrodite, and so I wanted to be able to do something like that with Styled Components and that would have just added even more performance problems, and weight to do something like that with Styled Components with strings. That's when I decided to kind of build my own thing.

And by this time, to me this was clearly something that was generic and useful enough, so I kind of built the initial thing in a single file in my project, all the while knowing that I was going to open source this eventually. And once I had something that was working, then I just put it into an open source project and published it. So that's the story of Glamorous.

Brian: Yeah, it's nice to hear the background, because I don't know. I'm sure you wrote a blog post about that, but I don't think I caught up on that. But it's good to hear that you actually had a concrete problem to approach in a nuanced way. I'm a big fan of Styled Components. I don't have any sort of limitations, because mainly I'm using on the greenfield apps.

Netlify itself, it's not as old as PayPal, so we don't have tons of legacy things that we have to bring along, but it's good to note. I still have it on my list to check out Glamorous, hopefully for a future project. I assume Downshift was a similar story?

Kent: No, it was still actually the same project, just a different thing I needed to do. Send money flow for PayPal, we actually had three implementations of an autocomplete component that were committed to our repository. We weren't using a third party thing, because we just had so many. We would start with a third party thing, then we'd had to fork it to account for our use cases a little better. Which was really annoying.

And so having three implementations was frustrating and then we needed to take one of our autocomplete components and move it over to this other place and it was kind of coupled in the place that it was, so I'd have to make another implementation.

So it was like "OK, I'm done with copy pasting all this autocomplete code." And so that's kind of where Downshift came from. It was just this idea of, " I need to make a component that takes care of all the common logic that all these autocomplete components need, but allows me to render it however I want, because they're all going to render slightly differently."

So, I was also inspired by Ryan Florence's talk called Compound Components, and it's just fantastic. I definitely recommend go search on Youtube for that. Yeah, the idea there is fantastic. Downshift, I actually livestreamed the whole experience of me building Downshift, because I knew right at the start that this was going to be open source.

And so you can watch me build it, but I started with Compound Components using context to communicate between components. And then Jared Forsythe, we just randomly met in the San Jose airport.

Brian: Wow.

Kent: And he was like, hey what if you did this getting the props that you need to from a function as child or something like that, a render prop? That kind of got me thinking a little bit, and what was cool about that was it totally liberated the rendering, and so Downshift doesn't actually render anything at all for you. You render everything and Downshift just gives you the things that you need to hook things up together in a way that's nice.

So Downshift is by far the most flexible autocomplete solution, as far as I know of any framework or framework-less implementation. It's also one of the smallest. I was actually just looking at a couple of vanilla JS solutions.

It is definitely the most capable and smallest autocomplete implementation or component out there. Even if you were to use Preact with it and bundle Preact with Downshift, it'll still be smaller than most autocomplete solutions that are out there.

And it's more capable, so I'm pretty excited about Downshift and it was a really fun thing to build. And I think that it kind of got people more excited about this render prop idea where you're kind of hand rendering responsibility over to the user, which I think is a good thing, too.

Brian: Yeah, I did the advanced React training course about a year ago. And they had, towards the second half of that course, they probably maybe reorganized that course now, but they had started talking about this new thing of rendering props. I really liked the approach and I remember that it's more of a, I guess technically more declarative way of creating your React components. I need to definitely check that out.

Kent: Yeah, definitely. It's very cool. And I'm excited that more and more people are doing it, because yeah, it's just so powerful. You bundle up the logic, because that's the hard part that's more generic. And then you leave the rendering over to the user, which is the less generic part and the easy part of building components. So I think it'll make everybody more productive if more people are doing stuff like this.

Brian: Cool. And you sort of mentioned in passing at the San Jose Airport you met Jared Forsythe?

Kent: Yeah. Jared Forsythe is, he works at Khan Academy. He kind of helped with Aphrodite. He's doing a lot of Reason stuff now.

Brian: Oh, gotcha. Oh, yeah the Reason guy. Gotcha. We didn't really touch on the TC39, being part of that committee. You've been on the committee for a while? At least a year now, right? Is that correct?

Kent: Yeah, almost a year. I started November last year.

Brian: And how did that come about? Was it someone saw your talk and they approached you to join the club?

Kent: Yeah, good question.

The way that TC39 membership works is that individuals are not members. Companies are members of the TC39. And then the company, and to become a member you pay a certain amount of money based off of the size of your company.

So PayPal's is, just to give you an idea, PayPal's the biggest size, and so they pay the most amount that anybody would.

And we've got companies like Microsoft and Apple and Google and Facebook and Netflix and a bunch of companies you've heard of and then many you haven't heard of, but are also very interested in the direction of the language. The companies will pay a bunch of money to become a member and then they can send delegates if they want to. And most do send delegates, whoever they choose, how many ever they choose to attend the meetings, which are once every other month at the end of the month.

Meetings are three days of just grueling all day meetings. So that's a lot of fun. There's actually meetings going on right now but because I just had a baby I thought it would be a good idea for me to stick around, and not leave my wife with four children.

Brian: I agree.

Kent: And one of them, two weeks old so. Yeah, but how I got on, I was just minding my own business working at PayPal. I get kind of involved in the direction of the language, I follow the proposals and stuff and talk about where things are going. I'm not at all a language designer. I don't even have a CS degree, and so yeah, that's not really my thing. I just like using the language.

Brian: What did you go to school for?

Kent: I actually got a Masters degree in Information Systems.

Brian: OK.

Kent: At BYU a couple of years ago. So yeah, it's a related field, but not really. I didn't learn about data structures and algorithms and stuff. It was much more practical application.

Brian: Yeah. They have the same course at my college, so it's mainly like running servers and doing SQL and Microsoft stuff.

Kent: Yeah. So yeah, I was just one day got a message from my boss's boss and he said, "hey, our current delegate is kind of thinking they want to phase out, so would you be interested in taking over as the delegate for PayPal. I know that you do a lot of this community-related stuff anyway, and you kind of stay on top of the proposals and stuff."

Somebody recommended me to you or whatever. And so I said "yeah, sure, that would be super awesome. I am like totally the wrong person to send to these meetings. I don't know what I'm talking about, but that would be awesome." Yeah, they started sending me. I went to the first meeting. It was at Facebook and I was like, people are amazing, I have no business being here. My brain was hurting in like just an hour.

Yeah, it's a really cool experience and I've done a little bit to contribute. I hosted the TC39 at PayPal, so that was useful, I guess. But yeah, there's definitely a fair amount of imposter syndrome type feelings in that group.

Brian: Yeah. But at least you're in a good opportunity to grow and learn from, even though you don't understand it. That's my whole approach to my career is like, "get me to the place where people know more than I do so I can continue to ask questions all the time."

Kent: Yep.

Brian: Cool. That's awesome. I do want to do some picks, so I'm going to transition us over. I really appreciate you taking the time to talk about your open source work, and your role at PayPal. But also mention that TC39 thing, because I think a lot of people are interested in that. But pick, Jam Picks. I think you're already kind of aware of how these work. These are like things that you are jamming on. It's food, music, code, asterisks, so it's anything. And since you already have your picks already laid out, do you want to go ahead and go first?

Kent: Yeah, sure. So, I think when you started the podcast this was supposed to be what you're jamming on, so what music do you listen to when you code, which I think is cool. I listen to, it really kind of depends on the day, but I like to listen to "The Piano Guys", and I just turn on Google Music Radio for Piano Guys and it's really cool stuff, if you haven't heard them, check them out.

It brings up like Lindsay Sterling and Peter Hollands and other cool folks like that. So yeah that's cool. I also listen to "Owl City Radio Station", too. I think Owl City is pretty cool. And then just various other stuff. And then as far as other cool things in the world. I wrote a blog post as a guest on the Babel Blog a couple weeks ago, called "Zero Config With Babel Macros."

Brian: Definitely read that one.

Kent: Babel Macros is this cool thing that Sunil Pai, who created Glamor is this amazing awesome smart person, came up with and I implemented and I think that people should learn about it and start using it. We're hoping to get Create React app to adopt it, so if you know Dan, just tweet at him incessantly, like let's get this into Create React app. So Babel Macros, check them out.

And then there's this awesome sticker that Tyler McGuinness made a while back called Left Pad, and it's just this sticker. You just put it on your laptop, it just says, "No version found. Left pad at 0.0.3." If you're not in on the joke, just Google, left pad and you'll see what that's all about. And then I also started a newsletter. Right now it's just been once a week for the last three weeks. I just send out stuff I'm working on and things that I've learned and how I've solved problems. You can find that at KCD.IM/news, those are my jam picks.

Brian: Cool. Yeah, so I want to add to your picks, and mention your AMA, that you can do to Github.com/KenCDodds/AMA.

Kent: Yeah yeah, I totally am still going on that. I've got over 100 or 300 questions on there right now I think.

Brian: Yeah, it's like one of the most successful Github AMA's I've seen. Well, you're the first I've heard of to actually do that and so it's the most successful I've known of since I stumbled onto yours. So I highly recommend listeners to check that out. If you've got questions about Kent or just general Javascript questions as well. I also have a pick. I'm going to pick the show Narcos on Netflix.

I've exclusively only been watching this show when I travel, because Netflix has this cool feature where you can do offline. You can save the episodes or movies offline. So I've been watching it only on airplanes. Mainly because there's a lot of gun shots, and since I have a kid, I can't watch it during the day. And I can't watch it at night because my wife will wake up.

So I've been watching it on the airplane, and yeah, it's been a great experiment, because I've gotten through season two and then just recently season three is coming out. So I don't travel again until November is my next travel schedule, so I might get two episodes in there and back. Actually maybe a couple more, so looking forward to that. I also like that show because half of it's in Spanish, I've known Spanish.

I actually used to be fluent as a kid. My Mom's side of the family's from Cuba, and I just grew up speaking English, so my Spanish is really bad. Since I've been watching that show, my Spanish is actually getting better. So I think I'm going to watch it again because Netflix you can change the audio track to Spanish. So I'm thinking I'm going to watch it with Spanish with English subtitles, and see how good that goes for me. So, Kent thanks for coming on. I really appreciate you unraveling your experiences with us and kind of sharing a bit of the magic with how Kent C. Dodds operates. Pretty awesome.

Kent: Yeah well thank you so much for having me on, I really appreciate it.

Brian: Cool.