Making Noise in Portland, OR

One of the best things about being in a code school is getting to tour some of the web development shops around town. A tour is a lot different than a open house because you usually get to meet a principal and/or hiring manager and hear their thoughts on what makes their company unique.

A couple weeks ago we toured Second Story, a Portland-based interactive agency recently acquired by Sapient Nitro. Second Story’s site describes their space as an “innovation center”, which is a good description of what we got to see. There were plenty of examples of their interactive design in their lab, some for brands like Nike and some for museums and universities. One of the most impressive projects was the companion website for an expansive photography exhibit at New York’s Museum of Modern Art:

In 2001, the Museum of Modern Art acquired more than 300 iconic photographs from Thomas Walther’s private collection. Spanning the first half of the 20th century, these works represent a period of unprecedented photographic creativity as new techniques and technologies became widely available. Object:Photo brings these photographs and the research of MoMA’s curatorial team to life in the form of four visualizations that allow users to explore both the collection and the artists represented in a variety of contexts.

The area of Second Story’s interactive design work that most excited me was using technology, especially soundscapes, to enhance public works and exhibits. One example was the “reactivation” of Lawrence Halprin’s Lovejoy Fountain in downtown Portland.

I reached out to Chris Carlson, an Interactive Developer at Second Story, who worked on the Lovejoy Fountain project. Chris was kind enough to answer a few of my questions. I asked him about his job and about the tools he uses. He mentioned Open Frameworks, Open Sound Control (OSC), and Max/MSP. I have some experience with Max and OSC, but none using Open Frameworks. It looks pretty amazing:

I also asked Chris if he had any advice for a new developer. He mentioned being willing to learn new tools and having a solid portfolio, which I think is the most common refrain I’ve heard when it comes to career advice in the field of web development. People want to see that you’re passionate about making things. One of Chris’s projects outside of Second Story is an elegant application called Borderlands Granular. It allows you to visualize granular synthesis while interacting with default audio or even your own uploaded samples (where the real fun begins).

Another couple weeks have gone by with little updating in this corner of the blogosphere. As much as I want to update this thing more often, I’m just too busy learning. Don’t ever let anyone tell you coding boot camps are great because you don’t have to do homework. If you come out of class without feeling like you need to hit the books, you’re either a genius, a fool, or at way too easy of a coding boot camp.

In our classes we’ve moved from learning front-end JavaScript and DOM manipulation into making applications using Node, Express, PostgreSQL, Redis, etc. I’ve been working on a Twitter clone called Quacker. Here’s a screen shot:

It’s currently writing to a Postgres database and returning the quacks in order of most recent. I still need to get it working for multiple users, and the layout needs plenty of prettification, but it gets closer every day and will make a solid portfolio piece.

On the live coding front, I’ve recently discovered Gibber, a JavaScript-based live coding environment that runs in the browser. I haven’t had too much time to dig into it, but it’s a lot easier to get making noise than Overtone. Much like Sonic Pi, it has a really friendly tutorial built into the app. I’m going to be spending some free time playing around with it over the next few days, and I’ll report back.

In my free time over the last week I’ve managed to start making some interesting noise in Sonic Pi, a live coding environment designed as an educational tool. It’s free, and it comes with a surprisingly friendly tutorial.

It’s been a lot of fun because although Sonic Pi feels a little toyish, it’s fundamentally similar to live coding software like Impromptu, Extempore, and Overtone. Now that Sonic Pi has helped me get a clearer picture of how loops work and the processing of composing pieces of music rather than just making standalone sounds, I’m interested in moving back to learning Overtone and working more on instrument and effect creation.

What a couple weeks it’s been since I started the coding boot camp. The excercises are hard (it is a boot camp, afterall) so there are planty of moments of frustration and self-doubt, but the holy-shit-it-works-and-I-know-why moments make it awesome. I think ultimately they’re why most of us are there, and by there I mean not just at the boot camp but why we’re trying to become developers in the first place. We like defeating tough problems.

Some of the problems we’ve been presented with off the top of my head:

Make a function that only works the first time it’s called.

Find the similar words in two text files.

Make your own version of the forEach method.

Put together a map game from several .js modules

Set a reminder that occurs some time in the future.

This last example reminds me of a little variation I wrote that I’m kind of pround of. A classmate was trying to include a countdown for the reminder that would fire every second (we tested the reminder set 10 seconds out):

There’s so much more I could talk about regarding coding boot camp, but I’m going to start shooting for smaller updates more often.

On the Hexo front, I figure’d out why some of the icons weren’t appearing here on this blog. I hadn’t copied the theme I’m using to the hosted version of my blog (the one you’re looking at now). Enough CSS made it through to trick me into thinking it was present but just being glitchy, and I only discovered it was absent when I went to upload a new theme.

A few days ago I swung by Portland Code School to see what their most recent batch of graduates had been working on during their time in class. There were some great projects that I’ll get to, but what impressed me the most was how finished everything looked. I was expecting to see mostly prototypes and unstyled APIs, but the grads had fully functional, handsome looking sites. I’m guessing the development students teamed up with the front-end design students to make things look as nice as they did.

I tried to pick as many brains as I could. I’m sure there was an occasion or two when my eyes glazed over as a graduate explained what was running on the back end of their site or why they chose a specific database, and that’s a good thing because, hey, that’s why I’m doing the Immersion program. For the most part, however, it all made sense. JQuery, AJAX, Ember, Node etc.: full-stack JavaScript.

Most importantly, I came away confident that my ideas will be doable in the allotted time and that I’ll have the requisite skills to develop — or at least help develop — any web app I put my mind to once I’m done.

Now on to some of the ideas that I thought were most interesting.

Letefeed is a really promising site that is like a social media-infused fan page for professional athletes. As one of the developers, Mike Wroblewski, and I discussed, most sports sites are trying to cram as many statistics into a player’s profile page as possible. I like Letefeed’s focus on the player’s Twitter posts and mentions because it’s more personal than a huge stat grid.

Another project I liked was Realfeelz.com, a sort of bathroom wall-like site where users simply leave a random thought or look up others’ thoughts by category (confessions, insights, etc.) One of the developers, Leslie Strauss, said she wanted to make something social but without the ephemeral feedback (like buttons, +1s, etc.) found on so many social networking sites.

I didn’t get a chance to speak to Ondine Gallatin, the developer behind Mudramum, but hers was an interesting project indeed. Her project is a site about mudras, which are an ancient meditation practice based on holding one’s hands in various positions to achieve emotional or physical well being. I have absolutely no prior knowledge of mudras, but cheers to an original idea and a site that looks awesome.

I wish all the graduates the best of luck in their new careers, and I can’t wait to start my PCS class on January 5th.

This is my shiny new blog. It runs on Hexo*, a Node.js powered blog framework. I chose Hexo because I’m going to be learning a lot of Node at Portland Code School starting next month, and I figured this would be a good way to get acquainted.

That brings me to one of the points of this blog. I’m going to be writing here about my transmogrification into a professional coder and web developer. I’ve loved computers since I first saw Castle Wolfenstein on my neighbor’s Commodore 64. Before computers, however, I loved sitting at the pedal board of my Gran’s Wurlitzer organ while she played Roy Orbison tunes.

So I’ll be posting here about music too, especially music for video games and live coding. I have done a bit of the former, and I’m excited to learn more about the latter. On that note, I’ll finish here with a video of the brilliant Andrew Sorensen narrating a live coding performance at this year’s Open Source Conference (OSCON). Sorensen is using Extempore, a live coding environment of his own creation.

* UPDATE: After learning to use a static generator (and writing my own in class), I opted to convert the blog to my old friend WordPress for the functionality and convenience.