We just recently published the 300th CodePen Spark. Marie joins me on the show, as she leads up the creation of the vast majority of Spark newsletters. We get into things like why we do it, how we create it, how we send it, and things we’ve learned along the way sending a newsletter of this magnitude. We have some interesting failsafe procedures in place. Plus we get into some of the analytic numbers behind what we’re doing. Here’s to another upcoming many hundred more!
Time Jumps
- 00:19 Welcome
- 01:03 What’s the point of The Spark?
- 03:15 How we build The Spark
- 11:36 When we send it
- 12:56 Our most hated issue
- 15:23 Sponsor: Notion
- 17:09 What’s new in The Spark?
- 25:40 Two person sign off for the Spark
- 28:54 Advertisers for the Spark
- 30:04 Analyzing the numbers for The Spark
- 34:40 What goes in to The Spark?
Sponsor: Notion
Notion is an amazing collaborative tool that not only helps organize your companyâs information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.
Show Links:
- Riccardo Zanuttaâs âAnimations & Cool Effectsâ: https://codepen.io/collection/XgZLNA (started in 2014!)
- AndyManâs âPatterns, filled spaceâ: https://codepen.io/collection/XBLxoe
- Eric Karkovackâs âASCII Artworkâ: https://codepen.io/collection/MgaYzZ
- Jhey Tompkinsâ âSpeedy CSS Tipsâ: https://codepen.io/collection/bNWWdO
- Peter Nortonâs â3D CSSâ: https://codepen.io/collection/GoZQxG
- Bramusâ âScroll Linked Animationsâ: https://codepen.io/collection/xKzjpo
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello. CodePen Radio 384. We're going to talk about the CodePen Spark again because it's coming up on its 300th edition and we love a good milestone show around here. Marie, it's your baby, so you are with me to talk about it.
Marie Mosley: Hey, everybody. Yeah, I'm excited. 300 issues of the Spark. That means six years, almost six years' worth of, every single week, putting out a newsletter.
Chris: Yeah, roughly 52 weeks a year they say, so almost 6.
Marie: [Laughter] I don't know if it's rough. I'm pretty sure they're strict on that one.
Chris: It feels rough. It feels rough. Let's see... 72. How many weeks are there?
Marie: Fifty-two.
Chris: Fifty-two times seven.
Marie: I feel like that's firm.
Chris: 364 days. It's 364 days.
Marie: Oh, okay. Okay. [Laughter]
Chris: I'm just saying.
Marie: Are we going to get into a fight about once a week?
Chris: Yes.
Marie: All right.
Chris: Let's talk about time zones next.
Marie: [Laughter]
Chris: We started kicking this off back in 2016. The whole point of this was (and is) what's the coolest stuff that you should be paying attention to. Honestly, it's mostly on CodePen. [Laughter] We'll put whatever in there, but usually there's some CodePen connection at all. There isn't 100% always.
Marie: Yeah, it's either on CodePen or it involves someone from the CodePen community doing something cool. The CodePen community is very big, and the Web development world is very big too, so we always have opportunities to bring in stuff from elsewhere.
Chris: Yeah. I kind of like that because, for a minute, I was like, well, shouldn't this just be like why would we care if it's CodePen connected? Shouldn't it just be what's in front-end development? Now I'm kind of glad that we kind of didn't lean that far because there are tons of newsletters like that.
Marie: Yeah, of course.
Chris: That are like, what's new in Web design - or whatever? This is like, yeah, we're going to touch on what's new in Web design through the lens of something related to CodePen because it's almost easy to draw that connection.
Marie: Yeah, where the new things are happening.
Chris: Yeah.
Marie: Yeah.
Chris: Pretty easy. We've done this twice before. I'm glad we're like clockwork, us. We did the 100-mile episode. That was episode 199 when we hit the 100-episode milestone. Huge. And again at 200.
Marie: Mm-hmm. Yeah, so here we are on 300.
Chris: Yeah. Here we are on 300. We still do this newsletter. Clearly, we have found value in it. Clearly, it's an important thing at CodePen that we do. It sure is. It's nothing but gotten bigger since then.
I don't know if it's exponential growth, but I think it's faster than linear because it's just fricken' huge. It goes out to millions of people.
Marie: Yes.
Chris: It's crazy.
Marie: Yeah. Yeah, it does. We talked about, in that first episode that you just mentioned there, the 100-issue milestone that we did, we talked about the very early days of the Spark and what was the inspiration between starting the newsletter and our very beginning thoughts on what it would be like.
Chris: Yeah.
Marie: That's a fun one to listen to now because it's been many years at this point. Then at the 200-milestone, we talked about the real technical leaps that we had taken since the very early days.
Just to speak briefly about the very early days, the very early days was literally handcrafted HTML. We were writing it into a Pen at first. Do you remember?
Chris: Yeah.
Marie: Then we would paste it into--
Chris: You'd think we would have used MailChimp or something. I feel like most people's early days are like, "Oh, we reached for outside tooling," and then we grew into our own tooling." In our case, we're like, "We just raw dogged it."
Marie: [Laughter] We did from the beginning, and I think, even at the very beginning, we realized this has the potential to get too big for MailChimp, so before it would start to really cost us.
Chris: Yeah. Love MailChimp. It's freakin' expensive.
Marie: Yeah. Yeah, for us at our -- yeah. You know. But yeah, it's obviously also a great service, but yeah. That first episode there, the first look back is really the rough stuff. [Laughter] It was hard to do.
Then we really did smooth it out. The 200 episode talks about that, and then also Alex and I talked about it in the podcast episode 274, which is about his move into Golang. We talked about what we did to speed up the send of the Spark.
It used to take days to send the Spark. We would start sending on a Monday morning and it would finish on Wednesday afternoon.
Chris: Ah...
Marie: [Laughter] Which stunk, realistically.
Chris: Three days-ish. You know? Wow.
Marie: Yeah, about. Yeah, so we sped that up with Go, and now it all sends within, I think, 15 minutes - somewhere in there.
Chris: Some of that stuff was technological and some of that stuff was just a mistake. [Laughter]
Marie: Yeah, we had a little problem. Yeah, and we actually talked about that in the milestone.
Chris: Did we really? Good.
Marie: Yeah. Yeah, so there's a lot of good audio history of the Spark to look back on if you're interested in the evolution of it. I think it's interesting to have done that. I'm glad we did. Like you said, it's nice to have these milestones.
Chris: Let's do -- I'm going to do an embarrassing one for us, so when we listen back on this one, we'll be like, "Oh, my God. Is that really how we did it?"
Marie: [Laughter]
Chris: Only because we like our system now, right? It's pretty good. It's never a problem, miraculously. It never stalls out or anything. It's really solid. I can't even remember the last time we had a problem with it.
But it is funky how it's put together. Yeah, there is Go involved. But there's all kinds of stuff. One of the things that's very important is the homemade CMS thing, right?
Marie: Mm-hmm.
Chris: Which is just terribly not difficult for us to do these days as very seasoned developers who can craft APIs and throw together front ends with our existing, very nice pattern library and stuff. To put together a little thing that--
The point is when you make a new Spark, you give it a title. You give it a description. Then you give it a bunch of items. Right? That's bread and butter easy crud stuff for us to put together.
Marie: Mm-hmm.
Chris: We built it, and then we have refined it UX-wise over time, and that's the core of a Spark. That is a Spark. It's kind of like logging into WordPress and writing a blog post or something. That is the blog post.
But then it does need to get drafted up into a full chunk of HTML to be sent out, so that's kind of a second process. There's also what you might call a CMS for the shell of the Spark, like the overall design and the thing that loops over the items from our database and plops them into place and takes the news and puts it into place and all that kind of stuff. There's almost like two CMSs that need to interface with each other, the design and shell of the Spark and the content of the Spark.
Marie: Mm-hmm.
Chris: And they don't sit right next to each other. The CMS is our own. It's absolutely just 100% add a CodePen URL and an internal CodePen URL that we work on. But then the actual shell of the email is over on Postmark (where we keep all our other emails). And we do that very much on purpose because they basically are an email CMS.
Marie: Mm-hmm.
Chris: But what's funny is that--
Marie: And a great one.
Chris: They are really good.
Marie: That one is really nice to work with.
Chris: It is really good. What's funny is that at the time we started using them, they forbade marketing emails. They only would do transactional emails. But we were like, "Uh, this is so nice, though. Why would we--? Can we just manage the Spark template over there even though we can't actually send it over there?" [Laughter]
These days, they do marketing emails, so once we find a couple of wheelbarrows full of time sitting around, there's a possibility we can convert to it as long as the price is right.
Marie: Yeah.
Chris: But we actually send the Spark. It's the only -- no, we send two emails through a service called Spark Post.
Marie: Mm-hmm.
Chris: Did I say that right, Spark Post?
Marie: Yes, you're right, and it's Spark Post--
Chris: It's very similar to Postmark.
Marie: Yeah, unfortunately, so we have three things to talk about, which is Spark Post, Postmark, and the Spark. Yes, we have a lot of situations where it's unclear what we're speaking about.
Chris: [Laughter] Yes.
Marie: We have absolutely had complete miscommunications just based on a mixture of those.
Chris: Right.
Marie: But yeah, we send the Spark and also the challenges through Spark Post.
Chris: Because they're marketing emails, and that's just what we're supposed to do. Not to mention their pricing is pretty good.
Marie: Mm-hmm. Yeah.
Chris: It's not as robust of a product as Postmark is, but it's a good product. They do analytics. They send emails. They have some features that they offer that are better than Postmark.
Ugh. Sorry. It's impossible to talk about all the--
Marie: Yeah. [Laughter]
Chris: But think about how we send an email then. You go in there and craft it in the CMS, right?
Marie: Mm-hmm.
Chris: Great. Then when we're about to send it, we have to craft it all together. We've written code--this is all the Go stuff--that hits the Postmark API, sucks over the template. We iterate over the CMS and craft together the complete piece of HTML that represents an email. Now we have that. And then we use the Spark Post API to send them. The way that email sending works is it's basically one at a time.
Marie: Mm-hmm.
Chris: You say, "Here's an email address, and here's some HTML. Send it." You try to do that as fast as you absolutely can.
Now, you can do it at the fricken' speed of light, but you can't quite because the service that you use might get mad at you. You might get throttled - whatever. The service might be like, "You can't hit us that fast." There might be errors and stuff like that.
We can't just not send emails, so that's part of the beauty of Spark Post is they allow themselves to get hit real fast.
Marie: Mm-hmm. Yeah. Yeah.
Chris: With the API, and they'll even help you queue and stuff anyway, so it ends up being a pretty good choice for us in that way. But think of all the little moving parts that have to work together, and it just works great. [Laughter] It's fine. Yeah.
Marie: It does. Yeah. We've smoothed out all the trouble. Actually, before we started the show, I was kind of saying to you so much of the early days of the Spark was just focused on how the heck do we even send this. [Laughter]
Chris: Yeah.
Marie: We would run into real situations just trying to get it out the door, and now we've really been able to spend our time focusing much more on the content and the editorial side of things, so I'm really happy with that.
Chris: It costs us money. All these services that we use, we literally spend money, and it's now trivial money.
Marie: Yeah.
Chris: It's one thing if CodePen was so rolling in it, we were like, "Who cares? Email is barely on the radar as far as cost," but it fricken' is on the radar, so we need to make sure that it has some clear business value. Fortunately, it super obviously does.
Marie: Mm-hmm.
Chris: Some of our advertising happens in the Spark because it's such a big newsletter that there's a decent amount of desire to be in it. We sell those spots, both dedicated issues and regular issues.
Marie: Yeah.
Chris: Still happy to do it. It absolutely more than pays for itself, so good job, us. You know?
Marie: Yeah. [Laughter] I do think, after 300 issues, we can say it's been successful.
Chris: [Laughter] Yes. Yes, quite so, and we have lots of evidence that people get it, they read it, they like getting it, they especially like being in it if they can be.
Marie: Mm-hmm. Yeah. Yeah.
Chris: And that kind of thing, so basically the gist of it is you pick out 12-ish things.
Marie: Yeah.
Chris: And we plop them in there with the description and stuff and out it goes. You know?
Marie: Yeah, every Monday or Tuesday. Actually, we have been experimenting with sending on Tuesdays to see how that goes, but it's usually Monday. Sometimes a Tuesday.
Chris: Nobody cares what day it is, so we get to care.
Marie: We haven't -- yeah, we haven't really got a lot of pushback on that. [Laughter] Yeah.
Chris: Yeah, but we're business and data-driven. If it turned out to be clearly better as far as read rates, we'll just switch.
Marie: Yeah. We had one time where I think it was almost just like a fluke where the Tuesday opens were excellent. We were like, "Whoa! We should always send on Tuesday." Then we tried for a while sending on Tuesdays, and it's like, "No, it's kind of the same." [Laughter]
Chris: Yeah.
Marie: It's not really -- I don't really think it's the day. That's one of the things we also speculate on and wonder about.
Chris: Yeah.
Marie: What is it that gets people to open? You know what? It's funny. I'm looking at the show notes here, and I had intended to put this in the show notes and I forgot to, but I'm going to bring it up now. I'm going to talk about the most hated episode.
Chris: [Laughter]
Marie: Not episode. The most hated issue of the Spark.
Chris: Really?! I don't know. I have no idea what you're going to say.
Marie: Oh, I think you'll remember it as soon as I mention it.
Chris: Okay.
Marie: It's related to an emoji. [Laughter] At the beginning of this year, we put out the Spark issue that covered the top 100 from 2021. The headline was "The most hearted of 2021," heart emoji, and then a couple of other phrases describing what else was in the issue.
Chris: Yeah?
Marie: We just got hammered with unsubscribes, spam reports, all this. Worst of all time ever, ever, ever, and we couldn't figure out why because there wasn't objectionable content inside of the Spark.
Chris: Yeah.
Marie: There was nothing weird about the advertiser, and we just have to chalk it up to people don't like the heart emoji in their inbox because it was the only thing that was truly different about it compared to other issues before or since. We have never--
Chris: So, we can blame -- we can basically blame toxic masculinity really.
Marie: I don't know about that. I think we maybe can blame the emoji.
Chris: Because boys, they don't like that.
[Laughter]
Marie: I'm not sure what to say, but we never did it again.
Chris: But maybe you're worried about your boss walking by or your significant other looking at your inbox.
Marie: To see the heart emoji?
Chris: And seeing little hearty hearts in there.
Marie: Really? Maybe so.
Chris: It could be your secret lover. No, I have no idea.
Marie: [Laughter]
Chris: If that's the only thing, then let's never do it again.
Marie: Yeah, well, we will never ever do that again, and I have hesitated to even so much as hit the smiley face in the copy since that happened.
Chris: I'll tell you it is rare. I get a lot of email, and there is not a lot of fricken' emojis in the titles.
Marie: Mm-hmm.
Chris: I wonder if data has just born that out elsewhere.
Marie: Yeah, and we just stepped into that pothole on our own.
Chris: Because intuitively, I would have thought the opposite. I would have thought, oh, they're so eye-catching.
Marie: Yeah, I wondered if perhaps it would have an effect on the open rate, and that's why I looked. I'm like, "Oh, no!" [Laughter] It did not affect the open rate at all but people hated it. I mean they wrote saying, "Stop sending me this," all this. People hated that particular issue, and we will never make that mistake again. Sorry about the emoji, everybody. [Laughter]
Chris: [Laughter] The last emoji you'll ever see. You know?
Marie: Yeah, you won't see one from me.
Chris: Mm-hmm.
Marie: Not in the headline anyhow.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Notion. That's notion.com/codepen. Go there to get started.
Notion is a beautiful tool. We use it a ton at CodePen. One of the main things we use it for is we use it as a team, right? Everybody who works here has an account on Notion. They log into it, and there are all kinds of--
It's almost like an information base. There's all kinds of information about how we do things and how we code things and how customer support works and how our marketing and advertising stuff work. But it's for planning ahead. It's for planning this podcast ahead, and CodePen challenges ahead.
But probably most importantly, it's for our active projects like what are we working on, what should you be doing right now with those projects broken up into phases and individual tasks and such, and then what's coming up later. We've recently just went through some work digging a little deeper into the Notion feature set and doing more with our tasks like that.
For example, we've given them estimated how much time they're going to take. At least just rough estimates. We can kind of see how much work is ahead on a sprint or a block of work - in a way.
They even have a timeline view that's a bit like a Gantt chart, so you can kind of see, once we finish this, we can move on to this, where these two things can go in parallel, and stuff like that. Real project planning stuff built into there, but it's not too opinionated like you must do your project planning like this. You can use it a little more amorphously than that and kind of take notes in there and put whatever you want wherever you need structure however you need to.
Really powerful app in that regard. Thanks so much for the support, Notion. I bet your team would get a kick out of it for sure.
Learn more and get started for free at notion.com/codepen. That's notion.com/codepen to help you take the first step towards an organized, happier team today.
[Guitar music ends]
Chris: Since our last -- you know we talked about the technology improving and it's gone through iterative improvements since then, and then sending it our new fancy way and all that. What's actually new? What's new-new?
Marie: I'd say the biggest new thing this year is Chris's Corner.
Chris: That's the biggest thing? Maybe.
Marie: The biggest new thing, yeah, yeah, absolutely.
Chris: Yeah.
Marie: It's Chris's Corner.
Chris: Yeah. I mean it doesn't feel that different to me. But it does because I have to do it now, so it's work for me. [Laughter]
Marie: [Laughter]
Chris: So, it feels different to me, but there was always news in there anyway.
Marie: Oh, it's work for you? I've got to proofread it.
Chris: Yeah. That's true. That must be rough.
Marie: [Laughter] Sometimes.
Chris: [Laughter] Yeah, I definitely don't do -- just because I'm not hitting the publish button. Usually that's what gets me to actually proofread. You know?
Marie: Mm-hmm. Yeah. Yeah. But yeah, talk about Chris's Corner because I think it's really cool.
Chris: Well, yeah. You used to write news, which was kind of like maybe some extra industry CodePen stuff that maybe didn't have the best thumbnail potential. [Laughter]
Marie: Yeah, that's usually what would get you brought into the news section where it's just like, okay, well, the Pens preview is completely blank, but this is actually really cool. [Laughter] Something like that would absolutely go into the news section.
Chris: Yeah. But the point that news existed was convenience because I just got to kind of co-op it, you know? I got to just be like, "Oh, well, we don't have to change the CMS at all."
I'll just change that shell, that template. Instead of saying news, I'll just put my fricken' mug on there and say Chris's Corner. Then I can type into the news section in the CMS what I want to write as HTML and done. You know?
Marie: Mm-hmm.
Chris: Then I got to just steal a thing. The point of it is that I get to use my voice to just write how I write, which I've been writing about Web stuff for a hot minute, so I have a little bit of an established style there.
It came a little bit after me selling CSS-Tricks and not having that outlet. I mean, whatever. It's not like the door is closed. I could write for CSS-Tricks if I strongly wanted to, and maybe I will. But the point is now that I don't own it anymore, my time is incentivized to go towards the things that I do own. You know?
Marie: Yeah.
Chris: Getting a chance to, like, I get to slow down my writing, which actually feels kind of good, but not cut myself off entirely. I can still use my voice to write each week in the Spark.
Marie: Yeah.
Chris: That's what I do, and I kind of just pick a theme, or I just do some hot links. You know? I kind of like that I haven't -- I don't force myself to have a particular style. I just write whatever I feel like writing in some HTML and then send it out that week. I hope people read it.
It's very hard to know, in newsletter format. You can have a lot of readers, and they just don't engage. You know? There's just no way you'll know, really.
Marie: Yeah, and we don't have good insight into it because we don't tag up the links with referral things. I guess we could do that if it was important, but if stuff is coming in from the Spark, it's like, "Cool. Good." [Laughter]
Although, realistically, those are links out. We wouldn't even really know anyway. It's not really a huge measure for us. Yeah.
Speaking of links, actually, this kind of came along with Chris's Corner or wasn't long after it, anyway, was that we added the ability to put links inside of a description of an item in the Spark.
Chris: Oh, yeah.
Marie: It used to be that you couldn't, and I actually don't know why, but you couldn't put a link into the description of a Spark item. Now we can, and I've really enjoyed using that because I can add some extra context or kind of go more in-depth into a featured item.
One thing that I did in a recent issue is that I showed the revisions that someone had done and shared publicly of a Pen. I linked to a couple of the revisions so people could kind of compare against what the final product was.
Chris: Oh, nice. Yeah.
Marie: I thought that was really great to be able to do, and that's not something we were able to do before. I'm really enjoying and kind of thinking of new ways to use this extra context and extra ability to expand on things with more links, and that's been really fun. So, I'm looking forward to what we do with that as we have that tool in the box longer.
Chris: Yeah. I think I remember what it was. I shouldn't call it new. It felt new to me at one time in life because it was just HTML 5 that allowed you to wrap an anchor link around whatever the hell you wanted to in HTML - pretty much.
Marie: Mm-hmm.
Chris: Before that, it was kind of uncool to put an anchor link around, let's say, an H3 and a paragraph - or something. I wouldn't say it's best practice now, but you can. [Laughter] You know?
Marie: Yeah.
Chris: What it does is it makes that whole area clickable. I think, in the early days, that was our idea for the email was to have these big blocks, a card. You know?
Marie: Mm-hmm.
Chris: It's got a thumbnail. It's got a little type. It's got a title. It's got a description. Wherever you click, it's going to take you to that link. It's just a big, giant link.
If you do that, and if that's what you're shooting for, in the CMS you need to disallow other. You can't allow other links because you can't nest links in HTML, right?
Marie: Mm-hmm. Yeah.
Chris: We'll just say, "Oh, that description area requires no HTML. Don't use HTML at all in there. Just write with words what you want to say." We'll put it in the template in the proper tags, but no HTML.
It turned out that was just dumb (for a bunch of reasons). First of all, you shouldn't make giant things of text, kind of for accessibility reasons because, as you're tabbing it through, it'll be like "link." Then instead of a link saying something useful like "add product to cart" or something, it'll read the entire--
Marie: Oh, it's the whole thing? Oh.
Chris: Title and description and everything.
Marie: Yeah. Oh, this is much better then.
Chris: Yeah.
Marie: Yeah.
Chris: It's just not necessary, and so what allowed me -- and I just did this on a whim one morning because I'm like, "Oh, that's stupid. I'm going to change it." But when you make a change like that, you've got to change the CMS to allow it.
Marie: Mm-hmm.
Chris: Then change the API to be cool about it. And then change the Postmark template to use the triple brackets to allow HTML inside. It tends to have little sprawling implications. But I was like, "Whatever. I'm going to do it," because it's very stupid that you can't just use a little HTML in the description of Spark items.
Marie: It was so worth it.
Chris: Yeah.
Marie: I'm very, very excited about having that in there.
Chris: Yep, so that's new. That's cool.
Marie: Yeah.
Chris: HTML, it turns out, very, very useful.
Marie: We figured out how to use that.
Chris: Yeah.
Marie: Another little thing that we did, and we talked about this in the episode about issue 200, is that it used to be that we had to kind of use a workaround to even add the images to the Spark, but now we just gave ourselves the same image uploader we use in asset hosting. That's made it a lot easier, too. It speeds things up.
Chris: Yeah, that's cool. It just is like a CMS nicety, right?
Marie: Yeah.
Chris: You're writing, and you just take a screenshot quick, drag it and drop it onto the thing, and there's the image. It doesn't take you out of flow of creating the thing.
Marie: Yeah. Yeah, it's much, much smoother now.
Chris: Yeah.
Marie: In the episode where we talked about the 200-milestone, we were saying that the CMS was kind of like we had the cobbler's children have no shoes problem, and I said we had one shoe per kid at this point. I think we have fully shoed everybody at this point. [laughter]
Chris: Hmm...
Marie: With Spark.
Chris: Yeah! It is pretty shoed up, isn't it?
Marie: Yeah. [Laughter]
Chris: Other than I think I would probably consolidate some of the tech we use, you know.
Marie: Yeah, that little workaround with Postmark and Spark Post thing that we have to do is a little out there, but you know it's not a pebble in the shoe right now.
Chris: Nah, it's fine.
Marie: Yeah.
Chris: We do have it such that -- I can't remember when we put this in place, but there's a nuclear submarine kind of thing where both the captain and the first mate - or whatever - that's more than six feet away has to turn the key at the same time to send the bomb off.
Marie: Mm-hmm. The same with the Spark.
Chris: These emails -- yeah, it really is the same with the Spark. Somebody has to approve it, and then another person has to come in and approve it. The way it's auth'd is like you can't even fake it because, on CodePen, you'd use to be able to fake it.
Marie: We used to. Yeah. [Laughter]
Chris: Of course, there's an admin tool to just log in as whoever you want, you know, because that's just required for apps to be able to debug things and such. On a day that you absolutely had to get a second approval, you can just use that tool and log in as somebody who is also an admin and turn the second key, as it were.
Marie: Not anymore.
Chris: But now you can't do that.
Marie: No.
Chris: Now it's tied to our -- it uses Cloudflare auth, or whatever, which uses your CodePen or your name@codepen.io email, and I don't have anybody else's.
Marie: Right. Yeah.
Chris: I can't log into Shaw's email. That's literally impossible.
Marie: Yeah, so we both really do have to sign off on it.
Chris: Yeah. [Laughter]
Marie: Or someone else has to sign off in your place.
Chris: Yeah.
Marie: The one time I discovered -- the day I discovered that logging in as you doesn't work anymore, I had to ask Stephen to do it.
Chris: Crap. Yeah.
Marie: I was like, "Oh, no!" [Laughter]
Chris: But that's kind of the point is that somebody else has to look at it with their eyeballs and approve it.
Marie: Yes. Yeah, and that's how we -- so, there's a bunch of reasons there. One is just for proofreading to make sure this issue is going to work when we send it out and it doesn't say anything that is wrong or have broken links or anything like that.
But the other thing is to make sure that we don't send the same issue again, which would be mega-costly because this costs. So, you know, sometimes you'll get an email. This was like a year ago where HBO Max sent out an email that was just like, "This is a test," and everybody--
Chris: Oh, yeah!
Marie: Whoever signed up for HBO Max got it. I was like, that would never happen to us. We were all kind of joking because it was funny. We had built the system to prevent something like that from happening to us because, thinking about how costly that would be for us, how costly it would be for something as big as HBO Max. Oh, my goodness. Somebody was crying over that one.
Chris: Yeah.
Marie: That type of thing is not going to happen to us because we built the system.
Chris: It's expensive. It's embarrassing.
Marie: Yeah.
Chris: You can lose money in other ways.
Marie: It's embarrassing too.
Chris: Yeah.
Marie: Yeah, so we did, years and years ago, once send out the same issue like twice in a row, and I've never forgotten that, and so we built this so that I would never to suffer that kind of shame again.
Chris: Hmm.
Marie: [Laughter]
Chris: Yeah, that's good. That's gone, so that's cool. That's a pretty cool thing. I never imagined we'd build something like that. What a weird little piece of technology we decided to build. Yeah.
Marie: It's great, though. It has saved us trouble. I love things that prevent problems. You never know about the problem, again, because it didn't happen.
A lot of the time that doesn't get highlighted, the things that prevent problems, but they are much better than solving problems. Keeping them from ever happening in the first place rules. I'm very, very pleased we have that in there.
Chris: Like I mentioned, we have advertisers for the Spark. Usually, there are two, and we just sprinkle them in there. I think we can allow for more now if it happens.
Marie: Mm-hmm.
Chris: Just because, whatever, as an experiment. We're a business. Get over it.
There's also dedicated issues, and we used to make a big deal out of it. We used to have the special header that said "CodePen Special Edition," and make it feel really special and say that there's a single sponsor brought you this, and then we'd kind of prime you up for the idea that there's going to be a big "Brought to You By" one sponsor, not multiple random ones.
Marie: Mm-hmm.
Chris: The thing is, it was popular enough that it just wasn't special anymore, you know, to send a special one every month.
Marie: Yeah, it was happening a lot. Yeah.
Chris: Anyway, they're just not special anymore. We just do that regularly. We put a big ad for them at the top. It's still a very bold thing for that individual sponsor. But it's a dedicated sponsor. We don't call it a special edition.
Marie: Mm-hmm.
Chris: Yeah. That's that. That kind of thing.
I know, because I read your weeklies every week - that's an internal thing at CodePen we do, like, "What happened this week?" It's like the end of -- it's like the written version of a standup at the end of the week. Whatever. We don't have to get into all that.
Marie: Yeah. We blog to each other. [Laughter]
Chris: Yes! [Laughter] That's great. We blog to each other. You watch the numbers on the Spark pretty closely.
Marie: Yeah. It's important to me. The Spark is a big part of what I do. I'm helping out with handling advertising more. It's important to our advertisers what the numbers look like.
But also, beyond stats, beyond this many sent, this many open, all that type of stuff, I'm also looking at the data involved in the content that's going into the Spark. For example, I will consider how often someone has already been in the Spark or, conversely, how someone has never been in the Spark (when I'm starting to select things from the picked items that week).
The Spark has kind of taken the place, for some people, of the picks. You know? A lot of people will read the Spark and not really browse a lot. You know?
Chris: That's a good point. Yeah because we still do picks but, right, that just picks feed is gone and kind of intentionally so.
Marie: Right. Yeah, so the Spark is the big stage. And when you get into the Spark, a lot more people see your stuff than necessarily even if you got picked. A pick might not do as well as something that ended up in the Spark.
We have, of course, superstars on the platform. We have people who just, every single week, are turning out amazing work.
Chris: Truly. Yeah.
Marie: And they, of course, get into the Spark a whole lot because they deserve to. They are doing incredible work. At the same time, we also have other people who are new to the platform who maybe don't have the same following, maybe haven't just been around long enough to get seen who, if we didn't really make an effort to go and find them, we might miss.
I make sure, with our picks, that we are looking more at a broader range of work, that we're not just looking at the same greatest hits folks over and over and over. And also, when I'm making a consideration for the Spark, I do think about that. Like, has this person been in the Spark before? Is it time? Are they ready? Are we getting them in the big show now? [Laughter] You know?
That's been something that we've worked with much more this year. Like I was saying before, I feel like we have had kind of a turn towards the editorial here as our focus, and I really think that's exciting, and this is what we've been doing. We've been making sure that we highlight emerging talent while we still celebrate the people who have been doing awesome work for many, many, many years.
Chris: Yeah. I mean my thought about it is there are so many. There's always some newish person doing something amazing.
Marie: Yes.
Chris: Just because out of virtue of them being a different human being, they do things differently.
Marie: Yeah.
Chris: Spices things up, and we're just so lucky to have that happen at CodePen at all that not embracing that would be a mistake, really.
Marie: Exactly. Yeah. You don't want to get into a rut. You also don't want to keep people shut out.
It does have an editorial feature, and it is hand selected. But it also is open to all of our members. Anyone can get into the Spark the same as anyone can get picked. I want to make sure that that's really true, so that's something that we've been working a lot more towards is making sure that we really see what's happening on CodePen, not just relying on--
We talked about this recently in the episode about trending. Not just lying on social media cues to say, "Okay, this is popular. We should show this," or we should feature this or whatever. But to really just dig into the platform, examine inside the platform what is happening and feature that.
Chris: Right.
Marie: That's SQL. That's all SQL is how that's happening these days. [Laughter] And it hasn't been without its pitfalls. I accidentally selected somebody for the Spark that had done a total uncredited fork of a really popular Pen. To be honest with you, I should have recognized it, but in my effort to put forth new work, I made a mistake. I didn't vet them properly, so that's not a mistake I'm going to make again. [Laughter]
Chris: Yep.
Marie: But it happened, and -- I don't know. Out of 300 issues, one time we had that happen, I'm not that upset about it, but I'm upset about it because I'm a perfectionist and that type of thing bothers me. But you know.
Chris: Sobeit. That's cool. Yeah, as long as it doesn't--
Marie: Had to vent. Had to vent.
Chris: Yeah.
Marie: [Laughter]
Chris: Then okay. What can go in a Spark in that top part, not Chris's Corner or whatever, is a lot of Pens.
Marie: Mm-hmm.
Chris: Then it's offsite posts of things that tend to have embeds in it.
Marie: Yeah, we'll link to -- yeah, embeds or sometimes video demonstrations, like if someone is showing how to make something and it happens to be that they're making it in a Pen, and it's a YouTube video or just any video presentation or even we'll sometimes link to a Twitch stream archive so people can check out something there. But yeah, in some way it will either involve a Pen directly, CodePen itself, or a member of our community, someone who is part of the CodePen community doing something cool with code.
Chris: Yep. But there are other things on CodePen. There are projects. Once in a while, there'll be a project in there.
Marie: Mm-hmm.
Chris: I know that's not the most highly used thing because it's Pro only, for one thing, yadda-yadda.
Marie: Mm-hmm.
Chris: But then there's collections.
Marie: Yes.
Chris: Anybody can make a collection.
Marie: That's true.
Chris: It's just a showcase of your taste, and I love a good collection. Right?
Marie: Yes, and that's a good way to put it that it can be a showcase of your taste. Actually, that brings up a good point about the collections that are going in the Spark lately.
There have been more pick-worthy collections. As I'm picking more collections, I think people are getting the idea of the flexibility of collections and all the cool things you can do with it.
I said to myself at the beginning of this year, or maybe it was the end of last, "I've got to pick more collections," so I built a dashboard to find good collections, and I have been finding them. I have found much more than I set out to find. I could probably pick multiple collections every day. I'm trying to at least get one in there, but we are really seeing a lot of interesting use of collections in a new way.
But then also, we're also seeing collections that have been maintained for literally years (many, many years) that are extremely interesting and deserve to get into the Spark because they are so cool. I have a couple of links here that we'll put into the show notes of examples of recent things that have been in the Spark that were really, really stand-out collections. We have one that's called "Animation & Cool Effects" from Ricardo Zanutta.
Chris: Yeah?
Marie: It started in 2014.
Chris: Whoa!
Marie: It's got like--
Chris: You know he's got some -- yeah.
Marie: Unbelievable stuff.
Chris: Pride behind this one.
Marie: It's such a cool thing because -- oh, yeah, and it's got -- it's like a historic collection of Pens, basically, because it goes all the way back. It goes that far back into our history.
Chris: Yeah.
Marie: It's got like 1,500 Pens in it, and they're all great. So, that one is super awesome to see.
Chris: Ooh, I just found one that's so cool that hasn't been picked. Oh, my God. I'm going to pick it right now.
Marie: Yes! See?! [Laughter] It's like an addictive thing once you start getting into what's cool in the collections. And I'll show you the dashboard that's got those, so you could do even more.
Chris: Yeah, nice.
Marie: But the ones, that one there, I don't know if Ricardo has any of his own Pens in it. It's a huge collection, and pages and pages and pages through, it's just all different members of the community's work.
There's another one that I was just absolutely floored by. Their username is AndyMan. The collection is called "Patterns, filled space" and it is--
Chris: Yeah?
Marie: That one, you've got to pop that one open in TV.
Chris: Oh, I see. It's like -- oh, interesting.
Marie: It is so good. It is so good.
Chris: Holy crap.
Marie: Yes, right? [Laughter] It's such a good collection, and it's a real smart selection. This is not somebody who just was like, "Oh, let me put together a mishmash or something."
Chris: Yeah.
Marie: This is -- that's an eye at work there.
Chris: Yeah, a lot of different--
Marie: I really think that's great.
Chris: Different names. Included totally unknown. Oh, my God.
Marie: Mm-hmm. Yeah.
Chris: This is the coolest collection I've ever seen.
Marie: Yeah, pop that one open in TV. It rules. [Laughter]
Chris: Wow.
Marie: Then there was another recent one, "ASCII Artwork," which the member's name is Eric Karkovack, and he does really cool collections. He is absolutely worth following. He does cool work, but he's also worth following just for the collections alone because is really, really good at gathering things across a theme. He pays really close attention to what's cool, what's happening.
Chris: Yeah.
Marie: Like in the now or right now. Though, obviously, ASCII artwork is old as computers, but he really does bring in a lot of what's cool and happening right now, so I really like his work. I follow him mostly for his collections, although he's worth a follow regardless. That's the type of collection where it's like someone is -- it's almost like curatorial. They're selecting work from the community and adding it to a collection.
But then the other type of collection that we've been featuring a lot is grouped demos where someone groups their own work into a collection.
Chris: Oh, I see. Yeah.
Marie: Then they share that, and that goes into the feed. It's the same size thumbnail as a Pen, so you can really get a clear view of what this is going to be all about when you open up the collection just by seeing it in the feed.
Jhey Tompkins, of course, everybody knows Jhey Tompkins. He's fantastic. Really does amazing work, and he has put together his "Speedy CSS Tips," which are really popular on Twitter. He's gathered those all up into a collection. So, that one, every time he adds a new one, if you're following Jhey, you'll see it in your following feed.
Then a couple of weeks back, we featured one from Peter Norton who is doing 3D CSS pens, and those are all grouped together in his collection. Also extremely cool. It had a tardigrade in there, those little -- I don't know if it's a bug. I'm not a scientist, so I don't know. [Laughter] You know the bug, the tardigrade or the little being that can live in any environment.
Chris: I mean I know what you mean, but -- oh, yeah! Oh... I mean but is it real?
Marie: Yeah. No.
Chris: Oh, I'm sorry. Did I just embarrass myself?
Marie: No, they exist.
Chris: It's not like the flying spaghetti monster or whatever.
Marie: No, no, no. No, they exist. They're real. [Laughter] I'm pretty sure.
Chris: It looks like a fricken' Lego creature or whatever?
Marie: Yeah.
Chris: Yeah, I know what you mean.
Marie: Right, so it looks Lego in this portrayal of it. It's a little bit more rounded in reality, but you need a microscope to see them. So, Chris, I don't blame you for never having observed....
Chris: Ugh!
Marie: [Laughter] But anyhow, he had a Pen with the illustration that's 3D, moving.
Chris: Right.
Marie: The tardigrade, and then he also has these other creations of his all grouped together, and they have an overarching theme. They all kind of have a similar look, and it's really cool to see them all grouped together like that.
Then Bramus, the mononym Bramus. I don't know if Bramus goes by more than that.
Marie: Van Damme.
Marie: But Bramus has a "Scroll Linked Animations" collection, which was really interesting because he was reworking previous work to use a different library. He gathered that all up together in this collection.
We'll stick all of those in the show notes because if you didn't catch them in the Spark, they're worth checking out. But it's really cool to see the growth of the collection and the flexibility and creative use that people have been making with the collections lately.
Chris: Yeah.
Marie: I think that's my favorite new thing that we've been featuring in the Spark.
Chris: Right. Yeah, that's cool. That's cool. I like that almost the system works, right? If you draw attention to the feature editorially, it actually drives usage of the feature.
Marie: Yeah, we're lucky because we have a community that's a real quick study too. They saw the potential right away and just started using it. I just think that's really cool.
Chris: Yeah. All right. Well, congrats really mostly to you. You are the absolute creator of the Spark for all these years.
Marie: Yeah. I've written most of them, yeah. I think probably there's maybe up to 50 issues that I didn't write, but probably not even that many.
Chris: Yeah, probably not.
Marie: It's probably like 25-ish that I didn't write.
Chris: Yeah.
Marie: Yeah. Yeah, I've been writing them for a while, and I do still love it. It's my favorite part of the job. I just want to say thank you to everyone who creates stuff that goes into the Spark because your work is very inspiring and I love sharing it with the world.
Chris: Yeah.
Marie: Thank you very much.
Chris: Yeah. If you don't get it, remember that it's probably because you unsubscribed at some point, which is absolutely fine and free to get whatever emails you like and don't like. But if you haven't been getting it and want to get it (now that you've heard this amazing podcast), just go into your settings.
Marie: Yeah.
Chris: It's under notifications.
Marie: Yes.
Chris: Just flick that little switch back on, and you'll start getting it.
Marie: Yep. And if you're not an email enjoyer -- I'm not much of an email reader, to be honest with you, you can just check it out at codepen.io/spark. It's there.
Chris: Yeah, it's right on the Web.
Marie: All of it is there.
Chris: I think there's even an RSS feed for it. Although, do we guarantee that?
Marie: Maybe... I'm not sure about that. [Laughter] I'll never swear to an RSS feed. We always get called out on that one.
Chris: Yeah.
Marie: But yeah, if you just want to check out the archive, the whole entire thing is there. Every single issue we have ever published is there, so you can check it out and see what it's been like in the CodePen community all the way back to 2016.
Chris: God-dang right! High five!
Marie: Yeah.
Chris: Thanks, everybody, for listening. Take care. We'll see you next week.
Marie: Bye-bye.
[Radio channel adjustment]