Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Opening Silos in Big Brilliant Corporations Part 2

Frontend NE
December 07, 2017

Opening Silos in Big Brilliant Corporations Part 2

Joe Hart from the BBC's GEL (Global Experience Language) team tells us about how the BBC is reinventing itself into a culture of embracing constant change and how they're helping open the silos between teams.

Frontend NE

December 07, 2017
Tweet

More Decks by Frontend NE

Other Decks in Technology

Transcript

  1. src: url(“/gel/static/font.woff2"); src: url(“/gel/static/font.woff2"); src: url(“/news/static/font.woff2"); src: url(“/news/static/font.woff2"); src: url(“/sport/static/font.woff2");

    src: url(“/sport/static/font.woff2"); src: url(“/iwonder/static/font.woff2"); src: url(“/iwonder/static/font.woff2"); src: url(“/cbbc/static/font.woff2"); src: url(“/cbbc/static/font.woff2"); src: url(“/weather/static/font.woff2"); src: url(“/weather/static/font.woff2"); src: url(“/music/static/font.woff2"); src: url(“/music/static/font.woff2"); src: url(“/cbeebies/static/font.woff2"); src: url(“/cbeebies/static/font.woff2"); src: url(“/earth/static/font.woff2"); src: url(“/earth/static/font.woff2"); src: url(“/food/static/font.woff2"); src: url(“/food/static/font.woff2");
  2. Reith Sans Regular Reith Sans Medium Reith Sans Light Reith

    Sans Bold Reith Sans Extra Bold Reith Sans Regular Italic Reith Sans Medium Italic Reith Sans Light Italic Reith Sans Bold Italic Reith Sans Extra Bold Italic Reith Serif Regular Reith Serif Medium Reith Serif Light Reith Serif Bold Reith Serif Extra Bold Reith Serif Regular Italic Reith Serif Medium Italic Reith Serif Light Italic Reith Serif Bold Italic Reith Serif Extra Bold Italic
  3. 2MB

  4. Other 20kB Images 1818kB HTML 53kB Stylesheets 90kB Scripts 459kB

    Fonts 113kB Video 819kB Average Bytes per Page Total: 3.4MB Source: httpdarchive.org
  5. Cache: Set Max Age to at least 1 year Compress:

    use WOFF and/or WOFF2. Only load what you need
  6. @font-face { font-family: "MySuperCoolFont"; src: url("/static/font.woff2"); } .cool-font { font-family:

    "MySuperCoolFont", Sans; } page.html style.css <body class="cool-font"> <div> <h1>My Super Cool Website</h1> </div> </body>
  7. if (document.documentElement.className.indexOf('cool-font')!=-1) { var coolFont = new FontFaceObserver('MySuperCoolFont'); coolFont.load() .then(()

    =>{ document.documentElement.className += " cool-font-loaded"; }) .catch((e) =>{ console.log('Failed to load super cool font'); }) }
  8. <html class="cool-font"> <body> <div> <h1>Welcome to my super cool website</h1>

    </div> </body> </html> page.html style.css @font-face { font-family: "MySuperCoolFont"; src: url("/static/font.woff2"); } html { font-family: Arial, sans; } html.cool-font-loaded { font-family: “MySuperCoolFont", Arial, Sans; }
  9. <html class="cool-font cool-font-loaded"> <body> <div> <h1>Welcome to my super cool

    website</h1> </div> </body> </html> page.html @font-face { font-family: "MySuperCoolFont"; src: url("/static/font.woff2"); } html { font-family: Arial, sans; } html.cool-font-loaded { font-family: “MySuperCoolFont", Arial, Sans; } style.css
  10. Useful Links: •Google Web Font Optimisation •Zach Leat’s Comprehensive Guide

    To Font Loading Strategies •Blog about BBC Reith Font