The concept is similar to a programmatic API. Through class names, design options and functionality extensions are exposed to the page author, providing an arsenal of sanctioned toggles they can flip on and off to control how a widget is displayed and operates on their page. This includes colors, width/height, sub-element positioning, animations, even interactive functionality.

The API can be set at the page level, but is most useful on the “block” level: that is, a chunk of something that needs special attention. The easiest example would be forms, but tables and video/audio components are also candidates.

Macro Options for Forms

Styling forms is never an insignificant amount of work. When a large site accumulates forms in different positions with different fields doing different things (subscriptions, support, lead generation, surveys, yada yada), the tightly wound CSS you crafted for your prototype unravels into a bramble of barbed wire as custom style upon custom style is thrown on top.

Content developers are a finicky bunch. They want options. They should have options. By building our forms API from the ground up, we can “expose” a core set of premeditated options to avoid later importanting all the things. Global form options might include:

• Form color
  [options: color-white, color-red, color-blue, color-green; default: color-white]
• Form width
  [options: any grid class (i.e. c7, c10, c12); default: 100%]
• Label positioning
  [options: labels-top, labels-left, labels-inline; default: labels-top]
• Submit functionality
  [options: traditional post to URL, submit-ajax; default: traditional post to URL]

Example 1

So calling a form with no explicit options called out would produce a “default” design — 100% width, labels on top, plain background — where data would be posted to a URL old school style:

Example 2

By contrast, the following HTML shows a variety of options in place, deviating from the default. This would produce a design 10 grid columns wide with a red aesthetic and labels floated to the left, and where the submission was caught by JavaScript instead of loading a new URL:

Example 3

And this HTML would produce a form six grid columns wide, with a blue motif, with labels inline to the fields:

This flexibility gives developers and content authors the flexibility to dictate form design within an established pattern without breaking broader style standards and without getting hands dirty in code.

Micro Options for Forms

But what about more discrete options, like controlling highly specific form types? Survey questions that require a numbered rating system are a good example: they require unique styles, but still need to be easily implemented. We extend the API downward from macro form options to group-level options.

We’ll wrap a fieldset with a class of “numbered-questions” to explicitly define proper formatting for the <ol> element. Underneath that, we’ll establish options for each question. Since these are survey questions, we want to allow a rating scale of one to three, or one to five, or one to ten.

• Scale length
  [options: one2three, one2five, one2ten; default: none]

Example:

  
  

    

      Name
      
    
  
  
  

    
Questions
    

      

        
How would you rate this article?
        1
        
        2
        
        3
        
        4
        
        5
        
      
      
    
  

 

In summary: We have a form running full width with a blue background. Inside is fieldset wrapping a series of survey questions. We change the color, dictate the questions should be numbered, announce that the radio buttons should be styled as a survey, and that the rating goes from one to five. Something like this:

Modularity

The true advantage of this approach lies in the modularity of the rules. We can mix and match colors and layout types as well as blend in more specialized options like survey questions. Example:

  
  

    

      Name
      
    
  
  

    

      Email
      
    
  
  
  

    
Questions
    

      

        
How would you rate this article?
        1
        
        2
        
        3
        
        4
        
        5
        
      
      
    
  

 

We’re extending the semantic value of the fieldset tag beyond content (that is, the logical clustering of input fields) into the visual presentation.

By approaching complicated CSS projects like forms as modular frameworks that invite usage rather than opaque, inextensible monoliths that can’t budge without complicated workarounds, developers — both of the content type and of the code type — are more likely to play by the rules. This brings faster development, less hacks, less code bloat, and stronger allegiance to visual brand standards.

#main #left-column .calendar h4 { color: red; }
 

This style of writing CSS is a road that leads to many dark places, namely style repetition, file size bloat, reliance on the cascade to solve poorly thought-through models and the temptation to !important everything. When I started a new site, I simply started writing CSS in the natural order of its appearance. So files looked like this:

#main { some: styles; }
#main #left-column { more: styles; }
#main #left-column .calendar { even more: styles; }
#main #left-column .calendar h4 { you: gotta be kidding me; }
 

And then further down the file, years later, I would add this:

#main #left-column .widget h4 { please: work; }
 

This is all rubbish. My bad habits started from the get-go, and it’s taken a long time to unravel them. Here’s my current thinking:

1. If I’m relying on the cascade — at all — to dictate how an element is styled, I’m doing it wrong.
2. If I’m using an #id in the element path, I’m doing it wrong.
3. If I’m using !important, I’m doing it wrong.
4. If there are more than three levels in the element path, I’m doing it wrong.

I’ve been thinking about #1 specifically for awhile.

In the Old Model, I would build out expansive, detailed styles for each component, so a button in a column would have styles duplicative of a button in the primary contact form: background-color, text-align, etc. In the new model, elements are built up with classes, so the styles are cumulative. Simplified example:

.button { border-radius, box-shadow, border, basic typography }
.major { background: obnoxious, font-size: huge }
.minor { background: subtle, font-size: small; }
 

The HTML would be something like:

bc. 
 

These button styles could also be applied to an anchor element, or something like a <span> that’s being used as a pseudo-link by JavaScript.

By creating class-based rules that are independent of DOM context, we have a style sheet where every rule could be shuffled into a random order and it would not affect the browser’s rendering of an HTML document.

This is easily tested by writing CSS upside down: write your freshest rules at the beginning of the file, not the end. Building re-usable CSS objects against the gravity of the cascade provides instant visibility to cascade conflicts; if a new rule at the top isn’t working, you know you have something further down that is competing. Object-orientation becomes encouraged, and bugs are immediately squashed. After new rules are vetted, they can be moved to the appropriate location in the CSS file.

Object-oriented CSS by its nature does not need the cascade. Thus I’ve started to rethink the “C” in “cascading style sheets”. I’m not 100% sure what the word is, but something like cumulative, compiled, cooperative, collated or concerted would all work nicely. I don’t expect this to catch on, but it has helped me focus on crafting highly efficient and modular rules that add up to something greater instead of heavy rules that squabble with each other and require intervention to untangle.

Rewind

A decade ago (longer?), I worked at an audio equipment store, moonlighted as a club DJ, had just finished a stint as a college radio DJ, was running live sound for jazz and hip hop events, spent almost every free penny on music here and here, and was working on multiple music projects which eventually had releases in the US, Germany and France. I was obsessed with sound. I nerded so hardcore on audio that my current affection for web technology sometimes feels like a cheap rebound affair.

Over the past ten years, the quality of my sound system has gone downhill faster than a rogue shopping cart. I sold most of my DJ equipment, all of my rack-mounted gear, my best speakers, half of my vinyl, all of my component equipment. Even my fantastic Gina24 sits in a closet. My CDs had been ripped; my vinyl was collecting dust. Quality was kicked to the curb by the greasy landlord of convenience.

And 10 years later, I was left sitting at the kitchen table, suddenly aware of the filters of compression and shit circuitry through which my music was being gutted. From a history of audiophilish obsession to complacency with a Dell D810’s “sound system”. A long fall indeed.

Life is too short for listening to music on a Dell D810.

The Basics

The only blessing about living in the god-forsaken state of Kansas is that our remote family just send us checks for Christmas. So me and the wife took that (and some personal investment) and compiled a sound system that does proper justice to music. What we’ve started with:

• Magnepan MG12 speakers. These are planar speakers, so they aren’t a traditional tweeter/woofer box. They stand about 4.5 feet high, but only about two inches deep; they look like something right out of Space Odyssey 2001. But holy shit do they sound amazing. They are utterly transparent; bad records sound bad, great records sound mind-blowingly good.
• Cambridge Audio Azur 840A Integrated Amp. Even brand new, this had a big warm sound that delivered the sauce. A perfect complement to the Magnepans.
• Cambridge Audio Azur 640c CD player. You think it’s weird to spend any kind of money on a decent CD player, and then you hear the difference, and suddenly there isn’t even a choice.
• NAD IPD 2 iPod Dock. This device uses the proper line-level output of an iPod so you don’t have to mess around with the headphone jack. Comes with a sweet remote too.

Add 50’ of speaker wire and some RCA cables from Blue Jeans, and the final system plays techno with enough punch to stop your heart and Adele loud enough to break the windows and jazz clearly enough to hear not just the instruments but the physical acoustics of the space in which they were recorded.

The Vinyl

I’m a total slut for vinyl. If I were Catholic, it would be part of my weekly confessional. So I was pretty stoked to hook up my Vestax d3 turntable after 12 years in a box. It’s ugly as sin but built like a tank, and with a bit of cleaning and a brand new Stanton needle, we were partying like it was 1999.

Acquiring new vinyl is the polar opposite of buying MP3s. Records are a visceral, physical experience: the act of flipping through bins at a record store, the pealing off the cellophane, the weight of the wax, the massive full-color art and elaborate packaging, the feel of the needle touching down. I can’t justify the cost of records other than they bring more satisfaction.

Because today’s artists and labels treat LPs as the premium way to consume their product, the quality of the packaging, printing and vinyl is ten-fold better than the mass-produced crap of the 70s/80s.

Next

One day, I would love to have a true audiophile quality turntable with a proper pre-amp, but I think I’m married to the Vestax for another 12 years. (Seriously, you would need a shotgun and a pentagram painted in blood to hurt this thing.) Also maybe some video components if I ever start to care about TV and movies.

For now, though, I just need to find more storage for my records.

About an hour ago, I woke up feverishly half-dreaming, half-imagining driving off a bridge and becoming locked underneath an ice floe while everyone in the car drowned and I was the only one who could get out. It was painted with a nauseous vividness. I could feel the ice water burning my nostrils and numbing my fingers.

Several times a week, I wake up surging from the kind of paranoid fears that are so subversive, and so depleting, that they only come creeping around in the sickest hours. Most of the time, I can shut my eyes and will them back to the black through the weight of sleep, and in the morning, I’ve forgotten. But sometimes, my eyes lock open in a zombie state, the fear grips, and the only way to kill it is to abandon the bed altogether and force my brain to shift into real-world gear by coming downstairs to the kitchen table.

These 4 AM panic attacks are common, and stressful. I have been in car accidents where people died, and that sickening crunch of metal and suffocating stench of airbag are central plot elements to almost every nightmare. The dreams are always about the people I love. They get worse with age.

In the real world, the one that starts around 8 AM, everything is fine. Marriage is happy, kids are healthy, job is pretty solid. There’s a lot of love in my house. I don’t take this for granted, but I am always afraid I do; always, somewhere deep in a shadowed cavity in my cranium, is a persistent whisper: “Enjoy it while it lasts.”

I have a plan, but I don’t know my future. My wife and I could spend the next 50 years together and fade into the sunset like the sappiest Nicolas Sparks plot. My kids could grow up to be the next Mia Hamm, or the next great president, or the next Adele. We could retire in a house overlooking the Atlantic ocean, and host awesome Thanksgivings, and have a dozen grandkids to spoil. My life is not perfect, but I still want it to last forever.

This is why I am thankful for the 4 AM states of cold-sweat panic. Despite the mental ulcers and debilitating lack of sleep, they cast a sharp contrast to reality, and every morning, when the rest of the house wakes up, I am reminded not to take a second afterward for granted.

1. Adaptive Web Design (Aaron Gustafson)
   This is a book about principals and philosophy, not code — think kitchen design versus recipes. To that end, it’s very good. The writing is crisp and paced, and the message is correct. But there’s nothing new here: Aaron waxes on about fluid layouts, progressive enhancement, responsiveness, adaptability — stuff we’ve read in a 100 blog posts.
2. Responsive Web Design (Ethan Marcotte)
   This book is exactly what you expect: an expanded treatise on the original ALA article. The material is good, but there is not enough. Ethan walks through the development of a basic layout, but there’s nothing about complex grid systems, data tables, or tactics for approaching info-dense layouts like shopping carts. Some might argue “this is beyond the scope of an ALA book”; I argue that this deeper dive is exactly what we needed.
3. The Elements of Content Strategy (Erin Kissane)
   I wanted so bad to love this book. Erin is an amazing writer, and her articles are to be savored. But this book, even though the writing is far and away the best of the ABA series, is another “philosophy” book: the why is richly explained, but the how is anemic. Content strategy means 100 things to 50 people, and in the end, that’s the problem: a topic so murky needs powerful voices and bright maps to guide us. And perhaps more than a few dozen pages.
4. Mobile First (Luke Wroblewski)
   Once you get past the obligatory “what does it all mean?” chapters, Luke lays a foundation for approaching web development from the bottom up: building modules first, independent of layout, and then layering in structural rules once complete. He gives a few tidbits on designing for mobile interfaces (positioning of navigation, for instance), and there are actual code examples to reinforce the message. Overall: the best of the ABA batch this year.

Other Nonfiction

1. Resonate (Nancy Duerte)
   A beautiful illustrated guide of visual storytelling via presentations. It covers pacing, tone, infographics, illustrations and more, all with fantastic examples. Stupid people would call this “a PowerPoint book”, but it’s so much more than that.

Fiction

1. Brave New World (Aldous Huxley)
   This is a story about the future written two generations ago. Huxley paints a picture of a “Utopian” society full of rigid bio-engineering, flying cars and frequent emotionless sex, and what happens when it crashes headlong into a “primitive” society with actual morals. The truly unsettling part is how close something written in 1932 — something that was considered “ridiculous” at the time — comes to life in 2012. (As a side note, I judged this book entirely by the cover: kudos to Harper Perennial for awesome art direction.)
2. A Confederacy of Dunces (John Kennedy Toole)
   If this is classic literature, shoot me in the head.
3. Heart of Darkness
   Joseph Conrad, in only 200 or so pages, paints a bleak and soul-shivering landscape of the African ivory trade 100 years ago. At one point, he describes he is most afraid of the natives because they are not inhuman, that he recognizes something primal within himself through their wild looks and ceremonies. The withering, unapologetic racism is tough to swallow: Heart of Darkness is aptly named.
4. The Meaning of Night: A Confession (Michael Cox)
   Michael Cox’s opus, this is Victorian England at its darkest: murder, intrigue, opium dens, class division. The story itself is sprawling, full of character and characters; the backdrop however — the sheer detail of the city and how life was conducted day by day — is what makes this book sing. The writing falls somewhere between dark Dickens and accessible Poe: in other words, pitch-perfect. (The opening line is one of the best ever: “After killing the red-haired man, I took myself off to Quinn’s for an oyster supper.”) Highly recommended to anyone who wants to immerse themselves in story.
5. Moby Dick (Herman Melville)
   Having never read this before, I was surprised at the density of non-fiction caking up the thin story. Chapters dawdle on and on about the whaling industry, the mechanics of killing a whale, the economics of it all, and then whale biology, and then sermons about the glory of whaling, and then more long-winded defenses to whaling. It takes over 100 pages for them just to get on the boat, and that’s where the book slows down! I tried for weeks, but even being 75% through, I just couldn’t finish it.
6. The Terror (Dan Simmons)
   My second Simmons book (after Drood). The plot revolves around the failed Franklin 1845 expedition of the northwest passage. Unlikable heroes and unlikely villains are trapped in Simmons’ hyper-detailed account of the misery of being locked in ice and hunted by the supernatural. This is a horror story, on every level, from the brutality of the ship members to the thing stalking them on the ice. Highly recommended.