Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Over-promised & under-delivered
Search
Peter Gasston
April 24, 2014
Technology
1
220
Over-promised & under-delivered
A.K.A. You Ruined My Holiday. Given at Front End London, April 2014.
Peter Gasston
April 24, 2014
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
120
Your Reality Here
stopsatgreen
0
73
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
310
Growing Up, Getting Serious
stopsatgreen
0
64
Surveying the Landscape — November 2016
stopsatgreen
1
130
Surveying the Landscape - Fronteers
stopsatgreen
2
440
The Web vs. The Browser
stopsatgreen
0
140
Surveying the Landscape Sept. 2016
stopsatgreen
1
250
Surveying the Landscape
stopsatgreen
4
690
Other Decks in Technology
See All in Technology
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
930
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
4
1.7k
スクラム導入の舞台裏:QAエンジニアがスクラムマスターになるまで
bubo1201
0
240
Grafana エコシステムの活用事例 on ABEMA
tetsuya28
4
260
Castor - Le Task Runner PHP qui simplifie votre Workflow
lyrixx
1
280
RAG: from dumb implementation to serious results
glaforge
0
150
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
4
810
怖くないオフライン機能開発 〜基本的な技術で実現する現場向けオフライン機能 / Developing offline functions without fear ~ Offline functions for the field realized with basic technology
kaminashi
1
110
Kubernetes Meetup Tokyo #67 - KEP-3619: Fine-grained SupplementalGroups Control / k8sjp67-kep-3619
everpeace
0
140
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
470
【完全版】Dify - LINE Bot連携 考え方と実用テクニック
uezo
2
420
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
2
160
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Debugging Ruby Performance
tmm1
73
12k
How to name files
jennybc
77
99k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Agile that works and the tools we love
rasmusluckow
327
21k
Transcript
Peter Gasston @stopsatgreen broken-links.com
Technologist & Front-end Lead rehabstudio.com
Over-promised & Under-delivered
None
None
None
You Ruined My Holiday
None
None
None
http://brandperfect.org/index.php/knowledge/reports/597-fortune-global-100-mobile-web-review
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
None
None
MOBILE WEB
None
None
None
None
None
None
http://brokenmobile.tumblr.com http://wtfmobileweb.com
None
We Have A Problem
None
None
None
http://www.slideshare.net/yiibu/the-emerging-global-web
We Need To Pull Our Fingers Out
What We Can Do 1. Performance
“Over a mobile connection, it may take 2 seconds to
download the initial page of HTML, but it can be immediately rendered.
“Even as the rest of the JavaScript application is being
downloaded, the user can interact with the page. It feels 5x faster.” http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
“By rendering our page content on the server and deferring
all JavaScript execution… we’ve dropped the time to first Tweet to one-fifth of what it was.” https://blog.twitter.com/2012/improving-performance-on-twittercom
var foo = window.matchMedia('(min-width: 800px)').matches; if (foo) { // Load
functions } yepnope({ test : foo, yep : 'bigscreen.js', nope : 'smallscreen.js' });
I don’t care about: 1. ‘Retina’ photos 2. Typefaces
What We Can Do 2. Experience
None
None
<meta name="viewport" content="width=device-width, minimal-ui"> <meta name="viewport" content="width=device-width, user-scalable=no"> ✓ ✗
<input type="number"> <input type="datetime"> <input type="number" id="foo"> <label for="foo">Number</label>
None
https://developer.android.com/design/ https://developer.apple.com/library/ios/design/ http://dev.windowsphone.com/design
None
None
Doing It Right
None
None
None
Help Is On Its Way
<picture> <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"> <source media="(min-width: 18em)"
srcset="med-1.jpg, med-2.jpg 2x"> <source srcset="small-1.jpg, small-2.jpg 2x"> <img src="small-1.jpg" alt="Alt text”> </picture> http://picture.responsiveimages.org/
Preserve my battery life Don’t wreck my data plan https://plus.google.com/+NazmulIdris/posts/SYwhyUkHnfz
http://offlinefirst.org/
navigator.serviceWorker.register('/foo.js').then( function(serviceWorker) { serviceWorker.postMessage('Hello world!'); } }); this.addEventListener('install', function(e) {
// Do your thing }); https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
I’m not telling you what to think. I’m just asking
you to think.
Peter Gasston @stopsatgreen broken-links.com