HTML5 Workshop - PHP|Tek

With the rise of advanced desktop and mobile browsers, high performance javascript engines, and ever increasing networking bandwidth, traditionally ‘frontend’ skills are in more demand than ever. PHP developers are increasingly finding themselves needing these skills more and more to remain competitive. This workshop will cover new features introduced in HTML5 and CSS3, how to use them today with modern browsers (and fallbacks), as well as tips and tricks to save time and do amazing things. It will also cover a refresher on JavaScript basics and dive into recent advances in libraries and coding techniques that power modern interactive web applications. The workshop will walk through from start to finish a simple web application utilizing as many HTML5, CSS3, and JavaScript techniques as possible. By the end the attendees can expect to have a grasp on things ranging from new tags, new style properties, advanced selectors, event-driven asynchronous JavaScript programming, new services such as GeoLocation, and much more.

Transcript

1. HTML5
   FOR THE PHP DEVELOPER
   Tuesday, May 22, 12
   

   View Slide

2. https://bitly.com/bundles/
   o_3eprjb8mhb/7
   Tuesday, May 22, 12
   

   View Slide

3. https://joind.in/6503
   Tuesday, May 22, 12
   

   View Slide

4. jakefolio
   http://jakefolio.com
   me@jakefolio.com
   Jake Smith
   Tuesday, May 22, 12
   

   View Slide

5. ? ? ?
   QUESTION:
   What technologies
   define HTML5
   Tuesday, May 22, 12
   

   View Slide

6. HTML ? ?
   QUESTION:
   What technologies
   define HTML5
   Tuesday, May 22, 12
   

   View Slide

7. HTML CSS ?
   QUESTION:
   What technologies
   define HTML5
   Tuesday, May 22, 12
   

   View Slide

8. HTML CSS JS
   QUESTION:
   What technologies
   define HTML5
   Tuesday, May 22, 12
   

   View Slide

9. NOW FOR WEBSITES
   Tuesday, May 22, 12
   

   View Slide

10. HTML5
    HISTORY LESSON
    Tuesday, May 22, 12
    

    View Slide

11. 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
    

    View Slide

12. First draft of HTML5 Released
    Apple, Mozilla, and Opera form WHATWG
    Web Hypertext Application Technology
    Working Group
    2004
    2008
    Tuesday, May 22, 12
    

    View Slide

13. "http://www.w3.org/TR/html4/strict.dtd">
    
    New doctype
    THEN:
    NOW:
    Tuesday, May 22, 12
    

    View Slide

14. 1. Release HTML5
    2. Create Awesome Logo
    3. Profit?
    HTML5 Marketing
    Tuesday, May 22, 12
    

    View Slide

15. HTML5homi.es
    Tuesday, May 22, 12
    

    View Slide

16. HTML5
    NEW ELEMENTS
    Tuesday, May 22, 12
    

    View Slide

17. • 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
    

    View Slide

18. • 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
    

    View Slide

19. HTML5
    SEMANTIC TAGS
    Tuesday, May 22, 12
    

    View Slide

20. HEADER
    NAV
    ASIDE
    SECTION
    FOOTER
    ARTICLE
    HEADER
    FOOTER
    Tuesday, May 22, 12
    

    View Slide

21. Tuesday, May 22, 12
    

    View Slide

22. 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
    

    View Slide

23. figure/figcaption
    
    alt="This Photo Blows Your Mind!">
    Explaining the awesomeness of this photo
    
    Tuesday, May 22, 12
    

    View Slide

24. HTML5 Shiv to the Rescue
    https://github.com/aFarkas/html5shiv
    Tuesday, May 22, 12
    

    View Slide

25. hgroup
    
    Welcome to HTML5 at PHP Tek
    Prepare for Awesomeness
    
    Tuesday, May 22, 12
    

    View Slide

26. meter/progress
    Question 3
    Question 6
    Question 16
    25%
    Loading
    Tuesday, May 22, 12
    

    View Slide

27. time
    May 22nd at 9am
    Tuesday, May 22, 12
    

    View Slide

28. • tabindex
    • hidden
    • contextMenu
    • spellCheck
    • data-*
    • ContentEditable
    • draggable
    • dropzone
    • microdata attributes
    • ARIA
    New HTML Attributes
    Tuesday, May 22, 12
    

    View Slide

29. New HTML Attributes
    • tabindex
    • hidden
    • contextMenu
    • spellCheck
    • data-*
    • ContentEditable
    • draggable
    • dropzone
    • microdata attributes
    • ARIA
    Tuesday, May 22, 12
    

    View Slide

30. Tabindex
    
    
    
    Only for screen readers
    <br/>.screen-reader {<br/>display: inline-block;<br/>overflow:hidden;<br/>text-indent: 100%;<br/>white-space: nowrap;<br/>}<br/>
    Tuesday, May 22, 12
    

    View Slide

31. data-*
    data-id="35123"
    data-category="mobile"
    data-caption="Hello form Tek!"
    id="img-profile-35123">
    <br/>var pic = document.getElementById('img-profile-35123');<br/>console.log('CAPTION: ' + pic.dataset.caption);<br/>
    Tuesday, May 22, 12
    

    View Slide

32. ContentEditable
    To Do List
    
    Get Badge from Keith
    Show up Daniel in Javascript
    MOAR COFFEE
    
    Tuesday, May 22, 12
    

    View Slide

33. Draggable
    
    Hello
    World
    <br/>var region = document.getElementById('region');<br/>var draggables = document.querySelectorAll('div[draggable]');<br/>for (var i = 0; i <= draggables.length-1; i++) {<br/>draggables[i].addEventListener('dragstart', function(e) {<br/>this.style.opacity = 0.4;<br/>});<br/>draggables[i].addEventListener('dragend', function(e) {<br/>this.style.opacity = 1;<br/>});<br/>}<br/>
    Tuesday, May 22, 12
    

    View Slide

34. HTML5
    FORMS
    Tuesday, May 22, 12
    

    View Slide

35. • email
    • tel
    • url
    • search
    • color
    • number
    • range
    • date
    New Form Inputs
    Tuesday, May 22, 12
    

    View Slide

36. • email
    • tel
    • url
    • search
    • color
    • number
    • range
    • date
    New Form Inputs
    Tuesday, May 22, 12
    

    View Slide

37. Tel
    name="telephone"
    placeholder="(123)456-7890"
    pattern="(\d{3})\d{3}\-\d{4}" />
    Tuesday, May 22, 12
    

    View Slide

38. Email
    name="email"
    placeholder="you@domain.com"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.
    [a-z]{2,4}">
    Tuesday, May 22, 12
    

    View Slide

39. URL
    name="site"
    placeholder="http://mydomain.com/"
    pattern="(http|https|ftp)\:\/\/[a-
    zA-Z0-9\-\.\/]*" />
    Tuesday, May 22, 12
    

    View Slide

40. Range/Number
    name="budget"
    value="3"
    min="0"
    max="5"
    step="1" />
    name="budget"
    value="3"
    min="0"
    max="5"
    step="1">
    Tuesday, May 22, 12
    

    View Slide

41. Date
    name="dob"
    placeholder="YYYY-MM-DD"
    pattern="[0-9]{4}-(0[1-9]|1[012])-
    (0[1-9]|1[0-9]|2[0-9]|3[01])">
    Tuesday, May 22, 12
    

    View Slide

42. • 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
    

    View Slide

43. HTML5
    AUDIO/VIDEO
    Tuesday, May 22, 12
    

    View Slide

44. Create Basic Video
    autoplay controls loop preload>
    
    
    
    
    
    
    
    
    
    Tuesday, May 22, 12
    

    View Slide

45. Audio/Video Attributes
    autoplay
    controls
    loop
    preload
    poster
    Tuesday, May 22, 12
    

    View Slide

46. 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
    

    View Slide

47. Video Convertors
    Miro
    FirefOGG
    Handbrake
    Tuesday, May 22, 12
    

    View Slide

48. httpd.conf
    AddType video/ogg .ogv
    AddType video/mp4 .mp4
    AddType video/webm .webm
    Tuesday, May 22, 12
    

    View Slide

49. Audio/Video API
    Audio/Video Events
    canplay, canplaythrough, playing, waiting,
    loadedmetadata, loadeddata
    play/pause
    volume
    currentTime/duration
    canPlayType
    muted/paused
    Tuesday, May 22, 12
    

    View Slide

50. 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
    

    View Slide

51. Tuesday, May 22, 12
    

    View Slide

52. Tuesday, May 22, 12
    

    View Slide

53. CSS3
    Tuesday, May 22, 12
    

    View Slide

54. CSS3
    INTRO SELECTORS
    Tuesday, May 22, 12
    

    View Slide

55. #CSS
    .menu li a { color: blue; }
    
    Drop Down
    
    Sub #1
    Sub #2
    
    
    
    Select all the descendants of the specified element
    Descendant Selector
    Tuesday, May 22, 12
    

    View Slide

56. .menu
    li
    li
    a
    Descendants
    Ancestor
    Descendant Selector
    Tuesday, May 22, 12
    

    View Slide

57. #CSS
    ul li { color: green; }
    ul > li { color: red; }
    
    Top Level
    Top Level
    
    Sub Level
    Sub Level
    
    
    
    This selector matches all elements that are the immediate
    children of a specified element.
    * Only the “sub level” text will be red.
    Child Combinator Selector
    Tuesday, May 22, 12
    

    View Slide

58. ul
    li
    li
    ol
    Children
    Parent
    li
    Selector Context
    Tuesday, May 22, 12
    

    View Slide

59. #CSS
    .module { margin: 0; }
    .module + .module { margin-left: 25px; }
    
    Module
    
    
    Module #2
    
    
    Module #3
    
    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
    

    View Slide

60. div
    .module
    .module
    .module + +
    Adjacent Sibling Selector
    Tuesday, May 22, 12
    

    View Slide

61. #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, 12
    

    View Slide

62. div
    p
    h1
    p
    h2
    General Sibling
    Tuesday, May 22, 12
    

    View Slide

63. It’s a numbers game.
    100
    #header .my-class
    [alt]
    div
    10 1
    Points Per Selector
    :after
    CSS Specificity
    Tuesday, May 22, 12
    

    View Slide

64. Who Wins??
    ?
    WINNER
    #1
    #slider
    #2
    .two-col .container .primary .content ul
    CSS Face Off
    Tuesday, May 22, 12
    

    View Slide

65. Who Wins??
    1
    WINNER
    #1
    #slider
    100 Points
    #2
    .two-col .container .primary .content ul
    41 Points
    CSS Face Off
    Tuesday, May 22, 12
    

    View Slide

66. Let’s make it more challenging!
    ?
    WINNER
    #1
    .container .external
    #2
    .container a[rel="external"]
    CSS Face Off
    Tuesday, May 22, 12
    

    View Slide

67. Who Wins??
    2
    WINNER
    #1
    .container .external
    020 Points
    #2
    .container a[rel="external"]
    021 Points
    CSS Face Off
    Tuesday, May 22, 12
    

    View Slide

68. Selectors are read from
    Right to Left
    Tuesday, May 22, 12
    

    View Slide

69. #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
    

    View Slide

70. CSS3
    NEW SELECTORS
    Tuesday, May 22, 12
    

    View Slide

71. #CSS
    img[alt] {
    border: 1px green solid;
    }
    
    
    Check if attribute exists.
    Attribute Selector
    Tuesday, May 22, 12
    

    View Slide

72. #CSS
    div[class|="widget"] {
    ...
    }
    
    
    
    Widget id of 1
    
    
    “Slug” selector
    * All “widgets” will be selected
    Child Selectors
    Tuesday, May 22, 12
    

    View Slide

73. #CSS
    div[class|="widget"] {
    ...
    }
    
    
    
    Widget id of 1
    
    
    “Slug” selector
    * All “widgets” will be selected
    Child Selectors
    Tuesday, May 22, 12
    

    View Slide

74. #CSS
    div[class*="foo"] {
    color: red;
    }
    
    Apply to this div
    
    “Contains” selector
    CSS3
    Attribute Selector
    Tuesday, May 22, 12
    

    View Slide

75. #CSS
    a[href^="mailto:"] {
    background: url(/images/icn-email.gif);
    }
    Portfolio
    FAQ
    Contact
    “Begins” with selector
    CSS3
    Child Selectors
    Tuesday, May 22, 12
    

    View Slide

76. #CSS
    a[href$=".pdf"] { background-image: url(pdf.png); }
    Download White Paper
    “Ends” with selector
    CSS3
    Child Selectors
    Tuesday, May 22, 12
    

    View Slide

77. #CSS
    [class$="right"] {
    _display: inline;
    }
    *[class$="right"] {
    _display: inline;
    }
    Anti-pattern
    * Universal selector will be used.
    Attribute Selectors
    Tuesday, May 22, 12
    

    View Slide

78. #CSS
    div p:first-child {
    color: #333;
    font-size: 14px;
    }
    
    Important Intro
    Regular Content
    
    :first-child, :last-child and :only-child
    :first-child
    Tuesday, May 22, 12
    

    View Slide

79. #CSS
    .menu li {
    border-bottom: 1px solid #ccc;
    }
    .menu li:last-child {
    border: 0;
    }
    
    First Menu element
    Menu element
    Last Menu element
    
    :first-child, :last-child and :only-child
    CSS3
    :last-child
    Tuesday, May 22, 12
    

    View Slide

80. #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
    

    View Slide

81. :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
    

    View Slide

82. :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
    

    View Slide

83. #CSS
    div:nth-child(3n) { background: #ccc; }
    
    
    
    3n
    
    
    3n
    
    CSS3
    :nth-child/:nth-type
    Tuesday, May 22, 12
    

    View Slide

84. #CSS
    .widget:nth-last-child(3n) { background: #ccc; }
    
    
    
    3n
    
    
    3n
    
    
    
    :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
    

    View Slide

85. #CSS
    .widget:nth-child(3n) { background: #ccc; }
    
    
    Side Note
    Side Note
    
    
    Side Note
    
    Side Note
    3n
    
    
    Let’s mix it up!
    CSS3
    :nth-child/:nth-type
    Tuesday, May 22, 12
    

    View Slide

86. #CSS
    div:nth-of-type(3n) { background: #ccc; }
    
    
    Side Note
    Side Note
    
    3n
    Side Note
    
    Side Note
    
    3n
    
    Now with :nth-of-type
    CSS3
    :nth-child/:nth-type
    Tuesday, May 22, 12
    

    View Slide

87. #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, 12
    

    View Slide

88. #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
    

    View Slide

89. 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
    

    View Slide

90. Pseudo Elements
    Tuesday, May 22, 12
    

    View Slide

91. #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
    

    View Slide

92. Tuesday, May 22, 12
    

    View Slide

93. #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
    

    View Slide

94. CSS3
    @FONT-FACE
    Tuesday, May 22, 12
    

    View Slide

95. Brief History
    Once limited to system fonts!
    Arial
    Verdana
    Tahoma
    Georgia
    Tuesday, May 22, 12
    

    View Slide

96. Font Alternatives
    sIFR = Flash
    Cufon = Javascript + canvas
    Tuesday, May 22, 12
    

    View Slide

97. @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
    

    View Slide

98. 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
    

    View Slide

99. Font Services
    TypeKit
    Google Font API
    Font Squirrel (generator)
    Font Spring
    Tuesday, May 22, 12
    

    View Slide

100. @font-face Gotchas
     Licensing is still a concern
     Rendering engines are inconsistent (ClearType)
     Tuesday, May 22, 12
     

     View Slide

101. Tuesday, May 22, 12
     

     View Slide

102. CSS3
     GRADIENTS
     Tuesday, May 22, 12
     

     View Slide

103. CSS3
     LINEAR GRADIENTS
     Tuesday, May 22, 12
     

     View Slide

104. linear-gradient(left, red 20%, blue);
     Tuesday, May 22, 12
     

     View Slide

105. linear-gradient(left, red 20%, blue);
     DIRECTION
     45deg
     left
     left top
     Tuesday, May 22, 12
     

     View Slide

106. linear-gradient(left, red 20%, blue);
     COLOR/COLOR STOP
     Tuesday, May 22, 12
     

     View Slide

107. Spectrum Gradient
     .spectrum {
     background: -webkit-linear-gradient(left,
     red,
     blue,
     green,
     yellow,
     orange
     );
     }
     Tuesday, May 22, 12
     

     View Slide

108. Spectrum Gradient
     .spectrum {
     background: -webkit-linear-gradient(left,
     red,
     blue 20%,
     green 40%,
     yellow 60%,
     orange 80%
     );
     }
     Tuesday, May 22, 12
     

     View Slide

109. Tuesday, May 22, 12
     

     View Slide

110. 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
     

     View Slide

111. Tuesday, May 22, 12
     

     View Slide

112. CSS3
     RADIAL GRADIENTS
     Tuesday, May 22, 12
     

     View Slide

113. radial-gradient(center, circle, white, #73D4C9 40%);
     Tuesday, May 22, 12
     

     View Slide

114. radial-gradient(center, circle, white, #73D4C9 40%);
     POSITION
     center
     left top
     30% 30%
     Tuesday, May 22, 12
     

     View Slide

115. radial-gradient(center, circle, white, #73D4C9 40%);
     SHAPE ellipse <= Default
     circle
     Tuesday, May 22, 12
     

     View Slide

116. radial-gradient(center, circle, white, #73D4C9 40%);
     COLOR/COLOR STOP
     Tuesday, May 22, 12
     

     View Slide

117. .radial {
     background-color: #73D4C9;
     background-image: -webkit-radial-gradient(30% 30%,
     circle,
     white,
     #73D4C9 40%
     );
     }
     Radial Gradient
     Tuesday, May 22, 12
     

     View Slide

118. Tuesday, May 22, 12
     

     View Slide

119. Things to Remember
     transparent = rgba(0,0,0,0);
     Angles != keyterms (top right != 45deg)
     Tuesday, May 22, 12
     

     View Slide

120. Gradient Examples
     http://lea.verou.me/css3patterns/
     http://www.standardista.com/cssgradients/
     Tuesday, May 22, 12
     

     View Slide

121. CSS3
     BUTTONS
     Tuesday, May 22, 12
     

     View Slide

122. Topics Covered
     box-shadow
     border-radius
     text-shadow
     Tuesday, May 22, 12
     

     View Slide

123. Basic Button
     Tuesday, May 22, 12
     

     View Slide

124. Round the Corners
     Tuesday, May 22, 12
     

     View Slide

125. border-radius: 6px;
     Tuesday, May 22, 12
     

     View Slide

126. 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
     

     View Slide

127. Total Control Border Radius
     -*-border-[top|right|bottom|left]-radius
     Tuesday, May 22, 12
     

     View Slide

128. Depth Shadows
     Tuesday, May 22, 12
     

     View Slide

129. box-shadow: 1px 1px 0 rgba(0,0,0,.25);
     Tuesday, May 22, 12
     

     View Slide

130. X-AXIS
     box-shadow: 1px 1px 0 rgba(0,0,0,.25);
     Tuesday, May 22, 12
     

     View Slide

131. Y-AXIS
     box-shadow: 1px 1px 0 rgba(0,0,0,.25);
     Tuesday, May 22, 12
     

     View Slide

132. BLUR
     box-shadow: 1px 1px 0 rgba(0,0,0,.25);
     Tuesday, May 22, 12
     

     View Slide

133. COLOR
     box-shadow: 1px 1px 0 rgba(0,0,0,.25);
     Tuesday, May 22, 12
     

     View Slide

134. 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
     

     View Slide

135. Add Gradient
     Tuesday, May 22, 12
     

     View Slide

136. Call to Action Button
     Tuesday, May 22, 12
     

     View Slide

137. text-shadow: 1px 1px 0 #387038;
     Tuesday, May 22, 12
     

     View Slide

138. text-shadow: 1px 1px 0 #387038;
     X-AXIS
     Tuesday, May 22, 12
     

     View Slide

139. Y-AXIS
     text-shadow: 1px 1px 0 #387038;
     Tuesday, May 22, 12
     

     View Slide

140. BLUR
     text-shadow: 1px 1px 0 #387038;
     Tuesday, May 22, 12
     

     View Slide

141. COLOR
     text-shadow: 1px 1px 0 #387038;
     Tuesday, May 22, 12
     

     View Slide

142. CSS3
     ANIMATIONS
     Tuesday, May 22, 12
     

     View Slide

143. CSS3
     TRANSFORMS
     Tuesday, May 22, 12
     

     View Slide

144. 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
     

     View Slide

145. -webkit-transition: all 2s 1s;
     Tuesday, May 22, 12
     

     View Slide

146. height
     width
     opacity
     text-indent
     PROPERTY
     -webkit-transition: all 2s ease-in 1s;
     Tuesday, May 22, 12
     

     View Slide

147. DURATION
     -webkit-transition: all 2s ease-in 1s;
     Tuesday, May 22, 12
     

     View Slide

148. -webkit-transition: all 2s ease-in 1s;
     EASING
     ease-in
     ease-out
     ease-in-out
     Tuesday, May 22, 12
     

     View Slide

149. DELAY
     -webkit-transition: all 2s ease-in 1s;
     Tuesday, May 22, 12
     

     View Slide

150. .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
     

     View Slide

151. .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
     

     View Slide

152. CSS3
     @KEYFRAMES
     Tuesday, May 22, 12
     

     View Slide

153. -webkit-aninmation: bounce 2s 1s infinite;
     Tuesday, May 22, 12
     

     View Slide

154. -webkit-aninmation: bounce 2s 1s infinite;
     ANIMATION (KEYFRAME)
     Tuesday, May 22, 12
     

     View Slide

155. -webkit-aninmation: bounce 2s 1s infinite;
     DURATION
     Tuesday, May 22, 12
     

     View Slide

156. -webkit-aninmation: bounce 2s 1s infinite;
     DELAY
     Tuesday, May 22, 12
     

     View Slide

157. -webkit-aninmation: bounce 2s 1s infinite;
     INTERVALS
     Tuesday, May 22, 12
     

     View Slide

158. @-webkit-keyframes bounce {
     from, to {
     -webkit-animation-timing-function: ease-out;
     }
     50% {
     bottom: 220px;
     -webkit-animation-timing-function: ease-in;
     }
     }
     Tuesday, May 22, 12
     

     View Slide

159. @-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
     

     View Slide

160. CSS3
     MEDIA QUERIES
     Tuesday, May 22, 12
     

     View Slide

161. @media print {
     h1 { color: #000; }
     h2 { color: #333; }
     h3 { color: #666; }
     .sidebar { display: none; }
     }
     Print Media Query
     rel="stylesheet"
     href="css/print.css">
     Tuesday, May 22, 12
     

     View Slide

162. rel="stylesheet"
     href="css/small.css">
     @media only screen and (min-width: 480px) {
     /* Style adjustments for viewports 480px and over */
     }
     Using Media Queries
     Tuesday, May 22, 12
     

     View Slide

163. 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
     

     View Slide

164. 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
     

     View Slide

165. CSS3
     RESPONSIVE
     Tuesday, May 22, 12
     

     View Slide

166. 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
     

     View Slide

167. 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
     

     View Slide

168. 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
     

     View Slide

169. Tuesday, May 22, 12
     

     View Slide

170. Tuesday, May 22, 12
     

     View Slide

171. CSS3
     MOBILE FIRST
     Tuesday, May 22, 12
     

     View Slide

172. Graceful Degradation vs. Progressive Enhancement
     http://designshack.net/articles/css/mobilefirst/
     Tuesday, May 22, 12
     

     View Slide

173. Tuesday, May 22, 12
     

     View Slide

174. Javascript
     Tuesday, May 22, 12
     

     View Slide

175. Javascript
     DOM ACCESS
     Tuesday, May 22, 12
     

     View Slide

176. var items = document.querySelectorAll('.menu li');
     var items = $('.menu li');
     Tuesday, May 22, 12
     

     View Slide

177. 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
     

     View Slide

178. // 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
     

     View Slide

179. Javascript
     LOCAL STORAGE
     Tuesday, May 22, 12
     

     View Slide

180. // 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
     

     View Slide

181. 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
     

     View Slide

182. 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
     

     View Slide

183. Tuesday, May 22, 12
     

     View Slide

184. Javascript
     GEOLOCATION
     Tuesday, May 22, 12
     

     View Slide

185. // Check if geolocation is supported
     if (navigator.geolocation) {
     // Geolocation Supported!
     } else {
     // Geolocation not supported
     }
     Tuesday, May 22, 12
     

     View Slide

186. geoloc.getCurrentPosition(function(pos) {
     position = [pos.coords.latitude, pos.coords.longitude];
     }, errorHandler);
     var position;
     var geoloc = navigator.geolocation;
     ASYNC
     Tuesday, May 22, 12
     

     View Slide

187. 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
     

     View Slide

188. Javascript
     WEB SOCKETS
     Tuesday, May 22, 12
     

     View Slide

189. 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
     

     View Slide

190. // 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
     

     View Slide

191. // Say hello
     ws.send('Hello World');
     // Close the connection
     ws.close();
     Tuesday, May 22, 12
     

     View Slide

192. 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
     

     View Slide

193. • 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
     

     View Slide

194. Tuesday, May 22, 12
     

     View Slide

195. • 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
     

     View Slide

196. • Media Queries (Responsive): http://mediaqueri.es/
     • Background Patterns: http://leaverou.me/
     css3patterns/
     Galleries/Showcases
     Tuesday, May 22, 12
     

     View Slide

197. Q/A and Live Code!
     Tuesday, May 22, 12
     

     View Slide

198. Thanks for Listening!
     jakefolio
     http://jakefolio.com
     me@jakefolio.com
     Tuesday, May 22, 12
     

     View Slide

199. HTML5 and JavaScript
     Part Deux
     Tuesday, May 22, 12
     

     View Slide

200. Daniel Cousineau
     @dcousineau
     Tuesday, May 22, 12
     

     View Slide

201. History
     Tuesday, May 22, 12
     

     View Slide

202. Mocha
     LiveScript
     JavaScript
     Brendan Eich
     CTO, Mozilla Corp.
     April 1995
     Tuesday, May 22, 12
     

     View Slide

203. JavaScript
     ECMAScript
     ActionScript
     JScript
     Tuesday, May 22, 12
     

     View Slide

204. Basics
     Tuesday, May 22, 12
     

     View Slide

205. Data Types
     •number
     •string
     •boolean
     •object
     •null
     •NaN
     •undefined
     Tuesday, May 22, 12
     

     View Slide

206. Strings
     •Are Objects, have methods
     Tuesday, May 22, 12
     

     View Slide

207. "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
     

     View Slide

208. 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
     

     View Slide

209. 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
     

     View Slide

210. 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
     

     View Slide

211. in or hasOwnProperty()
     •Tough call:
     •.hasOwnProperty() more consistent
     •in checks inherited properties
     •Used in for loop
     Tuesday, May 22, 12
     

     View Slide

212. 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
     

     View Slide

213. Arrays
     •Special object
     •Numerical keys only
     •Keeps intrinsic ordering
     •Short ([]) and Long (new Array()) syntax
     Tuesday, May 22, 12
     

     View Slide

214. 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
     

     View Slide

215. 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
     

     View Slide

216. var arr1 = [1,2,3];
     var arr2 = [3,4,5];
     arr1.concat(arr2); //[1,2,3,3,4,5]
     Arrays
     Tuesday, May 22, 12
     

     View Slide

217. delete
     •Removes element from an object
     •“Removes element from an array”
     •Not really, just sets it to undefined
     Tuesday, May 22, 12
     

     View Slide

218. 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
     

     View Slide

219. function Foo() {
     //...
     }
     Foo(); //valid
     Bar(); //valid
     function Bar() {
     //...
     }
     Functions
     Tuesday, May 22, 12
     

     View Slide

220. function Foo() {
     }
     Foo.bar = "value";
     'bar' in Foo; //true
     Foo.bar == "value"; //true
     Functions
     Tuesday, May 22, 12
     

     View Slide

221. 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
     

     View Slide

222. arguments
     •A special variable found inside a function
     •A not-quite array object containing all the
     function arguments
     Tuesday, May 22, 12
     

     View Slide

223. 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
     

     View Slide

224. typeof
     •Determines a variables type
     •Returns a string
     Tuesday, May 22, 12
     

     View Slide

225. 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
     

     View Slide

226. 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
     

     View Slide

227. 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
     

     View Slide

228. Closures
     Tuesday, May 22, 12
     

     View Slide

229. 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
     

     View Slide

230. 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
     

     View Slide

231. 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
     

     View Slide

232. (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
     

     View Slide

233. Scoping
     Tuesday, May 22, 12
     

     View Slide

234. 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
     

     View Slide

235. 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
     

     View Slide

236. 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
     

     View Slide

237. 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
     

     View Slide

238. 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
     

     View Slide

239. this
     Tuesday, May 22, 12
     

     View Slide

240. 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
     

     View Slide

241. 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
     

     View Slide

242. var Foo = {
     bar: "bar",
     baz: function() {
     return this.bar;
     }
     };
     Foo.bat = function() {
     return this.bar + "bat";
     };
     Foo.bat(); //"barbat"
     this
     Tuesday, May 22, 12
     

     View Slide

243. call & apply
     •Methods in the function prototype
     •Change the context in which a function
     executes!
     Tuesday, May 22, 12
     

     View Slide

244. 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
     

     View Slide

245. function bind(func, context) {
     return function() {
     return func.call(context, arguments);
     }
     }
     Practical: Binding
     Tuesday, May 22, 12
     

     View Slide

246. Exceptions
     Tuesday, May 22, 12
     

     View Slide

247. Exceptions
     •All errors are thrown
     •Classic try...catch...finally blocks
     Tuesday, May 22, 12
     

     View Slide

248. try {
     funcDoesNotExist();
     } catch (e) {
     alert(e); //ReferenceError: funcDoesNotExist is not defined
     } finally {
     //Always Executes
     }
     Exceptions
     Tuesday, May 22, 12
     

     View Slide

249. 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
     

     View Slide

250. Prototype
     Tuesday, May 22, 12
     

     View Slide

251. 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
     

     View Slide

252. 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
     

     View Slide

253. 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
     

     View Slide

254. instance
     ‣ bat
     ‣ __proto__
     ‣ baz
     ‣ constructor
     ‣ __proto__
     ‣ ...
     instance.bat = function() {
     /* ... */
     }
     instance.bat(); //works
     Foo.bat(); //error
     Foo.prototype.bat(); //error
     new
     Tuesday, May 22, 12
     

     View Slide

255. 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
     

     View Slide

256. Asynchronous
     Tuesday, May 22, 12
     

     View Slide

257. Asynchronous
     •setTimeout, setInterval allow you to have
     code executing asynchronously while other
     code executes
     Tuesday, May 22, 12
     

     View Slide

258. var id = setInterval(function() {
     //Code to execute every 1000 milliseconds
     }, 1000);
     //clearInterval(id); to stop
     setInterval
     Tuesday, May 22, 12
     

     View Slide

259. var id = setTimeout(function() {
     //Code to execute after 1000 milliseconds have passed
     }, 1000);
     //clearTimeout(id); to cancel
     setTimeout
     Tuesday, May 22, 12
     

     View Slide

260. setInterval()
     setTimeout()
     Tuesday, May 22, 12
     

     View Slide

261. 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
     

     View Slide

262. DOM
     Tuesday, May 22, 12
     

     View Slide

263. DOM
     •Document Object Model
     •API to interact with the HTML/XHTML
     document
     Tuesday, May 22, 12
     

     View Slide

264. Basic selection methods in native
     DOM
     document
     .getElementById('foo');
     document
     .getElementsByClassName('.bar');
     document
     .getElementsByTagName('script');
     DOM: Selection
     Tuesday, May 22, 12
     

     View Slide

265. Tuesday, May 22, 12
     

     View Slide

266. 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
     

     View Slide

267. Tuesday, May 22, 12
     

     View Slide

268. 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
     

     View Slide

269. DOM
     https://developer.mozilla.org/en/Gecko_DOM_Reference
     Tuesday, May 22, 12
     

     View Slide

270. Debugging
     Tuesday, May 22, 12
     

     View Slide

271. Chrome/Safari Devel. Tools
     Tuesday, May 22, 12
     

     View Slide

272. Firefox FireBug
     Tuesday, May 22, 12
     

     View Slide

273. 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
     

     View Slide

274. 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
     

     View Slide

275. 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
     

     View Slide

276. 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
     

     View Slide

277. Script
     •Provides a familiar break-point debugging
     workflow
     Tuesday, May 22, 12
     

     View Slide

278. Coding Styles
     Tuesday, May 22, 12
     

     View Slide

279. Coding Styles
     •Mostly your standard C based style
     techniques
     •Special considerations
     •Semi-colons? No semi-colons?
     •Leading , ?
     •Prototype Definition?
     Tuesday, May 22, 12
     

     View Slide

280. var dict = {
     foo: 'bar',
     baz: 'bat'
     };
     var dict = {
     foo: 'bar'
     , baz: 'bat'
     };
     Comma Style
     Tuesday, May 22, 12
     

     View Slide

281. var foo;
     var bar;
     var baz;
     var foo
     , bar
     , baz;
     var Declaration Style
     Tuesday, May 22, 12
     

     View Slide

282. function Foo() {
     }
     Foo.prototype.bar = function(){
     };
     Prototype Style
     function Foo() {
     }
     Foo.prototype = {
     bar: function() {
     }
     }
     Tuesday, May 22, 12
     

     View Slide

283. 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
     

     View Slide

284. Common Techniques
     Tuesday, May 22, 12
     

     View Slide

285. 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
     

     View Slide

286. 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
     

     View Slide

287. Pro-Tip
     •Create an application namespace as a
     dictionary in the global scope
     •Add in any global level configuration values
     Tuesday, May 22, 12
     

     View Slide

288. JSON
     Tuesday, May 22, 12
     

     View Slide

289. JSON
     Douglas Crockford
     Awesome
     2001
     Tuesday, May 22, 12
     

     View Slide

290. 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
     

     View Slide

291. {"menu": {
     "id": "file",
     "value": "File",
     "popup": {
     "menuitem": [
     {"value": "New",
     "onclick": "CreateNewDoc()"},
     {"value": "Open",
     "onclick": "OpenDoc()"},
     {"value": "Close",
     "onclick": "CloseDoc()"}
     ]
     }
     }}
     JSON
     
     
     onclick="CreateNewDoc()" />
     onclick="OpenDoc()" />
     onclick="CloseDoc()" />
     
     
     Tuesday, May 22, 12
     

     View Slide

292. BREAK
     HAMMER TIME
     Tuesday, May 22, 12
     

     View Slide

293. jQuery
     Tuesday, May 22, 12
     

     View Slide

294. jQuery
     John Resig
     Author, jQuery
     January 2006
     Tuesday, May 22, 12
     

     View Slide

295. 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
     

     View Slide

296. Selectors
     •Superset of CSS3 selectors
     •Custom Pseudo-Classes
     •Filters in jQuery parlance
     Tuesday, May 22, 12
     

     View Slide

297. Selectors
     •$('selector') returns jQuery object for
     chaining purposes
     •Chained methods will apply to all results if
     selector matches multiple elements
     Tuesday, May 22, 12
     

     View Slide

298. 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
     

     View Slide

299. Gets the value of the selected option
     in a select box
     $('select option:selected').val();
     Selectors
     Tuesday, May 22, 12
     

     View Slide

300. Tests matched element against
     selector, in this case the jQuery
     ‘visible’ selector
     $('.foo').is(':visible');
     Testing Elements
     Tuesday, May 22, 12
     

     View Slide

301. Custom Filters
     •jQuery provides the ability to create custom
     filters
     •:radio, :hidden, etc are custom filters
     provided by default
     Tuesday, May 22, 12
     

     View Slide

302. $("#foo")
     .html("bar baz");
     jQuery
     
     
     bar baz
     
     Tuesday, May 22, 12
     

     View Slide

303. Chaining
     •Most all jQuery methods are chain-able
     •If $() returns > 1 element, methods invoked
     will apply to all matched
     Tuesday, May 22, 12
     

     View Slide

304. 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
     

     View Slide

305. Events
     •jQuery wraps an event handling system
     •Handles browser events, AJAX events, and
     custom events
     Tuesday, May 22, 12
     

     View Slide

306. $(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
     

     View Slide

307. $('img').hover(function(){
     //Do something when user hovers over
     //any img tag
     });
     Events
     Tuesday, May 22, 12
     

     View Slide

308. Events
     •Event functions have the matched element
     from jQuery bound as this
     Tuesday, May 22, 12
     

     View Slide

309. 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
     

     View Slide

310. 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
     

     View Slide

311. 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
     

     View Slide

312. 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
     

     View Slide

313. 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
     

     View Slide

314. 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
     

     View Slide

315. 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
     

     View Slide

316. 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
     

     View Slide

317. 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
     

     View Slide

318. 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
     

     View Slide

319. 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
     

     View Slide

320. $.ajax({
     url: "test.php",
     success: function(data){
     $('div.status').addClass("done")
     .html(data);
     }
     });
     AJAX
     Tuesday, May 22, 12
     

     View Slide

321. 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
     

     View Slide

322. 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
     

     View Slide

323. ["api", "response"] callback(["api", "response"]);
     JSONp
     domain.tld/api.json domain.tld/api.jsonp?callback=callback
     Tuesday, May 22, 12
     

     View Slide

324. $.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
     

     View Slide

325. 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
     

     View Slide

326. (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
     

     View Slide

327. Resources
     http://api.jquery.com/
     Tuesday, May 22, 12
     

     View Slide

328. Underscore.js
     Tuesday, May 22, 12
     

     View Slide

329. Underscore.js
     DocumentCloud
     2009
     Tuesday, May 22, 12
     

     View Slide

330. Underscore.js
     •Functional, self-contained micro library
     •Uses chaining for expressiveness
     •Does not inject methods into native objects!
     Tuesday, May 22, 12
     

     View Slide

331. 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
     

     View Slide

332. Underscore.js
     •_(coll).method(arg1, ..)
     •_.method(coll, arg1, ..)
     Tuesday, May 22, 12
     

     View Slide

333. 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
     

     View Slide

334. 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
     

     View Slide

335. 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
     

     View Slide

336. 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
     

     View Slide

337. 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
     

     View Slide

338. 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
     

     View Slide

339. 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
     

     View Slide

340. 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
     

     View Slide

341. 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
     

     View Slide

342. Backbone.js
     Tuesday, May 22, 12
     

     View Slide

343. Backbone.js
     DocumentCloud
     2010
     Tuesday, May 22, 12
     

     View Slide

344. 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
     

     View Slide

345. Model
     •Fires events on value changes
     •Must use model.get() and model.set()
     Tuesday, May 22, 12
     

     View Slide

346. Collection
     •Collection of models
     •Can be enforced
     •Fires events on add, remove, reset, etc
     Tuesday, May 22, 12
     

     View Slide

347. View
     •Creates own DOM object (or utilizes existing
     one)
     •Easy event delegation/undelegation
     Tuesday, May 22, 12
     

     View Slide

348. Router
     •Hash/History Router
     •History management abstraction provided
     Tuesday, May 22, 12
     

     View Slide

349. Require.js
     Tuesday, May 22, 12
     

     View Slide

350. Require.js
     James Burke
     2009
     Tuesday, May 22, 12
     

     View Slide

351. Require.js
     •Implements AMD
     •Asynchronous Module Definition
     •Dependency Management
     Tuesday, May 22, 12
     

     View Slide

352. r.js
     •Optimizer, Compiler
     •Concatenates dependencies into single file,
     optionally runs closure/uglifyjs/etc
     Tuesday, May 22, 12
     

     View Slide

353. Other Libraries Of Note
     Tuesday, May 22, 12
     

     View Slide

354. 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
     

     View Slide

355. Lawnchair
     •HTML5 localstorage abstraction
     •Good suite of storage adapaters
     •DOM, webkit-sqlite, etc
     http://brian.io/lawnchair
     Tuesday, May 22, 12
     

     View Slide

356. Moment.js
     •Date/Time library
     •Finally! Almost as easy as \DateTime and
     strtotime()
     http://momentjs.com/
     Tuesday, May 22, 12
     

     View Slide

357. 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
     

     View Slide

358. And Many More!
     http://microjs.com/
     Tuesday, May 22, 12
     

     View Slide

359. https://joind.in/6503
     http://bit.ly/js-ruby-wat
     Tuesday, May 22, 12
     

     View Slide