Assignments (Spring 2021)

Working Schedule and Lectures (Fall 2021)

This schedule will be updated as the course progresses. Note the fall class was cancelled in favor of another section of the graduate web systems class. The schedule below is illustrative of the pacing of the class.

Date Week Topic(s)
08/16 1

No Monday class, CS351Overview, personalGit,

08/23 2

GitClass, Markdown, HTML1, CSS1

08/30 3

Text Styling, JavaScript1, JavaScript2, MoreSelectors

09/06 4

No Monday class, CSSBox, HTML2, JavaScriptObjects, JSON,ArraysFunctional

09/13 5

JavaDOMIntro, CascadeInheritance, DOMEvents, HTMLWidgets, ScriptTags

09/20 6

CSSPositioning, CSSLayoutFloats, CSSFlexBox, CSSGrid, NodeNPM

09/27 7

Modules, TemplatesNunjucks, UsingTemplatesNunjucks, StaticGenerators, Midterm #1

10/04 8

NetworkIntro, EventLoop, URLS

10/11 9

HTTPIntro, JavaScriptPromises, Requests, WebFrameworksExpress

10/18 10

ExpressAndTemplates, HTMLForms, ExpressForms, securityOverview

10/25 11

Authentication, Cookies, sessionManagement

11/01 12

ExpressSessions, Midterm #2

11/08 13

GetStartedReact, JSXIntro, JavaScriptFuncs, FunctionComponents

11/15 14

BasicReactRendering, JavaScriptThis, JavaScriptClasses, ClassComponents, Interactivity

11/22 15

Fall Recess

11/29 16

LifeCycle, FetchAPI, AsyncAwait, NeDBNode

12/06 17

Final Exam week

Videos corresponding to lecture slides in the schedule can be found on my YouTube Playlist. Note: class slides and videos may be updated at any point in the course. Make sure you are reading/viewing the latest version.

Lectures Slides by Category

Notes: Lecture slides are produced using Pandoc and reveal.js from instructors Markdown files. Lecture slides will be updated prior to scheduled delivery date per working schedule. Not all slides are used in all classes.

Videos corresponding to lecture slides in the schedule can be found on my YouTube Playlist.

Course Intros

CS351Overview: dependencies:. covers: course objectives and topics, course procedures, course syllabus.

CS651Overview: dependencies:. covers: course objectives and topics, course procedures, course syllabus.

Tools, Techniques

personalGit: dependencies:. covers: Git for personal projects and class.

GitClass: dependencies personalGit. covers: class procedures with git and GitHub.

Markdown: dependencies:. covers basics of Markdown.

NodeNPM: dependencies:. covers: a lot of Node and NPM stuff.

JSON: dependencies: JavaScriptObjects. covers: JSON, its relation to JavaScript, use in the Web and beyond.

JSON-Schema: dependencies: JSON, NodeNPM. covers: JavaScript data validation, JSON, specifying a schema for JSON in JSON, AJV library, examples.

TemplatesNunjucks: dependencies: NodeNPM, Modules. covers: template concepts, Nunjucks templates, Node.js and Nunjucks.

UsingTemplatesNunjucks: dependencies: TemplatesNunjucks. covers: Using Node.js and Nunjucks to generate a static website (no server or SSG).

StaticGenerators: dependencies: UsingTemplatesNunjucks. covers: Why static site generators, Metalsmith, plugins, processing flow, layouts, markdown, metadata.

StaticGenRepo: dependencies: personalGit, StaticGenerators. covers: How to use the Zip archive of a repo with different examples on different branches.

Testing: dependencies: NodeNPM, JavaScriptPromises. covers: Types of software tests, software processes and testing, Mocha test framework, Chai assertion library, asynchronous tests.

HTML & SVG

HTML1: dependencies:. covers: Markup languages in general, HTML5 tags and attributes, the id and class attributes, the head, text fundamentals (including lists), hyper links, document structure.

HTML2: dependencies: HTML1. covers: HTML entities, Unicode, Images and Figures, including image sizing, advanced text structures such as abbreviations, details, etc...

HTMLWidgets: dependencies: JavaScript DOM, HTML1. covers: Inputs and clickable things like buttons and checkboxes.

HTMLForms: dependencies: Express (WebFrameworksExpress, ExpressForms) and Networking (NetworkIntro, URLS,HTTPIntro), covers: HTML form element and classic form submission to a server.

BasicsSVG: dependencies: HTML1. covers: SVG basics not including transforms, view ports or view boxes.

[DOMandSVG][]: dependencies: BasicsSVG, JavaDOMIntro, DOMEvents. covers: generating SVG elements in code (random squares example), and hit testing (guitar chord example).

CSS

CSS1: dependencies: HTML1. covers: How CSS works, CSS Syntax, Selectors Introduction, Simple Selectors, Combinators. notes: make sure all examples are available for download as well as copy to clipboard.

Text Styling: dependencies: CSS1. covers: text styling, color, size, font, etc... notes: give this a better file name! Make sure all examples are available for download as well as copy to clipboard.

MoreSelectors: dependencies: Text Styling. covers: combinators, psuedo classes, psuedo elements, attribute selectors.

CascadeInheritance: dependencies: CSS2. covers: cascade (priority rules) and inheritance.

CSSBox: dependencies: CSS1. covers: box model (content, padding, border, margin) and content overflow.

CSS4: dependencies: CSS1. covers: Pseudo-classes, pseudo-elements, Attribute Selectors, CSS values and units, Styling Lists, Styling Links. notes: check if pseudo selector stuff is in CSS1 and whether it should be moved out. Move CSS values to a separate set with more on sizing?

MediaQueries: dependencies: CSSBox. covers: Media queries in general and CSS media queries. notes: General coverage of "media" not particularly applied, either improve or remove. Add my "syllabus" TOC sidebar example.

CSSLayoutFloats: dependencies: CSSBox. covers: general layout concepts, overview of techniques available, thedisplay property, Short section on the intended use of floats.

CSSFlexBox: dependencies: CSSBox. covers: flexbox. notes: Link examples to slides, add questions for reinforcement.

CSSGrid: dependencies: CSSFlexBox. covers: CSS grids. notes: Link examples to slides, add questions for reinforcement.

CSSPositioning: dependencies: CSSBox. covers: positioning types, the position attributes, CSS drop downs, and a tabbed pane example.

JavaScript

JavaScript1: dependencies:. covers: Introduction, use of browser console, grammar and types, expressions and operators. notes: needs questions to get students active, this is important but dry material.

JavaScript2: dependencies: JavaScript1. covers: control flow, error handling, loops and iteration, intro to arrays.

ArraysFunctional: dependencies: JavaScript2. covers: getting more productive with JS Arrays/simple functional Programming with JS Arrays.

JavaScriptObjects: dependencies: JavaScript2. covers: object creation, getting and setting object properties, copying and combining objects, object methods, object constructor functions.

JavaScriptFuncs: dependencies: JavaScript2. covers: declarations, expressions, nesting, closures, arguments, default parameters, rest parameters, arrow functions.

JavaScriptClasses: dependencies: JavaScript2. covers: prototypes and classes.

JavaScriptThis: dependencies: [JavaScript Functions][]. covers: this with examples. Just a mention of bind.

Modules: dependencies: [JavaScript Functions][]. covers: overview of modules, Node.js modules, ES6 modules, and bundlers.

EventLoop: dependencies: [JavaScript Functions][].covers: JavaScript concurrency model, setTimeout. notes: section on order and asynchronous uses not very good example of Node.js async file reads. Better to remove and use network examples.

JavaScriptPromises: dependencies:EventLoop and HTTPIntro. covers: promises, chaining, composition, HTTP requests with examples, Node.js APIs and promises.

AsyncAwait: dependencies: JavaScriptPromises. covers: async functions, await operators, examples.

JavaScript DOM

JavaDOMIntro: dependencies: JavaScriptObjects. covers: Document object model, node, document, elements, classList, queries, window.

DOMEvents: dependencies: JavaDOMIntro. covers: Event intro, addEventListener, removeEventListener, MouseEvent, event propagation, event delegation.

ScriptTags: dependencies: JavaScript1, HTML1. covers: internal and external scripts, script order, onload.

FetchAPI: dependencies: JSON, Express Server, JavaScriptPromises, Exceptions. covers: Fetch, Fetch and JSON, fetch error handling.

Networking

NetworkIntro: dependencies:. covers: multiplexing, packet switching, link layer (ethernet), network layer, IP, IP addresses, transport layer, DNS.

URLS: dependencies:. covers: all the parts of a URL.

HTTPIntro: dependencies: NetworkIntro. covers: HTTP protocol, HTTP requests, HTTP responses, proxies, requests in code. notes: requests in code section uses out of date version of requests library; check how its proxy section compares to separate proxy slides.

Cookies: dependencies: HTTPIntro. covers: cookies use on server and client, preference cookie example, cookie attributes.

HTTPProxies: dependencies: HTTPIntro, Modules. covers: proxy definition, forward and reverse proxies, development proxy, implementation with Parcel.js.

Server-APIs: dependencies: JSON, HTTPIntro. covers: API definition and popular types, REST style APIs.

WebSockets: dependencies [NetworkingIntro][], HTTPIntro. covers: What WebSockets does compared to HTTP, the WebSocket Protocol, WebSockets on the client and server.

Servers Side: Express & Requests

WebFrameworksExpress: dependencies: NodeNPM, Modules, HTTPIntro. covers: General overview of web frameworks, Express.js routing, requests, responses, middleware, JSON servers.

Requests: dependencies: HTTPIntro, JavaScriptPromises, AsyncAwait. covers: request-promise-native, promise based requests, async/await requests, cookies.

ExpressAndTemplates: dependencies: TemplatesNunjucks, WebFrameworksExpress. covers: Classic server side rendering with templates, using Nunjucks with express, website example. notes: get examples linked to slides.

ExpressForms: dependencies: HTMLForms, ExpressAndTemplates. covers: Form handling with express, get forms, post forms, needed middleware.

ExpressSessions: dependencies: sessionManagement, ExpressForms. covers: Use of express-session library to implement multi-user website with password authentication; Example of a template based server rendered site.

ExpressSessionsJSON: dependencies: sessionManagement, JSON. covers: Use of express-session library to implement multi-user website with password authentication; Example of a JSON based server.

NeDBNode: dependencies: NodeNPM, Modules, JavaScriptPromises. covers: Concept of data persistence, types of databases, document database, NeDB document database usage, NeDB with Promises.

Security

securityOverview: dependencies:. covers: Web security basics, access control, AAA, threats. notes: last section is specifically aimed at CS651.

Authentication: dependencies: securityOverview, NodeNPM. covers: Password based authentication, issues with passwords on the server, types of attacks, salt, use of bcriptjs.

sessionManagement: dependencies: Authentication, securityOverview. covers: the concept of a web "session", how sessions work, use and protection of session ids.

React

GetStartedReact: dependencies: NodeNPM, Modules. covers: Using Parcel.js to build a basic React app. note: Looks like its missing the install React step.

JSXIntro: dependencies: GetStartedReact. covers: What is JSX, combining JSX, conditional rendering with JSX, arrays and loops, attributes and JSX. JSX

FunctionComponents: dependencies: JSXIntro, ES6 Modules. covers: Creating our own components using functions; props, import and export (ES6).

BasicReactRendering: dependencies: FunctionComponents. covers: React's use of a virtual DOM via an example of periodic rendering.

ClassComponents: dependencies: FunctionComponents, JavaScriptThis. covers: class based components, interactivity, "this" issues, bind, properly updating state arrays and objects, data flows.

Interactivity: dependencies: ClassComponents. covers: more complex interactivity with React; demonstrates state array update approach applied to real GUI, illustrates another "this" issue and its fix.

LifeCycle: dependencies: ClassComponents. covers: Lifecycle methods for class components; illustrates with clock example.