As a programmer I love the change that made it into version 1.3.6 (10f978d) of bourbon: Phil LaPier (plapier) added to work done by Frank (frankzilla) to add a monospaced font family, $monospace—with support for Bitstream Vera Sans Mono, my favorite monospace typeface (3467fe3 and c86e5687). Nice.
Friday saw a new release of paperclip (1cb40e3), in accordance with the prophecy. It contains Windows support, a bug fix, and two new features.
Prem Sichanugrist (sikachu) has been working on handling characters that are not URL-safe; to this end he added a :restricted_characters option to has_attached_file, with a default value of &$+,\/:;=?@<>\[\]\{\}\|\\\^~%# , which specifies characters to replace with an underscore, _ (8353518 and 604304e). Benjamin Hüttinger (maxigs) added the ability to pass a block, evaluated at runtime, for :fog_host, :bucket_name, and :fog_credential options (e049ec5, 2b562a9, 8742615, and 1c88a72).
The gem itself had problems installing on Windows because a bundled test made sure that filenames with question marks were handled fine; turns out this simply breaks on Windows. Even though no actual programmers use Windows, we removed the offending file (ed5cd9f). Jon Yurek (jyurek) fixed a long-standing bug where the RSpec matchers (validate_attachment_content_type, validate_attachment_presence, and validate_attachment_size) didn’t handle the :if argument they were supposed to handle (5d4ba62).
A new release of capybara-webkit is in the works, and this is what you’ll see in it: Matthew Mongeau (halogenandtoast) added the ability to trigger mousedown and mouseup events (51c4dfe and 16c1637) while Joe Ferris (jferris) has commands block until the page finishes loading (18607d0).
Oh sweet, a new version of clearance is out (6c0c070)! In it you’ll find support for Rails 3.2 from Gabe Berke-Williams (gabebw), mostly in following deprecation warnings (6e57d10). Some prodding from Matthew Daubert (MDaubs) prompted us to upgrade cucumber-rails to 1.1.1 (691e867 and 91f4675). Dan Hodge (danhodge) dropped a totally awesome change on us, abstracting out the User class into Clearance.configuration.user_model, which can be changed at runtime (085a9b6, a582eec, and fc6af70). Dude, that’s awesome.
Holy cow it’s version 0.2.0 of fake_braintree (0be2aea). In this Gabe Berke-Williams (gabebw) gave us the ability to specify a constant amount for a transaction (783719c), and mimics the behavior around customers with failing credit cards (a2ceb58).
No big news in factory_girl this week. Carlos Antonio da Silva (carlosantoniodasilva) updated the docs to mention that .stub is now .build_stubbed (08018f6). Michael Klishin (michaelklishin) fixed the build on Travis CI for Rails 3.2 by updating rubygems first (850116d). Joshua Clayton (joshuaclayton) found a spec that was not appropriately named, and fixed it (0d67a42).
While kumade did not see a deploy this week, it did see some feature improvements, some of which come with an API change.
The hook for running code just before deployment was originally run_predeploy_task but is now run_pre_deploy_task (764aebe). Chad Boyd (hoverlover) made this change so he could introduce the run_post_deploy_task, which is further exposed as kumade:post_deploy to Rake (da74087, f68a487, and 9679018).
Kumade now works with more stuff: Jammit 0.6.5 (ec63310) thanks to Vesa Vänskä (vesan), and Ruby 1.9.3 (8e73b90) thanks to Gabe Berke-Williams (gabebw).
Gabe also fiddled with some source code (7e0e11e, bb695b9 and 92aa8f4).
A small documentation update occured in copycopter_client by Joe Ferris (jferris), reminding us that you can leave the name of the controller or model off of the translation key only when using t from a view (6416897).
I’m really happy to see a resurgence in an understanding that writing integration tests that use classes and DOM structure to perform assertions within these tests is typically a bad idea. The DOM structure constantly changes but the data displayed (the stuff we want to assert is present on a page) typically doesn’t.
Why write tests against some markup that a designer may change, sometimes often if he’s iterating over a design? It’ll end up causing everyone headaches and frustration.
How can we mark up our documents without performing assertions against a deep nesting of classes and elements while ensuring our data is displayed properly?
Data attributes.
The browsers I care about support HTML5, so why not start using some of its capabilities to clean up some integration tests?
Imagine this scenario:
Scenario: See the site description on the homepage
When I am on the homepage
Then I should see the site description
Simple, straightforward, and each step is a similar level of abstraction.
Now imagine this markup:
<section class="primary-content">
<header>
<h1>Welcome to the site!</h1>
<h2>Insert a witty tagline here</h2>
</header>
<p class="description">This product will make your life 100 times
better.</p>
</section>
I could write a step like this:
Then "I should see the site description" do
page.should have_selector("section.primary-content p.description",
text: "This product will make your life 100 times better.")
end
This step is asserting that there’s a section element with a class of primary-content who has a child paragraph tag with a class of description that contains the correct text. Classes change. Structure changes. This is begging to be rewritten.
<section data-role="primary-content">
<header>
<h1>Welcome to the site!</h1>
<h2>Insert a witty tagline here</h2>
</header>
<p data-role="description">This product will make your life 100 times better.</p>
</section>
Then "I should see the site description" do
page.should have_selector("[data-role='primary-content'] [data-role='description']",
text: "This product will make your life 100 times better.")
end
Now, the step is asserting that there’s an element with a role of description within an element with a role of primary-content that contains the correct text.
XHTML introduced a role attribute, but it’s not present currently in HTML5.
Luckily, data attributes are even more flexible and we can use any conventions
we like. data-role and data-state are two of my favorites.
Interested in how to write awesome Cucumber steps? Head to my Intro to Test-Driven Rails workshop on March 26th and March 27th where we’ll cover this and other awesome topics on writing great tests!
Over the past week bourbon went up to version 1.3.5. A whole bunch of sweet new features are in it now:
Frank (frankzilla) added a modular-scale mixin, of which the golden-ratio mixin is but one implementation (126a83b and 96659a2). He also added a parameterized fallback color to linear-gradient (60e2c63).
Phil LaPier (plapier) worked with Gabe Berke-Williams (gabebw) on a bourbon command-line too for working with Sass outside of a Rails app, such as Jekyll, WordPress, or even a static site (ad1499b, b55a763, 0ebf906, c2077d8, 13e70d3, 2fc2c90, and bf34e70). You can run bourbon install to install it and bourbon update to update an existing installation.
A careful sleuth has updated the documentation for capybara-webkit this week. Marc Schwieterman (marcisme) discovered that a fully passing test suite depends on ImageMagick, and documented as much in the contributions guide (df39268).
Version 2.5.0 of factory_girl is out, and there’s a badass new feature in it. But first:
Joshua Clayton (joshuaclayton) fixed a bug where the :parent’s factory wasn’t being passed along (4aecfff). Carlos Antonio da Silva (carlosantoniodasilva) fixed the URLs in the readme to point to correct locations (aa74edd and 42f5a10).
Oh, and you may remember from last week that Josh deprecated the attributes_for method admist much controversy. Well, he undid that (2d6adfd).
Josh then implemented a feature that Joe Ferris (jferris), FactoryGirl’s originator, has wanted for years: you can specify how FactoryGirl should construct the class (5780364). Joe excitedly documented this (ea89aad). This means that FactoryGirl can be used for non-ActiveRecord classes, including immutable classes.
In accordance to our new gem schedule, paperclip hit 2.5.1 this week. Mike Burns (mike-burns) cut the release, adding a ChangeLog and updating the NEWS file (b7f9b6f and ec4793e). In short: Fog storage is passed the content type, S3 can be encrypted, and ActiveRecord is optional.
In addition to the basic development environment everyone at thoughtbot works with, there are a number of other apps most of the designers here use to keep our work flows efficient and our skills top notch. When I came to thoughtbot as an apprentice a little over three months ago, I was exposed to a variety of new apps that greatly improved my work-flow, so I thought I would share with you some of the apps I open up every morning and a bit on how I use them.
These apps are not necessarily design-specific apps but they are so essential in our day to day work-flows that I couldn’t leave them out.
If you work on the web I am sure you are already familiar with the typical Adobe software that web designers use, so Im not going to get into the details of our Adobe setups here. Most of us prefer to do hand sketches/whiteboarding and move into wire framing with HTML and CSS as soon as possible any way. Static mock-ups tend to have a host of draw backs when working in an agile development process. That said, photoshop, illustrator and fireworks are still our workhorses when it comes to specific graphic design needs.
A handy screen capturing tool that allows you to very easily draw and add notes on top of your screen shots, without having to open up photoshop or some other image editing tool.
Collaboration and iteration are key ingredients in doing great work and I have found this app to be an effective way of sharing screen shots with team members, clients and other designers so I can get that valuable feedback on the development of my work. When you take screen shot Cloud app automatically uploads your image to web servers and in a drop-down from the Cloud app icon in the OSX menu bar, provides you with a sharable link to that image.
Good for general note taking and the keeping of VIM and Git cheat-sheets. Especially if you are new to VIM or Git keeping track of commands and remembering how to get certain things done right can be quite challenging, so we all suggest building up robust cheat-sheets with this little app.
Great typography is a fundamental element of great design. Managing your fonts effectively will help you find that perfect type-face faster and reduce the time it takes to get started with a solid visual design direction. Taking the time to organise your typefaces in a way that is meaningful to you can also be a good way of curating your collection and more intimately familiarizing your self with the fonts in it.
Both are awesome tools for building a personally curated library of design inspiration. Saving images and examples of the things that inspire you is a great way to refine and hone your own personal style and also a great way to help kick off the visual direction for a new project. If you are not using tools like these already, start. It will be hugely beneficial to the quality of work you do.
A great little app for grabbing colors from anywhere on your screen. It provides rgb, hsl, and hex values for any color you select which makes pulling color pallets from photos and images you have stashed in your Gimme Bar or Little Snapper quite nice.
Bourbon is not an app, it’s a library of SASS mixins and functions that greatly speed up front-end development time. It is just as awesome for new comers to .css/.scss as it is for the most seasoned pros. It’s also one of the main reasons the sketch-to-html&css-wire frames process has proven to be so effective and efficient for us. We have extensively written about bourbon before.
So that’s it for a light-weight overview of the apps I find my self opening on a daily basis. Hopefully I have introduced you to some new and useful tools. I’d also love to hear about some of the tools your using, so feel free to add your comments below!
We released a redesign to the Trajectory UI today. I want to explain the thinking that went into the redesign, what the benefits to users are, and what’s in store for Trajectory as we move forward.
View of the main stories index.
First, let’s do a quick history lesson. A year and a half ago, we decided to build Trajectory to scratch our own itch. We wanted a lightweight agile project management tool that had a strong focus on discussions, both for the stories being worked on, as well as for longer term planning. The original design for the Trajectory UI emerged out of an iterative process, and evolved as we learned more about the product over the course of its development.
This redesign was a chance to take stock of what’ve we learned through that process, and lay the groundwork for the future. The most obvious change is the lighter color scheme. We’d heard continual feedback that people found it difficult to quickly scan through stories because of the dark color scheme. The new UI fixes this problem and provides a more pleasant experience for extended, daily use.
Next, we designed the UI to respond better to differing screen sizes. If you have a large monitor, the site will expand to use the space available to it. Shrink your window down, and the site remains just as usable. There’s more work to be done, but the long term goal is to serve a single web-based interface to all devices, whether it’s a 27” display or your mobile device.
There are a number of other UI improvements. We’ve improved the searching and filtering of stories. (Pro tip: hit the f key to enter search mode.)
The new search interface.
It’s now easier to estimate and re-estimate stories.
The new story estimation UI.
You can also quickly see the progress on stories created from an Idea.
Progress of stories attached to an idea.
We also performed a heavy refactoring/rewriting of the front-end markup and style. We were able to eliminate and simplify substantial portions of the front-end code, which should hopefully translate to snappier performance within the browser.
Trajectory is going to be a very important part of what thoughtbot does in 2012. If you haven’t done so yet, sign up for a free trial and see what we’re so excited about.