robb.is

Moments of Peace in Cheap Rooms

2013-05-17T00:00:00+02:00

There’s more in the set.

Uberspace

2013-05-14T00:00:00+02:00

I recently discovered Uberspace, a pay-what-you-want hosting platform based in southern Germany. I set up an account (no email required) and after poking around for a while, I fell in love and decided to migrate my blog over.

I still run a jekyll setup similar to the one on GitHub pages, though now that I have control over the server-component, I also get run all the jekyll plug-ins I fancy.

Your uberspace comes well-prepared with multiple versions of ruby, node and python and you’re free to install whatever you’re missing with toast.

I’m a bit of a noob when it comes to server administration, but support has been stellar (being on the same time-zone probably helps) and it shows that Uberspace is a labor of love.

❤

My talk for UIKonf 2013 on ReactiveCocoa

2013-05-03T00:00:00+02:00

The first UIKonf yesterday was a lot of fun. Chris, Matt, Peter and the rest of the team did a great job putting together the conference. You should come next year.

I had the honor to give a talk on ReactiveCocoa, the slides of which are embedded below:

Bret Victor – Stop Drawing Dead Fish

2013-05-01T00:00:00+02:00

How to defeat terrorism

2013-04-16T00:00:00+02:00

Parker writes about the bombs that struck Boston yesterday:

The cruel measure of “success” for an act of terror, then, isn’t how much harm is done in the explosion itself, but whether society’s reaction allows the terrible memories to fester and continue to disrupt our lives.

and

[O]ne of the most pernicious effects of terrorism is to undermine the bonds of trust and good faith in society. So one way to fight that is to celebrate the first responders and other heroes to come out of today. Celebrating the stories of kindness from after the bombing, many of which are truly remarkable. […] Noting that selflessness helps avoid perpetuating a terrible and cynical impression of human nature.

Goodbye, SoundCloud

2013-02-28T00:00:00+01:00

After three years with the SoundCloud team, today marks my last day as a SoundClouder. I joined as an intern in the API team, worked on the Mac app and later joined the mobile team to work on the iPad, iPhone and Android apps.

I’ve had a great ride but the time has come for me to find new and bigger challenges. I’d like to learn a new programming language or two, explore new paradigms like FRP and do more writing.

I want to thank all the friends I found at SoundCloud for everything they’ve taught me over the years. You guys rock.

Here’s a Goodbye Playlist that captures some memorable moments from past three years at SoundCloud:

Input and Output

2013-02-18T00:00:00+01:00

Functional reactive programming offers a way to once again view our programs as simply input and output. We get to minimize state while also embracing a unified view of what our app is doing. It’s all just inputs and outputs.

If you haven’t noticed by now, I’m a big fan of Reactive Cocoa.
In this blog post, Josh Abernathy delivers a pretty good pitch on the benefits of Functional Reactive Programming.

When our only tool is state, every problem looks like a stateful nail.

Stubbilino

2013-02-09T00:00:00+01:00

Stubbilino is a small library I wrote to help with stubbing in Objective-C. I was looking for a block-based interface for stubbing to use together with Specta.

afterEach(^{
  [Stubbilino removeAllStubs];
});

describe(@"A user view controller", ^{
  __block XYUserViewController *viewController;

  beforeEach(^{
    viewController = [[XYUserViewController alloc] init];
  });

  it(@"should display the username", ^{
    id<SBStub> stub = [Stubbilino stubObject:viewController];

    [stub stubMethod:@selector(user) withBlock:^{
      return kXYTestUser;
    }];

    [viewController.view reloadData];

    expect(viewController.view.usernameLabel.text)
      .to.equal(kXYTestUser.username);
  });
});

You can also stub class methods, for instance, here is how to swap the default NSNotificationCenter for a custom instance.

Class<SBClassStub> stub = [Stubbilino stubClass:NSNotificationCenter.class];

[stub stubMethod:@selector(defaultCenter) withBlock:^{
  return myNotificationCenter;
}];

If you would like to give Stubbilino a try, you can find the code on GitHub.

Jumsoft pulling iCloud sync from Money

2013-01-31T00:00:00+01:00

Jumsoft, the creators of the popular expense-tracker app Money, pulled iCloud sync in the latest versions of their app.

All of you surely know many document-based apps that use iCloud and seem to be doing absolutely fine. That’s why it must seem odd that Jumsoft is utterly incapable of developing a proper iCloud sync feature. However, the big difference between Money and those iCloud-friendly apps is that Money uses a relational database created with Core Data to handle its highly complex data models.

Apparently, Jumsoft had to make a call here: iCloud or Core Data.

Since Core Data tends to be an all-in kind of investment, it is likely that most of their domain objects are generated from the Managed Object Model. Pulling out Core Data would then prove prohibitively expensive.

Down with Magic Strings!

2013-01-31T00:00:00+01:00

I recently linked to KSImageNamed as a solution to the issue of auto-completion and of image resources. Today I came across Patrick Hughes’ script to generate image aliases as part of the build process.

Each time it runs it scans a folder for images. It then compares the image names to collect the various platform specific and scaled versions and groups them together. It then #defines a block for each group that loads the image using imageNamed:, throws an assertion if the image doesn’t load and then returns the image.

I think I like this one even better, since it also validates the the image resources and points out missing Retina or iPad assets where appropriate.

Cocoa is unfortunately fairly stringly typed and the more we enforce at compile-time, the fewer errors can happen at run-time.

NSBrief with Justin Spahr-Summers

2013-01-29T00:00:00+01:00

GitHub for Mac developer Justin Spahr-Summers has been the featured guest on the most recent episode of NSBrief where he talks about libextobj, Mantle and of course ReactiveCocoa. If you haven’t heard of these yet, let me give you a quick run-down:

libextobj is a library that seeks to extend Objective-C with patterns found in other programming languages. I think it’s great to see someone push the envelope of what’s possible in Objective-C.

Some of the more practical highlights include:

Safe categories, for adding methods to a class without overwriting anything.
Simpler and safer key paths & Compile-time checking of selectors
Easier use of weak variables in blocks
Scope-based resource cleanup, for automatically cleaning up manually- allocated memory, file handles, locks, etc..
EXTNil, which is like NSNull, but behaves much more closely to actual nil

Mantle, a model framework used in GitHub’s Mac client, takes away some of the common boilerplate when dealing with JSON APIs by using convention over configuration. However, it’s not incompatible with Core Data and can easily be used alongside of it.

Last but not least, ReactiveCocoa is a powerful library that brings the concepts of Reactive Programming to the land of rounded corners. By modeling behavior as values that transform over time, rather than mutable state held in variables, Reactive Programming can greatly improve the locality of your code and make it more concise. For this topic alone, the podcast is worth a listen.

I’ve been investigating ReactiveCocoa at SoundCloud recently and I think it’s a powerful tool when dealing with asynchronous IO and complex user interactions – but more on that later.

KSImageNamed Xcode plug-in

2013-01-27T00:00:00+01:00

A common pain-point when dealing with user interfaces in Xcode is making sure you correctly call -[UIImage imageNamed:]. Since the compiler does not assist you with making sure the the image name you pass in actually exists, it’s easy for typos to sneak in.

Enter KSImageNamed, a nifty Xcode plugin that adds auto-completion for exactly this case:

Just type in [NSImage imageNamed: or [UIImage imageNamed: and all the images in your project will conveniently appear in the autocomplete menu.

Easy as that! Makes me wish Xcode could to this out of the box.

Koda – Why Don't You Leave Your Friends Behind

2013-01-07T00:00:00+01:00

Koda – Why Don't You Leave Your Friends Behind

1Keyboard

2013-01-07T00:00:00+01:00

1Keyboard to rule them all!

Eyal Wiener’s awesome 1keyboard allows you use your Mac’s keyboard and mouse to control other devices. Since it’s using Bluetooth, you’re not limited to computers, any HID-compatible device will work. I’m using the app to quickly enter text on my development Nexus 4.

1Keyboard is in beta right now, and while the responsivenes of the mouse can surely be improved, it’s already a welcome addition to my Android development flow.

Overloading C Functions with Clang

2013-01-01T00:00:00+01:00

Clang, LLVM’s compiler front-end for C-based languages, features a couple of interesting language extensions to C, C++ and Objective-C. You are probably familiar with auto-synthesis of properties or the new subscripting syntax.

One of the lesser known extensions, however, is the __attribute__((overloadable)) annotation.

While languages like Java and C++ allow you to define multiple functions with the same name but different arguments, this feature has been absent from C.

However, using recent versions of Clang you can now rectify this behavior and since Objective-C is a superset of C, knowing how to use this feature can be useful even if you rarely venture outside of Cocoa or Cocoa Touch.

Consider for example these function declarations:

#define OVERLOADABLE __attribute__((overloadable))

OVERLOADABLE NSArray *map(NSArray *array, id(^)(id obj));
OVERLOADABLE NSDictionary *map(NSDictionary *dictionary, id(^)(id key, id obj));

We declare two different versions of the classic map function.
Instances of NSArray will have a block applied to their elements that takes a single argument while instances of NSDictionary have both their keys and values sent to the block.

The compiler will figure out which map it needs to call simply based on the types of the arguments.

The implementation is pretty straightforward, too:
-[NSArray enumerateObjectsUsingBlock:] is used to iterate over all elements. If the block passed to map returns nil, the element is discarded.

OVERLOADABLE NSArray *map(NSArray *array, id(^block)(id))
{
    NSMutableArray *result = [NSMutableArray arrayWithCapacity:array.count];

    [array enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        id mapped = block(array);

        if (mapped) [result addObject:mapped];
    }];

    return result;
}

You may want to consider writing a parallel version of map that makes use of -[NSArray enumerateObjectsWithOptions:usingBlock:] and passes in NSEnumerationConcurrent.

The implementation for dictionaries looks similar:

OVERLOADABLE NSDictionary *map(NSDictionary *dict, id(^block)(id, id))
{
    NSMutableDictionary *result = [NSMutableDictionary dictionaryWithCapacity:dict.count];

    [dict enumerateKeysAndObjectsUsingBlock:^(id key, id obj, BOOL *stop) {
        id mapped = block(key, obj);

        if (mapped) result[key] = mapped;
    }];

    return result;
}

Now we have a nice and clean way to map over Cocoa’s most prevalent data structures:

NSArray *numbers = @[ @1, @2, @3, @4 ];

NSArray *doubled = map(numbers, ^NSNumber *(NSNumber *number) {
    return @(2 * number.doubleValue);
});

NSDictionary *user = @{
  @"username": @"robb",
  @"website": @"http://robb.is"
};

// Implementing 'each' and its concurrent equivalent
// is left as an exercise to the reader.
each(user, ^(NSString *key, id obj) {
    NSLog(@"%@: %@", key, obj);
});

I think function overloading is a welcome addition to C and it goes to show how knowing the underpinnings of Objective-C can help you write better and more concise code.

Update: Nick Lockwood raised the point that map may be better suited for a category. When I came up with this example, I was also considering an each implementation that could deal with id<NSFastEnumeration>. E.g.:

OVERLOADABLE void each(id<NSFastEnumeration> list, void(^)(id obj));
OVERLOADABLE void each(NSArray *array, void(^)(id obj));
OVERLOADABLE void each(NSDictionary *dict, void(^)(id key, id obj));

That being said, if you’re looking for a solid and well tested map category, check out BlocksKit.

Sinkane - Jeeper Creeper

2012-12-10T00:00:00+01:00

The new SoundCloud Android App

2012-12-05T00:00:00+01:00

Today, we are releasing the new version of the SoundCloud Android app.

This is the first version that I contributed to. I made sure the onboarding process is smooth and the new navigation is good looking.

Kudos to Jan and Jon for doing a great job on this version.

Auf dem Pfad der Dämmerung

2012-11-30T00:00:00+01:00

Tocotronic auf SoundCloud!

Hotline Miami

2012-11-01T00:00:00+01:00

The soundtrack to Cactus’ latest game, Hotline Miami is just mind blowing:

On Burritos, Sandwiches, and the Law

2012-09-10T00:00:00+02:00

Is a burrito a sandwich? We know what the judges say.

My buddy Parker completely in his element, talking about the intersection of law and mexican cuisine:

Posner and Scalia have differing opinions on the 2006 landmark burrito law case White City Shopping Center, LP v. PR Restaurants, LLC … in which a Massachusetts judge held that a burrito is not a sandwich.

A must read. (Man, I do miss Cancun right now)

CoffeeScript Source Maps

2012-09-08T00:00:00+02:00

Ryan Florence shows you how to teach Chrome how your JavaScript files map to their CoffeeScript sources.

Debugging CoffeeScript, the most popular and strongest argument for not using it in the browser, is now 90% solved.

I never had problems finding the corresponding CoffeeScript line for my JavaScript. However, it’s one of the most common points people bring up against CoffeeScript and this pretty much makes it moot.

Source maps are one of the first tangible benefits of Michael Ficarra’s awesome endeavor to write a new and better CoffeeScript compiler.

PonyDebugger – Remote Debugging for iOS

2012-08-30T00:00:00+02:00

PonyDebugger is a powerful new tool released by the Square iOS team today. It consists of a client library and server component to remotely debug the network traffic and Core Data stack of your application

PonyDebugger acts as a powerful network debugger, allowing users the ability to see an application’s network requests in real time. This means that it reports not only all request and response headers, but how long each request takes, associated cookies and the data itself if it is human-readable.

What’s especially nice is, that PonyDebugger is built on top of the WebKit Web Inspector. Web developers will feel right at home and it’s a testament to the great work done by the WebKit team.

If your app communicates with one API or another, you’re of course using SSL to shield your user’s data against prying eyes. However, debugging an application that uses encrypted communication can sometimes be a hassle – encryption has to be turned off for debug builds or a specific, trusted certificate has to be installed. With PonyDebugger, there is now an alternative:

PonyDebugger forwards network traffic without sniffing it. This means that traffic sent over a secure protocol (https) is reported.

I’ve been using Charles Proxy for this and while I like it, I’m looking forward to having something more tightly integrated with the iOS platform.

But there’s more, PonyDebugger can also be used to inspect your Core Data store. This makes browsing your data a breeze and should considerably speed up your Core Data debugging.

Under the Hood – Rebuilding Facebook for iOS

2012-08-23T00:00:00+02:00

Facebook finally released a rewrite of their mobile application, eschewing WebViews in favor of a fully native experience.

Former SOFA developer Jonathan Dann writes:

The development of this new app signals a shift in how Facebook is building mobile products, with a focus on digging deep into individual platforms. To understand how we approached this shift, let’s take a look at how Facebook has evolved on mobile.

There are some interesting tidbits in there:

To give another example, we use Core Text to lay out many of our strings, but layout calculations can quickly become a bottleneck. With our new iOS app, […] we asynchronously calculate the sizes for all these strings, cache our CTFramesetters […] and then use all these calculations later when we present the story into our UITableView.

Not having to layout strings yourself is probably the reason why a lot of otherwise native applications use WebViews. They use a similar approach with table view cells, too:

Firstly, when we do our initial asynchronous layout calculations, we also store the height of the story in Core Data. In doing so, we completely avoid layout calculation in -tableView:heightForRowAtIndexPath:. Secondly, we’ve split up our “story” model object. We only fetch the story heights […] from disk on startup. Later, we fetch the rest of the story data, and any more layout calculations we have to do are all performed asynchronously.

If you care about performance on iOS, make sure to take a lot at the article.

An Introduction to SceneKit

2012-08-22T00:00:00+02:00

SceneKit provides some functionality for creating scenes from scratch right in your code, but is primarily designed for working with 3D scene data

This looks pretty interesting, I hope SceneKit makes it to iOS next year.

iPod Shuffle

2012-07-24T00:00:00+02:00

As a small hack over the last couple of days, I’ve built an iPod Shuffle with CSS and HTML. I’ve wired up the controls to play a couple of tracks from SoundCloud.

Chilly Gonzales - White Keys

2012-07-12T00:00:00+02:00

/via Jens

How to build awesome CSS Envelopes

2012-07-10T00:00:00+02:00

Even though I am an iOS Engineer by trade, I also have a passion for front-end developement. When I came across this shot on dribbble the other day, I started to wonder if I could create an awesome looking envelope with nothing but HTML and CSS and the awesome Symbolset Social font.

This is what I came up with:

So, let’s have a look at the code, shall we?

First things first – the HTML

<a class="envelope" href="https://twitter.com/ceterum_censeo">
  <span class="seal twitter ss-social-regular">
    <span class="embossed">twitter</span>
  </span>
</a>

The envelopes are simple <a>-tags. That’s semantically appropriate and makes the whole envelope clickable without any nasty tricks.

We use the outer <span> to model the seal on the envelope. The inner <span> represents the embossed area of the seal.

As you can probably already tell, the real magic happens in the CSS!

A pretty clever font

@font-face {
  font-family: "SSSocial";
  src: url('./ss-social-regular.eot');
  src: url('./ss-social-regular.eot?#iefix') format('embedded-opentype'),
       url('./ss-social-regular.woff') format('woff'),
       url('./ss-social-regular.ttf') format('truetype'),
       url('./ss-social-regular.svg#SSSocialRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

First, we define the custom Symbolset Social font. It aliases the names of certain social networks and replaces them with their respective logos, for example ‘twitter’, when set in SSSocial, turns into a little bird: twitter.

It’s the same font I use here on my site and I urge you to check it out.

The .ss-social-regular class is just used to enable the Symbolset Social font on specific tags, we only use them in the inner <span>s, no big deal.

.ss-social-regular {
  font-family: "SSSocial";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}

The envelope

Now, let’s have a look at the .envelope class

.envelope {
  display: block;
  width:   24rem;
  height:  14rem;

  position: relative;

So far, this is all pretty basic, we turn the <a> into a block element and set its dimensions. As we later want to position the seal absolutely within in the envelope, we need to set the envelope’s position attribute to relative.

To style the envelope, we first define a background color.

  background-color: #F5E6DD;

This is where it gets tricky: we set no less than seven background images on the envelope to draw its paper texture and the two flaps.

Background images are defined top-to-bottom, here are the first two:

  background-image: -webkit-linear-gradient(235.5deg,
                                            rgba(  0,   0,   0, 0.0) 0%,
                                            rgba(  0,   0,   0, 0.0) 48%,
                                            rgba(  0,   0,   0, 0.1) 49%,
                                            rgba(225, 215, 205, 0.7) 50%,
                                            rgba(225, 215, 205, 0.0) 52%,
                                            rgba(225, 215, 205, 0.0) 100%),
                    -webkit-linear-gradient(-235.5deg,
                                            rgba(225, 215, 205, 0.0) 0%,
                                            rgba(225, 215, 205, 0.0) 48%,
                                            rgba(225, 215, 205, 0.7) 49%,
                                            rgba(  0,   0,   0, 0.1) 50%,
                                            rgba(  0,   0,   0, 0.0) 52%,
                                            rgba(  0,   0,   0, 0.0) 100%),

These first two linear gradients make up the bottom flap of the envelope. You see the gradient is mostly transparent, only a thin strip around the 50% mark is used to draw the actual flap. I’ve settled on the 235.5 degrees of rotation after experimenting a bit with it.

The next two gradients look similar.

                    -webkit-linear-gradient(-235.5deg,
                                            rgba(  0,   0,   0, 0.0) 0%,
                                            rgba(  0,   0,   0, 0.0) 48%,
                                            rgba(  0,   0,   0, 0.1) 49%,
                                            rgba(225, 215, 205, 0.5) 50%,
                                            rgba(225, 215, 205, 0.0) 52%,
                                            rgba(225, 215, 205, 0.0) 100%),
                    -webkit-linear-gradient(235.5deg,
                                            rgba(225, 215, 205, 0.0) 0%,
                                            rgba(225, 215, 205, 0.0) 48%,
                                            rgba(225, 215, 205, 0.5) 49%,
                                            rgba(  0,   0,   0, 0.1) 50%,
                                            rgba(  0,   0,   0, 0.0) 52%,
                                            rgba(  0,   0,   0, 0.0) 100%),

Notice that I reversed their colors as this they draw the top flap.

This is what the envelope looks like, so far:

You’ll notice that the four gradients overlap each other, forming two lines instead of four. We’ll fix that in a bit.

We want our envelope to have a more realistic appearance, so we apply a vertical and a horizontal gradient to add some shading.

                    -webkit-linear-gradient(left,
                                            rgba(51, 41, 31, 0.4) 0%,
                                            rgba(51, 41, 31, 0.3) 5%,
                                            rgba(51, 41, 31, 0.2) 12%,
                                            rgba(51, 41, 31, 0.0) 50%,
                                            rgba(51, 41, 31, 0.2) 88%,
                                            rgba(51, 41, 31, 0.3) 95%,
                                            rgba(51, 41, 31, 0.4) 100%),
                    -webkit-linear-gradient(top,
                                            rgba(51, 41, 31, 0.20) 0%,
                                            rgba(51, 41, 31, 0.00) 20%,
                                            rgba(51, 41, 31, 0.00) 50%,
                                            rgba(51, 41, 31, 0.20) 88%,
                                            rgba(51, 41, 31, 0.30) 95%,
                                            rgba(51, 41, 31, 0.50) 100%),

To top it off, I encoded a noise texture as a data-url to embed it straight into my stylesheet. (Some may consider this cheating, I couldn’t care less…)

                    url('data:image/png;base64,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');

Our envelope looks a lot better now:

Next up: positioning the backgrounds.

It took me a while until I found good positions for the flaps, but I found these values to work fine.

  background-position: 105% 215%,
                        -5% 215%,
                       100% -80%,
                         0% -80%,
                       center,
                       center,
                       center;

  background-size: 12rem 12rem,
                   12rem 12rem,
                   12rem 12rem,
                   12rem 12rem,
                   auto,
                   auto,
                   auto;

  background-repeat: no-repeat,
                     no-repeat,
                     no-repeat,
                     no-repeat,
                     repeat,
                     repeat,
                     repeat;

You’ll notice that I set background-position, background-size and background-repeat for the first four backgrounds (the flap-gradients) and then restore the default values for the other three.

Last but not least, we add some more subtle shadows, both inner and outer and turn up the border radius to avoid nasty paper cuts.

  box-shadow: 0  1px  0   rgba(255, 255, 255, 0.6) inset,
              0  2px  0   rgba(255, 255, 255, 0.2) inset,
              0 -3px  3px rgba(  0,   0,   0, 0.3) inset,
              0  2px  3px rgba(  0,   0,   0, 0.4),
              0  6px 12px rgba(  0,   0,   0, 0.2);

  border-radius: 0.5rem;

  text-decoration: none;
}

Now our envelope actually looks pretty nice.

Now, the flaps may look a bit odd, but we’ll just cover that up with the seal and keep that between the two of us, okay?

The seal

The seal itself is actually pretty straight forward. First, we position it in the roughly in center of the envelope.

.seal {
  display: block;
  width:   4.4rem;
  height:  4.4rem;

  position: absolute;
  left:     50%;
  top:      49%;
  margin:   -2.2rem 0 0 -2.2rem;

Easy! Now we set the border-radius property, wax seals are not square after all.

  border-radius: 2.2rem 1.9rem 2.3rem 2.0rem;

I defined four different radii to create the illusion of molten wax that you wouldn’t get with a perfect circle.

Let’s add a dash of color and some more highlights…

  background:   #00ACED;
  color:        #00ACED;
  border-color: #00ACED;

  box-shadow: 0 -2px 4px rgba(  0,   0,   0, 0.2) inset,
              0  3px 3px rgba(255, 255, 255, 0.6) inset,
              0  1px 5px rgba(  0,   0,   0, 0.8);

  text-align: center;
  line-height: 4.2rem;
  font-size:   2.2rem;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

and we’re almost there.

Remember the .embossed class from the beginning? Now it’s time to style it! First the position,

.seal .embossed {
      display: block;
      width:   80%;
      height:  80%;

      position: absolute;
      top:      10%;
      left:     10%;
      /* ... */

then we add some shadows to achieve the desired embossed effect…

      box-shadow: 0  -2px 2px rgba(205, 205, 205, 0.1) inset,
                  0   3px 3px rgba( 30,  30,  30, 0.1) inset,
                  0   1px 2px rgba( 30,  30,  30, 0.6) inset;

      border-radius: 999rem;

and finally, the background gradient. I chose a semi-transparent grey that I laid over the background of the seal. This makes customization easier as I only need to re-color the seal if I want a different kind of wax.

      background-image: -webkit-linear-gradient(top,
                                                rgba( 51, 51, 51, 0.3) 0%,
                                                rgba( 51, 51, 51, 0.2) 100%);
    }

Now we’re pretty much finished:

But, where’s the drop?!

As a small bonus, let’s add two wax drops next to the seal to make it look even more awesome.

We’re going to use the :before and :after pseudo-selectors to avoid adding more tags to our markup. This first piece of code defines the common attributes of both drops:

.seal:before, .seal:after {
  display: block;
  content: ' ';
  position: absolute;

  line-height: 0;
  font-size:   0;

  background: inherit;
  overflow:   hidden;

  box-shadow: 0 1px 3px rgba(  0,   0,   0, 0.8),
              0 3px 3px rgba(205, 205, 205, 0.4) inset;
}

I set the background property to inherit so that the drops will end up having the same color as the seal.

We want both drops to look different so we set different values for width, height etc.

.seal:after {
  width:   0.7rem;
  height:  0.7rem;
  top:      84%;
  left:     94%;

  border-radius: 1rem 0.9rem 0.95rem 0.8rem;
}

.seal:before {
  width:   0.3rem;
  height:  0.3rem;
  top:      103%;
  left:     85%;

  border-radius: 1rem 0.9rem 0.95rem 0.8rem;
}

And here is the final result:

I hope you enjoyed this small tutorial, if you have any feedback, feel free to send me a tweet @ceterum_censeo or an e-mail.

You can also flattr this, if you fancy.

The Paellas

2012-07-03T00:00:00+02:00

I just discovered this shoe-gazing gem from Osaka, Japan

THE PAELLAS -we are indie LO-Fi guiter “NITETIME SURF POP” band in Japan, Osaka! please checking our sound!!

We formed in November 2009 in Osaka.

Underscore.m

2012-07-02T00:00:00+02:00

A couple of weeks ago, I started working on Underscore.m. It’s a small utility library that helps you with manipulating data structures in Objective-C.

Here’s a quick example:

// An array of tweets we obtained by deserializing the
// JSON data from the twitter API
NSArray *processed = _array(tweets)
    // Let's make sure that we only operate on NSDictionaries,
    // you never know with these APIs ;-)
    .filter(Underscore.isDictionary)
    // Remove all tweets that are in English
    .reject(^BOOL (NSDictionary *tweet) {
        return [[tweet valueForKey:@"iso_language_code"] isEqualToString:@"en"];
    })
    // Create a simple string representation for every tweet
    .map(^NSString *(NSDictionary *tweet) {
        NSString *name = [tweet valueForKey:@"from_user_name"];
        NSString *text = [tweet valueForKey:@"text"];

        return [NSString stringWithFormat:@"%@: %@", name, text];
    })
    .unwrap;

If you know Objective-C, you can probably tell that it uses a somewhat unconventional syntax. Underscore.m eschews square brackets as they are not well suited for chaining. [[[[[[[[[They will pile up at the beginning of your call chain and add unnecessary noise.

Don’t get me wrong, I think named arguments in Objective-C are great. They make code a lot more self-descriptive. Consider

[[RBMelon alloc] initWithNumberOfSeeds:0
                     andPriceInDollars:1.50];

compared to, let’s say its Java equivalent

new Melon(0, 1.50);

The latter makes it much harder to guess what those two parameters mean. Now, Java’s popular IDEs make it easy to look up the documentation or definition of methods, but it’s still an unnecessary overhead.

However, the Java example is still a lot shorter, so named arguments are clearly a double edged sword.

If you’ve written at least a tiny bit of Objective-C, you’ve probably come in contact with

[NSDictionary dictionaryWithObjectsAndKeys:@"foo", [NSNumber numberWithInt:1],
                                           @"bar", [NSNumber numberWithInt:2],
                                           @"baz", [NSNumber numberWithInt:3],
                                           nil];

which, thankfully, Objective-C now has a literal for:

@{ @1: @"foo", @2: @"bar", @3: @"baz" }

Similarly, the usual functional suspects like map, reduce, tail etc., are well understood and don’t need a verbose, 20 character selector associated with them.

This is were Underscore.m comes in. By providing a tool-set of the most common functional idioms, it tries to encourage developers to structure their operations in small, concise chucks.

Similar to Objective-C’s new literals, I hope its clarity can outweigh conventions.

Site Redesign

2012-07-01T00:00:00+02:00

I’ve been meaning to redesign my website for quite some time now, this weekend I finally got around. This new design is much more colorful than the old one.

Check out the awesome symbolset font I’m using for icons. It works by applying ligatures to whole words, for example ‘love’ turns into love.

I also started to resolve embeds in the client using JavaScript, this makes it easier for me to publish new blog posts. As a small bonus, the embeds will usually pick up the color of the surrounding blog post.

I understand that there are still a couple of rough edges strewn across the site, I plan to fix those over the coming days. If you notice anything out of the ordinary, make sure to send me a mail.

Golden Gate CMYK

2012-07-01T00:00:00+02:00

So apparently, the official Golden Gate bridge color is:

Cyan: 0%
Magenta: 69%
Yellow: 100%
Black: 6%.

That’s #ED4C00 if you’re more the RGB kind of person.

/via Parker

Lee

2012-06-07T00:00:00+02:00

Working at SoundCloud means working with some extraordinary people. It also means working with Lee fucking Martin.

If you don’t know Lee, you most likely know some of his work. He’s one of the most inspiring, honest and talented people I’ve ever met. He also fights crime in in his Nyan Cat costume.

Hashtag Bromance ❤

slang

2012-04-29T00:00:00+02:00

slang is a small hack I built the other day. Inspired by Dan Catt’s Flambient, it allows you to apply an interesting pixelation effect to any image. I use it to generate new backgrounds for my desktop from screenshots of the same. You can kind of make out the iOS simulator on this one:

It’s a simple CoffeeScript implementation that you can find on github. I would like to have the image processing running in a background web worker, but unfortunately, canvas and web workers are mutually exclusive at this point.

My dotfiles

2012-03-30T00:00:00+02:00

After using oh_my_zsh for quite a while, I recently switched to having my own repo to store my dotfiles. I got a better understanding of zsh and its customization, now there is no suprising alias that I didn’t know of.

My prompt now looks something like this:

The right-hand side contains all relevant information about my currrent repo. The red circle indicates that I have untracked files but it being empty means nothing is staged.
The color indicates the time since the last commit, more than 30 minutes in this case.
It also tells me the branch I am on or the SHA1 of the current HEAD, if I am in ‘detached HEAD’ state.

You can find my prompt here, if you would like to use some of it for your own shell.

Spinamp

2012-02-13T00:00:00+01:00

Spinamp is my hack for the Music Hack Day San Francisco 2012.

Inspired by Lee’s earlier work, I recreated the Winamp user experience on top of the Spotify Apps API.

The playback, shuffle, and replay buttons work and I even had time to add a custom visualization based on Steve Wittens’ JS1K demo, that was powered by a custom FFT event that Daniel from Spotify was kind enought to throw in for me.

The Laughing Man

2012-01-04T00:00:00+01:00

I recreated the logo of The Laughing Man from Ghost in the Shell: Stand Alone Complex using only HTML and CSS.

In the show, the Laughing Man is a notorious hacker, capable of hacking TV cameras as well as the eyes of onlookers in real-time, hiding his face behind his infamous logo.

The film based on the same manga by Shirow Masamune is one of my all time favorite movies and if you haven’t already, you should really give it a try!

Notorious Siri

2011-12-09T00:00:00+01:00

Notorious Siri is my hack for the Music Hack Day London 2011.

SiriProxy is used to intercept the communication with Apple’s servers. Based on your song request, Notorious Siri then sends your choice of Notorious B.I.G.’s Hypnotize and an a-cappella rendition of Queen’s Bohemian Rhapsody to the device (the latter requiring 4 iPhones 4S).

Siri’s speech synthesis is synced to the beat using the timestamps obtained from the Echonest API which were then manually tweaked, to smooth out delays in the text-to-speech engine.

Big thanks to Universal Music for awarding me a nice pair of Dr. Dre headphones

Ia, rlyeh!

2011-11-13T00:00:00+01:00

Knowing that I am a big fan of the Lovecraftian mythos, my good friend Parker sent me this the other day:

phn’glui mglw’nafh cthulhu californa wgah’nagl fhtagn!

6strin.gs

2011-11-10T00:00:00+01:00

6strin.gs was my hack for Music Hack Day Montreal in September 2011. It’s an implementation of the Karplus-Strong algorithm written in CoffeeScript.

It uses Chrome’s shiny new webkitAudioContext, but unfortunately only runs in that browser. Check out the source code on github.

SoundCloud for iPad

2011-10-27T00:00:00+02:00

And now, what you’ve all been waiting for:

You can find the app in the App Store.

Big ups to Toto, Max, Gernot, Ullrich and Tobias from nxtbgthng as well as Katharina, Mark, Tobi and Phil from SoundCloud, I’m happy we finally got this out to the community.

Drive

2011-10-24T00:00:00+02:00

Great movie, great soundtrack.

The Blackwell Series

2011-10-23T00:00:00+02:00

I’ve read much about the Blackwell series of indie point and click adventures and after the recent release of the latest entry in the series, The Blackwell Deception, I finally gave them a spin.

Written by Dave Gilbert, the games follow the story of medium-against-her-will Rosa Blackwell and her ghost parter Joey Mallone, bringing peace to the restless souls of recently deceased New Yorkers.

While I am still waiting for the DVD package I ordered, containing all four games of the series, I got to download the two latest ones: The Blackwell Convergence as well as aforementioned Blackwell Deception.

The games, running at a decidedly oldschool 640x480, also feature a great, jazzy soundtrack. Listen for example to Rosa’s Theme from the Blackwell Deception:

Unfortunately, the team at Wadjet Eye decided to use the AGS Engine, a freeware adventure game engine that only runs on Microsoft Windows. I managed to get them working using VMWare Fusion, but the experience is shaky to say the least.

Still, this is a well written series of adventure games and I urge you to check it out.

Battles – Futura

2011-10-15T00:00:00+02:00

Tabula Rasa

2011-10-02T00:00:00+02:00

Today I finally received my new 13 inch MacBook Air. I’ve been pondering over this for a while, going back and forth between this, or a MacBook Pro. I ultimately chose portability over processing power and went with the Air, let’s see how this pans out over the next couple of months.

In many ways, getting a new machine is like sleeping in a freshly made bed, everything feels nice and clean and there are no crumbs hidden under the cover, yet. It also presents you with a nice opportunity to reevaluate your working environment.

Inspired by reading about other peoples setup on usesthis (see for example one by Richard Stallman), I figured I might as well write something about some of my favorite applications. So, without much further ado, here is a list of my tools of the trade and whatever else I use on a daily basis:

F.lux

F.lux is a small application that controls the white balance of your computer’s monitor. Computer screens usually have a white-point of 6500° Kelvin – while that looks great in broad daylight, in the evening that usually means that you’re staring at a bright, blueish rectangle while everything else is covered in warm, yellow light. This is unnecessarily tiring your eyes.

F.lux fixes this by dynamically setting the white point of your monitor to something cooler after sunset, which makes your screen’s colors appear warmer.

Even if you don’t run Mac OS X on your computer, go and install this program right now! It’s available for Windows and Linux, too. How comes you can read this if you’re installing F.lux? Do you got it? OK, let’s continue…

iTerm 2

iTerm 2 is a great replacement for the default Terminal.app OS X ships with. It has a couple of great features such as split windows, Growl support and is much more customizable than the default.

The main reason I use it, however, is its awesome Hotkey Window. Define a global hotkey and get access to a terminal window wherever you are. I set my Caps Lock key to open a fullscreen terminal window by mapping the key to F13 using the awkwardly named PCKeyboardhack and then assigning F13 to open the Hotkey Window.

I also removed the fade in animation by running

$ defaults write com.googlecode.iterm2 HotkeyTermAnimationDuration -float 0

to make the terminal appear instantly.

Sublime Text 2

Electric Boogaloo. The go-to GUI text editor for developers on OS X has long been TextMate. While the developer of TextMate has just reiterated that TextMate 2 is alive and well, many have turned to Sublime Text 2 for a modern editor. It comes with many great features out of the box and is also compatible to some of TextMates syntax highlighting bundles.

I switched to Sublime Text 2 for most of my personal editing needs because of its great split screen support and the distraction free mode in which I am currently writing this blog post while waiting on my plane.

Once I’ve grown more familiar with all the bells and whistles, I’ll probably make another post how I set it up, as most of the options you can set are currently not easily discoverable.

Sparrow

I never got the hang of using web based e-mail clients on a daily base and about a year ago, I made the switch from Thunderbird to Sparrow. It has a nice, clean UI and is well integrated with GMail.

There is a lite version on the Mac App Store, so make sure to give it a spin.

zsh

The benefits of zsh over bash have been discussed at great length multiple times now. zsh comes already installed on OS X and you can make it your default shell by running chsh -s zsh. I’d like to recommend you a little something called Oh my zsh, a repo of zsh plugins and themes.
Almost 3000 watchers on github can hardly be wrong…

               __                                     __
        ____  / /_     ____ ___  __  __   ____  _____/ /_
       / __ \/ __ \   / __ `__ \/ / / /  /_  / / ___/ __ \
      / /_/ / / / /  / / / / / / /_/ /    / /_(__  ) / / /
      \____/_/ /_/  /_/ /_/ /_/\__, /    /___/____/_/ /_/
                              /____/

What else

If I write something, I probably check it into git at some point. I’m not a big fan of git GUIs, so I usually stick to the cli version.
For my Objective-C needs, I use a Xcode 4 and not much else.
My current browser of choice is Chrome.

Mighty Oaks – Like an Eagle

2011-09-30T00:00:00+02:00

Spotify lolcat

2011-08-17T00:00:00+02:00

Turns out, if you run

$ open /Applications/Spotify.app/Contents/Resources/lolcat.png

on your Mac, you’ll get this:

(via Johannes)

Update: Apparently, the cat is owned by Rasmus, former Spotify lead designer.

Anamanaguchi – Daytrotter session

2011-08-16T00:00:00+02:00

Graffiti

2011-07-24T00:00:00+02:00

When Cammy became SoundClouder of the Day, she sent us this lovely message:

Edison – Shadowtime

2011-07-20T00:00:00+02:00

Sixteen Tons of Work

2011-07-15T00:00:00+02:00

More embed.ly goodness

2011-07-11T00:00:00+02:00

I’ve added a new small feature to the embed.ly plug-in, now you can pass along parameters specific to a particular embed, e.g.

{% embedly http://soundcloud.com/battles/ice-cream, color: FF11FF %}
{% embedly http://soundcloud.com/workit/the-drums-money, color: FFCC00 %}
{% embedly http://soundcloud.com/modularpeople/the-avalanches-since-i-left-you-stereolab-remix, color: 00CCFF %}

will produce

Hooray for colorful SoundCloud players!

An embed.ly plug-in for Jekyll

2011-07-09T00:00:00+02:00

I use the static webpage generator Jekyll for running this site and I absolutely love it. Combined with Github’s powerful github-pages feature, I get a well performing site with minimal effort and a convenient git-based workflow.

As you can see, I post a lot of SoundCloud tracks and videos on this site, but I find the process of composing embed links very dull and time-consuming.

To facilitate this process, I wrote a small Jekyll plug-in that acts as an oEmbed client using the embed.ly API.

Once you’ve install the plug-in, it will automatically turn every embedly tag into a nice looking embed every time you compile your site. If you encounter any problems, make sure to file a report in the Issues tracker.

Now, do you care for an example?

Wikipedia

{% embedly http://en.wikipedia.org/wiki/SoundCloud %}

turns into

XKCD

{% embedly http://xkcd.com/918 %}

Flickr

{% embedly http://www.flickr.com/photos/visivo/3389278626 %}

Overall, embed.ly supports over 180 services. I’ve made sure you can customize and style your embeds as well as possible.

However…

Unfortunately, github-pages does not offer support for plug-ins for security reasons. To make use of this (and any other Jekyll plug-in), you have to compile your site yourself and push it to your pages repo manually.

Maybe they could include a plug-in like this in the future?

Mobile sites, at rest

2011-07-08T00:00:00+02:00

Today, I read a tweet by Jens about how he switched to the SoundCloud mobile site on the desktop.

I can certainly see why you would do that, mobile sites are more to the point and optimized for slow connections, which makes them super fast when you’re wired.

Yet, I wondered how well it would work. I’ve been using the site on my iPad but it certainly is not optimized for that screen size - especially in landscape.

Just pointing any modern browser to http://m.soundcloud.com will do the trick, but switching between tabs just to play another track is a hassle, So is accidentally closing a tab.
Luckily for us, there is a tool that allows you to create single site browsers. It’s called Fluid.

Just enter a name, the URL and where it should get the icon from and presto, you got yourself a nice little app.

Now, this is cool and all, but I really urge you to go the extra mile. Turns out, if you spend $5 on Fluid’s pro version you’ll get the warm feeling of supporting small developers as well as access to a feature called Pin to status bar.

With that, you can turn SoundCloud mobile into a small icon on the top of your Mac’s screen, that gives you easy access to the app, wherever you are.

Tip: Make sure you hide the status bar from the main menu before you pin the app to the status bar, you can still resize the app by dragging the corners, even though there are no handles visible.

I’ll keep experimenting with Fluid, as I’m curious how Google+ and other mobile sites will work out.

Mighty Oaks at Fusion

2011-07-08T00:00:00+02:00

My friend Ian and his band, Mighty Oaks, played this year’s Fusion festival.

Man, I wish I could have been there.

(Make sure you watch the entire playlist)

WWDC 2011

2011-06-28T00:00:00+02:00

I had a wunderful time at this year’s WWDC in San Francisco. Look what I spotted during the keynote.

(Photo courtesy of engadget)

Torpedo Boys – Ich bin Ausländer

2011-06-27T00:00:00+02:00

Leider zum Glück.

Flogging Molly – Speed Of Darkness

2011-05-31T00:00:00+02:00

Berlin Wall

2011-05-07T00:00:00+02:00

Incredible song, not quite the art style I imagined this video to have.

The SoundCloud situation room

2011-05-05T00:00:00+02:00

A serious situation in the SoundCloud office. (Photo by Natalie)

Beastie Boys

2011-04-25T00:00:00+02:00

Check out the new Beastie Boys Album, Hot Sauce Committee Part Two. Sweet.

Marbleo.us

2011-04-19T00:00:00+02:00

Together with my friend Simon, I’ve built a web-based marble run simulator called Marbleo.us. Here’s a fun example map.

It was our submission for the annual informatiCup, a competition for students interested in computer science. Unfortunately, it did not make it into the final round but I still very much consider this to be a success.

So let me give you a quick overview of what we did, how we did it and what I’ve learnt building Marbleo.us.

No data store is faster than no data store.

Early on, we decided to give users the ability to share their creation with their friends. However, learning from the popular sandbox game Minecraft, we wanted to have a counter measure against what is called griefing, malicious players destroying your creation.

After considering different data stores and ways to handle both read-only and read-write links to the maps, we came up with a far more elegant solution: encoding the whole map into the fragment of the URL.

Writing the whole application in client side Javascript also alleviated the need for a server-side persistence layer, so all we needed was a way to serve a bunch of static files.

Standing on the shoulders of github

We are using git, which is unfortunately not used often in our academic circles, but it meant the natural choice for hosting our repository was github. Using the awesome github-pages feature, we can also serve http://marbleo.us from their servers at no additional cost and with great response times.

I like my sugar with coffee and cream …script

Only a short time before the start of this project came I across CoffeeScript - thanks to Dmytri for tipping me off.

CoffeeScript is a lean, mean language that compiles to easy to read Javascript. More than just syntactic sugar, it is a really beautiful way to express your intentions and you can tell that its creator, Jeremy Ashkenas is a firm believer in code as literature.

Jeremy also wrote backbone.js which, amongst other things, powers the SoundCloud mobile site.

Drawing the marble run

After briefly investigating CSS-3 transformations like in this article for composing the map, I decided to go with a more straightforward approach by drawing the maps onto a canvas.

A single block is then stitched together from multiple components, cached, and placed on the canvas at its correct position in space. The individual components are all stored in one file to minimize requests.

Additionally, a second, smaller canvas is used to allow the use to drag a stack of blocks freely across the browser window without doing costly redraws at every mouse position.

We also save yet another representation of the marble run, to quickly determine face of a block is under the current mouse position. This also allows us to draw a cute little hand cursor whenever the user places the mouse over a block with pixel precision.

We simply compile a map using a special, color-coded sprite and then quickly look up what color (if any) is stored at the mouse position. Blue for the top, red and green of the block’s sides and black for the floor.

Now we have the run ready, here comes the marble!

Animating the marble

We use a mixed approach to move the marble over the run by discriminating between two different types of movement: free movement in space and movement on the tracks of the marble run.

Movement in space

This part of the physics engine engine was simple, by using a basic collision detection we check if the marble collided with a block and then invert the appropriate velocity components. If the marble is rolling over the top of a block, we also test if it crosses a track which leads us to the next point:

Movement on the track

For every block with its different grooves and tunnels, we defined small, directed graphs that we then join together to form the large, overall track graph. It’s important that the nodes of this graph have a degree of at most two, so that there is no ambiguity in which node to pick.

We then move the marble along these paths from node to node, until we encounter a node that has no neighbor we haven’t visited before. It is then that we leave the track and switch back to the previous mode of movement.

Drawing the marble

Now that we have the animation of the marble in place, we of course need to draw it, but to do that, we first have to figure out where the marble is visible.

First we draw the the marble onto a blank, offscreen canvas.

Then we iterate over all blocks in map that could potentially obstruct our view to the marble, drawing only the parts that are actually in the way onto another offscreen canvas.

As a last step, we join our two canvases by drawing the canvas that contains the obstructing parts onto the marble using the blend mode destination-out, this removes the marble everywhere there is a block and leaves us with a nice precisely drawn marble.

I hope you enjoy marbleo.us and found this write-up useful. If you have any more questions or comments, feel free to drop me a line at robb@robb.is.

BUSINESS

2011-04-18T00:00:00+02:00

Das Racist

2011-04-09T00:00:00+02:00

Holocene

2011-03-28T00:00:00+02:00

Seeing this, I can’t wait for my monome arc 4 to arrive.

thedickensbar.com

2011-03-24T00:00:00+01:00

Modeled after the infamous #dickbar, Johnny, Parker and I build the Dickensbar. A quick and easy way to add some class to every website.

Or, to quote Dickens himself: > “Electric communication will never be a substitute for the face of someone > who with their soul encourages another person to be brave and true.”

Update: Twitter just announced they have removed the quickbar with the latest update of the iOS application.

Vib Ribboff

2011-02-21T00:00:00+01:00

Vib Ribboff was my submission for the Music Hackday in New York in early 2011. It is a browser based clone of an old Playstation game called Vib Ribbon.

It uses the Echonest API to resolve beat information off of SoundCloud tracks. Then it composes a level, matching obstacles to beats in the song.

I plan to publish this online, though I haven’t had the time yet to write a backend. I’ll look into this as soon as I have some spare time.

Thanks to Parker for MCing the presentation.

inunico.de

2011-01-04T00:00:00+01:00

Inunico.de is a project my friend Parker and I are working on. It is basically a browser-based character map that allows users to search for any of the Unicode characters.

It also supports a handy deep linking feature using readable URLs, e.g.: airplane.inunico.de, postal-mark-face.inunico.de or (yes) pile-of-poo.inunico.de.

Unfortunately, support for the characters varies by Operating System and browser. For the best effect, inunico.de recommends a recent Firefox with the Symbola font installed.

Radio Free Hackday

2010-02-11T00:00:00+01:00

This is a project my friend Simon and I worked on during Music Hackday Stockholm in early 2010.

We wanted to come up with a physical interface for online music consumption. After a bit of research into various devices, we found the Panasonic RF-2400 and instantly fell in love with its iconic appearance. (It couldn’t look more like a radio, could it?)

We removed the power supply to make room for an Arduino Mini running a custom firmware and shortwired the frequency dial so that the radio is always tuned to the same frequency, no matter which frequency the user selected.

We then read out the position of the dial with the Arduino and sent it to the computer via USB. The computer would then stream music from the Citysounds.fm and SoundCloud APIs back into the device using a FM Transmitter.

We got very positive feedback for our hack, Create Digital Music wrote about it, we won two nice prizes from Pacemaker and even got featured on Sweden’s public TV station, SVT:

Please skip to 02:30 (Vimeo doesn’t allow for timed embeds).

Xylobot

2009-09-20T00:00:00+02:00

I met Ramsey Arnaoot at the Music Hackday Berlin 2009, discussing how underrepresented hardware hacks were, we decided to do something about it and came up with the Xylobot.

The build is nothing special and quite self-explanatory, little hammers made of hot-glued bolts strike the Glockenspiel. The Arduino library suffered from a bug that would let us use only 6 servos, so we had to settle for the major pentatonic scale.

On the computer side, a Java application is listening to incoming MIDI data and triggers the servos using simple serial messages. This was the second project I did with the Arduino and I am still amazed how easily things can be prototyped with this platform. Ramsey wrote a custom Pd-Patch for RjDj to generate music from sensory data, though we haven’t got a video of this.

The Xylobot also was mentioned by Peter in his Music Hackday wrap-up on Create Digital Music.