Presented at NDC 2012. Video: http://vimeo.com/43548698

1. learning to love html
(for grumpy developers)
@jongalloway

2. hi!
http://weblogs.asp.net/jgalloway

3. why?
falling in love
the honeymoon
marriage counseling

4. why?
lessons from javascript

5. falling in love
what does a document offer?
structured content
not design
not logic

6. why?
it’s what we share
with designers
with our users
the only code you write that the world sees

7. falling in love
avoiding the cheap floozy
code smells
difficult to maintain
trapped
supporting browsers (and versions)
reliance on grids / frameworks / tools

8. falling in love
love it for what it is…
a document format

9. falling in love
document vs. application
tools
developers
but you deliver documents

10. true love
♥ html

11. the honeymoon
joy!
clean code (occupy your codebase!)

12. the honeymoon
joy!
clean code is flexible
(story time)

16. the honeymoon
joy!
adaptive layout

17. the honeymoon
joy!
seo: a structured document is machine readable

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

19. the honeymoon
selectors get so easy!
css
jquery
testing
$('section.mentions header img').hide()

20. marriage counseling

21. marriage counseling
your html as an api
separation of concerns
smoothly factored pieces agree

22. marriage counseling
browsers
stop fixating on browsers
you are not your browser
your browser doesn’t matter to users
land of a thousand browsers
common ground
resets? okay…
normalize is better!
http://necolas.github.com/normalize.css/

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

24. marriage counseling
progressive enhancement
shim for downlevel
modernizr
conditional comments
content fallback

25. marrige counseling
… let’s talk ie
quirks mode! (watch doctype)

26. marrige counseling
… let’s talk ie
developer tools
document mode (rendering)
browser mode (requesting)

27. marriage counseling
pixel hell
users don’t count pixels

28. marriage counseling
pixel hell
avoiding pixel hell
get there first
get out of mockup mode
photoshop is not a web standard

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

30. marriage counseling
positioning and layout
floats
float one way

31. marriage counseling
positioning and layout
padding / margins
use developer tools
use page inspector

32. marriage counseling
focus on a structured document
start with an outline – like writing
keep things structured
refactor (?!)

33. learning to love html
(for grumpy developers)
@jongalloway