There are two tutorials each week during which students
can work on their weekly assignment.
The idea is that we will briefly discuss the assignment
at the beginning of the first tutorial and then students
can use tutorial time to solve it and have it graded by
the end of the second tutorial.
The grading for the assignments will be done in class, so students are expected to present their results to the TA before the end of the second tutorial. Each assignment will yield a maximum of 2 points.
This assignment is intended to get you started with the distributed revision control system Git and the hosted environment GitHub. Git is installed on the department's Linux servers and is freely available - you can do this assignment either on a department server or on your own machine.
git config --global to set your name and email for your local Git environment.
By setting the config property
git output will be more colourful.
Now sign up at GitHub for free,
generate SSH keys,
and make sure you can connect.
Send Marian an email
with your GitHub
account so that he can add you as a collaborator to the repository,
which allows you to push your changes to the repository.
Clone the remote repository
to your local environment using the
git clone command.
If you are a collaborator, you find a read-and-writable Git URL on the repository page.
Run the server, open it in the browser, and inspect the code.
For this assignment you add another Hello World example in a different (human) language.
In order to work on this new feature
create a new local branch with the name of the language you intend to add
git branch command.
Switch to the new branch using
Choose the language you want to add from the
issues page on GitHub
by adding a comment with your intention to add this feature.
To add your language you need to modify
and create a file in the
For the change in
please follow the example for English.
Add and commit these changes locally using
git add and
For the commit description use expressive language and include
a reference to the issue number you are addressing by
Closes GH-n, with n referring to the issue number you chose.
git status to review which files are tracked, modified, and untracked, and
git diff to review the changes since the last commit.
After committing you can review previous commits using
Once you are happy with your changes and they are all committed,
you can merge the new language branch with your master branch.
To do this you need to switch back to master first with
and then use
git merge with the new language branch name.
Before you push your changes to the shared repository,
make sure that the changes that were pushed to origin by your collaborators
are also in your local repository by issuing a
Depending on the nature of the remote changes, this step may require you
to manually merge certain remote changes with your local ones,
After you pulled the latest commits from the shared repository,
you can push your changes with
You may have to go back to step 6), if more remote changes occurred in the meantime.
In this assignment you create three simple web pages using solely HTML (no CSS styling). Extend the web server from Assignment 2 so that it can also serve static files. The web pages are simple mock-ups for a civic community web site. Make sure the pages are valid HTML using the W3C Markup Validation Service. For each page, replicate the appearance of the corresponding screenshots.
displays a list of issues, two levels of headings, two links, and a simple login form
with the corresponding input types for plain text and passwords.
Add corresponding links to the other two pages
for one of the issues in the list and the "Add New Issue" heading.
An issue page
features a heading, image, paragraph, and a section for adding a comment.
Make sure your server can also provide the image.
The page for creating a new issue
contains a heading and a form with multiple fields and submit button.
When demonstrating your solution in the tutorial, you will be asked to
run and explain your
show the markup of one of the pages,
and that their HTML markup is valid.
The idea of this assignment is to learn how to save form data into a database.
from Assignment 4 as the basis.
You have to extend the server to handle POST requests and store
the submitted data into a database.
You can omit handling uploaded images.
Use SQLite as the database management system, it is installed on the department servers
and is also freely available.
In order to interface with SQLite use the
that is installed on the department server csc for you, so that you
can include it with
var sqlite = require("sqlite");
To use node-sqlite on your computer you can compile and install it using node-waf or npm.
You can choose the way you create the database and table, for example,
server.js using the
or the sqlite3 console program.
Either way make sure that you not only capture all the fields of the form (except the image),
but also include a unique id as the primary key.
Make sure your form in
specifies POST as the method and an action
server.js uses to identify the POST request
submitted with the form.
end events of the request
to put together the form data
and parse it using the
Save the data into the database table you created previously
using the node-sqlite module.
When the data is saved, the browser should be redirected to the form.
When showing your solution in the tutorial, you will be asked to demonstrate submitting a form,
display the table contents using sqlite3,
and explain your changes to
to change the content of a page via the browser's Document Object Model (DOM),
associate events with page elements, and issue Ajax requests.
The idea behind the assignment is showing
live Twitter streams for three search terms: 'egypt', 'libya', and 'iran'.
The page should allow the viewer to switch between
these updating tweet lists interactively.
When clicking on one of the terms, the corresponding list of tweets
should appear showing each tweet's author, text, time, and user image.
Each list of tweets should update every 10 seconds.
You can use this page
as the basis for your solution.
Use jQuery's getJSON
method to issue GET requests from the browser to
Twitter's search API.
As this is going to be a cross-domain request,
it is necessary to use the
by specifying a callback parameter.
jQuery will transparently handle JSONP when the callback in the URL is
To get only the newest tweets you can use
in the Twitter response from the initial request.
In order to continuously update the tweet lists,
you can set a delay of 10 seconds with
whenever the corresponding ajax call is finished.
Be mindful with the frequency of API calls - you don't want to be blocked from Twitter.
When receiving the response from Twitter,
you need to add the tweets to the corresponding tweet list.
If you want to see in a better format how the Twitter response is structured,
check out Chris Nielsen's JSON
Use the markup for the tweets from the
To add content to a DOM element, you need to select the corresponding list
with a element+class selector, for example,
$("ul.egypt")..., and then
use a modification method, such as
which inserts html at the beginning of the matched element(s).
Clicking on one search item in the searches list should result
in only having the corresponding tweet list shown.
method to bind the click event to the search terms.
In order to hide the lists that are not corresponding with the current search term
you could, for example select the three tweet lists
and exclude the current list from the selection with the
Think about how to provide a smooth transition between hiding
the current list and showing the new list.
The currently active search term in the searches list should
have the class 'active' which gives it a black background.
to add and remove classes from elements.
To show your solution, you will be asked to demonstrate your page and explain your source code.
This week is intended to improve your Git skills,
with regard to contributing your own code to a shared repository
as well as reviewing and merging someone else's contribution.
You may want to review the help page on GitHub on pull requests
and the Git Reference website.
As an example, we will be creating a show case page of jQuery's
DOM event and manipulation capabilities.
All your changes will be in the same file
In other words, it is going to be a long web page
demonstrating what is possible in terms of
client-side event logic.
Make sure you use feature branches for your changes and the review. Leave your local master branch for keeping in sync with the mainline.
Fork this assignment's GitHub repository and clone it within your local Git environment. This will set your fork on GitHub as a remote named 'origin'. Before you do any changes, create a feature branch, from which you will do your code changes.
You decide what kind of feature you implement -
the only constraint is to use at least one of jQuery's
event methods and one of its
Try to come up with something unique.
Add page elements for your feature only to a
with your GitHub account name as the
and 'demo' as the div's
into the corresponding
In the latter case, please, put your username in front of it in a comment.
Once you are happy with your changes, commit and push them from your local feature branch to a feature branch on your fork on GitHub. Important: in order to use pull requests, do not push these changes to the shared repository. Then issue a pull request on GitHub from your feature branch. Find another student in the tutorial to review and merge your code.
Peer up with someone else to review their code
and push it into the shared repository.
To do this, go to the pull requests
on GitHub and announce that you are going to review it.
Then pull in the changes from that user into a separate branch
of your local Git environment.
Create the separate branch from your master (not your own feature branch).
Inspect the code and the change by
comparing the review branch with your up-to-date master:
git diff master..review (assuming the branch 'master' is in sync with the mainline
and the branch 'review' is the one you created for the review).
This will give you a sense if something is going to be deleted
that should not.
If you are satisfied, merge from the review branch with your local master. If the merge causes conflicts, try to resolve them or ask the contributor to update their repository and code. If the merge worked out, switch to master, merge the review branch, and push the changes form your master to the master branch of the mainline. You might have to add the mainline as a remote.
When you're all done, please, demonstrate both your own contribution and the review.
In this week's assignment you will use HTTP cookies to distinguish between new and returning visits to a simple web site running on Node. Visitors should also be able to remove the cookie on the site. There are essentially three types of visits, first time, returning, and leaving (see screenshots).
For, the initial request, the server should return a welcome page
with a cookie as an HTTP header.
To set the cookie
of Node's response object.
Note: Browsers often automatically
ask for a favicon
of a website - to not count this as a request,
check the path of the request.
If the cookie has been sent with the HTTP request,
display a different message greeting the returning visitor.
Include a link for removing the cookie
pointing to another path (e.g.,
The third type of request can be distinguished from the other two requests
using the url of the request (see above).
To have the cookie removed from the visitor's browser,
the server needs to return a cookie with an
date/time string of the past.
To show your solution, you will be asked to demonstrate your web page and explain your source code.
This week, you'll practice using Cascading Style Sheets (CSS)
to specify the presentation of an HTML page.
To do this you need to create two style sheets:
one that replicates a given design,
and another one with your own unique style.
You will use this HTML file
as the basis, which you cannot change.
The idea is that you can only change the presentation through the CSS files.
There are many CSS resources on the Web, for example,
the Working Draft for CSS 2.1
and also tutorials and a reference on
Make sure the style sheets are valid CSS 2.1 using
W3C's CSS Validator.
Create a style sheet
that mimics the layout and typography as depicted in this
To achieve this, you need to specify style properties for at least the body,
headings, table of contents, and links.
Create your own unique style sheet for the given page. As an inspiration, what one can achieve with CSS, check out css Zen Garden. Besides creating another valid style sheet, the only requirement is to use type, descendant, class, and id selectors (at least one of each) and style properties specifying at least typography, positioning, and colours of elements.
To demo show both of your designs, the style sheets, and that they are valid.
This week's assignment - the last assignment for this course! - is about creating forms with HTML5. You can reuse your solution for Assignment 5, but you don't need to save data into a database. The general idea is to use the new input types and attributes, and simply output the form data into the console on the server. Refer to the Web Forms page of the Dive into HTML5 site for a good overview.
It is up to you what kind of form you create.
Simply pick a scenario and
include a range of input types and attributes.
For the input types include at least one input element
for each of the following:
email and web addresses, numbers, slider, dates, and search queries.
And incorporate the following attributes where it makes sense:
autofocus, placeholder, max, min, step, and required.
To demo, please, present your form, submit some data, explain your source, and show that it's valid.