January 3rd: The Most Hearted Pens of 2022, CSS is Awesome, and Genuary Begins
The Most Hearted of 2022
It's here! Take a look back at the 100 Pens that got the most love on CodePen in 2022. And, follow the creators on the list to make your following feed amazing in 2023!
genuary1 - loop
The GENUARY generative art challenge is on! Sophia Wood created this hypnotic dot loop in response to the "perfect loop" prompt on day 1.
CSSkateboard [w/GSAP Observer]
Ryan Mulligan "uses the CSS :has function to apply theming and GSAP Observer to help with those sweet moves" in this rad Pen. Flip the skateboard to check out the "CSS is Awesome" sticker!
Interactive ropes background
Evan Jin (진경성) practices the Verlet physics algorithm "without using physics library such as Matter.js" in this Pen that is so fun to play with. Try dragging your cursor through the ropes, or hovering over the orbs at the ends.
You're tornado now!
AlexandrVopilin whips up a geometric twister in this animated Pen, now part of the #CodePenChallenge: Wind collection.
Mastodon Verification of CodePen Profiles
New social feature! If you link to your Mastodon profile from CodePen, and your CodePen profile from Mastodon, your Mastodon profile will display your CodePen profile as a verified link, proving ownership.
The Legend of Zelda
Kit Jenson shares a Nintendo-inspired minigame powered by vanilla JS. Use your arrow keys to move and spacebar to attack the dragon!
Smiley Preloader
Jon Kantner wraps up a spectacular year of creative loaders with this friendly fella, inspired by Oleksandr Pronskyi's Dribbble shot. Wait for the wink!
transform: rotateX(deg) rotateY(deg);
"CSS is Awesome" makes another appearance this week in Yusuke Nakaya's transform playground. Set the degree for rotateX and rotateY to see the transformation in action.
#CodePenChallenge: Sunshine
We wrapped up December's "Weather Effects" challenge with a whole week of sunshine! Check out the Pens from week four, a including sunny creations from Jackie Zen, ZIM, amCharts Team, and Brandel Zachernuk.
Text on a Path
Eric Karkovack assembles a collection of stylish demonstrations of how to work with text on a path, including clever shape-outside work and SVG textPath virtuosity.
Chroma Cycle
Dots expand into loops with trippy trailing colors in this GSAP-fueled SVG animation from Chris Gannon.
Chris' Corner
What a great topic for a book zine from Julia Evans: The Pocket Guide to Debugging.
You can tell it’s great just from this very true sentence from Julia:
I love that the table of contents is already kind of useful as a collection of strategies on its own.
Indeed — go look at it.
🎥 There is a fine art to making compelling video for developers. Is it worth doing?
On one hand, most developers prefer written information. Don’t make me watch a video to get the bit I need, so the refrain goes, with StackOverflow’s 1.8 billion dollar acquisition backing that up. Right now, it’s too slow finding an answer within video. Too much scrubbing to attempt to determine if your answer will be in there at all. Maybe that’s solvable someday, but maybe video just isn’t the right format for finding answers when you are stuck.
But how-to and problem-solving isn’t the only category of tech video. You could use video to demonstrate a technology that might be entirely new to a developer. If you get that developer to watch your video and pay attention, you’re on your way to some intellectual buy-in that can be quite valuable.
So how do you make video work? Keep it short seems to be one trick that’s working. Fireship is a mega-popular developer-focused YouTube channel that excels at short form. Most of the videos are just a couple of minutes but do a good job of packing all the most important points in. Back in 2021, they did an Astro in 100 Seconds video that was so well done the Astro team used it at the top of their homepage for a while. Then followed up a year later with Astro just Launched which is only about 200 seconds and even more popular. Introducing new tech, video essays, and general news seem like good territory for video. Despite being very related to developers jobs, it’s also a form of entertainment.
Likewise, it’s been interesting to see Wes Bos use Tik Tok for his very short-form hot tips and do well there relatively quickly. These are generally under a minute long. You’ll probably actually learn something, which is cool — and for Wes, it’s helping establish him as a trustable teacher from which you might want to buy a course from. So by the time you’re watching longer-form video, you’ve been convinced it’ll be good by shorter-form video.
It’s also not just one-off videos. While I remember shooting fairly long-form video for Lynda.com, other training platforms are slicing courses up into smaller bits these days. Egghead considers it a big selling point:
Our lessons are 3-7 minutes long – short, sweet, and to the point. They’re designed to be watched either individually or as part of a course, so you can jump around and get exactly the information you need.
(To be fair, poking around at some recent Lynda.com tech courses, they also need to be chopped up into fairly short parts.)
It’s not just the brevity that is helping modern videos succeed, but as ever, they need to be interesting and have a decent amount of production quality.
I’m thinking about all this from the perspective of someone who has produced quite a few tech videos in my day (somewhere in the 1,000 range) and for the most part, they were long (often an hour) and low production quality (just record screen and zero editing). Somehow I got away with that for a decade or so, but I think those days are over. I could never compete doing that today.
Why did I just write 500 words on tech video? Eh, I had a couple of video links saved that I wanted to share and it sparked some thoughts. Here are those 🔥 hot links:
- Length: 5:02 — Vite Got Deno-fied
- Length: 14:02 — Svelte for React developers
- Length: 9:25 — The problem with percentages in CSS
- Length: 6:58 — Award Winning Animation With Only 20 Lines Of CSS?
- Length: 21:27 — Thinking on ways to solve BASIC PHYSICS
If I had to guess, I’d say video will be pushing shorter and shorter, not just because ugh the kids these days have shorter attention spans, but because short video forces people to make their point better.
If I had more time, I would have written a shorter letter.
— Mark Twain, maybe.
One counter-example: an extremely good and very long tech video recently, The Continuity of Splines, clocks in at 1:13:49.