Overview of CSE1500 (Web technology part)
Switch branches/tags
Nothing to show
Clone or download
Latest commit 5f1d9d4 Nov 16, 2018

README.md

CSE1500: Web and Database Technology

Build Status

The Web technology materials and resources of the 2018/19 Web and Database Technology course at TU Delft are listed here. We have ~900 students in the course; the course setup reflects that.

The database materials are not included here!

Table of Content

Contact

The responsible instructors (Associate Professors Claudia Hauff and Alessandro Bozzon) can be reached at cse1500-ewi[at]tudelft.nl.

Web technology course book

The course book for the web technology part is Learning Web App Development by Semmy Purewal. This book covers HTML, CSS, JavaScript and Node.js/Express - exactly the technologies we cover in this course. The book is written for learners without any prior knowledge in these technologies.

Web course book

Tooling

Recommended

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 git support out of the box - making it easy to program in pairs. It als has a Live Share extension, which allows you to code in pairs without the need for tools like git.

Visual Studio Code

VS Code offers many extensions. You can find a guide on how to browse and install them here. A list with all kinds of "delightful" extensions can be found here. Since this may be a bit overwhelming, we made a short list of the extensions we recommend to install for this course:

  • 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/.

If you need to be convinced abut why Visual Studio Code is a great IDE to use, check out this podcast by Wes Bos and Scott Tolinski on this very topic.

Browser developer tools: they are built into all modern browsers; familiarize yourself with the developer tools of your favorite browser. For Firefox (my personal choice), 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.

Required

Node.js, version 8.12 or higher (i.e. the latest stable one). If you are a Windows user, you may want to use the virtual machine from the Q1 2018/19 Computer Organisation course and install Node.js yourself; the student password is pwd and the root password (for installing new software etc.) is cse&(]] (yes! those are not typos, this is the password). If you follow this course as a non-first year student, check out this information page on the virtual machine.

Two modern web browsers such as Chrome, Firefox, Edge, etc. to test your project code across browser implementations.

Telnet (for Assignment 1): if you use a Linux derivative (e.g. Ubuntu, older versions of Mac OS), open a terminal and you are good to go; for new Mac OS versions you may need to install telnet yourself. If you are a Windows user please use the Windows Subsystem for Linux or use the Virtual Machine provided to you in Q1. You can also use Windows alternatives to telnet such as Putty.

Course grading

grading

Passing requirements: 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. While the assignments together make up only 20% of the final grade and are not required, we strongly recommend to tackle the assignments - they cover a lot of exam materials in a practical manner!

We have two assessment moments: one for the Web technology assignments and one for the Database technology assignments. The three Web assignments are assessed in a single session of your team's own choosing: you can book a timeslot for the Web assessment in weeks 2.3, 2.4, 2.5 or 2.6. The assessment is interview-based. The assessment session can yield anything between 3x pass and 3x no-pass. The grading is conducted per student, i.e. you and your partner may receive different pass/no-pass results.

The table below shows how the number of passes (maximum 6: 3x web and 3x database) are converted to the assignment grade:

Number of passes Grade
6 10.0
5 8.3
4 6.7
3 5.0
2 3.3
1 1.7
0 0.0

Course topics

Week Monday Thursday Friday
2.1 HTTP HTML5 ---
2.2 JavaScript Node.js ---
2.3 CSS Node.js (advanced) ---
2.4 Cookies and sessions Web security ---
2.5 --- Midterm exam ---
2.6 Introduction to databases Data models ---
2.7 RDBMS: SQL DML 1 RDBMS: SQL DML 2 ---
2.8 RDBMS: SQL DDL NoSQL: key-value stores ---
2.9 NoSQL: document stores NoSQL: graph stores ---
2.10 --- --- Final exam

Sample exams

In the past years, the web and database (DB) topics were interwoven (usually 1 lecture of web and 1 lecture of DB topics per week) and thus the existing midterm and final exams also contain questions on both topics. To study for the midterm and/or final this year, make sure to look at the midterm and final exams from the past together to find examples of all Web/DB question types.

Exam topics are all topics covered in the lectures and the required readings. Content of the recommended activitivies/readings that goes beyond what is covered in the lectures/course book is not tested in the exam.

Assignments

There are six assignments in total.

Assignments are worked on in teams of 2 students. We do not allow larger teams; we do not allow teams of 1.

The first three assignments cover web technology topics.

Assessment: the three web assignments are assessed in a single interview session with a TA; the interview will last 20-30 minutes. Each of the three assignments can be passed or failed (binary judgment, there are no grade levels) on an individual basis. The team can choose an assessment timeslot during the shared lab sessions starting in week 2.3. The last week for getting assessed on the web assignments is week 2.6.

Demo application

A demo board game application (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:

splash screen

and a game screen:

splash screen

Werkcolleges

We also offer 5 optional werkcolleges (instruction lessons) that are intended for students without prior programming experience - 3 covering web topics and 2 covering database topics. Each lesson will demonstrate basic concepts through a set of short interactive exercises. These lessons are meant to reinforce lecture content, they do not introduce novel concepts.

The werkcolleges are given by Assistant Prof. Julian Urbano and Frank Mulder (teaching team CS). The following topics are covered:

  • Week 2.3: JavaScript
  • Week 2.4: Web application development in Node.js/Express
  • Week 2.5: Sample web technology exam questions
  • Week 2.7: Querying in SQL
  • Week 2.8: to be determined

Check your timetables for the concrete times! While each lecture is only given once (in the auditorium), each werkcollege is given three times a week - once for each of the three clusters. Check your timetable for your cluster's timeslot!

Shared labs

Starting in week 2.1, there will be shared labs - similar to the setup of Q1. As all three web assignments have already been released, you can start working on them immediately.

Office hours

For the web technology part, there will be two office hours per week (starting in week 2.1, ending in week 2.5). On Mondays and Thursdays, Claudia Hauff will be at the shared lab: 14:45-15:45 (Monday) and 13:45-14:45 (Thursday).

Interactive web technology exercises

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.

Twitter accounts to follow

Twitter is a great resource to hear the latest and greatest about the web stack. Here is a list of accounts we recommend to follow

Web development resources

The practical assignments of this work often require looking up Web development specifics. Two good resources, in general, for Web engineering are Mozilla's MDN portal and Google's Web Fundamentals.

MDN Google Fundamentals

Lecture material types

materials

For each lecture we provide a range of materials:

  • Required readings: most of the required readings are book chapters of the web course book. The book introduces each technology from scratch. The lectures go beyond what is covered in the book and assume that you have read the corresponding book chapter(s) before the lecture.
  • Recommended activities: activities that we think will help you get a better grasp of the different web technologies. Activities are either programming exercises or podcasts (there are some great ones out there!). Don't see those as a complete list to work through, that is impossible given the time!
  • Recommended readings: these may be tweets, blog posts or book chapters that help you understand some of the introduced concepts better; again, do not attempt to read all of the materials.
  • Relevant scientific publications: we are often asked why this kind of course is part of the computer science curriculum. Isn't this "just" programming? To showcase how web technologies are researched, we here list a number of scientific publications that contribute to our understanding of (the use of) web technologies.

If you are interested in knowing what other universities teach in terms of web technologies, take a look at this list of courses with a web focus.

Web lectures

Status update: transcripts of Lectures 1 to 8 are online. Lectures slides will be added as the course weeks progress.

Lecture 1

The lecture covers HTTP (transcript, course intro slides and lecture slides).

Lecture 2

This lecture covers web design and HTML5 (transcript and lecture slides).

Lecture 3

This lecture covers client-side JavaScript (transcript).

Lecture 4

This lecture covers Node.js (transcript).

Lecture 5

This lecture covers CSS (transcript).

Lecture 6

This lecture covers advanced Node.js concepts (transcript).

Lecture 7

This lecture covers cookies and sessions (transcript).

Lecture 8

This lecture covers web security topics (transcript).