The urge for perfection

My talk for the August sydCSS Meetup on how we've drifted from the semantic web.

Transcript

1. T H E U R G E F O R P E R F E C T I O N @ msharp
2. A L O N G T I M E A G O …
3. I M A D E A W E B S I T E
4. I M A D E A W E B S I T E
5. I M A D E A W E B S I T E
6. I M A D E A W E B S I T E
7. The Standardistas
8. The Standardistas <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
9. The Standardistas <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
10. The Standardistas
11. B U T T H E N W E G O T L A Z Y
12. W H E N D I D W E S TA R T G E T T I N G L A Z Y ?
13. 2 2 J A N U A RY 2 0 0 8 W H E N D I D W E S TA R T G E T T I N G L A Z Y ?
14. N E W S H I N Y T H I N G S <section> <aside> <header> <footer> <canvas>* <video> <audio>
15. B L O C K & I N L I N E <span> ! & ! <div>
16. <div> <div> <div> <div> Bootstrap </div> </div> </div> </div>
17. C O P Y PA S TA W E B P R O F E S S I O N A L S
18. V E R S I O N O N E
19. V E R S I O N T W O
20. W H A T D O E S T H E ( N O N ) S E M A N T I C W E B L O O K L I K E ? <div class=“label”> <a class=“button”> <span class=“comment-date”> <span class=“close-link”> <div class=“featureList”> <div class=“table-list”>
21. W H Y D O E S S E M A N T I C M A R K U P M AT T E R ? W E B P R O F E S S I O N A L S
22. G E T T I N G A L L S E M A N T I C - a11y - Let the browser do the work for you - Easier for browsers to read - Easier for humans to read - Easier for ? to read
23. O B J E C T I F Y & E N C A P S U L A T E - OOCSS - Soy (Closure templates) - Web components - Skate - https://github.com/skatejs/skatejs - X-tag - http://www.x-tags.org/ - Polymer - www.polymer-project.org
24. A W O R D O F WA R N I N G .page > .main-content {…}
25. W H O ’ S T H I S ?
26. K E L LY J O H N S O N
27. K E L LY J O H N S O N H T T P : / / B L O G S . M C A L L . C O M / L E H I G H VA L L E Y M U S I C
28. K E L LY J O H N S O N KISS
29. K E L LY J O H N S O N KILL
30. K E L LY J O H N S O N KISS
31. S H A R P Y Keep It Lean Lazy
33. C L I F F D E N T O N
34. “ P U T T E R ” C L I F F D E N T O N S H A U N B L O O D W O R T H : H T T P : / / V I M E O . C O M / 9 8 9 5 3 9 5 2
35. S H A U N B L O O D W O R T H : H T T P : / / V I M E O . C O M / 9 8 9 5 3 9 5 2 Takes simple basic components
36. S H A U N B L O O D W O R T H : H T T P : / / V I M E O . C O M / 9 8 9 5 3 9 5 2 Combines them
37. S H A U N B L O O D W O R T H : H T T P : / / V I M E O . C O M / 9 8 9 5 3 9 5 2 Polishes them
38. S H A U N B L O O D W O R T H : H T T P : / / V I M E O . C O M / 9 8 9 5 3 9 5 2 Runs tests & QA
39. S H A U N B L O O D W O R T H : H T T P : / / V I M E O . C O M / 9 8 9 5 3 9 5 2 Produces beautiful results
40. T H A N K Y O U @ msharp