I can smell your CMS at TXJS

A shorter version of my "I can smell your CMS" talk given at Texas Javascript in April 2013.

http://2013.texasjavascript.com

You make web sites. Clients want them to include all of the latest exciting fads and "interface shizzle". You want them to render quickly and have a shelf-life longer than that hummus you bought the other day. Clients want to be able to maintain the site themselves, they know about content management systems and are going to invest big money in a real belter. You know that they'll be unleashing their 'creativity' and messing with your mojo.

This talk will explore the good, the bad, and the fugly of rich interfaces, and look at ways to champion what matters. We'll also look at examples of the damaging traces CMSs leave behind in the front-end and at ways to avoid the smell of your CMS wafting over to the user and sacrificing the all-important craftsmanship of good front-end engineering.

You can watch a video of this presentation here: http://vimeo.com/67841745

Transcript

1. SMELLCMS # HELLO THERE
2. PHILHAWKSWORTH @
3. Really the goal here is more... funny accents. ...to see if you might be interested in speaking at TXJS on April 15 TXJS # @PHILHAWKSWORTH
4. alan rickman TXJS # ALAN RICKMAN TXJS # @PHILHAWKSWORTH
5. TXJS # @PHILHAWKSWORTH
6. TXJS # @PHILHAWKSWORTH TEXAS FOREVER
7. TXJS # TXJS # @PHILHAWKSWORTH
8. DESIGN RESPONSIBLE & DEVELOPMENT TXJS # @PHILHAWKSWORTH
9. CAN DO TXJS # @PHILHAWKSWORTH ANIMATION 3D EFFECTS DATA VISUALISATION
10. BROWSER SHIZZLE TXJS # @PHILHAWKSWORTH
11. CAUTION TXJS # @PHILHAWKSWORTH
12. TXJS # @PHILHAWKSWORTH - DR IAN MALCOM ...SO PREOCCUPIED WITH WHETHER THEY COULD THAT THEY DIDN'T STOP TO THINK IF THEY SHOULD
13. TXJS # @PHILHAWKSWORTH EATEN BY DINOSAURS (POSSIBLY WHILE ON THE TOILET)
14. TXJS # @PHILHAWKSWORTH IT’S A UNIX SYSTEM - LEX MURPHY
15. EVOLUTION TXJS # @PHILHAWKSWORTH
16. SOPHISTICATION TXJS # @PHILHAWKSWORTH
17. 1996 TXJS # @PHILHAWKSWORTH
18. MCDONALDS.COM TXJS # @PHILHAWKSWORTH
19. MCDONALDS.COM TXJS # @PHILHAWKSWORTH
20. PEPSI.COM TXJS # @PHILHAWKSWORTH
21. TODAY OR THERE ABOUTS TXJS # @PHILHAWKSWORTH
22. GROLSCH.COM TXJS # @PHILHAWKSWORTH
23. GROLSCH.COM TXJS # @PHILHAWKSWORTH
24. MCDONALDS.CO.UK TXJS # @PHILHAWKSWORTH
25. 38.28 MB 405 HTTP REQUESTS TXJS # @PHILHAWKSWORTH
26. TXJS # @PHILHAWKSWORTH - DR IAN MALCOM ...SO PREOCCUPIED WITH WHETHER THEY COULD THAT THEY DIDN'T STOP TO THINK IF THEY SHOULD
27. TXJS # @PHILHAWKSWORTH - DR IAN MALCOM (PROBABLY) THAT REALLY IS AN AWFUL LOT OF HTTP REQUESTS FOR A WEBSITE ABOUT A CHICKEN WRAP
28. TXJS # @PHILHAWKSWORTH
29. MILWAUKEE POLICENEWS.COM TXJS # @PHILHAWKSWORTH
30. TXJS # @PHILHAWKSWORTH
32. EXAMPLE LEARN TXJS # @PHILHAWKSWORTH by
33. TXJS # @PHILHAWKSWORTH
34. ~ VIEW SOURCE TXJS # @PHILHAWKSWORTH
35. is CRAFT CODE TXJS # @PHILHAWKSWORTH
36. CLIENTS TXJS # @PHILHAWKSWORTH
37. ~ AVOID LOCK-IN TXJS # @PHILHAWKSWORTH
38. FREEDOM TXJS # @PHILHAWKSWORTH
39. DODGE DODGE DODGE DODGE TXJS # @PHILHAWKSWORTH
40. CMS
41. O RLY? TXJS # @PHILHAWKSWORTH
42. CODE SMELL TXJS # @PHILHAWKSWORTH
43. symptom in the source code that possibly indicates a deeper problem TXJS # @PHILHAWKSWORTH
44. CMS SMELL TXJS # @PHILHAWKSWORTH
45. CMS STINK TXJS # @PHILHAWKSWORTH
46. TXJS # @PHILHAWKSWORTH of STINK EXAMPLES
47. .html .shtml .pl .php .jsp .asp .aspx to the CONTENT COUPLED TECHNOLOGY TXJS # @PHILHAWKSWORTH
48. TIMBL SAYS
49. LOCK IN
51. http://global.burton.com /on/demandware.store /Sites-Burton_GLOBAL-Site /default /Home-Show TXJS # @PHILHAWKSWORTH
52. TXJS # @PHILHAWKSWORTH ~ ENTERPRISE LEVEL
53. ENTERPRISE FACEPALM level TXJS # @PHILHAWKSWORTH
54. http://global.burton.com /on/demandware.store /Sites-Burton_GLOBAL-Site /default /Home-Show TXJS # @PHILHAWKSWORTH
55. LOCK IN
56. FUGLY
57. URL DESIGN CRAFT TXJS # @PHILHAWKSWORTH
58. MAKE URL DESIGN A PRIORITY TXJS # @PHILHAWKSWORTH
59. TXJS # @PHILHAWKSWORTH PERFORMANCE
60. STEVE SOUDERS TXJS # @PHILHAWKSWORTH
61. OPTIMISATION TXJS # @PHILHAWKSWORTH
62. OPTIMISATION TXJS # @PHILHAWKSWORTH
63. ~ TUNING OPTIMISATIONS TRICKS CRAFT FOUNDATION TXJS # @PHILHAWKSWORTH
64. ~ TUNING OPTIMISATIONS TRICKS CRAFT CMS TXJS # @PHILHAWKSWORTH
65. .net BURP EPiSERVER
66. UI HOOKS TXJS # @PHILHAWKSWORTH
67. CLASSIC STINK TXJS # @PHILHAWKSWORTH
68. MODULARITY FLEXIBILITY & TXJS # @PHILHAWKSWORTH
69. A GOOD THING TXJS # @PHILHAWKSWORTH
70. O RLY? TXJS # @PHILHAWKSWORTH
71. A MODULE / HTML TARGET CSS JAVASCRIPT ENCAPSULATED REPEATABLE / TXJS # @PHILHAWKSWORTH
72. A MODULE / HTML TARGET CSS JAVASCRIPT ENCAPSULATED REPEATABLE / TXJS # @PHILHAWKSWORTH
73. TXJS # @PHILHAWKSWORTH
74. TXJS # @PHILHAWKSWORTH
75. ~ RENDERING PERFORMANCE KILLS TXJS # @PHILHAWKSWORTH
76. ~ MAINTENANCE NIGHTMARE TXJS # @PHILHAWKSWORTH
77. STINK
78. MAKES SOUDERS CRY TXJS # @PHILHAWKSWORTH
79. THOU SHALT NOT MAKE SOUDERS CRY TXJS # @PHILHAWKSWORTH
80. IT’S TIME TO REPLACE THOSE MM_SwapImage FUNCTIONS TXJS # @PHILHAWKSWORTH
81. DESIGN TXJS # @PHILHAWKSWORTH
82. rachel andrew TXJS # @PHILHAWKSWORTH THE POWER TO RUIN THEIR SITE
83. CORE FEATURE TXJS # @PHILHAWKSWORTH
84. WYSIWYG TXJS # @PHILHAWKSWORTH
85. WYSIWYG DANGER TXJS # @PHILHAWKSWORTH
86. WYSIWYG DANGER TXJS # @PHILHAWKSWORTH
87. WYSIWYG DANGER TXJS # @PHILHAWKSWORTH
88. WYSIWYG DANGER TXJS # @PHILHAWKSWORTH
89. WYSIWYG DANGER TXJS # @PHILHAWKSWORTH
90. WYSIwYG DANGER TXJS # @PHILHAWKSWORTH
91. TXJS # @PHILHAW WYSIWYG WYSIWYG WYSIWYG $ 
     
    
92. WYSIWYG TXJS # @PHILHAWKSWORTH
93. WYSIWYGITE TXJS # @PHILHAWKSWORTH
94. WYSIWYGITE TXJS # @PHILHAWKSWORTH
95. WYG WYSI TXJS # @PHILHAWKSWORTH
96. WTF WYSI TXJS # @PHILHAWKSWORTH
97. the DESIGNED EXPERIENCE PROTECT TXJS # @PHILHAWKSWORTH
98. the MARKUP PROTECT TXJS # @PHILHAWKSWORTH
99. <p class="footnote"><font size="4">&nbsp;</font></p> <p class="footnote"> please <a style="COLOR: #4b7228" onclick="javascript:popup('/list.html','','860','900');" href="javascript: void(0);"> <font color="#000000"><strong>click</strong></font> <font color="#000000"><strong>here</strong></font> </a> to add join our waiting list.&nbsp;&nbsp;&nbsp; </p> <p class="footnote"> <em>• <a href="/Cancellation">Cancellation Policy</a></em> </p> <p class="footnote"> <em></em>&nbsp; </p> TXJS # @PHILHAWKSWORTH
100. <p class="footnote">&nbsp;</p>&nbsp;&nbsp; <p class="footnote"><strong></strong><strong><strong>&nbsp;</p> <p class="footnote">&nbsp;</p> <p class="footnote">&nbsp;</p>&nbsp;&nbsp; <p class="footnote">&nbsp;</p>&nbsp;&nbsp; <p class="footnote">&nbsp;</p>&nbsp;&nbsp; <p class="footnote">&nbsp;</p>&nbsp;&nbsp; <p class="footnote"><strong></strong>&nbsp;</p> <p class="footnote">&nbsp;</p> TXJS # @PHILHAWKSWORTH
101. STINK
102. ROUND TRIPPING TXJS # @PHILHAWKSWORTH
103. EMERGENCY MEASURES TXJS # @PHILHAWKSWORTH TXJS # @PHILHAWKSWORTH
104. CIRCULAR STINK
105. TO FINISH TXJS # @PHILHAWKSWORTH
106. DESIGN RESPONSIBLE & DEVELOPMENT TXJS # @PHILHAWKSWORTH
107. TXJS # @PHILHAWKSWORTH ~ CHALLENGE CMS STINK
108. RUTHLESSLY PURSUE SIMPLICITY TXJS # @PHILHAWKSWORTH
109. TXJS # @PHILHAWKSWORTH ~ PROTECT YOUR CRAFT
110. USE THE NEW TOOLS WITH CARE TXJS # @PHILHAWKSWORTH
111. FIGHT FOR THE CHANCE TO DO GOOD ON THE WEB TXJS # @PHILHAWKSWORTH
112. THANKS LINKS http://stephenwaller.tumblr.com http://www.flickr.com/photos/bredgur/1323025528 http://www.flickr.com/photos/ansik/3033147092 http://www.flickr.com/photos/globevisions/2057289060 http://www.flickr.com/photos/cmbellman/2576196608 http://www.flickr.com/photos/ipeat/1492127164 http://www.flickr.com/photos/adamkjems/3559454088 http://www.flickr.com/photos/floradora1 http://www.flickr.com/photos/flowercat/2723867176 http://www.flickr.com/photos/timdrivas/6891133167 http://www.flickr.com/photos/gasi/1418791186 http://www.flickr.com/photos/employtheskinnyboy/3523608412 http://www.flickr.com/photos/marcthiele/4048845899 http://hawksworx.com http://grabaperch.com http://github.com/mojombo/jekyll http://www.rachelandrew.co.uk/archives/2012/09/21/we-need-to-talk-about-content-management
113. THANKS LET’S TALK TXJS # @PHILHAWKSWORTH @PHILHAWKSWORTH