Blur This! (or Demonstrating MobileSafari’s Awesome Support for CSS3 Filter Effects)

The (iOS native) Yahoo! weather app displays a nice flickr photo of each weather location, and a minimalist information architecture: the most important data you need is immediately visible while it’s just a single tap to drill down into more detailed data.

Rather than cover the photo with some modal UI showing a bland list of statistics, the app keeps you in context after you tap. The detailed information is easily revealed and because the photo remains in the background the interaction is intuitive. It takes nothing more than a second tap to return to your previous context:

I’m very excited to present an example of how we can achieve the same visual effect with CSS3 (and just a little Javascript).

Advertisement

Using CSS3 Transitions to Animate the (Yahoo Weather App’s) Rising Sun

The Yahoo! Weather app for iOS is a triumph of form meeting function. One of its fun visual tricks is how the sunrise and sunset times are presented:

Although the Yahoo! app is a native iOS app, MobileSafari’s CSS3 support seems powerful enough that I thought it would be fun to try re-implementing this small feature using only web technology.

The skeleton app

First, let’s get the HTML structure in place.

A quick Sublime hack for faster Sass/CSS editor productivity

tl;dr: I made a Sublime plugin to show the corresponding CSS selector in the status bar when your cursor is next to a closing brace. Here’s why.

Staying in flow is one of the hardest and most important things you can do as a programmer. It’s why the smallest optimizations to your environment and workflow really matter. Whenever I’m not in flow, I think about how to get (and stay) in flow, a lot.

When Hakim el Hattab recently tweeted a cool idea for a Sublime plugin, it got my mind racing:

Get productive: hacking Sublime Text 2 for faster rails/project navigation

Programmer productivity stems from the ability to easily and efficiently navigate, create and edit the code you need to work with. To this end, it’s incredibly important to pay attention to the efficiency of your own daily workflow. If you’re regularly repeating tedious tasks that have multiple steps, it’s important to take some time out to automate these issues.

Using the Chrome Inspector to edit your site’s Dark Matter

And by Dark Matter I mean “content that only gets styled by pseudo-selectors”. 🙂

When you’re rebuilding, re-designing or even tweaking a website, it’s often quite painful to restyle the items on a page that are hidden by default. Navigation panels, menus, etc., are often hidden until you mouse over them or click a drop-down, which means it can be very fiddly (and often impossible) to use Firebug or the Web Inspector to interactively edit their CSS while they’re hovered over.

The Google Chrome developers obviously realized this, and built a feature to help you temporarily lock the state of certain elements.

How to make Chrome understand the Sass/SCSS in your rails app

When you open the Chrome web inspector, you can browse to the styles that are being applied to your elements. It’s great.

Unfortunately, if you’re using a framework like LESS or Sass, then by default Chrome will reference the CSS files that those frameworks generate, even if you’ve never seen them before. If you pay attention to these references in the Web Inspector, it can be meaningless at best and outright misleading at worst.

Enter Google Chrome’s native Sass support. This has been available in Canary and Beta channels for a while, but it’s now firmly available in the stable Chrome releases. All you have to do is turn on a few flags and tweak your rails app to make it work. Here’s how.

Next stop San Francisco

In just a few days I’m moving to San Francisco! I’m insanely excited, both about moving to the city and that next month I’ll officially become an employee of Rapportive, Inc.

If you’ve never heard of Rapportive, you should check it out – it enhances Gmail with photos of the people who email you as well as adding features to help you follow, friend or connect with your contacts on Twitter, Facebook, LinkedIn and more. And you can do all that without even leaving Gmail; it’s seriously awesome.

Looking back, I’ve lived in Cambridge for just over 10 years now, almost to the month. I’m going to miss the place plenty, but mostly I’m going to miss all the amazing friends I’ve made. Hopefully Facebook & Twitter will help make everyone feel a little less far away.

If you’ve never been to San Francisco, I hope you’ll come visit–it’s a gorgeous city.

See you at christmas!

Fixing a Sequel Pro compilation error

I tried to download and build the source code for Sequel Pro today and ran into a hitch. After following the instructions for grabbing the source code and trying to compile it, X-Code refused to succesfully build the app, instead opting for this error:

If you click the icon on the far right to expand the problem, at the bottom is the relevant error message:

Failure Reason: Could not determine the location of the plug-in with the identifier net.wafflesoftware.ShortcutRecorder.IB.Leopard

Thankfully this is more specific than the previous ‘Unable to resolve plug-in dependency for “BundleEditor.xib”‘ error. To fix it we need to download, build and install an Interface Builder plugin called shortcutrecorder. Get the source code with this command:

svn checkout http://shortcutrecorder.googlecode.com/svn/trunk/ shortcutrecorder-read-only

Once you have the code, open its project file in X-Code, and before you click ‘Build’, make sure you set the active target to “ShortcutRecorder.ibplugin – standalone” as per the screenshot below:

Then build the project. Once successful, navigate to the shortcutrecorder’s project directory in Finder, open the build/Debug folder, and double-click ShortcutRecorder.ibplugin. It will open silently in Interface Builder.

Now go back into X-Code, close the shortcutrecorder project, and Clean All Targets in the Sequel Pro project. Once done, click ‘Build and Run’ and you should see a fresh copy of Sequel Pro running in your dock.

Happy hacking!

Using facebook connect (only) to authorize users with authlogic

I’ve been working on our semi-stealthy new webapp for the last couple of months and I’ve been putting off fixing a bug for ages because it was so damned weird.

We want users to be able to sign-up with facebook connect, and not have to mess about creating a new account and setting Yet Another Password. So I grabbed authlogic and got the facebook connect plugin for it and got to work.

Everything was fine and dandy using facebook connect to authorize a bunch of existing users I had in my database, but as soon as it came to signing up new users, ruby would suddenly hit an infinite loop that would bring rails and my laptop to its knees.

I could see from the logs that it was some kind of validation failure:

SELECT * FROM `users` WHERE (`users`.`id` = '498') LIMIT 1
CACHE (0.0ms) SELECT * FROM `users` WHERE (`users`.`facebook_uid` = 1469530132) LIMIT 1
CACHE (0.0ms) SELECT `users`.id FROM `users` WHERE (`users`.`persistence_token` = BINARY '42baaa5f7ae2a550147ac0d88ffa72928ebc75d5ce23d5d65b3c87e972e9d848cf7ad5afb1bf532e2c2780a52f8a9c2bbeee43fce89d8cbbab69eddee10a0d4b' AND `users`.id <> 498) LIMIT 1
CACHE (0.0ms) SELECT * FROM `users` WHERE (`users`.`id` = '498') LIMIT 1
CACHE (0.0ms) SELECT * FROM `users` WHERE (`users`.`facebook_uid` = 1469530132) LIMIT 1
CACHE (0.0ms) SELECT `users`.id FROM `users` WHERE (`users`.`persistence_token` = BINARY '42baaa5f7ae2a550147ac0d88ffa72928ebc75d5ce23d5d65b3c87e972e9d848cf7ad5afb1bf532e2c2780a52f8a9c2bbeee43fce89d8cbbab69eddee10a0d4b' AND `users`.id <> 498) LIMIT 1

... etc ...

After lots of research and hair-pulling I managed to find a jewel of hint; ticket 68 in authlogic’s bug tracker. In your User model, add a before_connect method, (a hook provided by the authlogic/facebook plugin). It needs to tell authlogic that you need a new persistence token.

    def before_connect(facebook_session)
        logger.info("HEY FACEBOOK, HOW'S IT GOING? SO LOVELY TO SEE: #{facebook_session.user.name}")

        # Authlogic isn't as magic as we thought: tell it we need a persistence token, based on advice
        # in http://github.com/binarylogic/authlogic/issuesearch?state=closed&q=persistence#issue/68
        self.persistence_token = reset_persistence_token
    end

With the above in place, new users can register as quickly and easily as clicking facebook’s “Connect” button. Without the above, authlogic is left infinitely searching for a persistence token that hasn’t been, well, persisted.

Note: there’s nothing that says you must have a persistence token when using authlogic, and an alternative workaround is probably to configure your authlogic subsystem to use a different token scheme. However, the persistence token is a common web-based session model and we didn’t want to dump it.

Why Spotify Premium is too expensive, and how to fix it

I recently became a Spotify Premium customer, for two main reasons:

1. I’d spent an afternoon listening to spotify at my desk and wanted to carry on listening to the same playlists on my iPhone while I was walking somewhere.
2. As a technology guy I was curious if it was any good

So I forked out my £9.99 to give it a go for a month. Aside from the fact I had to use their website (rather than just tap an in-app “buy now” button on the iPhone), the sign-up experience was simple and easy.

The iPhone app is really good; it suffers from the same problem that all non-Apple music apps have on the iPhone, (namely that the music terminates if you leave the app to reply to an SMS or check your email). It’s not perfect, but it’s a really solid 1.0 release. Playing music over 3G appears to Just Work.

However, I won’t be renewing my subscription for a 2nd month because it’s just too expensive.

Don’t get me wrong, I expect Spotify Premium to be expensive: it offers up a huge proportion of the world’s commercial music for your listening pleasure on a ton of desktop and mobile platforms, ad-free with features like playlist management, integrated art work, artist and album browsing and search and plenty more.

But the kiss of death is that if I pay for Spotify every month for several years and then stop, I leave with NOTHING.

That’s just not a sensible investment in anybody’s book. £9.99 can buy me 2 or 3 albums per month if I’m a real bargain-hunter. By quitting Spotify after 2 years, (£240) I’ll be down by 80 albums.

Crazy.

How to help consumers justify Spotify Premium

If I pay for Premium for more than a month or two, that should tell Spotify that I’m basically a music lover, and every such user should be rewarded as such.

Why not create a system that allows me to accrue album credits for every continuous month I’m a paying customer? This both encourages loyalty to the subscription system as well as reinforcing a strong sense of value for money.

As a bare minimum, I should earn the ability to keep 1 or 2 albums per month at the end of my subscription.

If Spotify really want to be disruptive then I’ll get to accrue at least 5 albums worth of credits for every month I’m a subscriber (after some initial intro period of about 3 months).

For spotify, the infrastructure costs are practically identical – users get to download a tiny percentage of the tracks that they listen to, (which is already a premium feature to enable ‘offline listening’). The biggest issue is that of licensing – would the record labels be willing to allow a purchase-model of music to be integrated into the subscription streaming-model they’re currently charging for.

For consumers, it would mean Spotify Premium was no longer a frivolous throwaway cost, and could be looked at as a long term music investment that would likely involve even bigger spending on music because of Spotify’s enormous streamable catalogue.

That would at least start to give Mr iTunes and his music monopoly something to worry about.