<commit_before>---
title: "Year In Review: 2016"
date: 2017-01-01
tweets: true
---

2016 has come and gone as has my sense of displacement as I spent the year nestling back into the city I consider synonymous with home. 

If I had one phrase to describe this year it would be, “Barf, but in a good way”. This year was spent creating pretty much everything I thought about creating. I was having fun having time to have fun. I am currently watching my output decline simply because this year set the bar entirely too high which is something I type while smiling.


## A Dumb Brand
I always enjoy doing something different with my identity every year. 2016’s attempt turned out to be fairly accurate.

<iframe height="398" scrolling="no" title="Profile Header 3.0" src="//codepen.io/jakealbaugh/embed/qZVRrb/?height=398&theme-id=21346&default-tab=result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/jakealbaugh/full/qZVRrb/">Profile Header 3.0</a> by <NAME> (<a href="http://codepen.io/jakealbaugh">@jakealbaugh</a>) on <a href="http://codepen.io">CodePen</a>.</iframe> <!-- iframe -->


## Music Pens
This year I really got into making music in the web browser.


### Infinitely Scrolling Random Music
It all started with the dumb question, “What if you could infinite scroll music?” I proceeded to create a pen that randomly generates triads in a key and then plays them as you scroll past them. The further you scroll, the more music is generated. The entire performance is stored as DOM content so you can go backwards through what you generated, and you can select auto scroll and the screen will scroll down at a constant rate.

![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/2016-portfolio-LGmygN.png)

You can try it out yourself [on CodePen](http://codepen.io/jakealbaugh/full/LGmygN).


### Step-o-matic
I decided to try and make a step sequencer using [Tone.js](http://tonejs.org) and that turned into the [Step-o-matic](http://codepen.io/jakealbaugh/full/dGqXgp). The major features are the ability to set it to more or less than four beats, program a basic customizable drum kit, have full control over the key, and save/load your program.

![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/2016-portfolio-dGqXgp.png)


### Chance the Rapper
I also made a few Chance the Rapper-flavored pens. The first was [Grab the Chano](http://codepen.io/jakealbaugh/full/ONPYxo), a pixelated face that sings when you grab it. If you are on a desktop, you can grab it below.

<iframe height='600' scrolling='no' title='Grab the Chano' src='//codepen.io/jakealbaugh/embed/ONPYxo/?height=600&theme-id=21346&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/jakealbaugh/full/ONPYxo/'>Grab the Chano</a> by <NAME> (<a href='http://codepen.io/jakealbaugh'>@jakealbaugh</a>) on <a href='http://codepen.io'>CodePen</a>.</iframe> <!-- iframe -->

Then I made [Chance the Sampler](http://codepen.io/jakealbaugh/full/eZJmQK) which is a a sampler/sequencer with pads that you can program using samples of Chance’s voice.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Mashing code and <a href="https://twitter.com/chancetherapper">@chancetherapper</a> together on <a href="https://twitter.com/CodePen">@codepen</a>:<br><br>Chance the Sampler<a href="https://t.co/VwuCGZatOA">https://t.co/VwuCGZatOA</a> <a href="https://t.co/7kMx8buedu">pic.twitter.com/7kMx8buedu</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/707056690173231104">March 8, 2016</a></blockquote>


### SoundCloud Pixel Cover Artwork Visualizer
One of the frustrating parts about sketching up audio visualizers on the net are the limitations of using source audio materials. To get around this limitation, I used the SoundCloud API to make [an audio visualizer](http://codepen.io/jakealbaugh/full/EKQaNP) that visualizes the cover artwork of SoundCloud tracks.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Pixel-ized cover art visualizer with <a href="https://twitter.com/SoundCloud">@SoundCloud</a> API.<a href="https://t.co/2JBN7J5Kvy">https://t.co/2JBN7J5Kvy</a><br><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/Q9UcrOAZqz">pic.twitter.com/Q9UcrOAZqz</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/719676597280727040">April 12, 2016</a></blockquote>


### Seeded Procedural Music Generator
I made a pen that uses a seeded random number generator to create infinite unique music based on seed data that it can recreate every time it is provided the same seed. I then used the [abcjs library](https://github.com/paulrosen/abcjs) to draw the notation of the song being composed. [Try it out yourself](http://codepen.io/jakealbaugh/full/EKRarY) and toss your name in there as a seed to hear a song made just for you by math.

![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/2016-portfolio-EKRarY.png)


### Musical Chord Progression Arpeggiator
I then spent some time on [an arpeggiator](http://codepen.io/jakealbaugh/full/qNrZyw) that the rest of the internet fancied. The goal was to create a quick way to sketch out chord progressions and along the way learn something about music theory.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Musical Chord Progression Arpeggiator <a href="https://t.co/0YE1U9B3sW">https://t.co/0YE1U9B3sW</a><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/c2zPnUvpk4">pic.twitter.com/c2zPnUvpk4</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/748255549016276992">June 29, 2016</a></blockquote>


### “In C” by <NAME>
After witnessing an awesome performance at a Chicago CodePen meetup of the same composition, I tried creating [a randomized performance of Terry Riley’s “In C”](http://codepen.io/jakealbaugh/full/NAjdLY) using web oscillators. This also uses seeded randomness so that it could be played the same way each time it is loaded.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">“In C” by <NAME> using Tonejs &amp; <a href="https://twitter.com/CodePen">@CodePen</a><br>best on Chrome and Safari, a tad glitchy on FF<a href="https://t.co/iQApj4sWe7">https://t.co/iQApj4sWe7</a> <a href="https://t.co/Stv37DytLc">pic.twitter.com/Stv37DytLc</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/750370068865789952">July 5, 2016</a></blockquote>

Here’s Bryant performing his version using his Repeater Orchestra at CodePen Chicago.

<iframe width="640" height="360" src="https://www.youtube.com/embed/yY8XUcw8XgE" frameborder="0" allowfullscreen></iframe> <!-- iframe -->



### Arpeggiator Cube
I wanted to make a more abstract arpeggiator and that ended up becoming the [Arpeggiator Cube](http://codepen.io/jakealbaugh/full/vKJKoL). You rotate along the X and Y axis to change the triad and tempo. It works well on mobile which I was pretty stoked about. Tap along the Y axis to change the arpeggio pattern which is illustrated on the side of the cube.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Arpeggiator Cube using <a href="https://twitter.com/CodePen">@CodePen</a> and Tone.js<a href="https://t.co/AI8LgGMGAN">https://t.co/AI8LgGMGAN</a> <a href="https://t.co/RjeHL1y1ju">pic.twitter.com/RjeHL1y1ju</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/751063221767852032">July 7, 2016</a></blockquote>


### Metered
Inspired by the minimalistic work “In C”, I wrote a composition that uses rhythm to bring order out of chaos. There are five patterns in different time signatures. These patterns loop on top off each other, creating polyrhythms. They take turns being the primary pattern. When they are primary, their octave is shifted up and the drum plays a beat in the given rhythm. The primary pattern only shifts when the current and next pattern end at the same time to have a clean hand off. I figured the best way to perform this was with a web browser, so [Metered](http://codepen.io/jakealbaugh/full/WxgzWE) became a thing.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Metered is a composition that explores rhythmic perception.<br>Performed by <a href="https://twitter.com/CodePen">@CodePen</a> &amp; Tone.js<a href="https://t.co/8neB2IqtNN">https://t.co/8neB2IqtNN</a> <a href="https://t.co/zc8WqXohg1">pic.twitter.com/zc8WqXohg1</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/763043021172514817">August 9, 2016</a></blockquote>


### Halloween Multi-device Performance 
http://codepen.io/jakealbaugh/post/firebase-tone-js-and-device-orientation

<iframe width="640" height="360" src="https://www.youtube.com/embed/5gmLsbhO1UE" frameborder="0" allowfullscreen></iframe> <!-- iframe -->

<iframe src="https://player.vimeo.com/video/189584661" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <!-- iframe -->


### Audio VisualEyezer
http://codepen.io/jakealbaugh/full/ObOPEV

<iframe width="640" height="360" src="https://www.youtube.com/embed/-W2za1VBC0Y" frameborder="0" allowfullscreen></iframe> <!-- iframe -->



## CSS-only Pens
I went all out with CSS this year too. Here’s a quick overview of the weird things I did without using JavaScript.

A [CSS Calculator](http://codepen.io/jakealbaugh/full/mVYgLo) that isn’t that useful.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">One of those nights. A CSS Calculator.<a href="https://t.co/JpAWgKZUqW">https://t.co/JpAWgKZUqW</a><br><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/UgPpXqopYN">pic.twitter.com/UgPpXqopYN</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/700917120029163520">February 20, 2016</a></blockquote>

<br>
Writing in binary with the [Binary Writer](http://codepen.io/jakealbaugh/full/zrVdME).

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Love the efficiency of writing binary?<br>Love OO langs like CSS and HTML?<a href="https://t.co/eWyEaBUOJV">https://t.co/eWyEaBUOJV</a><br><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/2oWTMZmLT0">pic.twitter.com/2oWTMZmLT0</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/702296449413828608">February 24, 2016</a></blockquote>


<br>
Writing in English with the [CSS Keyboard](http://codepen.io/jakealbaugh/full/LNdWZG).

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Finished a functional CSS Keyboard last night for <a href="https://twitter.com/hashtag/CodePenChicago?src=hash">#CodePenChicago</a><a href="https://t.co/vJbTCBJPYN">https://t.co/vJbTCBJPYN</a><br><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/8Pefq8vasr">pic.twitter.com/8Pefq8vasr</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/720694561199288321">April 14, 2016</a></blockquote>

<br>
Drawing a phone number with checkboxes like an idiot with the [CSS Checkbox Phone Number Input](http://codepen.io/jakealbaugh/full/yOQEOo).

<blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/stelian">@stelian</a> late to the game, but this works only using CSS.<a href="https://t.co/4ipLaLqqnx">https://t.co/4ipLaLqqnx</a> <a href="https://t.co/QOweuGY6kK">pic.twitter.com/QOweuGY6kK</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/727277494076858371">May 2, 2016</a></blockquote>

<br>
[Searching and filtering a Dataset in CSS](http://codepen.io/jakealbaugh/full/aZdjVj) because it’s practical.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">searching and filtering a dataset with CSS because friday<a href="https://t.co/WKbCd1JttS">https://t.co/WKbCd1JttS</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/741416798306721792">June 10, 2016</a></blockquote>


## Fuzzy Search
http://codepen.io/jakealbaugh/full/wzzrmX

https://github.com/jakealbaugh/fuzzy-search

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Made a fuzzy search lib:<a href="https://t.co/2A2HgoZSZ0">https://t.co/2A2HgoZSZ0</a><br><br>...figured it should belong to everyone:<a href="https://t.co/zbm6S9Ezlu">https://t.co/zbm6S9Ezlu</a> <a href="https://t.co/gnsuBIFWPH">pic.twitter.com/gnsuBIFWPH</a></p>&mdash; <NAME>baugh (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/777640607653236736">September 18, 2016</a></blockquote>

## CodePen & Community
http://codepen.io/jakealbaugh/post/codepen-community

## Northwestern<commit_msg>saving draft<commit_after>---
title: "Year In Review: 2016"
date: 2017-01-01
tweets: true
---

2016 has come and gone as has my sense of displacement as I spent the year nestling back into the city I consider synonymous with home. 

If I had one phrase to describe this year it would be, “Barf, but in a good way”. This year was spent creating pretty much everything I thought about creating. I was having fun having time to have fun. I am currently watching my output decline simply because this year set the bar entirely too high which is something I type while smiling.


## A Dumb Brand
I always enjoy doing something different with my identity every year. 2016’s attempt turned out to be fairly accurate.

<iframe height="398" scrolling="no" title="Profile Header 3.0" src="//codepen.io/jakealbaugh/embed/qZVRrb/?height=398&theme-id=21346&default-tab=result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/jakealbaugh/full/qZVRrb/">Profile Header 3.0</a> by <NAME> (<a href="http://codepen.io/jakealbaugh">@jakealbaugh</a>) on <a href="http://codepen.io">CodePen</a>.</iframe> <!-- iframe -->


## CodePen & Community
I gave a talk over at Trulia about CodePen and Community and wrote a [long form version](http://codepen.io/jakealbaugh/post/codepen-community) of the talk on CodePen as well as a companion [emotional post about not being good enough to speak](http://blog.jakealbaugh.com/2016/04/13/speaking/) here on my blog.

## Wildhacks
I was asked to keynote and judge at [Wildhacks 2016](https://twitter.com/nuwildhacks/) over at Northwestern University this year along with [D<NAME>](https://twitter.com/broccolini). I had a blast hanging with all these skilled kids that absolutely killed it.


## Fuzzy Search
I made one truly useful thing outside of my job at CodePen this year and it just so happened to be something we are going to be using in an upcoming feature. It is a “Fuzzy Search” library that allows you to search strings partially or completely. You can check out the project on [GitHub](https://github.com/jakealbaugh/fuzzy-search) or play with it over on [CodePen](http://codepen.io/jakealbaugh/full/wzzrmX).

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Made a fuzzy search lib:<a href="https://t.co/2A2HgoZSZ0">https://t.co/2A2HgoZSZ0</a><br><br>...figured it should belong to everyone:<a href="https://t.co/zbm6S9Ezlu">https://t.co/zbm6S9Ezlu</a> <a href="https://t.co/gnsuBIFWPH">pic.twitter.com/gnsuBIFWPH</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/777640607653236736">September 18, 2016</a></blockquote>


## Music Pens
This year I really got into making music in the web browser.


### Infinitely Scrolling Random Music
It all started with the dumb question, “What if you could infinite scroll music?” I proceeded to create a pen that randomly generates triads in a key and then plays them as you scroll past them. The further you scroll, the more music is generated. The entire performance is stored as DOM content so you can go backwards through what you generated, and you can select auto scroll and the screen will scroll down at a constant rate.

![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/2016-portfolio-LGmygN.png)

You can try it out yourself [on CodePen](http://codepen.io/jakealbaugh/full/LGmygN).


### Step-o-matic
I decided to try and make a step sequencer using [Tone.js](http://tonejs.org) and that turned into the [Step-o-matic](http://codepen.io/jakealbaugh/full/dGqXgp). The major features are the ability to set it to more or less than four beats, program a basic customizable drum kit, have full control over the key, and save/load your program.

![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/2016-portfolio-dGqXgp.png)


### Chance the Rapper
I also made a few Chance the Rapper-flavored pens. The first was [Grab the Chano](http://codepen.io/jakealbaugh/full/ONPYxo), a pixelated face that sings when you grab it.

Then I made [Chance the Sampler](http://codepen.io/jakealbaugh/full/eZJmQK) which is a sampler/sequencer with pads that you can program using samples of Chance’s voice.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Mashing code and <a href="https://twitter.com/chancetherapper">@chancetherapper</a> together on <a href="https://twitter.com/CodePen">@codepen</a>:<br><br>Chance the Sampler<a href="https://t.co/VwuCGZatOA">https://t.co/VwuCGZatOA</a> <a href="https://t.co/7kMx8buedu">pic.twitter.com/7kMx8buedu</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/707056690173231104">March 8, 2016</a></blockquote>


### SoundCloud Pixel Cover Artwork Visualizer
One of the frustrating parts about sketching up audio visualizers on the net are the limitations of using source audio materials. To get around this limitation, I used the SoundCloud API to make [an audio visualizer](http://codepen.io/jakealbaugh/full/EKQaNP) that visualizes the cover artwork of SoundCloud tracks.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Pixel-ized cover art visualizer with <a href="https://twitter.com/SoundCloud">@SoundCloud</a> API.<a href="https://t.co/2JBN7J5Kvy">https://t.co/2JBN7J5Kvy</a><br><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/Q9UcrOAZqz">pic.twitter.com/Q9UcrOAZqz</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/719676597280727040">April 12, 2016</a></blockquote>


### Seeded Procedural Music Generator
I made a pen that uses a seeded random number generator to create infinite unique music based on seed data that it can recreate every time it is provided the same seed. I then used the [abcjs library](https://github.com/paulrosen/abcjs) to draw the notation of the song being composed. [Try it out yourself](http://codepen.io/jakealbaugh/full/EKRarY) and toss your name in there as a seed to hear a song made just for you by math.

![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/2016-portfolio-EKRarY.png)


### Musical Chord Progression Arpeggiator
I then spent some time on [an arpeggiator](http://codepen.io/jakealbaugh/full/qNrZyw) that the rest of the internet fancied. The goal was to create a quick way to sketch out chord progressions and along the way learn something about music theory.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Musical Chord Progression Arpeggiator <a href="https://t.co/0YE1U9B3sW">https://t.co/0YE1U9B3sW</a><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/c2zPnUvpk4">pic.twitter.com/c2zPnUvpk4</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/748255549016276992">June 29, 2016</a></blockquote>


### “In C” by <NAME>
After witnessing an awesome performance at a Chicago CodePen meetup of the same composition, I tried creating [a randomized performance of Terry Riley’s “In C”](http://codepen.io/jakealbaugh/full/NAjdLY) using web oscillators. This also uses seeded randomness so that it could be played the same way each time it is loaded.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">“In C” by Terry Riley using Tonejs &amp; <a href="https://twitter.com/CodePen">@CodePen</a><br>best on Chrome and Safari, a tad glitchy on FF<a href="https://t.co/iQApj4sWe7">https://t.co/iQApj4sWe7</a> <a href="https://t.co/Stv37DytLc">pic.twitter.com/Stv37DytLc</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/750370068865789952">July 5, 2016</a></blockquote>

Here’s Bryant performing his version using his Repeater Orchestra at CodePen Chicago.

<iframe width="640" height="360" src="https://www.youtube.com/embed/yY8XUcw8XgE" frameborder="0" allowfullscreen></iframe> <!-- iframe -->



### Arpeggiator Cube
I wanted to make a more abstract arpeggiator and that ended up becoming the [Arpeggiator Cube](http://codepen.io/jakealbaugh/full/vKJKoL). You rotate along the X and Y axis to change the triad and tempo. It works well on mobile which I was pretty stoked about. Tap along the Y axis to change the arpeggio pattern which is illustrated on the side of the cube.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Arpeggiator Cube using <a href="https://twitter.com/CodePen">@CodePen</a> and Tone.js<a href="https://t.co/AI8LgGMGAN">https://t.co/AI8LgGMGAN</a> <a href="https://t.co/RjeHL1y1ju">pic.twitter.com/RjeHL1y1ju</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/751063221767852032">July 7, 2016</a></blockquote>


### Metered
Inspired by the minimalistic work “In C”, I wrote a composition that uses rhythm to bring order out of chaos. There are five patterns in different time signatures. These patterns loop on top off each other, creating polyrhythms. They take turns being the primary pattern. When they are primary, their octave is shifted up and the drum plays a beat in the given rhythm. The primary pattern only shifts when the current and next pattern end at the same time to have a clean hand off. I figured the best way to perform this was with a web browser, so [Metered](http://codepen.io/jakealbaugh/full/WxgzWE) became a thing.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Metered is a composition that explores rhythmic perception.<br>Performed by <a href="https://twitter.com/CodePen">@CodePen</a> &amp; Tone.js<a href="https://t.co/8neB2IqtNN">https://t.co/8neB2IqtNN</a> <a href="https://t.co/zc8WqXohg1">pic.twitter.com/zc8WqXohg1</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/763043021172514817">August 9, 2016</a></blockquote>


### Halloween Multi-device Performance 
For a CodePen Chicago meetup, I created a pen that used a Firebase real-time database, Tone.js and device orientation to have a multi-device Halloween performance. Everyone at the meetup was able to use their phones to make noise, and I could control what notes they played from my computer.

I wrote [a post on CodePen explaining how it works](http://codepen.io/jakealbaugh/post/firebase-tone-js-and-device-orientation), and made a video demonstrating the pen.

<iframe width="640" height="360" src="https://www.youtube.com/embed/5gmLsbhO1UE" frameborder="0" allowfullscreen></iframe> <!-- iframe -->

[<NAME>](https://twitter.com/poopsplat) (the mayor of CodePen Chicago) was there to take a video of the whole thing as well.

<iframe src="https://player.vimeo.com/video/189584661" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <!-- iframe -->


### Audio VisualEyezer
I made a handful of audio visualizers this year, the last of which was probably the most challenging. It uses your computer’s microphone to build a unique eye shape based on the dynamics of what it hears. You can try the [Audio VisualEyezer](http://codepen.io/jakealbaugh/full/ObOPEV) yourself and let it draw an eye for your voice, your favorite protest song, the sound of your yawns...

Here it is responding to some Chance the Rapper (surprise!).

<iframe width="640" height="360" src="https://www.youtube.com/embed/-W2za1VBC0Y" frameborder="0" allowfullscreen></iframe> <!-- iframe -->



## CSS-only Pens
I went all out with CSS this year too. Here’s a quick overview of the weird things I did without using JavaScript.

A [CSS Calculator](http://codepen.io/jakealbaugh/full/mVYgLo) that isn’t useful.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">One of those nights. A CSS Calculator.<a href="https://t.co/JpAWgKZUqW">https://t.co/JpAWgKZUqW</a><br><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/UgPpXqopYN">pic.twitter.com/UgPpXqopYN</a></p>&mdash; <NAME>ugh (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/700917120029163520">February 20, 2016</a></blockquote>

<br>
Writing in binary with the [Binary Writer](http://codepen.io/jakealbaugh/full/zrVdME).

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Love the efficiency of writing binary?<br>Love OO langs like CSS and HTML?<a href="https://t.co/eWyEaBUOJV">https://t.co/eWyEaBUOJV</a><br><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/2oWTMZmLT0">pic.twitter.com/2oWTMZmLT0</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/702296449413828608">February 24, 2016</a></blockquote>


<br>
Writing in English with the [CSS Keyboard](http://codepen.io/jakealbaugh/full/LNdWZG).

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Finished a functional CSS Keyboard last night for <a href="https://twitter.com/hashtag/CodePenChicago?src=hash">#CodePenChicago</a><a href="https://t.co/vJbTCBJPYN">https://t.co/vJbTCBJPYN</a><br><br>via <a href="https://twitter.com/CodePen">@CodePen</a> <a href="https://t.co/8Pefq8vasr">pic.twitter.com/8Pefq8vasr</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/720694561199288321">April 14, 2016</a></blockquote>

<br>
Drawing a phone number with checkboxes like an idiot with the [CSS Checkbox Phone Number Input](http://codepen.io/jakealbaugh/full/yOQEOo).

<blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/stelian">@stelian</a> late to the game, but this works only using CSS.<a href="https://t.co/4ipLaLqqnx">https://t.co/4ipLaLqqnx</a> <a href="https://t.co/QOweuGY6kK">pic.twitter.com/QOweuGY6kK</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/727277494076858371">May 2, 2016</a></blockquote>

<br>
[Searching and filtering a Dataset in CSS](http://codepen.io/jakealbaugh/full/aZdjVj) because it’s practical.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">searching and filtering a dataset with CSS because friday<a href="https://t.co/WKbCd1JttS">https://t.co/WKbCd1JttS</a></p>&mdash; <NAME> (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/741416798306721792">June 10, 2016</a></blockquote>
{'fraction_non_alphanumeric': 0.14651103223681802, 'fraction_numerical': 0.03553002305243514, 'mean_word_length': 5.238301757589592, 'pattern_counts': {'":': 0, '<': 418, '<?xml version=': 0, '>': 418, 'https://': 145, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5704078', 'n_tokens_mistral': 10237, 'n_tokens_neox': 9441, 'n_words': 2632}