The Checkbox Hack

[00:00:00]
>> Rodriguez: So let's look at more advanced examples. We're not going to build something like this but we're gonna look at the underlying mechanism for adding this in an email purchasing experience. So this was built out by a guy named Mark Robbins who works for Salesforce. He used to work for a company called Rebel Mail that was acquired by Salesforce.

[00:00:22]
But he's kind of like the godfather of interactive emails, his nickname for all intents and purposes in the industry. He's the one that pioneered a lot of this functionality. Where you have these different states. You're tracking all these different states in an email. You're sending information out to a web page, complete a purchase.

[00:00:40]
I do all this really fancy stuff that drives a lot of engagement inside of email campaigns. At LMS we leverage that same kind of II. We worked with Rebel Mail in the past to add like an email checkout experience for our own conference emails. He's worked with like Burberry and all these cool brands adding this kind of functionality.

[00:01:00]
Other brands are doing cool stuff nest, thermostats and cameras and stuff. They send a lot of interactive emails which are kind of like productive switchers and stuff like that. A lot of cool companies doing really interesting things with interactive email. But when you get into this level, it's not just hover states, it's not just keyframe animations.

[00:01:20]
You have to figure out a way to manage state across your email campaign. The problem is you don't have the resource of like JavaScript or have server side language running in the background that's managing that state, that can track that state in the variable or something like that.

[00:01:35]
So we have to figure out a way to fake that inside of our email campaign. And the way we do that is by using the checkbox hack. So is anybody familiar with a checkbox hack? Anybody used it before? A lot of shaking heads, cool. So hopefully this will blow your mind a little bit.

[00:01:53]
It's a really cool technique, but this comes from way back in the day, the early days of programming. Another name for this that Mark actually has a great article up on, I forget the magazine's website, but I could add it to the GitHub repo called punch card coding.

[00:02:12]
So if you think about the early days of programming before we had these higher level languages, we had compilers, all that good stuff. People would use punch cards to code programs. So you'd have a paper card, you'd punch holes in these different kind of grid elements to dictate that state of that program at that specific point in time.

[00:02:34]
So the checkbox hack works in the same way. It's you're creating this punch card coding experience, you're managing state across these different time points using a punch on this card. In this case it's gonna be like checked check box or checked radio button to track that state. And then based on that state which items are checked?

[00:02:56]
Which radio buttons or check boxes are checked at that point? We're gonna update the styling of our content. So we can selectively hide and show content, we can adjust styles. We can do all that stuff based on that state. So it's a little bit weird. It's very hacky to get into it.

[00:03:14]
It's called a hack for a reason, cuz we're doing some weird stuff that was never intended to happen with these elements.