Assignments (Fall 2021)
Working Schedule and Lectures (Fall 2021)
This schedule will be updated as the course progresses.
No Monday class, CS651Overview, personalGit, GitClass, Markdown
No Monday class, JavaDOMIntro, ScriptTags, DOMEvents, HTMLWidgets
CSS4, CSSFlexBox, CSSGrid, GetStartedReact, JSXIntro, EventLoop
AsyncAwait, WebFrameworksExpress, Requests, securityOverview
Authentication, Cookies, sessionManagement
ExpressSessionsJSON, Server-APIs, Midterm #2
Testing, JSON-Schema (Validation)
NeDBNode, FetchAPI, HTTPProxies
React LifeCycle, Front and Backend Integration
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.
[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.
CSS2: 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: CSS2. 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.
Here you will find links to various course materials and such. This page will be updated frequently during the course.
Static Deployment Environment
For deploying our static website we will be using the departments Linux server: csweb01.csueastbay.edu.
Each student has an login/account corresponding that corresponds to their student ID. Suppose your student ID is abc123 then your login on the server would be abc123@ad. Your password is your university password.
Remote Login To remotely login to you account you use software that provides a command line like interface and uses the secure shell protocol. On a system with OpenSSH client software installed you can login using the following command in a terminal window:
ssh csweb01.csueastbay.edu -l abc123@ad
Where you need to substitute your student ID for abc123.
On Windows machines another popular option is the Putty.
To make use of the hosting service provided by the CS department we need to be able to transfer files from the machine that you are developing on to you account on the server. We will use the SSH File Transfer Protocol (SFTP). There is a command line client,
sftp, available from OpenSSH. However there are many GUI based clients that are much easier to work with such as FileZilla (multi-platform) and WinSCP (Windows only).
You will want to upload you site files to the
public html directory in your account.
Making HTTP Requests
You can then point your browser to
http://csweb01.csueastbay.edu/~abc123/SomeFile.html. Where you substitute you student ID for abc123 and the name/path to your file for SomeFile.html.