Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Into enemy territory: Architecting client-side code for syndication
Hello!
Introduction: What’s all this then? <ul><li>Sharing content around the web or a large site </li></ul><ul><li>Worked exampl...
bbc.co.uk One site? <ul><li>Several areas </li></ul><ul><ul><li>Journalism </li></ul></ul><ul><ul><li>Audio & Music </li><...
‘ Barley’: Out with the old… <ul><li>Let’s party like it’s 1999: </li></ul><ul><ul><li>IE3 & NS4 </li></ul></ul><ul><ul><l...
‘ Barlesque’: …In with the new <ul><li>2008: </li></ul><ul><ul><li>IE6 </li></ul></ul><ul><ul><li>1024px monitors </li></u...
‘ Barlesque’: …In with the new <ul><li>2008: </li></ul><ul><ul><li>IE6 </li></ul></ul><ul><ul><li>1024px monitors </li></u...
So…
Namespacing
Namespacing
Namespacing <ul><li>Chose the prefix “blq” </li></ul><ul><li>class=“blq-main” </li></ul><ul><li>var blq = new function(){}...
Namespacing <ul><li>var blq = new function (){ </li></ul><ul><li>var computedStyles; </li></ul><ul><li>this.init = functio...
CSS specificity
CSS specificity
CSS specificity <ul><li>CSS: </li></ul><ul><li>#foo {color:green;} </li></ul><ul><li>.bar {color:red;} </li></ul><ul><li>d...
CSS specificity <ul><li>CSS: </li></ul><ul><li>#foo.bar {color:green;}  </li></ul><ul><li>#foo {color:red;} </li></ul><ul>...
CSS specificity <ul><li>CSS: </li></ul><ul><li>.bar {color:red;}  </li></ul><ul><li>p, div {color:green;} </li></ul><ul><l...
CSS specificity <ul><li>CSS: </li></ul><ul><li>.bar p {color:green;}  </li></ul><ul><li>.bar {color:blue;}  </li></ul><ul>...
CSS reset
CSS reset
CSS reset <ul><li>/***Reset***/ </li></ul><ul><li>body {font-size:62.5%; font-family:verdana,helvetica,arial,sans-serif; l...
CSS reset <ul><li>/***Reset class***/ </li></ul><ul><li>.blq-rst {font-family:verdana,helvetica,arial,sans-serif; text-sha...
Layers
Layers
Layers <ul><li>CSS z-index </li></ul><ul><li>Flash </li></ul><ul><li>Form elements </li></ul>
Half way…
Customisation
Customisation
Customisation <ul><li>Make it work off the shelf </li></ul><ul><li>With optional customisation </li></ul>
Patterns over prescription
Patterns over prescription
Patterns over prescription <ul><li>Leave system open </li></ul><ul><li>Agree patterns for it’s use </li></ul><ul><li>Trust...
Patterns over prescription
Versioning and rollback
Versioning and rollback
Versioning and rollback
Developer tools
Developer tools
Developer tools
Developer tools
Developer tools
Developer tools <ul><li>A note of caution: </li></ul><ul><li>Security </li></ul><ul><li>Editorial issues </li></ul>
Developer tools
Compression
Compression <ul><li>Compressing / optimising JS, CSS and XHTML saves: </li></ul><ul><li>Your serving bandwidth </li></ul><...
Compression <ul><li>JS, CSS: YUI </li></ul><ul><li>Line breaks, spaces, tabs </li></ul><ul><li>Some comments </li></ul><ul...
Compression <ul><li>Some issues </li></ul><ul><li>IE6 line height </li></ul><ul><li>Conditional comments </li></ul>
Compression
Documentation
Documentation <ul><li>Installed with the product </li></ul><ul><li>Worked examples and test cases </li></ul>
Documentation <ul><li>A word about test driven development </li></ul><ul><li>Not easy with client side code </li></ul><ul>...
Documentation <ul><li>bbc.co.uk/includes/blq/ </li></ul>
Questions?
Credits <ul><li>Contact:  </li></ul><ul><li>[email_address] </li></ul><ul><li>Slides:  </li></ul><ul><li>http://www.slides...
Upcoming SlideShare
Loading in …5
×

Into Enemy Territory: Architecting Client-side Code for Syndication

4,539 views

Published on

Published in: Technology
  • Be the first to comment

Into Enemy Territory: Architecting Client-side Code for Syndication

  1. Into enemy territory: Architecting client-side code for syndication
  2. Hello!
  3. Introduction: What’s all this then? <ul><li>Sharing content around the web or a large site </li></ul><ul><li>Worked example: bbc.co.uk global templates </li></ul>
  4. bbc.co.uk One site? <ul><li>Several areas </li></ul><ul><ul><li>Journalism </li></ul></ul><ul><ul><li>Audio & Music </li></ul></ul><ul><ul><li>Vision </li></ul></ul><ul><ul><li>World Service </li></ul></ul><ul><li>Different architectures & editorial needs </li></ul>
  5. ‘ Barley’: Out with the old… <ul><li>Let’s party like it’s 1999: </li></ul><ul><ul><li>IE3 & NS4 </li></ul></ul><ul><ul><li>800px monitors </li></ul></ul><ul><ul><li>56k Dial-up </li></ul></ul>
  6. ‘ Barlesque’: …In with the new <ul><li>2008: </li></ul><ul><ul><li>IE6 </li></ul></ul><ul><ul><li>1024px monitors </li></ul></ul><ul><ul><li>Broadband </li></ul></ul>
  7. ‘ Barlesque’: …In with the new <ul><li>2008: </li></ul><ul><ul><li>IE6 </li></ul></ul><ul><ul><li>1024px monitors </li></ul></ul><ul><ul><li>Broadband </li></ul></ul><ul><li>But: With increased complexity of HTML, CSS, and JS comes increased chance of clashes </li></ul>
  8. So…
  9. Namespacing
  10. Namespacing
  11. Namespacing <ul><li>Chose the prefix “blq” </li></ul><ul><li>class=“blq-main” </li></ul><ul><li>var blq = new function(){} </li></ul><ul><li>bbc.co.uk/includes/blq/ </li></ul>
  12. Namespacing <ul><li>var blq = new function (){ </li></ul><ul><li>var computedStyles; </li></ul><ul><li>this.init = function(){ </li></ul><ul><li>… </li></ul><ul><li>} </li></ul><ul><li>function private(){ </li></ul><ul><li>… </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  13. CSS specificity
  14. CSS specificity
  15. CSS specificity <ul><li>CSS: </li></ul><ul><li>#foo {color:green;} </li></ul><ul><li>.bar {color:red;} </li></ul><ul><li>div {color:blue} </li></ul><ul><li>Markup: </li></ul><ul><li><div id=“foo” class=“bar”> </li></ul><ul><li>What colour am I? </li></ul><ul><li></div> </li></ul>
  16. CSS specificity <ul><li>CSS: </li></ul><ul><li>#foo.bar {color:green;} </li></ul><ul><li>#foo {color:red;} </li></ul><ul><li>Markup: </li></ul><ul><li><div id=“foo” class=“bar”> </li></ul><ul><li>What colour am I? </li></ul><ul><li></div> </li></ul>
  17. CSS specificity <ul><li>CSS: </li></ul><ul><li>.bar {color:red;} </li></ul><ul><li>p, div {color:green;} </li></ul><ul><li>Markup: </li></ul><ul><li><div class=“bar”> </li></ul><ul><li><p>What colour am I?</p> </li></ul><ul><li></div> </li></ul>
  18. CSS specificity <ul><li>CSS: </li></ul><ul><li>.bar p {color:green;} </li></ul><ul><li>.bar {color:blue;} </li></ul><ul><li>p, div {color:red;} </li></ul><ul><li>Markup: </li></ul><ul><li><div class=“bar”> </li></ul><ul><li><p>What colour am I?</p> </li></ul><ul><li></div> </li></ul>
  19. CSS reset
  20. CSS reset
  21. CSS reset <ul><li>/***Reset***/ </li></ul><ul><li>body {font-size:62.5%; font-family:verdana,helvetica,arial,sans-serif; line-height:1; text-shadow: 0 0 0 #000} </li></ul><ul><li>body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,p,blockquote,th,td,hr{margin:0; padding:0} </li></ul><ul><li>h1,h2,h3,h4,h5,h6 {font-size:100%} </li></ul><ul><li>table {border-collapse:collapse; border-spacing:0} </li></ul><ul><li>caption {text-align:left; font-weight:normal} </li></ul><ul><li>th {text-align:left} </li></ul><ul><li>cite,address {font-style:normal} </li></ul><ul><li>ol,ul {list-style:none} </li></ul><ul><li>sub,sup {line-height:2}/*IE6 has different lineheight 1*/ </li></ul><ul><li>img {border:none} </li></ul><ul><li>pre,code {font-size:1.2em}/*This is overridden to 14px for non-IE*/ </li></ul><ul><li>fieldset {border:0} </li></ul><ul><li>q:before,q:after {content:''} </li></ul>
  22. CSS reset <ul><li>/***Reset class***/ </li></ul><ul><li>.blq-rst {font-family:verdana,helvetica,arial,sans-serif; text-shadow: 0 0 0 #000} </li></ul><ul><li>.blq-rst dl,.blq-rst dt,.blq-rst dd,.blq-rst ul,.blq-rst ol,.blq-rst li,.blq-rst h1,.blq-rst h2,.blq-rst h3,.blq-rst h4,.blq-rst h5,.blq-rst h6,.blq-rst pre,.blq-rst form,.blq-rst fieldset,.blq-rst caption,.blq-rst p,.blq-rst blockquote,.blq-rst th,.blq-rst td,.blq-rst hr{margin:0; padding:0; line-height:1; font-size:100%; background-color:transparent } </li></ul><ul><li>.blq-rst *,.blq-rst input, .blq-rst a:link, .blq-rst a:visited {margin:0; padding:0; line-height:1; font-size:100%;font-family:verdana,helvetica,arial,sans-serif;text-decoration:none; font-weight:normal} </li></ul><ul><li>.blq-rst table {border-collapse:collapse; border-spacing:0} </li></ul><ul><li>.blq-rst caption,.blq-rst legend {text-align:left; font-weight:normal} </li></ul><ul><li>.blq-rst th {text-align:left} </li></ul><ul><li>.blq-rst cite,.blq-rst address {font-style:normal} </li></ul><ul><li>.blq-rst ol,.blq-rst ul {list-style:none} </li></ul><ul><li>.blq-rst sub,.blq-rst sup {line-height:2} </li></ul><ul><li>.blq-rst img {border:none} </li></ul><ul><li>.blq-rst input,.blq-rst pre,.blq-rst code {font-size:1.1em} </li></ul><ul><li>.blq-rst fieldset {border:0} </li></ul><ul><li>.blq-rst q:before,.blq-rst q:after {content:''} </li></ul><ul><li>.blq-rst h1,.blq-rst h2,.blq-rst h3,.blq-rst h4,.blq-rst h5,.blq-rst h6,.blq-rst th,.blq-rst strong {font-weight:bold} </li></ul><ul><li>.blq-rst dt {font-weight:normal} </li></ul>
  23. Layers
  24. Layers
  25. Layers <ul><li>CSS z-index </li></ul><ul><li>Flash </li></ul><ul><li>Form elements </li></ul>
  26. Half way…
  27. Customisation
  28. Customisation
  29. Customisation <ul><li>Make it work off the shelf </li></ul><ul><li>With optional customisation </li></ul>
  30. Patterns over prescription
  31. Patterns over prescription
  32. Patterns over prescription <ul><li>Leave system open </li></ul><ul><li>Agree patterns for it’s use </li></ul><ul><li>Trust the users </li></ul>
  33. Patterns over prescription
  34. Versioning and rollback
  35. Versioning and rollback
  36. Versioning and rollback
  37. Developer tools
  38. Developer tools
  39. Developer tools
  40. Developer tools
  41. Developer tools
  42. Developer tools <ul><li>A note of caution: </li></ul><ul><li>Security </li></ul><ul><li>Editorial issues </li></ul>
  43. Developer tools
  44. Compression
  45. Compression <ul><li>Compressing / optimising JS, CSS and XHTML saves: </li></ul><ul><li>Your serving bandwidth </li></ul><ul><li>User bandwidth </li></ul><ul><li>Obfuscation and comments </li></ul>
  46. Compression <ul><li>JS, CSS: YUI </li></ul><ul><li>Line breaks, spaces, tabs </li></ul><ul><li>Some comments </li></ul><ul><li>CSS sprites </li></ul><ul><li>Caching </li></ul>
  47. Compression <ul><li>Some issues </li></ul><ul><li>IE6 line height </li></ul><ul><li>Conditional comments </li></ul>
  48. Compression
  49. Documentation
  50. Documentation <ul><li>Installed with the product </li></ul><ul><li>Worked examples and test cases </li></ul>
  51. Documentation <ul><li>A word about test driven development </li></ul><ul><li>Not easy with client side code </li></ul><ul><li>particularly HTML and CSS </li></ul>
  52. Documentation <ul><li>bbc.co.uk/includes/blq/ </li></ul>
  53. Questions?
  54. Credits <ul><li>Contact: </li></ul><ul><li>[email_address] </li></ul><ul><li>Slides: </li></ul><ul><li>http://www.slideshare.net/event/web-20-expo-europe-2008 </li></ul><ul><li>(Some rights reserved: http://creativecommons.org/licenses/by-sa/2.0/deed.en_GB ) </li></ul><ul><li>Barlesque contributors: </li></ul><ul><li>Dan Littler, Fraser Pearce, Julie Dodd, Lyra Xharra-loxha, Nick Holmes, Sean Carroll and the FM&T Central CSD team </li></ul><ul><li>Photos: </li></ul><ul><li>From www.flickr.com , in appearance order: james_gordon, thost, adactio, tilwe, brewbooks, dave_7, untitled_blue, tanakawho, svadilfari, photo2c, fsse8info </li></ul>

×