Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
Jake works here at CodePen. He said to me recently that it's nice he's doing a lot of backend work right now, because then when he gets a chance to create some Pens, the front end stuff is a refreshing change of pace.
It sure must be! Jake has been exploding with all kinds of creative ideas with a wide variety of tech implemented in interesting ways.
Combining Video & Audio Streams
Playing around with video and audio stream data. Currently using the audio levels to manipulate video frame threshold.
Gotta open this one over HTTPS.
Wanna turn an interrupted night's sleep into a weird poem?
The Monty Hall Problem
Suppose you're on a game show, and you're given the choice of three doors: Behind one door is a car; behind the others, goats. You pick a door, say No. 1, and the host, who knows what's behind the doors, opens another door, say No. 3, which has a goat. He then says to you, "Do you want to pick door No. 2?" Is it to your advantage to switch your choice?
Apparently it is to your advantage to switch your choice, which is wildly unintuitive but demonstrably true.
Jake recreates the situation, even with the randomization, using the checkbox hack and Sass.
Tooooo Many Checkboxes
Rachel said we almost needed to stage a checkbox hack intervention after some Pens like this that combine a massive amount of HTML loops creating checkboxes and CSS loops creating logic to make stuff like this "Binary Writer":
Similar: The CSS Calculator
Typing Code, Making Music
Sure, why not combine them? It even renders the code as you go.
Speaking of typing, remember the classic Pen that coded itself?
A little reason. A little rhyme. A little random.
This one uses native scrolling as the UI so the random creations are saved as you go.
I always like the ones that combine types of sounds, like a drum machine with the notes, or in this case, a bass line: