Relocate originals in Aperture

I have a free disk space problem. The main cause are photos. My shared iPhoto / Aperture library is about 60GB, which is a lot of space on a Macbook Air.

This week a found a great (temporary) solution. I mainly use Aperture as my photo management program and it stores several versions of every photo.

  • Thumbnail: These are created on import and are used for the big overviews
  • Preview: Compressed but bigger thumbnails of imported and edited files. These are the versions used by OSX and other applications such as Mail, Keynote, slideshows, etc.
  • Original: The orignal as it was imported from the camera

The thumbnails and previews don’t take a lot of space, 1MB a picture at most, but the originals do. A RAW file is usually (way) over 30MB and JPEG’s straight from the SLR are still over 7MB. Luckily Aperture has a feature to offload the originals to another location such as an external drive.

Doing this is easy. You just select the images of which you want to relocate the originals and select “File” -> “Relocate Originals” (depending on your version it might be called “Relocate Masters”). Select the new source and optionally define a sub directory structure and you’re done.

The best thing is that, when you unplug the drive, you can still browse, share, rate and tag you’re entire library. When the originals can’t be found Aperture simply uses the Preview versions of the photos. The only thing you can’t do is edit photos.

It’s also great that you can relocate originals at any time. So after you’ve imported new photos you can relocate these to the external drive too. A good strategy would be to keep the most recent imports locally and export them a few weeks after sorting and editing them.

Since iPhoto and Aperture now can share libraries I assume this works in iPhoto too.

The only downside is that you now need to manually backup your masters.

The dream still is a photo library in the cloud of which all or parts can be easily shared across multiple devices. For now I have at least offloaded one of the biggest collection of files of my local disk.

Apple likes LESS

I came across this Apple job posting at Authentic Jobs for a UI/Visual designer earlier this week. If you apply you get bonus points when you have experience with LESS. No mention of SASS, which to me seems more popular.

We (at Interactive Studios) use LESS. I checked out both LESS and SASS but liked LESS more, so that’s what we went with.

The differences are small, but the main reason I liked LESS more is the simpler syntax for mixins. In SASS you have to define mixins with special syntax, while in LESS you just define a CSS class which you can reuse. Somewhere Apple seems to agree.

A better iOS app switcher

You know the app switcher in iOS? Double tap the home button and up pops a tray with the last used apps. Swipe once to the right and you’ll get some hidden music controls. Swipe to the left enough and you’ll find apps you didn’t even know you ever used.

There are a few problems with the current app switching.

  • The very useful music controls are hidden. To reach them you need to double tap and swipe left. Most people don’t even know that it exist.
  • Closing apps isn’t really necessary, but when you do want to close something quickly it’s a hassle.
  • Icons aren’t the most useful way to identify an app and you can’t see the state in which you left the app.

I had some ideas about how to improve the current implementation. So here’s a quick mock-up.

  • You still launch the app switcher by double tapping the home button. The app zooms out and this screen appears.
  • You exit it by pressing the home button once (or twice).
  • Music controls are permanently displayed at the bottom. Himitsu no more!
  • Apps are represented by both a thumbnail of the last state and the app icon. This way it’s easy to recognize an app.
  • You can scroll to all “open” apps by using the cover flow mechanics (which finally *really* is useful for something).
  • The app icons scroll along with cover flow.
  • Closing an app can be done by swiping an app to the top of the screen (yes, a WebOS homage).
  • Tap a thumbnail or icon to zoom right into the app.
  • Knowing a bit about how iOS works you will sometimes probably get a slightly greyed out screen with a spinner while the OS loads all the data for the state in which you left the app.
  • The linen is not great, but it’s what Apple seems to love, so I used it.

iPhone 5: what I got right

At the end of May I did some iPhone predictions, just in case a new phone was announced at WWDC. Now that the phone has been announced, it’s time to see how I fared.

  1. The 3.95” (or whatever) screen is real

    This turned out to be correct. A added detail that turned out to be correct is that “old” apps will be letter-boxed.

  2. A6 dual core processor

    Seems to be correct as well. We don’t know all the details yet, but the processor is called A6 and it looks to be dual-core. I’ve heard however that it does include a quad-core GPU just like the A5X.

  3. There won’t be a three part back

    I got this one epically wrong. The leaked parts turned out to be legit (although details differed). I’ll hold of the verdict of how I like the design when I hold one in my hand.

  4. The Facetime camera will be centered

    Exactly right.

  5. The camera will see an upgrade, but won’t exceed 11MP

    Turned out be right as well. The theory that it would get a slightly higher than 8MP sensor wasn’t right however, since it has exactly the same pixel dimensions as the iPhone 4S.

So 4 out of 5. That’s good in my books.

Pioneer announces CDJ-2000 Nexus

Music stored inside Wi-Fi/USB-connected iPhone/iPod touch/iPad devices can be transmitted to the CDJ-2000nexus using the iOS version of Rekordbox for DJ play. The touch panel displays of iPads, etc. can be used for intuitive music selection with controls that users will already be familiar with.

This and slip mode, quantized syncing of tracks and easier looping tools open up a lot of new possibilities for “hardware” DJ’s. The best demo video is the one with Eats Everything.

It’s interesting to see that computer technology and DJ hardware is growing closer and closer together. There are many digital only DJ solutions, but with technology like slip mode, Pioneer is doing things that are currently not possible with Traktor or time-code setups.

I would love to get my hands on a few of these, but they are way too expensive to justify a purchase for home use.

More info over at

New (2012) iPhone predictions

WWDC is next week. And even though I don’t suspect Apple will reveal the new iPhone hardware during WWDC, now is a good time to do some iPhone predictions before it’s too late.

The 3.95” (or whatever) screen is real

The rumors suggest this, and it seems logical. A screen with the same dpi as the iPhone 4 and 4S, but slightly taller. Most apps would be easy to upgrade, and apps which can’t will be letter boxed.

Though it has benefits (better for vertical apps, video viewing) and downsides (16:9 portrait images…, the phone would be a bit less easy to handle with one hand), I believe this is the path Apple will take.

A6 dual core processor

While other manufacturers go quad-core, I believe Apple will stick with a more energy efficient dual-core chip for the iPhone, while the next iPad will get a quad-core version of the same chip. The A6 will be more powerful than the current A5, presumably with a more beefed up GPU. It will also consume less power.

There won’t be a three part back

There are pictures circulating the web showing an aluminum iPhone backside with glass strips at the top and bottom parts of the back. I don’t believe that it’s an Apple design. My prediction is the new iPhone will have a simple and clean back.

The Facetime camera will be centered

It’s just a little more natural if the Facetime camera is facing you directly instead of being a little bit to the side. Apple knows this and, if engineering allows it, they will probably place it centered above the screen.

The camera will see an upgrade, but won’t exceed 11MP

This is based on practicality. If they increase the sensors quality, but not increase the number of megapixels than the quality of the images will be greater. I guess most iPhone users don’t know or care how much MP the camera has, as long as it takes great pictures. So they won’t have to increase the megapixels for marketing reasons.

One gripe I currently have with my 4S is that when I want to take video, the image gets heavily cropped / zoomed in. I assume this is since they take a 1920 x 1080 part of the sensor which is smaller than the entire sensor.

If the new sensor woud make 16:9 images than a 16:9 sensor would only have to be 300.000 pixels bigger to exactly be twice as big as 1920 x 1080. If that would be the case the could create smart software which only uses 1 out of every four pixels or 4 pixel averages for each 1080p pixel.

If they want to keep 4:3 images, than the sensor would have to be about 11MP to do the same trick.

Ideas for the iPhone 6 camera sensor

These are my iPhone predictions. As for WWDC, I hope they announce new Mac Mini configurations, but if they have new hardware announcements than it’ll probably be a new iMac and updates the the Macbook line. Besides iOS6 and Mountain Lion I guess we’ll see an update for iLife with deep iCloud integration (please let me store my iPhoto collection in iCloud). And I’m praying for an Aperture update.

Why the new iPad is a big deal

Yesterday Apple announced a new iPad called just that: iPad. To some it seems like the best thing ever, to others the upgrade is not that big. To me, this is a device that will change a lot. It’s a big deal.

The single reason? The screen.

  1. Photos will look amazing. For the first time ever you will be able to view digital images with the same quality of a high-res print.
  2. Reading will be much more comfortable.
  3. Digital typography will become even more important.
  4. Both web and app developers will have to create big high-res assets. The weird thing about this, is that we can’t really preview them while we work on them because the screens we work on don’t have the same fidelity.


Whatever Apple’s calling it doesn’t matter, it’s simply a big and very pixel dense display. The entire device is built around it. The display needs a beefy processor to push every single one of the 3.1 million pixels and you need a decent camera to capture images worthy of the display. You need the bandwidth to download all the highres assets, so HSDPA+ and LTE are very welcome. And finally we don’t want worse battery life, so the battery needs to be bigger.

If you believe that the iPad has just received a marginal upgrade you are very wrong. The new iPad is a big deal. Really.

CSS Off 2011 reflection

Last October I participated in a competition called CSS Off. CSS Off descibes itself as a no holds barred display of CSS and markup skills. The competition in a nutshell comes down to this: You are provided with a design (provided by the fine folk at Paravel) which you need to turn into great HTML and CSS.

Because of the big amount of participants it took a while before the jury had judged all entries. But yesterday the results where finally published. And I did pretty well with an 11th place! Nice!

You can check out my submission here: My CSS Off entry.

Mobile first

I took a mobile first approach for this project. The starting point was the mobile (or small screen) version of the page and I worked my way up to the original design making sure the content was appropriate on all widths in between. I primarily used an iPhone, iPad and laptop to test.

Focus on clean code

My main goal was to create HTML that was as clean as possible. In my opinion this goal was met and the judges seemed to agree. Just check the source code to see for yourself.

To still be able to recreate the visual design I used a lot of background images and pseudo-elements (with a polyfill for IE8 and down). This worked well, but caused problems when trying to animate certain parts of the page.

Image compression

With all the textures in the background and the illustrations in the foreground I knew it would mean I would have to create a lot of transparant png’s. Not the best file format for compression, so I created several versions of the same image for several breakpoints. This way the small files get loaded for the small screen version, while the big images are only loaded on big screens which presumably have more bandwidth to work with.

Since the design had several great illustrations there was no reason to use 24 bit png’s. 8 bit would be more than enough, but they have ugly non-anti-aliased edges. For the best result of big illustrations with transparent backgrounds I used to following trick:

Place the illustration on a layer in Photoshop above the background texture. Select the illustrations outline (click the layer thumbnail while holding [CMD] / [CTRL] ). Expand the selection by 1 or 2 pixels and copy that complete selection into a new document. Export it to PNG-8. You can optionally select the matte color the match the background.

The small screen version loads a liitle over 500KB of assets while the big screen version loads almost 1MB. That still not great but not bad for an accurate representation of the design.

Retina optimization

Checking your website on an iPhone 4 or 4S makes you very aware of low resolution assets, so I provided several @2x versions for certain images. I used another trick to make the background texture look extra sharp: setting background-size to half of the original image dimension.

Stuff I knew that wasn’t perfect

The form, oh man, the form. It was bad. I wanted to create great dropdowns, but I dind’t have the time to do so. I also didn’t implement any validation.

Legacy browser support wasn’t great either. The background-size property not being supported was the biggest problem. I use background-size a lot to scale backgrounds while resizing the browser.

The last thing I didn’t do was concatenation and minimization of assets. The reason for this was simple, it would have been hard for the judges to judge, so I just didn’t bother.

Things I would’ve done differently now

Aside from fixing the points mentioned above I would have probably handled the image compression differently. I put a lot of effort into recreating the big screen experience of the page on small devices, but that came at the cost of bandwidth. Doing it over I would’ve dropped the textures on the smaller screens so I could’ve used more jpeg’s instead of png’s. That would have saved a massive amount of kb’s!

What I thought of the other entries

It was cool the see a very familiar design handled very differently by other people. Some of the things that crossed my mind:

  • Damn, why didn’t I think of that
  • Wow, that’s a nice animation
  • Hmm, not exactly the same as the original design, but you definitely some save bytes here

The overall quality of the submissions I saw was good! But the most interesting thing to see was how everyone handled the responsiveness of the design. The breakpoints and how the layout changed when viewed on a different device differed a lot!

To conclude

Participating was an amazing experience. Just knowing that people you look up to will be examining your code made me step up my game. I went the extra mile, crossed more t’s and dotted more i’s. The great thing is that my day to day coding has improved because of it.

And finally, while the competition itself is a lonely event, connecting with other participants afterwards has been great as well.

Thanks to the judges and everyone else involved with CSS Off. I will definitely be participating this year again!

jQuery Flex Vertical Center plugin

This jQuery plugin provides an easy way to vertically center an element in its parent. Even if the parents height changes after resizing the browser window, in a fluid or responsive layout for example.

I created it during the CSSoff competition because I had a container with a background that had background-size: 100% on it. I created another plugin (will be on Github soon) which kept the proportions of the container the same even if it changed width in the fluid and responsive layout. There was some dynamic content within the container which needed to be properly centered within the container so I created this plugin to do just that.


Simply include ‘jquery.flexverticalcenter.js’ (which you can download on Github) in your project (after loading jQuery) like this:

<script defer src="js/jquery.flexverticalcenter.js"> </script>

Then call the plugin on the element which needs to be vertically centered in it’s parent.

<script> $(document).ready(function() { $('#element-to-be-centered').flexVerticalCenter(); }); </script>

This will take the parents height, the elements own height and calculate the distance the element should have from the parents top to be vertically centered. This value is applied to the top margin of the element by default.


You can pass one parameter to the plugin, which is the css attribute that the value should be set on. The default is ‘margin-top’, but you can pass any attribute you would like. Most probably ‘padding-top’ or ‘top’.

<script> $(document).ready(function() { $('#element-to-be-centered').flexVerticalCenter('padding-top'); }); </script>


The initial code was more or less borrowed from the awesome FitText plugin.

New Year’s update

So it’s been a while since my last post and now a new year has begun. Let’s reflect on my last months in 2011.

A big chunk of October and November where filled up by a big web project that prepares children before they go to a hospital. It was a great project to work on, even though regular accessibility was sacrificed to make the site more appealing to kids.

I also entered to CSSoff competition. I was a great learning experience, but unfortunately I couldn’t put all the bells and whistles into the end result that I would’ve liked. But I believe my entry was still pleasing.

During CSSoff I also created two jQuery plug-ins to solve some problems I found while creating the page. I’ve released one on Github already and the other will follow shortly.

November was also the month of my trip to the South West of the USA. The trip was amazing and some highlights included San Francisco, Las Vegas, The Grand Canyon and Bryce Canyon.

The final stretch of the year mainly consisted of several small projects which needed to be finished, some support work on older projects and one very cool responsive website. That one is scheduled to launch early next week.

The weeks surrounding Christmas are usually reserved for side-projects and this year I dove head first into PHP again. The goal: To create an easy to use Ruby on Rails like PHP framework. Not something that hasn’t been tried before, but it gave me a chance to test a lot of new PHP features. The end result is actually very usable, although not finished yet. But it looks like it could very well become the base of all our feature software releases. I plan to release it as an open-source project in the future.

Several new projects are lined up and I’m finally putting the finishing touches on the new Interactive Studios website. Finally because I started development on that over a year ago. Ideas for a new site are already taking shape, but we desperatly need a new website!