CodePen just got a HUGE upgrade

Hello, my friend and friend. You may have heard, but there's a new CodePen with CodePen 2.0. There's a whole bunch of new things with it, and so I was actually joined by the co-founder of CodePen, Chris Coyier, who walked me through all of the new stuff, including how we can actually set it up to be a lot like the old CodePen, if that's what you'd prefer. Uh there's timestamps to all the different things we can do down below on this video. It's a really big deep dive, and when we did it, it was still in beta, so there was a few little bugs and things that came up at times that have all been uh since then fixed. So, whether you've never used CodePen before, or you're used to the old one, you want to catch up on all the new stuff that the new one can do, you're in the right place. Let's get right into it. The first time I opened it, I was quite surprised by all the HTML that's in here. I'm not used to seeing so much >> decision, Kevin. You don't even know, you know? It was kind of like, I think that we need to do this. And as we'll see as we go on in this video, you don't like have to do that, but as a default, I think particular [snorts] like partially like the age of AI is here, too. Like it's it's producing complete documents like this, too. And I think like there's stuff that you might want to do in the head of your document. It's not that you couldn't do it before, but it was just a little like too magically weird. And as this 2.0 editor gains more capabilities and and stuff, it makes a little more sense that we're like not forcing our HTML document upon you. >> Right. >> So, I could see that being surprising cuz you're like, oh, >> like to some people that use CodePen, they're like, I like the minimalistness to it. I don't want to look at a complete HTML document. It looks noisy to me. >> Mhm. So, we can fix that, but yeah, the default for now is is to show you the complete HTML document. I hope it's actually like possibly as time goes on a little more beginner-friendly because of the lack of magic. >> Right, yeah. I do remember, especially when I early on when I started using CodePen for videos, I'd get questions about that, actually, of like, "Where's >> [laughter] >> Or someone would like copy the code from a snippet to use somewhere, and it wouldn't like they were missing that for their page or whatever it was that they needed, and they would like being unaware of that for beginners, so they had to >> Yeah, that's annoying, and it works exactly the opposite way, sometimes, too, as in the old editor, people would put a complete document. And then it puts a complete document in a complete document, which is all kinds of messed up. And then there's a little bit of CSS there. We kind of hemmed and haw'd about that, too, but the idea is just that something renders, so you're not looking at a totally white page. You're like, "Oh, I see. This connects to that and and whatever." >> Yeah. >> Um all right, well, that's kind of the default. I see you've already made a little bit of an adjustment in that you have what we call minimal UI mode turned on, which just reduces some of the stuff that you see on the page, which is fine. I'm finding, surprisingly to me, a lot of people really like and prefer having that on. So, rock and roll. But you just flipped it off. It's just a little control. It's also accessible from what we call the omnibar, which is you can always like command K from anywhere and get the thing, and then if you just type like minimal or whatever, it'll uh it'll it'll pop up, and then control U is the same. It has a if if there's a keyboard command, the omnibar kind of reminds you what it is and all that. But yeah, there's just there's more to see. Like if you're again, if you're like really used to the old CodePen, and you like don't care that there's other features and stuff, leave me on, that's fine, or you just want more screen room. Maybe you're a famous YouTuber, and you want to use your screen more, then have minimal UI mode on. I mean, some people like it. It doesn't mean there's any less you can do. It just hides uh some of the stuff. But what one of the things that that kind of you were looking at was you were looking at I mean, it is like very minimal. HTML, CSS, JavaScript, preview, that's it. Whereas now, we're looking at kind of a whole file system along the left and a bunch of icons and stuff that perhaps people haven't seen before. So, there's more going on. Not trying to intimidate people, but I am trying to make this a more capable editor cuz, you know, CodePen's a business or whatever, and we're thinking we can offer more powerful stuff, more powerful features, and make our pro plans more enticing, all that kind of thing, cuz we want to grow just like every other company in the world, you know. >> I I'm curious to see if it like I know you said that a lot of people are turning minimal mode on. I'm curious if like that's everybody who's used to the original CodePen, probably like that's the first thing they go for. Uh and I'd be wondering with new users coming in if they'd actually be more comfortable with it off. Um cuz I think yeah, you can still toggle with the uh for me I'm on Windows, so control B, like the same I would for my sidebar. >> Right. >> You know, so it gives you sort of the more familiar just regular editing experience that you might get from your your editor. Uh so I'd be curious to see >> Maybe that you're more comfortable with it off, actually. I mean, it is by default [clears throat] off. I want people seeing that oh look, you have a file system. Like that is kind of the default look. I think that because maybe you started coding with VS Code or something >> Exactly. >> in college or whatever. That that this is more like that, and that it also might be like a surprising bummer to some people if you're like, oh I can't even make a file. Like okay, dude, you know, cool editor. Um anyway, now you absolutely can make a file. Make as many files as you want. There's file limits. That's like pretty much the number one thing for pro now is that you're capped at number of files. Like if you're on the basic pro plan, you get 50 files over there, and if you just like need more than that, there it's tiered up from there. Um but you know, that's the idea. I'm trying to make pro not too complicated. Like you're not like buying token minutes for your build. >> I'm curious if somebody's on a free account, how many files they get? >> Three. So, you It's just like it was before. Like you just you get what CodePen offered before. >> Right. >> So, it's not expanded. Like as soon as you need that fourth thing, well, you know, you're you're you're getting more than we ever offered before and we're just asking you to be pro for that. So. >> Yep. Yep. >> Um you know, there's little ways around it. You could if you like didn't need the JavaScript file, you can delete that one and make another CSS file or something. It's still It's still just three generically. >> Okay. >> That doesn't count like anything that we impart on you like uh config files and stuff. You'll see config files a little bit more. Like go flip on PostCSS. Now, this is an interesting new thing in that like uh it's a it's a concept called blocks that we'll dig into, but um we'll just do it real quick. Like you can click down, you know, you have files open now. The icons along the far left are other things. The blocks one when you open it up is showing you interestingly the build process that runs every time uh something happens. This is totally new to the 2.0 editor. You could have lots and lots of things running that process your pen into that preview. >> Mhm. >> Like just think of Sass, you know, Sass needs to run and it needs to turn SCSS into CSS. We're going to show you it run in this sidebar so you can see it, but it might actually be a lot more than Sass. It's like other technologies that are running and all getting pieced together. You can kind of watch that. But this is where you can control that add things to that build process, too. The things you can add to the build process we call blocks. So, you know, if you just like chuck PostCSS in there, which you can either search for or look for that one or just hit add to pen or something. PostCSS is interesting in that it always just there was never a dot PostCSS file extension, you know? It just like ran on your CSS files. Yeah. >> Um but it's got a config file. So, if you go back to the files panel there, you'll see now a PostCSS config file. Now, even if if a free user, that's not like counting against your file limit or something. Like that's we we just need that to do stuff for whatever. Uh so in here you can, you know, adjust your config for PostCSS and add plugins and do whatever you're going to do. I just wanted to show you that as like that's something you would never be able to do in the old CodePen editor either. It's like, "Okay, I'm using PostCSS, but like the point of PostCSS is kind of like you piecemeal it together how you want to process stuff." >> Mhm. >> Um but yeah, that's just that's that's the new world. >> I like that cuz it you said it lets you set things up like how you'd actually want to set them up. And you know, if you found something on PostCSS like you said in the original one, it just sort of it was there doing something, but you now at least you can sort of >> Yeah. >> do what you wanted to. >> Yeah, it was really weird in the past. I don't even want to dig into how it >> [laughter] >> It had a weird syntax and stuff. That's notable there, too. Remember in the old editor you would just pick one CSS processor from a drop-down, which was then mutually exclusive. And now you've just arbitrarily added Lightning to this, too. That's fine. You can add every block we have to Open Pen. It doesn't matter. Uh and so if for some reason you really wanted to run both of those things, you just you just can. >> You can. Cool. >> Yeah, I see you've disabled one, too. Totally fine. That's like step one to deleting a block, too. You disable it first, make sure everything's okay, and then you can delete it from >> Mhm. >> from there. >> Cool. >> Um yeah, kind of cool. So you can kind of watch things happen. You'll see another couple of icons in there that are like, "What is validate? What is fingerprint? What is link?" Those are just like things that we need to do for you. Um but it's it's us processing your code. Fingerprinting is like it it it when you it breaks the cache on pen. So instead of linking to style.css, we link to style.1287b.css.com. And then when when we detect that your CSS has changed, we'll change that hash for you. It's just like a really efficient way to to build a website. That's kind of what that's doing. And the linker is just it helps with some magic. Cuz some people are like, "Oh, okay. I have a style. scss file now. What do I put in the link tag in my HTML? Do I point to the CSS file or the scss file or what? I probably the CSS file, but I don't know. It's just like And then [snorts] do I start the file path with a slash or a dot slash or nothing? Our link block is just like just get it close. And we have a number of those, too. Like if you were writing some JavaScript, um and you needed to import an NPM package, we have like a a like a packages block that will run. That's like not a block that you add. We'll just automatically add it to handle that technology for you. But we're just looking really generically. Maybe you should I mean, if you have a 2.0 pen, you could open it or you could go to a old editor pen and you can convert it to a new editor pen. Have you seen that? >> I have a lot of two stuff lately, but we'll see if I can find an older one. >> always filter it away, too. Like open that filters thing and then there's a 2.0. You can look at just old or just new ones if you like. >> [snorts] >> Uh let's do this one. >> Right. And this isn't a permanent process yet. So for now under that save menu, you can there's a button that's just like move it over. And it's just like pre-filling the 2.0 editor with this stuff. >> Right. Yeah. I did notice I have it full screen now, so we don't see the URL, but I noticed it's not like it doesn't look like a regular URL. And then once you save it, then it actually updates and and >> Yeah, and it won't, you know, like that old pen still exists. That's a 1.0 pen. Eventually, a permanent conversion button will replace this one where it's like it then it maintains all the hearts and the comments and all that stuff. >> Right. Right. Right. >> can see during the conversion what we were just talking about. They're like, "Oh no, there's all that HTML, that doctype stuff there." That's not here, too. When we do the permanent conversion of pens, that won't be there anyway. That notice the file name is a little unusual, too. I remember when you were learning this for the first time as we have a little Discord where we chat and stuff. When you use .pen.html, that's triggering something that we're calling the classic block, which makes the editor kind of behave like it used to in the classic editor, meaning you don't need the complete HTML document. We'll put it inside of that HTML document for you. Um but it's, you know, it's cool. It's a little bit more powerful than that cuz you could have like index. pen.pug and then it's putting a pug document inside of the whole thing. And you could have 10 files that are all .pen.something and it'll do all of them, not just one. >> Mhm. >> So, it's just kind of neat. Uh I would point out that there's also a classic block config now. Now, okay, one more thing. I hate to jump around on you too much, but you see that folder that's called .codepen? There's a couple of files in that, too, in the files panel there. >> One of them is called pen.config and you like basically can ignore it, but it's us just saying like this is a block, this is when they added it and and stuff like it's just stuff that we need to process your pen or like is that block disabled and stuff like that. It means there's nothing in the database that explains how this pen is to be processed. It's all part of the file system. It's just kind of behind the scenes. You don't need to know it that much, but any file that we made up out of thin air, we put in that .codepen folder. Classic config is one of those things. That's not some industry concept. That's just a CodePen concept. So, we tuck it away into this folder that's um that's kind of hidden. But you notice the PostCSS config is not in there. That's cuz that really is how PostCSS is really works in the real world. >> Mhm. Mhm. >> Um [clears throat] all right. >> Right. And that's being added even though I came from a classic one because in my original pen I had PostCSS enabled. >> enabled, which you might not even remember you did cuz there's a there's a couple of reasons we might have flipped it on for you. Like if just cuz you had Autoprefixer turned on. Autoprefixer really is just a plugin of PostCSS, so we kind of made this more like reality here. >> Yep. >> You can also try to um delete that file and it'll be like too bad, bro. You know, like >> [laughter] >> PostCSS file, not that whole folder. I don't think. >> Oh, the PostCSS one, yeah. >> Yeah, and it'll just come back. It'll just be like um but we need that though. >> yeah. >> Yeah. >> [laughter] >> Uh that's just one of those like things we have to enforce. CodePen's a little opinionated sometimes about stuff like [laughter] that. >> But the classic block config you can edit. It's unlike the pen config. The classic block config has some of the settings that you used to do in the UI, which is like oh, you know, I need to like link to jQuery or something. You'd just like add in the array of scripts, you know, you'd just add it first as another string before a script.js. Remember there used to be external assets in the old editor. This This is external assets. >> This is it. I was I'm so happy for this. I was looking for something like this and I couldn't find it. Um I should have asked in the Discord, but I was like, "Ah, whatever." I I needed I wanted to have two CSS files like hide away the second like just the generic >> Yeah. This is where you do it. >> is Yeah, perfect. Now I don't have to have an random script tag at the bottom of the page. >> Remember on that old pen of yours you must have checked a little radio button in the settings that said to use normalize.css. Now that's That's how we're supporting that is just like, "Well, it links out to our copy of normalize that we host for you." It's just as simple as that. Not really nothing to it. So anything you could do in the old editor you absolutely can do in the in the new editor as well. Only there's just more capability in the new editor. Like you added lightning CSS to that pen render. We just didn't have that before. That's just a a new one. And it's we're you know, we're not like overloading you with new blocks right away, but that's our goal like as CodePen is to like be shipping lots of new blocks cuz it just opens the door to like interesting little communities and stuff. Like if if we support that technology then they can use CodePen in a way that they couldn't do it before. The biggest one is like static site generators and stuff. Like can you run your 11D site and stuff? And yes, you can. It's just it's not out just yet. >> Yeah, one thing I will say that I really like is that like you know, I I do lots of CSS stuff. So like the JavaScript panel was always empty for me. So I just appreciate that I What was it? It's a really small thing, but it's a >> Yeah. >> minimize it like in the old editor. You can just close [clears throat] it. >> You just You just close it. Don't need that. Um or just even being able to rearrange and like go to tabs if you want, switch it back down, like all of that. >> Yes, thank you for noticing that. I feel like people won't immediately know that cuz it's >> Right. Yeah. >> Yeah. >> I think it's when I realized >> drag maneuver you just did. That was pretty neat. >> Yeah, I think it's when I realized you could close it then I was like, wait a second, what else can we do? And I started sort of just like trying out new I'm like, oh yeah, you can actually move them around. Which is nice. Yeah. >> [snorts] >> Um >> Uh yeah, the more the more files you have in the pen the nicer that is. And I you know, we really I feel like really proud of it actually cuz of how much we sweated the details of um you know, like if you I don't know, have like a bunch of them open in one one group, you know, like bunch of tabs left and right to each other. Try that real quick. And like have like three of them open or so in one in one group. >> But you see the nice little animation that like okay it it puts style at the end there. >> Um I don't know. That little just that tiny little animation is like very clear about like where that file went and where the other one went and where the new one's going to go and little stuff like that that we get like super duper full control over, you know? There's lots of like CSS action in there figuring all that out. And it's not VS Code. So nothing wrong with VS Code, but like I like that this is our handcrafted UI experience, I guess. >> Yeah. >> And and then we're not like beholden to some other projects um UI choices in a way. >> Mhm. >> Uh there's another Oh there's Here's one I really like. See how lorem appears twice up there if you like hit uh I guess it's control F for you on on Windows, right? >> That that this whole is we totally redesigned this find and replace thing. So if you type lorem lowercase, it'll still find it, but then if you click that little gray AA at the end there, it won't find it cuz it's not um cased correctly again and there's some other similar ones there like do you want regex to work and All right, yeah. Well, we're anyway. >> yeah, yeah. Yep. >> Awesome. Right. And then it But then you don't have to People never realized we had find um find and replace in the old editor because it was control G. Like how would you ever know that instead of >> [laughter] >> All right. So now it's like oh they're just together now. You just open the thing and if you need that, you got it and you can replace them all or not or or whatever. It's just like actually good find now >> [laughter] >> didn't have before. Uh pretty satisfying. You've got a couple of good features here. Like let's say you were going to mess with this a little bit and you said CSS grid made hard instead of CSS grid made simple. If you type that up there, of course it's just like the old editor, it'll just run. Um some people didn't like their animation like if you had like some animation it was like obnoxious to run. You can go in the preview window, there's like little control knobbies at the end of the Yeah, right there. You can say auto updating off. Then if you just don't like that it, you know, if you put it back to that, it now it won't run. You have to refresh it manually and then it will be there. Just nice to know if you have that. I prefer auto updating on, of course. That's kind of the heart and soul of CodePen there. But let's say you're like, "Oh, crap. What did it used to say?" Now we've changed it twice. I can't remember. Just hit save um on this. And then one of the icons along the left it has like a go back in time button on it there way on the way on the way way left like by the files panel. I got my right and left sorry. Yeah, now you're like, "Oh, shoot. I bet I bet I could remember what it is if I Oh, no. >> This isn't even out for the beta users yet. I enabled a feature flag for you for this. So >> you. Now I'm I'm actually okay with that. I'm okay with that. No, you can you can But I don't care. People know that this stuff. But under the three dots menu then you maybe that this will work better. >> Or the restore maybe? Or the three dots? >> Well, yeah. Restore is just going to do it though. You can say open pen new pen from version. >> Oh, wow. Okay, cool. >> Uh but anyway, like we have every version you've ever saved of this pen. So um we can go back in time and get that title back. So not the best demo there, but I think don't worry. The data is safe and uh and uh that's hopefully be a pretty good um um feature for people when they're like, "Oh, no. I You know, I can't tell you how many people I've had to disappoint over the years of being like, 'I need to go back, you know, two days on my pen.' I'll be like, 'I don't have it. I don't have any data.' >> The amount of times I've I fork I thought I fork something. I'm doing like, "I'm going to make another demo based on this one." And then two hours later I'm like, "I don't think I forked it." There goes the old one that I was hoping use, but oh well. Yeah. [laughter] So, I'm very excited about the the version history. >> Yeah, we'll make it obviously make it work and then better soon. Uh the one above that is deployment. So, do you have a live thing and Yeah, you just hit the button and we'll just give you a subdomain of this, which is a little bit usable like um I don't know like debug view used to be or whatever. It's like a view of this pen that you made that's 100% no UI stuff. >> Yeah. >> Um so, you know, and then you can map a CNAME at it or an A record or whatever and then now CodePen is hosting that website and it should be like smoking fast cuz it's, you know, behind CloudFlare and just everything we can do to make that site super fast we've done. So, hosting is just nice, you know, and it's just there's no limit to it of just deployed sites. You just do as many of them as you want. But, there's also that view of that preview, you know, just CSS Grid Made Easy there. If you click into that preview URL like the fake URL bar >> Oh, this one here? Oh, this one here, yeah. >> Yeah, it gives you this crazy-looking URL. Is that going to 404? I don't think so cuz it's not a pen version, right? Open that in a new tab >> Uh >> or split or something. >> Yeah, I'm just going to Uh oh, there we go. >> Oh, that works. That should load up as the preview >> nice. >> and what's cool about that is that's debug view, too. Like there's no iframe in the way >> Right, that's cool. >> of this if you need to inspect and stuff. >> Oh, that's amazing. Okay. >> And it's live view. So, as you are editing that HTML and CSS, that will update also. Just through sheer magic. >> And There we go. >> Hey. Yeah. So, that like takes the place of both live view and debug view >> Mhm. >> of before. Some people used to share like full page view, too, cuz that was like kind of what free users had. You I don't think free users could share debug view or whatever. But now, this is kind of interesting. If you just like close all this Get the UI like how you want it to how you want it to share. Like you'd close the panels. Maybe you >> Right. >> um pick a specific file that you want to be the one open or whatever. >> Yeah. >> Then you go over the control or no, the the little like the icon up by your icon and say share and it says copy link with layout. You don't have to bother opening it or whatever. That's going to give you a URL >> With >> with like query params and stuff in there. So, when people open it, it's going to look just like this. >> That's cool. >> Which is kind of nice cuz it can be like I want you to focus on what I'm trying to share. Maybe that's a social media thing or maybe you're showing your boss or whatever. But that's making me think of one more down there. So, the the one with the little the icon again on the very far left with the little guy on it with the plus. >> Yes. >> You you know, private is private. You know, that that's why this these 404s are happening. Sorry about that. But >> Right. >> um there's now like two steps beyond private. Private was like if you copy this and you send it to anybody, they can still see it. We're still trying to make it private and it's not on your profile. You know how private pens work. >> Yep. >> But you if you sent it to your boss or something, they'd just be able to open it up. And we had some feedback sometimes they're like, "Yeah, not very private, you know? Like [laughter] I just clicked a URL and I saw it including all the code. So, mhm So, password protected is like a step beyond that whereas then, you know, if you just made it like whatever CSS I don't know. You You can just leave that password if you want. But you can You can put any password you want there. >> Right. >> Then if you went to like an incognito window or something and you visited this pen, it will not load it. It will not load in. [snorts] >> No. Oh, I am I didn't Oh, I didn't do incognito. I did uh Canary. Let's do incognito. There we go. >> Hey, it's just like, "Hey, this is actually protected." This is basically like for the bosses of the world. Like, I want to or I want people to feel really good that Google can't scrape this then. >> Yes, yep. >> Oops, did that >> Nope, I can't log in though. >> [laughter] >> You have to hit save password maybe over on >> Oh, save password. Yeah, that would help. There we go. That would help. >> Hey, there it is. Now you can see it, you know. >> Now we can see it. >> Um anyway, that feels like more secure and it kind of guarantees that something like Google can't come and scrape it or or whatever if it's password protected even if it had the URL somehow. And then collaborators only is like even a step beyond that kind of. Um yeah, it's just making sure you're going to lose the password. >> Mhm. >> Uh the password's now gone, but this is like now also if you open it in incognito, you don't have to do that right now. But it will this will actually 404 then if they hit it. It's like, "Ooh, there's nothing even there." And you could just type me into that invite a collaborator. If you just typed like Chris Coyier into invite a collaborator or something, then you could say >> Yeah. >> Yeah, you could make me just a viewer if you wanted to under editor. You could say all all that gives me the right to is see it. Or editor. And editor is a big deal. This took us like forever to do is that now it's not only like we can asynchronously work on this pen. Like I have edit access to it, you have edit access to it. We can both work on it whenever, but we can also work on it in real time. It was almost like we were forced into the real time stuff cuz you like what if you're both working at the same time? Then you're writing over each other's changes and stuff. This just implies um collaboration. So if I'm in here, you'll see my little avatar for next to my cursor and we're we're working together. We had that before with collab mode, but it was like you had to go to a special URL and >> Yes. it wasn't as fancy as as it is now, so. You'll see me show up in the bottom. You know, you see that thin little footer at the way bottom? You'll see my little avatar show up down there next to yours. Um and it'll tell you what file I'm in, all this, and anyway, I just wanted to to show all that, I suppose. That very last icon is just like comments and, you know, just stuff about your pen. >> Um is there anything else in the settings that we saw all of that, basically. Title, same thing here. >> Yeah, a little bit more power here in that like before like oh, what if you wanted to change like the font in the editor? You had to like leave the editor and go to this other area to do it, and now you just do it all in here. >> Nice. >> So, I think that's pretty satisfying. Um yeah, you the there's just more fonts, there's more themes. You can line height, we didn't even have that before. That's just new. It's in in this. Just a little bit more control over over what you're looking at. And then the whole site can go >> I was going to say you can get the light and dark. >> the right. It's going to look weird temporarily cuz you have a dark theme on it, but we make those independently doable. >> Right. >> So, it's the whole site and whatever. I think it'll just be control I if you're out to that that flips the whole >> If the site around here. >> Um is there new is there new stuff? I don't know. We always had snippets, but again you had to leave the editor you had to a lot of this stuff you had just had to go somewhere else to do. >> Yeah. Um and the snippets, yeah. The default layout and all of that. >> But otherwise not much. There's actually in some ways there's less in settings because there's not stuff like what CSS processor do you want to use? That's kind of why we have that add blocks thing in the bottom with like a SAS logo and stuff cuz I I'm trying to catch people that are like oh, I I need to write in SAS, so I need to go to settings to change it to SAS cuz that's how it's worked for so long. That's like "Oh, that's actually not That's not in here anymore." >> So, another way to do that is is um Let's say that's what you wanted to do on this pen. I don't know what CSS language you're using, probably nothing. >> This is probably nothing. I have some old ones here. >> Yeah, probably nothing. But, if you're going to switch it to SCSS, you can just rename it. So, if you tried that just SCSS, what's going to happen is you'll see a little explosion of a a block being added. Boo! Added this SASS block. It's just letting you know that that worked. You don't have to necessarily like go into the UI and go find the SASS block and add it manually. Some of that stuff is just implied by the files that you have. >> Right. >> So, if you were writing in React What's that? >> Sorry. Oh, this auto Sorry, this one didn't have it. I was about to say was this your links going in cuz I didn't actually like have to make any change. I just have it as an SCSS and it's figured it out for me. But, I guess it's cuz the blocks is kicking in and then behind the scenes there is a like a style that CSS somewhere that it it's looking at. >> Right. Yeah, well, you'd know for sure because the dot code pen Remember in that folder, there's like a classic.config. And it's going to be still pointing to dot CSS. Yeah, it's just like the linking block makes it figures it out or whatever. Another thing to know is that let's say you you like want to see what this SCSS is turning into. >> Yes. >> There used to be a little way you could toggle that in the old editors, like a little menu thing up there. That's not the case anymore, but there is a there is a a clue in there. It's the little eyeball that says view build output about 2/3 of the way down there. It's going to open up that little thing down there. You can always have access to it. So, if you grab that Yeah, if you drag that SCSS file out and put it like at the bottom of the Oh, that's funny that it's it looks makes it look like you're about to upload it. No. Drag it like you're opening a new or whatever. >> Right, right, yeah. Now, drag it to the bottom so you can see them both at the same time. Now, you can edit one and you'll kind of see one change. So, some people use REPLs like CodePen like that, a little bit. It's like I I I I don't even care about the output. I'm trying to like understand what this processor is doing and I want to see both at the same time. >> Mhm. >> Um yeah, that should work. >> And uh Yeah, to you'd write var not dollar sign var and then >> Um that should work, though. >> That should work. >> Yeah, there you go. >> Yeah, and you see the compiled down here. Cool. >> You see the compiled output, yeah. And it you know, it's a lot more dramatic if you like minify it or something. Let's try that real quick. I don't know if PostCSS has a minifier, but it's going to involve us like knowing what the name of the plugin is and adding it. So, just add just throw on Lightning CSS and flip on the um just to show you how quick and easy things can >> Through the omnibar? Can I just do Lightning or >> Lightning. Just type Lightning. Yep, and it'll show the block and then you hit add to pen and now you got it. And now there's a configuration tab for it, which will it kind of uh well, in that same tab. >> closed it. >> That's okay. Go to blocks and just you can just drag it. >> Configuration. >> Oh, you found it. There you go. You can say edit config file and that'll be JSON configuration, but but see the little button in the bottom right there? It the ones at the bottom there are like help you toggle those settings we know that Lightning CSS has. >> So, the minify is there. Okay, cool. >> Did it stay on true? Now, if you go to edit config file, it'll just show you like oh, that JSON um you can see the output. It'll just say minify true. Yeah, and now that now the build output is like indecipherably smashed together. The the minifier in Lightning CSS is super good. >> Let's just try to see if >> Um problems are interesting, too. Because you have SCSS, try to like misspell that variable. That's kind of nice and something I really like about about this current version of CodePen. You get the red squiggles on the left, you get that big output on the right, and it's not taking away your preview. It's just kind of saying like, oh, I can't make a new preview because there's it literally like says literally can't run. You can just close that if you don't like that, and it'll just stay up there and then it kind of tucks away into the bottom right. >> Oh, yeah. >> And like, hey, there's a problem with the build. It shows a red X on the file panel, on the file that's wrong. It shows a red X in the footer on the build fail. Like it's really trying to be like, you know, give give you opportunities here. And if it finds multiple problems, you'll be able to paginate through all the problems. But I really we call these diagnostics and I I do it it's it's also subject to the um it might be that SAS just dies after finding one. It depends on which processor it is sometimes. Like I think >> I think I did it as a custom property, so that didn't help either though. >> Oh, yeah. Um >> we'll see what happens. But yeah, it might have only squiggled at the first one. >> It probably I think it's SAS dying at the >> processors just keep going and SAS doesn't. >> SAS would just stop at the first thing, yeah. >> Yeah. >> the error and then stops. >> Exactly right. >> I I like this cuz I remember in the old one sometimes you'd get like the error at the bottom. And you'd be trying to like you could find it, but you sort of had to hunt it down a little bit. Whereas now like it's pretty >> Yeah, you jump right to where the mistake is, yeah. Yeah, it should work that way with every single processor, you know, there's a lot of effort put behind like what how these blocks process code and how we extract and normalize the error data and get you to the right file and all that kind of stuff. Um well, I don't have to chat at you forever. I do want to show you one cool little trick though. Try to go into your your like pen.it Actually, maybe we'll just start a new pen. Not that you couldn't do it in this one, but just for clarity. You can always go to pen.new/2 as well if you're >> Yes. Let's I mean I'm going to do that here just cuz it's people will be able to see the URL bar, but that's pen.new. I think a lot of people don't even know about that. That's the classic one. And now we can do {forward slash} two and you actually get >> Yeah, it just goes to the new editor. You don't have to do two. And eventually, of course, pen.new will take you to this as well. But just Now that Now you have both of them, Matt, at hand. >> Mhm. >> Uh oh, and we got to do templates, too. But this is just kind of fun on a new pen. Like do a style tag in the in the head, you know? Just Like this is a weird example, but okay, cool. And this will work, too, of course. You could go like body background red or whatever you're going to do, and it should it should obviously respect that. But you can also give a lang attribute to the style, so you could say lang is SCSS, actually. >> Oh, nice. >> Uh and then you're not actually writing CSS in your CSS cells, but this little piece is SCSS. And it will it will know and have to block to that. >> Yeah. >> And that works for HTML languages like Markdown and Pug and stuff. If you're writing in HTML and you just do like div lang Pug, you can just write a little bit of Pug in an otherwise HTML file. >> Mhm. That's cool. >> So, that's the idea. This is called inline block processing, where you can switch languages kind of Um far. That should go. Kind of cool. If you open the build output, you can see how we do it. We just kind of extract that little piece of Maybe not. Maybe it's just in the You'd see it still see it in the HTML file. Sometimes you can see little files that we've we've split off. I guess only we see that. I shouldn't have [snorts] said anything. We'll cut that out and like process it and then put it back in. >> Yeah. >> Uh kind of a neat one. All right. So, okay, so we covered the classic block. You can enable it specifically now. Like it if you go browsing for blocks and then you go like the classic block is one that you can just choose and pick. Um, this is potentially a confusing moment. It's the very first block, I guess. You say add to pen and it's actually not going to work. It'll probably say classic zero. Oh, we changed the we changed the the output. So in in that block panel, it'll tell you why, which is kind of nice. >> Uh, like if I go to file >> you're looking at the build process, which is the >> Here. Oh, right. No pen.html file is found. >> Right. It doesn't work on .html files. You have to kind of ask for the classic block behavior and the way that you ask for it essentially is by naming the file .pen.html or one of the other processors we support. So, if you do that >> Like that breaks the page. >> leave that, too. It'll just show up in the body instead. Now, if you rename that file that you have with pen in it, you can rename from here, but it'll I think it'll open the >> Do do do. Whoops. Okay. Oh. >> It's like halfway down, but wherever you want to do it. >> If I did a Oh, was it there, too? I'm just going too fast. Rename to .pen.html. >> Now the classic block's going to pick this up. >> And we get the >> tag will get linked to in the in the in the body instead. Who cares? That's perfectly valid. And then you can Now you can write HTML in that in that way that like is whatever. So, just so you know, if if people are interested in the classic block and you flip it on, at the moment you do need to like um you need to know that blocks match on file extensions for the most part. >> Right. >> Um So, you got to know that. Anyway, so now you like this. You know, you're like, "Okay, I'm a classic block kind of guy. I've been using CodePen for 10 years or whatever it is. That's how I want to roll." That's good. You know, and maybe you like other stuff, too. Maybe you like light blue backgrounds for one thing, as you do here. >> Yeah. >> And you like lightning CSS or whatever, or you always have a reset style sheet of your own linked up, or yeah, you always have an H1 tag or whatever. We're talking templates now. If you hit save on that, I guess it's an unsaved pen, so >> Oh, yeah. >> Another thing you can do is save as private right away, like just command K and then type save as private. Like I do that all the time. Like kind of Um This is you're like, I want this to be private right away. >> I think I set my default to save as private. >> Yeah, you can also have a global default that just all pens are private by default. That's a nice way to work. Uh but as you know, you can you can make any pen a template. So you can under that controls menu that there's just a toggle and you just flip it on template. Fine, now it's a template. It doesn't do a lot. It does a little bit. Notice if somebody else visits it, you can use your own template. In the header, there's no use template button. >> Yep. >> Yeah, it'll just open up a new pen with this as the starting thing of it. That's fine. Also, we should pop out to the just pop out to the home page real quick. Just click the CodePen logo, I guess, or whatever you want to do it. >> Whoops. >> Um now that there's like this create page, so if you you know where the on the left where you're creating pens and classic pens and collections stuff, that where it says create and the little text over that, it that templates thing pops out, or you can just click the word create. This is like this special page now that gets you back to your recent work and stuff, but there's this whole section on templates down here now. That one you just made, we are now seeing. It's being weird with the screenshot thing. It's just a bug. >> Um well, um now you have it available there. So if you get used to using the create page, all your templates are here. >> Mhm. >> Uh and then there's official ones, too. So Code we're providing a bunch of ones on that create page, too. That that can get you there. It's just one of those. Yeah, these are all yours, but see where it says green personal >> over time. Uh >> Yeah. No, it's halfway down. It says start with this. Yeah. >> Oh, official. >> you and then once the bookmarks are like can be other people's. Yeah, it's just like oh, how do you use React again or how do you use the classic block again or how do you use GSAP on CodePen or whatever. We have like kind of a lot of them in there now. So, we're providing templates in a way that we didn't a ton before. >> Yep. >> Uh but okay, great though. This is the more important thing and I know you like this, so we're going to do it. Maybe that tab is still open somewhere. The actual pen that you've actually already done this with. >> Oh, the other one. Yeah. Yeah. I think I have it here. There we go. >> Yeah. This is like Kevin's actual real template. So, this is already a template, I think. Now, you're in minimal UI mode, so we're like not seeing all the stuff in the header, which is fine. But if you open the pen settings now, you can not only make this a template, which you should, flip on template. And then once it's a template, it can be the default template. >> Yeah, I wasn't clicking on this one. I was clicking where it said starter template. >> Yeah, which is just to like go look at it. >> Yeah. So, make people happy. >> make that benign, like unclickable. Wouldn't you? >> Uh then current default template, so it is set as the current default template and now if we go back to here >> It's really emotional roller coaster for me. pen.new/do And there we go. That worked. >> Oh my gosh. The point of this is we should have done this like 10 years ago. That a pen itself should be the the default template. We never had that before. We had this weird thing where you could go into editor, you know, it's still there now for the classic editor. You go like when I make a new pen, make sure it's SAS or whatever, which is okay, but it's not as like fine-grained detailed as like make this exactly like this. >> Yep. >> Yeah. >> And now I know I can update this. >> out in a week or so is um it will match the UI 100% exactly. Like what files you have open, what stuff is collapsed, and just every little detail of >> Nice. >> Um >> Yeah. Yeah, cool. That's the default template thing. So, there's just templates. Templates have some value on their own cuz like maybe you do have five or six templates that you use. Everybody's different, you know? I have I probably have 10 or something of of different ones. Some of them are useful in things that you don't do that often. I do find that green sock one real nice cuz it's like it loads up all the stuff in the right way and all that, but I don't use it every day. >> Right. >> But the default template it definitely has more value where you don't have to even think about it. It's just like, "Yeah, just do it like this every time, please." And that minimal UI mode will stick to, meaning like if you like that on, it's just going to be on all the time until you turn it off. >> Yep. >> It's not like a per pen thing or whatever. >> Yeah. Uh no, but thanks for coming on showing me around for all your time and in in doing all that cuz this sort of went through a lot of stuff there. So, yeah, it was really cool and I I think you should be really proud of what you guys have made as you're sort of finishing up on everything here. >> Yeah. Thanks, Kevin. We'll talk soon, man. >> Yeah, definitely. Thanks again. And there we go. A really big thank you to Chris for walking me through all of that, all of his time, and everything else. If you want to check out CodePen, of course, it is linked in the description along with a few other things. And with that, I'd like to thank my enabler of awesome Johnny as well as all my other patrons and channel members for their continued support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.