Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Year of Learning (and Teaching) JavaScript Deeply

Zac Gordon
November 19, 2016

A Year of Learning (and Teaching) JavaScript Deeply

WordCamp Baltimore 2016

Zac Gordon

November 19, 2016
Tweet

More Decks by Zac Gordon

Other Decks in Technology

Transcript

  1. @zgordon && @jsforwp
    A Year of Learning
    (and Teaching)
    JavaScript Deeply
    WordCamp Baltimore

    View Slide

  2. @zgordon && @jsforwp
    Hi! I’m Zac!
    @zgordon
    WordCamp Baltimore

    View Slide

  3. @zgordon && @jsforwp
    WordPress Teacher from Treehouse
    WordCamp Baltimore

    View Slide

  4. @zgordon && @jsforwp
    JavaScript for WordPress Master Course
    WordCamp Baltimore

    View Slide

  5. @zgordon && @jsforwp
    A Year of Learning
    (and Teaching)
    JavaScript Deeply
    WordCamp Baltimore

    View Slide

  6. @zgordon && @jsforwp
    WordCamp Baltimore
    Thanksgiving 2015

    View Slide

  7. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  8. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  9. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  10. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  11. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  12. @zgordon && @jsforwp
    WordCamp Baltimore
    What Does it Mean?
    “Learn JavaScript, Deeply”

    View Slide

  13. @zgordon && @jsforwp
    WordCamp Baltimore
    Learning Objectives
    “Learn JavaScript, Deeply”

    View Slide

  14. @zgordon && @jsforwp
    WordCamp Baltimore
    How to Assess??
    “Learn JavaScript, Deeply”

    View Slide

  15. @zgordon && @jsforwp
    WordCamp Baltimore
    Content???
    “Learn JavaScript, Deeply”

    View Slide

  16. To Do #1
    • Begin Master Outline
    • Get List of Advisors
    • Fill in Gaps in My Knowledge
    • Start Building Projects
    • Search for JavaScript Basics Course
    • Chapter Number or Section Name Here
    WordCamp Baltimore @zgordon && @jsforwp

    View Slide

  17. @zgordon && @jsforwp
    WordCamp Baltimore
    December 2015

    View Slide

  18. @zgordon && @jsforwp
    WordCamp Baltimore
    Site Pros Cons
    Easy, Interactive
    and Free
    Very Basic
    Light on Concepts

    View Slide

  19. @zgordon && @jsforwp
    WordCamp Baltimore
    Site Pros Cons
    Easy, Interactive
    and Free
    Very Basic
    Light on Concepts
    Quite Technical
    Some Free
    Lacking Some Content
    Scattered Learning Path

    View Slide

  20. @zgordon && @jsforwp
    WordCamp Baltimore
    Site Pros Cons
    Easy, Interactive
    and Free
    Very Basic
    Light on Concepts
    Quite Technical
    Some Free
    Lacking Some Content
    Scattered Learning Path
    So Much Content
    Live Lecture Style
    Not Free
    So Much Content

    View Slide

  21. @zgordon && @jsforwp
    WordCamp Baltimore
    Site Pros Cons
    Easy, Interactive
    and Free
    Very Basic
    Light on Concepts
    Quite Technical
    Some Free
    Lacking Some Content
    Scattered Learning Path
    So Much Content
    Live Lecture Style
    Not Free
    So Much Content
    Large Marketplace
    Range of Topics
    Quality Varies
    Couldn’t Find One

    View Slide

  22. @zgordon && @jsforwp
    WordCamp Baltimore
    Site Pros Cons
    Easy, Interactive
    and Free
    Very Basic
    Light on Concepts
    Quite Technical
    Some Free
    Lacking Some Content
    Scattered Learning Path
    So Much Content
    Live Lecture Style
    Not Free
    So Much Content
    Large Marketplace
    Range of Topics
    Quality Varies
    Couldn’t Find One

    View Slide

  23. @zgordon && @jsforwp
    WordCamp Baltimore
    I Need to Teach
    The Basics
    “Learn JavaScript, Deeply”

    View Slide

  24. JavaScript Basics
    • History/Context
    • The Language
    • The DOM
    • Events
    • JSON
    • Local Storage
    • Chapter Number or Section Name Here
    WordCamp Baltimore @zgordon && @jsforwp
    • Asynchronous JS
    • Object Oriented JavaScript
    • “Interview Questions”
    • ES6, ESNext
    • Development Tools
    • Projects

    View Slide

  25. WordCamp Baltimore
    JavaScript started as
    an assignment
    to port Java to the web.
    History
    @zgordon && @jsforwp

    View Slide

  26. WordCamp Baltimore
    JavaScript started as
    an assignment a refusal
    to port Java to the web.
    History
    @zgordon && @jsforwp

    View Slide

  27. WordCamp Baltimore
    Everything in JavaScript is an Object
    The Language
    @zgordon && @jsforwp

    View Slide

  28. WordCamp Baltimore
    The DOM is actually an API.
    The DOM
    @zgordon && @jsforwp

    View Slide

  29. WordCamp Baltimore
    Events propagate from the
    Top of the DOM
    Down to the Target and
    Bubble back up
    Events
    @zgordon && @jsforwp

    View Slide

  30. WordCamp Baltimore
    JSON.parse() coverts JSON into
    Native JavaScript Objects
    JSON
    @zgordon && @jsforwp

    View Slide

  31. WordCamp Baltimore
    Local Storage only supports strings
    Hence JSON.stringify()
    Local Storage
    @zgordon && @jsforwp

    View Slide

  32. WordCamp Baltimore
    Look for async and await in a
    Coming version of JavaScript
    Asynchronous JavaScript
    @zgordon && @jsforwp

    View Slide

  33. WordCamp Baltimore
    Object.assign() favors Composition
    Over “Class” Inheritance
    OO JS
    @zgordon && @jsforwp

    View Slide

  34. WordCamp Baltimore
    Closures are nested functions that
    Remember the values of variables
    The Interview Questions
    @zgordon && @jsforwp

    View Slide

  35. WordCamp Baltimore
    Yearly JS release cycle
    ES6 is so 2015
    ES6, ESNext
    @zgordon && @jsforwp

    View Slide

  36. WordCamp Baltimore
    Fluidity with tools is
    As important as fluency
    Dev Tools
    @zgordon && @jsforwp

    View Slide

  37. WordCamp Baltimore
    You don’t really know it
    Until you build something
    Projects
    @zgordon && @jsforwp

    View Slide

  38. JavaScript Basics
    • History/Context
    • The Language
    • The DOM
    • Events
    • JSON
    • Local Storage
    • Chapter Number or Section Name Here
    WordCamp Baltimore @zgordon && @jsforwp
    • Asynchronous JS
    • Object Oriented JavaScript
    • “Interview Questions”
    • ES6, ESNext
    • Development Tools
    • Projects

    View Slide

  39. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  40. @zgordon && @jsforwp
    WordCamp Baltimore
    You Don’t Know JS
    By Kyle Simpson
    FREE

    View Slide

  41. @zgordon && @jsforwp
    WordCamp Baltimore
    January 2016

    View Slide

  42. @zgordon && @jsforwp
    WordCamp Baltimore
    Beyond Basics
    “Learn JavaScript, Deeply”

    View Slide

  43. @zgordon && @jsforwp
    WordCamp Baltimore
    Libraries & Frameworks
    “Learn JavaScript, Deeply”

    View Slide

  44. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  45. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  46. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  47. @zgordon && @jsforwp
    WordCamp Baltimore
    Architecture,
    Performance,
    Security & Scale
    “Learn JavaScript, Deeply”

    View Slide

  48. @zgordon && @jsforwp
    WordCamp Baltimore
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    A ”Learning JavaScript Deeply” Learning Curve

    View Slide

  49. @zgordon && @jsforwp
    WordCamp Baltimore
    1-3 Years to
    Learn JS Deeply
    “Learn JavaScript, Deeply”

    View Slide

  50. @zgordon && @jsforwp
    WordCamp Baltimore
    Feb/March 2016

    View Slide

  51. @zgordon && @jsforwp
    WordCamp Baltimore
    I know it but
    I haven’t done it yet
    and I’m stressed

    View Slide

  52. @zgordon && @jsforwp
    WordCamp Baltimore
    LEARN
    DIGEST
    PRACTICE
    REVIEW
    REPEAT

    View Slide

  53. @zgordon && @jsforwp
    WordCamp Baltimore
    EARN
    DIGEST
    PRACTICE
    REVIEW
    REPEAT
    LEARN
    DIGEST
    PRACTICE
    REVIEW

    View Slide

  54. WordCamp Baltimore
    You don’t have to rush
    To learn JavaScript deeply
    @zgordon && @jsforwp

    View Slide

  55. WordCamp Baltimore
    1-3 hours per week
    with occasional binges
    @zgordon && @jsforwp

    View Slide

  56. WordCamp Baltimore
    Learning JavaScript deeply
    is not a short-term effort
    @zgordon && @jsforwp

    View Slide

  57. WordCamp Baltimore
    You don’t have to rush
    @zgordon && @jsforwp

    View Slide

  58. @zgordon && @jsforwp
    WordCamp Baltimore
    April-May 2016

    View Slide

  59. @zgordon && @jsforwp
    WordCamp Baltimore
    June, July, August,
    Sept, Nov, Dec…

    View Slide

  60. @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  61. @zgordon && @jsforwp
    WordCamp Baltimore
    Learn JavaScript
    Bootcamp Style

    View Slide

  62. @zgordon && @jsforwp
    WordCamp Baltimore
    JS Bootcamps

    View Slide

  63. @zgordon && @jsforwp
    WordCamp Baltimore
    Pros Cons
    In Depth, In Person,
    Current, Job Connects
    Expensive, Overwhelming,
    Time Consuming, Not WP

    View Slide

  64. @zgordon && @jsforwp
    WordCamp Baltimore
    LEARN
    DIGEST
    PRACTICE
    REVIEW
    REPEAT
    LEARN
    DIGEST
    PRACT

    View Slide

  65. LEARN
    DIGEST
    PRACTICE
    REVIEW
    REPEAT
    LEARN
    DIGEST
    PRACTICE
    REVIEW
    REPEAT
    LEARN
    DIGEST
    PRACTICE
    RE
    LEARN
    @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide

  66. @zgordon && @jsforwp
    WordCamp Baltimore
    Job Ready
    !==
    Knowing Deeply

    View Slide

  67. @zgordon && @jsforwp
    WordCamp Baltimore
    What Does it Mean?
    “Learn JavaScript, Deeply”

    View Slide

  68. @zgordon && @jsforwp
    JavaScript for WordPress Master Course
    WordCamp Baltimore

    View Slide

  69. @zgordon && @jsforwp
    WordCamp Baltimore
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    A ”Learning JavaScript Deeply” Learning Curve
    Part 1 Part 2 Part 3 Part 4 Not Covered

    View Slide

  70. @zgordon && @jsforwp
    WordCamp Baltimore
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    Dec Jan Feb March April May June July Aug Sept Nov Dec
    Learning / Teaching Over Time
    Part 3 Part 1 Part 2 Part 4

    View Slide

  71. @zgordon && @jsforwp
    WordCamp Baltimore
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    Dec Jan Feb March April May June July Aug Sept Nov Dec
    Part 1 - JavaScript
    Part 1

    View Slide

  72. @zgordon && @jsforwp
    WordCamp Baltimore
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    Dec Jan Feb March April May June July Aug Sept Nov Dec
    Part 2 - Frameworks
    Part 3 Part 1 Part 2 Part 4

    View Slide

  73. @zgordon && @jsforwp
    WordCamp Baltimore
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    Dec Jan Feb March April May June July Aug Sept Nov Dec
    Part 3 – WP REST API
    Part 3 Part 1 Part 2 Part 4

    View Slide

  74. @zgordon && @jsforwp
    WordCamp Baltimore
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    Dec Jan Feb March April May June July Aug Sept Nov Dec
    Part 4 – Real World Projects
    Part 3 Part 1 Part 2 Part 4

    View Slide

  75. WordCamp Baltimore
    Learning Goals
    Can Change
    @zgordon && @jsforwp

    View Slide

  76. @zgordon && @jsforwp
    WordCamp Baltimore
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    Dec Jan Feb March April May June July Aug Sept Nov Dec
    Learning / Teaching Over Time
    Part 3 Part 1 Part 2 Part 4

    View Slide

  77. @zgordon && @jsforwp
    WordCamp Baltimore
    Tonya, I’m so nervous!
    Everyone just wants the API and React stuff and I have
    so much to cover first!!!

    View Slide

  78. @zgordon && @jsforwp
    WordCamp Baltimore
    Tonya, I’m so nervous!
    Everyone just wants the API and React stuff and I have so
    much to cover first.
    That’s fine Zac. A lot of folks just want the buzzwords. We
    need to explain why fundamentals are necessary
    You’re doing the right thing though…

    View Slide

  79. WordCamp Baltimore
    How many people are complaining about API and React
    content not being available yet?
    @zgordon && @jsforwp

    View Slide

  80. WordCamp Baltimore
    Hmm, good question, let me see…
    How many people are complaining about API and React
    content not being available yet?
    @zgordon && @jsforwp

    View Slide

  81. WordCamp Baltimore
    Hmm, good question, let me see…
    Roughly .03% of students. Hmm
    How many people are complaining about API and React
    content not being available yet?
    @zgordon && @jsforwp

    View Slide

  82. @zgordon && @jsforwp
    WordCamp Baltimore
    My Perception
    Complaining Waiting for More Happy Customers

    View Slide

  83. @zgordon && @jsforwp
    WordCamp Baltimore
    JS for WP Student Progress
    Not Started In Progress Caught Up
    My Perception
    Complaining Waiting for More Happy Customers

    View Slide

  84. @zgordon && @jsforwp
    WordCamp Baltimore
    Self Imposed Stress

    View Slide

  85. @zgordon && @jsforwp
    WordCamp Baltimore
    Don’t Stress

    View Slide

  86. @zgordon && @jsforwp
    WordCamp Baltimore
    But Learn JavaScript
    The Right Way

    View Slide

  87. @zgordon && @jsforwp
    WordCamp Baltimore
    javascriptforwp.com
    coupon ”wcbalt”

    View Slide

  88. @zgordon && @jsforwp
    A Year of Learning
    (and Teaching)
    JavaScript Deeply
    WordCamp Baltimore

    View Slide

  89. @zgordon && @jsforwp
    @zgordon && @jsforwp
    WordCamp Baltimore

    View Slide