ITP Creative JavaScript (Fall 2014)

Repository for Creative JavaScript at NYU ITP, Fall 2014

How do the tools and platforms we work with shape the things we create? How do creative and computational ideas transform across media, and what does it mean to create for the internet? In this course, students will utilize JavaScript as both a client and server side programming language to build creative network systems. Additionally, some HTML and CSS will be introduced to define the structure and look. This is a beginner level class, though students should have taken Introduction to Computational Media or have similar experience. This two-credit course will meet the last seven weeks of the semester.

• Google group mailing list
• Lauren office hours
• Resident office hours
• Assignments page

##Evaluation

Grades will be determined according to the following breakdown:

• Regular Assignments 40%
• Participation and Attendance 40%
• Final Project 20%

Please see ITP's statement on Pass/Fail which states that a "Pass" is equivalent to an "A" or a "B" while anything less would be considered a "Fail".

We will have weekly assignments that are relevant to material from the previous class. These assignments are required and you should be prepared to show/talk about them in class. It is expected that everyone in the class will create and maintain a blog for their assignments.

Attendance is mandatory. Please inform your teacher via email if you are going to miss a class. Habitually showing up late for class or an excessive number of absences will adversely affect your grade.

This class will be participatory, you are expected to participate in discussions and give feedback to other students both in class and participate with their projects. This (along with attendance) is 40% of your grade.

Class will culminate final projects. You are expected to push your abilities to produce something that utilizes what you have learned in the class that is useful in some manner to yourself or the world. This will comprise 20% of your grade.

##Syllabus

###Week 1 (10/22): Intro, JavaScript basics, p5.js

Getting started

1. Sign up for the Github student developer pack - includes Digital Ocean $100 credit and more.

2. Download a code editor like TextWrangler or Sublime Text.

Intro to JS

• Notes: JS basics

Intro to p5.js and canvas

1. Download p5.js. The download comes with a copy of p5.js, you can also use a statically hosted version from the CDN, more info on that here.

2. Tutorial: Getting started with p5.js - Set up your files for editing and viewing.

3. Processing ~ p5.js transition - Learn to convert a sketch from Processing to p5.js.

4. p5.js reference and examples - Look through and get comfortable with the p5.js functionality.

5. (Optional) FYI: HTML5Canvas without p5.js - See how canvas drawing is done in plain JS without using p5.js.

Assignment 1 (DUE 10/29)

###Week 2 (10/29): HTML+CSS+JS, servers

Intro to HTML and CSS

• Notes: Intro to HTML and CSS

Server setup

1. Sign up for Digital Ocean, you can use this referral code or the code from the Github student developer pack.

2. Download an FTP client like Cyberduck, Filezilla, Fetch - mac only, etc.

3. Download servi.

4. Tutorial: Digital Ocean setup - Follow the steps to create an account, a new droplet, and connect with Cyberduck.

5. Tutorial: Setting up a web server with Servi - Create a basic file server using these instructions. Upload your files to your Digital Ocean account via Cyberduck.

6. Tutorial: installing forever - The default behavior of Node is to kill the script when you log out of ssh or quit Terminal. That's fine for short-term use, but to keep your web site up and persistent, install forever.

Assignment 2 (DUE 11/5)

###Week 3 (11/5): Events and media

1. Notes: Intro to DOM manipulation and events - Use JS to manipulate the HTML page and make it react to events (mouse, keyboard, touch, page load).

• Reference for all DOM events
• DOM manipulation with no libraries examples

2. Tutorial: p5.dom library - You can also use the p5.dom library to handle HTML manipulation and events.

• p5.dom.js reference
• p5.dom.js examples

3. JQuery is (probably the most) popular JS Library for client-side stuff. We won't use it much in our examples, but it's work examining and thinking about.

• Quick and dirty hello world DOM manipulation with JQuery

4. Notes: Intro to CSS and layouts - Create an external stylesheet and layout an HTML page.

Assignment 3 (DUE 11/12)

###Week 4 (11/12): Servi, review

1. Tutorial: setting up a servi.js project without the servi IDE

• Servi server example

Assignment 4 (DUE 11/19)

###Week 5 (11/19): APIs, AJAX, JSON

1. Notes: Web services, AJAX and JSON

• p5.js AJAX examples
• jQuery AJAX examples

2. Tutorial: Instagram API how-to
3. Chrome extension for viewing JSON
4. More resources:

• What is an API? - video on Lynda.com (2m 43sec)
• Using APIs
• Sunlight Foundation example API - an overview of the info available through their API

Final Project (DUE 12/10)

###Week 6 (12/3): Server-side JS

1. Tutorial: creating a servi server
2. Notes: server-side with Servi

• Servi examples
• Servi reference

###Week 7 (12/10)

Final project presentations

##Resources

###p5.js

• p5.js reference
• p5.js forum
• p5.js on GitHub
• p5.js CDN

###Servi.js

• servi.js documentation

###JS Learning / Intro

• CodeAcademy: JavaScript
• How to learn JavaScript properly
• JavaScript the right way
• Code School
• JavaScript garden
• A re-introduction to JS by Mozilla
• JavaScript 101 from JQuery
• JavaScript: The Definitive Guide
• Eloquent JavaScript, Marijn Haverbeke
• Beginning JavaScript, Paul Wilton and Jeremy McPeak
• http://www.nyu.edu/lynda - lots of great tutorials here. Log in with your normal nyu net-id/password for full access.

###Tools

• Checking code: JSLint / JSHint
• We'll be using the command line regularly in this class. Nothing too fancy; just the basics. Get familiar, at the very least, with the commands ls, cd, and mkdir. Basic unix commands.
• Browser debugging: Chrome Developer Tools (tutorial) / Firebug (tutorial)
• Mobile debugging jsconsole.com
• Sharing code snippets (useful for asking questions): gist.github.com