Ordered ListSteve SmithGreat Lakes Ruby Bash, Lansing MI

April 17, 2010

Designing CodeBeautiful, simple, and usable text.

Things to Cover1. Why design your code?

2. Balance

3. Clarity

4. Harmony

5. Wrap Up

Why Design Code?Reasons to care about beauty.

“Robert L. Peters

Design is the application of intent - the opposite of happenstance, and an antidote to accident.

Your Own SanityDesign for

Future GrowthDesign for

User ExperienceDesign for the

Things to Cover1. Why design your code?

2. Balance

3. Clarity

4. Harmony

5. Wrap Up

BalanceAlignment and Order

Increase ScanabilityBalance Using Grids to

config.gem 'bcrypt-ruby', :lib => 'bcrypt', :version => '2.1.1'config.gem 'RedCloth', :lib => 'redcloth', :version => '4.2.2'config.gem 'mongo_ext', :lib => false, :version => '0.19.1'config.gem 'will_paginate', :version => '2.3.11'config.gem 'state_machine', :version => '0.8.0'config.gem 'newrelic_rpm', :version => '2.10.6'config.gem 'mongo_mapper', :version => '0.7.1'config.gem 'mime-types', :lib => 'mime/types'config.gem 'exceptional', :version => '2.0.1'config.gem 'rspreedly', :version => '0.1.11'config.gem 'multipass', :version => '1.1.4'config.gem 'defensio', :version => '0.9.1'config.gem 'sanitize', :version => '1.1'config.gem 'maruku', :version => '0.6.0'config.gem 'faker', :version => '0.3.1'config.gem 'navvy', :version => '0.1.0'config.gem 'less', :version => '1.2.21'config.gem 'wand', :version => '0.2.1'config.gem 'rio', :version => '0.4.1'

LucidityBalance Method Sizes for

Things to Cover1. Why design your code?

2. Balance

3. Clarity

4. Harmony

5. Wrap Up

ClaritySimplicity and Understanding

Consistent NamesClarify Using

class Post key :title, Stringend

class Category key :name, Stringend

class Theme key :moniker, Stringend

class Post key :title, Stringend

class Category key :title, Stringend

class Theme key :title, Stringend

class Site key :authorizations, Array def add_authorization(user) # do stuff endend

class Account key :memberships, Array def add_membership(user) # do stuff endend

class Site key :authorizations, Array def add_user(user) # do stuff endend

class Account key :memberships, Array def add_user(user) # do stuff endend

Positive GrammarClarify Using

class User include MongoMapper::Document key :name, String key :email, String key :inactive, Boolean, :default => false

end

class User include MongoMapper::Document key :name, String key :email, String key :inactive, Boolean, :default => false

def active? !inactive? end

end

class User include MongoMapper::Document key :name, String key :email, String key :inactive, Boolean, :default => false

def active? !inactive? end

def activate! self.inactive = false end

end

class User include MongoMapper::Document key :name, String key :email, String key :active, Boolean, :default => true

end

class User include MongoMapper::Document key :name, String key :email, String key :active, Boolean, :default => true def inactive? !active? end end

class User include MongoMapper::Document key :name, String key :email, String key :active, Boolean, :default => true def inactive? !active? end

def activate! self.active = true end end

Method ExtractionClarify Using

def do_something_important if foo? && foo == bar && baz != wik # do something endend

def do_something_important # are specific conditions met? if foo? && foo == bar && baz != wik # do something endend

def do_something_important if conditions_met? # do something endend

def conditions_met? foo? && foo == bar && baz != wikend

Things to Cover1. Why design your code?

2. Balance

3. Clarity

4. Harmony

5. Wrap Up

HarmonyIntegration and Experience

IntegrationHarmonize with

End User Application

Your Code

End User Application

Your Code

WARNING

End User Application

Your Code

User ExperienceHarmonize with

“Alan Perlis

Simplicity does not precede complexity, but follows it.

<title> Project Title - Portfolio - Ordered List</title>

item.breadcrumbOur First Thought

<title> {{ item.breadcrumb | map: 'title' | join: ' - ' }}</title>

Too Much CodeOur Next Thought

{% title %}

<title> Project Title - Portfolio - Ordered List</title>

{% title '//' %}

<title> Project Title // Portfolio // Ordered List</title>

Things to Cover1. Why design your code?

2. Balance

3. Clarity

4. Harmony

5. Wrap Up

Wrapping UpA Few Takeaways

Write, Then SimplifyWrite, Then Simplify, then

Design the ExperienceBefore You Write the Code

Simplicity WinsRemember that

Ordered List

Thank you!steve@orderedlist.com

Steve SmithGreat Lakes Ruby Bash, Lansing MIApril 17, 2010

@orderedlist