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