Swap your Rails stack traces for a REPL

Posted on July 15, 2013 by

The Developer tools I really love are those that help me reduce the time that elapses between a bug occurring and a bug being fixed.

One of the more obvious types of bug is a top-level unhandled exception. The message “I’m sorry, something went wrong” is how these manifest themselves on real-world sites. But during development, most languages and web frameworks will give you something better – you’ll probably get a page with a reasonably formatted stack trace. It’ll probably have line numbers and file names in the trace entries. It might even have some contextual data, but that’s usually about it.

And that’s just not good enough.

A stack trace is a reasonable start when debugging – it’s a decent signpost towards the error in your application – but we can do much better, especially in a rails webapp. With that in mind, let’s look at two different ways to improve the default experience of unhandled exceptions in development in your rails app: Continue reading →

Posted in Rails, Tools | Leave a comment

Highly usable (but slightly crazy) CSS3 effects round-up

Posted on July 1, 2013 by

Over the last few weeks I’ve shared links to several small libraries, all of which have a coincidental theme running through them: they’re all simple ways to enhance usability by taking advantage of modern or cutting-edge browser capabilities. I wanted to elaborate on some of them here and talk about why I think they’re especially relevant to anyone building consumer-facing interfaces.

Creating iOS 7 effects with CSS3: translucency and transparency is a thorough look at how to use opacity and CSS filter effects to build the iOS control center widget, (the new panel that appears when you swipe up from the bottom of a device running iOS7). Continue reading →

Posted in CSS | Leave a comment

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 | 3 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 | 4 Comments