C|B sides

Comments

0

Topics

• CSS

Nicole Sullivan (aka @stubbornella) brought Object-oriented CSS (OOCSS) to NYC last Thursday in an updated presentation on how our best practices in CSS are killing us. She was refreshingly candid and it was great to have insight into her work process with big clients.

First, some data...

Facebook was kind enough to share some data on its CSS revamp that Nicole helped with. Some stand-outs of their CSS code debt:

• 100MB of CSS. Have to use grep; can't read it all
• Blue brand color declared 261 times
• 558 unique hex values
• 6498 total color declarations

Salesforce, another of Nicole's clients, had almost 4000 padding declarations. This is evidence of a long history of tweaking the page layout and presentation. Although "ugly," one of Nicole's deliverables actually included reusable padding classes (more on that later).

(Some) CSS best practices are myths

Don't add extra elements. This is usually based on concern that HTML size is going to grow and download speeds and SEO may suffer. However, data show that the size of HTML actually decreases with OOCSS.

Just go ahead and change markup. Think of the markup as LEGO pieces you can copy paste around the site. That's your unit of re-use.

Continue reading Nicole Sullivan Talks OOCSS and Process

Comments

0

Topics

• JavaScript
• Mobile
• UI Patterns

I recently had the pleasure of seeing a true Web pioneer give a talk on mobile JavaScript. A Touching Look Into The Future Known As Today brings Peter-Paul Koch (@ppk, creator of quirksmode.org) to Brooklyn to give an updated talk about his experience in the trenches testing JavaScript touch event support on various mobile devices. I'll attempt to distill it down to some key points.

Mouse events and touch events are blended on mobile

The three interaction modes, in the order of the most to least we know about them:

1. Mouse
2. Keyboard
3. Touch

Event handling on the desktop is easy because the mouse and keyboard events rarely fire simultaneously. But with the advent of touch-screen devices, both touch and mouse events fire, a conscious decision to allow mobile users to browse the countless existing sites relying on mouse events for interaction.

If you want to make a distinction:

// desktop
element.onmousedown = dostuff;

// touch
element.ontouchstart = function() {
  dostuff();
  element.onmousedown = null;
};

Continue reading PPK in the BK on Mobile JavaScript

Comments

0

Topics

• JavaScript

As with most things, using RequireJS wrong can be worse than not using it at all.

RequireJS is a modular script loader that lets you pull in multiple JavaScript files in an optimized way that cheats a few rules we've been used to when downloading resources in the traditional way on the Web. Not only does RequireJS have great API documentation, its Why page is a great read, and explains how they've arrived at their approach of using head.appendChild(script) to load JavaScript asynchronously.

After building The Shoshin Project (a simple single-page web app) which used Google Closure to bundle multiple JavaScript files/modules into a single request, the concept evolved into a more interactive, multiple-page site. As a team we decided to try out RequireJS on the new site, hoping to carry on the modular approach used in the original site without being forced to include all possible combinations of JavaScript modules on every page load.

In our first dive into things, we put our page enhancements like overlays, autocomplete, and so on into the RequireJS modular system. Shortly into it we noticed some strange behavior where it looked like some of our slower external scripts were blocking even the most simple page interactions from livening up.

Continue reading RequireJS: What Not To Do

Comments

0

Topics

• UI Patterns

Toward the end of a recent post at The UI Observatory, there's a nice discussion about Undo/Redo in Pixelmator (an image editing app). Pixelmator actually messages you the type of action you've just undone or redone, front-and-center. This feature would be handy any time you find yourself creating or editing, as long as it's sufficiently out of the way when it needs to be. This could be especially useful on the web, where HTML editors generally hijack context from the browser and it's easy for the context of Undo/Redo to change with a few mouse clicks.

Continue reading Undo Notification with Context

Comments

2

Topics

• JavaScript
• jQuery

I've got the opportunity to build a client-heavy web experience with a big emphasis on transitions and effects. This is probably something that would have been built using Flash just a short time ago, but today we're using everyone's favorite JavaScript library, jQuery.

Just before diving in, I attended jQuery Boston and got totally inspired by a few key talks on JavaScript architecture, mobile web apps, and one gnome-filled piece from Karl Swedberg titled jQuery Effects: Beyond the Basics. This was a really jam-packed presentation that had something for all levels of jQuery ninja. My favorite part was a little recursive function called sequencer that calls animations, one after the other, on a collection of elements. If you try to do something like this directly (without the sequencer):

$('#Gnomes').children().animate({height: '100px'}, 'fast');

jQuery is going to perform the animations simultaneously, which may or may not be desired. I grabbed the sequencer because I wanted to create a tiling-in effect for a list of items of a dynamic length. In the process, I generalized the sequencer a bit, so it works with not only animate, but the shortcuts we've all come to love such as hide/show, slideIn/slideOut, and so on, and packaged it as part of a small transitions framework that's hopefully going to allow me to do some rapid prototyping on the transitions in my site. Read on for the demo and github link!

Continue reading jQuery Effect Sequencer