Schedule

Schedule

Schedule will be updated over the course of the semester

Unit I: Designing For the Web

Development environment setup, the browser as a context, HTML/CSS Review, Layout and Design Basics, Tips & Tricks & Frameworks

Tutorials for Reference & Exercise

August 24, 2021

Welcome, Overview, PC Setup

In Class
- Introductions
- Course overview
- Logistics
- PC development environment setup
- Re-Introduction to the pc as a development tool
- Re-Introduction to the browser as a development tool
Homework
- Finish environment setup: install Visual Studio Code, Filezilla, Cisco Anyconnect, and practice with the Chrome or Firefox developer console (crtl+click->inspect or cmd + shift + C or View–>Developer–>Developer Tools) and inspect some web pages
- See the FTP Login Page for details on how to connect an FTP uploading tool to add files to your CIFS server space
- Reading for Thursday: Tim Berners-Lee, A One-page Personal History of the Web

August 26, 2021

HTML/CSS Review I

Slides for August 26, 2021

In Class
- PC Setup troubleshooting
- HTML/CSS Review: creating files, html syntax, structuring content, file structure, linking, styling text and typography, responsive design & media queries
Homework
- Post an index.html in your public_html folder if you don’t already have one there. This is your “home page” where you’ll be posting content and links to content from time to time. You may style and structure this page as you wish. Please make sure this page has clear navigation and links to any relevant class content, like the following assignment:
- Assignment 1: Take a piece of writing from another class - this should be no more than a few pages, and create an html file with this text as the content. Use paragraph tags and heading tags to structure this content and style it with CSS. Think about the elements of readability, structure, and context, as discussed in class and in the reading. Post this .html file to your CIFS server space, and link to it from your index.html page.
- Reading (and reference):
  - We are all Typographers, Ch. 1+2
  - For reference:
    - MDN Docs:Structuring the Web with HTML
    - MDN Docs: Learning to Style with CSS
    - W3 Schools HTML Reference
    - W3 Schools CSS Reference

August 31, 2021

HTML/CSS Review II

Assignment 1: Typography Due

Demo Files for Class Demo Code

In Class
- CSS Layout: spacing, position, flexbox, grid(s) and frameworks for layout, responsive layout with Flex and @media only screen, embedding images, image-backgrounds, overlaying elements and z-index
- HTML/CSS Validation and checking your work
Homework
- Assignment 2: Add grid or other layout to your content.
- Reading (and reference):
  - Beth Tondreau, Layout Essentials: 100 Design Principles for Using Grids, “Getting Started”
  - Interaction Design Foundation, “The Grid System: Building a Solid Design Layout”
- Resources for Positioning, Grid, and Flex

September 2, 2021

HTML/CSS Review III

Slides

In Class
- Layout continued: CSS frameworks for rapid building and responsive design: Bootstrap & W3.css
Homework: Continue work on Assignment 2: Layout and Positioning, Due Monday, September 7
- Reading for Monday:
  - Donald Norman, The Design of Everyday Things, Chapter 6: The Design Challenge & Chapter 7: User-Centered Design
  - Google Design Library, “Is it Good Design?”
- Resources:
  - Bootstrap and docs
  - Boostrap Icons
  - Bootstrap 5 Essential Training on LinkedIn Learning
    - Slides and Examples from the LinkedIn Bootstrap Course
  - W3.css
  - Try a google search for “css frameworks” for more framework options

September 7, 2021

Design Thinking / Designing for the Web

Assignment 2: Layout and Positioning Due

Slides

Transitions and Animations Demo files

In Class
- Discussion: User-Centered Design
- Demo: Advanced CSS: Transitions, Transformations, Animation
Homework
- Reading:
  - Start braingstorming site concepts and architecture (what pages? how do they link?)
  - Google Material Design, “Accessibility”
  - Jason Juan, “I Got Rejected by Apple Music… So I Redesigned It

September 9, 2021

Interface, Prototyping, and Wireframing

In Class
- Discussion: Site-mapping, Wireframing, Prototyping
- Adobe XD & Figma Demo
Homework
- Start Assignment 3: Sitemap, Wireframes, and Midterm Website Proposal, due Sept. 16

Unit II: Intro to Client-Side Vanilla JavaScript

September 14, 2021

Javascript Ia: What is JavaScript? Where to JavaScript?

Demo Files

In Class
- JavaScript and the browser
- JavaScript and HTML/CSS
- Variables, values, types and operators
Homework
- Reading: Marjin Haverbeke, Eloquent JavaScript, Chapter 1: Values, Types, and Operators & Ch. 2: Program Structure
- Finish Wireframes and Sitemaps (remember these are draft versions)
Resources and Tutorials for Getting Started and Continuing with JS
- Learn JavaScript, a series of guided intro exercises with in-browser code editing
- The Coding Train, tons of video tutorials on JavaScript with a creative and experimental approach.
- JavaScript 30, learn JavaScript in 30 days by building a thing each day alongside video tutorials
- p5.js is a JavaScript library designed for visualization. Creating visual results from code can be a great way to get to know and understand program structure, logic, and syntax.

September 16, 2021

Assignment 3: Sitemap and Wireframes Due

Javascript Ib: Functions, Methods, Events

Demo Files

In Class
- Functions, Methods, Events
- Declaring functions with ES6 notation
- Events in the Browser
Homework
- Reading: Eloquent JavaScript, Chapter 3: Functions
- Work on Assignment 4: Design Iteration

September 21, 2021

JavaScript Ic: DOM

In Class
Demo Code
- The DOM and Traversing the DOM
- tree/node
- for() and for() …of to iterate through HTMLCollections and nodeLists
Homework
- Reading: Tania Rascia, “How to Make Changes to the DOM”
- Exercise: Use what we’ve covered so far on DOM manipulation to design an html page whose main content (at least five elements) is dynamically generated with JavaScript. Feel free to use an array + for, timers, or a series of statements to create these elements. You may have as much or as little interaction as you wish, ie click or scroll events, or with page load. You should style the elements with CSS OR with .js.
  Upload your finished HTML page to your webspace and link to it from your course homepage.
- Keep working on design iterations and building your midterm site
  - Resource for inspiration: W3 Schools “How To” list of common UI elements, layouts, animations, and interactions

September 23, 2021

JavaScript Id: More on Arrays, Objects and JSON

Array Methods Cheat Sheet In Class Demo: Loops and Timers

In Class
- Iteration review: for, for…of, and while
- Timers in JS: setTimeout() and setInterval()
Homework
- Reading: Kirupa.Com: “Timers in JS”
- Work on midterm websites - come ready on Tuesday to present your progress on your designs. Stuck?: Email me, and/or bring your questions to class

September 28, 2021

Design Iterations Due, In Class

In Class:
- Working Design Presentations & Group Crit
- Workshop on midterm websites
Homework:
- Finish Midterm websites for Sept. 30

Unit III: Extending your toolkit with Libraries, APIs, and Frameworks

September 30, 2021

Midterm Website Project Due

Javascript IIa: APIs

Demo: Geolocation and Fetch()

In Class
- Looking Ahead: Building the JS toolkit with libraries & APIs
- Intro to APIs: Browser APIs vs 3rd Party APIs
- Example browser APIs: Fetch(), Geolocation
Homework
- Read/Do:
  - MDN Docs, Introduction to web APIs
  - Khan Academy: Using JS Libraries in Your WebPage
- Over Break: research JavaScript libraries, frameworks, and APIs for use in your final projects over break for Assignment #6
  - Resources for your search
    - Awesome JavaScript: a collection of libraries, frameworks, and other resources
    - Wikipedia List of JS Libraries
    - We’ll be learning to use the p5.js library, but only touching the surface of its functionality. Check out their 2021 Showcase of projects made with the help of p5, and some of the other libraies that can extend it.
    - We’ll also be learning The React.js library for building UI. MDN has their own set of tutorials for react.
    - There are also libraries for animation, data visualization, lightbox image display, and even functions as specific as animating text to look like its being typed
    - There are tons of great 3rd Party APIs to get data and other functionality. We’ll be looking at the Twitter API, the NYTimes API, and a few others that require authenticaion and a developer account. Here’s a great list of APIs for accessing different kinds of data in JSON format that DO NOT require authentication.
    - If you want to create something more experimental for the next project, it might also help to look at the work of other creative coders to get an idea of what you can do:
      - Darius Kazemi
      - Allison Parrish
      - Dan Shiffman
        
        Dan Shiffman also has a number of tutorials for specific projects like making twitter bots and Machine Learning in JavaScript

October 5, 2021 Fall Break, No Class

October 7, 2021

Demo: starter code

JavaScript IIb: Adding a Library

In Class
- Review of client-side http calls: Fetch(), promises, .then(), async/await, interpreting the readable stream
- Javascript Libraries intro: galleries, maps, more
- Building from navigator.geolocate and other location data - now add a map! (with Leaflet.js)
Homework
- Library & API research
- Use what we’ve been working on over the past two lessons to make an html page that 1) gets some data from an api source (check this list of JSON datasets that don’t require authentication) and 2) either displays the data returned in the page or uses a mapping or other .js library to visualize it
  - Hint: if you’re trying a different api from the list, go to the link - the url will usually be the link you want to fetch(). Pay attention to the structure of the JSON returned to understand how you can traverse the JSON to find what data you want. Some APIs Like reddit’s return for r/todayilearned.json, which returns the latest posts in the Reddit subreddit “Today I Learned” will give you a ton of highly structured data containing locations, timestamps, and images. And, by the way, you can get the results from ANY subreddit by replacing the [subreddit name].json at the end of the URL endpoint. The latest posts in the subreddit r/aww are at: https://www.reddit.com/r/aww.json
  - When finished, post the .html page to your webspace and link to it from your home page

October 12, 2021

Javascript IIc: Interactive Canvas with P5.js Library Demo files for class

More p5 Demos - note: some of these may use previous p5 libraries - the p5 library files are included in each directory

More p5 Resources
P5’s own tutoral set
Dan Shiffman’s Coding Train Youtube Channel - a number of these demos and lessons employ the p5.js library
The Coding Train: learning JavaScript with p5.js - this is an intro to JavaScript taught through p5.js
In Class
- Intro to p5.js
- p5.js canvas
- P5.js beyond the canvas - libraries, plugins, helpers

Unit IV: Server-Side Programming with Node.js

October 14, 2021

Assignment 6: Library & API Research Due MORE P5.JS!

Demo Files

In Class
- p5 DOM
- images in p5
- looking at the pixel array
- more with video - snapshots from the camera

October 19, 2021

** No CLASS - Complete Node.js setup on your computer **

NODE JS Setup
- 1. MAC USERS: First, you need to make sure you have XCode Tools installed. You can find out by opening up a new Terminal window (go applications–>Utilities–>Terminal), and typing “gcc” in the prompt. Hit enter. If you do not have XCode tools, they will be installed.
- 1. (a) MAC USERS: Install Homebrew, which is a helpful package installer for Mac and Linux. Just like with xcode, you install Homebrew via the terminal by typing the command on the page linked above (or copy/paste) and hit enter. Homebrew should install automatically. If you get an error, try using the same code, but add “-g “ to the end. This means, “install globally,” which may be necessary based on your computer’s permissions. You will be prompted for your user password.
- 1. Follow the Installation Guides for Node.js
  - on Mac
  - on a Windows PC.
- Node requires that you use the Command Line Interface on your PC. If you don’t have much experience with the command line outside of this course, please do one of the following tutorials:
- A Beginner’s Guide to Using the Mac Terminal
- A Beginner’s Guide to the Windows Command Prompt
- And both mac and pc users might find This video on command line basics useful.
  - This is from a longer series on using Github for version control that may also be helpful if you’re new to Git, which we will use to help us get Node-based apps up on the web.
We’ll also be making extensive use of the Terminal available within VS Code. The commands will be the same.
- Optional, rn: Eventually, you’ll also need accounts with the following services if you don’t already have them - Github for version control. You’ll also need the Github CLI for pushing to Github from terminal. I’f you’ve already completed the above steps for installing Node with homebrew, you can simply $ brew install gh in your terminal to install the Github CLI.
- Heroku, a cloud based app platform, and a simple way to host applications built with Node.js. And, you’ll need the Heroku CLI, which you can also install with Homebrew in the terminal
  
  Node is a JavaScript runtime that allows us to run JS code outside of the browser context for server-side application development

October 21, 2021

Intro to Node, Express, and Serving Static Files

In Class
- Node installation troubleshooting
- What is node? What is NPM? What’s a “package”?
- Using the terminal in vs code
- npm init
- express router
- serving static files
Homework:
- Complete the demo from class if you haven’t already: npm init to create a project, create an app.js with an express server that hosts a “public” folder at localhost:3000. Add an index.html file to /public. Have that file load an image using fetch()
- Read and Practice in the command line: David Baumgold, “Getting to Know the Command Line”
- Work on Final Project Research
  - For inspiration, check out various projects by Joey Lee and Allison Parrish, both instructors at NYU’s ITP Program and creative technologists
  - See also, Treehouse.com: 7 Awesome things you can build in Node.js
Resources:

October 26, 2021

Routes in Express, FS, NeDB

Demo Start Files

In Class:
- writing routes, routes with parameters
- FS to save files
- NeDB - intro to saving data
- discussion of final project proposals
Resources:
- Express Guide to Routing
- Express Basic Routing Snippets
- Excellent Dan Shiffman Tutorial on Routes from a series of videos on using node to build APIs for working with text and text-based data
- See also: YouTube Playlists: Dan Shiffman on working with Data from 2017, and 2019
Homework:
- Finish in-class example with routes to get and post data using fs and nedb - you can use the example in class, sending image data back and forth, or build your own routes and data (like user input)
- Work on final project proposal research, and come to next class ready to present brief thoughts on your final project ideas so far:
  - A basic outline of what your app or website will do
  - A list of any supporting JavaScript libraries or Frameworks
  - A list of any APIs or Data you may use
  - Will your project have a database or a way to save persistent data? What kinds of data and what formats do you need?
  - Notes on possible users / use-cases
- Set up for Oct. 28 Class: Get a Heroku account and a Github account

October 28, 2021

Final Project Proposal Draft

Recording from Oct 28 Class

In Class:

Presentation/Discussion: Final Project Ideas
Posting a simple app on Heroku, Git
.gitignore, hiding environment variables

Resources

November 2, 2021

Intro To React

Demo index.js

In Class:

React Quick Start, create react app, components

Homework (this week)

React.js Essential Training - Entire tutorial is about 2 hours, get through as much as you can & try to get through at least #3: React Components

November 4, 2021

React II

Demo Starter

In Class:

Props, State, getting Data, and Router

Homework:

Finish and post your Final Project Proposals to your sites.duke.edu site and link from your home page
- Guidelines

November 9, 2021

Final Project Proposal + Initial Sitemap / App Outline Due

React III, React + MongoDB

Demo Start - note this is exactly where we left off last class

In Class:

React router (con’t if we don’t finish on Nov. 9)
Intro to MongoDB
Set up MongoDB, backend for app

November 11, 2021

Mongo DB 2

Start point for demo

In Class:

Finish MongoDB app connection, frontend routes and data parsing

November 16, 2021

Zoom Class

Link: tbd

Final project workshop session / drop-in for consultation

November 18, 2021

Intro to ML5.js for machine learning

Ml5 + p5 boilerplate on Github - includes all of the library links you’ll need for ML5 + p5.js

In Class:

intro to machine learning
image, drawing, webcam classification with MobileNet
Object detection

Homework:

Play with ml5.js (Check out other models here) + post an example to your homepage

November 23, 2021

Con’t with ML5.js and/or CLM Tracker (face/gesture tracking)

Demo Code Here - Face tracking / Face tracking Mesh in ml5.js

See Also: Machine Learning For Artists for other ml5 example code and project ideas.

November 30, 2021

Final Project Working Draft Presentation

December 2, 2021

Final Project Working Draft Presentation

Final Project Due on Friday, Dec 10