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. Continue reading

Posted in CSS | Leave a comment

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: Continue reading

Posted in Tools | Leave a comment

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. Continue reading

Posted in Rails, Tools | 3 Comments

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. Continue reading

Posted in Chrome, Tools | Leave a comment

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. Continue reading

Posted in Chrome, Rails, Tools | 30 Comments

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!

Posted in General | 3 Comments

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!

Posted in Uncategorized | 1 Comment