Designing Code
Beautiful, simple, and usable text.




Great Lakes Ruby Bash, Lansing MI   Steve Smith
April 17, 2010     ...
Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up
Why Design Code?
Reasons to care about beauty.
“
Design is the application
of intent - the opposite of
happenstance, and an
antidote to accident.

               Robert ...
Design for

Your Own Sanity
Design for

Future Growth
Design for the

User Experience
Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up
Balance
Alignment and Order
Balance Using Grids to

Increase Scanability
config.gem   'bcrypt-ruby', :lib => 'bcrypt', :version => '2.1.1'
config.gem   'RedCloth', :lib => 'redcloth', :version =>...
Balance Method Sizes for

Lucidity
Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up
Clarity
Simplicity and Understanding
Clarify Using

Consistent Names
class Post
  key :title, String
end

class Category
  key :name, String
end

class Theme
  key :moniker, String
end
class Post
  key :title, String
end

class Category
  key :title, String
end

class Theme
  key :title, String
end
class Site
  key :authorizations, Array

  def add_authorization(user)
    # do stuff
  end
end

class Account
  key :memb...
class Site
  key :authorizations, Array

  def add_user(user)
    # do stuff
  end
end

class Account
  key :memberships, ...
Clarify Using

Positive Grammar
class User
  include MongoMapper::Document

  key :name,     String
  key :email,    String
  key :inactive, Boolean, :def...
class User
  include MongoMapper::Document

  key :name,     String
  key :email,    String
  key :inactive, Boolean, :def...
class User
  include MongoMapper::Document

  key :name,     String
  key :email,    String
  key :inactive, Boolean, :def...
class User
  include MongoMapper::Document

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

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

  key :name,   String
  key :email, String
  key :active, Boolean, :default =>...
Clarify Using

Method Extraction
def do_something_important
  if foo? && foo == bar && baz != wik
    # do something
  end
end
def do_something_important
  # are specific conditions met?
  if foo? && foo == bar && baz != wik
    # do something
  end...
def do_something_important
  if conditions_met?
    # do something
  end
end

def conditions_met?
  foo? && foo == bar && ...
Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up
Harmony
Integration and Experience
Harmonize with

Integration
Your Code




End User Application
Your Code
  WARNING



End User Application
Your Code




End User Application
Harmonize with

User Experience
“
Simplicity does not
precede complexity, but
follows it.

                 Alan Perlis
<title>
  Project Title - Portfolio - Ordered List
</title>
Our First Thought

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

Too Much Code
{% title %}
<title>
  Project Title - Portfolio - Ordered List
</title>
{% title '//' %}
<title>
  Project Title // Portfolio // Ordered List
</title>
Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up
Wrapping Up
A Few Takeaways
Write, Then Simplify, then

Write, Then Simplify
Before You Write the Code

Design the Experience
Remember that

Simplicity Wins
Thank you!
steve@orderedlist.com
@orderedlist



Great Lakes Ruby Bash, Lansing MI   Steve Smith
April 17, 2010           ...
Designing code
Designing code
Designing code
Designing code
Designing code
Designing code
Upcoming SlideShare
Loading in...5
×

Designing code

2,999

Published on

Learn to design clean, beautiful, and usable code.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,999
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing code

  1. 1. Designing Code Beautiful, simple, and usable text. Great Lakes Ruby Bash, Lansing MI Steve Smith April 17, 2010 Ordered List
  2. 2. Things to Cover 1. Why design your code? 2. Balance 3. Clarity 4. Harmony 5. Wrap Up
  3. 3. Why Design Code? Reasons to care about beauty.
  4. 4. “ Design is the application of intent - the opposite of happenstance, and an antidote to accident. Robert L. Peters
  5. 5. Design for Your Own Sanity
  6. 6. Design for Future Growth
  7. 7. Design for the User Experience
  8. 8. Things to Cover 1. Why design your code? 2. Balance 3. Clarity 4. Harmony 5. Wrap Up
  9. 9. Balance Alignment and Order
  10. 10. Balance Using Grids to Increase Scanability
  11. 11. 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'
  12. 12. Balance Method Sizes for Lucidity
  13. 13. Things to Cover 1. Why design your code? 2. Balance 3. Clarity 4. Harmony 5. Wrap Up
  14. 14. Clarity Simplicity and Understanding
  15. 15. Clarify Using Consistent Names
  16. 16. class Post key :title, String end class Category key :name, String end class Theme key :moniker, String end
  17. 17. class Post key :title, String end class Category key :title, String end class Theme key :title, String end
  18. 18. class Site key :authorizations, Array def add_authorization(user) # do stuff end end class Account key :memberships, Array def add_membership(user) # do stuff end end
  19. 19. class Site key :authorizations, Array def add_user(user) # do stuff end end class Account key :memberships, Array def add_user(user) # do stuff end end
  20. 20. Clarify Using Positive Grammar
  21. 21. class User include MongoMapper::Document key :name, String key :email, String key :inactive, Boolean, :default => false end
  22. 22. class User include MongoMapper::Document key :name, String key :email, String key :inactive, Boolean, :default => false def active? !inactive? end end
  23. 23. 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
  24. 24. class User include MongoMapper::Document key :name, String key :email, String key :active, Boolean, :default => true end
  25. 25. class User include MongoMapper::Document key :name, String key :email, String key :active, Boolean, :default => true def inactive? !active? end end
  26. 26. 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
  27. 27. Clarify Using Method Extraction
  28. 28. def do_something_important if foo? && foo == bar && baz != wik # do something end end
  29. 29. def do_something_important # are specific conditions met? if foo? && foo == bar && baz != wik # do something end end
  30. 30. def do_something_important if conditions_met? # do something end end def conditions_met? foo? && foo == bar && baz != wik end
  31. 31. Things to Cover 1. Why design your code? 2. Balance 3. Clarity 4. Harmony 5. Wrap Up
  32. 32. Harmony Integration and Experience
  33. 33. Harmonize with Integration
  34. 34. Your Code End User Application
  35. 35. Your Code WARNING End User Application
  36. 36. Your Code End User Application
  37. 37. Harmonize with User Experience
  38. 38. “ Simplicity does not precede complexity, but follows it. Alan Perlis
  39. 39. <title> Project Title - Portfolio - Ordered List </title>
  40. 40. Our First Thought item.breadcrumb
  41. 41. <title> {{ item.breadcrumb | map: 'title' | join: ' - ' }} </title>
  42. 42. Our Next Thought Too Much Code
  43. 43. {% title %}
  44. 44. <title> Project Title - Portfolio - Ordered List </title>
  45. 45. {% title '//' %}
  46. 46. <title> Project Title // Portfolio // Ordered List </title>
  47. 47. Things to Cover 1. Why design your code? 2. Balance 3. Clarity 4. Harmony 5. Wrap Up
  48. 48. Wrapping Up A Few Takeaways
  49. 49. Write, Then Simplify, then Write, Then Simplify
  50. 50. Before You Write the Code Design the Experience
  51. 51. Remember that Simplicity Wins
  52. 52. Thank you! steve@orderedlist.com @orderedlist Great Lakes Ruby Bash, Lansing MI Steve Smith April 17, 2010 Ordered List
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×