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.
No Monday class, CS351Overview, personalGit,
GitClass, Markdown, HTML1, CSS1
JavaDOMIntro, CascadeInheritance, DOMEvents, HTMLWidgets, ScriptTags
CSSPositioning, CSSLayoutFloats, CSSFlexBox, CSSGrid, NodeNPM
Modules, TemplatesNunjucks, UsingTemplatesNunjucks, StaticGenerators, Midterm #1
NetworkIntro, EventLoop, URLS
ExpressAndTemplates, HTMLForms, ExpressForms, securityOverview
Authentication, Cookies, sessionManagement
ExpressSessions, Midterm #2
LifeCycle, FetchAPI, AsyncAwait, NeDBNode
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.
CS351Overview: dependencies:. covers: course objectives and topics, course procedures, course syllabus.
CS651Overview: dependencies:. covers: course objectives and topics, course procedures, course syllabus.
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.
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.
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...
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).
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, the
display 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.
DOMEvents: dependencies: JavaDOMIntro. covers: Event intro, addEventListener, removeEventListener, MouseEvent, event propagation, event delegation.
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.
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.
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.
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.
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.
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.