p5.js workshop, EDP

Thursday, Nov 13, 2014

The network is one of our most fundamental mediums for interactivity. It makes possible our interaction with machines, data, and, most importantly, other people. Though the base interaction it supports is simple, a client sends a request to a server, which replies; an incredible variety of systems can be and have been built on top of it. In this wokrshop, students will utilize JavaScript as both a client and server side programming language to build creative network systems. Additionally, HTML and CSS will be used to define the structure and look.

Getting Started

Some things you'll need / want

• Github student developer pack - includes Digital Ocean $100 credit and more.
• Grab the p5.js editor. This will get you up and running instantly. This is a very new project and there are likely many bugs. Help by contributing suggestions and bug reports!
• You can also download a code editor like TextWrangler or Sublime Text.
• Getting familiar with the command line is useful. Nothing too fancy; just the basics. Take a look at the commands ls, cd, and mkdir. Basic unix commands.

HTML and CSS

• Intro to HTML and CSS
• Another Intro to HTML
• Another Intro to CSS

JavaScript basics

• Intro to JS basics
• Intro to p5.js and canvas
  • 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.
  • Getting started with p5.js
  • Processing <> p5.js transition
  • If you aren't using the p5.js edtior, you'll need to run a local web server with python or apache.
• Here are all the examples

DOM Manipulation

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

APIs and Callbacks

• Tutorial: AJAX and JSON
• APIs and callbacks examples

Server side programming?

• Download servi.
• Tutorial: Setting up a web server with Servi - Create a basic file server using these instructions.
• Deployment
  • Sign up for Digital Ocean, try the Github student developer pack.
  • Download an FTP client like Cyberduck, Filezilla, Fetch - mac only, etc.
  • Tutorial: Digital Ocean setup - Follow the steps to create an account, a new droplet, and connect with Cyberduck.
  • Upload your files to your Digital Ocean account via Cyberduck.
  • 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.
  • Setting up a servi.js project without the servi IDE

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
• HTML & CSS book
• JavaScript book

Tools

• Github student developer pack - includes Digital Ocean $100 credit and more!
• Checking code: JSLint / JSHint
• Browser debugging: Chrome Developer Tools (tutorial) / Firebug (tutorial)
• Mobile debugging http://jsconsole.com
• Sharing code snippets (useful for asking questions): http://gist.github.com