dinosaurs eat everybody

Unfortunately I’ve broken my “Thing a Week” streak due to some busy weeks where I just didn’t have time to make much of anything. I did, however, have time to clean up some of the last few things for the RecLaboratory early tester launch. Bobby and I spent last Tuesday fixing bugs and cleaning up the UI to get RecLab to a place where we were happy enough to let other people check it out.

This doesn’t mean it is complete or bug-free by any means. I’m sure there a lots of little rough spots and the UI, while not terrible, is still pretty bare-bones. But our goal for this “release” was to get the site to a point where we could show some friends and let them try things out. We really just want to see if we’re headed in the right direction with what we have so far before we devote a lot of time to polishing the UI and the code base.

It’s pretty exciting to finally start showing off something we’ve been working on for a long time (on and off for about 6 months now). While it’s kind of nerve-wracking to worry about something breaking now that people other than Bobby and I are on the site it’ll be fun to see how people start to use what we’ve built. We’re rolling out invites very slowly as we become more confident about the feature set and stability of the system.

I also started a RecLab Blog (my first Tumblr account!) to act as a sort of company blog now that we’re trying to involve other people in the site. As always you should follow/friend/read/whatever our Facebook, Twitter, Instagram, and blog.

Please go to www.reclaboratory.com and sign up to become an early tester and we’ll probably send you and invite soon!

Last week was a pretty busy week so I didn’t get too many “projects” done outside of some RecLaboratory work and even most of that was done in between sessions at the Golden Gate Ruby Conference. The major piece of work I finished up, apart from some UI cleanup, was a modal to create (and record!) a new track from a song’s page. I think this will be a very common use case, so I wanted it working before we did the friendly release.

After getting the in-browser track recording to a working place the previous week, I wanted to reuse most of that functionality in this new modal. Building this new feature on top of that existing code caused me to refactor a few things, which was great. I also had to add the ability to use multiple tracks as a “backing track” for the recording because I imagine that users won’t want to bounce the song after every recorded track. This takes advantage of the track pre-loading I had already built into the song page and a little bit of html5 audio object abuse.

This is one of the last functional pieces of the site that needed to be built before we start soliciting alpha testers. Originally we had wanted to open RecLaboratory to early users on September 8th (almost exactly 6 months after Bobby and I first started talking about the idea) but we really wanted to get the last features in so that we could offer users a compelling reason to interact with the service. I think we’re getting REALLY close now!

Hey look! Another non-code related Thing a Week! On Saturday night, Eileen was at hockey so I grabbed my (much neglected) guitar and popped open Logic Pro for some quick recording. The end product was a nice, kind of dark sounding instrumental track.

I had been messing around with a little arpeggiated riff and I wanted to build something pretty repetitive, getting away from a verse-chorus-bridge structure. After I had the riff, I started building the drum part. The real breakthrough there was throwing in the handclaps, which start off sounding so happy but then sound more ominous under the bass and main guitar riff. Despite being pretty core to the whole song, the bass part didn’t come in until much later in the writing process. I also ended up using amp models with a lot more reverb than I typically use. I have a tendency to seek out drier guitar tones, but the more spacious sounds really worked for this piece.

I resisted the urge to just keep stacking more and more tracks on top of each other in this song and let some parts be pretty sparse. I think I could put some lyrics over this but it was getting late and nothing was really jumping out to me, so I’m pretty happy with it being instrumental for now.

Enjoy!

This week I’ll take a break from talking about RecLaboratory stuff and talk about art. This week I started playing around with watercolors.

One of my favorite cartoonists, Mitch Clem, has been working with his wife(?), Amanda to use watercolors in his comics for a while. They’ve done some really cool stuff in both color and black and white. I’ve seen other comic artists do it too and I’ve always loved the effect.

After a trip to the Walt Disney Museum, particularly the Mary Blair exhibit, with Eileen I was really inspired to try painting something so we went to the art store later that weekend and picked up some supplies. As a first project I wrote a short (questionably funny/comprehensible) comic and tried to paint that. The result was pretty cool, for my first time, and a lot of fun to do. It was a bit tricky working with watercolors in such a small size (the panels were maybe 2” x 3”) but I learned a bit and really enjoyed the medium.

Then over the weekend I wanted to do a single scene and had the idea of just doing a simple girl playing guitar on stage. After watching a whole season of Inkmaster I decided to throw a few tattoos on her, as well. I am particularly proud of the hands in this piece. Usually I just give up and let the hands sort of fall apart, especially on guitars but I thought these turned out well. I’m really happy with how this turned out and I plan to keep working with watercolors in the future.

This week my major work was around building an in-browser audio recording system. I’ve been reading about using new HTML5 APIs to get access to the user’s mic (and camera) for a while and I was finally able to sit down and start building something out. Because I feel the need to name everything I build, I had to name this as well. None of the bands I was in ever really practiced or recorded in a garage, they mostly worked out of basements. As a bit of a nod to (and departure from) Garageband, I decided to just call my recording stuff Basement.

The core technology for this whole process is getUserMedia(). This is what prompts the user to allow the page to access the mic (or camera or whatever) and then handle a LocalMediaStream object. From there you can work with whatever is being picked up by the mic.

Outputing the audio in real time was very easy (hey I built a monitor!) and after doing a bit of research I found a fantastic library to help with the recording aspect of this project: Recorderjs. It provides a nice Recorder object to work with and, best of all, it’s a VERY small, easy to understand library so I can go through every line of code and understand exactly what is being done. This is very important because all of this in-browser media work is very new and deep tutorials are rare. Plus I’m going to need to do a few things that haven’t been done perfectly yet.

Right now I’m working on taking the recorded audio, which exists as a Blob tied to the page it was created on, and sending it back to the server to be uploaded in a way that works nicely with our existing Paperclip system. I’m really digging into some of the new HTML5 APIs for all this work and it’s been really interesting.

The in-browser recording is the last new major feature we need to build before polishing up the RecLaboratory site (which I updated this week, too!) for a very early, very small beta. I’m really excited to get people using this tool soon!

Along with some other RecLab stuff (which is coming along nicely), this week I finally tackled a little project that I’ve been thinking about for a while. Unlike most of the RecLab work this was much more artistic than technical. I built the first first hand drawn icons for the site.

I knew that I wanted custom instrument, track, and song icons so I started out with a small set of 8 (with plans to make more as we need them). I did these icons the same way I do my comics: first drawing in pencil, then inking, then scanning into Photoshop, then cleaning up the lines and adding color in Illustrator. They had to look good at a wide range of sizes: 400px to 30px so I didn’t add too much detail.

To handle what I think will be the most commonly used instruments I started with (electric) guitar, (electric) bass, drums, keys, vocals, sax (perhaps my own bias), percussion, and general track.

So here they are!

Guitars are still hard to draw.

I used a small pallet of colors for all the icons in the hopes of creating an overall cohesive effect when they all get seen together on the site. Bobby doesn’t like the percussion one very much and he’s probably right. It’s my least favorite too, but this seems like a good start and really adds some nice visual variety to the site. Plus it’s always fun to draw things!

So as of last week I have the RecLab Rails site up and running on Heroku and the audio processing API, Roctopus, up and running on my own server. Amazingly they are able to talk to each other and work pretty much as expected.

There are still quite a few things to fix up, particularly with Rocktopus, but it’s nice to see the full application working together on remote servers. While the Rails/Heroku setup was pretty straight forward, Rocktopus was uncharted territory for me.

I had never “launched” a Flask application before so this was all a bit new. As a (temporary, I swear!) measure I moved the files to my server over SFTP and started up a Gunicorn server to run the application. I still need to put Nginx in front of all of this but for now it works as expected (though I can’t imagine it would handle much traffic). I’d also like to learn more about Fabric for Python deployments. I’ve never been much of a sysadmin, so this was all a bit new to me.

The only really new thing I did for the Rails/Heroku app was add Unicorn as a server. Heroku has a great article that held my hand through this setup.

Also, as part of this setup I’ve been playing around with Slack and it’s wonderful integrations for monitoring the app. So far I have it working with Heroku, PaperTrail, and Pingdom. Nothing’s gone wrong yet, but I suppose that is to be expected when there are no users…

As I mentioned, there are still quite a few rough edges to be worked out, a bunch of minor features, and at least one major feature that still needs to be built but this feels like a big step in getting RecLaboratory launched and letting people try it out. We have some people in mind for VERY early alpha testers, but please let me know if you’re interested in trying it out when it’s ready!

So, you may have noticed that I’ve missed the past few Thing a Week weeks. In my defense I did just get married last Saturday, so I’ve been pretty busy with wedding related travel and planning so I haven’t had much time for extra projects. The wedding was amazing and I now have a wife, which is fun. In the spirit of the wedding I wanted to share a project that I worked on a while ago but didn’t want to show until now.

For the wedding I wanted to build a ring bearer box out of an old book. After looking around some used bookstores I picked an old Tarzan book because 1) it seemed common enough that I didn’t feel bad using it as materials and 2) it had a cool elephant on the cover. I wanted to hollow out part the inside pages and create inlays to hold the rings (like a secret flask holder but for wedding stuff).

I started by covering the covers in plastic (to avoid getting glue on them) painting the sides of the pages with puzzle glue in order to stick all the pages together. I did about 5 coats of this. Once that glue was dried I measured out the inlay and started carving pieces out using an Excato knife. This took a lot longer than expected and when I was down about half an inch, I coded the new inner wall with glue to give it a nice solid feel.

After I had my basic inlay I needed to dig out the slots for the actual rings. This was even more tricky. I thought I would be able to make clean cuts, like I did with the inlay but I ended up basically using the knife to turn the paper into pulp and then just digging the pulp out of the the slots. After removing top page from the inlay, which had been pretty well torn up by all the digging I was left with a nice ring box.

The pages held the rings perfectly and I could even hold the box open and upside down without the rings falling out. The box was put to use by our ring bearer, Sui Chi, on Saturday and it looked great! This was a cool little project and it was fun to build something non-digital again. It really took a lot longer than I expected but the result was worth it.

So most of this week I was traveling so I wasn’t able to get very much work done on any projects. I did, however, attend an Indian wedding in Long Island which was really cool so the week was not a total loss.

The work I did get done earlier this week was mainly with the RecLaboratory interface to Rocktopus, our audio processing API. I built the interface to the bounce_song functionality, which will take all the individual tracks of a song and combine them into a single (probably .mp3) file.

I also set up a sort of hacky but effective, for now, “loading screen” to let users know that their audio is being uploaded/processes. It seems like a little thing but letting the page just hangs after clicking submit is really bad UI. This is a very early version of the product and we haven’t given UI the full focus it needs but this was one thing that would be too awkward to not address early. It was a bit of an awkward fix because we’re not actually doing the audio processing or uploading as a background process. Eventually I’ll build a queuing/callback system in Rocktopus that will work much nicer, but this gets us going now.

This next week is another busy week. It is the last week in SF before we fly back to Chicago for the wedding (which is less than 2 weeks away now…). If I get anything Thing A Week thing done this week it will probably be something wedding related.

Once again, another busy week divided between wedding stuff and side projects.

I spent this week adding more features to the RecLaboratory audio player and I feel like it’s in a pretty good spot for now. Obviously, there’s more I’d like it to do but it’s certainly at a point where it will work for basic track and song playback.

Here’s a list of new features that got added this week:

• Visual indicators on the in page play buttons to show what is playing in the global player
• Some basic layout polish and player styling
• Jump forward or back in the audio by clicking on the progress bar
• Play/pause using the space bar
• Some basic (if clunky) error checking to make sure files loaded

One really interesting thing I found this week that I didn’t expect is that audio playback is not interrupted by navigating around the site. If I reload the page the sauropod.audio object is empty and playback stops, but not if I’m just clicking links on the site. I haven’t had time to explore it completely yet but I suspect it has something to do with either the way Rails caches JavaScript or with TurboLinks.

I’m really happy that is “just works” that way, I was worried that I would have to go back and turn this whole project into a single page app eventually to get uninterrupted playback, so this is a nice win. I do need to spend some time testing things to make sure I understand WHY it works. It seems dangerous to accidentally get a nice feature like this.

Like I said, while Sauropod is still a little rough around the edges, it’s good enough to use for the site. I’m now moving on to fixing up the interface to Rocktopus for audio compression and song bouncing.

This week I’ll be traveling to New York for a friend’s wedding, so my Thing A Week time may be limited. Also I need to eventually finish writing the ceremony script for my wedding or else some people are going to be mad at me…