Hi!

We’re back!

Weird right? It’s been over 2 years. 

We took a break after episode 400, not because we ran out of things to talk about, but because we were so focused on our CodePen 2.0 work, it got old not being able to discuss it yet. We’ll be talking plenty about that going forward. But CodePen has a ton of moving parts, so we’ll be talking about all of it. 

This week we’ll be kicking off the podcast again talking about a huge and vital bit of CodePen infastructure: our email system. Outgoing email, that is. We get plenty of incoming email from y’all as well, but this is about the app itself sending email. 

Timeline

Links

Transcript

[subtle upbeat tune]

Chris Coyier: Hey, everybody Welcome to another CodePen Radio. Can you believe it?! I don’t even remember what the date of the last one was, but we stopped at an even 400, which is pretty cool because, you know, we were like, “Gosh! We’re working on this new editor.”

Guess what?! We still are. Amazing! But we’re a lot further along with it, obviously – I hope. And so, we’ll be talking a lot about that.

But we’re going to just bring it back classic style. Talk about all kinds of different things CodePen.

Marie is still here, my cohost. Hi, Marie.

Marie Mosely: Hey, everybody.

Chris: Hey, hey! So, we’ll be talking about CodePen’s 2.0 editor, as we’ll be calling it – just publicly, too. That’s what it’s just going to be called. There might be some other name, some other terminology, and stuff that we’ll use.

But that’s not the only thing we’ll talk about. The point of this podcast is still talking about CodePen (the business), behind the scenes (how it’s going).

We’re still basically a startup. Sometimes I bristle at the term because I’m like, “We’re pretty old for a startup.”

Marie: We’re an old startup. Yes.

Chris: Very old. But we are very few people, so we’re still just making it happen, and we’ve still only taken that one round of funding way a long time ago. So, we’re behaving like a startup. It’s just that we have a rather established business model, and everything is just going fine that way.

So, just to kick things off because I’ve been keeping a list of ideas for shows, and I want to just chuck through them. Just to get our feet wet again, we’ll just talk about one that we poke at pretty much every single week, and that is our email system – and all the stuff.

We have talked about this on the show before, haven’t we? Surely, we have.

Marie: Oh, definitely.

Chris: Probably many times.

Marie: Yeah. Yep.

Chris: Because it’s a big deal to CodePen. CodePen has… What’s an appropriate term for it? A huge bucketload of users?

Marie: [Laughter]

Chris: Just like a very lot.

Marie: Yes.

Chris: A very lot. Actually, just before this call, Marie and I are poking at some bug we were having and trying to root it out – a pretty weird thing. What I did is I hopped into one of the apps we use.

The app is called Postmark, by the way, so that’s on our list to talk about anyway. It’s one of the software-as-a-service apps that we use here at CodePen to send email. It sends all of, I think, our transactional email.

00:02:22

Marie: Yes.

Chris: A transaction email is like, “Welcome to CodePen,” or “Please verify your email address,” or “Here’s a receipt for your thing.” Whatever. Right?

Those are ones that, like, an event occurs, and then you get an email about that event. So, they don’t get sent on the third Monday of every month. They just get sent when they need to be sent.

Marie: Mm-hmm.

Chris: That’s what a transactional email is. Postmark is very good at that. I think we consider us fans.

Marie: Oh, yeah.

Chris: For Postmark.

Marie: Yeah, it’s super-easy.

Chris: They have pretty good analytics, too. You can see logs of every email it’s ever sent. So, I was like, “Yeah, let’s go into Postmark and just see if that email sends.” What if I – whatever – did the semicolon in the wrong place or something?” That’s not how HTML works, by the way.

Marie: [Laughter]

Chris: But it could be a problem with the template. Who knows. Sometimes you’ve got to… What do we call them, sanity checks? Make sure that the very basic things work as you expect them to before you dive into deeper issues.

So, I hit this button in Postmark; “Hey, send me a test.” And we did that. And then, 30 seconds later, we go look at the logs to see if the email was sent, which it was. And eight people had signed up.

Marie: Yeah. [Laughter]

Chris: In that 30 seconds.

Marie: Yes.

Chris: It was like, “Okay, well, there are a lot of users on CodePen.” Before you think they’re all bots, spam, or something. We do have quite a few protections against that kind of stuff, too. So, probably real people.

Okay, so we’ve established this, right? One heaping, giant bucketload of users on CodePen. One of our strengths, I’d say. Thank you for being a CodePen member, if you are – old or new.

So, we need systems to send email.

Marie: Mm-hmm. Yes. [Laughter]

Chris: Elaborate ones. Expensive ones.

Marie: Yeah, yeah.

Chris: Yeah. Yeah.

00:04:12

Marie: We have a ton of email to send. And we’ve also got to be careful with it. With a list that big, you don’t want to be sending, say for example, the same email twice in a row – or something like that. [Laughter]

Chris: Yeah.

Marie: So, we really do have to have a lot of systems in place, checks in place, tools to make sure we’re doing the right thing the right way.

Chris: Yeah, right, and it’s a big part of our business, too, so one of those sweaty things about it is, like, to make sure that our reputation is really good, too. I don’t want people thinking our crap is spam or accidentally marking it as spam or doing anything spammy – all that kind of that.

Marie: Mm-hmm.

Chris: Fortunately, we have not had a problem with that, and we are old now. So, hopefully our reputation has some protection against it.

I don’t know what else to say about that. I know there’s some technological crap you can do to help with that, too, authentication technologies and stuff. I’m not really prepared to talk about that. I can tell you that we do all of it, I think, or most of it.

Marie: Yeah. We do some of it, you know, what we can do from our end. And then also, the tools that we use also provide protections. But Alex would be able to speak to that in more detail.

Chris: We’re talking about we send transactional email, and all of that goes through an app called Postmark, which we are happy paying customers of. One of the things that we like about Postmark is that it has this concept of templating, right?

Marie: Mm-hmm.

Chris: That you can kind of make a template, and then you can make emails on top of those templates. So, it has a little bit more… It’s a little bit more feature rich than some of these email sending apps that are just like an API for email – or something.

Marie: Right.

Chris: Which is also fine. We could go down to the AWS level if we had to, to just send absolutely raw, you know, “Send this HTML to this one email address.” Done. And just do it a zillion times.

The irony is that the pricing isn’t even that great at the levels. I don’t know if you have to negotiate it or what, but we once priced out, like, “What if we just sent it–?”

As far as I’m concerned, sending through the raw AWS APIs is probably… It seems like it would be the cheapest possible option that we had. And I think it maybe was a little cheaper but not much. And then you get so fewer less features.

Marie: Yeah.

Chris: Like no analytics and no protections and no warnings.

Marie: Well, and we don’t have the things like the templating, which is really useful.

Chris: Yeah. I mean we could build it.

Marie: We are always using those templates.

Chris: Yeah.

Marie: Yeah. But that’s the thing. Yeah, you’ve got to figure out is it something that you can build in-house or can you just buy the thing that exists? The build and buy question. We’re a teeny, tiny team.

Chris: Right. Right, right.

Marie: Yeah.

00:07:05

Chris: And Postmark is priced pretty decently. Then for various complicated reasons that also probably aren’t that terribly interesting, we use this other.

The longest-running email tool we use is called Sparkpost.

Marie: Mm-hmm.

Chris: And we’re still on them for sending this email that we send called the CodePen Spark, which a lot of people–

Marie: Which is coincidental, by the way, that it’s called the Spark and we send it over Sparkpost.

Chris: Sparkpost, yeah.

Marie: Yeah.

Chris: Has absolutely nothing to do with each other. Yeah, good point.

Marie puts that together every single week. Writes it and gathers the content and stuff. I play side-coach once in a while or when Marie is on vacation, I put it together.

Marie: Well, you write the corner. Yeah.

Chris: That’s right. The bottom of it, I put my little… I write my column, too. So, that counts, I guess.

Marie: Yeah.

Chris: Our powers combined produce the CodePen Spark that goes out every single Monday, and that’s our heaviest volume email. It just goes out to an absolute bucketload, like I said, of users.

Marie: Mm-hmm.

Chris: And that has some… requires some special volume pricing and stuff. And how it’s sent is that you don’t just get to craft your little email and then just hit the send button and walk away, really. If you’re used to using Mailchimp – or whatever – and it feels like that, well, you know, that’s because that’s a different scale and a different type of app that’s doing it.

Our emails are crafted on our side down to the little bits and bytes of the HTML that need to go out. Then we’re hitting APIs to send those out.

So, what does that mean, exactly? Do you have to hit an API URL every single time for each user? Do we have to hit an API those millions and millions of times?

I leaked how many it is. It’s a lot of millions.

Marie: [Laughter] It’s many, yeah.

Chris: Yeah. But no, it depends on how the APIs are structured by the companies that are offering them. Could you just send them? I don’t know. You hit them in different ways.

Marie: Yeah.

Chris: For various reasons, we’re still on Spark. It’s on our list to come all the way over to Postmark.

At the time we switched to Postmark, they didn’t even offer sending marketing emails. It was a company that just dealt in transactional email. They didn’t want your marketing-style emails.

Isn’t that the term for anything that’s not transactional? Is that what they call them?

Marie: Yeah, marketing. Yeah.

Chris: Yeah. It just means, like, boom, it goes out to a big list.

Marie: Yeah.

Chris: But it just happens all at once.

Marie: Yep.

Chris: Now they do. They are in the business of marketing emails.

Marie: Yeah, they might. It might make sense for us to make the jump at some point. We are using their templates to craft the templates for the Spark.

Chris: I know.

[Laughter]

Marie: Even though we don’t send it there.

Chris: We do.

Marie: Yeah.

Chris: And I know they know that. But it feels weird. It almost feels like a little crazy misuse of their system – or something. But I’m like, “Whatever. You have APIs for it, and we use your APIs, so you can’t be too mad about it.”

Marie: Yeah.

00:10:05

Chris: What Marie is talking about is we had to, at one point, brainchild what are these emails that we’re sending. How are they structured? What are they?

There are two, but kind of three, types. And now we’re not talking about transactional. We’re talking about marketing emails.

Marie: Yep.

Chris: There’s the CodePen Spark that we talked about. Then sometimes there’s a custom Spark, meaning that it’s an additional send or somebody has paid extra money to us.

Oh, thank you, everybody. Please buy them.

We call them dedicated Sparks sometimes where there’s just one sponsor for the whole email, and they want to send it. We do that because there’s some demand for it. Some companies just like that.

Then we’re like, “Well, we want to have a system where we can do whatever we want.” It’s basically a one-off email that we can totally custom-design if we need to. It turns out that a lot of times they’re not 1,000 miles different than a regular Spark, but they’re always at least a little different in that they only have the one sponsor.

Marie: Mm-hmm. Yeah.

Chris: We make that spot a little bigger and bolder for them. Then there are these other emails called Challenges.

But just thinking about the Spark, the way that we wanted to do it was link up–what would you say–approximately ten things.

Marie: Yeah, it’s usually ten.

Chris: Ten.

Marie: Ten pieces of editorial content. Yeah.

Chris: Right. But I think we’ve designed it now, after a bunch of iterations, where it could be any number of them.

Marie: It can, yeah.

Chris: Yeah.

Marie: Yeah, we have a lot of flexibility there.

Chris: I think, in the past, it was like, “It’s ten,” or “It’s 12,” or whatever it was.

Marie: Right. Yeah.

Chris: Now it’s chill.

Marie: Yeah.

Chris: And by ten things, I mean a lot of times they’re Pens. They could be blog posts somewhere else. They could be collections. They could be ads. They could be any number of different things. They really kind of could be anything. But it’s just something that’s interesting, so we put it in the Spark and it splits them down two columns. Of course, one column on mobile, so there’s a little bit of responsive email design in there.

Marie: Mm-hmm.

Chris: But there’s more, right? It has a title, so there’s a big, bold thing. It has a subject, of course, as emails do. It has an intro piece of HTML. It’s usually a paragraph or two that Marie writes introducing the week’s email and what we’re about to talk about.

Then there’s all the ten things. Then there’s Chris’s corner at the bottom. Then I think that’s it. Of course, there’s a footer that has all the unsubscribe links and all that.

Marie: Right. Yeah, unsubscribe and all the other little details that you’ve got to put there.

00:12:35

Chris: Totally. So, we had to think, like, what is all that stuff? Then how are we going to put it together?

Essentially, it’s like, “Well, we’ll just build our own little CMS, essentially, for that.” We’ll make a database table that has representations of all those things, and are rudimentary CMS, which is very not hard to build. It’s like a crud app, essentially.

Marie: Mm-hmm.

Chris: This is the kind of thing we can kick out very quickly and, fortunately, more pretty quickly. But then the way that we can craft this email is within an admin page. We can just open up a thing, click “New email,” type in the stuff in text areas and whatnot, and then hit “Save,” and it becomes a database entry that represents a CodePen Spark.

Marie: Yeah.

Chris: Yes.

Marie: And that is great because to have it in the database like that makes future creation of Sparks easier too because we can make sure that we’re not repeating content. We can check things against that.

Chris: Yeah.

Marie: Which I’ve used a lot to make sure that we don’t feature the same thing over and over – things like that. It’s nice to have that also because it gives us the opportunity to publish it to the website as well.

Chris: Yes!

Marie: So, there’s a landing page for the Spark.

Chris: Yeah. A Spark is an email first, maybe, even though it’s actually kind of an email second because we have it in the database, so we thought we might as well. But from day one, we knew we wanted to do that.

Marie: Mm-hmm. Yeah.

Chris: I think it’s a little bit of me in that I like it when things have URLs.

Marie: Yeah. It’s awesome. We have this archive that goes back many, many years now of what was featured in the Spark.

Chris: Right.

Marie: It’s super cool.

Chris: I barely even care if anybody looks at it. I mean it’s nice that they do. But I’m like, I just need the content that I create to have URLs – so it does.

Marie: Mm-hmm.

00:14:36

Chris: Challenges are really the same way.

Marie: Yeah.

Chris: So, we don’t need to dwell on them too much. But it’s like you go, “New challenge,” and you type in the title. And there are ideas and resources for each challenge. They’re similarly structured with its own CMS and all that.

By the way, it means that you’re not then writing… You’re not handcrafting HTML very much. You might put an anchor link in some text or something. But you’re not crafting the structure of the whole email.

Marie: Right. Yeah.

Chris: That means, later on, we can change up the template and it’s fine. We’ll just fill it. The data is fine. We can move things around in the template. It’s basically Web… That’s what Web design is.

Marie: Yes. I think a lot of people listening to the show have probably heard of it – Web design.

Chris: Yeah, probably heard of it. [Laughter]

Marie: We like it.

Chris: Right. And so, this all started with the idea that Postmark has these things called templates, and so we pull down the template and marry it up with content from the database. That produces a final chunk of HTML, and that’s what goes out when we hit the API and send those emails.

Marie: Right.

Chris: We also don’t do a lot of marrying up the individual user. We easily could do that. I don’t know about easily. It’s always dangerous to say the word “easy” when you’re talking about adding new features these days.

Marie: Mm-hmm. [Laughter]

Chris: It’s certainly possible that we could say at the top of the email, “Hey, Marie!” And Marie would be the user.

Marie: Nobody likes that. [Laughter] We’re not doing that.

Chris: Yeah, it’s rare that anyone wants it. Yeah.

Marie: Yeah.

Chris: Then it’s embarrassing when people put their username instead or we don’t have it or whatever.

Marie: Yeah. Yeah.

Chris: It’s not that interesting. Of course, what would be more interesting is emails that we’ve dreamed about forever that do seem to be closer and closer to reality. It’d be like, “Your digest for the week,” or something like that.

Marie: Yes. Yeah.

Chris: You wouldn’t get it if you didn’t want it, but I’m sure people that are pretty active CodePen users would love that kind of thing.

Marie: Yeah, definitely.

Chris: Things we thought you’d be interested in, how your Pens did, yadda-yadda.

Anyway, not yet. We’re not doing that yet. Mostly transactional and marketing emails.

Marie: Yeah, but wouldn’t that be nice?

Chris: Yeah, it would be really cool. Oh, my God. That sounds like a deliciously fun project to work on.

Marie: Yeah.

Chris: But of course, I’d want it to be Web first. Then I would turn it into an email.

Marie: Yeah.

00:17:07

Chris: Okay, so Postmark and Sparkpost, still have them. I bet we talked about this years ago, probably on this podcast, when we were still actively doing it. And that was our system back then, too.

Marie: Mm-hmm.

Chris: This system has not changed dramatically through that. Okay, so now let’s pretend it’s Monday morning. What’s Monday morning like for you? [Laughter]

Marie: Well, Monday morning, it is Monday.

Chris: Yeah.

Marie: First… [laughter] I’ve got to have a coffee. But then–

Chris: Yeah.

Marie: When I get on, we’ve got the Spark and usually, the challenges. The challenges are a monthly thing where I just put out a theme and prompt each week.

For example, this past month, June, the theme was shapes and lines. And then each week, there was either a shape or a type of line that was the prompt.

If we have a challenge running that week, the challenges go out first. Then the Spark follows that.

When we’re sending, we actually have a two-stage process for sending things where we need two approvals from people on the team. Usually, it’s me and you. But sometimes when one of us is out, Stephen picks it up for us.

Chris: Uh-huh.

Marie: But we send out a test email to admins.

Chris: Yeah.

Marie: Then we review the test email to make sure that everything is in place. If we have sponsors, that they’re going to the right URL.

Chris: Pretty crucial, really.

Marie: Yeah.

Chris: Yeah.

Marie: Also, we check the image and the content size because we don’t want to be sending a gigantic email. So, we’ll literally check how big is this email before we send that out. After two people have approved it, that’s when we can send it.

Actually, that brings up the changes that you had made to the image upload fairly recently to make it so that–

Chris: Oh, the size stuff. Yeah.

Marie: Yeah, so we’re getting good image size.

Chris: I call it in the notes, I think, kind of the nuclear missile system, right?

Marie: Yeah. [Laughter]

Chris: Where somebody has to turn a key, and then father than arm’s length away, like farther than one severance away. [Laughter] Remember that scene? Did you watch Severance?

Marie: Yeah, of course. Yeah.

Chris: Anyway… It was amazing. Where he had to put his two fingers on two buttons.

Marie: Yeah.

Chris: But he could do it as one person.

Marie: Right. This is impossible.

Chris: But the correct design of that app.

Marie: Yeah.

Chris: Yeah, you’d have to get a little farther away. Yeah, I literally can’t do it. There’s no way around it.

Marie: Yeah.

Chris: If it’s just me, I literally can’t be like, “Well, I own this company.” I mean, theoretically, I could rip out some code or something.

Marie: You could probably. Yeah. [Laughter] You’d have to really get deep in there, and I don’t think–

Chris: You’d have to get deep in there.

Marie: Yeah.

Chris: For all practical purposes, I cannot approve the email twice because it needs to be approved twice.

Marie: Yeah.

Chris: Then it can go out. So, two people have to look. And before you can even approve it, you have to check off five boxes. And this is mostly an honor system thing.

Marie: Yeah.

Chris: But the fact that you had to click the box, it makes you a liar if you didn’t. So, there you go.

Marie: Right. Yeah, and so there’s that sin that you have to worry about. But then also we really don’t want to send out a bad email. We do want to make sure that we are checking the content. That the links go to the right place.

Chris: Right.

Marie: That we didn’t link to somebody’s profile page instead of their actual Pen or no link at all instead of to the collection we’re trying to show people.

Chris: Totally. This is probably baby stuff to a serious publishing house.

Marie: Of course, yeah.

Chris: But we kind of are a serious publishing house.

Marie: At this point, I would say yeah.

Chris: We have to do it.

00:20:39

Marie: I think that a big chunk of what we do now is this media. We are sending out a newsletter and the challenge prompts every single week.

Chris: Right.

Marie: So, yeah, it’s a big piece of what we do.

Chris: And it’s a problem if it goes out wrong. There are all kinds of things that could go wrong.

Marie: Yeah.

Chris: The image doesn’t render in some email engine – or something. Or the image is three megabytes big and that’s a problem for costs and stuff.

Marie: Mm-hmm.

Chris: Or that there’s so much content or image size or something that the email gets cut off in an awkward way. Or there are typos.

Marie: Yeah.

Chris: Or the sponsor is missing, or the sponsor links to the wrong thing, or any link goes to the wrong thing. I’m saying some of the same stuff Marie just said, but there’s a lot of stuff to check off, so we call this the send station in our own admin app. The same place but a different URL where the Spark is actually created.

Marie gets done with all the stuff, and Chris’s corner is in there and everything. Then it comes to my real email address, and I check it in my email client. Then I also go check it in Gmail and Gmail on my phone because Gmail is just so big.

Marie: Mm-hmm. Oh, yeah.

Chris: You’ve got to just, for sure, for sure check Gmail, even if whatever other client. Ideally, we’re checking against ten clients. But there are limits.

Marie: The practicality of that, yeah, definitely.

Chris: How deep we go on this, yeah. So, you’ve got say it’s proofread. Typically, we’ve got to proofread it. You’ve got to check all the links, check all the sponsors, check the image size and quality, just meaning we don’t want to accidentally send out the three megabyte image – or whatever.

Marie: Mm-hmm.

Chris: It’s just bad, bad form. Then the reason that we send it out, you click the button and send it out, is to make sure that it made it through the real API for sending emails.

Marie: Right, that we actually receive the test. Yeah.

Chris: If we just wanted to send … and hit send, you just didn’t do the basic thing where you sent it through the real system that customers will be getting. So, it has to make it through because, who knows. There could be a problem in the template. It’s happened.

Marie: We’ve run into it.

Chris: Totally.

Marie: It’s why every single one of those checks has a reason to be there.

Chris: Yeah, because we’ve screwed it up before.

00:22:51

Marie: We had to write a rule for it. And the other thing that you don’t have to check off, but that happens actually automatically once you send the email, is that it is completely removed from the send station. Once it has been sent, you cannot accidentally send the same one again.

Chris: You’re done-zo.

Marie: Which happened once and never happened again.

Chris: Yep. Yep. Did that one.

Marie: Yep, once.

Chris: Not great.

Marie: But that was it.

Chris: You know what sucks about screwing up a sponsor, too, is the sponsor is annoyed with you.

Marie: Yeah.

Chris: So, the chances of reselling it are low.

Marie: Yep.

Chris: You don’t get paid for it because it was wrong. And a lot of times, they want to make good. So, you still have to run it later, which takes another one.

Marie: Yep.

Chris: So, it’s like a double, triple whammy – or something.

Marie: So, you just really don’t want to screw it up.

Chris: Oh, yeah.

Marie: It’s something that’s got to be… And the thing is, we’re human beings.

Chris: Right.

Marie: So, we’ve got to build tools to prevent–

Chris: Which means we’re subject to embarrassment, which is probably the worst thing that happens.

Marie: Well, yes. But also, that we are capable of screwing up–

Chris: Yeah.

Marie: –some kind of automated system to keep us in place.

Chris: Right.

Marie: We’ve built a lot of tools to help us get this done.

Chris: A lot of tools. Heck yeah.

Marie: And it’s–

Chris: And Marie is always in there pulling out, you know, trying to trim the list in various ways and stuff. That’s probably not worth getting into, but it’s pretty interesting.

Marie: It’s work. Yeah.

Chris: Yeah, to keep the open rate high and that kind of thing.

00:24:14

Marie: Yeah, I mean if I were to talk about a frustration with it, we do have tools for sending lots and lots of email. But Sparkpost doesn’t really give us a ton of information about who is actually engaging and who is actually opening it. They’ll tell us about engagement rates, open rates, and things like that. But the specificity is not really there, so we have to get a little creative to do our best to keep it clean.

And it is difficult. It’s something that that’s going to be the next stage of what we’re putting a lot of development time into, essentially. Maybe not necessarily development time but research and work into figuring out how to keep that nice and clean. My goal would be to have it clean as a whistle. That’s how I like to roll.

Chris: Absolutely. It’s hard to know for sure because… What’s the perfect metric? You never open it, right?

Marie: Yeah.

Chris: You haven’t opened ten of them – or something. Then you just get unsubscribed then.

Marie: Yeah. Just dump them.

Chris: You obviously don’t want it, and we don’t want to be sending it to you if you don’t want it. You can always re-subscribe if you do want it – that type of thing.

Marie: Yep.

Chris: But that is very hard to sort out. Sometimes we do a proxy, don’t we? We don’t actually know if you opened it but we have other things.

Marie: Right, we use activity on CodePen.

Chris: Yeah.

Marie: Yeah, and things like that to kind of get a picture for, like, is this person engaged with CodePen, in general. It’s account age, all that type of stuff. But again, yeah,

it’s a step in the dark sometimes. It would be nice to just be able to say, “Okay, well, you know. The company that’s sending these emails, you guys know who is opening this or not. Can you just cut them off automatically for us? That would be a really nice thing to do.” But it’s in their interest for us to have a large list because we pay per email.

Chris: Yeah, that’s right. Let’s say your list was a million people.

Marie: Mm-hmm.

Chris: You could sell that for X dollars. But it’s actually worth… Let’s say your list then was 500,000 but your open rate was triple.

Marie: Right.

Chris: It should be worth more.

Marie: Yes.

Chris: But sometimes it isn’t.

Marie: Yeah.

Chris: So, it’s a little balance there, too.

Marie: Yeah, exactly. So, it would be… Ideally, we would have better insight into that and better tools for just simplifying it because nobody who has a newsletter like ours wants to be sending to people who don’t want it. And yeah, it doesn’t make sense to litter people’s inboxes. If they don’t want something, they shouldn’t be getting it. If they’re not engaging, they shouldn’t be getting it. And it would be ideal for us to fix that. But–

Chris: But–

Marie: It’s another story for another day.

Chris: We’ll get there.

Marie: Yeah.

Chris: Yeah, as we discover how to do it properly.

Marie: Yeah.

Chris: And then tell you how to do it.

Marie: We’re trying.

00:27:01

Chris: A couple of other little nuggets just to mention before we wrap up. We do a pretty good job of keeping the show probably about half an hour. That’ll probably be our goal.

One of the problems we had was image size (at one point). It is notoriously easy to put an image that’s too large or too sized incorrectly or something into it, so we finally did A) we should be–

Instead of S3, which we used mostly for everything and is kind of an industry standard for storage–

Marie: Mm-hmm.

Chris: –Cloudflare — this is years back now — released this R2 product, which is kind of cheekily named to be a different letter and a different number. But that’s how Cloudflare rolls.

They said you don’t pay for — what do they call it — Egress (the word, which is upload and download bandwidth, essentially).

Marie: Mm-hmm. It is really Egress?

Chris: I think I said it right. It sounds like a bird, doesn’t it?

Marie: [Laughter]

Chris: I think that’s an egret, though.

Marie: Yeah, that’s a bird. No, I believe you. I just haven’t heard it myself.

Chris: Yeah. Unless I’m just wrong, in which case email–

As a matter of fact, I should have mentioned this at the top of the show.

Are you still subscribed to this podcast? Are you listening to this because, all of a sudden, your podcatcher just showed you a new episode, and you’re like, “What the hell?” and you listened to it? I’d love to hear that from you on your social media of choice or email or whatever.

Marie: Yeah, because it’s been more than two years.

Chris: Yeah, that would be fascinating.

Marie: Yeah, that’d be cool.

00:28:19

Chris: We wired up, and we’re starting to use R2 for more and more stuff just because it’s better, I think, than S3. I don’t know. Maybe that’s debatable, but I just like the DX of Cloudflare products, generally, so I like using it.

We wired up this thing, at least with email, because it goes out to so many people. The bandwidth is pretty freakin’ high.

Marie: Yes. Yeah.

Chris: R2 is the perfect product to use for it to take advantage of, rather, pretty much. So, we made sure that all email assets are on R2. Then R2 has this other ability that, whatever you upload. We could upload a 2 megabyte image. Who cares? The URL will ensure that it’s the exact pixel size and the exact optimized-ness that it needs to be. So, you pretty much don’t have to think about it.

Take a screenshot. Upload it to our little CMS thing. It uses a nice little tool. Plops it where it needs to be in our R2, and it’s done. That was very satisfying.

Marie: That has really sped things up, too, because it was a painstaking process before, you know, resizing the images, making sure that we had the right URL parameters, all that type of stuff. It was heavily manual.

Chris: Yeah.

Marie: Big old pain.

Chris: Mm-hmm.

Marie: And this is wonderful by comparison and really cuts down how long it takes to assemble, to physically assemble a Spark.

Chris: Yeah. I thought I would mention it does. You do it enough that you’re probably over it, but when I upload an image to that new little uploader thing.

We haven’t yet ported all that world to the CodePen assets that you get to use. We have a perfectly nice uploader.

Marie: Yeah.

Chris: But the R2 uploader is, I think, a little nicer, still.

Marie: It’s pretty sweet. Yeah.

Chris: Yeah.

Marie: Yeah. No, I think about it a lot because I remember what it used to be.

Chris: Yeah, right. I was pretty proud of that one.

Marie: Yeah, you should be.

Chris: The old Chris slipped that one through, didn’t I? Yeah. Just saying.

Marie: Yeah.

00:30:13

Chris: We also use a language called MJML sometimes.

Marie: Yep.

Chris: If people haven’t used that, I used to handcraft these. I used to take pride and be like, “I can craft an HTML email. I don’t care how long it takes. This is big business for us. I will craft the perfect HTML that makes this email work.”

But even I have my limits to what it actually takes to make the perfect email that will render perfectly across the two zillion email clients. If you all didn’t know this, actually, cross-email client rendering is a much harder problem than cross-browser. That’s hard enough.

Marie: Oh, yeah, is it ever. Yeah.

Chris: But email is way crazier. MJML is just a nice language that has limited primitives. It looks like HTML that you’re writing, but they’re all like mjml-elements. They look like custom elements, kind of. Whatever. But they’re like, a special tag for images and a special tag for columns and special tags for wrappers and stuff. If you use all their special tags, which Lint, Prettier, Nicely, and all that, then you get this HTML mess out the other side. That will work in all the other languages. So, it’s very nice to use knowing that you have this, like, I don’t have to worry about all the absolute intricacies of how this is going to work. It’s just going to do it for me.

Marie: They figured them all out. It’s so reliable. It’s really impressive.

Chris: It’s nice, and it gives us this… Because we want to sometimes craft one-off emails for dedicated Sparks, which are worth money to us–

Marie: Mm-hmm.

Chris: –now we have MJML to do that. So, we can just write up a one-off email real quick in MJML, and that’s worth it. And it’s worth it to not have the headache of screwing it up.

Marie: Definitely.

Chris: Yep. We’ll sell an ad however we need to sell it, but we do still work with a company BySellAds.

Marie: Mm-hmm.

Chris: It’s been a long time, and they help us sell the challenges and the Spark and the dedicated Sparks and stuff. So, if you were to contact us about advertising, it’s possible we’d work with you directly. But more likely that we have you work with their team, who we trust, and are reliable to help gather the assets, make sure stuff goes out on time, make sure the calendar is clean, and that kind of thing. It feels good, right?

Marie: It sure does.

Chris: A lot of emails we send.

Marie: We sure do. Yep.

Chris: And there’s always something to do. It kind of keeps us on our toes.

Marie: Yeah. Well, and it’s fun to do. You know what I mean? It’s really great to be able to highlight the stuff that people are doing on CodePen.

The dedicated issues have given me an opportunity to expand the editorial view of the Spark because it’s not just what’s hot this week or what’s new this week. It’s what’s happening in front of development or what’s new in the world of front-end development, in general. Really cool stuff.

Chris: All right, everybody. That’s email on CodePen. It’s good to be back. We have a million topics to talk about. Hopefully, we’ll be doing it weekly-ish.

We are in private beta of the new editor, if anybody really wants in on that, please email me at chris@codepen.io. I’d be happy to give you a tour, get you into the Discord, get you into looking at the new thing. We’re very excited about it, of course.

That’s that. See you later. See you next time.

[subtle upbeat tune]