Materials and resources of the 2018/19 Web and Database Technology course at TU Delft are listed here. At the moment, only Web topics are covered. Work in progress.
The responsible instructors (A. Bozzon, C. Hauff) can be reached at cse1500-ewi[at]tudelft.nl. Warning: the mailbox will note be active before November 2018.
- [REC] Visual Studio Code is the strongly recommended development environment for this course. It is a free and open-source IDE available for all major operating systems. It was originally designed to support node.js programmers (a server-side JavaScript framework we use in this class), but now has extensions for many programming languages. Best of all, Visual Studio Code itself is written in JavaScript! It has integrated source control with
gitsupport out of the box - making it easy to program in pairs. VS Code also offers many extensions (see a guide of how to browse and install them here), we recommend the following:- ESLint, the most popular linting utility for JavaScript (a linter is a tool that analyzes source code to flag potentially poor code such as unused variables) - use it to improve your code;
- Bracket Pair Colorizer does what the name suggests;
- Quokka.js - a great tool to try out JavaScript snippets without hassle;
- VS Live Share - a collaborative real-time coding extension (especially useful if a student team works mostly remotely);
- Material Icon Theme to make finding the file you are after in your app directory a bit easier;
- finally, a good theme for your IDE to make coding more enjoyable is also not a bad idea; Dracula is a popular one. If you want to pick based on visuals, head over to https://vscodethemes.com/.
- [REQ] node.js
- [REQ] Two modern Web browsers such as Chrome, Firefox, Edge, ...
- [REC] Browser developer tools ... those come built into all modern browsers; be sure to make yourself familiar with them. For Firefox, you can find an elaborate description of the developer tools at MDN.
If you are new to team programming, and want to use VSC's features efficiently, read our guide. While it is beyond the scope of this course to introduce tools like git in detail, we provide you with enough information to get started. You will learn more about these tools in later courses.
- MDN: Mozilla's resource site for developers.
- Google's Web Fundamentals are similar to MDN in spirit.
- Codepen showcases many front-end experiments; if you are looking what is possible with CSS, this is the place for you.
- Course grade:
- 40% midterm (covers all Web technology lectures)
- 40% final exam (covers all database technology lectures)
- 20% assignments
- Requirements: to pass, the overall grade must be 5.8 or higher AND the midterm grade must be at least a 5 AND the final exam grade must be at least a 5 in accordance with TU Delft's exam regulations.
- Assignments are done in pairs of two students and are graded by student assistants in a binary manner (pass or fail). There are six assignments in total, three cover Web programming topics and three cover database topics.
- We have two assessment weeks: one before Christmas and one at the end of January. In the December assessment week all three Web assignments are assessed in a single session; in the January assessment week all three database assignments are assessed in a single session. Each session can yield anything between 3x pass and 3x no-pass.
- Week 2.1: (Lecture L1) HTTP and (L2) HTML5
- Week 2.2: (L3) JavaScript and (L4) node.js
- Week 2.3: (L5) CSS and (L6) node.js (advanced topics)
- Week 2.4: (L7) Cookies & sessions and (L8) Web security
- Week 2.5: midterm on December 13 (the midterm only covers Web technology topics)
- Week 2.6: DB topics
- Week 2.7: DB topics
- Week 2.8: DB topics
- Week 2.9: DB topics
- Week 2.10: no lectures this week; final exam on February 1 (the final exam only covers DB topics)
There are six assignments in total.
The first three assignments cover Web technology topics.
If you are new to team programming, and want to use VSC's features efficiently, read our guide. While it is beyond the scope of this course to introduce tools like git in detail, we provide you with enough information to get started. You will learn more about these tools in later courses.
A demo board game app (a word guesser) is available as well. If you are stuck on how to go about implementing something, the source code of this app can help you to get unstuck. Is has been implemented along the lines of the assignments.
The demo app, just as listed in this year's board game project, consists of two screens, a splash screen:
and a game screen:
Students who do not have a lot of prior knowledge often struggle to get started. Here is a list of useful interactive exercises and how they match up with each lecture. Each of these exercises is small, taking just a few minutes (sometimes less than a minute) to solve.
This is work in progress, lectures in a good draft status for 2018/19 are bolded. The transcripts are an 2018/19 addition, the lectures slides are currently all from 2017/18.
-
Lecture 1 covers HTTP (2018/19 transcript, 2017/18 slides)
- Topics: HTTP 1.1 request/response message, important HTTP headers, Web caches, HTTP methods, telnet, IP addresses, polling, WebSockets
- Required readings: none
- Recommended readings:
- Chapters 1, 2 and 3 of HTTP: The Definite Guide (O'REILLY 2002)
- MDN overview of HTTP
- Developer tools overview of your favourite Web browser (e.g. Firefox or Chrome)
- A brief history of HTTP
- Browser fingerprinting showcases how seemingly innocuous data can identify users
- A crash course on http and DNS by Mozilla (among other things)
-
Lecture 2 covers Web design and HTML5 (2018/19 transcript, 2017/18 slides)
- Topics: Web sites vs. Web applications, Electron, Web design basics, usability testing, HTML5 history, Web standards, HTML forms, AppCache
- Required readings:
- Chapter 2 of the Web course book
- Introduction to HTML forms (ignore the section on Basic form styling, we will cover CSS in a later lecture) and Sending form data (up to and including the section on Viewing HTTP requests);
- Recommended readings:
- Chapter 3 of the Definite Guide to HTML5
- From AppCache to Service Workers
- Web Fundamentals by Google
- Running Firefox headlessly and why
- Examples of what modern Web technologies can achieve in Chrome (if you use another browser, not all examples may work as expected)
- Progressive web apps
-
Lecture 3 (2018/19 transcript, 2017/18 slides) on JavaScript (client-side): functions as first-class citizens, object creation, basic constructor, prototype-based constructor, module, WebConsole, scoping, events and the DOM
- Required readings:
- Chapter 4 of the Web course book
- Recommended activities:
- Follow the CodeSchool Try jQuery course
- Follow the CodeCademy JavaScript tutorial
- Recommended readings:
- Learning JavaScript design patterns, in particular the sections on the constructor pattern and the module pattern.
- MDN's introduction to JavaScript objects
- What the f*ck JavaScript - a list of funny and tricky JavaScript examples
- A blog post on why the dynamic nature of JavaScript makes optimization tricky
- A good blog post on why we need all those fancy tools for JavaScript development nowadays
- A very good podcast on debugging
- Blog post about recent research on JavaScript libraries
- Stanford University teaches Programming Methodologies in JavaScript
- Info on the
<script>tag - Check with Lighthouse
- Service Worker Cookbook
- Learn how to debug with Firefox devtools
- Jimmy Lin's words on JavaScript ... "So, the future is. . . JavaScript? Once we get beyond the fact that JavaScript is an undeniably shitty language on which to build an interlingual execution platform, there is at least some so-crazy-it-might-actually-work appeal to this idea."
- Another Jimmy Lin paper: using CNNs for inference in the browser with JavaScript.
- Basic algorithms and data structures knowledge still matter today
- Tooling and conventions are vital in the fast-paced world of JavaScript
- The State of JavaScript 2017
- Required readings:
-
Lecture 4 2017/18 (PDF) on node.js: history, npm, event loop (single-threaded and highly parallel), watch a file for changes (
fs), networking with node.js (net), web server creation (http), urls for routing (url), Express framework (express), JSON, Ajax- Required readings:
- Chapters 5 & 6 of the Web course book
- Recommended activities:
- learnyounode is an interactive tutorial of node.js
- how-to-npm is an interactive tutorial on the use of npm (node's package manager)
- CodeSchool has a node.js module tutorial as well; free trial available
- Recommended readings:
- A comprehensive list of node.js resources is updated by Sergey Titov
- The recommended IDE for this course is Visual Studio Code (open-source, available for all major operating systems). Here is a good overview of some of the very useful but less obvious features of VS.
- Event loop explained
- Automated testing with node
- Node.js stats of 2017
- MDN Express tutorial
- The world runs on nodejs (tweet)
- Required readings:
-
Lecture 5 2017/18 (PDF) on CSS: history, CSS3, pseudo-elements (
first-letter,after,before) and pseudo-classes (nth-child,nth-of-type,first-child,hover,enabled,not,in-range), rendering engine,contentattribute (data in CSS), CSS counters, browser-specific prefixes, element positioning (float,position,display), CSS coordinate system, CSS media queries, CSS animations and transitions- Required readings:
- Chapter 3 of the Web course book
- Recommended activities:
- Take a look at the "pens" showcased at CodePen.io; it is a good platform to see what is possible in front-end Web development
- Watch this YouTube video from CSSConf covering the long (and painful) history of CSS
- Recommended readings
- Chapters 1-4 and chapter 13 of The Book of CSS3: A developer's guide to the future of Web design by Peter Gasston (2nd edition, 2014)
- To make sense of CSS positioning, take a look here and here
- Blog post on Mozilla's CSS engine Quantum CSS
- Animate.css
- Required readings:
-
Lecture 6 2017/18 (PDF) on advanced node.js: Ajax in more detail, node.js modules (
module.exports,require), middleware, routing, regular expressions, templating with EJS- Required readings: none
- Recommended activities:
- Recommended readings:
- To learn more about ejs, take a look at its GitHub repository.
- To learn more about middleware and Express, take a look at the Express documentation.
- An overview of best practices in node.js
- Slide deck on High Performance JS in V8
- Blog post in best practices to create a node package
-
Lecture 7 2017/18 (PDF) on cookies and sessions: session vs persistent cookies, cookie fields, cookie flags/domain, cookies in Express (accessing and deleting them), evercookie, third-party cookies, client-side cookies (
document.cookie), sessions in Express (memory stores), third-party authentication (OAuth 2.0, example authentication through Twitter viapassport)- Required readings: none
- Recommended activities: none
- Recommended readings:
- Chapter 9 of Web Development with Node & Express by Ethan Brown
- Instead of cookies to recognize a user, we can also resort to the more stealthy version of browser fingerprinting
-
Lecture 8 2017/18 (PDF) on Web security: Web application threats, attack due to a lack of data validation, OS command injection, SQL injection, broken session management, cross-site scripting (stored and reflected), insecure direct object references, security misconfiguration, cross-site request forgery
- Required readings: none
- Recommended activities:
- In a "star module" two years ago, two first-year students in TI1506 implemented CrapStore, a node.js based Web app modeled after BadStore (discussed in class). Try it out if you want to test some basic Web security issues.
- Recommended readings:
- If you want to know everything there is about security, read Ross Anderson's Security Engineering book (available for free). Chapter 21 is most pertinent to the Web security lecture (warning: this is an extensive read).
- Stanford's CS155: Computer and Network Security course has a number of lectures on Web security (PDFs: here, here, here and here)
- CERN's Web security lecture contains a lot of the material covered in class
- The Open Web Application Security Project (OWASP) provides an extensive list of practical tips, best practices and further readings on the topic.
- Node.js security best practices
- Deployment of the app on Heroku and securing it with Helmet
- Scientific paper on tracking
- Capture the Flag
- Who left open the Cookie Jar?