I can smell your CMS at TXJS

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

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

April 17, 2013
Tweet

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

  31. None
  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

  50. None
  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