Slide 1
Slide 1 text
HTML5
FOR THE PHP DEVELOPER
Tuesday, May 22, 12
Slide 2
Slide 2 text
https://bitly.com/bundles/
o_3eprjb8mhb/7
Tuesday, May 22, 12
Slide 3
Slide 3 text
https://joind.in/6503
Tuesday, May 22, 12
Slide 4
Slide 4 text
jakefolio
http://jakefolio.com
[email protected]
Jake Smith
Tuesday, May 22, 12
Slide 5
Slide 5 text
? ? ?
QUESTION:
What technologies
define HTML5
Tuesday, May 22, 12
Slide 6
Slide 6 text
HTML ? ?
QUESTION:
What technologies
define HTML5
Tuesday, May 22, 12
Slide 7
Slide 7 text
HTML CSS ?
QUESTION:
What technologies
define HTML5
Tuesday, May 22, 12
Slide 8
Slide 8 text
HTML CSS JS
QUESTION:
What technologies
define HTML5
Tuesday, May 22, 12
Slide 9
Slide 9 text
NOW FOR WEBSITES
Tuesday, May 22, 12
Slide 10
Slide 10 text
HTML5
HISTORY LESSON
Tuesday, May 22, 12
Slide 11
Slide 11 text
HTML Working Group Created
World Wide Web Consortium (W3C) Created
CSS 1.0 Introduced
HTML 3.2 and 4.0 release
XHTML 1.0 released
1994
1997
1999
Tuesday, May 22, 12
Slide 12
Slide 12 text
First draft of HTML5 Released
Apple, Mozilla, and Opera form WHATWG
Web Hypertext Application Technology
Working Group
2004
2008
Tuesday, May 22, 12
Slide 13
Slide 13 text
New doctype
THEN:
NOW:
Tuesday, May 22, 12
Slide 14
Slide 14 text
1. Release HTML5
2. Create Awesome Logo
3. Profit?
HTML5 Marketing
Tuesday, May 22, 12
Slide 15
Slide 15 text
HTML5homi.es
Tuesday, May 22, 12
Slide 16
Slide 16 text
HTML5
NEW ELEMENTS
Tuesday, May 22, 12
Slide 17
Slide 17 text
• article
• aside
• audio
• canvas
• command
• datalist
• details
• embed
• figcaption
• figure
• footer
• header
• hgroup
• keygen
• mark
• meter
• nav
• output
• progress
• rp
• rt
• ruby
• section
• source
• summary
• time
• video
• wbr
New HTML Elements
Tuesday, May 22, 12
Slide 18
Slide 18 text
• article
• aside
• audio
• canvas
• command
• datalist
• details
• embed
• figcaption
• figure
• footer
• header
• hgroup
• keygen
• mark
• meter
• nav
• output
• progress
• rp
• rt
• ruby
• section
• source
• summary
• time
• video
• wbr
New HTML Elements
Tuesday, May 22, 12
Slide 19
Slide 19 text
HTML5
SEMANTIC TAGS
Tuesday, May 22, 12
Slide 20
Slide 20 text
HEADER
NAV
ASIDE
SECTION
FOOTER
ARTICLE
HEADER
FOOTER
Tuesday, May 22, 12
Slide 21
Slide 21 text
Tuesday, May 22, 12
Slide 22
Slide 22 text
LONG LIVE THE DIV!
An article element is "independent" in that its contents could stand
alone, for example in syndication. However, the element is still
associated with its ancestors; for instance, contact information that
applies to a parent body element still covers the article as well.
Tuesday, May 22, 12
Slide 23
Slide 23 text
figure/figcaption
Explaining the awesomeness of this photo
Tuesday, May 22, 12
Explaining the awesomeness of this photo
Tuesday, May 22, 12
Slide 24
Slide 24 text
HTML5 Shiv to the Rescue
https://github.com/aFarkas/html5shiv
Tuesday, May 22, 12
Slide 25
Slide 25 text
hgroup
Welcome to HTML5 at PHP Tek
Prepare for Awesomeness
Tuesday, May 22, 12Slide 26
Slide 26 text
meter/progress
Question 3
Question 6
Question 16
25%
Loading
Tuesday, May 22, 12
Slide 27
Slide 27 text
time
Tuesday, May 22, 12
Slide 28
Slide 28 text
• tabindex
• hidden
• contextMenu
• spellCheck
• data-*
• ContentEditable
• draggable
• dropzone
• microdata attributes
• ARIA
New HTML Attributes
Tuesday, May 22, 12
Slide 29
Slide 29 text
New HTML Attributes
• tabindex
• hidden
• contextMenu
• spellCheck
• data-*
• ContentEditable
• draggable
• dropzone
• microdata attributes
• ARIA
Tuesday, May 22, 12
Slide 30
Slide 30 text
Tabindex
Only for screen readers
.screen-reader {
display: inline-block;
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
}
Tuesday, May 22, 12
Slide 31
Slide 31 text
data-*
var pic = document.getElementById('img-profile-35123');
console.log('CAPTION: ' + pic.dataset.caption);
Tuesday, May 22, 12
var pic = document.getElementById('img-profile-35123');
console.log('CAPTION: ' + pic.dataset.caption);
Tuesday, May 22, 12
Slide 32
Slide 32 text
ContentEditable
To Do List
- Get Badge from Keith
- Show up Daniel in Javascript
- MOAR COFFEE
-
Tuesday, May 22, 12
Slide 33
Slide 33 text
Draggable
Hello
World
var region = document.getElementById('region');
var draggables = document.querySelectorAll('div[draggable]');
for (var i = 0; i <= draggables.length-1; i++) {
draggables[i].addEventListener('dragstart', function(e) {
this.style.opacity = 0.4;
});
draggables[i].addEventListener('dragend', function(e) {
this.style.opacity = 1;
});
}
Tuesday, May 22, 12
Slide 34
Slide 34 text
HTML5
FORMS
Tuesday, May 22, 12
Slide 35
Slide 35 text
• email
• tel
• url
• search
• color
• number
• range
• date
New Form Inputs
Tuesday, May 22, 12
Slide 36
Slide 36 text
• email
• tel
• url
• search
• color
• number
• range
• date
New Form Inputs
Tuesday, May 22, 12
Slide 37
Slide 37 text
Tel
Tuesday, May 22, 12
Slide 38
Slide 38 text
Email
Tuesday, May 22, 12
Slide 39
Slide 39 text
URL
Tuesday, May 22, 12
Slide 40
Slide 40 text
Range/Number
Tuesday, May 22, 12
Slide 41
Slide 41 text
Date
Tuesday, May 22, 12
Slide 42
Slide 42 text
• placeholder
• autofocus
• autocomplete
• spellcheck
• maxlength
• required
• pattern
• novalidate
• formaction
• formmethod
• formtarget
• form
• accept
• multiple
Attributes Validation Overrides Files
New Form Attributes
Tuesday, May 22, 12
Slide 43
Slide 43 text
HTML5
AUDIO/VIDEO
Tuesday, May 22, 12
Slide 44
Slide 44 text
Create Basic Video
Tuesday, May 22, 12
Slide 45
Slide 45 text
Audio/Video Attributes
autoplay
controls
loop
preload
poster
Tuesday, May 22, 12
Slide 46
Slide 46 text
h.264 OGG/OGV WEBM WMV MP3
Safari X X X
Chrome X X X X
Firefox X X
IE (9+) X X X X
Opera X X
IOS X X
Audio/Video Attributes
Tuesday, May 22, 12
Slide 47
Slide 47 text
Video Convertors
Miro
FirefOGG
Handbrake
Tuesday, May 22, 12
Slide 48
Slide 48 text
httpd.conf
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Tuesday, May 22, 12
Slide 49
Slide 49 text
Audio/Video API
Audio/Video Events
canplay, canplaythrough, playing, waiting,
loadedmetadata, loadeddata
play/pause
volume
currentTime/duration
canPlayType
muted/paused
Tuesday, May 22, 12
Slide 50
Slide 50 text
Audio/Video API
var player = document.getElementById('nyan-player');
player.addEventListener('canplay', function() {
this.volume = 0.7;
this.play();
});
function rewind() {
player.currentTime -= 15;
}
function fastForward() {
player.currentTime += 15;
}
function togglePlay(e) {
if (player.readyState <= 1)
return false;
if(player.paused) {
player.play();
e.target.innerText = 'Pause';
} else {
player.pause();
e.target.innerText = 'Play';
}
}
Tuesday, May 22, 12
Slide 51
Slide 51 text
Tuesday, May 22, 12
Slide 52
Slide 52 text
Tuesday, May 22, 12
Slide 53
Slide 53 text
CSS3
Tuesday, May 22, 12
Slide 54
Slide 54 text
CSS3
INTRO SELECTORS
Tuesday, May 22, 12
Slide 56
Slide 56 text
.menu
li
li
a
Descendants
Ancestor
Descendant Selector
Tuesday, May 22, 12
Slide 57
Slide 57 text
#CSS
ul li { color: green; }
ul > li { color: red; }
- Top Level
- Top Level
- Sub Level
- Sub Level
Slide 58
Slide 58 text
ul
li
li
ol
Children
Parent
li
Selector Context
Tuesday, May 22, 12
Slide 59
Slide 59 text
#CSS
.module { margin: 0; }
.module + .module { margin-left: 25px; }
The adjacent sibling selector selects all elements that are the
adjacent siblings of a specified element.
* Module #2 and #3 will have margin applied.
Adjacent Sibling Selector
Tuesday, May 22, 12
Module
Module #2
Module #3
Slide 60
Slide 60 text
div
.module
.module
.module + +
Adjacent Sibling Selector
Tuesday, May 22, 12
Slide 61
Slide 61 text
#CSS
h2 ~ p {
color: red;
}
Primary Headline
General Paragraph - Not Selected
Secondary Headline
Will be Selected
Will be Selected
Extra Content
Will be Selected
The selector matches elements that are siblings of a given element. * Every element after the h2 will be selected CSS3 General Sibling Tuesday, May 22, 12Slide 62
Slide 62 text
div
p
h1
p
h2
General Sibling
Tuesday, May 22, 12
Slide 63
Slide 63 text
It’s a numbers game.
100
#header .my-class
[alt]
div
10 1
Points Per Selector
:after
CSS Specificity
Tuesday, May 22, 12
Slide 64
Slide 64 text
Who Wins??
?
WINNER
#1
#slider
#2
.two-col .container .primary .content ul
CSS Face Off
Tuesday, May 22, 12
Slide 65
Slide 65 text
Who Wins??
1
WINNER
#1
#slider
100 Points
#2
.two-col .container .primary .content ul
41 Points
CSS Face Off
Tuesday, May 22, 12
Slide 66
Slide 66 text
Let’s make it more challenging!
?
WINNER
#1
.container .external
#2
.container a[rel="external"]
CSS Face Off
Tuesday, May 22, 12
Slide 67
Slide 67 text
Who Wins??
2
WINNER
#1
.container .external
020 Points
#2
.container a[rel="external"]
021 Points
CSS Face Off
Tuesday, May 22, 12
Slide 68
Slide 68 text
Selectors are read from
Right to Left
Tuesday, May 22, 12
Slide 69
Slide 69 text
#CSS
body.two-col { ... }
body.two-col .container { ... }
body.two-col .container .primary { ... }
Do NOT write your css like you’re following your HTML
structure!
Selector Flow
Tuesday, May 22, 12
Slide 70
Slide 70 text
CSS3
NEW SELECTORS
Tuesday, May 22, 12
Slide 71
Slide 71 text
#CSS
img[alt] {
border: 1px green solid;
}
Check if attribute exists.
Attribute Selector
Tuesday, May 22, 12
Check if attribute exists.
Attribute Selector
Tuesday, May 22, 12
Slide 72
Slide 72 text
#CSS
div[class|="widget"] {
...
}
“Slug” selector
* All “widgets” will be selected
Child Selectors
Tuesday, May 22, 12
Widget id of 1
Slide 73
Slide 73 text
#CSS
div[class|="widget"] {
...
}
“Slug” selector
* All “widgets” will be selected
Child Selectors
Tuesday, May 22, 12
Widget id of 1
Slide 74
Slide 74 text
#CSS
div[class*="foo"] {
color: red;
}
Apply to this div
“Contains” selector
CSS3
Attribute Selector
Tuesday, May 22, 12
Slide 76
Slide 76 text
#CSS
a[href$=".pdf"] { background-image: url(pdf.png); }
Download White Paper
“Ends” with selector
CSS3
Child Selectors
Tuesday, May 22, 12
Slide 77
Slide 77 text
#CSS
[class$="right"] {
_display: inline;
}
*[class$="right"] {
_display: inline;
}
Anti-pattern
* Universal selector will be used.
Attribute Selectors
Tuesday, May 22, 12
Slide 78
Slide 78 text
#CSS
div p:first-child {
color: #333;
font-size: 14px;
}
:first-child, :last-child and :only-child
:first-child
Tuesday, May 22, 12
Important Intro
Regular Content
Slide 79
Slide 79 text
#CSS
.menu li {
border-bottom: 1px solid #ccc;
}
.menu li:last-child {
border: 0;
}
- First Menu element
- Menu element
- Last Menu element
Slide 80
Slide 80 text
#CSS
tr:nth-child(odd) {
background: #ccc;
}
First Row
Second Row
:nth-* accepts 3 types of parameters: odd, even and
equation(3n/3)
CSS3
:nth-child/:nth-type
Tuesday, May 22, 12
Slide 81
Slide 81 text
:nth-* equation explained
3n
(3x0) = 0 (no select)
(3x1) = 3
(3x2) = 6
3n+1
(3x0) + 1 = 1
(3x1) + 1 = 4
(3x2) + 1 = 7
n+5
0 + 5 = 5
1 + 5 = 6
2 + 5 = 7
3n-1
(3x0) - 1= 0
(3x1) - 1= 2
(3x2) - 1= 5
:nth-child/:nth-type
Tuesday, May 22, 12
Slide 82
Slide 82 text
:nth-* equation examples
odd 3 3n 3n+1 3n-1 n+3
1 X X
2 X
3 X X X X
4 X X
5 X X X
6 X X
7 X X X
8 X X
:nth-child/:nth-type
Tuesday, May 22, 12
Slide 83
Slide 83 text
#CSS
div:nth-child(3n) { background: #ccc; }
CSS3
:nth-child/:nth-type
Tuesday, May 22, 12
3n
3n
Slide 84
Slide 84 text
#CSS
.widget:nth-last-child(3n) { background: #ccc; }
:nth-last-child and :nth-last-of-type both start from the last
element and move up.
CSS3
:nth-child/:nth-type
Tuesday, May 22, 12
3n
3n
Slide 85
Slide 85 text
#CSS
.widget:nth-child(3n) { background: #ccc; }
Let’s mix it up!
CSS3
:nth-child/:nth-type
Tuesday, May 22, 12
Side Note
Side Note
Side Note
Side Note
3n
Slide 86
Slide 86 text
#CSS
div:nth-of-type(3n) { background: #ccc; }
Now with :nth-of-type
CSS3
:nth-child/:nth-type
Tuesday, May 22, 12
Side Note
Side Note
3n
Side Note
Side Note
3n
Slide 87
Slide 87 text
#CSS
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):
not([type="button"]):not([type="image"]) {
border: 1px solid #ccc;
border-radius: 5px;
}
Full Name:
Opt-in:
:not() - negation selector CSS3 Pseudo Selectors Tuesday, May 22, 12Slide 88
Slide 88 text
#CSS
input:checked + label { border: 1px dashed #ccc; }
input[type="text"]:disabled { background: rgba(10, 10, 10, 0.7); }
input:required { font-weight: bold; }
input:optional { color: green; }
input:valid { box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); }
input:invalid { box-shadow: 0 0 5px red; }
Form based selectors
CSS3
Pseudo Selectors
Tuesday, May 22, 12
Slide 89
Slide 89 text
A pseudo-element is identified by using two colons
(::). Available pseudo-elements:
::first-line, ::first-letter, ::before and ::after
For compatibility purposes the the single colon (:)
notation has been accepted. All new CSS3 only
pseudo-elements, ::selection, are required to use
double colon (::).
Pseudo Elements
Tuesday, May 22, 12
Slide 90
Slide 90 text
Pseudo Elements
Tuesday, May 22, 12
Slide 91
Slide 91 text
#CSS
.top { ... }
.top:before {
content: "";
display: block;
position: absolute;
bottom: -10px;
left: 0;
}
.top:after {
content: "";
display: block;
position: absolute;
bottom: -10px;
right: 0;
}
:before and :after
This is how CSS ribbons are created.
Pseudo Elements
Tuesday, May 22, 12
Slide 92
Slide 92 text
Tuesday, May 22, 12
Slide 93
Slide 93 text
#CSS
::-webkit-validation-bubble { ... }
::-webkit-validation-bubble-top-outer-arrow { ... }
::-webkit-validation-bubble-top-inner-arrow { ... }
::-webkit-validation-bubble-message { ... }
Style form validation messages (webkit)
CSS3
Pseudo Elements
Tuesday, May 22, 12
Slide 94
Slide 94 text
CSS3
@FONT-FACE
Tuesday, May 22, 12
Slide 95
Slide 95 text
Brief History
Once limited to system fonts!
Arial
Verdana
Tahoma
Georgia
Tuesday, May 22, 12
Slide 96
Slide 96 text
Font Alternatives
sIFR = Flash
Cufon = Javascript + canvas
Tuesday, May 22, 12
Slide 97
Slide 97 text
@font-face {
font-family: 'ClarendonLTStdLight';
src: url('clarendonltstd-light-webfont.eot');
src: url('clarendonltstd-light-webfont.eot?#iefix') format('embedded-opentype'),
url('clarendonltstd-light-webfont.woff') format('woff'),
url('clarendonltstd-light-webfont.ttf') format('truetype'),
url('clarendonltstd-light-webfont.svg#ClarendonLTStdLight') format('svg');
font-weight: normal;
font-style: normal;
}
h1, h2, h3 {
color: #2a2b2b;
letter-spacing: 1px;
line-height: 1.2em;
font-family: 'ClarendonLTStdLight', Palatino, georgia, serif;
margin-bottom: 8px;
padding-bottom: 5px;
}
@font-face Example
Tuesday, May 22, 12
Slide 98
Slide 98 text
WOFF TTF OTF EOT SVG
Safari X X X
Chrome X X X
Firefox X X X
IE X X
Opera X X X
IOS X
Font Support
Tuesday, May 22, 12
Slide 99
Slide 99 text
Font Services
TypeKit
Google Font API
Font Squirrel (generator)
Font Spring
Tuesday, May 22, 12
Slide 100
Slide 100 text
@font-face Gotchas
Licensing is still a concern
Rendering engines are inconsistent (ClearType)
Tuesday, May 22, 12
Slide 101
Slide 101 text
Tuesday, May 22, 12
Slide 102
Slide 102 text
CSS3
GRADIENTS
Tuesday, May 22, 12
Slide 103
Slide 103 text
CSS3
LINEAR GRADIENTS
Tuesday, May 22, 12
Slide 104
Slide 104 text
linear-gradient(left, red 20%, blue);
Tuesday, May 22, 12
Slide 105
Slide 105 text
linear-gradient(left, red 20%, blue);
DIRECTION
45deg
left
left top
Tuesday, May 22, 12
Slide 106
Slide 106 text
linear-gradient(left, red 20%, blue);
COLOR/COLOR STOP
Tuesday, May 22, 12
Slide 107
Slide 107 text
Spectrum Gradient
.spectrum {
background: -webkit-linear-gradient(left,
red,
blue,
green,
yellow,
orange
);
}
Tuesday, May 22, 12
Slide 108
Slide 108 text
Spectrum Gradient
.spectrum {
background: -webkit-linear-gradient(left,
red,
blue 20%,
green 40%,
yellow 60%,
orange 80%
);
}
Tuesday, May 22, 12
Slide 109
Slide 109 text
Tuesday, May 22, 12
Slide 110
Slide 110 text
Spectrum Gradient
.spectrum-solid {
background: -webkit-linear-gradient(left,
red 20%,
blue 20%,
blue 40%,
green 40%,
green 60%,
yellow 60%,
yellow 80%,
orange 80%
);
}
Tuesday, May 22, 12
Slide 111
Slide 111 text
Tuesday, May 22, 12
Slide 112
Slide 112 text
CSS3
RADIAL GRADIENTS
Tuesday, May 22, 12
Slide 113
Slide 113 text
radial-gradient(center, circle, white, #73D4C9 40%);
Tuesday, May 22, 12
Slide 114
Slide 114 text
radial-gradient(center, circle, white, #73D4C9 40%);
POSITION
center
left top
30% 30%
Tuesday, May 22, 12
Slide 115
Slide 115 text
radial-gradient(center, circle, white, #73D4C9 40%);
SHAPE ellipse <= Default
circle
Tuesday, May 22, 12
Slide 116
Slide 116 text
radial-gradient(center, circle, white, #73D4C9 40%);
COLOR/COLOR STOP
Tuesday, May 22, 12
Slide 117
Slide 117 text
.radial {
background-color: #73D4C9;
background-image: -webkit-radial-gradient(30% 30%,
circle,
white,
#73D4C9 40%
);
}
Radial Gradient
Tuesday, May 22, 12
Slide 118
Slide 118 text
Tuesday, May 22, 12
Slide 119
Slide 119 text
Things to Remember
transparent = rgba(0,0,0,0);
Angles != keyterms (top right != 45deg)
Tuesday, May 22, 12
Slide 120
Slide 120 text
Gradient Examples
http://lea.verou.me/css3patterns/
http://www.standardista.com/cssgradients/
Tuesday, May 22, 12
Slide 121
Slide 121 text
CSS3
BUTTONS
Tuesday, May 22, 12
Slide 122
Slide 122 text
Topics Covered
box-shadow
border-radius
text-shadow
Tuesday, May 22, 12
Slide 123
Slide 123 text
Basic Button
Tuesday, May 22, 12
Slide 124
Slide 124 text
Round the Corners
Tuesday, May 22, 12
Slide 125
Slide 125 text
border-radius: 6px;
Tuesday, May 22, 12
Slide 126
Slide 126 text
Create a circle
Defined Height and Width
Border Radius of 1/2 Height/Width
.blog-posts .entry-date {
background: #89897a;
height: 70px;
padding-top: 3px;
text-align: center;
width: 70px;
border-radius: 35px;
}
Tuesday, May 22, 12
Slide 127
Slide 127 text
Total Control Border Radius
-*-border-[top|right|bottom|left]-radius
Tuesday, May 22, 12
Slide 128
Slide 128 text
Depth Shadows
Tuesday, May 22, 12
Slide 129
Slide 129 text
box-shadow: 1px 1px 0 rgba(0,0,0,.25);
Tuesday, May 22, 12
Slide 130
Slide 130 text
X-AXIS
box-shadow: 1px 1px 0 rgba(0,0,0,.25);
Tuesday, May 22, 12
Slide 131
Slide 131 text
Y-AXIS
box-shadow: 1px 1px 0 rgba(0,0,0,.25);
Tuesday, May 22, 12
Slide 132
Slide 132 text
BLUR
box-shadow: 1px 1px 0 rgba(0,0,0,.25);
Tuesday, May 22, 12
Slide 133
Slide 133 text
COLOR
box-shadow: 1px 1px 0 rgba(0,0,0,.25);
Tuesday, May 22, 12
Slide 134
Slide 134 text
Multiple Shadows
Use keyword inset for inner shadows
Comma separate multiple shadows
Last shadow defined is the “lowest layer”
.btn {
box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.2),
0 1px 2px rgba(0,0,0,.25);
}
Tuesday, May 22, 12
Slide 135
Slide 135 text
Add Gradient
Tuesday, May 22, 12
Slide 136
Slide 136 text
Call to Action Button
Tuesday, May 22, 12
Slide 137
Slide 137 text
text-shadow: 1px 1px 0 #387038;
Tuesday, May 22, 12
Slide 138
Slide 138 text
text-shadow: 1px 1px 0 #387038;
X-AXIS
Tuesday, May 22, 12
Slide 139
Slide 139 text
Y-AXIS
text-shadow: 1px 1px 0 #387038;
Tuesday, May 22, 12
Slide 140
Slide 140 text
BLUR
text-shadow: 1px 1px 0 #387038;
Tuesday, May 22, 12
Slide 141
Slide 141 text
COLOR
text-shadow: 1px 1px 0 #387038;
Tuesday, May 22, 12
Slide 142
Slide 142 text
CSS3
ANIMATIONS
Tuesday, May 22, 12
Slide 143
Slide 143 text
CSS3
TRANSFORMS
Tuesday, May 22, 12
Slide 144
Slide 144 text
First seen in Firefox 4 was
transforms. Transforms
are often used in
transitions. There are four
different types of
transforms: scale,
rotate, skew and
translate.
transform: translate(-100px, -100px);
transform: rotate(45deg);
transform: scale(2);
Tuesday, May 22, 12
Slide 145
Slide 145 text
-webkit-transition: all 2s 1s;
Tuesday, May 22, 12
Slide 146
Slide 146 text
height
width
opacity
text-indent
PROPERTY
-webkit-transition: all 2s ease-in 1s;
Tuesday, May 22, 12
Slide 147
Slide 147 text
DURATION
-webkit-transition: all 2s ease-in 1s;
Tuesday, May 22, 12
Slide 148
Slide 148 text
-webkit-transition: all 2s ease-in 1s;
EASING
ease-in
ease-out
ease-in-out
Tuesday, May 22, 12
Slide 149
Slide 149 text
DELAY
-webkit-transition: all 2s ease-in 1s;
Tuesday, May 22, 12
Slide 150
Slide 150 text
.button {
background: #fff;
color: #ee8637;
font-size: 10px;
opacity: 0.5;
position: absolute;
bottom: 5px;
right: 10px;
-webkit-transition: opacity 0.4s ease-in-out;
}
.button:hover {
opacity: 0.8;
}
Basic Transition
Tuesday, May 22, 12
Slide 151
Slide 151 text
.speaker {
background-color: rgba(241, 241, 235, 0.8);
border: 6px solid #fafaf5;
font: 30px "SteelfishExtraBold", "Lucida Grande", arial;
overflow: hidden;
text-indent: -9999px;
text-shadow: 2px 1px 0 #8f2d0e;
width: 216px;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease-out;
}
Pseudo Elements
.speaker:hover {
text-indent: 0;
box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8);
}
Tuesday, May 22, 12
Slide 152
Slide 152 text
CSS3
@KEYFRAMES
Tuesday, May 22, 12
Slide 153
Slide 153 text
-webkit-aninmation: bounce 2s 1s infinite;
Tuesday, May 22, 12
Slide 154
Slide 154 text
-webkit-aninmation: bounce 2s 1s infinite;
ANIMATION (KEYFRAME)
Tuesday, May 22, 12
Slide 155
Slide 155 text
-webkit-aninmation: bounce 2s 1s infinite;
DURATION
Tuesday, May 22, 12
Slide 156
Slide 156 text
-webkit-aninmation: bounce 2s 1s infinite;
DELAY
Tuesday, May 22, 12
Slide 157
Slide 157 text
-webkit-aninmation: bounce 2s 1s infinite;
INTERVALS
Tuesday, May 22, 12
Slide 158
Slide 158 text
@-webkit-keyframes bounce {
from, to {
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 220px;
-webkit-animation-timing-function: ease-in;
}
}
Tuesday, May 22, 12
Slide 159
Slide 159 text
@-webkit-keyframes spin {
0% {
transform: rotate(45deg);
-webkit-animation-timing-function: ease-out;
}
50% {
transform: rotate(45deg);
-webkit-animation-timing-function: ease-in;
}
100% {
transform: rotate(90deg);
-webkit-animation-timing-function: ease-in-out;
}
}
Tuesday, May 22, 12
Slide 160
Slide 160 text
CSS3
MEDIA QUERIES
Tuesday, May 22, 12
Slide 161
Slide 161 text
@media print {
h1 { color: #000; }
h2 { color: #333; }
h3 { color: #666; }
.sidebar { display: none; }
}
Print Media Query
Tuesday, May 22, 12
Slide 162
Slide 162 text
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over */
}
Using Media Queries
Tuesday, May 22, 12
Slide 163
Slide 163 text
Add Orientation
@media only screen and (device-width: 320px) and (orientation: portrait) {
/* Style adjustments for smartphones in portrait */
}
@media only screen and (device-width: 480px) and (orientation: landscape) {
/* Style adjustments for smartphones in portrait */
}
Tuesday, May 22, 12
Slide 164
Slide 164 text
This example targets retina display
(iphone 4). The iphone 4 will
automatically scale your images in
the background size specified. This
leads to fuzzy images.
@media -webkit-pixel-ratio: 2 {
/* Style adjustments for retina display */
h1 {
background-image: url(logo-highres.png);
background-size: 300px 85px;
}
}
Tuesday, May 22, 12
Slide 165
Slide 165 text
CSS3
RESPONSIVE
Tuesday, May 22, 12
Slide 166
Slide 166 text
Ethan Marcotte first proposed the idea of
responsive design with his article “Fluid
Grids” on A list Apart
iphone released
Ethan Marcotte officially names his concept
as “Responsive Design”
2007
2009
2010
Tuesday, May 22, 12
Slide 167
Slide 167 text
It’s impossible to know all of the devices our
content is displayed on.
Sites should be built with content in mind
and not the medium.
Tuesday, May 22, 12
Slide 168
Slide 168 text
https://speakerdeck.com/u/malarkey/p/fashionably-flexible-
responsive-web-design-full-day-workshop-1
320 720 1024
Popular tablets
and desktops
iPhone, android
and other
smartphones
Netbooks and
tablet
orientations
Major Breakpoints
Tuesday, May 22, 12
Slide 169
Slide 169 text
Tuesday, May 22, 12
Slide 170
Slide 170 text
Tuesday, May 22, 12
Slide 171
Slide 171 text
CSS3
MOBILE FIRST
Tuesday, May 22, 12
Slide 172
Slide 172 text
Graceful Degradation vs. Progressive Enhancement
http://designshack.net/articles/css/mobilefirst/
Tuesday, May 22, 12
Slide 173
Slide 173 text
Tuesday, May 22, 12
Slide 174
Slide 174 text
Javascript
Tuesday, May 22, 12
Slide 175
Slide 175 text
Javascript
DOM ACCESS
Tuesday, May 22, 12
Slide 176
Slide 176 text
var items = document.querySelectorAll('.menu li');
var items = $('.menu li');
Tuesday, May 22, 12
Slide 177
Slide 177 text
var items = document.querySelectorAll('.menu li');
var items = $('.menu li');
var subItems = items[0].querySelectorAll('li');
var subItems = $('.menu li').find('li');
Tuesday, May 22, 12
Slide 178
Slide 178 text
// Find the latest tweet
var latestTweet = document.querySelector('#latest-tweet');
// jQuery version: $('#latest-tweet').first();
for item in items {
// Log the content of element
console.log(item.innerHTML);
// Output the style object
console.log(item.style);
}
Tuesday, May 22, 12
Slide 179
Slide 179 text
Javascript
LOCAL STORAGE
Tuesday, May 22, 12
Slide 180
Slide 180 text
// Check if localStorage is available
if (typeof window.localStorage == 'object' && window.localStorage != null) {
var store = window.localStorage;
try {
store.setItem('cow', 'moo');
} catch(e) {
// Out of storage space?
if (e == QUOTA_EXCEEDED_ERR) {
console.log('ERROR: Local Storage is out of space!');
}
}
}
Tuesday, May 22, 12
Slide 181
Slide 181 text
var status = document.getElementById('status');
// Change status text
status.innerText = store.getItem('cow');
status.innerText = store['cow'];
status.innerText = store.cow;
delete store['cow'];
// Delete all of localstorage
store.clear();
Tuesday, May 22, 12
Slide 182
Slide 182 text
LocalStorage Gotchas
- HTTP vs. HTTPS localstorage - store seperately (including
incognito for chrome)
- No default expiration.
- Only support strings as values
- SUPPORT: All modern browsers and IE8+
- POLYFILL: Use lawnchair for storage.
Tuesday, May 22, 12
Slide 183
Slide 183 text
Tuesday, May 22, 12
Slide 184
Slide 184 text
Javascript
GEOLOCATION
Tuesday, May 22, 12
Slide 185
Slide 185 text
// Check if geolocation is supported
if (navigator.geolocation) {
// Geolocation Supported!
} else {
// Geolocation not supported
}
Tuesday, May 22, 12
Slide 186
Slide 186 text
geoloc.getCurrentPosition(function(pos) {
position = [pos.coords.latitude, pos.coords.longitude];
}, errorHandler);
var position;
var geoloc = navigator.geolocation;
ASYNC
Tuesday, May 22, 12
Slide 187
Slide 187 text
var geolocWatch = geoloc.watchPosition(function(pos) {
// Successfully changed position
position = [pos.coords.latitude, pos.coords.longitude];
} errorHandler,
// Options
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000
}
);
var geoloc = navigator.geolocation;
Tuesday, May 22, 12
Slide 188
Slide 188 text
Javascript
WEB SOCKETS
Tuesday, May 22, 12
Slide 189
Slide 189 text
var ws = new WebSocket('ws://html5rocks.websocket.org/echo');
// Show current Ready State
console.log(ws.readyState);
CONSTANTS:
CONNECTING = 0
OPEN = 1
CLOSING = 2
CLOSED = 3
Tuesday, May 22, 12
Slide 190
Slide 190 text
// When the connection is open, send data to the server
ws.onopen = function () {
ws.send('Ping'); // Send the message 'Ping' to server
};
// Log errors
ws.onerror = function (error) {
console.log('WebSocket Error ' + error);
};
// Log messages from the server
ws.onmessage = function (e) {
console.log('Server: ' + e.data);
};
Tuesday, May 22, 12
Slide 191
Slide 191 text
// Say hello
ws.send('Hello World');
// Close the connection
ws.close();
Tuesday, May 22, 12
Slide 192
Slide 192 text
if (window.WebSocket) {
// Supported
var ws = new WebSocket('ws://html5rocks.websocket.org/echo');
// Show current Ready State
console.log(ws.readyState);
// When the connection is open, send some data to the server
ws.onopen = function () {
ws.send('Ping'); // Send the message 'Ping' to the server
};
// Log errors
ws.onerror = function (error) {
console.log('WebSocket Error ' + error);
};
// Log messages from the server
ws.onmessage = function (e) {
console.log('Server: ' + e.data);
};
// Say hello
ws.send('Hello World');
// Close the connection
ws.close();
}
Tuesday, May 22, 12
Slide 193
Slide 193 text
• caniuse.com/ - Browser Support
• html5please.com/ - Responsibly Use HTML5
• http://wufoo.com/html5 - HTML5 Forms
• http://diveintohtml5.info - De Facto HTML5
starter guide
Great Resources
Tuesday, May 22, 12
Slide 194
Slide 194 text
Tuesday, May 22, 12
Slide 195
Slide 195 text
• Photoshop Style Editor: http://layerstyles.org/
builder.html
• Button Generator: http://css3button.net/
• Gradient Generator: http://gradients.glrzad.com/
• CSS3 Tool (all in one): http://css3generator.com/
• Browser Prefixer: http://prefixr.com/
Generators/Tools
Tuesday, May 22, 12
Slide 196
Slide 196 text
• Media Queries (Responsive): http://mediaqueri.es/
• Background Patterns: http://leaverou.me/
css3patterns/
Galleries/Showcases
Tuesday, May 22, 12
Slide 197
Slide 197 text
Q/A and Live Code!
Tuesday, May 22, 12
Slide 198
Slide 198 text
Thanks for Listening!
jakefolio
http://jakefolio.com
[email protected]
Tuesday, May 22, 12
Slide 199
Slide 199 text
HTML5 and JavaScript
Part Deux
Tuesday, May 22, 12
Slide 200
Slide 200 text
Daniel Cousineau
@dcousineau
Tuesday, May 22, 12
Slide 201
Slide 201 text
History
Tuesday, May 22, 12
Slide 202
Slide 202 text
Mocha
LiveScript
JavaScript
Brendan Eich
CTO, Mozilla Corp.
April 1995
Tuesday, May 22, 12
Slide 203
Slide 203 text
JavaScript
ECMAScript
ActionScript
JScript
Tuesday, May 22, 12
Slide 204
Slide 204 text
Basics
Tuesday, May 22, 12
Slide 205
Slide 205 text
Data Types
•number
•string
•boolean
•object
•null
•NaN
•undefined
Tuesday, May 22, 12
Slide 206
Slide 206 text
Strings
•Are Objects, have methods
Tuesday, May 22, 12
Slide 207
Slide 207 text
"Foo" + "Bar"; //"FooBar"
var str = "Lorem Ipsum Dolor Sit Amet";
str.toLowerCase(); //"lorem ipsum dolor sit amet"
str.toUpperCase(); //"LOREM IPSUM DOLOR SIT AMET"
str.split(" "); //["Lorem", "Ispum", "Dolor", "Sit", "Amet"]
str.substring(6,9); //"Ips"
new String("Lorem Ipsum Dolor Sit Amet") == str; //true
Strings
Tuesday, May 22, 12
Slide 208
Slide 208 text
parseInt("56"); //56
parseInt("42.567"); //42
parseInt("asdf"); //NaN
parseInt("5a6"); //5
parseFloat("24.68"); //24.68
parseFloat("asdf"); //NaN
parseFloat("24a"); //24
String to Number
Tuesday, May 22, 12
Slide 209
Slide 209 text
Objects
•“Dictionary” / “Associative Array”
•Key: Value or 'Key': Value
•Without ': A-Z0-9 only
•Does not keep intrinsic ordering
•Accessed keys using . (dot) or [] notation
Tuesday, May 22, 12
Slide 210
Slide 210 text
var object = {
foo: 'value',
'complex key': 0,
bar: {
nested: true
}
};
object.foo; //'value'
object.['complex key']; //0
object.bar.nested; //true
object.bar['nested']; //true
object['bar'].nested; //true
object['bar']['nested']; //true
Objects
Tuesday, May 22, 12
Slide 211
Slide 211 text
in or hasOwnProperty()
•Tough call:
•.hasOwnProperty() more consistent
•in checks inherited properties
•Used in for loop
Tuesday, May 22, 12
Slide 212
Slide 212 text
var test = {
foo: 'value',
bar: 'value',
baz: 'value'
}
for (var key in test) {
console.log(key + ": " + test[key]);
}
//PRINTS:
//foo: value
//bar: value
//baz: value
in
Tuesday, May 22, 12
Slide 213
Slide 213 text
Arrays
•Special object
•Numerical keys only
•Keeps intrinsic ordering
•Short ([]) and Long (new Array()) syntax
Tuesday, May 22, 12
Slide 214
Slide 214 text
var arrayShort = [
'one',
'two'
];
arrayShort[2] = 'three';
var arrayLong = new Array();
arrayLong[0] = 'one';
arrayLong[1] = 'two';
arrayLong[2] = 'three';
//arrayShort: ["one", "two", "three"]
//arrayLong: ["one", "two", "three"]
Arrays
Tuesday, May 22, 12
Slide 215
Slide 215 text
var arr = [1,2,3,4,6];
arr.indexOf(2); //1
arr.join(':'); //"1:2:3:4:6"
arr.pop(); //6
//[1,2,3,4]
arr.push(7); //5
//[1,2,3,4,7]
arr.reverse(); //[7,4,3,2,1]
arr.shift(); //1
//[2,3,4,7]
arr.unshift(8); //5
//[8,2,3,4,7]
arr.slice(1); //[2,3,4,7]
arr.slice(1,3); //[2,3]
arr.slice(-3); //[3,4,7]
arr.slice(-3,-1); //[3,4]
Arrays
Tuesday, May 22, 12
Slide 216
Slide 216 text
var arr1 = [1,2,3];
var arr2 = [3,4,5];
arr1.concat(arr2); //[1,2,3,3,4,5]
Arrays
Tuesday, May 22, 12
Slide 217
Slide 217 text
delete
•Removes element from an object
•“Removes element from an array”
•Not really, just sets it to undefined
Tuesday, May 22, 12
Slide 218
Slide 218 text
Functions
•Are Objects as well
•“Elevated”
•You can use a named function before it is
defined in code
•Function definitions are elevated to the
top
Tuesday, May 22, 12
Slide 219
Slide 219 text
function Foo() {
//...
}
Foo(); //valid
Bar(); //valid
function Bar() {
//...
}
Functions
Tuesday, May 22, 12
Slide 220
Slide 220 text
function Foo() {
}
Foo.bar = "value";
'bar' in Foo; //true
Foo.bar == "value"; //true
Functions
Tuesday, May 22, 12
Slide 221
Slide 221 text
Function Arguments
•No way to assign default arguments
•But arguments are not required
•If an argument is not specified, it is set to
undefined
Tuesday, May 22, 12
Slide 222
Slide 222 text
arguments
•A special variable found inside a function
•A not-quite array object containing all the
function arguments
Tuesday, May 22, 12
Slide 223
Slide 223 text
function sum() {
var x = 0;
for (var i = 0; i < arguments.length; ++i) {
x += arguments[i];
}
return x;
}
sum(1, 2, 3); //6
arguments
Tuesday, May 22, 12
Slide 224
Slide 224 text
typeof
•Determines a variables type
•Returns a string
Tuesday, May 22, 12
Slide 225
Slide 225 text
typeof true; //"boolean"
typeof 12; //"number"
typeof "string"; //"string"
typeof []; //"object"
typeof {}; //"object"
typeof NaN; //"number"
typeof null; //"object"
typeof undefined; //"undefined"
function Foo() {}
typeof Foo; //"function"
typeof
Tuesday, May 22, 12
Slide 226
Slide 226 text
Comparison
•a == b / a != b
•A and B compared by value alone
•1 == “1” evaluates to true
•a === b / a !== b
•A and B compared by value and by type
•1 === “1” evaluates to false
Tuesday, May 22, 12
Slide 227
Slide 227 text
window, document
•Built in, global, Objects
•window
•Provides access to the browser window
•The “global” object: foo === window.foo
•Things like window.location.href, etc
•document
•Provides access to the current DOM
Tuesday, May 22, 12
Slide 228
Slide 228 text
Closures
Tuesday, May 22, 12
Slide 229
Slide 229 text
Closures
•First-Class
•Can assign functions to variables, pass as
arguments and return as values
•Anonymous
•Not required to have a name
•A function that “closes over” variables
defined outside itself
Tuesday, May 22, 12
Slide 230
Slide 230 text
function Foo() {
var count = 0;
return function() {
count = count + 1;
return count;
};
}
var bar = Foo();
bar(); //1
bar(); //2
bar(); //3
Closures
Tuesday, May 22, 12
Slide 231
Slide 231 text
function createAdder(amount) {
return function(input) {
return input + amount;
};
}
var add2 = createAdder(2);
add2(2); //4
add2(8); //10
var add3 = createAdder(3);
add3(3); //6
add3(7); //10
Closures
Tuesday, May 22, 12
Slide 232
Slide 232 text
(function(exports, undefined){
//ALL your code here
var localVar = "bar"
globalVar = "baz";
exports.foo = "bat";
})(window);
alert(localVar); //error
alert(globalVar); //"baz"
alert(window.globalVar); //"baz"
alert(foo); //"bat"
alert(window.foo); //"bat"
Module Pattern
BEWARE: export (singular) is a reserved word in Safari
Tuesday, May 22, 12
Slide 233
Slide 233 text
Scoping
Tuesday, May 22, 12
Slide 234
Slide 234 text
Global & Local
•Functions are the only way to create new
scopes
•Variables defined with var are local
•Variables defined without var are global
•Global variables are members of window
Tuesday, May 22, 12
Slide 235
Slide 235 text
var outerScope = 10;
var outerScope2 = 10;
function Foo() {
var outerScope = 20;
var innerScope = 20;
globalVariable = 30;
outerScope2 = 40;
}
Foo();
alert(outerScope); //10
alert(outerScope2); //40
alert(innerScope); //error
alert(globalVariable); //30
Global & Local
Tuesday, May 22, 12
Slide 236
Slide 236 text
function Foo() {
var baz = 1;
function Bar() {
return baz;
}
return Bar();
}
Foo(); //1
Lexical Scoping
function Foo() {
var baz = 1;
return Bar();
}
function Bar() {
return baz;
}
Foo(); //baz is not defined
Tuesday, May 22, 12
Slide 237
Slide 237 text
Named functions are parsed and
made available before general
evaluation (thus “hoisted” to the top
of the file).
Anonymous functions, or functions
assigned to variables, require
evaluation before they become
available
foo(); //called foo!
function foo() {
console.log('called foo!');
}
foo(); //called foo!
bar(); //undefined is not a function
var bar = function() {
console.log('called bar!');
}
bar(); //called bar!
Hoisting
Tuesday, May 22, 12
Slide 238
Slide 238 text
function makeAdder(a) {
return function(b) {
return a+b;
}
}
var two = makeAdder(2);
two(1); //3
two(2); //4
two(3); //5
Practical: Currying
Tuesday, May 22, 12
Slide 239
Slide 239 text
this
Tuesday, May 22, 12
Slide 240
Slide 240 text
this
•Trips everyone up
•Special variable used within a function
•Refers to the “contextual object”
•Changes based on where a function
executes
Tuesday, May 22, 12
Slide 241
Slide 241 text
var Foo = {
bar: "bar",
baz: function() {
return this.bar;
}
};
Foo.baz(); //"bar"
Foo.bar = "bat";
Foo.baz(); //"bat"
var baz = Foo.baz;
baz(); //undefined
this
Tuesday, May 22, 12
Slide 242
Slide 242 text
var Foo = {
bar: "bar",
baz: function() {
return this.bar;
}
};
Foo.bat = function() {
return this.bar + "bat";
};
Foo.bat(); //"barbat"
this
Tuesday, May 22, 12
Slide 243
Slide 243 text
call & apply
•Methods in the function prototype
•Change the context in which a function
executes!
Tuesday, May 22, 12
Slide 244
Slide 244 text
var Foo = {
bar: "bar",
baz = function(param1, param2) {
return this.bar + param1 + param2;
}
};
var Foo2 = {
bar: "123"
};
Foo.baz("baz", "bat"); //"barbazbat"
Foo.baz.apply(Foo2, "baz", "bat"); //"123bazbat"
Foo.baz.call(Foo2, ["baz", "bat"]); //"123bazbat"
call & apply
Tuesday, May 22, 12
Slide 245
Slide 245 text
function bind(func, context) {
return function() {
return func.call(context, arguments);
}
}
Practical: Binding
Tuesday, May 22, 12
Slide 246
Slide 246 text
Exceptions
Tuesday, May 22, 12
Slide 247
Slide 247 text
Exceptions
•All errors are thrown
•Classic try...catch...finally blocks
Tuesday, May 22, 12
Slide 248
Slide 248 text
try {
funcDoesNotExist();
} catch (e) {
alert(e); //ReferenceError: funcDoesNotExist is not defined
} finally {
//Always Executes
}
Exceptions
Tuesday, May 22, 12
Slide 249
Slide 249 text
function Foo() {
throw new Error("Message");
}
function Bar() {
throw "Message";
}
try {
Foo();
} catch (e) {
e.message == "Message"; //true
}
try {
Bar();
} catch (e) {
e == "Message"; //true
}
Exceptions
Tuesday, May 22, 12
Slide 250
Slide 250 text
Prototype
Tuesday, May 22, 12
Slide 251
Slide 251 text
OOP... Kinda...
•Almost no real difference between a
dictionary and an object
•Named Functions double as object
constructors
•Function objects contain a prototype
dictionary that is copied to instance when
using new
Tuesday, May 22, 12
Slide 252
Slide 252 text
Foo
‣ bar
‣ prototype
‣ baz
‣ constructor
‣ __proto__
function Foo() {
//The "Constructor"
}
Foo.bar = function() {
//A "Static" Function
}
Foo.prototype.baz = function() {
//A "Method"
};
OOP... Kinda...
Tuesday, May 22, 12
Slide 253
Slide 253 text
instance
‣ __proto__
‣ baz
‣ constructor
‣ __proto__
‣ ...
var instance = new Foo();
instance.baz(); //works
instance.bar(); //error
Foo.bar(); //works
Foo.baz(); //error
Foo.prototype.baz(); //works
new
Tuesday, May 22, 12
Slide 254
Slide 254 text
instance
‣ bat
‣ __proto__
‣ baz
‣ constructor
‣ __proto__
‣ ...
instance.bat = function() {
/* ... */
}
instance.bat(); //works
Foo.bat(); //error
Foo.prototype.bat(); //error
new
Tuesday, May 22, 12
Slide 255
Slide 255 text
function Foo(baz) {
this.baz = baz;
}
Foo.prototype.bar = function() {
return this.baz;
};
var foo1 = new Foo(1);
var foo2 = new Foo(2);
foo1.bar(); //1
foo2.bar(); //2
Foo.prototype.bar = function() {
return this.baz * 2;
};
foo1.bar(); //2
foo2.bar(); //4
Overriding Prototype
Tuesday, May 22, 12
Slide 256
Slide 256 text
Asynchronous
Tuesday, May 22, 12
Slide 257
Slide 257 text
Asynchronous
•setTimeout, setInterval allow you to have
code executing asynchronously while other
code executes
Tuesday, May 22, 12
Slide 258
Slide 258 text
var id = setInterval(function() {
//Code to execute every 1000 milliseconds
}, 1000);
//clearInterval(id); to stop
setInterval
Tuesday, May 22, 12
Slide 259
Slide 259 text
var id = setTimeout(function() {
//Code to execute after 1000 milliseconds have passed
}, 1000);
//clearTimeout(id); to cancel
setTimeout
Tuesday, May 22, 12
Slide 260
Slide 260 text
setInterval()
setTimeout()
Tuesday, May 22, 12
Slide 261
Slide 261 text
setTimeout(function() {
//Code to run in parallel
//while the code after is
//executed.
}, 1);
//Code here will execute immediately
//without waiting on the above
Nifty Trick
Tuesday, May 22, 12
Slide 262
Slide 262 text
DOM
Tuesday, May 22, 12
Slide 263
Slide 263 text
DOM
•Document Object Model
•API to interact with the HTML/XHTML
document
Tuesday, May 22, 12
Slide 264
Slide 264 text
Basic selection methods in native
DOM
document
.getElementById('foo');
document
.getElementsByClassName('.bar');
document
.getElementsByTagName('script');
DOM: Selection
Tuesday, May 22, 12
Slide 265
Slide 265 text
Tuesday, May 22, 12
Slide 266
Slide 266 text
var paragraph = document.createElement('p');
var content = document.createTextNode("Lorem Ipsum");
paragraph.appendChild(content);
paragraph.classList.add('my-class');
document.getElementsByTagName('body')[0].appendChild(paragraph);
DOM: Creation
Tuesday, May 22, 12
Slide 267
Slide 267 text
Tuesday, May 22, 12
Slide 268
Slide 268 text
Creates a script element, set its src
and async properties
Insert the script before the first
script tag in the body of the
document
var script =
document.createElement('script');
script.src =
"http://path.to/script.js";
script.async = true;
var s = document
.getElementsByTagName('script')[0];
s.parentNode
.insertBefore(script, s);
Async Script Loading
Tuesday, May 22, 12
Slide 269
Slide 269 text
DOM
https://developer.mozilla.org/en/Gecko_DOM_Reference
Tuesday, May 22, 12
Slide 270
Slide 270 text
Debugging
Tuesday, May 22, 12
Slide 271
Slide 271 text
Chrome/Safari Devel. Tools
Tuesday, May 22, 12
Slide 272
Slide 272 text
Firefox FireBug
Tuesday, May 22, 12
Slide 273
Slide 273 text
Console
•Provided by major browser vendors
•Useful for viewing logs, exceptions, real-time
data dumping, and code execution within
the current context
•Your best friend
•Though older IEs FREAK OUT when you
leave it in, remove before deploy!
Tuesday, May 22, 12
Slide 274
Slide 274 text
console
•Ditch alert(), this is your var_dump()
•console.log(arg1, arg2, ...)
•console.info Same as log
•console.warn Icon indicator
•console.error Stack trace
Tuesday, May 22, 12
Slide 275
Slide 275 text
BEWARE
•console.log is not blocking
•In heavily asynchronous applications,
sometimes value displayed is not value at
the moment of the call
•Your if/else conditionals will work yet
console.log will return something that should
cause them to fail
Tuesday, May 22, 12
Slide 276
Slide 276 text
Network
•Display all network requests via a gantt-like
graph
•Shows browser-initiated (css, images, etc)
and script initiated (ajax) alike
•Along with both request and response
headers
Tuesday, May 22, 12
Slide 277
Slide 277 text
Script
•Provides a familiar break-point debugging
workflow
Tuesday, May 22, 12
Slide 278
Slide 278 text
Coding Styles
Tuesday, May 22, 12
Slide 279
Slide 279 text
Coding Styles
•Mostly your standard C based style
techniques
•Special considerations
•Semi-colons? No semi-colons?
•Leading , ?
•Prototype Definition?
Tuesday, May 22, 12
Slide 280
Slide 280 text
var dict = {
foo: 'bar',
baz: 'bat'
};
var dict = {
foo: 'bar'
, baz: 'bat'
};
Comma Style
Tuesday, May 22, 12
Slide 281
Slide 281 text
var foo;
var bar;
var baz;
var foo
, bar
, baz;
var Declaration Style
Tuesday, May 22, 12
Slide 282
Slide 282 text
function Foo() {
}
Foo.prototype.bar = function(){
};
Prototype Style
function Foo() {
}
Foo.prototype = {
bar: function() {
}
}
Tuesday, May 22, 12
Slide 283
Slide 283 text
Code Quality Tools
•JSLint http://www.jslint.com/
•By Crockford, extremely strict and
inflexible. Code like Crockford!
•JSHint http://www.jshint.com/
•Fork, more flexible according to your own
rules and preferences
Tuesday, May 22, 12
Slide 284
Slide 284 text
Common Techniques
Tuesday, May 22, 12
Slide 285
Slide 285 text
Grab global App dictionary, or
create if not found
Add a function utility, is now
globally accessible without fearing
collision with other functioned
similarly named
App = window.App || {};
App.utility = function() {
//Globally available, no
//conflicts
};
Safe Extension
Tuesday, May 22, 12
Slide 286
Slide 286 text
Immediately
Invoked
Function
Expression
Function is defined then
immediately invoked. Closest thing
to a namespace/module system.
Prevents variable leakage into outer
scopes
(function(exports){
exports.foo = function() {
};
var bar = function() {
};
})(window);
foo(); //success
bar(); //not found!
IIFE
Tuesday, May 22, 12
Slide 287
Slide 287 text
Pro-Tip
•Create an application namespace as a
dictionary in the global scope
•Add in any global level configuration values
Tuesday, May 22, 12
Slide 288
Slide 288 text
JSON
Tuesday, May 22, 12
Slide 289
Slide 289 text
JSON
Douglas Crockford
Awesome
2001
Tuesday, May 22, 12
Slide 290
Slide 290 text
JSON
•JavaScript Object Notation
•Serialization format that is basically
JavaScript code minus comments
•Can be eval()’ed
•But don’t! Use JSON2.js or equivalent
•Minimal overhead compared to XML
•No parsers required, native mapping
Tuesday, May 22, 12
Slide 291
Slide 291 text
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New",
"onclick": "CreateNewDoc()"},
{"value": "Open",
"onclick": "OpenDoc()"},
{"value": "Close",
"onclick": "CloseDoc()"}
]
}
}}
JSON
Tuesday, May 22, 12
Slide 292
Slide 292 text
BREAK
HAMMER TIME
Tuesday, May 22, 12
Slide 293
Slide 293 text
jQuery
Tuesday, May 22, 12
Slide 294
Slide 294 text
jQuery
John Resig
Author, jQuery
January 2006
Tuesday, May 22, 12
Slide 295
Slide 295 text
jQuery
•Cross-browser JavaScript library
•Simplifies and normalizes DOM, AJAX, etc.
•Centers around using extended CSS
selectors to grab an element(s)
Tuesday, May 22, 12
Slide 296
Slide 296 text
Selectors
•Superset of CSS3 selectors
•Custom Pseudo-Classes
•Filters in jQuery parlance
Tuesday, May 22, 12
Slide 297
Slide 297 text
Selectors
•$('selector') returns jQuery object for
chaining purposes
•Chained methods will apply to all results if
selector matches multiple elements
Tuesday, May 22, 12
Slide 298
Slide 298 text
Finds all p tags that do not have the
class special, and adds the class
semi-special
$("p:not(.special)")
.addClass("semi-special");
Selectors
Tuesday, May 22, 12
Slide 299
Slide 299 text
Gets the value of the selected option
in a select box
$('select option:selected').val();
Selectors
Tuesday, May 22, 12
Slide 300
Slide 300 text
Tests matched element against
selector, in this case the jQuery
‘visible’ selector
$('.foo').is(':visible');
Testing Elements
Tuesday, May 22, 12
Slide 301
Slide 301 text
Custom Filters
•jQuery provides the ability to create custom
filters
•:radio, :hidden, etc are custom filters
provided by default
Tuesday, May 22, 12
Slide 302
Slide 302 text
$("#foo")
.html("bar baz");
jQuery
bar baz
Tuesday, May 22, 12
Slide 303
Slide 303 text
Chaining
•Most all jQuery methods are chain-able
•If $() returns > 1 element, methods invoked
will apply to all matched
Tuesday, May 22, 12
Slide 304
Slide 304 text
Find all ul with class first
Find elements of class foo that are
children of the top level matched set
Apply the css style of color:red;
Pop the matching of .foo off the
jQuery object
Find elements of class bar that are
children of the top level matched set
(ul.first)
Apply the css style of color:blue;
$('ul.first')
.find('.foo')
.css('color', 'red')
.end().find('.bar')
.css('color', 'blue')
.end();
Chaining
Tuesday, May 22, 12
Slide 305
Slide 305 text
Events
•jQuery wraps an event handling system
•Handles browser events, AJAX events, and
custom events
Tuesday, May 22, 12
Slide 306
Slide 306 text
$(document).ready(function() {
//Only execute when the document fires
//its onready event (page is done loading)
});
$(document).bind('ready', function() {
//Equivalent to the above
});
$(function() {
//Shortcut, equivalent to the above
});
Events
Tuesday, May 22, 12
Slide 307
Slide 307 text
$('img').hover(function(){
//Do something when user hovers over
//any img tag
});
Events
Tuesday, May 22, 12
Slide 308
Slide 308 text
Events
•Event functions have the matched element
from jQuery bound as this
Tuesday, May 22, 12
Slide 309
Slide 309 text
Listen for click on a.foo
this will be the specific a.foo
element that was clicked
$('a.foo').click(function(){
var $this = $(this)
, href = $this.href();
//href will be the clicked
//links href
});
jQuery
Tuesday, May 22, 12
Slide 310
Slide 310 text
Live Events
•Events using .bind are bound to the specific
element at the specific point in time it was
bound
• New elements that match will not be included
•Using .on or .off produces a delegate listener
that scans for bubbled events that match a
selector
• New elements that match said selector WILL be included
Tuesday, May 22, 12
Slide 311
Slide 311 text
All a tags that exist at some point
as a descendant of .grandparent
will trigger this event on click
Any future a tags that are added as
a descendant of .grandparent
will trigger this event on click
$('.grandparent')
.on('click', 'a', function(e){
var $target = $(e.target);
//$target will *usually*
//be the a tag, though
//sometimes it will be a
//nested tag
});
Live Events
Tuesday, May 22, 12
Slide 312
Slide 312 text
Create a Prototype object for
example purposes, then create new
instance.
The first click handler will fail. The
keyword this will not be a
reference to the instance of Foo as
expected, but a reference to the
matched DOM element that was
clicked.
jQuery.proxy() will wrap your
function such that further
invocations will use the context you
set for this
function Foo() {}
Foo.prototype.baz = function() {};
Foo.prototype.bar = function() {
this.baz();
};
var instance = new Foo();
$('element').click(instance.bar);
$('element').click(
jQuery.proxy(
instance.bar,
instance
);
);
Proxy
Tuesday, May 22, 12
Slide 313
Slide 313 text
When .button is clicked, fade out
img.preview over 600 milliseconds
and then remove it from the DOM
$('.button').click(function(){
$('img.preview')
.fadeOut(600, function() {
$(this).remove();
});
});
Animation
Tuesday, May 22, 12
Slide 314
Slide 314 text
Animate the following attributes
over the course of 5 seconds:
opacity to 25%
move to the right 50px
toggle height
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
},
5000,
function() {
// Animation complete.
}
);
animate
Tuesday, May 22, 12
Slide 315
Slide 315 text
DOM Creation / Insertion
•Super easy! Provide html tag to $() and
jQuery will create the element and return it
wrapped in jQuery
•Second parameter is dictionary for
properties
•Then use methods like .append() to insert
Tuesday, May 22, 12
Slide 316
Slide 316 text
Creates a DIV tag
Creates an input (text) tag
Creates a span with the class of foo
$('
');
$('');
$('', {
'class': 'foo'
});
DOM Creation
Tuesday, May 22, 12
Slide 317
Slide 317 text
Replaces the content of #foo with:
Testing
Replaces the content of #bar with:
Testing
$('#foo')
.html("Testing");
$('#bar')
.text("Testing");
DOM Override
Tuesday, May 22, 12
Slide 318
Slide 318 text
Insertion (inside):
-append
-appendTo
-html
-prepend
-prependTo
-text
Insertion (outside):
-after
-before
-insertAfter
-insertBefore
$('
')
.appendTo($('#foo'));
$('#foo')
.append($(''));
$('
')
.prependTo($('#bar'));
$('#baz')
.after($(''));
$('
')
.insertBefore($('#baz'));
DOM Insertion
Tuesday, May 22, 12
Slide 319
Slide 319 text
AJAX
•Asynchronous JavaScript And XML
•Though never use XML, use JSON
•jQuery has an AJAX library
•Wraps all the different browser quirks
•IE is weird
Tuesday, May 22, 12
Slide 320
Slide 320 text
$.ajax({
url: "test.php",
success: function(data){
$('div.status').addClass("done")
.html(data);
}
});
AJAX
Tuesday, May 22, 12
Slide 321
Slide 321 text
Cross-Domain
•Browser will not fire AJAX requests to a
domain outside the one said JavaScript was
loaded from
•If you include http://sub.domain.tld/file.js, it
cannot make AJAX requests to http://
another.tld/
•It can make requests to http://domain.tld/
Tuesday, May 22, 12
Slide 322
Slide 322 text
JSONp
•Workaround to cross-domain
•Load like it is a javascript file (create an
inject a script tag into the DOM)
•Response is a function (defined by a
callback GET parameter) that executes
and returns value
Tuesday, May 22, 12
Slide 323
Slide 323 text
["api", "response"] callback(["api", "response"]);
JSONp
domain.tld/api.json domain.tld/api.jsonp?callback=callback
Tuesday, May 22, 12
Slide 324
Slide 324 text
$.ajax({
dataType: 'jsonp'
, url: 'http://search.twitter.com/search.json'
, data: {
q: "#tek12"
}
, success: function(resp) {
jQuery.each(resp.results, function(id, tweet){
$('
', {
'class': 'tweet'
})
.append($('', {
'class': 'user'
, text: '@' + tweet.from_user
}))
.append($('',{
'class': 'text'
, text: tweet.text
}))
.appendTo($('#tweets'));
});
}
});
JSONp
Tuesday, May 22, 12
Slide 325
Slide 325 text
Create new :inline filter (checks
if display is set to inline)
Works like any other native inline
$.expr[':'].inline = function(elem){
var $elem = $(elem)
, disp = $elem.css('display');
return disp === 'inline';
};
$('div a:inline')
.css('color', 'red');
$('span:not(:inline)')
.css('color', 'blue')
Extending: Custom Filters
Tuesday, May 22, 12
Slide 326
Slide 326 text
(function($, global, undefined){
var defaults = {
foo: "bar"
};
var methods = {
init: function(options) {
// Merge user defined options
options = $.extend(true, {}, defaults, options);
return this;
},
method: function() {
},
}
$.fn.foo = function(method) {
if( methods[method] ) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method == 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist');
return undefined;
}
}
})(jQuery, window);
Tuesday, May 22, 12
Slide 327
Slide 327 text
Resources
http://api.jquery.com/
Tuesday, May 22, 12
Slide 328
Slide 328 text
Underscore.js
Tuesday, May 22, 12
Slide 329
Slide 329 text
Underscore.js
DocumentCloud
2009
Tuesday, May 22, 12
Slide 330
Slide 330 text
Underscore.js
•Functional, self-contained micro library
•Uses chaining for expressiveness
•Does not inject methods into native objects!
Tuesday, May 22, 12
Slide 331
Slide 331 text
Functional Programming
•Functions are mappings between input and
output
•No side-effects
•Input A always results in output B
•No OOP
•LISP, Haskell, Erlang
Tuesday, May 22, 12
Slide 332
Slide 332 text
Underscore.js
•_(coll).method(arg1, ..)
•_.method(coll, arg1, ..)
Tuesday, May 22, 12
Slide 333
Slide 333 text
Underscore.js
Collections
•each
•map
•reduce
•reduceRight
•find
•filter
•reject
•all
•any
•include
•invoke
•pluck
•max
•min
•sortBy
•groupBy
•sortedIndex
•shuffle
•toArray
•size
Arrays
•first
•initial
•last
•rest
•compact
•flatten
•without
•union
•intersection
•difference
•uniq
•zip
•indexOf
•lastIndexOf
•range
Functions
•bind
•bindAll
•memoize
•delay
•defer
•throttle
•debounce
•once
•after
•wrap
•compose
Objects
•keys
•values
•functions
•extend
•pick
•defaults
•clone
•tap
•has
•isEqual
•isEmpty
•isElement
•isArray
•isObject
•isArguments
•isFunction
•isString
•isNumber
•isFinite
•isBoolean
•isDate
•isRegExp
•isNaN
•isNull
•isUndefined
Utility
•noConflict
•identity
•times
•mixin
•uniqueId
•escape
•result
•template
Chaining
•chain
•value
Tuesday, May 22, 12
Slide 334
Slide 334 text
Maps function to each element in
the input collection
var inp = [1, 2, 3]
, out = _.map(inp, function(n){
return n*2;
});
//out = [2, 4, 6]
Map
Tuesday, May 22, 12
Slide 335
Slide 335 text
Reduces collection to a single
value. mem is the initial state, each
successive iteration must be
returned
var inp = [1, 2, 3];
_(inp).reduce(function(mem, n){
return mem + n;
});
//Iter 0: mem = 1 | n = 2
//Iter 1: mem = 3 | n = 3
//Returns: 6
Reduce
Tuesday, May 22, 12
Slide 336
Slide 336 text
Iterates over a collection and
extracts the values for the input key
(assumes all elements in the
collection are objects/arrays)
var stooges = [
{name: 'moe', age: 40}
, {name: 'larry', age: 50}
, {name: 'curly', age: 60}
];
_.pluck(stooges, 'name');
//Returns ["moe", "larry", "curly"]
Pluck
Tuesday, May 22, 12
Slide 337
Slide 337 text
Returns the max item in a
collection.
If second argument (iterator)
provided, will use to produce the
value to be compared
var stooges = [
{name: 'moe', age: 40}
, {name: 'larry', age: 50}
, {name: 'curly', age: 60}
];
_.max(stooges, function(s){
return s.age;
});
//Returns {name: 'curly', age: 60}
Max (Min)
Tuesday, May 22, 12
Slide 338
Slide 338 text
Returns the keys from a dictionary
as an array
_.keys({
one: 1,
two: 2,
three: 3
});
//Returns ["one", "two", "three"]
Keys
Tuesday, May 22, 12
Slide 339
Slide 339 text
Maps a duplicate input dictionary
on top of a predefined “default”
dictionary
var iceCream = {
flavor: "chocolate"
};
_.defaults(iceCream, {
flavor: "vanilla"
, sprinkles: "lots"
});
//Returns {flavor : "chocolate",
sprinkles : "lots"}
Defaults
Tuesday, May 22, 12
Slide 340
Slide 340 text
When chain is initiated, method
return a self-reference back to
underscore but with the value
attached [similar to opening with
_(val)].
The chain continues until the value
is extracted using .value()
var stooges = [
{name : 'curly', age : 25},
{name : 'moe', age : 21},
{name : 'larry', age : 23}
];
var youngest = _.chain(stooges)
.sortBy(function(s){
return s.age;
})
.map(function(s){
return s.name + ' is ' + s.age;
})
.first()
.value();
//Returns "moe is 21"
Chaining
Tuesday, May 22, 12
Slide 341
Slide 341 text
chain: begins a chain
map: takes dictionary and maps to
a nested array [[key, val],
[key, val], ..]
sortBy: sorts array returned by map
by key (first element)
reduce: reforms an object using the
nested list, [0] as key and [1] as
value
value: spits out the value an ends
the chain
_(request.params).chain()
.map(function(v, k) {
return [k,v];
})
.sortBy(function(a) {
return a[0];
})
.reduce(function(s, v){
s[v[0]] = v[1]; return s;
}, {})
.value();
Chain: FUN!
Tuesday, May 22, 12
Slide 342
Slide 342 text
Backbone.js
Tuesday, May 22, 12
Slide 343
Slide 343 text
Backbone.js
DocumentCloud
2010
Tuesday, May 22, 12
Slide 344
Slide 344 text
Backbone.js
•Micro application framework
•Relies on jQuery/Zepto and Underscore.js
•Provides Views, Models, Collections, and
Router
•If standard REST, default sync will work out
of box
Tuesday, May 22, 12
Slide 345
Slide 345 text
Model
•Fires events on value changes
•Must use model.get() and model.set()
Tuesday, May 22, 12
Slide 346
Slide 346 text
Collection
•Collection of models
•Can be enforced
•Fires events on add, remove, reset, etc
Tuesday, May 22, 12
Slide 347
Slide 347 text
View
•Creates own DOM object (or utilizes existing
one)
•Easy event delegation/undelegation
Tuesday, May 22, 12
Slide 348
Slide 348 text
Router
•Hash/History Router
•History management abstraction provided
Tuesday, May 22, 12
Slide 349
Slide 349 text
Require.js
Tuesday, May 22, 12
Slide 350
Slide 350 text
Require.js
James Burke
2009
Tuesday, May 22, 12
Slide 351
Slide 351 text
Require.js
•Implements AMD
•Asynchronous Module Definition
•Dependency Management
Tuesday, May 22, 12
Slide 352
Slide 352 text
r.js
•Optimizer, Compiler
•Concatenates dependencies into single file,
optionally runs closure/uglifyjs/etc
Tuesday, May 22, 12
Slide 353
Slide 353 text
Other Libraries Of Note
Tuesday, May 22, 12
Slide 354
Slide 354 text
Compilers/Compressors
•UglifyJS
• http://marijnhaverbeke.nl/uglifyjs
•JSmin:
• http://www.crockford.com/javascript/jsmin.html
•YUI Compressor
• http://developer.yahoo.com/yui/compressor/
http://marijnhaverbeke.nl/uglifyjs
Tuesday, May 22, 12
Slide 355
Slide 355 text
Lawnchair
•HTML5 localstorage abstraction
•Good suite of storage adapaters
•DOM, webkit-sqlite, etc
http://brian.io/lawnchair
Tuesday, May 22, 12
Slide 356
Slide 356 text
Moment.js
•Date/Time library
•Finally! Almost as easy as \DateTime and
strtotime()
http://momentjs.com/
Tuesday, May 22, 12
Slide 357
Slide 357 text
Enyo
•Application Framework
•Developed for the HP/Palm TouchPad
•Now open-source
•Designed for nested views and complex,
finger-based UI
http://enyojs.com/
Tuesday, May 22, 12
Slide 358
Slide 358 text
And Many More!
http://microjs.com/
Tuesday, May 22, 12
Slide 359
Slide 359 text
https://joind.in/6503
http://bit.ly/js-ruby-wat
Tuesday, May 22, 12