Pins are dead!
Long live bookmarks!
Pins was never a good name for the feature we have on CodePen where you can mark a Pen or Collection to more quickly jump back to it from anywhere on the site. The word is too similar to “Pen” that it’s just awkward, not to mention it’s not exactly and obvious metaphor. A bookmark is a much more clear term and icon, so we decided to switch to it.
Switching the UI is kind of the easy part. It’s kind of a cultural thing at CodePen, but when we make a change like this, we change it 100% through the entire code base, down to the database itself. In order to do that, we had to chunk it into stages so that those stages can roll out independently, but in order, to make it seamless.
Now that it’s done, we were able to extend the functionality of Bookmarks a bit, such that bookmarking a template is extra useful. One place to see that is on the new Create page.
As an extra bit of history, the idea for Bookmarks came from Katie Kovalcin when we worked with Sparkbox for a redesign ages ago, then Klare Frake took the idea home.
Time Jumps
Video Subscribe on YouTube
Transcript
[subtle upbeat tune]
Chris Coyier: Well, I believe that counted down properly here in this beautiful riverside studio. We're back again for another CodePen Radio. This is episode number 402. That's right! We're back after a two-year hiatus.
We heard from a number of you. We asked last week, "Hey, are you still subscribed to this thing? Did your podcatcher auto-unsubscribe you after a ridiculous hiatus?" But no. We heard from many people who the show popped right in there, so thanks for listening. Yeah, and we talked about email sending last week with Marie. I actually have Mr. Stephen Shaw with me today. Hey, Stephen.
Stephen Shaw: Hello!
Chris: Yeah! We're switching it up, you know. Who knows who's going to be on? Somebody from team CodePen, presumably, will be on the show.
[Laughter]
Chris: Probably mostly weekly. That's the goal. Of course, we're still finding our footing.
Chris: We talked about email sending last week, which had a little bit, but not much, to do with the new editor. The reason for our long absence was so that we could work on it.
It was an unbelievably large project. I say "was." It still is very much so. It's just in private beta right now, but it's feeling like we're rounding the bend.
I just can't even explain to you. We're going to have so much to talk about, just not only what it does and how it works, but how hard it was. [Laughter]
Stephen: Yeah. We're going to make up for that two-year hiatus.
Chris: It was so hard.
[Laughter]
Chris: It's still so hard. But okay. We're going to tiptoe our way into it. We're not just going to do an episode that says, "Ah, this is the 2.0 editor! This is every single thing that it does!" We're not going to do that.
We're going to pick off pieces of it. We'll introduce it. There's just too much to talk about all at once.
We're going to talk about little baby parts of it, the APIs necessary and all that stuff, and little changes that have happened and shipped as we prepared for it. This is one of those things.
It was a change from a feature that I almost hesitate to even say it. I don't even want to say it publicly because the whole point was getting rid of it.
Chris: Pins. It's unavoidable that we're going to have to say it a bunch this time.
We used to have a feature called pinning. We still do. It's just not called pinning anymore. It's called bookmarking, right?
Stephen: Yeah. That was a long-time coming change that needed to happen. I don't remember why we launched with it named "pins." A site named CodePen.
Chris: It may have come from way back from the Spark... Ooh... That design agency in Ohio. Good friends. We use so many things that are called "spark" - something. Oh, anyway, they helped with the redesign at one time, and I think it was Katie Kovalcin in there had the original-original-original idea to pin, like, "I'm working on this thing, so just mark it, and I can come back to it later." It took forever for us to ship it. We eventually did.
The idea was a little pushpin. We thought that metaphor was okay.
Chris: Correct.
Chris: But the word-
Stephen: Well, at the time, browser bookmarks were still more of a thing. That's kind of declined in popularity.
Chris: Oh, do you think that's why we--? Yeah. Maybe that's... So, Web apps can use it now because nobody bookmarks anything anymore.
[Laughter]
Stephen: Right. Yeah, I think we're allowed to now.
Chris: Okay. That's fair. Yeah, I've seen implementation, as I've been exploring browsers and stuff. The bookmarks bar is still occasionally popular in some of them. I kind of get it. But it's certainly out of phase.
Anyway. Gosh. Not to beat around the bush here. Pins are dead. Bookmarks are alive. They are basically the same thing, but it was an opportunity for us to do that renaming such that people intuitively understand it, which I think has happened - so, success.
Stephen: Yeah. It's so much easier to say now.
Chris: Yeah.
Stephen: "Pin a Pen to your pins."
Chris: That was it! Say it!
Stephen: "Pin a Pen to your pins."
Chris: "Pin a Pen to your pins."
Stephen: Unless you're Peter Piper.
Chris: Yeah.
Stephen: Our podcast editor is probably hating all these P's right now.
Chris: Right. It's not even that pins is so bad. It's bad anyway. But the fact that we have Pens is ridiculous.
Stephen: [Laughter] And to spell it out: p-i-n-s for the pinning feature and p-e-n-s for the code.
Chris: Yeah.
Stephen: Yeah.
Chris: So, this happens, and we just did it and shipped it. I think there was probably a blog post or something, but nobody cares. It's not like that big of a feature that you need to have a release party for something like that. It's a tiny little thing.
Of course, for a small team on a huge app where it touches a million things, to us it was a bigger deal, and that's what this podcast is for is to kind of dig into those. That's what this podcast has always been for is, like, "What was it like, though? What was the thinking? How did it work? Why did you do it? How did it go after you did it?" That kind of thing. That's the idea.
Chris: I think an interesting way into this is that sometimes these things are a little political internally. Not in a bad way, but you need alignment from the team, like, "Is this worth doing at all right now? Why are we doing it right now? How can we get people to say yes to this? Or, if you care a whole lot about it, how do you sell that? Or, if you care a whole lot that we don't do it because it's too distracting, how do you get other people to shut up about it?"
[Laughter]
Chris: That kind of thing, that's what I mean by politically. And this one had two interesting angles. I think everybody wanted it when it was floated originally because of the name, so that was a big plus one from literally everybody.
Stephen: Yeah.
Chris: It was like, "Ooh, bookmark? Yeah."
Stephen: That was almost immediate buy in.
Chris: Some people... A lot of times, we make a design document about this. It ends up in our shared Notion, and we kind of write up our thoughts and why. A lot of people, even if you don't even read the whole thing, you're like, "Oh, pins to bookmarks?"
The title of the document probably was "pins" with a little arrow, "bookmarks."
Stephen: Yeah.
Chris: They see that, and they're like, "Thumbs up. Looks good." You know? But I think Stephen and I (maybe others, too)--I can't remember everybody involved--were into it because it had some... It just cleaned up a lot of stuff. It's like we needed to do API work around it anyway, so we had a chance to do that. And that there is a kind of inherent connection to templates, right?
Stephen: Mm-hmm.
Chris: It's related to our templates work, which is probably worth a whole episode, but we'll touch on it here as well.
Stephen: Yeah. Well, it's a really useful feature that I think a lot of users did actually take advantage of. But it wasn't very intuitive, I think, at least partially because of the name and the icon. It wasn't as understandable as something like bookmarks.
By kind of rebranding it a little bit, that kind of opens it up a little more, too.
Chris: Sure. And what is it, anyway? I guess we're probably far into this, but what is it? What is a bookmark, Stephen?
Stephen: It's a way to pin your Pens.
[Laughter]
Stephen: It's really just a way of saving work to come back later. It doesn't have to be your work. You could save somebody else's for reference or templates to use later on. But it's kind of a quick access collection.
Chris: Right, and collections, I guess, you could pin, too, right?
Stephen: Yeah.
Chris: Or bookmark now. And that we tried to make the little place where you access them available everywhere - available in more places. Certainly, you can find a Pen to get back to from the homepage, which is kind of like our dashboard, which has all kinds of ways for finding your way back to things. But you're not on the dashboard when you're in a different Pen. You know? So, to have this quick access thing in the persistent (I guess it's header sometimes, sidebar sometimes).
Stephen: Yeah.
Chris: That sounds inconsistent, but it's true.
Stephen: I think it's always just been in the header.
Chris: Always the header? Yeah.
Stephen: Right next to the little user menu icon.
Chris: Yeah. Okay. Well, it's up in the header all the time no matter where you are on the site, so that's the point about the easy access is that if you have a Pen that you're actively working on right now or that you reference a lot or just for any reason at all you want to get back to, hitting a bookmark on it can be a way to get back to it really quickly.
You could literally bookmark it in your browser if you wanted to. You could memorize the URL for it. You could make a short link for yourself. There are lots of ways to do this kind of thing, and this is just one of them.
If you've never used it or don't care to us it, fine. It's just a little bonus feature for people. It's not required.
Stephen: It's not taking up much space in the UI or anything.
Chris: Right.
Stephen: It's just there.
Chris: Right, right, right. So, we'll talk about the templates thing in a minute, but we can get into some of the other behind-the-scenes stuff that is why this is worth doing a podcast about, I guess. One thing, we get rid of the pushpin - meaningless, weird thing. Now it's the classic bookmark thing. It's a tall rectangle, and the bottom of it has little frays on the bottom of it. It looks like a bookmark, and so just better.
Stephen: A little ribbon, basically.
Chris: Yep. And when you're on... When you're somewhere that you can't bookmark, it just has an arrow next to it indicating, like, "Open up your bookmarks in which to look at." But if you're on a page that can be bookmarked, it kind of splits into a double button where the bookmark itself is what you click on to do the bookmarking, or un-bookmarking. Then the arrow is split off from it, which you can still access your existing bookmarks. There are kind of two different UI phases for it. That's kind of an interesting thing. And the icon is just better, so there's that.
Then there is how do you ship a feature like this because, as you know, the UI of a website is one thing, and the documentation is another thing. We use the word "pin" historically all over the place, and that is database tables. That is API terminology. That is variables inside of JavaScript.
Stephen: Component names.
Chris: Component names, classes in HTML and CSS. It's everywhere. And when you make a change like this, it is possible to do very little. Just change the icon and ship the new icon. You know? There you go. Now it's the tiniest little PR ever, and you've accomplished maybe the major goal, which is getting people to understand it better, because using it might be good.
But that's sort of culturally not how we roll here. We think about it more like, "What would it look like to be fully done with something like this?"
Stephen: Well, a small change like that is just short-term. If you're changing the text in the UI and the icon, that's fine. But when you're going to maintain that feature or if you've got to change your database and all this data is referencing pins (p-i-n), there's not going to be any callback to that, especially if somebody is new to the team or things have changed so much since then.
Trying to keep everything consistent has long-term maintenance benefits.
Chris: For sure! Your public docs could just be wrong all of a sudden. Third-party content that you don't even have any control about can turn wrong - whatever. Getting, doing this comprehensively is kind of our style. I think we get that from Uncle Alex, too. He's really big on, like, "We're going to do all of this."
But we did start with the UI. I think that is a way to get it going. For whatever reason, that is certainly... And we phased this out.
Actually, Rachel did a good job of writing up how we can... how it basically has to be done. It isn't like, "This is a way you could do it." It was like, "This is kind of how it has to be when there's so much data and database stuff involved."
But we did ship the UI first because that really doesn't have any dependencies. We kind of just fixed it all up there. And that involves not only changing the icon but the class names and use and all that kind of thing.
Now you're in this sloppy place where it's const pins equals get pins or const bookmarks equals get pins - or something. You're like, "Eww!" You can really feel the grossness in the code when you're halfway through like that (or a fourth of the way through when you just do the UI).
But we did ship that because we had written up the additional phases. And she's like, "Okay, well, here's the way to go."
Just to complicate this a little bit more, we still have two APIs internally. We have kind of our older API, the Rails-based one, and it's not bad. We have been forever moving to a Go-based API, which we mostly use now. But there are reasons to hold onto the old API, too. So, there's that.
But there's only just one database. So, we're like, "We'll do the DB next." That's the next phase is to get the database ready.
But it's kind of weird because one of the ways to get the database ready -- well, you know you have these intermediary phases to go through -- is to say that a column... Change the column name, or even the table name. Is there a whole table for pins? There might be. I can't even remember now.
Stephen: I think it got kind of merged into collections a few years back. It was initially a separate thing, but now it's a type of collection.
Chris: That's right. I forgot about that. We forgot to put that in our notes. It's exactly what it is.
We've ended up reusing collections a couple of times in interesting ways.
Stephen: Mm-hmm.
Chris: You can reorganize the Pens on your profile, like, which one do you want to show first or make bigger, and all that stuff. That is managed by a collection.
Stephen: Yep.
Chris: The data structure fits pretty nicely for that, so we call it a collection type, right? Now there's a collection type. It used to be pins, but if you're going to do this comprehensively, the collection type for a while then becomes either pins or bookmarks. And new ones, like a new user signs up, they're going to have a collection type of bookmark, but existing ones can also just be pins.
You set up the database so it's permissive, so it works either way. That's kind of a middle ground thing because you kind of have to do that clean, so no downtime, no weird stuff like that. Make the database cool either way.
Then you go change all the APIs to, for the most part, deal in terms of bookmarks (when you can). You're not making any new bookmark data, but existing pins data is okay to use. It looks for bookmarks first. If it doesn't find it, it looks for pins - stuff like that. And it's all over the place. [Laughter] It's kind of working both ways.
Then you write a bunch of tests, too. I remember doing that part of it. We just wrote a ton of tests that are like, "Whatever is in the DB, mock out DB in both ways and make sure APIs work both ways for everything."
They're funny tests because then the last phase is you rip out the old way. No, you run a database migration that changes all the old data from pins to bookmarks.
Stephen: That's very important.
Chris: Yes, that's the final cleanup way because it's actually just data, too, not just code. You fix the old data. And because everything worked either way (before and after that migration), everything just works identically because you've set it up to work either way. Then, finally, the last phase is you can rip out all the code that referenced pins at all.
It's all these little individual steps and phases to make it all work.
Stephen: And that last one makes for such a nice PR, just seeing the red numbers.
Chris: Even ripping out those tests because the tests don't matter anymore. They're not relevant. So, you wrote these tests for the space between two PRs.
Stephen: Yeah.
Chris: But you had to. I remember writing them and finding problems.
Stephen: What as the timeline on all of this? It was pretty spread out just because we were....
Chris: Right because it's low priority.
Stephen: Yeah.
Chris: We would just squeeze it in once in a while. At least months.
Stephen: Right, so we had a lot of code on production for months running these kinds of transitionary phases.
Chris: Yeah. Yep. Months. Months, people. But obviously, we were doing bigger work in between all that, and it was all phased out, so you could just grab... And because it was, you can do it async.
You know you need to do step two ... do step three, but you can do step two any time. It doesn't hurt anything. It was pretty satisfying, actually. It's kind of a cool way to work.
Stephen: Mm-hmm.
Chris: As long as you have somebody smart like Rachel to make sure you don't screw it up.
[Laughter]
Chris: Pretty nice, and now it's done. So, now we have bookmarks on CodePen. Of course, that was just like, "Yeah, yeah. We wanted to change the name, and we wanted to do it the most maintainable way ever." Oh, of course, the step after you finally ship it is to change all the docs. So, we did that, too.
Stephen: Oh, yeah.
Chris: And updated all the blog posts and reshoot old video if you have to - and stuff. There wasn't so much.
I remember it being like, "Oh, that wasn't that bad." Part of me thinks that's going to be the worst part, but it's not really.
Chris: But here's the thing. We wanted to talk about templates. Why does this have anything to do with the idea of a template?
Stephen: Yeah, well, one of our goals with the new editor is to just help users get up and running really, really fast. And one of the key ways to do that is templates.
We've had templates on CodePen for years. Probably just about as long as CodePen has been around. But the way that they've been accessible and the way that people have used them has not been very front-facing, I'd say. It's kind of buried in a sub-menu of the UI.
Chris: Oh, gosh, were they ever. You had to go to the homepage and then click "Pens." But the little dropdown area next to "create Pen," and then it would pull down not your templates yet.
Stephen: Nope.
Chris: It would pull down, like, "Oh, you want to make a view Pen?" - and stuff. These are concepts that are going to die in the new editor because the new editor supports everything. Then you'd click templates again.
Stephen: Having a further dropdown.
Chris: Yeah.
Stephen: [Laughter]
Chris: That was pretty buried. That's a little embarrassing, really, because templates can be quite a useful feature. In fact, think of some other apps like Canva. That's all the app is. It's templates.
Stephen: Mm-hmm.
Chris: I know we're not Canva. We're a different thing. But some apps take the idea of templates and make them the whole product. That's what the product is. Even something like WordPress is pretty much like the reason you start using it is, "I don't want to design the website. I want to pick out a template and then go."
Stephen: Yeah.
Chris: Templates can be big. We know that, and we want them to be bigger. They're helpful.
Stephen: Right. Bringing those to the forefront a little bit more and making it so that you can explore, like Canva or WordPress, and be able to see what's out there. But also, being able to bookmark the ones that you want, the ones that you actually use. Whether they're yours or whether they're CodePen ones or some that others have made.
Chris: Yeah.
Stephen: Being able to have quick access to those templates that you're going to use frequently that help.
Chris: Exactly. If you've taken the action of bookmarking a template, wow. I don't know. It's a bigger deal than just bookmarking any other page.
Stephen: Yeah, that's a good signal that the user is going to return to that. They want to keep using that.
Chris: Mm-hmm.
Stephen: We built out this "Create" page. It's actually something you can use right now. If you're looking at the CodePen sidebar, there's a little text that says, "Create" right above pin, project, and all that. If you click that text, it'll actually take you into it, and so you can see your recent work, the last things that you were working on. But then right below that, we've got the templates laid out there for you to explore a little bit. And your bookmarks should be the default one selected unless you don't actually have any bookmarks already to go.
Chris: The idea is that bookmarked templates become much more of a first class citizen on CodePen because, as you do them, there's this special page right on essentially the homepage of CodePen that's like, "Here they are," which even if you don't use them now, maybe that will convince you that they are good.
Make the template that you want to use. It's all the technologies and code and stuff. And you know what a lot of people use them to use less code.
In the new editor, that was some of the first feedback we heard right away is, "Can I start out with essentially nothing?" That's kind of how it is now on CodePen, and they want to maintain that.
I'll tell you. In the new editor, it's pretty minimal, but there's more than there was because now, for example--we haven't gotten into this on this podcast, certainly--the HTML, you can see the complete HTML document. So, there's code that you're looking at instead of the absolute blankness of the old editor. We did that on purpose. That's a decision.
If you don't want that, though, certainly you could make a template with absolutely no code in it and then use that. Then it's just as front and center as anything else is. That's a big deal.
Stephen talked about the "Create" page, but there's this thing that I guess I think is an even bigger deal is when you go right to a blank new Pen, brand-new Pen. This is the new editor I'm talking about. You'll see your bookmarked templates there, too. That's totally new to the CodePen world.
Once you were in the editor, you were in the editor. There are no more chances to use a template. We wanted it so you get to the editor because a lot of you have muscle memory of, like, "I want to work on something," and you'd just go right to the editor and make a new Pen.
I wanted you to then be able to choose a template. Keep that muscle memory but be like, "Oh, yeah. Actually, I do want to grab a template," and have them still be right there for you. There's UI for that.
We're going to show you some official templates or popular templates or something there - or something. I don't know if it's 100% decided yet. But if you've bookmarked templates, that's going to win. Those are the ones that are going to be there. That became a big deal.
I think that's what made me want to get on this job of changing pins to bookmarks and all that stuff. I wanted to finish it because I wanted all the APIs done in the new API where they needed to be, because I felt so strongly about that.
I want you to pick a template after you get to the new editor - if you want to. You totally don't have to. As soon as you do a little coding and hit save, if you haven't picked a template, that's fine. It's not in your face. You don't have to pick a template. It's just you can if you want to.
Stephen: Yeah, it's a shortcut for you. It's great.
Chris: I think it's there, so people will have ... blank. I noticed that as a little trend. If you want absolutely nothing, you know, make your own little template. I call it blank.
Maybe we'll ship an official one that's like that, or maybe somebody else's Pen, somebody else does a great job with it, and everybody bookmarks theirs and they use that. That's fine, too.
Stephen: Well, and there are many different interpretations of blank. Do you want blank with TypeScript or whatever?
Chris: Oh, yeah. Sure. No code, but it has Prettier and TypeScript and Babel, or whatever else. I could see that. I could see that easily.
Then we want templates to be a bigger deal. Again, we'll do a whole show on this. But I don't want you to wonder how to use certain, especially very popular, technologies. I don't want you to be like, "How do you use React on this thing?" You should just be like, "Oh, it's right here. CodePen itself is showing me. Here, it's like this."
And it works great now. Just saying. Super nice.
Stephen: And now you can bookmark.
Chris: Yeah. Yeah, and if you hate React, then bookmark the Vue one.
Stephen: We'll make it easy for you.
Chris: One or the other. Just kidding, but yeah, either way, either way.
All right, so we renamed pins to bookmarks. We made them work across both of our APIs. It took forever, but it was a small, little job. We phased it all out. The phases were very interesting to me. I thought that was really a nice way to work on this particular feature. One of those, like, what's the overused metaphor? "Changing the engine while the plane is flying," or whatever. It was one of those, like, make sure it never doesn't work and doesn't cause any downtime or anything.
Got it all done, and our secret reason is because we really wanted it to work better with templates. And now it's done. It feels good, doesn't it?
Stephen: And you'll reap the benefits very soon.
Chris: Very soon. Yeah, so stay tuned to CodePen Radio. We're going to do more shows like this digging into our features. Feel free to suggest anything if you want to know how certain things work. But I'll tell you, once we get started with the individual, new editor features, it's going to be hard to stop us because there are so many, and the details are so deep. It's going to blow your minds!
[Laughter]
Stephen: Get ready.
Chris: All right. Bye-bye.
Stephen: Bye.
Chris: See you later.
[subtle upbeat tune]