CSE1500
W e b   T e c h n o l o g y
The materials were last updated in 2022. They will not be updated going forward.

Overview of interactive web programming exercises

One of the issues novice web engineers face is the deluge of materials that are out there on the web. It is easy to be overwhelmed, not just by the sheer amount of materials, but also the fast pace of new standards, new frameworks and new languages. In this course, we only have a few weeks to teach you the basics of web programming. For this reason, below we have listed a number of interactive exercises from a single source: nodeschool.io. These exercise bundles are themselves implemented as Node.js packages! So, you will use node to learn node!

Nodeschool offers a long list of self-guided tutorials and exercises; we have matched them up to our lectures. A ★ indicates that this concept is taught in class, a ☆ indicates that this is useful knowledge but not required. If a row has no mark at all, then this exercise can safely be skipped.

A nice side effect of the nodeschool.io exercises is the fact that they all require you to use the terminal - in itself a useful exercise.

These are largely introductory exercises, each one takes no longer than a few minutes to read up upon and solve. They will help you to get started if you have never programmed in JavaScript and/or Node.js before this course. They do not only introduce language features, but also how to use the node package manger npm and how to debug Node.js programs.

Note: This is completely optional! We do not require you to go through these exercises.

Where to start

  1. Make sure to have node and npm installed.
  2. Access the GitHub repositories linked in the table.
  3. Install each package as described in the GitHub README, e.g. npm install --global javascripting or npm install learnyounode. In the latter case (no --global option) the package will be installed in the current directory under node_modules. If you can choose, stick to the global installation of the package as described in the READMEs, as then you can directly follow the instructions in the respective repository and simply start the workshop with the command javascripting or learnyounode. If you cannot for some reason globally install the packages, your command will look something like this node node_modules/javascripting/bin/javascripting.
  4. Run through the workshop exercises!
                 
    HTTP HTML JS Node CSS Node2 Sessions
learnyouhtml all exercises   ★          
javascripting all exercises     ★        
learnyounode hello world       ★      
  baby steps       ★      
  my first I/O!       ★      
  my first async I/O!       ★      
  filtered ls       ★      
  make it modular           ★  
  HTTP client              
  HTTP collect              
  juggling async              
  time server       ★      
  HTTP file server       ★      
  HTTP uppercaserer              
  HTTP json api server       ★      
                 
how-to-npm install npm       ★      
  dev environment       ☆      
  login       ★      
  start a project       ★      
  install a module       ★      
  listing dependencies       ★      
  npm test       ☆      
  package niceties              
  publish              
  version              
  publish again              
  dist tag              
  dist tag removal              
  outdated              
  update              
  rm              
  finale              
                 
functional-javascript hello world     ★        
  higher order functions     ★        
  basic: map       ★      
  basic: filter       ★      
  basic: every some       ★      
  basic: reduce       ★      
  basic: recursion              
  basic: call              
  partial app. without bind              
  partial app. with bind              
  implement map with reduce       ☆      
  function spies     ★        
  blocking event loop     ★        
  trampoline     ★        
  async loops              
  recursion              
  currying     ★        
  function call              
                 
expressworks hello world       ★      
  static       ★      
  pug           ★  
  good old form           ★  
  stylus css              
  param pam pam           ★  
  What’s in query       ★      
  json me       ★      
                 
count-to-6 hello es6     ☆        
  template strings     ★        
  arrow functions, part 1     ★        
  arrow functions and this     ☆        
  destructuring     ☆        
  spread     ☆        
  rest     ☆        
  default arguments, part 1     ☆        
  default arguments, part 2     ☆        
  tagged template strings     ☆        
                 
currying-workshopper identity     ★        
  binary     ★        
  delay invocation     ★        
  long_delay_invocation     ★        
  call and apply     ★        
  curry function     ★        
                 
:bike: :bike: :bike: