Designing code

3,310 views

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
3,310
On SlideShare
0
From Embeds
0
Number of Embeds
431
Actions
Shares
0
Downloads
55
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

×