2016 has come and gone and with it my sense of displacement as I spent the year nestling back into the city I consider synonymous with home. I applied the patchwork of nostalgia in my choice to move back to the Logan Square neighborhood, and seemingly encountered a train that has not stopped steamrolling since I left it in 2014. This place has not felt more or less like my own.

Everything moves in and bound to time. To pause is an illusion. Things are never precisely where we left them. It is not with mourning that I engage this reality, rather with vigor as I elect to be captured sprinting along a blurred backdrop in the exposed frames of my existence.

Backdrop

For me, this past year was about inspiration. I witnessed people creating, encouraging, and empowering others in ways I can only strive to invoke; observations which directly translated into a very inspired year.

Being able to pause and recognize a completed year is important. One must not let oneself drift onward, focused solely on a theoretical future while disregarding the present and past reality. Progress is measured not by what is to come, but by what has been done. I am too easily distracted by the idea of getting better at what I do and would encourage you to join me in taking note of how we have moved this year and then to embrace it.

This year you may have fought personal battles or you may have been swept up in greater battles which became surprisingly real to many of us. If in any way you feel less capable of existing, I urge you on behalf of all of us, to keep creating and speaking. We live in a world that in spite of its overwhelming capacity for disappointment is stocked with thinkers and doers that will refuse to let deaf ears make them mute. You are alive and operational, and in many senses your perseverance is remarkable.

Community

CodePen Chicago

This year we had five CodePen Chicago meetups. A year ago, when I first decided to step out of my developer hole, aka my close-circuited incubator of self-doubt, I emerged from the womb as a nervous man-baby at the first CodePen Chicago in April of 2015.

Do I actually just suck at this?

Up until that point, I had built a limited world for myself—a developer in a sea of non-developers. No one to admonish critique, everyone easy to impress, and failure came easily managed or at the very least disguised by the mystique of code. To leave that comfort and surround myself with other developers was to potentially expose myself in heresy. I found myself in the pale pink of my fragility crawling through the doors of Workshop Chicago, with a man-bun levitating along my neck, and a self-coding pen in the proverbial diaper.

CodePen Chicago April 2015

That evening I was greeted by human beings. People that had their own insecurities, triumphs, humility, and inspirations. This was a foundational moment in my existence as a developer. What I found there, between projected lines of JavaScript, was not the admiration fit to curb an unrelenting self-consciousness that I had assumed necessary for my thriving—I found people that I wanted to walk with.

CodePen Chicago August 2016

And walked we have. The weight of these meetups has challenged me to create and the depth has presented an eternal stream of inspiration. The potency of collaboration, not in work but in life has continued to greet myself as well as others who have come into the fold. I am proud to say that this stayed true five times this year and I look forward to it continuing through 2017.

CodePen Chicago June 2016

CodePen Tampa

This past October I completed my first year as an engineer at CodePen. This job has been more fulfilling than the high expectation that I had set. Most notably, I am surrounded by six amazing coworkers focused not just on making CodePen great, but helping each other thrive. Team CodePen works remotely and no one is in the same state, so it was pure revelry when we met up last March in Tampa.

CodePen in Tampa March 2016

There are a lot of exciting things on the horizon at CodePen, I am looking forward to seeing them through this next year. The transition from being predominantly a front end developer to the back end has been the sort of challenge that ceases to feel like a challenge due to its perfect fit. I love every aspect about what I do from the structural to the organizational to the technical. I feel grateful to be in a place where I have the freedom to grow and enough trust to take on new challenges.

SXSW Interactive

I was given the privilege of program consulting for SXSW Interactive this year. It was beyond humbling and gave me an opportunity to intimately encounter what passionate people are doing in various industries. I cannot wait to attend SXSW this March and witness thinkers and creators having their ideas heard.

Talks

CodePen & Community

I gave a talk at Trulia about CodePen and Community and wrote a long form version of the talk on CodePen as well as a companion emotional post about not being good enough to speak here on my blog.

CodePen Meetup at Trulia April 2016

Wildhacks

I was asked to keynote and judge at Wildhacks 2016 over at Northwestern University this year along with Diana Mounter. I gave a talk on the value of creativity and Diana gave an awesome talk called, “Competence, Compassion, and Confidence”. I had a blast hanging with all these skilled kids and they absolutely killed it.

Wildhacks November 2016

A Dumb Brand

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

Fuzzy Search

I made one truly useful thing outside of my job at CodePen this year. It is a “Fuzzy Search” library that allows you to search strings partially or completely. You can check out the project on GitHub or play with it over on CodePen.

Music

This year I got fairly obsessive about making music in the web browser.

Infinitely Scrolling Random Music

I created 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.

You can try it out yourself on CodePen.

Step-o-matic

I decided to try and make a step sequencer using Tone.js and that turned into the Step-o-matic. 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.

Chance the Rapper

I also made a few Chance the Rapper-flavored pens. The first was Grab the Chano, a pixelated face that sings when you grab it.

Then I made Chance the Sampler which is a sampler/sequencer with pads that you can program using samples of Chance’s voice.

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 that visualizes cover artwork and plays SoundCloud tracks.

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 to draw the notation of the song as it is being composed. Try it out yourself and toss your name in there as a seed to hear a song made just for you by math.

Musical Chord Progression Arpeggiator

I then spent some time on an arpeggiator that people really responded to. The goal was to create a quick way to sketch out chord progressions and along the way learn something about music theory.

“In C” by Terry Riley

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” using web oscillators. This also uses seeded randomness so that it could be played the same way each time it is loaded.


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

Arpeggiator Cube

I wanted to make a more abstract arpeggiator and that ended up becoming the Arpeggiator Cube. 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.

Metered

Inspired by the minimalistic work “In C”, I wrote a composition that uses rhythm to bring order out of seeming 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 and visualize this was with a web browser, so Metered became a thing.

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 enable 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, and made a video demonstrating the pen.

Matt Soria (the mayor of CodePen Chicago) was there to take a video of the whole thing as well.

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 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!).

CSS-only Pens

I continued to abuse CSS this year. I have found my most useless obsessions directly translate to practical utility. Being creative enables you to learn things quickly even if they are being applied to ridiculous contexts. All that is to say that this list would be incomplete if I didn’t chronicle the countless hours I spent doing weird things without using JavaScript.

CSS Calculator


Binary Writer


CSS Keyboard


Checkbox Phone Number Input


Searching and filtering a Dataset with CSS

Eulogy

2016 was a year of movement. The act of settling was not of slowing down rather learning to breathe while accelerating. My first month back in Chicago was boxed, my desk a treadmill. As boxes broke down and breaths between keystrokes gained consistency, I learned to relish in momentum.

Let us celebrate the birth of 2017, the aligning of strides, and all the blurred flashes of each other’s progress we will witness glistening in our peripheries along the way.

Moved in