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.

See the Pen Video & Audio Stream Data Playground by Jake Albaugh (@jakealbaugh) on CodePen.

Gotta open this one over HTTPS.

Wanna turn an interrupted night’s sleep into a weird poem?

See the Pen Hazy Startled Improv: The Game by Jake Albaugh (@jakealbaugh) on CodePen.

The Monty Hall Problem

This is fascinating:

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.

See the Pen The Monty Hall Problem: CSS Hacks by Jake Albaugh (@jakealbaugh) on CodePen.

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”:

See the Pen CSS: Binary Writer by Jake Albaugh (@jakealbaugh) on CodePen.

Similar: The CSS Calculator

Typing Code, Making Music

Sure, why not combine them? It even renders the code as you go.

See the Pen Learn To Code: The Musical by Jake Albaugh (@jakealbaugh) on CodePen.

Speaking of typing, remember the classic Pen that coded itself?

Randomized Music

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.

See the Pen Infinitely Scrollable Random Music by Jake Albaugh (@jakealbaugh) on CodePen.

I always like the ones that combine types of sounds, like a drum machine with the notes, or in this case, a bass line:

See the Pen Random Commander by Jake Albaugh (@jakealbaugh) on CodePen.

Let’s just end on some nightmare turkeys

See the Pen Tryptophanocalypse (Thanksgiving Nightmare) by Jake Albaugh (@jakealbaugh) on CodePen.