Lecture 13.1 (Tuesday, May 18)

  • 2 more weeks
  • P4 due today, A3 in one week
  • Quiz 5 end of next week
    • Remember I drop one quiz

Last Week

We talked about:

  • SocketIO, allowing bidirectional communication between browser and server
  • Uploading files

Remember, file uploads have two parts:

  • enctype="multipart/form-data" (and the method must be "POST")
  • They show up on the server in request.files, as FileStorage objects

You grab the bytes, or you save the file somewhere.

Other Questions


More Interaction

I've made an example game that only supports two players on the same computer, Tic-Tac-Toe.

Let's walk through its code and how it works!

Possible extensions:

  • Add an AI
  • Support networked multiplayer support with SocketIO


So far, we have used raw CSS, JavaScript, etc.

It's useful in practice to use preprocessors. These can do a number of things:

  • Translate more convenient versions of our languages into ones that the browser can understand (e.g. the SASS compiler that compiles SCSS, a superset of CSS, to plain CSS; and JavaScript transpilers that convert ES6 to older JavaScript that more browsers can execute).
  • Check our code for common problems (linters, such as jshint or eslint for JavaScript, csslint for CSS, and HTML validators)
  • Compress and obfuscate our code, to decrease the network traffic and make it (slightly) harder to reverse-engineer (minification).

I will demo some of these on the Tic-Tac-Toe example:

  • minification with uglifyjs2, clean-css, and html-minifier
  • linting with jshint

We can also do other useful things:

  • concatenate all JS together into a single file (decrease network load)
  • same for CSS

Most of these tools these days are built in JavaScript and run with Node.js.

Formerly, there was a more diverse array of platforms: Ruby, Java, etc. But now Node is most of what you need.

They can be installed with Node's package manager npm:

$ npm install -g uglify-js clean-css html-minifier jshint

This will install them all globally.