A Better Toolchain for Everyone Building Pixel-Perfect Designs

Posted on June 17, 2013 by

When building outstanding consumer products, a mix of design and development is always required. Maybe you’re a designer that also codes, or maybe you’re a developer implementing a designer’s pixel mock-ups. Either way, you’re going to be working hard if you want to ensure the final implementation perfectly reflects the design, pixel for pixel.

Getting a design implemented to a world-class standard takes hundreds of tiny iterations and persistently sweating the details. To do your best work, you need great tools to help you. What follows below is a list of tools I frequently return to when I’m building a great UI, either for the web, or for mobile apps: without them I might have gone insane long before a project was finished. Continue reading →

Posted in Tools | Leave a comment

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

Posted on June 3, 2013 by

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:

Tap to blur/move/reveal

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

Posted in CSS, HOW-TOs | 2 Comments

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

Posted on May 20, 2013 by

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 | 2 Comments

A quick Sublime hack for faster Sass/CSS editor productivity

Posted on May 6, 2013 by

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 CSS, Tools | 1 Comment

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

Posted on April 22, 2013 by

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

Posted on April 8, 2013 by

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, CSS, Tools | Leave a comment

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

Posted on March 25, 2013 by

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, CSS, Rails, Tools | 36 Comments