Best viewed with... SOTB5

Fc7368fd45560e1e7401bc80684f5867?s=47 Adam Onishi
September 12, 2015

Best viewed with... SOTB5

My updated Best viewed with talk from State of the Browser 5

Fc7368fd45560e1e7401bc80684f5867?s=128

Adam Onishi

September 12, 2015
Tweet

Transcript

  1. 8.

    @onishiweb Chrome Firefox IE Safari Opera UC Browser Safari (iOS)

    Opera Mini Android Browser Amazon Silk YaBrowser Maxthon Iron Nokia Browser Sea Monkey Avant Camino Epiphany OmniWeb Konqueror Galeon Swiftfox Edge
  2. 9.

    @onishiweb Chrome (v44) - Cache.add() - Request.context() - Notification.data Edge

    - img srcset - CSS Regions - Arrow functions Firefox (v40) - Improved Dev tools - IndexedDB transactions - Fetch API (v39) Safari (v9) - Backdrop filters - CSS scroll snapping - Content blocking
  3. 18.

    @onishiweb – Paul Robert Lloyd “By making fewer assumptions about

    context and interface, focusing more on users’ tasks and goals, we can create more adaptable products.” http://alistapart.com/article/thinking-responsively-a- framework-for-future-learning
  4. 47.

    @onishiweb var f = new FontFace("open_sansbold", "url(/fonts/ opensans-bold-webfont.woff)", {}); f.load().then(function

    (loadedFace) { document.fonts.add(loadedFace); document.body.style.fontFamily = "open_sansbold, serif"; });
  5. 48.

    @onishiweb var f = new FontFace("open_sansbold", "url(/fonts/ opensans-bold-webfont.woff)", {}); f.load().then(function

    (loadedFace) { document.body.className += ' fonts—loaded'; }); /* CSS */ p { visibility: hidden; } .fonts-loaded p { visibility: visible; }
  6. 53.

    @onishiweb – Peter Herlihy, GDS Team “1.1% of people aren’t

    getting JavaScript enhancements (1 in 93).”
  7. 56.

    @onishiweb – Jeremy Keith “Brilliant easter egg in the newly-

    redesigned nasa.gov — if JavaScript fails, you are immersed in the experience of deep space”
  8. 58.
  9. 64.

    @onishiweb app.get('/', function(req, res){ // React.renderToString takes your component //

    and generates the markup ReactApp = React.createFactory( require('../ components/index.js') ); reactHtml = React.renderToString( ReactApp({}) ); // Output html rendered by react res.render('index.ejs', { reactOutput: reactHtml }); });
  10. 67.

    @onishiweb – Jack Franklin, GoCardless “If you visit it in

    a ‘good’ browser with JS on, you get an incredibly snappy React app, if not, you hit the server on every click.”
  11. 82.

    @onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //

    Registration was successful console.log('ServiceWorker registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }
  12. 83.

    @onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //

    Registration was successful console.log('ServiceWorker registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }
  13. 84.

    @onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //

    Registration was successful console.log('ServiceWorker registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }
  14. 85.

    @onishiweb self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(‘content-cache-v1’)

    .then(function(cache) { return cache.addAll([ '/index.html', '/css/main.min.css', '/main.js' ]);
  15. 86.

    @onishiweb self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(‘content-cache-v1')

    .then(function(cache) { return cache.addAll([ '/index.html', '/css/main.min.css', '/main.js' ]);
  16. 87.

    @onishiweb self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(‘content-cache-v1’)

    .then(function(cache) { return cache.addAll([ '/index.html', '/css/main.min.css', '/main.js' ]);
  17. 88.

    @onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache

    hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
  18. 89.

    @onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache

    hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
  19. 90.

    @onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache

    hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
  20. 91.

    @onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache

    hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
  21. 99.

    @onishiweb – MDN “Having modified network requests wide open to

    man in the middle attacks would be really bad.”
  22. 107.

    @onishiweb – Bruce Lawson “It never pays to make too

    many assumptions about your users.”