Barking instructions at your minions from a giant screen on a wall was once in the same “now we’re in the future” category as flying cars and robot slaves. It’s almost gone unnoticed that for the price of a projector and a couple of webcams combined with free Skype features, anyone can play at evil dictator.

Besides being quite a lot of fun, we’re actually testing a new setup to allow us to have meetings between our Copenhagen headquarters and our forthcoming Zürich foreign branch.

Along with our tweaked branding and website, observant readers may have noticed the addition of a Swiss address too. Well, now it’s official… from June 2008 we will have a permanent office in the heart of Europe too. Recent advancements in social networks and communications mean that employees and even management are quickly becoming location-independent. We are very excited about pushing this as far as we can.

For more details about how we can help you to determine and implement your online strategy in Switzerland, please contact mail@spoiledmilk.ch

Click here to download a lovely wallpaper for your desktop.

Following on from the recent thank you we received in the form of cakes, we today received two bottles of champagne from the lovely people at Dwarf to express gratitude for the last project we worked on together. Thanks guys!

Really, I don’t like being at the hairdresser.

I find it tiresome making appointments. I rarely succeed in communicating how I want my hair to be. I am not very good at having an hour of chit-chat about personal issues with a total stranger. I find the service too expensive – especially in the light of the frequency you’re expected to go. And for a week after I regret I even went.

The other day I surprised myself. A friend of mine referred me to Hansen & Zeneli’s website and their excellent and inviting booking system caught my interest.

Their system let me see all the available days and times, I could choose which hairdresser to chit-chat to based on profile images, I could select a text reminder for the day of my appointment and I could even make bookings for the next year, if my schedule required it.

Apparently, this system has grown into a massive business called Hairtools – targeting all hairdressers nation-wide. Due to this particular focus on user-friendliness, I suddenly had an appointment with a hairdresser.

Wish me luck.

Here is a simple way to implement custom form controls while still using Rails’ standard helpers. For this example, we’ll implement a two-state graphical alternative to a check-box (usually implemented by the operating system and uncustomisable via CSS), which represents a standard boolean field in your database model.

Normally we’d do something like in our view:

    < %= form_for @model, :url => { :action => :create } do |f| %>
        < %= f.check_box :someBool %>
        < %= f.submit("OK") %>
    < % end %>

But we’d like to use something a little like this to represent our field instead:

Firstly the images are added to our Rails view via the helpers, with the addition of assigning each one an ID and an inline style to hide the one opposing the required default state:

    < %= image_tag("signUpItemActive.gif", :size => "13x18",
        :alt => "Active", :id => "checkActive") %>
    < %= image_tag("signUpItemInActive.gif", :size => "13x18",
        :alt => "Inactive", :id => "checkInactive",
        :style => "display:none;") %>

These are then both wrapped in a single anchor tag, which is given an onclick handler to a JavaScript function.

    <a href="#" onclick="toggleCheckBox(); return false;">
         < %= image_tag("signUpItemActive.gif", :size => "13x18",
            :alt => "Active", :id => "checkActive") %>
         < %= image_tag("signUpItemInActive.gif", :size => "13x18",
            :alt => "Inactive", :id => "checkInactive",
            :style => "display:none;") %>
    </a>

The next step is to modify our standard Rails form to assign the check-box an ID, and hide it with some more inline CSS styling. This means it won’t be visible, but will continue to send its value when the form is submitted:

    < %= f.check_box :someBool, :id => "hiddenCheckBox", :style => "display:none;" %>

The JavaScript function can then be defined in Application.js (this could of course be modified to take the IDs as parameters):

    function toggleCheckBox()
    {
        elementActive = document.getElementById('checkActive');
        elementInactive = document.getElementById('checkInactive');
        elementHidden = document.getElementById('hiddenCheckBox');
 
        if (elementActive && elementInactive && elementHidden)
        {
            var state = (elementActive.style.display == "none");
            elementHidden.checked = state;
            elementActive.style.display = state ? "inline" : "none";
            elementInactive.style.display = state ? "inline" : "none";
        }
    }

There we go! Clicking the dummy check-box graphic will toggle the images and set the value in the hidden check-box at the same time. There is only one remaining step and that is to set the default state of the images to match the existing value of the boolean field. Without this the graphics and the form are likely to get out of sync. Even if the form is for creating a new record, the page will be shown again in the event of a validation error.

Another JavaScript function can take care of this:

  function setCheckBox()
    {
        elementActive = document.getElementById('checkActive');
        elementInactive = document.getElementById('checkInactive');
        elementHidden = document.getElementById('hiddenCheckBox');
 
        if (elementActive && elementInactive && elementHidden)
        {
            var state = elementHidden.checked;
            elementActive.style.display = state ? "inline" : "none";
            elementInactive.style.display = state ? "inline" : "none";
        }
    }

Then call this from the page’s body onLoad event:

       <body onload="setCheckBox();">

This post was originally published on www.russellquinn.com in February 2008.

We are midway through a large project at the moment. It’s our biggest Ruby on Rails project for a client to date and consists of a front end and an administration area based on our DATA CARTON technology. Early on we faced several organisational conflicts between these two opposing forces.

Our DATA CARTON framework was adverse to settling in directly with its public facing companion, our models (while obviously the same) were actually required to be configured in subtly different ways, and with multiple developers and designers working together, we decided to split them into two applications both pointing at the same database.

While these logical units promised simpler security, cleaner directory structures and more streamlined development, we hadn’t tried this before but decided to just forge ahead anyway. These are the problems we encountered and how we solved them:

1. Logins

Our front end is community-based and all users of the system from newsletter subscribers to administrators share a users table. The first thing we did after pointing our database.yml file at the same database was to try logging in to both applications with the test user we had created. After only a 50% success rate, we traced the problem to our password encryption method that uses a mixture of the user’s password choice, a salt and an application specific key string. Different keys are going to result in different hashes and incompatible authentication routines in the applications. A quick switch to using identical strings and we were successfully creating users and logging-in in all possible combinations.

    def self.encrypt(pass, salt)
        finalString = pass + 'somekey' + salt
        Digest::SHA1.hexdigest(finalString)
    end

2. Sessions

Our next thought was ’sharing sessions would be nice’. Linking administrators directly to the backend from their frontend toolbar without having to login again, passing secret messages back and forth, that sort of thing. Rails offers cookie-only sessions or database based ones. Using the more data-sensitive one is a simple matter of uncommenting these lines from the application’s environment.rb:

    config.action_controller.session_store =
        :active_record_store

Then in the same file (environment.rb) you’ll find your session security key and secret:

    config.action_controller.session = {
        :session_key => 'some_secret_key',
        :secret      => 'some_secret_hash'
    }

Rails generates both of these automatically when creating your application. They are sent with every non-GET request (i.e. PUT, POST, DELETE) to verify your session and protect against cross-site forgery (there’s actually a few fiddly issues with getting in-place edits working while using this method, but I’ll save that for another post).

The important thing here is to again make sure all keys and secrets are consistent across both applications. So pick one and copy it across. Once you’ve synchronised your environment.rb session settings, you’ll need to uncomment and duplicate your session secret from the top of controllers\application.rb too. Now you’re sharing sessions!

	protect_from_forgery :secret => 'some_secret_hash'

3. Subdomains

We quickly realised that our session sharing was not going to be as smooth as first anticipated, as we typically run our client’s backends on an admin subdomain (i.e. http://admin.abcdefg.com) and as cookies don’t take kindly to being requested by subdomains that haven’t sent them, we still didn’t have our single login functionality.

After much brainstorming and hunting around, we eventually found this genius configuration option that (notice the all important ‘.’ prefix) makes the cookie available to all subdomains on a domain. Finally we had truly shared sessions.

    ActionController::CgiRequest::DEFAULT_SESSION_OPTIONS.
        update( :session_domain => '.abcdefg.com')

4. Migrations / Models / Helpers / Deployment

The remaining issues are ones we are still facing and gradually solving. These tend to be less of a technical matter and more of an organisational one. We’re quickly establishing rules for how we order the migration files, share some models while keeping the security sensitive ones separate, bundling all of our helpers up into libraries and unifying deployment. We’re not quite there yet, but I’ll be sure to share our assumptions and solutions soon.

This article was first published on www.russellquinn.com in January 2008.

Here is a list of the blogs or resources that I find the most interesting or inspiring:

AisleOne
“An inspirational resource focused on graphic design, typography, grid systems, minimalism and modernism.”

FormFiftyFive
“FormFiftyFive is a design archive of inspiring work from around the world.”

ISO50 – Scott Hansen
Scott Hansen is a graphic designer and musician (Tycho). His style is strong and strict – check out his portfolio.

Kanardo
A good resource for interesting small projects, a lot of them are hand-made.

Kitsune Noir
Bobby Solomon’s blog about good design. He also runs the nice Desktop Wallpaper Project, if you want to freshen up your computer screen.

It’s Nice That
Keeps my finger on the England pulse – they also have other nationalities.

Signal vs. Noise
37 Signals’ all-things-go blog. They have everything; articles, small design inputs and just general stuff.

Sleevage
Sleevage is all about record covers – new ones or oldies. Let yourself enjoy some very nice artwork.

Swiss Legacy
“Swiss Legacy, by the initiative of Xavier Encinas, is a collaborative blog focused on typography, Swiss graphic design and grids.”

Photoshop Disasters
The worst of the worst from the advertising industry.

I was struggling with this problem all day yesterday and I think I’ve finally found a simple solution that works in all browsers.

I needed to remove the blue glow highlight in Safari that indicates when a textfield has focus. Normally, for usability reasons, I would be against removing functionality like this, but as it was corrupting my design drastically it had to go. It’s also the only text field on this page and it’s huge.

Here’s a screenshot showing the problem the blue glow causes in highly styled forms:

Now let’s take a look at the fix.

The basic idea is to hide the extra pixels that are added when Safari makes its highlight.

We can do this by making a surrounding DIV the size of the input box. We call this the “div.hider”. Then to make sure it masks all contained content, we set it to

overflow:hidden

We should then add 4 pixels to both the width and height of the actual input box. Finally, set negative margins of -2px to the top and -2px to the left to offset the field back to the required position. This is effectively producing a simple layer mask.

div.hider {
      width:250px; /* Actual width */
      height:20px; /* Actual height */
      overflow:hidden;
}
input.removeGlow {
      width:254px; /* Actual width + 4 */
      height:24px; /* Actual height + 4 */
      margin:-2px 0 0 -2px;
}

And that’s it. You can it in action here. You obviously need to view it in Safari to see the effect ;)

During Easter I went to Berlin with my brother and a friend. Besides the city in itself, something happened that I must share because it was a really amazing experience.

On one of the nights we decided to hit the town, but since we didn’t have a clue where to go we were quite open to ideas. After a lot discussion I found myself in a cab on the way to a jazz club called A-Trane. It was my brother’s idea. Definitely not mine. Jazz has never really been my genre, plus I didn’t understand the spelling of the name of the club. Furthermore there was an open jam session on that night so it sounded like there would be complete amateurs playing. My expectations were lower than low.

We entered the club and there was a band playing live. It wasn’t really classic jazz but sounded more like a Jimi Hendrix rip-off. It’s kinda cool. When they’d finished, the jam session started. Unfortunately the first musicians were placed just next to where we were sitting. Oh no. I decide to order plenty of drinks in advance. Meanwhile tables are cleared and there was this buzzy atmosphere of people walking back and fourth to the toilet, some leaving, some coming while the band is setting up.

I notice the carefulness of the German drummer while setting up his drums. He slowly adjusted every screw on each drum while slowly hitting it with the drum stick. Hitting the drum from the centre of it and all the way to the side. After that he sat down and started to move the different drums around, constantly aware of each one’s position to one another. He then started to test the sound again with his eyes closed. He adjusted the screws again. Then he moved his chair around so that he he was sitting in a very exact position in relation to the drum kit. He then polished the surfaces of the drums too.

It was all too much for me. It was taking too long and I was seriously considering if he had some kind of neurotic disease. All of my ordered beers have soon been drunk. After half an hour of moving the big drum a few centimetres one way and a few centimetres the other, he finally rolled up the sleeves of his shirt and drank a little water. Now he was ready. A speaker introduced the band and I noticed that they mentioned the name of the drummer first – Christian Lillinger. He smiled to the audience as if now was the first time he noticed they were there. He is young.

The band kicks off. After hearing a few minutes of the music I slowly started to realise the importance of the drummer’s thorough set-up. After hearing the first solo, I truly get it. I’ve never heard or seen anything this amazing. His arms are moving so quick it’s unbelievable, the drumming sticks hits three times as quick as the main bass in a goa techno tune and he’s constantly changing pace and rhythm too. And the reason why he can actually physically manage this? He is drumming with his eyes completely closed and his head almost laid down on his left shoulder. He looks like he is in a trance or having an epileptic attack. He is seriously playing better than anyone I’ve ever heard before.

After studying his technique for a while I could see that for each hit he makes he is aware of where the stick hits the specific drum (it makes a different sound when you hit the centre rather than a side), how hard it hits, where on the stick he hits, the speed he hits it and he kind of has different ways of finalising the hit. He sometimes just lets the stick pause on the drum surface for a few seconds.

As well as that he still manages to sit and adjust the screws again, while playing, so that the sound becomes just right a few beats away. He also has different sets of sticks he can choose from depending on the sound he wants to create too. But the speed and variety in which he controls all of these things is the truly amazing part. I now understand the preparation required to create a piece of music that seems impossible.

He showed what extreme perfection can mean when creating something and how much this adds to the result. He showed a difference level of doing things and what it really means to be more than just good at something. His preparations give an insight into what it takes to reach that level.
He is truly amazing. After a little research I found out that he is 23. After that night I am now hooked on jazz clubs. The only thing is – after that performance I will probably be disappointed from now on.

Check him out:

A drum solo (he does longer beats and off beat drumming, and yes sometimes the musicians he plays with just leave)

His personal MySpace

His band

Yesterday Casper and I attended a Poets and Plumbers seminar about “Working with blogging and social media” held at Vanløse Bio, – an excellent choice of venue. For some reason people tend to enter a relaxed mode when stepping into cinemas.

Hans Henrik Heming from Wemind gave an inspiring talk on what the opened gates to new media means for old-fashioned minds. He admitted that it’s not always easy to use and make sense of the broad array of social media offerings and in his effort to guide the audience of 70 people he pointed to the importance of building relations; to your friends’ friends at Facebook, to the commenting visitor at Flickr, or the relation to the people interested in seeing what you listen to on last.fm. Four trends were emphasised as arguments for using the new tools: The increase of complexity, globalisation, the arrival of co-creation and the acceptance of open-source. Other keywords in Hans Henrik’s presentation were generosity and trust; being willing to share with the rest of the world and trusting that the world will handle your content carefully.

The second and final speaker, Dave Katz from Media Contacts, was concerned with the advertising aspects of social networking, which he defined as “participation, engagement and non-linear/user-generated content”. He showed examples of marketing on Facebook, praised the new Radiohead single campaign and showed examples of how Thomson had boosted their presence by turning to the social networking opportunities. He rounded off his presentation with a common notion of branding: “Do not try to be something that you are not” and “be genuine”. Advice that is rather universal both within and outside of the business community.

Thanks to Poets and Plumbers for a well-structured and nicely executed seminar.

Disclaimer: Poets and Plumbers A/S are clients of Spoiled Milk ApS.

Along with the new temporary website and in the future, new identity – we felt it was time to freshen up our logotype as well.

Let’s take a look at the old logo first.

Now, let’s look at the changes that we felt were needed to make the logotype 110% awesome!

Make everything aligned and add correct spacing.
This of course is a must, if you’re serious about your type.

Once we had a pleasing well aligned logo, we started to play with some of the minor elements.

L’s, I’s – anything tall!
First off, we decided to freshen up the longer vertical bars on the ‘L’, ‘I’, ‘K’. These got a sharp left and a rounded right top. We also changed the shape of the dot on the ‘I’.

Mmmmmmmmmmilk
This one almost drove Jakob crazy, but we feel we got it right in the end. Just a bit of remodelling to fit in with the rest of the logo’s organic flow.

And there we have it; a new and revised look for the brand.