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
150
Your Reality Here
stopsatgreen
0
87
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
150
Surveying the Landscape - Fronteers
stopsatgreen
2
470
The Web vs. The Browser
stopsatgreen
0
180
Surveying the Landscape Sept. 2016
stopsatgreen
1
370
Surveying the Landscape
stopsatgreen
4
810
Other Decks in Technology
See All in Technology
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
320
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
660
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
290
Geminiとv0による高速プロトタイピング
shinya337
0
170
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
360
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
150
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
怖くない!はじめてのClaude Code
shinya337
0
250
Model Mondays S2E03: SLMs & Reasoning
nitya
0
220
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
420
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
Featured
See All Featured
Done Done
chrislema
184
16k
GraphQLとの向き合い方2022年版
quramy
49
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Adaptive Systems
keathley
43
2.6k
Designing Experiences People Love
moore
142
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
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