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
How to Stay Relevant
Search
Peter Gasston
April 09, 2014
Technology
1
450
How to Stay Relevant
Future of Web Design, London 2014
Peter Gasston
April 09, 2014
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
160
Your Reality Here
stopsatgreen
0
95
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
88
Surveying the Landscape — November 2016
stopsatgreen
1
160
Surveying the Landscape - Fronteers
stopsatgreen
2
480
The Web vs. The Browser
stopsatgreen
0
190
Surveying the Landscape Sept. 2016
stopsatgreen
1
390
Surveying the Landscape
stopsatgreen
4
840
Other Decks in Technology
See All in Technology
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
許しとアジャイル
jnuank
1
140
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
500
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
170
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
180
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
5
700
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
240
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
580
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
78k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Writing Fast Ruby
sferik
629
62k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
RailsConf 2023
tenderlove
30
1.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Making Projects Easy
brettharned
119
6.4k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Transcript
HOW TO STAY RELEVANT #FOWD 04/14
PETER GASSTON @stopsatgreen broken-links.com
TECHNOLOGIST & FRONT-END LEAD rehabstudio.com
Desktop Tablet Mobile March 2008 March 2014
THINK ABOUT THE FUTURE
None
“By anticipating what’s next, we can react to today’s concerns
but also build long-term value for people and businesses.” //futurefriendlyweb.com/
CSS LAYOUTS grid layouts
GRID LAYOUT .parent { display: grid; grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 10em auto 40px; }
GRID LAYOUT .child { grid-column: 2; grid-row: 2; } 1
2 3 4 2 3 4
GRID LAYOUT a b 1 2 3 4 2 3
4 .a { grid-column: 2 / 4; } .b { grid-row: 1 span 3; }
GRID LAYOUT b a 1 2 3 4 2 3
4 @media(foo) { .a, .b { grid-column: span 3; } .b { grid-row: 3; } }
?
//bradfrostweb.com/blog/post/atomic-web-design/
None
OOCSS BEM Java Applets Dynamic Drive React Fruit Machine jQuery
UI Bootstrap Web Components
WEB COMPONENTS 1. Custom Elements
“Everything is an element.” //polymer-project.org/docs/start/everything.html
<img src="foo.png"> <input type="range">
<google-maps latitude="" longitude=""> <ajax-call url="" on-response=""> <video is="video-camera">
<x-gif src="foo.gif"> //geelen.github.io/x-gif/
<x-gif src="foo.gif" ping-pong>
//coding.smashingmagazine.com/2014/03/04/introduction-to-custom-elements/
WEB COMPONENTS 2. HTML Imports
<link rel="import" href="foo.html"> <g id="circles" fill="#000000"> <circle id="n" cx="50" cy="18.4"
r="18.4"/> <circle id="ne" cx="72.4" cy="27.6" r="18.4"/> <circle id="e" cx="81.6" cy="50" r="18.4"/> <circle id="se" cx="72.4" cy="72.4" r="18.4"/> <circle id="s" cx="50" cy="81.6" r="18.4"/>
WEB COMPONENTS 3. Shadow DOM
<input type="range"> ! ! ! ! ! <div> <div id="track">
<div id="thumb"></div> </div> </div> </input>
WEB COMPONENTS <template> Mutation Observers Scoped Styles
? ?
Platform / Polyfills Polymer Core Polymer Elements X-Tag Core Brick
Polymer X-Tags //polymer-project.org/ //mozilla.github.io/brick/
THE OUTCOME Meaningful Markup Reusable Elements Consistent UI?
THE CHALLENGES Proliferation of crap Performance A11y & I18n
“Web components are just a tool that will enable you
to write better… front end code. They are not a silver bullet that automagically makes everything work.” //soledadpenades.com/2014/03/25/web-components-silver-bullet/
REMEMBER THE BASICS
THE BASICS accessibility
None
THE BASICS progressive enhancement
“When an elevator fails, it’s useless. When an escalator fails,
it becomes stairs. We should be building escalators, not elevators.” //jakearchibald.com/2013/progressive-enhancement-still-important/
THE BASICS performance
//moto.oakley.com
“Oakley’s monster page of baubles.” //hawksworx.com/blog/oakleys-monster-page-of-baubles/
471 HTTP requests 85.4MB page weight 2'45" DOMContentLoaded 4'10" Load
47 percent expect a web page to load in two
seconds or less. 40 percent abandon a website that takes longer than three seconds to load. //blog.kissmetrics.com/loading-time/
79 percent of shoppers dissatisfied with performance are less likely
to visit again. 52 percent say that page load performance is important to their site loyalty. //blog.kissmetrics.com/loading-time/
“Performance is of course a hugely important measure in this
age of the mobile web, but performance for performance’s sake trivialises what we do.” //threechords.org/blog/the-web-less-engine-more-gas/
None
AUTOMATE
“We shape our tools and then our tools shape us”
- Marshall McLuhan (attr.) //vimeo.com/11697990
//twitter.com/SlexAxton/status/426939308998549505
None
Bower Git Grunt Require Sass B G G R S
//twitter.com/mattpointblank/status/356899458384019456
WORKFLOW responsive workflow
//www.slideshare.net/stephenhay/uie-28445621
//www.slideshare.net/stephenhay/uie-28445621
//twitter.com/jmspool/status/425981610488770560
“Technical skills still matter, but today making digital services that
meet users’ needs also depends on our ability to collaborate across many types of boundaries.” //alistapart.com/article/people-skills-for-web-workers
HAVE EMPATHY
//youtube.com/watch?v=BKorP55Aqvg
//twitter.com/Cennydd/status/448131750099951616
//twitter.com/jensimmons/status/423495392001814529
//tabcloseddidntread.com/post/80169170722/get-the-latest-bullshit-delivered-fresh-to-your
//tinyurl.com/ptch4u7
OPEN YOUR MIND
None
None
“If you are only skeptical, then no new ideas make
it through to you. You never learn anything new.” //www.positiveatheism.org/writ/saganbur.htm
Pilkunnussija Comma f***er ,
Miereneuker Ant f***er
None
//twitter.com/thomasfuchs/status/447358565867859968
//www.youtube.com/watch?v=ijtQP9nwrQA
THE FUTURE THE BASICS AUTOMATE HAVE EMPATHY OPEN YOUR MIND
PETER GASSTON @stopsatgreen broken-links.com