Slide 1
Slide 1 text
HOW TO STAY
RELEVANT
#FOWD 04/14
Slide 2
Slide 2 text
PETER GASSTON
@stopsatgreen
broken-links.com
Slide 3
Slide 3 text
TECHNOLOGIST &
FRONT-END LEAD
rehabstudio.com
Slide 4
Slide 4 text
Desktop Tablet Mobile
March 2008 March 2014
Slide 5
Slide 5 text
THINK ABOUT
THE FUTURE
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
“By anticipating what’s
next, we can react to
today’s concerns but also
build long-term value for
people and businesses.”
//futurefriendlyweb.com/
Slide 8
Slide 8 text
CSS LAYOUTS
grid layouts
Slide 9
Slide 9 text
GRID LAYOUT
.parent {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 10em auto 40px;
}
Slide 10
Slide 10 text
GRID LAYOUT
.child {
grid-column: 2;
grid-row: 2;
}
1 2 3 4
2
3
4
Slide 11
Slide 11 text
GRID LAYOUT
a
b
1 2 3 4
2
3
4
.a { grid-column: 2 / 4; }
.b { grid-row: 1 span 3; }
Slide 12
Slide 12 text
GRID LAYOUT
b
a
1 2 3 4
2
3
4
@media(foo) {
.a, .b { grid-column: span 3; }
.b { grid-row: 3; }
}
Slide 13
Slide 13 text
?
Slide 14
Slide 14 text
//bradfrostweb.com/blog/post/atomic-web-design/
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
OOCSS
BEM
Java Applets
Dynamic Drive
React
Fruit Machine
jQuery UI
Bootstrap
Web Components
Slide 17
Slide 17 text
WEB COMPONENTS
1. Custom Elements
Slide 18
Slide 18 text
“Everything is
an element.”
//polymer-project.org/docs/start/everything.html
Slide 19
Slide 19 text
Slide 20
Slide 20 text
Slide 21
Slide 21 text
//geelen.github.io/x-gif/
Slide 22
Slide 22 text
Slide 23
Slide 23 text
//coding.smashingmagazine.com/2014/03/04/introduction-to-custom-elements/
Slide 24
Slide 24 text
WEB COMPONENTS
2. HTML Imports
Slide 25
Slide 25 text
Slide 26
Slide 26 text
WEB COMPONENTS
3. Shadow DOM
Slide 27
Slide 27 text
!
!
!
!
!
Slide 28
Slide 28 text
WEB COMPONENTS
Mutation Observers
Scoped Styles
Slide 29
Slide 29 text
?
?
Slide 30
Slide 30 text
Platform / Polyfills
Polymer Core
Polymer Elements
X-Tag Core
Brick
Polymer X-Tags
//polymer-project.org/
//mozilla.github.io/brick/
Slide 31
Slide 31 text
THE OUTCOME
Meaningful Markup
Reusable Elements
Consistent UI?
Slide 32
Slide 32 text
THE CHALLENGES
Proliferation of crap
Performance
A11y & I18n
Slide 33
Slide 33 text
“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/
Slide 34
Slide 34 text
REMEMBER
THE BASICS
Slide 35
Slide 35 text
THE BASICS
accessibility
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
THE BASICS
progressive
enhancement
Slide 38
Slide 38 text
“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/
Slide 39
Slide 39 text
THE BASICS
performance
Slide 40
Slide 40 text
//moto.oakley.com
Slide 41
Slide 41 text
“Oakley’s
monster page
of baubles.”
//hawksworx.com/blog/oakleys-monster-page-of-baubles/
Slide 42
Slide 42 text
471 HTTP requests
85.4MB page weight
2'45" DOMContentLoaded
4'10" Load
Slide 43
Slide 43 text
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/
Slide 44
Slide 44 text
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/
Slide 45
Slide 45 text
“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/
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
AUTOMATE
Slide 48
Slide 48 text
“We shape our tools and then
our tools shape us”
- Marshall McLuhan (attr.)
//vimeo.com/11697990
Slide 49
Slide 49 text
//twitter.com/SlexAxton/status/426939308998549505
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Bower
Git
Grunt
Require
Sass
B
G
G
R
S
Slide 52
Slide 52 text
//twitter.com/mattpointblank/status/356899458384019456
Slide 53
Slide 53 text
WORKFLOW
responsive workflow
Slide 54
Slide 54 text
//www.slideshare.net/stephenhay/uie-28445621
Slide 55
Slide 55 text
//www.slideshare.net/stephenhay/uie-28445621
Slide 56
Slide 56 text
//twitter.com/jmspool/status/425981610488770560
Slide 57
Slide 57 text
“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
Slide 58
Slide 58 text
HAVE EMPATHY
Slide 59
Slide 59 text
//youtube.com/watch?v=BKorP55Aqvg
Slide 60
Slide 60 text
//twitter.com/Cennydd/status/448131750099951616
Slide 61
Slide 61 text
//twitter.com/jensimmons/status/423495392001814529
Slide 62
Slide 62 text
//tabcloseddidntread.com/post/80169170722/get-the-latest-bullshit-delivered-fresh-to-your
Slide 63
Slide 63 text
//tinyurl.com/ptch4u7
Slide 64
Slide 64 text
OPEN YOUR MIND
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
“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
Slide 68
Slide 68 text
Pilkunnussija
Comma f***er
,
Slide 69
Slide 69 text
Miereneuker
Ant f***er
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
//twitter.com/thomasfuchs/status/447358565867859968
Slide 72
Slide 72 text
//www.youtube.com/watch?v=ijtQP9nwrQA
Slide 73
Slide 73 text
THE FUTURE
THE BASICS
AUTOMATE
HAVE EMPATHY
OPEN YOUR MIND
Slide 74
Slide 74 text
PETER GASSTON
@stopsatgreen
broken-links.com