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

Preprocessing

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.