Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Best viewed with... Theme Conf 2015

Adam Onishi
September 03, 2015

Best viewed with... Theme Conf 2015

Are we doomed to see history repeat itself? With the amount of client-side MVC frameworks and the upcoming implementation of the ES6 syntax, will we soon be seeing a repeat of the “browser wars”. Will more websites only work in a select number of browsers with the capabilities to run their code?

Are we breaking the inherent robustness of the web? The main facets that effect everything on the web: performance, accessibility, interaction. What are these new tools serving most?

My aim is to take a look at the current state of the web and whether progressive enhancement is still plausible. Instead looking at what new tools can offer. Do some of these new frameworks start to redress the balance and serve all facets of the web.

Adam Onishi

September 03, 2015
Tweet

More Decks by Adam Onishi

Other Decks in Technology

Transcript

  1. @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. @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. @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
  4. @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
  5. @onishiweb – Jake Archibald “Every phase of the enhancement absolutely

    must have a real user” http://www.fivesimplesteps.com/products/modern-progressive-enhancement
  6. @onishiweb – Christian Heilmann “The love we give [old browsers]

    is really bordering on necrophilia at times.”
  7. @onishiweb Photo of Patrick at FEL (if possible) @onishiweb Photo

    from FEL One Day - https://flic.kr/p/gRzhY2
  8. @onishiweb gulp.task('critical', function () { penthouse({ url : 'http://localhost:8000/index.html', css

    : 'public/styles.css', width : 720, // viewport width height : 500 // viewport height }, function(err, criticalCss) { if (err) { // handle error console.log('error', err); } fs.writeFileSync('public/critical.css', criticalCss); }); });
  9. @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"; });
  10. @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; }
  11. @onishiweb – Peter Herlihy, GDS Team “1.1% of people aren’t

    getting JavaScript enhancements (1 in 93).”
  12. @onishiweb – Jeremy Keith “Brilliant easter egg in the newly-

    redesigned nasa.gov — if JavaScript fails, you are immersed in the experience of deep space”
  13. @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 }); });
  14. @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.”
  15. @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); }); }
  16. @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); } ) ); });
  17. @onishiweb – MDN “Having modified network requests wide open to

    man in the middle attacks would be really bad.”
  18. @onishiweb – William Gibson “The future is already here -

    it’s just not very evenly distributed.”