Close
Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

LABS
Using Hologram with Rails to Auto-Generate Styleguides

Styleguides are handy because they document conventions for projects; making communication easier across the team whether it’s between PM and dev, client and consultant, or front-endand back-end. Transitions are a little easier with declared standards already in place (pair rotation, onboarding new hires, transfer of responsibilities).

Read more »

LABS
Capybara's save_page with CSS

At Pivotal, we often use Capybara to write a suite of integration tests that navigate a browser through any scenario that can emerge in the application. We use these tests to guard against regressions and to drive out the design of the application in a red-green cycle throughout the day.

Read more »

LABS
Accessible UI Widgets using ARIA

ARIA attributes are a robust alternative to arbitrary class names when applying styles and behaviors to your markup. When you use ARIA attributes to target elements, you introduce accessibility support while standardizing your markup.

Non-standard class names

As a web developer, you may often find yourself toggling a class name with javascript to apply CSS, like so:

[gist id=6452923]

[gist id=6452738]

The Problem

This approach adds a non-standard class name, .hidden, that we rely on for our behavior.

Read more »

LABS
When Should I Build a Live Style Guide?

Over the last several projects, we have chosen to commit to the construction and maintenance of a live style guide as part of the development process. However, the reasons in each case have been varied, and I’d like to give a quick rundown of these cases with some benefits and pitfalls of each.

Read more »

LABS
Showing and hiding conditional HTML without Javascript

Have you ever filled out an address form that had a checkbox for “my shipping address differs from my mailing address”? When you click that box a conditional form part gets revealed that allows you to enter another address. We had to build something very similar the other day and stumbled on a neat way to make the conditional part show and hide with CSS only.

Read more »

LABS
Structure your SASS files with @import

For my first blog post at Pivotal, I decided to pick a small topic that I am pretty confident about: why to structure your SASS files with the @import rule.

If you are still using Sprockets directives in Asset Pipeline to combine your SASS files, I highly recommend to switching over to using the SASS @import rule instead.

Read more »

LABS
HTML5 Facebook Style Sliding Menu Using Twitter Bootstrap Collapse

Ever since Facebook, and other “super” apps started to implement a side menu that slides out for their main navigation, this pattern has pretty much turned into the standard for any application that has a lot of content and a complex navigation stack.

Read more »

LABS
Testing accessibility with RSpec and Capybara

An exploration in automated accessibility testing

Today Grant Hutchins and I took on several stories to enhance the accessibility of a site. One of them was to add a skip-navigation link to the application.

To understand why skip-nav links are important, visit Jim Thatcher's explanation.

Our immediate inclination was to write a request spec with Capybara to drive out the solution. We came up with the following.

The Test

require "spec_helper"

feature "Keyboard Navigation" do
  scenario "hidden skip navigation link shows when focused and jumps to content", js: true do
    login_as(users(:user))
    visit root_path

    skip_link = page.find("#skip-navigation a")
    skip_link.should have_content "Skip navigation"
    skip_link.native.location.y.should be < 0

    body_element = page.find("body")
    body_element.native.send_keys(:tab)
    skip_link.native.location.y.should == 0

    skip_link.native.send_keys(:return)
    skip_link.native.location.y.should be < 0

    current_url.should match(/#content$/)
  end
end

The Markup

%body
  #skip-navigation
    %p= link_to "Skip navigation", "#content", tabindex: 0
    ...
  #content
    ...

The Styles

body {
  #skip-navigation {
    a, a:hover, a:visited {
      position:absolute;
      left:0px;
      top:-500px;
      overflow:hidden;
    }

    a:active, a:focus {
      position:absolute;
      left:0;
      top:0;
    }
  }
}

What's happening here?

We are asserting that the "hidden skip navigation link shows when focused and jumps to content" when clicked.

The most important aspect of what we did was emulating keyboard navigation. We're using js: true so we have access to Selenium's native methods and thus the send_keys method. This allows us to send keypress messages to the browser.

Since we've used positioning to hide the element, we also have an assertion around that property.

Problems in CI!

The application behaved as expected and the tests passed locally.

When we ran the tests in CI however, the tests failed. The reason is that _the browser must retain foremost focus in the OS in order for the :focus css pseudo-selector to fire on the skip-nav element. Without the :focus style rules applied, the skip-nav element remained invisible, and the tests failed.

We tried a workaround using within_window and forcing browser focus, but couldn't get it to work. We've got a few more tricks up our sleeve that we're going to try, and will report back here.

Edit: We added within_window to the test to force focus on the browser. This makes the test less brittle locally (because it won't fail if you click out of the window).

window = page.driver.browser.window_handles.last
page.within_window(window) do
  skip_link.native.location.y.should == 0
end

LABS
CSS :first-child, :nth-child, and :last-child are not like :eq

One mistake I've seen made a few times is the notion that CSS's nth-child pseudoselector acts like jQuery's :eq pseudoselector.

jQuery's :eq(n) pseudoselector gives you a single element that is at index n out of all matched elements. While this is certainly a useful selector to have, it's unfortunately not supported in standard CSS. If you find yourself repeatedly using :eq in your jQuery code, be careful that you are not relying too heavily on :eq to the point where your styles are difficult to match in "pure" CSS.

If we were to express :nth-child in terms of the :eq selector, it would be like using :eqscoped to all of the immediate descendant contents of a single element. Or in my own words, :nth-child adds a constraint to the selector that the matched element must be the nth element in its parent container.

So if we had a snippet of HTML like

<div>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

Then the selector .foo:nth-child(2)will match the div #bar2. If we insert another element at the front of the container:

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

And again we select .foo:nth-child(2), we match the div #bar1 because the 2nd child of the container also matches .foo.

Thus, in this second example, if we try .foo:nth-child(1) or the equivalent .foo:first-child, we will not match any elements because the first child element in that container -- the p tag -- does not match .foo.

Likewise, :nth-child can match children in multiple containers. In the HTML snippet:

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

<div>
     <div id="quux" class="foo"></div>
</div>

the selector .foo:last-child will match the divs #bar3 and #quux; but .foo:first-child or .foo:nth-child(1) will only match #quux because the first child of the first container is, again, not a .foo.

PIVOTAL LABS
[Standup][SF] 2012.05.25 – 1 git repo, 2 Procfiles, 2 Heroku Apps, CSS transitions behaving badly

Ask for Help

*"1 git repo, 2 Heroku apps, 2 procfiles? Heroku currently is limited to 1 procfile per repo, so we've created a rake task that branches, modifies the procfile and pushes. Do you have a better solution?"

Is it possible to use env variables to parameterize your Procfile?

"Capybara: How can I click on a flash dialog for webcam settings?"

This was solved by right clicking and going into flash settings and enabling this permission always for this domain. Setting this up on headless CI may be more difficult.

"I have CSS transitions that behave differently when 'user initiated' vs initiated from a setTimeout or other event."