learning to love html (for grumpy developers) @jongalloway
Jul 02, 2015
learning to love html
(for grumpy developers)
@jongalloway
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?
it’s what we share
with designers
with our users
the only code you write that the world sees
falling in love
avoiding the cheap floozycode 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)
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
browsersstop 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/
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
… let’s talk ie
quirks mode! (watch doctype)
marrige counseling
… let’s talk ie
developer tools
document mode (rendering)
browser mode (requesting)
marriage counseling
pixel hell
users don’t 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 documentstart with an outline – like writing
keep things structured
refactor (?!)
learning to love html
(for grumpy developers)
@jongalloway