This past Saturday I had the pleasure of speaking at Software Craftsmanship North America on a topic that has been on mind for some time now: Front End Craftsmanship.

Much of the talk derived from a couple of blog posts I've written over the course of the past view months including: css Formatting Tips, and Expressive html.

Still, I did reveal some of new techniques I’ve recently been using to manage my css, so even if you have been reading my posts regularly the following recap (including slides and talking points) may be of some value to you.

Slide Deck

please note: these slides will look best in the latest version of Safari, which preserves all animations and videos.

Expressive HTML

Introduction

I’m here to talk to you all today about the basic tenets Front End Craftsmanship. I’m curious—how many in the audience consider themselves to be “Software Craftsmen?”

Yet, despite this fact, in my experience I’ve found that many of us have a tendency to largely ignore or misunderstand developments in Front End Technology.

So, my question is this: can we call ourselves “craftsmen” if we continue to hastily construct the most public facing ends of our software, with code viewable by anyone!?

As craftsmen, we owe our namesakes to our willingness to go beyond the status quo. Our web sites and applications should be designed and built in such a way that they are usable, accessible, and responsive. In short, they should be well-crafted.

In the spirit of working together toward a better, more meaningful web, it is my goal today to rekindle your interest in Front End Development. In so doing, I will introduce (keyword here) you all to the concepts of Expressive html and Sustainable css.

What is Expressive HTML?

• Does not alter basic vocabulary of the web’s common language.
• Simply a different way of authoring markup.
• Abandons presentational markup for a content out approach.
• Don’t ask: “What html elements do I need?”
• Instead: “What is this? What's it mean?”
• How to explain content to non-tech person?
• Good markup authors are good translators.
• Not all translations are created equal.
• Ultimately, it’s up to you, the author.
• Consider your html. Consideration makes it expressive.

Why is Expressive HTML important?

1. We have a responsibility to our users.

• Handicapped users rely on assistive devices.
• Meaningful markup saves time and helps avoid confusion.

We have a responsibility to our clients.

• Google Design Content Guidelines.

We call ourselves Craftsmen.

• Your application is your interface.
• My wife doesn’t care about your code.
• The UI is not a second class citizen.
• Anyone with a browser can see your markup. Don’t be lazy.

What good is a cabinetmaker who builds a table, only to leave it un-sanded, un-varnished or un-glued?

So, how do we do it?

1. Plain Old Semantic html (p.o.s.h.)

• Validate your markup.
• Drop presentational markup.
• Fix <b>ed and <br>eakfast markup.
• Use Sensible class names.

Get Naked.

• Turn off css on your website.
• Focus on the “naked” structure.
• See how browser interprets your markup.
• Gives a good idea how well you’ve structured your code.

Add semantic richness with Microdata.

• A library that provides an extended set of html attributes.
• Write markup with a greater expressiveness and detail.
• Google, Yahoo, and Bing! interpret and return content accordingly.
• Leverage search engines in a powerful new way.
• Requires extra markup, makes up for it with added semantics.

Make it Accessible with aria

• Certain functionality is not available to some users with disabilities.
• aria defines new ways for functionality to be provided to assistive technology.
• Adds attributes to identify features for user interaction.
• aria describes regions like nav, content, header, footers, sidebars and others.
• Enable keyboard users to easily move among regions.

Sustainable CSS

Introduction

css is a mangy beast. I won’t deny it. It’s messy and difficult to maintain.

It’s not a programming language, and it doesn’t behave like one.

It’s leaky, mysterious and open to interpretation.

I’m not sure if it’s because it appeals to my (more liberal) artistic side, but I kinda love it. As squishy and imperfect as it is, it does serve, at times, as nice contrast to the cold rationality of programming.

css does, however, possess one unforgivable trespass. Namely, its seemingly inevitable decay into “a spaghetti tangle of duplication and unpredictability.”

You can’t make it work just by trying harder. In fact, it’s questionable whether you can “make it work” at all. Perhaps the best we can hope for is to effectively manage it.

In order to do this, we must critically examine our approach to writing css and rethink the strategies we use to implement it.

Scalable Modular Architecture for CSS

• html is a tree structure of parents and children.
• Depth of applicability.
• Components can’t easily be moved around.
• Leads to duplications.
• Greater depth enforces dependency on HTML structure.

Make Selectors Performant

• css is evaluated right to left one node at a time.
• css reflow visualization.
• Don’t get carried away, optimizations may be overkill.
• 50ms delta between best and worst stylesheets (Steve Souders)
• Consider performance, but don’t get crazy.

Categorize CSS Rules

• At the core of SMACSS is categorization.
• Allows us to see and define repeatable patterns.
• Results in less code, easier maintenance and consistency.
• 4 Types
• Base defaults
• Modules are majority. Reusable.
• Layouts connect all the parts.
• States describe temporal modes.

Format Stylesheets Humanely

• Panache
• Author Info
• Description
• Calculations
• Hacks
• To-dos
• File structure
• Dependencies
• Section Headings