/fork-web-and-database

Overview of CSE1500 (Web technology part)

Primary LanguageJavaScript

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. ~900 students follow the course, the course setup reflects that.

The database materials are not included here!

Table of Contents

Responsible instructors

The responsible instructors are Associate Professors Claudia Hauff and Alessandro Bozzon.

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 about 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

The latest stable version of Node.js. 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 assessment is interview-based. The assessment session can yield anything between 3x pass and 3x no-pass. The grading is conducted per student.

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

Until (and including) the 2017/18 edition, the web and database (DB) topics were interwoven (usually 1 lecture of web and 1 lecture of DB topics per week) and thus for most years, the midterm and final exams also contain questions on both topics.

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 exam material.

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 lasts 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 assessment rubric is available here.

Demo application

A demo board game application (a word guesser) is available as well. It has 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

Tutorial sessions

We offer 5 optional tutorial sessions that are intended for students without prior programming experience - 3 covering web topics and 2 covering database topics. Each tutorial demonstrates basic concepts through a set of short interactive exercises. These tutorials are meant to reinforce lecture content, they do not introduce novel concepts.

The tutorials 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: Querying in SQL II
  • Week 2.9: MongoDB / Neo4J

Each tutorial is given three times a week. 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. All three web assignments have been released at the start of the course, you can start working on them immediately.

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

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 and lecture slides).

Lecture 4

This lecture covers Node.js (transcript and lecture slides).

Lecture 5

This lecture covers CSS (transcript and lecture slides).

Lecture 6

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

Lecture 7

This lecture covers cookies and sessions (transcript and lecture slides).

Lecture 8

This lecture covers web security topics (transcript and lecture slides).