350: 2021’s Most Hearted

01/12/22 • 0 min

It's back! We counted up all the hearts given to every Pen created in 2021 and created a list of the top 100. Marie and Chris chat about this year's list. Who's on it, what's on it, and digging into the numbers where we can.

Remember that people can heart pens up to 3 times each, so if it looks like a Pen lower down the list has more hearts than one higher up the list, it's because of the density of hearts. The number you see on the card only reflects the number of people that have hearted not the true number of hearts.

Lots of folks hitting multiple times. George Francis hit 6(!) times (7, 28, 59, 75, 80, 82), an impressive feat for a member who only joined in late 2020. Four people with four placements: Aysenur Turk (3, 11, 14... and 🥁 1), Yoav Kadosh (17, 33, 72, 95), Dilum Sanjaya (22, 24, 64, 65), and Aybüke Ceylan (38, 46, 63, 91), and a couple of 2-position people. Woot!

"Full page" layouts were quite a trend on the Top 100 this year. That is, Pens that look like complete websites with widgets and cards and navigation and sidebars and the whole nine yards. That's opposed to some past years where more minimal small-yet-surprising Pens were more dominant in the Top 100.

Advice for those shooting for the top? Talk about your work. Almost nobody on the list creates work and then never shares it. Share it on social media, blog about it, make a video, re-promote it multiple times. Be part of the community by liking other people's work. Remember, your hearts come from other CodePen members. Also, feel free to update and revise your Pens. Many of the Top 100 are updated and improved even after their initial wave of popularity.

Time Jumps Sponsor: Netlify

Did you Netlify offers auth? They call it Netlify Identity. Why would you need auth on a static site? Well, a static site can also by quite dynamic, that's the nature of Jamstack. Say you're building a TODO app. No problem! You can have users sign up and log in. You can store their data in a cloud database. You can pull the data for that user from the database based on information about the logged-in user because of Netlify Identity.

Time Jumps Sponsor: Netlify

Previous Episode

349: With Olivia

Olivia Ng has done loads of wonderful work here on CodePen and off (check out her super cool travel bucket list site) She got started just out of pure desire to build things. "I just really like the internet" she told me. Hear hear! Her eye for design takes all her work to the next level. She had a particular focus on grid for a while there, and used those interesting designs to teach it. Also find her on Twitter and on her personal website.

Time Jumps Sponsor: Jetpack

There are lots of reasons to look at Jetpack for your self-hosted WordPress site. One of which is the powerful search upgrade you get just by flipping a switch. Say you run a lot of WordPress sites, perhaps for clients as an agency would, now Jetpack offers a Licesning Dashboard for managing all the Jetpack subscriptions so that becomes a lot easier.

Next Episode

351: Moving to PostgreSQL from MySQL

As you read this, CodePen is 100% on PostgreSQL for our main relational database. It was a transition that took a couple weeks of pretty intense effort, and lots of planning and prep before that. I've got Alex on the show to talk about it, as he was the main instigator and led the effort, but everyone contributed in some way.

Wondering why? Well...

We were on a pretty old version of MySQL (5.6), and upgrading to something more modern (like 8) would have required just as much effort, so we thought we'd move on to something we saw more value in.
We're undertaking big new efforts that require a bunch of data specific work. It'll be more work to change after that, so it felt like a now or never situation.
PostgreSQL means consolidating of technology, which is big for our small team. We've done some of this, and it opens the door for more. For example, we can stop using Elasticsearch as a totally separate database for search and lean on PostgreSQL. The same goes for an analytics-focused database, job queuing, and even potentially static asset hosting.

There is a lot to talk about here, so we get into all the nitty-gritty detail, including how we pulled it off with near-zero downtime and the tools involved.

Time Jumps Sponsor: WooCommerce

WooCommerce is eCommerce for WordPress. It's powerful software in that it can do anything you could ever want to do in selling online. You can sell physical products. You can sell digital and downloadable products. You can sell memberships or tickets or appointments. The sky is the limit. I've used it personally for all those things and have had a great experience every time.