際際滷

際際滷Share a Scribd company logo
learning to love html
(for grumpy developers)


                  @jongalloway
hi!
http://weblogs.asp.net/jgalloway
why?
  falling in love
     the honeymoon
marriage counseling
why?
lessons from javascript
falling in love
what does a document offer?
    structured content
    not design
    not logic
why?
its what we share
      with designers
      with our users
the only code you write that the world sees
falling in love
avoiding the cheap floozy
code smells
    difficult to maintain
    trapped
    supporting browsers (and versions)
    reliance on grids / frameworks / tools
falling in love
love it for what it is
     a document format
falling in love
document vs. application
     tools
     developers
but you deliver documents
true love

 html
the honeymoon
joy!
clean code (occupy your codebase!)
the honeymoon
joy!

clean code is flexible
     (story time)
learning to love html and css
learning to love html and css
learning to love html and css
the honeymoon
joy!


adaptive layout
the honeymoon
joy!


seo: a structured document is machine readable
the honeymoon
clear communication

semantic markup is easier, cleaner
    asp.net templates
the honeymoon

selectors get so easy!
     css
     jquery
     testing

$('section.mentions header img').hide()
marriage counseling
marriage counseling
your html as an api
     separation of concerns
     smoothly factored pieces agree
marriage counseling
browsers
stop fixating on browsers
      you are not your browser
      your browser doesnt matter to users
      land of a thousand browsers
common ground
      resets? okay
      normalize is better!
      http://necolas.github.com/normalize.css/
marriage counseling
progressive enhancement


build for your main use case
           enhance using feature detection
marriage counseling
progressive enhancement

shim for downlevel
     modernizr
     conditional comments
     content fallback
marrige counseling
 lets talk ie


   quirks mode! (watch doctype)
marrige counseling
 lets talk ie


developer tools
    document mode (rendering)
    browser mode (requesting)
marriage counseling
pixel hell

users dont count pixels
marriage counseling
pixel hell

avoiding pixel hell
     get there first
     get out of mockup mode
     photoshop is not a web standard
marriage counseling
positioning and layout

floats
     http://css.maxdesign.com.au/floatutorial/
marriage counseling
positioning and layout

floats
     float one way
marriage counseling
positioning and layout
padding / margins
     use developer tools
     use page inspector
marriage counseling
focus on a structured document
start with an outline  like writing
keep things structured
refactor (?!)
learning to love html
(for grumpy developers)


                  @jongalloway

More Related Content

learning to love html and css