Cloud Four Blog

Technical notes, War stories and anecdotes

Invisible Webfont Issues in Chrome (and a fix)

A few weeks back, we started hearing from Chrome users about a rather bizarre problem. They’d visit our site, only to find that the text was completely invisible:

Screenshot of blog.cloudfour.com with webfont issue

(Poor Jason, all alone, no content to keep him company…)

It turns out that Chrome 32 and 33 have some bugs when it comes to webfonts. Typekit wrote about the problem in a February post and again in a March update.

We’re sure the Google folks will fix the issue in a future update, but in the meantime it’s a significant obstacle for our users. So we rigged up a temporary hack based on a solution offered in Chrome’s issue tracker that seems to remedy things:

Our hack uses browser detection (yuck) to avoid unnecessary repaints, but if that turns your stomach there’s also a CSS-only solution. Let’s hope either measure is an extremely temporary one!

SimpleSlideView: Controlling Flow With JavaScript

In July we released SimpleSlideView, a jQuery and Zepto plugin for simple, responsive sliding views (here’s a demo). In the last few months, I’ve noticed an uptick in developers emailing to ask a variation of this question:

How do I change or stop a view transition based on user input?

It’s a great question, and one that may not be immediately apparent from the demo alone.

When using SimpleSlideView, there are two ways to navigate between views. The simplest way is with HTML, which is great for predictable, non-dynamic interactions or prototyping:

<button data-pushview="#result">See Result</button>

The straightforwardness of this technique is a double-edged sword. It’s easy to use, but it’s also kind of static. What if we want to change the destination? Or prevent the transition altogether? For that, we’ll want to use JavaScript instead.

We can remove the data-pushview attribute from the button, but we’ll need some way to select it via JS, so let’s give it an ID:

<button id="result-btn">See Result</button>

And here’s the scripty part:

// Save the simpleSlideView instance to a variable
var slideView = $('#container').simpleSlideView();
// Add a click event handler to the button
$('#result-btn').click(function(){
  // On click, push the view with an ID of 'result'
  slideView.pushView('#result');
});

Right now this probably feels like a step backward. It’s more verbose. But we’ve gained the freedom to define the sliding-view behavior any way we like.

Suppose you only want to transition when certain criteria are met:

if (isValid) {
  slideView.pushView('#thanks');
} else {
  alert('Oops! Something seems off.');
}

Or maybe you’d like the next view to depend on the value of something else:

if (age < 21) {
  slideView.pushView('#soda');
} else {
  slideView.pushView('#beer');
}

Here’s a working example that uses Moment.js and your browser to determine the weekday of a date you provide. The result is populated before the view transitions, and only if Moment.isValid() returns true:

See the Pen Weekday (SimpleSlideView Demo) by Tyler Sticka (@tylersticka) on CodePen.

For more info on what you can do with SimpleSlideView and JavaScript, refer to the documentation on GitHub. If you’re using SimpleSlideView in your own projects, we’d love to hear about it!

Retooling

GitHub introduced a new text editor called Atom last week, and reactions (at least in my Twitter feed) seem divided between fervent desire and snide disregard. For every few people shamelessly begging for invites, you’ll find one or two bemoaning how fickle we all are, how crowded this software category has become, or how our obsession with the “latest and greatest” distracts us from what really matters (what we make).

Some of these emotions are likely the result of the unspoken assumption that everyone in our industry must always know everything (Lyza called this the knowledge burden). But I also believe, regardless of industry, that a natural friction exists between makers and their tools.

We’ve yet to invent a device capable of directly converting our thoughts into physical manifestations. Until we do, tools can only approximate our intent. This means that the distance between idea and execution is often defined by the capability of our tools and our mastery thereof. They tell us what we can and can’t do.

It’s a complicated relationship.

 Some remain faithful to a specific toolset for as long as possible, cultivating an intense and focused knowledge of every feature, quirk and workaround. Peanuts creator Charles Schulz was so fond of Esterbrook & Co.’s Radio Pen No. 914 that he bought all of their remaining stock when they stopped producing it. The pens lasted him through the remainder of the strip’s nearly fifty-year run.

Others transition quickly, abandoning their previous workflow as soon as they feel it may be working against them. English post-punk band The Fall have remained vital and prolific for nearly four decades, in part because of frontman Mark E. Smith’s infamous propensity for changing the band’s lineup with little or no warning.

We’ve yet to discover that magic “one size fits all” process. Until we do, we should encourage the accelerating expansion of available tools while remaining skeptical of any that claim to be everything to everyone. Choice encourages diversity in the types of thought processes our medium supports.

In other words, tools are important. Not for their own sake, but for those they empower to create. Welcome!

Responsive Design Workshop in Denver

Last year, the kind folks at UIE invited me to give a workshop entitled When Responsive Design Meets the Real World at their UX Immersion Mobile conference in Seattle.

The workshop was a blast. People seemed to enjoy it.

But despite that I was honored and surprised that the folks at UIE invited me back to UXIM 2014 to present an updated version of the workshop.

Not only that, but they created a neat animated video about the talk.

I wasn’t sure what to expect from the animation. I did an interview with Jared Spool for the UIE Podcast (available for your listening pleasure now), and at the end of the podcast, they asked me to talk for a couple of minutes about the workshop and they would “animate it”.

I think it turned out pretty well. I literally laughed out loud at the person hitting their head against the wall. Let’s just say that it wasn’t hard to see myself in a character with a round head and no hair.

UXIM looks great again this year. Lots of great speakers and in-depth workshops. If this sounds like something of interest to you, you can register for UXIM using the code “SPKUXIM” and save $200 off the full conference price.

I’d love to see you in Denver.

Dan Bricklin on Responsive App Design

Have you seen Dan Bricklin‘s Responsive App Design video? Yes, that Dan Bricklin. The “father of the spreadsheet” Dan Bricklin.

I desperately wanted to include this video in my last article on when responsive design makes sense for your app. But it felt forced so it got cut.

The video is worth watching. It’s fun to hear Dan compare responsive design to the challenge of fitting a spreadsheet on a 40 character screen. Check it out.