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.