ROCKET PACKS ON ESCALATORS
CHRIS HEILMANN (@CODEPO8), AT THE FRONTEND 2015, COPENHAGEN
Stop messing with Progressive Enhancement
MITCH HEDBERG
An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.”
A PERFECT SIMILE FOR PROGRESSIVE ENHANCEMENT ON THE WEB.
christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
PROGRESSIVE ENHANCEMENT IS A HOT TOPIC AGAIN…
Crippling the Webhttp://timkadlec.com/2013/07/crippling-the-web/ The True Cost of Progressive Enhancementhttps://medium.com/@AaronGustafson/the-true-cost-of-progressive-enhancement-d395b6502979 The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancementhttp://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/ Progressive enhancement is still importanthttp://jakearchibald.com/2013/progressive-enhancement-still-important/
THE DISCUSSION RAGES ON ABOUT ALL KIND OF THINGS…
• Frameworks and their dependency on scripting (Angular)
• “Aren’t all our users using modern browsers?”
• “Do we still have to care about old browsers in a mobile age?”
• “Shouldn’t we be able to build things faster?”
PROGRESSIVE ENHANCEMENT IN A NUTSHELL:
USE TECHNOLOGY TO ENHANCE WORKING SOLUTIONS WHEN AND IF THE ENHANCEMENTS CAN BE APPLIED.
IN OTHER WORDS…
• Build on a solid foundation • Jump into the lake after
checking it is deep enough • Enhance to add convenience
AS DEVELOPERS, WE ALWAYS WANT TO LEAP-FROG AHEAD AND INNOVATE.
Photo by BiblioArchives / LibraryArchives https://www.flickr.com/photos/28853433@N02/6347652875/
AND WHEN WE CAN’T, WE FIND SCAPEGOATS.
• Browsers don’t give us what we need
• Users have outdated environments
• Standards take too long • The languages of the web aren’t
good enough • Framework $x makes me much
more effective and it needs JavaScript!
WHEN YOU WORK ON THE WEB, YOU ARE WORKING IN THE UNKNOWN…
"The Web is the most hostile software engineering environment imaginable." - Douglas Crockford
SO, CAN WE PLEASE JUST DEAL WITH THE FACT THAT WE CAN’T AND SHOULDN’T CONTROL OUR AUDIENCE’S ENVIRONMENTS?
PROGRESSIVE ENHANCEMENT IS NOT ABOUT…
• Catering to old browsers • JavaScript in/dependence • Apps vs. Web • Us developers
LET’S LOOK AT ANOTHER REAL-LIFE EXAMPLE.
People at airports are stressed, confused, don’t pay attention to things, eat badly and are not always feeling good. They are tired, they feel rushed and they want just to get things over with and get where they want to go. Others – those new to travel – are overly excited about everything and want to things right, making mistakes because they are too eager. Exactly what users on the web are like.
http://christianheilmann.com/2015/05/24/the-ryanair-approach-to-progressive-enhancement/
WHAT YOU TAKES TO FLY
• Ticket confirmation number • Origin airport • Destination airport • Proof that you are you
WHAT YOU WANT IS A BOARDING PASS!
Photo by mroach https://www.flickr.com/photos/mroach/4659815616/
CHECK-IN COUNTERS
Photo by Daniel Incandela https://www.flickr.com/photos/50378660@N00/3788243443/
+ —CHECK-IN COUNTERS…
• Need staffing • Are time-consuming • Are expensive for the company
(need trained staff) • Don’t scale well (causing
queues)
• Provide a knowledgable human being to talk to
• Have up-to-date information • Allows for dropping luggage • Gives a human interaction (no
need to feel stupid) • Offer flexibility on error
WHAT YOU WANT TO AVOID IS QUEUES!
Photo by James Emery https://www.flickr.com/photos/emeryjl/520109861/
http://fr.wikipedia.org/wiki/Air_France#/media/File:Air_France_E-Checkin.jpg
SELF-SERVICE TICKET MACHINES
+ —SELF-SERVICE TICKET MACHINES
• Not fault tolerant • No up-to-date information • Can appear intimidating • Lack a sense of
accompllishment
• Prevent queues • Great offer for power users • Allow for multi-airline use • Prevent unneccessary
printouts
+ —ONLINE CHECK-IN & MOBILE APPS
• Needs a turned on phone with full battery (no charger on flights, phone needs turning off)
• Needs a reader at the airport gate
• Might clash with TSA regulations (need to carry boarding pass whilst X-Ray of phone)
• No need to queue at all • Up-to-date information • Easy to track past and future
travels • Reminders, notifications, etc…
XHTML WAS CONSIDERED EVIL, AS ONE MISTAKE OF THE DEVELOPER MEANS THE SITE WOULDN’T RENDER.HTML5 FIXED THAT.
HTML AND CSS ARE DESIGNED TO BE FAULT TOLERANT.
https://adactio.com/journal/4272
“CUTTING THE MUSTARD”
https://justmarkup.com/log/2015/02/26/cut-the-mustard-revisited/
ENJOY WHAT BROWSERS CAN DO WHEN YOU TEST FOR CAPABILITIES…
http://caniuse.com
CHECK-IN COUNTERS
SELF-SERVICE TICKET MACHINE MOBILE APP
STATIC VERSION OF THE PRODUCT USING HTML+CSS
(TOTALLY FINE TO CREATE WITH NODE.JS)
PROGRESSIVELY ENHANCED WITH JS AND CAPABILITY TESTING
HIGH END SOLUTION FOR MOST CAPABLE ENVIRONMENTS.
HYBRID APP, USING MANIFOLD.JS / PHONEGAP?
ALL WE NEED TO PUT IN IS UNDERSTANDING THE BASICS OF THE WEB AND ITS TECHNOLOGIES.
https://developer.mozilla.org/
“We crave for new sensations but soon become indifferent to them. The wonders of yesterday are today common occurrences.”
― Nikola Tesla, My Inventions