ECS 189H Lectures
Spring 2017

• 4/3 - Intro, HTML
  Read the section on HTML in Interactive Data Visualization for the Web.
• 4/5 - HTML, viewing source, coding standards, CSS Read the sections on DOM, development tools, and CSS in Interactive Data Visualization for the Web
• 4/7 - CSS, default layout, image sizing
  pheasant.html, bird.css, pheasant.jpg
• 4/10 - Design, assignment 2, flexbox
  boxes.html,reset.css, boxes.css.
  Read Using CSS flexible boxes on the Mozilla Developers Network. If you find a better flexbox resource, let me know!
• 4/12 - Media queries, color
  mediaBoxes.html, mediaBoxes.css, menu.png.
  Read Responsive Design Basics on Google Developers, and Using Media Queries on Mozilla.
• 4/14 - CSS precedence rules, intro to Javascript
  button.html, button.css, actions.js.
  Read Chapter 1 in Eloquent Javascript. This is a terrific little book and we are lucky it is free!
• 4/17 - Javascript Booleans, using the DOM
  Read Chapter 13 in Eloquent Javascript.
• 4/19 - Positioning a box using Javascript, objects, JSON
  steppy.html, steppy.css, steppy.js
  Read Chapter 4 in Eloquent Javascript. Maybe read this before Chapter 13...
• 4/21 - The JSONp API interface, text box input
  weatherButtonApp.html, weatherButton.js, weatherButton.css.
  A good reference on JSONp is...?
• 4/24 - Design for Weather app, debugging with Chrome, organizing code using objects
• 4/26 - Object constructors, private data and methods, and some string methods
  empty.html, cityWeather.js
  Read Douglas Crockford's essay on private data and methods.
• 4-28 - Midterm review
• 5-3 - Flickr API, closures
  threePix.html, threePix.jsthreePix.css
  Read chapter 3 of Eloquent Javascript, especially the section on closure.
• 5-5 - Server hello world
  server1.js - edit this program to use your own port number, and put it onto your server to see it run.
  Read the chapter on Node.js in Eloquent Javascript, especially through the section on Streams.
  The chapter on the request and response objects in Web Development with Node & Express is good.
• 5-8 - Static server, anonymous functions
  server2.js is not much of an improvement on server1, but a good starting place for the assignment due Thursday.
  nonAnonymous.js is a version of the server example from the node-static documentation, that does not use anonymous functions or objects. Possibly you'll find it easier to follow.
• 5-10 - XMLHttpRequest
  Use the tripleThreatServer.js for the server. In /public, put the app: labelPix.html, labelPix.css, and labelPix.js, along with the three images, hula.jpg, eagle.jpg, and redwoods.jpg.
  The best references are XMLHttpReqeust and Using XMLHttpRequest at MDN; the stuff at W3Schools is a bit out of date.
• 5-12 - Express, uploading files
  Again, use tripleThreatServer.js for the server. Add photo.html, photo.js, and photo.css to /public.
  Read the essay on Understanding Express by Evan Hahn. It explains Express very nicely in terms of stuff we know about Node.
  This page at W3Schools gives an example of reading a file using only Node and the Formidable module.
• 5-15 - Server as pipeline, creating a database
  makeDB.js can be run on the server just by saying "node makeDB.js". It will create the database file photos.db.
  The Node.js SQLite3 module documentation covers how to issue commands.
• 5-17 - SQL, race conditions
  DBops.js gives examples of using all the SQL operations we discussed. Try Uncommenting the enclosing call to "db.serialize()".
  The W3Schools SQL tutorial is very good. Use the hamburger menu to navigate to the command you want.
• 5-19 - Answering an "add label" query, SQL debugging, local module
  queries.js module you can add to your server.
  Chapter 10 in "Eloquent Javascript" on modules. Such a nice book.
  Documentation on command-line access to database.
• 5-22 - Request-callback patterns, two applications of closure
  labelPixVer2.html, labelPixVer2.js, example of adding onclicks inside a loop using a closrue.
• 5-24 - Security
  upload.js only allows .jpg or .jpeg or .png files to be uploaded.
  The chapter on security in Web Development with Node and Express is a good guide to real applications.
• 5-26 - Using the Google Cloud Vision API
  annotateImage.js
• 5-31 - Practice Midterm 2
  Practice Midterm
• 6-5 - How Google Cloud Vision works
  Stanford Course in Convolutional Neural Networks for Visual Recognition
• 6-7 - Studying for the final, where to go from here