“And what happened then? Well, in Whoville they say that the Grinch’s small heart grew three sizes that day.”

We’re taking a slightly different approach to the concept of “liking” here on CodePen. Rather than “upvoting”, “liking”, “thumbs upping”, or even regular “hearting”, we’re trying out Grinch Stole Christmas-style hearting. When you first click the heart icon next to any Pen thumbnail (or in the editor or details pages) it will grow just a little bit and turn a little pink. Click again and it grows again and gets a bit more red. Click again and it’s a big ol’ red heart. Click a fourth time to go back to the cold gray unloved heart.

The number of hearts is still only incremented by one regardless of how many hearts you give, so that number is always indicative of how many people have loved any given pen.

Why do this? A few reasons. The most compelling to me is offering the ability for you to curate content for yourself in a totally abstract way. Perhaps you reserve Pens that you give two hearts as ones that you want to remember to use in an upcoming project. I imagine the typical use case will be “loved a little”, “loved a little more”, “loved the most” – but I can’t wait to see some unique uses. We plan to offer some more specific ways to curate Pens, but I hope this is useful in the mean time.

To view your own (and others) loved pens specifically by how many hearts given, you can do that from their profile page under the Loved Pens tab:

Another reason is that we may be able to use this data to tweak the popularity algorithm to make for more interesting results. Depending on growth, we may end up retiring the Editor’s Picks category and relying more on the community to surface the best work.

And another reason is just that it’s kinda neat and interesting and The Grinch Who Stole Christmas is a great, memorable story.