419: Why 2.0?

0:00Hello, everybody. Welcome to Code Pen radio number 419. As you listen to this, we're going to be in public beta for our Code Pen 2.0 editor, which is a big freaking deal. And we're going to take this episode to, well, to welcome you and to say, why, why did you do it? Code Pen, I have with me, my friend and co founder for so many years. Alex, hi. So long. Hey, thanks for having me here. Yeah, we've been through thick and thin here. So, so, so a lot of this comes from Alex's kind of amazing brain, but we have a lot to talk about. So the idea is like, this was a huge journey for us, a hero's journey in creating 2.0. We had big ideas for it. Yeah, yeah, but like, but like, why did we even start this journey?

1:00It's an interesting thing to think about because Code Pen and the early days, it just did what it did, you know, HTML, CSS and JavaScript. We offered some processors. I feel like, you know, you and I talked a little bit like we picked well in the early days. We picked, you know, this is pretty well. We did, we did, we got lucky on some of it. Yeah, like SaaS was such a big deal for such a long time. It still is. It's a heavily used processor. We supported SaaS. You come to Code Pen and you play with SaaS. That's such a, a big deal, right? But, you know, you told me the other day, like, what would it take to add one more pretty serious processor to the old editor? And we're like, oh, buddy. It's, it's, I can tell you it required several database migrations, which should, should tell you a little something that it would be quite a while. Yes. And we would, it's not like we never did it. But this, that old system of Code Pen, one thing with it is it really wasn't architected to be extensible. And as time marched by with Code Pen, we were like, oh my gosh, you know, we could kind of feel change happening in

2:05the industry and that that change is, is happens more and more rapidly. Like it's that joke about days since last major JavaScript framework release or something. And it always says zero days because people are doing stuff or whatever. You're like, do, does Code Pen support any of those? Not really. Sorry. You know, and that's a little, if Kim feel a little embarrassing, although, you know, we're not one to sit around and be embarrassed. So we're going to build a new system that adapts to that. And so like, I think that was the, like, there's a lot of things to think about here. Another one is that we listen to our customers and we have a really good idea about all the people that use Code Pen. What do they want? When do they choose to leave Code Pen? What motivates them to go pro on Code Pen? We have a lot of data there. So of course, the 2.0 product is knowing those things and building those things. But this other idea of like our, our, like, Henry Ford, like, I'm not just going to give him a faster horse. I'm going to give him, we're going to rearchitect this thing. What they need is, uh, is a different thing. And it kind of,

3:10it came from your mind because I sure couldn't have invented what we're now calling the, the Code Pen compiler. Yeah. We, we started, you know, the one constant that you see from when you build anything that people care about is that they always want you to make it better faster and allow them to do more things with your product, which is great. It's a great problem to have. So when you look at that problem and you go, everyone's requesting something and we could have just taken the number of requests and kept adding every little piece that was requested that there's a version of Code Pen where we just grab some data, see how many requests we get for things, take some polls and just keep adding little bits and pieces of technology. But there's a lot of technology that with a lot of many small communities where people are really passionate about that technology. So how do we help those people build? Oh, yeah. Yeah. Yeah. Yeah. That's a good point.

4:11Big part of it. Big part of it. I remember making internal slide decks where we're talking about that idea. Like what if these little smaller technology, but not even, not even small, but like view was one of them. Like what if, what if we could serve the view community super well? I don't know if we have nailed that exactly, but at one point, we're like, let's try and build like a view specific editor, which still exists on Code Pen. It won't because the new 2.0 editor totally like removes the need for it specifically, but we're like, we'll just build a custom special editor just for view. And at one point, we did it for Flutter for Google as well. And these things were like an interesting take. It's like no regrets necessarily, but I don't think any of them really knocked it out of the park and we, but we kind of like learned from that concept of like, hmm, maybe we really can do this. Maybe we can build an extensible system, but not maybe individual editors. Maybe there can be like one editor to rule them all kind of thing. Right. And that's where we started thinking, okay, how do other companies solve this problem?

5:16Right? This is, how is it that you make a system that feels like it's infinitely extensible? Yes. But it's something that is manageable. And the pattern, the most successful pattern I've seen in software is where you have a common core that essentially orchestrates the entire system, but then you have other extensions to that core that adhere to an API. And that's how you end up using that technology, right? So you can think of things like Webpack. Webpack has, is it extensions? I'm not exactly sure what they were extensions in there. Yeah. Yeah. I see where you're going with this, you know, like the like a build system that's extensible is certainly Webpack does it babble, does it? But like, babble, whatever. Yeah. But if you look to the greater software ecosystem, you can look at iOS and apps. You can look at AWS and all the APIs that they, how they did their

6:19re-architecture, right? So it's like, this is a pattern that's common to just software, right? Like, if you think of the operating system, like Linux or Windows as the common core and then individual apps as the extensions, that's just the common pattern. That's how we handle infinite amounts of complexity in software. So it's like, okay, that's actually what we need to do. Yeah, sure. Plugging into it. And so in software, that means you're writing an API and everyone adheres to that API and somehow that API allows you to do everything that you'd want to do with these extensions. And you're avoiding saying the word blocks, which is our version of this extensible thing. And code, I know it's a new word for people. So you're going to have to get used to it. That's what we call these extensible pieces of the code pen compiler in the new editor. And we are not shy about using that word a lot in the editor. So when you extend our compiler and you do this as a user, you're like, I'm going to add to the build process because you know, every time you stop typing on code pen,

7:22the build process runs and it shows you the preview that build process runs fast. But you get to decide and control a lot more of it than you ever used to be able to do on code pen. So like, now, SaaS, just because we mentioned it already, that's a block. So you just choose to add it to the code pen compiler and then it runs. So I'm not going to jump too far into the like the feature set or whatever. But that's the idea is this pluggable system that that that came out of your of your mind. But the thing that you were huge on from the beginning and really had to keep us all in line about is that there's like, they're not none of them are unique. There's nothing about the compiler that like does really special stuff for in the like the block itself has to have all the information about like how it like adheres to this API perfectly, you know. Right. We wanted to make sure that the compiler that essentially orchestrates the build for us that none of the information about what it's running is hard coded into the compiler, right? Like that was

8:27huge for us in the sense of like, if you're adding SaaS or less or stylus any of these frameworks or even say tailwind that the compiler would be able to learn everything it needs to do, how what the order of operations, what to build and what order, what to do with the results of that order, it should know everything from the block itself. Like the block has a block file that tells us what it does and the compiler understands that block file and then puts it into the order automatically for you because it's still supposed to be easy for you. It's more complicated for us. That's a good thing. But we're not trying to introduce you to new technologies for trying to make these technologies that you already use easier to combine and easier to build websites with so that you can just focus on building websites. Yeah. I was so huge on that in the beginning that the way that you talk about that because of code, the compiler is what's orchestrating all these

9:27blocks together. The compiler is what's deciding what to run and how to run it and when to run it and what it can be in parallel with and what it can't and not making all these complicated decisions that you never need to think about as a user. And you can combine them infinitely, which to me is like, wait, what? You know, the old code that I was like, dude, you get to pick, it was literally expressed itself in the UIs a select menu. You pick one of them. And this new one, we're like, no, you can use as many of them you want. I don't, it probably won't be quite to this extreme because we'll get to base blocks, probably in a future episode. Those are a little bit mutually exclusive. But otherwise, you can add every single block that we offer if you'd like to. That would be weird, maybe, but you should have, and you should never have to think how they get wired together because it has been countless times how annoyed I've been at web development in the wild where you're like, how do these two things get wired together? How, how, how does it work? Do I have to run the

10:27TypeScript first? Can I use TSC to do this or do I need V to figure it out or like, how do they get wired together? And sometimes there's hard, there's hard limits on, on those things. Like, if you're using some static site generator tool that like has first class integrations with some CSS processors, but not others, is that mean you just can't use the other CSS processor? Or what? Like, that's obnoxious to me. So I, I just feel like that's so cool when, when you would talk about like, ah, it doesn't matter. It'll figure out how they go together. And now experiencing it, they really do. You just, you just add it. You do not have to think about how they are wired together, but you still have the control of how each individual block behaves. TypeScript is a block. TypeScript is super, super configurable. You have all that configurability, but you don't need to worry about how it works with Babel or whatever. All right. Some other processor like, it doesn't matter. You just leave that to us. We'll figure it out. Yeah. And

11:30that's the goal, right? For us to, when you have a, we have a build system that's we built internally with the compiler, where it's focused specifically on front end code. Like, this isn't a built system akin to like GitHub actions or basil, I guess, GitHub actions is more CI, but like, basil, basil, basil, basil, basil, Google's built system. This isn't like a general built system, right? This is focused specifically on front end. And it knows, you know, that, hey, you should probably process SAS before you like, minify CSS, that kind of a thing before you build your templates and integrate things like that. So it does have knowledge about what it's building, but what that allows you the developer to do is not have to think about how those things are organized and how they're combined. And to me, the number one thing that's the hardest thing to do is when you go, well, I want to use either neck, shea's and feet or something like that. And I want to use view

12:32or I want to use React, but then I also want to combine it with these other three technologies. When you individually those little pieces tend to be pretty simple, like you can figure it out if you're a semi experienced developer. But then when you're having to combine them, the complexity just kind of goes to the roof or sometimes they're just not supported, right? And so we wanted to simplify things and not add yet another flavor of our own framework. We wanted to make it easier to combine or use the things that you're already interested in using, even if you've never used it before. It should still be very simple to try out a new technology. And so doing that required us to have some really deep knowledge as to what is happening. And we needed a whole new system. I'd say a completely new version of CodePen in order to do that. Yeah, it is a completely new version of CodePen. And like the amount of technology that takes to make this all work is frankly astounding. And I don't even know where to start. We're going to have to save for future

13:33shows and how it all works and stuff. But it does work and it all works very fast, which is very satisfying. But we're focused on the why. So the why so far is we need to offer a lot more processing technology. We want to add lots and lots and lots of blocks. That's what we've designed this to do. So that's part of the why and those blocks need to be infinitely combineable together. It doesn't matter which blocks you pick will figure that out. So the why is like those two things we got that so far. Now another why is that a lot of those technologies came, they expect differently than they did in the very early days of CodePen. A lot of the processors back then were just like basically give me a string and I'll process it into a different string. Which are represent of most of us felt like a file like one file turns into another file like your SCSS file turns into a dot CSS file. That's still true. It's complicated a little bit by they can import each other a little bit. But most processors these days I'd wager to say are more

14:34like expect to be working on a whole file system. And like it's just we just need to support. We also just know that people leave CodePen when they need that additional file. I just know that I talked to professors and all kinds of people that are like yeah you basically you need that second HTML file. I'm out of here you know. So files is just it's just part of the deal. It just had to be there. We just needed a multi file editor. We had already built that with projects. And so some of this learning comes from CodePen projects. It's just projects wasn't really it was like pens with a file system like wasn't that advanced really. Right. Yeah, I mean the technology that I would say the number one thing that we got from projects is we learned so much as to what limited us, what we actually needed to do and how we could we the projects experience as a end user wasn't CodePen asked right like every time you typed and made a change you had to save in order to see

15:39the preview update and that fundamentally changes your experience on CodePen. When you know that you can't just go into someone's project and play with it and see the updates without having to save it. You you end up having to be things were a little too slow a little too clunky. We had to ask you too many questions like if you use webpack we need to be like what file are you linking to? So the CodePen experience itself wasn't there but we learned so much internally technologically speaking to understand like well what is it that we need to do to make the system work and make it simple. What do we need to understand about what people are building that would allow us to kind of do more for them? I love that. That's it's totally true and it brings up this idea that this new version of CodePen it's it's pens and projects. It can do everything that an existing pen today on CodePen can do or project and in fact as of right now there's a button. If you want to

16:41prove that go to one of your pens or projects hit that button in the UI you'll find it as like convert to 2.0 editor and it'll just move it over for you. It's not a permanent conversion as I talk right now because it's work in beta so that'll come when we're not in beta but you'll be able to see your work in the new editor and see how it's processed and handled in the new world. That's amazing because part of this is Greenfield. Part of this was like this is Alex's idea this is like a whole new we are building a brand new way to process understand and process code quickly totally new to the world in a way that's Greenfield except for with this additional constraint that it has to be totally backwards compatible with with all of existing CodePen. So it's that too and I've spent an unbelievable amount of time testing to make sure that's true. Yes you have you have been you've led that project up and that has been an insane amount of I mean it's been extremely valuable because one of the hardest things to do when you're building like a new version of of something is

17:44too you can so easily lose why you were successful why you had any modicum of success and for CodePen that has been the simplicity of like as much as you can't do certain things that's a been a real strength you you haven't needed to like wire things up in certain ways you could just start working and start seeing output and we're trying to capture keep as much of that simplicity as possible and that is harder than it seems we're trying to support just kind of infinite the complexity we hope we've captured that I I'll let Steven talk about his classic block idea and I won't step on his toes but like there's been a lot of like thought and effort put into making sure it's as simple or as as simple as we could possibly make it without limiting you so that you can still have that kind of yeah put an experience I think we've nailed it personally but yeah yeah and we're gonna keep

18:47working on that simplicity you know yeah we can't lose everybody that exists and I don't want to either I we had success I could meant because of the simplest people would tell us that so like I'm not trying to turn my back on that that would be that would be literally stupid and we're not so there you go but yeah the files is a whole thing so they're it is there you don't even have to care about it you can never open that file drawer if you never wanted to it doesn't matter but it's there if you need it and a lot of people are gonna need it and want it and like it and and so that's there it also means that you know how we you know what we used for the UI of to build this entire UI for this app our blood sweat and tears baby this is entirely from scratch the editor is code mere six Sean I talked about that last week so it's not like we don't use open source or whatever we tons of open source you know it's a next JS side by you know we can get into the technology behind it but the UI and the behavior and UX and everything is totally bespoke to us it's is not like a just like a we'll just fork monoco or fork vs code or whatever

19:50like so many other editors are this is totally code pen technology and we sweated the crap out of the details of how it all works and having them also have an insane amount of control we're not beholden to it any other project wants to do there and I think it shows in a lot of cool ways I think the way we handle like errors and mistakes in the the build process through diagnostics is first class cool and all these things but anyway well I guess that is my next one anyways like why did we do this because we want to like it wanted to be better we want like a better UI better UX better accessibility better on mobile better everything better forever so why do we do it to be better in a ways that you asked us to be better right and not just be better for like it's one thing to you know shoot your shot and be like we are good today it's like how do you shoot your shot and make sure that you're going to be good now and into the future right as long as people are using websites and building websites with editors we wanted to kind of shoot for that and

20:52focusing on supporting everything that's possible now but in the very near future and when I say the near future I mean hopefully the next 10 years before we're replaced by the bots that is that was our goal right our ability to build with modern technology but also support everything else that's coming down the pipe and so like not building our own like custom framework that you would hear too with our own custom config files and things like that that was something I'm still so happy about because we're not trying to get you to learn our version our flavor of the month our version of next JS review or something akin to that but we want to be able to support all those technologies that are honestly great and they've fulfilled a lot of they give you so much power but like being able to use them and focus on building websites instead of focus on wiring things up and all the config hell that we all deal with and it's something that we honestly specialize in our code plan because that is the boring hard part you know we want to get that out of your way and yet

21:53let you build with the technologies that you want we're also not stupid and not totally trying to avoid the elephant in the room but AI exists now I think you probably know that Alex you know just to have heard about it being here yeah yeah we've kind of of course have been thinking about it and playing with it and using it ever since it became a thing of course we have we're developers who love toys and stuff so you you know I hope it's not too conspicuous but there's not a lot of AI that you'll see as a user on day one of this public beta do we want to play with and offer lots of those cool features yeah we do but we knew ahead of time that like if we build a system that is kind of friendly to how it operates then that's going to be better for us in the long term rather than just jamming in you AI features too early like this system is pretty helpful in a lot of ways to AI so you're going to see some of that but here's the other thing is like you're messing around with AI code and you got the code what where are you going to do with it

22:56where are you going to put it I also hope the code pen is like a cool it's like you put it on code pen because then you can deploy it and then you can show people and then you can have conversations about it and then you can collaborate on it with your friends and then you have a history of what you changed on the product there's a million reasons to put it here and if code pen is part of the infrastructure story that's awesome you know right yeah and the thing I'm really proud of with what we built is that the same thing that that will make it easier for you to build on code pen and maintain something and add complexity to a website over time is actually the same thing that combines exceptionally well with AI tools right so one of the I would say flaws of AI when you're building with AI is it can build really complex things that are hard to understand very quickly right by limiting the amount of com inherent complexity that

23:57you have to deal with we're also limiting the amount of complexity that AI would have to deal with so that you can understand when you build a site eventually with some AI help on code pen you'll still be able to understand what it built and how it wired up the technologies because they're very simple you can look at every block individually you can look at every piece of the site individually and now have to be concerned that it's going to be un maintainable it a month or a week or whatever yeah it's a good point right like it this what can be very complicated in the building of things is how things are wired together and there is no wiring of it together the compiler handles that part for you so it just doesn't need to worry about that and the what what the compiler spits out at the other side is very it spits out internally like we can see the files in any given moment during the processing there's elaborate logs that are telling you what's happening and and where things are went wrong and what file on what line at what character and stuff you know

24:58what's AI is going to gobble up that kind of beautiful context about what's wrong yeah and that's what's interesting about like modern LLNs which is essentially our euphemism for what we call AI in this podcast is that the same thing that humans if a human can understand it really well to AI can understand it really well and so they kind of by optimizing we've optimized for humans in this release not for the AI understandability it's actually really integrates exceptionally well with it so we're excited about all of it but we're most excited about the fact that just as a human being who builds websites and wants to learn the technology themselves that it'll make it make really hard things possible and make simple things pretty easy you know so like you hopefully get you out of that config hell and let you focus on what you're actually trying to build not how to wire it all together yeah yeah every feature we put into that like how can

26:00this be easier which is pretty satisfying you know we're you know the fact that deployment is built in is just such a fun thing for me because especially it's like so you built this thing right I remember the very first days ever on the internet where I was I was enchanted by the idea that if I could buy a domain name and I could put something on that domain and figure out it's just struggle through a so difficult in the early days figure out like how does FTP work oh my gosh and get it to work that I had this stuff up at a URL that anybody could see that spark of excitement is real still you can hit a button and get a real URL that you can send to anybody in the world and it's going to show them that website that's incredibly powerful intoxicating thing especially to just to some people you know like maybe it's not to everybody but there's people out there that just are enchanted by the idea of of websites and if CodePen can be part of that story where we can be that host for you be that place where a website is created that's

27:03communicating an idea or showing something or solving a problem or selling something or anything I just love that I want to like be a part of the web in that way too that has nothing to do with CodePen itself it has to do with your website and what your website is trying to do or say yeah exactly like being being part of the story where you go from idea to actually seeing it on the web very quickly instead of it just staying an idea like we all have these interesting things that are interesting to us built having a place where you can actually do that very quickly and easily that is sometimes it's even for me when I use the other having someone having built the back in in the compiler and having thought about it far too long for you know wait wait too much I'm still surprised at how the things it can do when it comes together because it's it's just the perfect example of like where the the hole is a lot more than some of the parts and it's just it's impressive it's just like this is why we built software so that we can build things like this

28:07and so just it's really exciting I can't wait to see what people build it it's going to be interesting yeah usually a package is work it's so cool but we're just gonna leave it at that for another one so yeah that's a tease yeah little tease all right well well thanks obviously we're excited about it yeah and we'll dig into the more specific parts of it for sure in future episodes but yeah give it a shot and build something you don't need our permission anymore public beta yeah build something awesome yeah peace