1 Assignments (Fall 2020)

2 Working Schedule and Lectures (Fall 2020)

This schedule will be updated as the course progresses.

Date Week # Topic
08/17 1 No Monday class, CS651Overview, personalGit,
08/24 2 GitClass, Markdown, HTML1, BasicsSVG, CSS1, CSS2,
08/31 3 JavaScript1, JavaScript2, HTML2, MoreSelectors, CSSBox,
09/07 4 No Monday class, JavaDOMIntro, JavaScriptObjects, JSON, ArraysFunctional
09/14 5 CascadeInheritance, DOMEvents, HTMLWidgets, ScriptTags, DOMandSVG, CSSPositioning
09/21 6 JavaScriptFuncs, CSSLayoutFloats, CSSFlexBox, CSSGrid,NodeNPM, Modules, GetStartedReact, JSXIntro, EventLoop
09/28 7 FunctionComponents, BasicReactRendering, JavaScriptThis, JavaScriptClasses, ClassComponents
10/05 8 Interactivity, Midterm #1
10/12 9 NetworkIntro, URLS, HTTPIntro, JavaScriptPromises, AsyncAwait, Requests
10/19 10 WebFrameworksExpress, Server-APIs, securityOverview,
10/26 11 Authentication, Cookies, sessionManagement, ExpressSessionsJSON
11/02 12 Testing, NeDBNode, JSON-Schema
11/09 13 HTTPProxies , No Wednesday class
11/16 14 FetchAPI, LifeCycle
11/23 15 Fall Recess
11/30 16 WebSockets, Front and Backend Integration
12/07 17 Final Exam week

3 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.

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.

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, 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.

4 Miscellaneous Materials

Here you will find links to various course materials and such. This page will be updated frequently during the course.

4.1 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.

File Transfer

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.