Slide 1
Slide 1 text
LESSONS
I HAVE ‘EM
OR:
WEB COMPONENTS
BUILDING
Slide 2
Slide 2 text
THE MEOWNICA SCHOOL FOR KIDS
WHO WANT TO WEB GOOD
AND DO OTHER THINGS GOOD TOO
Slide 3
Slide 3 text
Meow meow protips meow meow
- @addyosmani
Slide 4
Slide 4 text
@notwaldorf
Slide 5
Slide 5 text
emojineer!
@notwaldorf
Slide 6
Slide 6 text
@notwaldorf
Slide 7
Slide 7 text
web components
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
API
Slide 10
Slide 10 text
MAINTENANCE
API
Slide 11
Slide 11 text
MAINTENANCE
PERFORMANCE
API
Slide 12
Slide 12 text
MAINTENANCE
A11Y
PERFORMANCE
API
Slide 13
Slide 13 text
MAINTENANCE
A11Y
API
PERFORMANCE
Slide 14
Slide 14 text
1990s
HTML 1
Slide 15
Slide 15 text
BODY A H2 IMG UL LI
HTML 1
1990s
Slide 16
Slide 16 text
HTML2
1995
Slide 17
Slide 17 text
INPUT FORM SELECT
HTML2
1995
Slide 18
Slide 18 text
VIDEO AUDIO
DIALOG CANVAS
TEXTAREA DATALIST IMG PROGRESS
INPUT FORM SELECT BUTTON
HTML5
2016
Slide 19
Slide 19 text
UNIX
1970s
Slide 20
Slide 20 text
SED AWK
GREP CAT
TAR PWD CHMOD LS SORT RM
UNIX
1970s
Slide 21
Slide 21 text
SED AWK
GREP CAT
TIME WHO HEAD TAIL TALK YES FIND ECHO
MORE LESS WHOAMI DIFF GZIP
GUNZIP MKDIR QUOTA KILL PS
TELNET FTP
LYNX DATE
LPR CP ALIAS
RMDIR MAN
TAR PWD CHMOD LS SORT RM DU
UNIX
1970s
Slide 22
Slide 22 text
be like grep
not input
Slide 23
Slide 23 text
do one thing
if you do it well
it’s ok to
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
play nice with others
composition
Slide 26
Slide 26 text
one
two
button?
Slide 27
Slide 27 text
one
two
button?
Slide 28
Slide 28 text
one
two
button?
Slide 29
Slide 29 text
one
two
button?
Slide 30
Slide 30 text
one
two
button?
Slide 31
Slide 31 text
one
two
button?
Slide 32
Slide 32 text
extensibility
plan for the future
Slide 33
Slide 33 text
make
no assumptions
have no regrets
Slide 34
Slide 34 text
transparency
don’t hide the state
Slide 35
Slide 35 text
value = “1234”
Slide 36
Slide 36 text
value = “1234”
value = “”
Slide 37
Slide 37 text
value = “1234”
value = “”
value = “”
Slide 38
Slide 38 text
nobody actually
likes surprises
(srsly)
Slide 39
Slide 39 text
can i have
the polyfill
on the side pls?
Slide 40
Slide 40 text
be like grep
not input
Slide 41
Slide 41 text
MAINTENANCE
A11Y
API
PERFORMANCE
Slide 42
Slide 42 text
earns trust
maintenance
Slide 43
Slide 43 text
semver
builds trust
Slide 44
Slide 44 text
versions have meanings!
1.2.3
Slide 45
Slide 45 text
1.2.4
patch version
Slide 46
Slide 46 text
1.3.4
minor version
Slide 47
Slide 47 text
2.3.4
major version
Slide 48
Slide 48 text
builds trust
semver
Slide 49
Slide 49 text
builds trust
testing
Slide 50
Slide 50 text
what to test:
the public api
Slide 51
Slide 51 text
lol JavaScript
fake
the “private” api
Slide 52
Slide 52 text
what to test:
the accessibility
Slide 53
Slide 53 text
what to test:
the accessibility
/accessibility-developer-tools
/
Slide 54
Slide 54 text
what to test:
the look & feel
Slide 55
Slide 55 text
HUXLEY PHANTOMCSS GHOSTSTORY MOGO
CACTUS NEEDLE CSSCRITIC SIKULI QUIXOTE
GEMINI
PERCY
what to test:
the look & feel
Slide 56
Slide 56 text
what to test:
element integration
Slide 57
Slide 57 text
have trust
users
Slide 58
Slide 58 text
(WTFM)
need docs
users
Slide 59
Slide 59 text
MAINTENANCE
A11Y
API
PERFORMANCE
Slide 60
Slide 60 text
do one thing
if you do it well
it’s ok to
Slide 61
Slide 61 text
do one thing
it’s ok to
if you do it fast
Slide 62
Slide 62 text
first paint
focus on
Slide 63
Slide 63 text
do less & be lazy
first paint
Slide 64
Slide 64 text
do less
first paint
Slide 65
Slide 65 text
attached: function() {
Polymer.RenderStatus.afterNextRender(this, function() {
this.style.pointerEvents = this.disabled ? 'none' : '';
this.addEventListener('click', this._onClick.bind(this));
});
});
Slide 66
Slide 66 text
attached: function() {
Polymer.RenderStatus.afterNextRender(this, function() {
this.style.pointerEvents = this.disabled ? 'none' : '';
this.addEventListener('click', this._onClick.bind(this));
});
});
Slide 67
Slide 67 text
be lazy
first paint
Slide 68
Slide 68 text
testing your
performance
first paint
Slide 69
Slide 69 text
results = [];
for (let i = 0; i < 1000; i++) {
console.time(‘total’);
let
console.time(‘task 1’)('video');
// Do something here
(‘task 2’);
console.timeEnd(‘total’);
Slide 70
Slide 70 text
results = [];
for (let i = 0; i < 1000; i++) {
console.time(‘total’);
let
console.time(‘task 1’)('video');
// Do something here
console.time(‘task 2’);
console.timeEnd(‘total’);
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
results = [];
for (let i = 0; i < 1000; i++) {
let start = performance.now();
let element = document.createElement('video');
// Do something here
element.offsetWidth;
let end = performance.now();
document.body.removeChild(element);
results.push(end - start);
}
Slide 73
Slide 73 text
results = [];
for (let i = 0; i < 1000; i++) {
let start = performance.now();
let element = document.createElement('video');
document.body.appendChild(element);
element.offsetWidth;
let end = performance.now();
document.body.removeChild(element);
results.push(end - start);
}
Slide 74
Slide 74 text
results = [];
for (let i = 0; i < 1000; i++) {
let start = performance.now();
let element = document.createElement('video');
document.body.appendChild(element);
element.offsetWidth;
let end = performance.now();
document.body.removeChild(element);
results.push(end - start);
}
Slide 75
Slide 75 text
results = [];
for (let i = 0; i < 1000; i++) {
let start = performance.now();
let element = document.createElement('video');
document.body.appendChild(element);
element.offsetWidth;
let end = performance.now();
document.body.removeChild(element);
results.push(end - start);
}
Slide 76
Slide 76 text
MAINTENANCE
A11Y
API
PERFORMANCE
Slide 77
Slide 77 text
accessibility is like
a blueberry muffin
- @cordeliadillon
Slide 78
Slide 78 text
accessible elements
make accessible apps
Slide 79
Slide 79 text
focus states
Slide 80
Slide 80 text
Departure City Arrival City Click Me!
focus states
Slide 81
Slide 81 text
tabindex = 0
focus states
use the platform!
Slide 82
Slide 82 text
document.activeElement
focus states
use the platform!
Slide 83
Slide 83 text
aria
use the platform!
Slide 84
Slide 84 text
NAV A ARIA-CHECKED ARIA-SELECTED
ARIA-LABEL ARIA-LABELLEDBY
ARIA-HIDDEN ARIA-DISABLED
aria
use the platform!
Slide 85
Slide 85 text
accessible
elements apps
Slide 86
Slide 86 text
elements apps
fast
Slide 87
Slide 87 text
elements apps
maintainable
Slide 88
Slide 88 text
elements apps
amazing
Slide 89
Slide 89 text
@notwaldorf