An Event Apart Notes: Dan Cederholm, Handcrafted Patterns


2011 was a year to step back and learn something new. What else other than the banjo! Banjos are very misunderstood. Learning new things helps us to become better at things we already do. The process of learning can be applied to things we know to break it apart and we can better ourselves.

  1. Imitation – LEARN – view source of greats
  2. Repetition – DO – And do until it reaches second nature – build repetitive patterns
  3. Innovation – apply your own creativity – reinterpret – stylize – own

Frameworks are great tools, but they are learning tools. A good craftsman builds their own tools!

Pears

http://pea.rs/ – common patters of mark-up & styles
-an open source wordpress theme to allow anyone to set up their own library of repetitive patterns.

Let’s be semanticaly correct.

Examples: HTML5 – placeholders, roles (ARIA landmark roles – Jeremy Keith of adactico.com)

stronger css selectors rather than more classes in css. (nth-child() in place of even, odd, alt, classes)

Slats – are blocks of content usually containing an image (thumbnail), title and description and even more optional info(date, tags, etc). They are often teasers of more content that should click through.

Breaking things into patterns you can solve small problems w big impact.

Overview of SASS (I agree with Dan and have been hesitant to implement CSS preprocessors)
Love the idea of preprocessors for CSS

Earl Scruggs revolutionized banjo playing with a new style (Flint Hill Special)
Bluegrass killed the banjo (arguable) by making it too hard for average people to play the new cooler styles.

One reason why CSS didn’t have many of these SASS and LESS features to begin with was the creators didn’t want to make it a complicated language. If you make something too powerful it can get too overly complex and people don’t use it.

There is a pride also in the handcraftedness of the source code. We like tools that plug holes, but don’t mess with our craft. But the benefits of using CSS preprocessors outweighs these nits. It’s easy to install:

$ gem install sass

(There are also tools that can help: Scout) It’s easy to watch a sass file and have it automatically recompile a CSS file on save.

watch $ sass ...

This is beautiful for those who follow the DRY mantra: Don’t Repeat Yourself!

CSS Preprocessors give us: variables, functions (mixins), inline media queries.

Respond or Adapt! Responsive Web Design

Dribbble set with a single breakpoint at 500 in which it makes the ayout of the site fluid. This is so we don’t have to consider the plethora of mobile devices using various sizes around the same.

We should let our content dictate our breakpoints rather than the popular devices dictating the breakpoints. Avoid display:none; give better options or if it’s really not needed get rd of it everywhere.

  1. Embrace Patters
  2. Solve Small Problems
  3. DIY Frameworks
  4. http://pea.rs