Artisan and Artist

Programming => Design

About me

  • Entrepreneur
  • Full stack programmer
  • @_李路 | RubyChina & Github: lilu
  1. Why design matters?
  2. Programmers can be designers
  3. Design in programmer's way

I want to learn some programming...

Ruby

Or... Python?

Presentation

Communication

  • Affect emotions
  • Make things easier to use
  • Earn trust

Programmers can be designers

The Hacker Attitude

by Eric Steven Raymond

  1. The world is full of fascinating problems waiting to be solved.
  2. No problem should ever have to be solved twice.
  3. Boredom and drudgery are evil.
  4. Freedom is good.
  5. Attitude is no substitute for competence.

Programming Evolution


/* C */
int fact( int n ) {
    if (n <= 1) 
        return 1;
    else
        return n * fact(n - 1);    
}
                    

;;Lisp
(define (fact n)
  (if (= n 0)
      1
    (* n (fact (- n 1)))))
                    

#Python
def fact(n):
    return reduce(lambda x, y: 
                      x * y, 
                      range(1, n + 1))
                    

#Ruby
def fact(n)
  (1..n).reduce(:*)
end
Programming is a process of designing DSL for your own application

by Dave Thomas


#Rails ActiveSupport
1.month.from_now                  
#Sinatra
get '/hi' do
  "Hello World!"
end
#Rake
task :test do
  ruby "unittest.rb"
end
#RSpec
describe Programmer do
  it "should say hello to world" do
    ...
  end
end
#Kaminari
User.page(7).per(50).padding(3)

Programming Abstraction

Design Abstraction

Design in programmer's way

Let's play with Photoshop Code

Group


module ActiveModel
  ...
  autoload :AttributeMethods
  autoload :Callbacks
  autoload :Conversion
  autoload :Model
  autoload :Naming
  autoload :SecurePassword
  autoload :Translation
  autoload :Validations
  ...
end

Grouping Methods

Grouping through Html5 Structure

Use layouts and partials


.thing_wrapper
  header#thing_header= render "things/header"
  section#thing_actions= render "things/actions"
  section#thing_content= yield
                    

.photos= render "carousel"
= tp.content

Not So Good

Dominance

Use White space

Not So Good

Rhythm


(1..10).detect { |i| i % 3 == 0 }
(1..10).select { |i| i % 3 == 0 }
(1..10).reject { |i| i % 3 == 0 }
(1..10).collect { |i| i*i }
(1..10).inject { |fac, i| fac*i }
(1..10).each { |i| puts i } 
(1..10).group_by { |i| i % 3 == 0 }
(1..10).sort_by { |i| -i }

Similarity and Contrast

Use Sass or Less Mixins


@mixin section-decorate {
  background: white;
  @include border-radius(8px);
  @include box-shadow(rgba(0, 0, 0, 0.1) 1px 1px 10px);
}

@mixin icon-fixed-width {
  display: inline-block;
  width: 1.1428571428571428em;
  padding-right: 0.2857142857142857em;
}

Not So Good

Flow

Use Alignment

Grid System

Not So Good

Convention


# Use snake_case for symbols, methods and variables.
:some_symbol
def some_method
  ...
end
# Use SCREAMING_SNAKE_CASE for other constants.
SOME_CONST = 5
# Use CamelCase for classes and modules.
class SomeClass
  ...
end

Use Icon and Color Conventions

Define global styles


$linkColor: #588cc7;
$headingsFontWeight: normal;
$btnPrimaryBackground: #049cdb;

Not So Good

More

Typography

Be Careful

THE END

李路 | @_李路