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
96
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
89
Surveying the Landscape — November 2016
stopsatgreen
1
170
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
850
Other Decks in Technology
See All in Technology
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
200
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
160
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
400
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
140
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
1
140
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
810
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
150
Azure Well-Architected Framework入門
tomokusaba
1
120
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
630
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
420
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
140
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Practical Orchestrator
shlominoach
190
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Site-Speed That Sticks
csswizardry
13
920
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Why Our Code Smells
bkeepers
PRO
340
57k
Fireside Chat
paigeccino
41
3.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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