Syllabus · Course book · Slides · Chapter 1 · Chapter 2

Videos

Lecture clips grouped by chapter and numbered book section. Choose a thumbnail to play that section. The player starts at the section; Watch full lecture opens the whole recording when one is known.

These clips follow the book. They are not a substitute for labs or the checklists on Assignments.

Recent lectures

SectionYearSemester

Class recordings for this section and term. Book clips further down are not filtered.

CS5610-02 FA26 · Mon, Oct 26

22 of 22 clips posted

Part 1 · Client, Server & Data-Driven UIs
7:12 · Wrapping up the client half of the semester before servers: the client-server split, React as a function that renders data structures into a data-driven user interface, state encoded in the URL as online stores do, and servers that must tell thousands of users apart.
Part 2 · State & User Events
9:43 · What application state means, a snapshot of every variable at a moment in time, and how user events change it. Events need client components since a human is in the loop, a tour of common event handlers, and why we skip the verbose older state libraries.
Part 3 · Click Events
6:54 · Creating the Lab 4 component and handling a button click with onClick: pass the function itself, not a call with parentheses, remember use client so the handler works, and wrap the call in an arrow function when you need to pass arguments.
Part 4 · Event Object
3:16 · Every handler receives an event object from the browser. preventDefault and stopPropagation, and why a click on one branch of a tree could otherwise be handled by its parent and collapse the whole tree.
Part 5 · Passing Functions & Callbacks
6:45 · Passing a function to a component as an attribute so it can call back with data. Callback functions are how components talk to one another and how asynchronous work like fetching data reports back when it is done.
Part 6 · Why the Counter Won't Update
6:23 · Incrementing a plain variable on click changes the value but never the screen. React keeps a virtual DOM and assumes most content is static, so it only re-renders when you tell it something changed.
Part 7 · useState Counter
3:51 · Turning the counter into a state variable with useState: the hook returns the current value and a setter, and calling setCount tells React to redraw the component with the new value.
Part 8 · How useState Works
7:30 · Why hooks exist: functions cannot keep state the way classes do, so React keeps a map of state for every component. useState returns an array you destructure into any names you like, and only the affected part re-renders.
Part 9 · Boolean & String State
4:25 · A boolean state variable toggled true and false to render content dynamically, and a string state variable for a first name updated on every keystroke by reading event.target.value from the input.
Part 10 · Date State
5:31 · Dates live in two worlds: a JavaScript Date object and the year-month-day string an HTML date input expects. Converting between them so a date picker can read and update a state variable.
Part 11 · Object State
6:59 · A user object as a single state variable edited through a form: clone the current object with the spread operator, override the one changed property, and convert inputs back to the right data type.
Part 12 · Array State
9:16 · Arrays in state are never mutated in place. Add an item by building a new array with the old items plus a random value, and remove one by filtering out its index, with closures remembering each line item's index.
Part 13 · Keys in Lists
5:36 · Why every item rendered from an array needs a unique key: React uses it to map the virtual DOM back to the real DOM as items are added and removed, and why an ID beats the array index.
Part 14 · Sharing State Between Components
7:10 · A recap of events and state, then how components share state: a parent declares the state variable and passes the value and the setter down to child components that read and change it.
Part 15 · Prop Drilling & URL State
4:50 · Passing state through a long chain of parents to reach a grandchild is property drilling and makes code brittle. One escape is keeping state in the URL, as online stores do, so any component can read it.
Part 16 · React Context
6:05 · React's built-in answer to prop drilling: create a context, wrap components in its provider, and like a block-scoped variable, everything inside the provider can reach the shared state.
Part 17 · useContext Hook
5:07 · A custom hook returns the counter context so any component inside the provider can read the count or change it. It solves property drilling, but it is far more verbose than useState.
Part 18 · Zustand Global Store
5:31 · Zustand as the middle ground: declare a store with state and functions that return the next state, then read and update it from any component, as simply as useState. A shopping cart is a classic global store.
Part 19 · Shared State on the Server
2:29 · Looking ahead: real apps keep state on a server shared by many users at once, like dozens of people fighting over the same seat, which raises consistency problems we tackle once we reach servers.
Part 20 · Zustand To-Do Store
5:51 · A to-do list built on a Zustand store: the to-do data structure, a default to-do with an invalid ID, mutators kept in the store, and why pure functions make the store easy to unit test.
Part 21 · To-Do CRUD & UI
7:41 · Create, delete and update a to-do by computing brand new arrays, then pull the store's data and functions into the components: a form to add or update and a list item to edit or delete.
Part 22 · useEffect
9:14 · Effects are things the user did not trigger, like loading data when a page opens. useEffect runs a function after render, and its dependency array controls when it runs again. Next week it fetches from a server.

CS5610-02 FA26 · Mon, Oct 19

23 of 23 clips posted

Part 2 · Legacy & Arrow Functions
7:48 · Declaring functions the legacy way with the function keyword, a name, a parameter list and a return, then the ES6 arrow function syntax with no keyword and no name: assigning it to a constant, dropping the curly brackets and the return for one-line bodies, and the debate about dropping the parentheses.
Part 3 · JavaScript Arrays
8:41 · Array literals with square brackets, mixing data types (numbers, strings, functions, even JSX) in one array, rendering arrays of line items inside JSX, and common array properties and operations such as length, push and index lookups.
Part 4 · For Loop & Map
5:48 · Iterating over arrays with a classic for loop, then the map function that computes a brand-new array of the same length by applying a function to each item, written compactly with arrow functions, and using map inside an ordered list to render list items in React.
Part 5 · Find, Filter & Reduce
2:07 · More array functions used constantly in React code: find to locate an item, filter to keep the items that match a condition, and reduce to accumulate an entire array into a single value such as a sum.
Part 6 · JSON & Objects
5:13 · The JSON utility library: JSON.stringify converts any data structure into a string so it can be sent to a server, stored or printed while debugging, why JSON replaced XML for data exchange, and declaring objects and navigating them with dot notation.
Part 7 · Spread Operator
5:16 · Copying arrays and objects onto a target with the spread operator, appending items to the end of an array, merging objects that have no positions, and what happens when two objects declare the same property: the last one wins. Expect a spread question on a quiz or exam.
Part 8 · Destructuring
6:27 · Plucking properties out of an object into local constants with destructuring instead of repeating person dot name, how curly brackets mean construct on the right of the equal sign and destructure on the left, picking only a subset, and destructuring arrays by position.
Part 9 · Destructuring Parameters
3:57 · Destructuring in function parameters: passing one object and plucking out the properties a and b in any order, compared with positional parameters, and why extra properties do not get in the way.
Part 10 · Destructuring Imports
6:12 · We have been destructuring all along in our imports: a module exports one big object, importing named functions with curly brackets, aliasing them, and default exports that do not need the curly brackets.
Part 11 · Optional Chaining
3:31 · Declaring whether object properties are required or optional (a house must have bedrooms, a garage is optional), and the optional chaining operator with defaults that let you deal with missing values without long chains of explicit guards.
Part 12 · Template Literals
2:41 · A refresher on string templates with backticks, which embed expressions inside static strings instead of concatenating, a common need when one language is generating another.
Part 13 · Dynamic Styles
7:47 · Back to React: computing class names with expressions and template literals so styles change with the data, and the style attribute as an object whose properties can be computed, combined and passed around like data rather than hard-coded strings.
Part 14 · Server vs Client Components
6:56 · Where React code runs: generating the page once on the server and caching it for many browsers, when a static landing page favors the server and highly dynamic content favors the client, and how Next.js mixes mostly server components with a few client components.
Part 15 · Client & Server-Only APIs
5:51 · A client component demo using the next/navigation library: Next.js complains when a client-only library runs on the server until the component declares use client. Things only the browser knows (path, search parameters, IP address) versus things only the server can do (reading and writing files).
Part 16 · Component Props & Children
4:53 · How components collaborate: importing and rendering each other, passing data as attributes that arrive as properties, and passing content through the body as children, the strategy layouts use to wrap the content they are given.
Part 17 · URL Path Parameters
11:36 · The URL can carry state: product pages that do not exist until computed from the URL, highlighting the current lab in a table of contents by parsing the path, and dynamic route placeholders in square brackets for values such as unique IDs that cannot be predicted.
Part 18 · Kambaz Navigation Highlighting
10:44 · Making Kambaz more dynamic: building the navigation links from data, reading the path name in a client component, and highlighting the selected link in the main and course navigation sidebars by checking whether the path includes each link.
Part 19 · Deriving UI from State
5:30 · Instead of catching events and changing styles by hand, keep the application state and derive the user interface from it. Why this makes applications easier to test, and why stateful things like a bank balance are harder to verify than stateless ones.
Part 20 · Courses JSON Database
5:54 · Making Kambaz data-driven: collecting the courses into a local JSON database, importing it in the dashboard and iterating over it to render a course card for each course, so adding an object adds a course.
Part 21 · Course by ID & Breadcrumbs
5:30 · Using the course ID from the URL folder in square brackets like a foreign key to find the course object, display its name, and build breadcrumbs from the course name and the current section of the path.
Part 22 · Course Modules by ID
4:03 · Highlighting the course navigation and loading modules from the database, filtering them by the course ID the way a join uses a foreign key, so each course shows only its own modules.
Part 23 · Assignments, Users & Enrollments
7:23 · Loading each course's assignments, then users and enrollments, a many-to-many mapping between users and courses, so the People screen of each course lists only the students enrolled in it.
Part 24 · Next Up: Zustand & Events
3:26 · What comes next week: Zustand for maintaining state that changes as users create, update and delete, telling React when to render, and handling events such as clicks, drags and keystrokes in forms before sending data to a server.

CS5610-02 FA26 · Mon, Oct 5

19 of 19 clips posted

Part 1 · CSS Recap
11:00 · The class opens with the plan for the week: finish CSS, introduce Tailwind, and apply both to the Kambaz project, with JavaScript and data-driven pages coming next. Next week is a holiday, so the lecture videos and an online quiz (multiple choice plus two short coding questions) cover that content. Then a recap of CSS so far: selectors, colors, the box model, size and position, media queries, and floats versus flexbox for horizontal layout.
Part 2 · Tailwind Setup
11:39 · React Icons, a library that bundles thousands of open-source icons we will use all semester, then Tailwind: a curated set of utility classes that wrap common CSS so you can combine them instead of writing raw CSS. A local index.css imports Tailwind for the lab page, Tailwind's reset removes the default heading sizes and margins, and the point of using h1 for logical structure even when Tailwind controls how it looks.
Part 3 · Tailwind Typography
4:59 · Tailwind typography utilities: font sizes from text-xs through text-base (16 pixels) up to text-9xl, font weights from thin to black, serif, sans, and mono font families, italic, underline, line-through, and overline, and uppercase, lowercase, and capitalize. AI autocomplete is fine for filling these in, but check its suggestions against the Tailwind docs because it sometimes invents classes.
Part 4 · Tailwind Colors
3:14 · Tailwind's color naming convention: bg- for background colors and text- for foreground colors, followed by the color name and a shade from 100 to 900, or an exact hex value. A demo builds rows of reds, greens, blues, and more in different shades.
Part 5 · Tailwind Borders
7:40 · Borders in Tailwind follow the box model: the border class turns borders on, then you set the width, the color (border- plus the color and shade), and the style, which defaults to solid. The demo adds vertical margins with my- and padding with p-, and shows why padding and margin differ: padding takes the background color, while margins are always transparent.
Part 6 · Border Styles & Radius
7:09 · Border styles (solid, dashed, dotted, double, and none or hidden), why you might turn a border off at some breakpoints, and how class strings can later be computed from JavaScript expressions instead of hard-coded. Then rounded corners from rounded-sm to rounded-2xl, rounding individual corners, and targeting single sides with classes like border-t and border-l, as in the Kambaz course navigation.
Part 7 · Tailwind Flexbox
8:18 · The flex class lays children out horizontally, inverting how block elements behave: each child is as narrow as its content and pushes the next one sideways. Why horizontal scrolling should be avoided except for targeted pieces like a wide grades table, and how flex-grow lets one column, like Canvas's main content, fill the extra space while the sidebars stay fixed.
Part 8 · Tailwind Widths
3:51 · Controlling widths inside a flex container: fractional widths such as w-1/2, w-1/3, and w-1/4, w-full, fixed sizes, and arbitrary values in square brackets that Tailwind turns into real CSS on the fly, which also works for custom hex and RGB colors.
Part 9 · Grid & Flex Wrap
8:30 · Tailwind's grid as a cleaner replacement for layout tables: grid-cols sets the column count and items wrap into new rows automatically, with gap for spacing. When the items have fixed widths, flex plus flex-wrap keeps their size and wraps them onto the next row when space runs out, the technique behind the Kambaz dashboard's course cards.
Part 10 · Responsive Design
11:23 · Why responsive design exists: the first iPhone showed full desktop pages with double-tap zoom, then separate mobile sites drifted out of sync, then one codebase with styles triggered by screen size. Tailwind is mobile-first with sm, md, lg, xl, and 2xl breakpoints (640, 768, 1024, 1280, and 1536 pixels), and Canvas shows it in action: the right sidebar disappears near 1140 pixels and the left sidebars fold into a menu at 768, without losing any functionality.
Part 11 · Tailwind Breakpoints
6:22 · Breakpoint prefixes in practice: a header whose background goes red, green, blue, yellow, and purple as the window passes sm, md, lg, and xl, and the gotcha that zooming the browser changes the calculated screen size. Each prefixed class applies from that width up, so unprefixed classes are the phone default.
Part 12 · Hide & Show
9:16 · Hiding and showing content by screen size, the way Canvas does it: a flex row with Canvas navigation, course navigation, a growing modules column, and a status column. Everything but the main content starts hidden, then sm:block, md:block, and lg:block bring each column back as the screen grows, while drop-down menus provide navigation on small screens and hide once the sidebars appear.
Part 13 · Kambaz Layout
10:21 · Applying Tailwind to the Kambaz project: a Kambaz-wide CSS file for shared styles (page-specific files only when needed), importing Tailwind's utilities without its reset, and replacing the layout tables from earlier labs with flex containers for the main layout, the course layout, and the home page, with flex-grow on the main content.
Part 14 · Responsive Sidebars
2:57 · Making the Kambaz layout responsive: the course status column starts hidden and returns at lg, the course navigation returns at sm, and the Kambaz navigation at md, so a phone sees only the modules and larger screens add each sidebar in turn.
Part 15 · Kambaz Navigation
15:15 · Styling the Kambaz navigation sidebar: removing list bullets, padding, and link underlines (and finally importing Tailwind's full reset instead of fighting the defaults), centered white text on a black background, installing React Icons and adding an icon above each link, and computing the class string with a ternary expression so the selected link renders black on white.
Part 16 · Fixed Sidebar
4:11 · Keeping the Kambaz navigation in place while the content scrolls: position fixed with top-0, bottom-0, and left-0 stretches it to the full height, but fixed elements leave the normal flow and cover the content, so the main area gets left padding at the md breakpoint equal to the sidebar's width.
Part 17 · Course Navigation
6:03 · Rebuilding the course navigation from an array of link objects rendered with map, then styling it: white background, red links with padding, and a black border that is turned off on the top, bottom, and right and only shown on the left of the selected link through a computed class string.
Part 18 · Module Borders
8:04 · Styling the Kambaz modules list: borders and horizontal margins around each module, why the outer border fights the lessons' borders and is turned off, and lesson rows with a white background, padding, light gray borders, and a green border only on the left.
Part 19 · Lessons & Components
11:41 · When repeating the same utility classes on every row becomes tedious, a single CSS rule using a descendant selector styles all the lesson items at once. Then green check-circle icons from React Icons, why copied markup should become a component, how a data structure and map will make the modules data-driven next week, and why practicing the fundamentals still matters when AI tools can write the code.

CS5610-02 FA26 · Mon, Sep 28

15 of 15 clips posted

Part 1 · Week Overview
9:19 · The class opens with Assignment 1 feedback and how to contest lost points, a recap of the first HTML module, and the plan for CSS week: CSS basics first, then a styling library, applied to the Kambaz project, with the first quiz at the end of class.
Part 2 · Style Attribute
11:57 · Starting the Lab 2 page, we compare three ways to add styles (the inline style attribute, a style tag, and a separate .css file loaded with an import), why inline styles are a maintenance problem, and how a JSX style object uses camelCase properties and double curly braces before it compiles to a plain CSS string.
Part 3 · CSS Selectors
9:23 · The anatomy of a CSS rule: selectors, properties, and values. We select elements by tag name and by ID, see two rules compete in the browser inspector, and learn how specificity and then source order decide which rule wins, plus the common trick of loading your own rules after a library such as Bootstrap to override it.
Part 4 · Class Selectors
12:49 · Reusable class selectors with the dot syntax, combining several classes on one element, prefixing your own class names (wd- in the lab), and document-structure selectors that target elements by their ancestors, including the stricter child selector that is cheaper for the browser to match.
Part 5 · Cascade & Colors
11:13 · How the cascade settles conflicts (specificity, source order, and inheritance, where color is inherited but width and margin are not), why JSX uses className instead of class, utility classes for foreground and background colors, and naming classes by role instead of by literal color.
Part 6 · Box Model
11:23 · The CSS box model: content, padding, border, and margin. We style borders (width, style, color, per side), set padding and margins with the clockwise top-right-bottom-left shorthand, discuss when padding and margin differ, and round corners with border-radius.
Part 7 · Width & Height
13:18 · Dimensions in the box model: how block elements are as wide as their container and as tall as their content, what happens when you override width and height (portrait, landscape, and square boxes), and using overflow to clip or scroll content that no longer fits.
Part 8 · Display & Position
10:09 · The display property: inline elements ignore width and height, inline-block respects them, and block elements stack. After the break, an introduction to positioning: top, left, bottom, and right are distances from edges, and how they are read depends on the position value.
Part 9 · Relative Position
12:13 · A live demo of position: relative, nudging boxes with top, left, bottom, and right from where they would normally render. The parent's size does not change, and nudged boxes can end up overlapping their siblings.
Part 10 · Absolute Position
9:20 · position: absolute takes an element out of normal flow: its siblings render as if it were gone, the parent stops counting its height, and the offsets are measured from the nearest positioned (relative) ancestor, or from the document if there is none.
Part 11 · Fixed & Z-Index
7:40 · position: fixed keeps an element in place while the page scrolls, which is how toolbars and sidebars work. Then stacking order: overlapping elements draw in document order unless you raise one with z-index.
Part 12 · Float Layouts
7:16 · How float, first meant to wrap text around images, was used to build early page layouts that replaced table-based layouts: percentage-width columns (halves, thirds, 20/60/20 sidebars), clear on each row, and the grid systems that grew from the idea.
Part 13 · Flexbox
8:10 · display: flex, the dedicated tool for horizontal layouts: children of a flex container line up in a row, a fixed-width sidebar column sits next to a column that grows to fill the remaining width, and white-space: nowrap keeps text on one line.
Part 14 · Media Queries
9:24 · Responsive design with media queries: why a wide layout makes no sense on a phone, the origin of media types for print and projectors, early fixes like double-tap zoom and separate mobile sites, and one responsive codebase using min-width and max-width breakpoints.
Part 15 · Media Query Demo
7:00 · The Media Query Demo on kambaz.dev: resizing the window changes colors and list styles at 750, 1000, and 1250 pixels with no JavaScript, because CSS is declarative. Then how libraries such as Bootstrap and Tailwind name standard breakpoints (small, medium, large, extra large).