├── .gitignore
├── Gemfile
├── README.md
├── Rakefile
├── _layouts
    └── default.html
├── assets
    ├── favicon.png
    ├── logo.png
    ├── logo.svg
    └── screen.css
└── meta.md


/.gitignore:
--------------------------------------------------------------------------------
1 | _site/
2 | tmp/
3 | Gemfile.lock
4 | 


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
 1 | source 'https://rubygems.org'
 2 | 
 3 | group :jekyll_plugins do
 4 |   gem 'github-pages'
 5 | end
 6 | 
 7 | group :development, :test do
 8 |   gem 'html-proofer', '~> 2.6'
 9 |   gem 'rake', '~> 10.4'
10 | end
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: default
  3 | permalink: /
  4 | ---
  5 | 
  6 | # <img src="assets/logo.svg" alt="class logo" class="logo"/> Advanced JavaScript syllabus
  7 | 
  8 | ***If you are a teacher or interested in the design of the course, see the [meta](https://github.com/advanced-js/syllabus/blob/gh-pages/meta.md) document.***
  9 | 
 10 | * **Course:** [INFO1-CE9766, NYU SCPS](http://scps.nyu.edu/content/scps/academics/course_detail.html?id=INFO1-CE9766)
 11 | * **Instructor:** Aidan Feldman, [alf9@nyu.edu](mailto:alf9@nyu.edu)
 12 | * **Need help?**
 13 |     * [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/advanced-js/syllabus?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 14 |         * It sends message digests to people who aren't active in the room, so feel free to ask a question even if no one's around.
 15 |     * Look through and create [issues](https://github.com/advanced-js/syllabus/issues)
 16 |     * Office Hours during [Hacker Hours](http://hackerhours.org/) (see [schedule](http://www.meetup.com/hackerhours/events/calendar/))
 17 |    * [Email](mailto:alf9@nyu.edu) for 1-on-1 help, or to set up a time to meet
 18 | 
 19 | ## Course Description
 20 | 
 21 | Learn best practices in JavaScript in this intensive, five-session course. Topics include data encapsulation, closures, binding, inheritance, and name spacing. Discover some of the lesser-known, yet useful, features of the language, such as how to debug JavaScript problems on different browsers and improve performance. Create interactive webpages using third-party JavaScript libraries.
 22 | 
 23 | Computers are provided in the lab, though you are encouraged to bring a laptop for in-class exercises.
 24 | 
 25 | ## Prerequisites
 26 | 
 27 | * [INFO1-CE9755 - JavaScript](http://scps.nyu.edu/content/scps/academics/course_detail.html?id=INFO1-CE9755) ([syllabus](http://samsultan.com/javascript)) or equivalent
 28 | * Understanding of variables, data types, control flow, and basic function usage in JavaScript
 29 | * Strong intermediate knowledge of HTML, and at least basics of CSS
 30 | * Basic jQuery knowledge (DOM interaction like adding/removing elements/classes, etc.)
 31 | 
 32 | These won't be enforced by the instructor, but you will be pretty lost without understanding those concepts. If you need a refresher, take a look at the [Beginner Materials](#beginner-materials).
 33 | 
 34 | ## Course Overview
 35 | 
 36 | We will dive into the nuances of JavaScript, how prototypal inheritance compares to classical inheritance, and how this can be used to build dynamic and complex web applications.  Modern tools like jQuery and BackboneJS will be discussed, but students will learn the building blocks of these frameworks and after this course be able to understand what is happening under the hood.  The focus will be on development for browsers, though most applies to other systems like Node.js, Phonegap, etc.  Topics covered include:
 37 | 
 38 | * Encapsulation, closures and scope
 39 | * Classical vs. prototypal inheritance
 40 | * The event loop
 41 | * AJAX and JSONP
 42 |     * local
 43 |     * remote (e.g. Foursquare)
 44 | * Creating MVC-style models (a'la Backbone.js) from scratch
 45 | * Test- and Pseudocode-Driven Development
 46 | 
 47 | Topics will be demonstrated through live-code examples/slides, available at [advanced-js.github.io/deck](http://advanced-js.github.io/deck/).  Additional exercises will completed in-class.
 48 | 
 49 | See [this interview](https://web.archive.org/web/20140306162909/http://blog.masterstreet.com/2013/09/05/interview-with-aidan-feldman-instructor-at-nyu-scps/) for more background.
 50 | 
 51 | ## Homework/Projects
 52 | 
 53 | All assignments are listed within the [Course Outline](#course-outline).
 54 | 
 55 | ### Workflow
 56 | 
 57 | If you're using GitHub Desktop, these general instructions will help:
 58 | 
 59 | * <https://guides.github.com/activities/forking/>
 60 | * <https://help.github.com/desktop/guides/contributing/>
 61 | 
 62 | Enabling `Edit`->`Automatically Sync after Committing` is recommended. Here are the steps:
 63 | 
 64 | 1. Fork the repository for the exercise/project (found under [github.com/advanced-js](https://github.com/advanced-js)).
 65 | 1. Clone the repository to your computer.
 66 | 1. Open the `index.html` file in a browser and open the Developer Tools.
 67 | 1. Modify the files to complete your solution.
 68 | 1. Refresh the `index.html` page to see the results, and repeat.
 69 | 1. Make sure all of your code is committed.
 70 | 1. Push/sync up to GitHub.
 71 | 1. [Create a pull request](https://help.github.com/articles/creating-a-pull-request/) on the original repository. All assignments are due at the start of the following class, unless otherwise specified.
 72 | 1. You can continue to push fixes and improvements until the close date (listed in Classes) – just add a comment in the pull request to let me know it's been updated.
 73 | 
 74 | When the pull request is created, you should see a message saying that "the Travis CI build is in progress" – this means that your solution is being automatically checked for syntax errors.  If this "build" ends up failing (which will show a red "X"), click through the "details" link and scroll to the bottom to see what the errors were.  Per the [requirements](#requirements) below, please fix the issues and push up the changes.
 75 | 
 76 | Feedback will be given in the pull request, so please respond with your thoughts and questions!  You are welcome to open the pull request early as a work-in-progress if you are stuck and want to ask a question.  Note that your solution will also be live at `http://USERNAME.github.io/EXERCISE`.
 77 | 
 78 | #### Versions
 79 | 
 80 | For exercises with multiple Versions (`V1`, `V2`, etc.) listed in the README: these are intended as guidelines for how to complete the assignments in the smallest/simplest possible increments.  You are expected to reach the highest Version for each assignment by the due date. See also: [extra credit](#extra-credit).
 81 | 
 82 | ### Requirements
 83 | 
 84 | These apply to real life, as well.
 85 | 
 86 | * [Travis CI](https://docs.travis-ci.com/) build should pass, which includes:
 87 |     * All HTML files should pass [W3C Markup Validation](http://validator.w3.org).
 88 |     * All written JS should pass [JSHint](http://jshint.com).
 89 | * Must apply "good programming style" learned in class
 90 |     * Functions should be "short" (see [Sandi Metz's rules for developers](https://robots.thoughtbot.com/sandi-metz-rules-for-developers)).
 91 |     * Optimize for readability.
 92 |         * ["Programs must be written for people to read, and only incidentally for machines to execute." -Harold Abelson](https://www.goodreads.com/quotes/9168-programs-must-be-written-for-people-to-read-and-only)
 93 |     * Avoid using anonymous callbacks within other functions, especially if the callback is more than one or two lines.
 94 |     * For projects, use Object-Oriented Programming.
 95 | * Any borrowed code must be properly [annotated](#instructor).
 96 | 
 97 | #### Extra Credit
 98 | 
 99 | Bonus points for:
100 | 
101 | * Automated tests
102 | * Creativity (as long as requirements are fulfilled)
103 | * Anything listed under `BONUS` in the README of the exercise.
104 | 
105 | ## Course Outline
106 | 
107 | ### Class 1
108 | 
109 | <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Are you new to front-end web development? Here&#39;s a secret: no one else really knows what they&#39;re doing either.</p>&mdash; Nicolas (@necolas) <a href="https://twitter.com/necolas/status/291978260433219584">January 17, 2013</a></blockquote>
110 | <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
111 | 
112 | 1. Introduction
113 |     * Put name on sticky note on back of monitor
114 |     * Discuss what the class is going to cover
115 |     * Everyone introduce themselves
116 |         * Name
117 |         * What you "do"
118 |         * What are your goals for the class?
119 |         * What's something in JS (or technology) you worry that your peers understand but you don't?
120 | 1. Setup
121 |     * How many people are comfortable with Git/GitHub?
122 |     * Install [GitHub Desktop](https://desktop.github.com/)
123 |         * If you are comfortable with Git already, you can skip this.
124 |     * Sign up for GitHub
125 | 1. GitHub workflow
126 |     * Walk through [workflow](#workflow)
127 |     * Create pull request on [students repository](https://github.com/advanced-js/students)
128 | 1. Explain how slides work
129 | 1. Get through `countdown_exercise` slide
130 | 1. Talk through [requirements](#requirements)
131 | 
132 | #### Homework
133 | 
134 | * Join [the chat room](https://gitter.im/advanced-js/syllabus).
135 | * [Set up your GitHub profile.](https://github.com/settings/profile)
136 | * Access [NYU Classes](https://newclasses.nyu.edu) page, where grades will be posted.
137 |     * [Documentation](https://wikis.nyu.edu/display/nyuclasses/Student+Quick-Start)
138 | * Read [JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/).
139 | * Finish up and submit [echo](https://github.com/advanced-js/echo) and [countdown](https://github.com/advanced-js/countdown) exercises.
140 | * Complete [blink](https://github.com/advanced-js/blink) exercise.
141 | 
142 | ### Class 2
143 | 
144 | 1. Look at various approaches for `countdown()`
145 |     * Show recursive solution
146 | 1. Developer Tools walkthrough
147 |     * Elements (HTML)
148 |     * Console (JS)
149 |     * Scripts (JS)
150 | 1. Pair program to build [Memory v1](https://github.com/advanced-js/memory) (see [pairing tips](#pairing-tips))
151 | 1. Cover OOP, though "oop_inheritance" slide
152 |     * [Encapsulation example](http://jsbin.com/baqopu/1/edit?css,js,output)
153 |     * Look at [Backbone.js Events](http://backbonejs.org/docs/backbone.html)
154 | 
155 | #### Homework
156 | 
157 | * Read [Mozilla's Introduction to Object-Oriented Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)
158 | * [OOP exercise](https://github.com/advanced-js/oop), through V2
159 | * [Memory v2](https://github.com/advanced-js/memory#v2) (individual)
160 | 
161 | ### Class 3
162 | 
163 | 1. Code review Memory
164 | 1. Get through [`oop_inheritance`](http://advanced-js.github.io/deck/examples/oop_inheritance/) slide
165 | 1. Cover automated testing
166 |     * Build up a test framework from scratch
167 |     * Examples in QUnit
168 |         * [Simple](http://jsbin.com/woqusi/edit?html,js,output)
169 |         * [Classes](http://jsbin.com/nukamun/edit?js,output)
170 |         * [QUnit documentation](http://qunitjs.com/)
171 |     * Other frameworks
172 | 1. Cover AJAX/CORS/JSONP ([files](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax))
173 |     * Network tab in Developer Tools
174 | 
175 | #### Homework
176 | 
177 | * Read [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
178 | * Complete [OOP exercise](https://github.com/advanced-js/oop) through V4.
179 | * [Memory V3](https://github.com/advanced-js/memory#v3)
180 | 
181 | ### Class 4
182 | 
183 | 1. Finish slides
184 | 1. Getting Serious example
185 |     * Quick intro to Backbone.js
186 |         * [Boilerplate](http://jsbin.com/IGivato/1/edit?html,js,output)
187 |         * Click the Box [example app](http://jsbin.com/IGivato/5/edit?css,js,output)
188 |         * TDD?
189 | 1. Multiple async
190 |     * [Promises](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax/promises)/[jQuery.Deferred](http://api.jquery.com/jQuery.Deferred/)
191 |     * Possibly show [async](https://github.com/caolan/async#control-flow-1) library?
192 | 
193 | #### Homework
194 | 
195 | * [Learn about AJAX](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax#readme)
196 | * [Mashup](https://github.com/advanced-js/mashup)
197 | * Improve your previous assignments
198 | 
199 | ### Class 5
200 | 
201 | 1. Present and code review Mashup projects
202 | 1. Possible topics (vote?):
203 |     * Node.js
204 |         * Server "Hello World" (from [Node.js homepage](http://nodejs.org/))
205 |             * [HTTP module docs](http://nodejs.org/api/http.html)
206 |         * HTTP requests
207 |             * [Status codes](http://pretty-rfc.herokuapp.com/RFC2616#status.codes)
208 |             * Headers
209 |         * CommonJS?
210 |     * [Regular Expressions](https://github.com/advanced-js/deck/tree/gh-pages/demos/regex.html)
211 |         * Convert live input from a text area, e.g.
212 |             * Link Twitter handles
213 |             * Substitute select words for emoji, using [emoji-css](http://afeld.github.io/emoji-css/)
214 |     * Object-Oriented design
215 |     * [Code Retreat](http://coderetreat.org/facilitating/structure-of-a-coderetreat) – possible "problems":
216 |         * [Game of Life](http://coderetreat.org/gol)
217 |         * Tic Tac Toe
218 | 
219 | ## Pairing Tips
220 | 
221 | * Three people is possible, but two works best
222 | * Agree on an editor and environment that you're both comfortable with
223 | * The person who's less experienced/comfortable should have more keyboard time
224 | * Switch who's "driving" regularly
225 | * Make sure to save the code and send it to both people
226 | 
227 | ## Resources
228 | 
229 | ### Required Reading
230 | 
231 | * [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
232 | * [JavaScript Garden](http://bonsaiden.github.com/JavaScript-Garden/)
233 | * [Mozilla's Introduction to Object-Oriented Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)
234 | * [What’s so great about JavaScript Promises?](http://blog.parse.com/learn/engineering/whats-so-great-about-javascript-promises/)
235 | 
236 | ### Beginner Materials
237 | 
238 | This class assumes you are confident with this material, but in case you need a brush-up...
239 | 
240 | * Codecademy – [JavaScript](https://www.codecademy.com/learn/javascript) and [jQuery](https://www.codecademy.com/learn/jquery)
241 | * [Eloquent JavaScript](http://eloquentjavascript.net/index.html) by Marijn Haverbeke, Chapters 1-5
242 | * [Want to learn JavaScript in 2015?](https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225)
243 | * [How jQuery Works](https://learn.jquery.com/about-jquery/how-jquery-works/)
244 | * see also – [Other Lists](#other-lists)
245 | 
246 | ### Recommended Reading
247 | 
248 | * [Functional JavaScript](http://shop.oreilly.com/product/0636920028857.do) by Michael Fogus
249 | * [Front-end Job Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) by @darcyclarke (for testing yourself)
250 | * [JavaScript Best Practices](http://www.thinkful.com/learn/javascript-best-practices-1/)
251 | * [JavaScript Patterns](http://shichuan.github.io/javascript-patterns/) by @shichuan (thanks @iandrewfuchs)
252 | * [JavaScript Patterns](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) by Stoyan Stephanov
253 | * [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X/) by Alex MacCaw
254 | * [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) by Douglas Crockford
255 | * [Learning Advanced JavaScript slides](http://ejohn.org/apps/learn/) by John Resig
256 | * [Static Web Apps](http://www.staticapps.org/)
257 | * [Test-Driven JavaScript Development](http://www.amazon.com/Test-Driven-JavaScript-Development-Developers-Library/dp/0321683919) by Christian Johansen
258 | * [The JavaScript Interpreter, Interpreted](http://www.slideshare.net/marthakelly/js-interpreter-interpreted) by Martha Girdler [(video)](https://www.youtube.com/watch?v=iSxNCYcPAFk)
259 | 
260 | #### Specific Topics
261 | 
262 | * [Classical Inheritance in JavaScript](http://www.crockford.com/javascript/inheritance.html) by Douglas Crockford
263 | * [Partial Application in JavaScript](http://benalman.com/news/2012/09/partial-application-in-javascript/) by Ben Alman (thanks @michaelBenin)
264 | * [HTML5 Rocks](http://www.html5rocks.com)
265 | * [Learning JavaScript Design Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book/) by Addy Osmani
266 | 
267 | #### Other Lists
268 | 
269 | * [JS: The Right Way](http://www.jstherightway.org/) (an overview of the JS landscape)
270 | * [Code School](https://www.codeschool.com/paths/javascript)
271 | * Thoughtbot's [Javascript Trail Map](https://upcase.com/javascript)
272 | * [How To Learn JavaScript Properly](http://javascriptissexy.com/how-to-learn-javascript-properly/)
273 | * [Superhero.js](http://superherojs.com)
274 | * [Teach Yourself to Code](http://teachyourselftocode.com/javascript)
275 | 
276 | ### Tools
277 | 
278 | * code validation: [JSLint](http://jslint.com) / [JSHint](http://jshint.com)
279 | * debugging:
280 |     * [Chrome Developer Tools](https://developer.chrome.com/devtools/index)
281 |         * [Official debugging tutorial](https://developer.chrome.com/extensions/tut_debugging)
282 |         * Tutorial: [JavaScript Diagnosis](http://www.macwright.org/2015/03/10/javascript-diagnosis.html)
283 |     * [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/)
284 | * sharing code snippets: [gist.github.com](https://gist.github.com/)
285 | * asking questions: [Stack Overflow](http://stackoverflow.com/)
286 | 
287 | #### GitHub
288 | 
289 | * Git and GitHub
290 |     * [Official GitHub Help](https://help.github.com/)
291 |     * [Recommended resources](http://hackerhours.org/resources.html#github)
292 | * GitHub Pages
293 |     * [Official site](https://pages.github.com/)
294 |     * [Thinkful guide](http://www.thinkful.com/learn/a-guide-to-using-github-pages/)
295 | 
296 | #### HTML/CSS/JS Sandboxes
297 | 
298 | * [JS Bin](http://jsbin.com/) (recommended)
299 | * [bl.ocks.org](http://bl.ocks.org/)
300 | * [Cloud9](https://c9.io/)
301 | * [CodePen](http://codepen.io/pen/)
302 | * [JSFiddle](http://jsfiddle.net/)
303 | * [Mozilla Thimble](https://thimble.mozilla.org)
304 | * [Plunker](http://plnkr.co/)
305 | * [rawgithub.com](http://rawgit.com/)
306 | 
307 | #### Frameworks
308 | 
309 | * Framework comparison: [TodoMVC](http://todomvc.com)
310 | * [Testing](https://coderwall.com/p/ntbixw)
311 | 
312 | ### Reference
313 | 
314 | * [Mozilla Developer Network](https://developer.mozilla.org/en/JavaScript) and [Learn JavaScript](https://developer.mozilla.org/en-US/learn/javascript)
315 | * [w3schools](http://www.w3schools.com/jsref/default.asp)
316 | * [JavaScript: The Definitive Guide](http://shop.oreilly.com/product/9780596000486.do) by David Flanagan
317 | * [Simplified JavaScript Jargon](http://jargon.js.org/)
318 | 
319 | ### More Examples
320 | 
321 | * [map/reduce](http://jsbin.com/ojapAsUR/2/edit?js) (in [Underscore](http://underscorejs.org/#map))
322 | 
323 | ## Grading
324 | 
325 | * Class Participation – 30%
326 | * Homework – 70%
327 | 
328 | ## Statements on Plagiarism
329 | 
330 | ### SCPS
331 | 
332 | > New York University takes plagiarism very seriously and regards it as a form of fraud.  The definition of plagiarism that has been adopted by the School of Continuing and Professional Studies is as follows: "Plagiarism is presenting someone else's work as though it were one's own.  More specifically, plagiarism is to present as one's own words quoted without quotation marks from another writer; a paraphrased passage from another writer’s work; or facts or ideas gathered, organized, and reported by someone else, orally and/or in writing.  Since plagiarism is a matter of fact, not of the student's intention, it is crucial that acknowledgement of the sources be accurate and complete.  Even where there is not a conscious intention to deceive, the failure to make appropriate acknowledgement constitutes plagiarism.  Penalties for plagiarism range from failure for a paper or course to dismissal from the University.
333 | 
334 | ### Instructor
335 | 
336 | Reuse and building upon ideas or code are major parts of modern software development.  As a professional programmer you will never write anything from scratch.  This class is structured such that all solutions are public.  You are encouraged to learn from the work of your peers.  I won't hunt down people who are simply copying-and-pasting solutions, because without challenging themselves, they  are simply wasting their time and money taking this class.
337 | 
338 | Please respect the terms of use and/or license of any code you find, and if you reimplement or duplicate an algorithm or code from elsewhere, credit the original source with an inline comment.
339 | 


--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
1 | require 'html/proofer'
2 | 
3 | task :test do
4 |   sh 'bundle exec jekyll build'
5 |   HTML::Proofer.new('./_site').run
6 | end
7 | 
8 | task default: :test
9 | 


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <link rel="icon" type="image/png" href="assets/favicon.png" />
 7 |     <title>Advanced JavaScript class</title>
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
 9 |     <link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/2f761d4/dist/bootstrap-toc.min.css">
10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
11 |     <!--[if lt IE 9]>
12 |       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />
13 |     <![endif]-->
14 |     <link rel="stylesheet" href="assets/screen.css" media="screen" charset="utf-8">
15 |     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
16 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
17 |     <script src="https://cdn.rawgit.com/afeld/bootstrap-toc/2f761d4/dist/bootstrap-toc.min.js"></script>
18 |   </head>
19 |   <body data-spy="scroll" data-target="#toc">
20 |     <div class="github-fork-ribbon-wrapper right">
21 |       <div class="github-fork-ribbon">
22 |         <a href="https://github.com/advanced-js/syllabus">Fork me on GitHub</a>
23 |       </div>
24 |     </div>
25 |     <div class="container">
26 |       <div class="row">
27 |         <div class="col-sm-4">
28 |           <nav id="toc" data-spy="affix" data-toggle="toc"></nav>
29 |         </div>
30 |         <div class="col-sm-8 col-md-7">
31 |           {{ content }}
32 |           <footer>
33 |             This <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" rel="dct:type">work</span> and all other materials under <a href="https://github.com/advanced-js">github.com/advanced-js</a> are licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.<br />
34 |             <br />
35 |             <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
36 |           </footer>
37 |         </div>
38 |       </div>
39 |     </div>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/advanced-js/syllabus/eb2a4eda174ce42631a40a7aa5d2dced331d5b91/assets/favicon.png


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/advanced-js/syllabus/eb2a4eda174ce42631a40a7aa5d2dced331d5b91/assets/logo.png


--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 viewBox="0 0 1052 1052" enable-background="new 0 0 1052 1052" xml:space="preserve">
 6 | <rect fill="#F0DB4F" width="1052" height="1052"/>
 7 | <path fill="#323330" d="M965.9,801.1c-7.7-48-39-88.3-131.7-125.9c-32.2-14.8-68.1-25.4-78.8-49.8c-3.8-14.2-4.3-22.2-1.9-30.8
 8 | 	c6.9-27.9,40.2-36.6,66.6-28.6c17,5.7,33.1,18.8,42.8,39.7c45.4-29.4,45.3-29.2,77-49.4c-11.6-18-17.8-26.3-25.4-34
 9 | 	c-27.3-30.5-64.5-46.2-124-45c-10.3,1.3-20.7,2.7-31,4c-29.7,7.5-58,23.1-74.6,44c-49.8,56.5-35.6,155.4,25,196.1
10 | 	c59.7,44.8,147.4,55,158.6,96.9c10.9,51.3-37.7,67.9-86,62c-35.6-7.4-55.4-25.5-76.8-58.4c-39.4,22.8-39.4,22.8-79.9,46.1
11 | 	c9.6,21,19.7,30.5,35.8,48.7c76.2,77.3,266.9,73.5,301.1-43.5C964.1,869.2,973.3,842.4,965.9,801.1z M571.9,483.5h-98.4
12 | 	c0,85-0.4,169.4-0.4,254.4c0,54.1,2.8,103.7-6,118.9c-14.4,29.9-51.7,26.2-68.7,20.4c-17.3-8.5-26.1-20.6-36.3-37.7
13 | 	c-2.8-4.9-4.9-8.7-5.6-9c-26.7,16.3-53.3,32.7-80,49c13.3,27.3,32.9,51,58,66.4c37.5,22.5,87.9,29.4,140.6,17.3
14 | 	c34.3-10,63.9-30.7,79.4-62.2c22.4-41.3,17.6-91.3,17.4-146.6C572.4,664.2,571.9,574,571.9,483.5z"/>
15 | <g>
16 | 	<rect x="177.3" y="477.2" fill="#323330" width="98" height="267"/>
17 | 	<rect x="92.8" y="561.7" fill="#323330" width="267" height="98"/>
18 | </g>
19 | </svg>
20 | 


--------------------------------------------------------------------------------
/assets/screen.css:
--------------------------------------------------------------------------------
 1 | nav[data-toggle=toc] {
 2 |   margin-top: 30px;
 3 | }
 4 | 
 5 | .github-fork-ribbon {
 6 |   background-color: #50ba9b;
 7 | }
 8 | 
 9 | .logo {
10 |   height: 2em;
11 |   vertical-align: baseline;
12 | }
13 | 
14 | footer {
15 |   color: #757575;
16 |   font-size: 0.9em;
17 |   margin-top: 80px;
18 |   margin-bottom: 80px;
19 |   text-align: center;
20 | }
21 | 
22 | /* small screens */
23 | @media (max-width: 768px) {
24 |   /* override the Affix plugin so that the navigation isn't sticky */
25 |   nav.affix[data-toggle='toc'] {
26 |     position: static;
27 |   }
28 | 
29 |   /* don't expand nested items, which pushes down the rest of the page when navigating */
30 |   nav[data-toggle=toc] .nav .active .nav {
31 |     display: none;
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/meta.md:
--------------------------------------------------------------------------------
 1 | # Class information for teachers
 2 | 
 3 | This material under this GitHub organization is for a 5 session, 18 contact hour Advanced JavaScript continuing education class.  It consists of:
 4 | 
 5 | * [A repository for the syllabus](README.md)
 6 | * [A repository for the slides/examples](https://github.com/advanced-js/deck)
 7 | * [A repository of students](https://github.com/advanced-js/students)
 8 | * One repository per assignment (everything else listed under https://github.com/advanced-js)
 9 | 
10 | ## Materials
11 | 
12 | All class materials and assignments are in public repositories under a single organization, which has the added benefits of:
13 | 
14 | * Keeps everything easy to find
15 | * Giving students experience with:
16 |     * Interacting and contributing to open source
17 |     * Getting comfortable with Git & GitHub
18 | * Making it easy for others to watch changes, fork, create issues and pull requests against the class materials
19 | * Setting up an expectation of trust with the students – see the [Statements on Plagiarism](https://github.com/advanced-js/syllabus#instructor) for more info
20 | 
21 | ## Structure
22 | 
23 | The structure of the class relies heavily on GitHub features, so as a bonus it acts as a testbed for recommendations made as part of the [GitHub Education program](https://education.github.com).  For example:
24 | 
25 | * The [**syllabus is posted publicly**](https://education.github.com/guide#3-post-your-syllabus), where students can "watch" to be notified of changes, give feedback on class structure, or even propose additional resources.
26 | * Assignments are **structured using the [Forks](https://education.github.com/guide/forks) strategy**.
27 |     * **Pull requests are used to turn in assignments** and give feedback – see [the workflow](README.md#workflow) and [the guide](https://education.github.com/guide/forks#3-completing-assignments).
28 | * A [Gruntfile](http://gruntjs.com) is included in each assignment repository to run **HTML Validation** through the [W3C Markup Validator](http://validator.w3.org/source/), **JavaScript linting** through [JSHint](http://www.jshint.com/about/), and in some cases, **unit tests** through [QUnit](http://qunitjs.com/).
29 | * [Travis CI](http://docs.travis-ci.com) is set up to run the Grunt tasks, for every new or updated pull request, giving students **near-immediate feedback**.
30 | * **[The slide deck](http://advanced-js.github.io/deck/) is a public webpage**, hosted using [GitHub Pages](https://pages.github.com).
31 | * By [setting the default branch](https://help.github.com/articles/setting-the-default-branch) in each assignment repository to be `gh-pages`, **every student's fork/submission is then a live Pages site** that can be used for grading, so the files never need to be downloaded for grading.
32 | * Students are added to teams by term (e.g. `summer-2014`), so that **[team mentions](https://github.com/blog/1121-introducing-team-mentions)** can be used to direct everyone's attention to important syllabus changes or important pieces of feedback.
33 |     * As part of the first class, students submit pull requests to add themselves to the [students](https://github.com/advanced-js/students) repository.  This is partially to collect their usernames, and partially to tie their usernames to their real names.  [A script](https://github.com/advanced-js/students/blob/master/add_students.rb) is then run to automatically add them to the team for that term.
34 | 
35 | Basically the only thing that isn't done in the repositories or in class is giving the grades, which are done through  NYU's Classes [LMS](https://en.wikipedia.org/wiki/Learning_management_system) (built on [Sakai](https://sakaiproject.org/)).
36 | 
37 | ## Engagement
38 | 
39 | This is a vocational class taught in a [major tech hub](https://en.wikipedia.org/wiki/Silicon_Alley), so I encourage the students to engage with one another, as well the larger tech community.
40 | 
41 | To learn everyone's names, I have each person write their name on a sticky note, and put it on the back of their monitor. On the first day, when everyone introduces themselves, I also ask them to name a topic that they think everyone else knows, but they don't. This is to attempt to create a culture of ["I don't know"](http://freakonomics.com/2014/05/15/the-three-hardest-words-in-the-english-language-a-new-freakonomics-radio-podcast/), to show that *everyone* feels that way about something (or many things), and that they shouldn't be afraid to speak up when something doesn't make sense. In short: [fighting impostor syndrome](https://gist.github.com/afeld/6903915).
42 | 
43 | To encourage broader community engagement, instead of having office hours specific to one class (with potentially low attendance), I started a [meetup](http://www.meetup.com/) called [Hacker Hours](http://hackerhours.org/) that offers free programming help to *anyone*.  Students can then come and get help from me or any of the other mentors that attend, and ideally connect with other learners outside of the class.
44 | 
45 | ## Sharing
46 | 
47 | The material is free to modify and distribute – if you end up using some of all of the material for your own class, training materials, etc., I would love to [hear from you](https://github.com/advanced-js/syllabus/issues/new)!
48 | 


--------------------------------------------------------------------------------