“Sorry, I have to catch my train“  – I have two young kids, and I’m the one responsible for picking them up from the sitter. Being curcumscribed by their schedule is the best incentive for me to stay on task. This article about making time for dinner resonates with me: Those little mouths to feed are enough to keep me focused all day, so I can get out of the office with precisely 8 minutes to make it home in time to make dinner and meet 6 pm bedtimes.   -Erin

Chromodoro is a free, super lightweight and configurable chrome-browser-based pomodoro timer. I use the pomodoro system as the basic structure of my work days, and I use this app all day every day. I always have chrome open anyway, and this app stays out of the way but keeps my time usage in check.-Matt

Simply Noise is  running on my machine for at least 4 hours a day.  Brown noise, half volume, oscillating is my configuration of choice, and it keeps me tranquil and focused. -Ethan

noBackend lets front-end developers concentrate on their work without thinking about the server-side of the system.  While it won’t replace backend teams, it’s interesting to think of having them focussed on truly application-specific backend problems. It seems like you could get MVPs up even faster and cheaper. Definitely something to keep an eye on. The lesson for this week’s theme?  ”Focus on the parts of the app that really matter.” -Trey

I’ve usually got music playing, and for extreme focus I make it instrumental, so my brain isn’t following along with the words.  Ravi Shankar and Miles Davis are two standbys.  -Clay

The Focus Manifesto - From the writer of zen habits, this quick read is great to refer back to when you’re feeling overwhelmed by the never-ending stream of modern life’s distractions. I read it in one sitting, which is unprecedented for my very distracted self. The PDF version is free. -Dave

Nutrition facts - So maybe it’s not directly about focus, but has a big impact. Nutrition! -Cody

Everyone arrived at the cabin on Monday night, and there was carousing and lasagna. On Tuesday morning at 9 am, we convened, broke the news that the teams wouldn’t be building their own products, and let them loose. Because the teams were now working on unfamiliar concepts, they had to take a few hours to meet with their “clients” and get to know the requirements before diving in. They then spent the next two and a half days finishing their products (well, between 9 and 5. After 5, we caroused some more.) We pulled the plug at 4:30 pm on Thursday. Here’s a glimpse of what the Spokes can do in such a short span of time. (I know, you’d like to see the apps in action, but none is on a public server—yet. We’ll keep you posted on that.)

Chronicle

What it is: a time tracker for iPhone. A very opinionated time tracker.

Client team: Adam, Colleen and Matt

Development team: Ethan, Erik and Clay

The clients’ goals: “Chronicle describes your workday. It uses a simple timer to track your activity throughout the day. At the end of every day it emails you a beautiful report of your daily activity.”

Khaos

What it is: an addictive, crazy strategy game with numbers and projectiles.

Client team: Ethan, Erik and Clay

Development team: Dave, Drew, Chris and Cody

The clients’ goals: The interface should be simple; the game surface is a rectangle full of circles.  Half the circles are red, half the circles are blue, each with an integer inside. The goal is to convert all circles on the game board to your team’s color. Our goal will be to have a playable prototype.”

RuckusMail

What it is: an application that allows for team-wide collaboration on an email

Client team: Dave, Drew, Chris and Cody

Development team: Adam, Colleen and Matt

The clients’ goals: For our weekly update emails to clients, “We want a better collaboration tool than Github for writing updates, but we still love being able to write our updates with Markdown (because it means less time WYSIWYGing and more time typing). We also want our branding and tone to be consistent.”

What we learned: In a focussed environment with a sharp group of developers and designers, you can build a compelling Minimum Viable Product (MVP) in three days. We are now exploring how to offer the same results to our customers. Stay tuned! Have a time-sensitive MVP? Let’s talk!

Airmail Being a fan of Sparrow, I was pretty bummed when Google bought it and shut it down. Airmail feels like Sparrow, but it’s still being actively developed. Version 1.0 will set you back $2 on the Mac App Store. — Jeff

localtunnel A free service to expose a localhost port online. Install the gem, give it a port number, and it spits out a temporary URL that others can use to access a local instance of your app. This is great for sharing sites temporarily without having to deploy to a web server. For a paid alternative with SSL support and configurable subdomains, take a look at Forward. — Erik

Beyond Squishy: The Principles of Adaptive Design Brad Frost blowing minds. Here he pulls in all sorts of responsive/adaptive techniques and concepts that have been creeping into our collective consciousness over the last few years and spits out an exciting vision for the future. — Clay

First reading about the mobile-first approach in 2011 was a real “ah-ha!” moment for me. Sure, mobile-first was — and still is — tricky, but the payoff is huge in terms of performance: The classic example is a big ol’ full-page background image. Using a mobile-first approach, you’d probably make the call that someone using their smartphone while standing in line at the grocery store on a 3G connection isn’t going to want to wait 5 or more seconds for a site background to load. So you’d wrap that 200KB sucker in a min-width media query, and voila, now it only loads for devices with tablet-size screens.

@media only screen and (min-width: 700px) {
 
  body { background: url("/path/to/really/big/image.jpg") no-repeat center center; }
 
}

So mobile-first is a really wonderful thing and doubtless the best way to approach responsive design. However, there’s a party pooper at every celebration, and as is so often the case in front-end development, the buzzkill here is old versions of Internet Explorer. Our old foes IE8 and below don’t recognize media queries, and will only process styles that aren’t enclosed in media queries. So when you code out your shiny new site or app using mobile-first, (the admittedly quickly diminishing number of) users of these browsers are left them with a less-than-ideal smartphone layout.

You can solve this problem in one of two ways: introduce a polyfill dependency like respond.js that makes old versions of IE understand media queries, or write additional CSS to serve up a static, fixed-width layout for IE8 and below.

Now that a) 12 Spokes now longer officially supports IE7, and b) IE8 is being firmly sunsetted by Microsoft, I’m opting for the simplicity of the latter approach — and as with all things, it seems, SASS offers us an almost effortless way to provide old versions of IE with a fixed-width layout.

Step 1: Add a conditional class to detect old IE

The first thing to do is add a conditional class to your page that is only triggered when the browser is IE8 or below. (If you use HTML5 Boilerplate, this is already done for you — however, the class names vary depending on what version of Boilerplate you use.) In the simplified example below, if the browser is Internet Explorer and the version is lower than IE9, then the class “.oldie” gets appended to the html tag. Otherwise, the html tag is just left as-is.

<!--[if lt IE 9]> <html class="oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

Step 2: SASS to the rescue

The first mixin below (breakpoint) is basically Chris Coyier’s Naming Media Queries mixin. It simply sets up easy-to-use variables for each screen width.

The second mixin (breakpoint-ie), however, is where things get interesting: It runs the “breakpoint” mixin to output the usual media-query-specific CSS, but ALSO outputs the exact same CSS under the “.oldie” class, so IE8 and below can see it.

@mixin breakpoint($breakpoint) {
 
  @if $breakpoint == mini-tablet {
    @media only screen and (min-width: 480px) { @content; }
  }
 
  @else if $breakpoint == tablet {
    @media only screen and (min-width: 768px) { @content; }
  }
 
  @else if $breakpoint == desktop {
    @media only screen and (min-width: 960px) { @content; }    
  }
 
}
 
/// "breakpoint-ie" mixin
@mixin breakpoint-ie($breakpoint) {
 
  @include breakpoint($breakpoint) { @content; }
  .oldie & { @content; }
 
}

Uh, how would I use this?

Say, for example, that you decide that at the “tablet” breakpoint, you want your main navigation to be floated to the right. You want your static old-IE layout to reflect this change, so instead of using the usual “breakpoint” mixin, you bust out:

nav.main-nav {
  @include breakpoint-ie(tablet) { float: right; }    
}

This SCSS outputs the following CSS:

@media only screen and (min-width: 768px) {
  nav.main-nav { float: right; }  
}
 
.oldie nav.main-nav { float: right; }

And that’s it! Anything layout-wise you want old IE to know about, you simply use the “breakpoint-ie” mixin, instead of the “breakpoint” one. SASS will do the rest for you.

Of course, I still recommend testing thoroughly — and you will no doubt still end up making the inevitable old-IE-specific tweak here and there. Overall, however, I’ve found that this mixin saves me a huge amount of time when I’m developing mobile-first. And hopefully in a couple of years, we won’t need it at all anymore.

git difftool master..

Kaleidoscope pops open with a beautiful, easy-to-read diff of the master branch and the current feature branch. I’ve been using this trick to quickly look over all of my changes before issuing a pull request. — Jeff

You can wait for the barrage of “What’s New in Rails 4” blog posts, or you can spend half an hour reading the Rails 4 CHANGELOGs for  ActionMailer, ActionPack, ActiveModel, ActiveRecord, ActiveSupport, and Railties. — Adam

Animation in the 1930s This is a fascinating look into animation studios in the 30s/40s and the process it took to create an animated cartoon. — Colleen

Serious Jibber Jabber is an interview series by Conan O’Brian. In this 1 hour and 20 minute video Conan discusses the Simpsons with other former and current Simpsons writers. As someone who grew up watching the Simpsons pretty much every day, this is a fun video to watch. — Drew

I love my 3-year-old and my constantly puking or feuding cats. Well, one cat anyway. The other one I tolerate because I love my wife. But anyway, when it comes down to it, if too many of the aforementioned family members and I are together in our little house, it’s really hard to get any work done. So I often work at a co-working place here in Portland, Maine, called ThinkTank. The place is full of other designers and developers, which is great because we can talk shop and occasionally help each other with problems we’re having.

I was helping a developer here troubleshoot the CSS for a sticky navbar this morning for a project management app he’s working on. He got the menu working perfectly in the end, and the app’s design looks really slick. Except for the buttons. There they were: That ubiquitous royal blue. The classic “danger” red. The weird way the buttons go darker on hover. Another set of default Bootstrap buttons sitting in a repo, waiting to be unleashed on the internet. And for good reason: Bootstrap is an amazing resource if design and front-end development is not your primary skill set. Other than the hover states (totally my own subjective opinion), the framework’s set of buttons is a joy to behold: easy on the eyes and with a really thoughtfully created set of button classes (except for .btn-inverse – has anyone ever used this one??).

“So you’re going to customize these buttons so they match the design, right?”, I asked the developer. “Uh.. yeah, I think I am?”, he replied uncertainly. But I could hear it in his voice: These buttons were going out into the world stock. And that’s cool. I get it: Overwriting 7 button classes, each with their own hover and active states (not to mention some extra CSS for the drop down menu stuff), is a LOT of work. And it’s not easy work either: CSS gradient syntax is a bear for the uninitiated – and even though they’re on the way out now, you’ve got to account for all the vendor prefixes because Bootstrap uses them. If I were a developer, I’d skip the buttons, too.

At 12 Spokes, we use Bootstrap for a number of projects, and we go to great lengths to make sure the final design looks nothing like the Bootstrap defaults. We do this by starting with the Bootstrap source (in our case, bootstrap-sass) and customizing almost all the color, font and layout variables to match the project’s design comp. I would guess, however, that most people (me included, when I got started) simply download Bootstrap’s compiled CSS and JS, throw them into a project, and overwrite when necessary (or sigh, accept, and move on, in the case of the buttons).

For these “vanilla” Bootstrap users, who might want an easy way to customize the color scheme of Bootstrap’s button set, I present bootstrap-buttons.sass.

Simply open the SASS file (you don’t need to know SASS – just how to compile it), enter new values for the seven color variables at the top of the file, and then include the compiled CSS below the Bootstrap style sheet.

Voila! A new set of button colors without a whole lot of work. I’m going to forward this to my developer friend here at ThinkTank, and I hope you find it useful, too.

View demo and download

PS – And hey, don’t feel like you have to stop with the button colors: play around with the button-creator mixin to change other aspects of the buttons’ appearance and make ‘em even less Bootstrap-y looking.

Egghead.io John Lindquist’s screencasts have really helped me get up to speed on AngularJS. Well recommended. — Erik

Patterns If you’ve ever wanted a quick way to test a regular expression on a set of sample data, look no further than Patterns. Available on the Mac App Store, Patterns supports a number of regex engines, including Ruby. — Jeff

A Lovely Tale of a Tea Farming Couple in Sri Lanka Perfect pick-me-up for a rainy morning. I love that today’s technology gives us the ability to share such heart-felt, charming stories from around the world. — Colleen

For a Good Strftime I can never remember most of the ruby format directives. For a Good Strftime provides a convenient drag-and-drop interface for building custom date/time formats, which I find myself doing far more often that I’d like. — Matt

What the Secret Contents of Frida Kahlo’s Wardrobe Say After Frida Kahlo died in 1954, Diego Rivera locked up her clothes with instructions for them not to be revealed for decades. Now they are on display in a Mexico City museum. As you’d expect, they are more than just clothes—Kahlo carefully selected them for the message they conveyed. — Erin

Rails’ Insecure Defaults Bryan Helmkamp (@brynary) provides a simple guide to Rails’ Insecure Defaults with plenty of explanation and insight into forthcoming fixes and best practices to help limit your app’s exposure. — Adam

Skycons: Unobtrustive Animated Weather Icons Built by the Dark Sky team for use on Forecast.io, these icons represent an excellent use of the HTML5 canvas element, and the thought that went into the user experience they provide is pretty admirable, too. — Jeff

Nathan for You – It is quite possibly the best show in the world right now. - Dave

pv – The pv gem makes Pivotal Tracker feel like git (in a good way). View your assigned stories from the command line, start/finish/accept/reject them, or use the open command to open a story in your browser. - Jeff

Designing for Humans – There are so many great, subtle aspects to interaction design that I think normally get overlooked that this article brings to light. I especially dug the MailChimp Voice & Tone link since that conversation has come up frequently on both inner-company projects and client projects trying to establish what type of personality the application should exhibit. Great read. - Colleen

Lindy West’s Coverage of Adria Richards and PyCon – I love that we have a culture that makes the need for policies about stuff like this moot. I wish the larger communities could say the same. We need to work on not writing policies for conferences, but shaping the culture, admittedly a much harder task, but also a more effective one. - Trey

Jasmine Tactics – An in-depth screencast by Justin Searls (@searls) detailing the transition of a JavaScript codebase from untested jQuery spaghetti into tested, class-based JavaScript. - Adam