Learn to design clean, beautiful, and usable code.

1. Designing Code
Beautiful, simple, and usable text.
Great Lakes Ruby Bash, Lansing MI Steve Smith
April 17, 2010 Ordered List

2. Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up

3. Why Design Code?
Reasons to care about beauty.

4. “
Design is the application
of intent - the opposite of
happenstance, and an
antidote to accident.
Robert L. Peters

5. Design for
Your Own Sanity

6. Design for
Future Growth

7. Design for the
User Experience

8. Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up

9. Balance
Alignment and Order

10. Balance Using Grids to
Increase Scanability

15. 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'

16. Balance Method Sizes for
Lucidity

19. Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up

20. Clarity
Simplicity and Understanding

21. Clarify Using
Consistent Names

22. class Post
key :title, String
end
class Category
key :name, String
end
class Theme
key :moniker, String
end

23. class Post
key :title, String
end
class Category
key :title, String
end
class Theme
key :title, String
end

24. 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

25. 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

26. Clarify Using
Positive Grammar

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

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

29. 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

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

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

32. 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

33. Clarify Using
Method Extraction

34. def do_something_important
if foo? && foo == bar && baz != wik
# do something
end
end

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

36. def do_something_important
if conditions_met?
# do something
end
end
def conditions_met?
foo? && foo == bar && baz != wik
end

37. Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up

38. Harmony
Integration and Experience

39. Harmonize with
Integration

40. Your Code
End User Application

41. Your Code
WARNING
End User Application

42. Your Code
End User Application

43. Harmonize with
User Experience

44. “
Simplicity does not
precede complexity, but
follows it.
Alan Perlis

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

46. Our First Thought
item.breadcrumb

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

48. Our Next Thought
Too Much Code

49. {% title %}

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

51. {% title '//' %}

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

53. Things to Cover
1. Why design your code?
2. Balance
3. Clarity
4. Harmony
5. Wrap Up

54. Wrapping Up
A Few Takeaways

55. Write, Then Simplify, then
Write, Then Simplify

56. Before You Write the Code
Design the Experience

57. Remember that
Simplicity Wins

58. Thank you!
steve@orderedlist.com
@orderedlist
Great Lakes Ruby Bash, Lansing MI Steve Smith
April 17, 2010 Ordered List