Lecture 10.2 (March 31)

Today's agenda:

  • describe additions to animals to make the unstarring work
  • implement animations for starring
  • start deploying our code on Azure servers

Animations

One more thing: we want to indicate the action happening. So we'll replace the star with a spinner:

.star[data-state="waiting"]::after {
    /* use the 'spinner' icon */
    content: "\f110";
}
/* and make it spin */
.star[data-state="waiting"] {
    /* prefixed for compatibility */
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

Integrate all of this with our handler logic.

Add a sleep to the update-star endpoint to see it in action

Processing Files

We mentioned the prospect of processing files on Tuesday. There are a few things that are useful to do with our various assets, particularly JavaScript and CSS files:

  • Check them for potential errors or bad usage with a lint tool (jshint, csslint, eslint, etc.)
  • Obfuscate and compress (‘minimize’) them to reduce bandwidth consumption and make them slightly harder to reverse engineer
  • Perform other transformations for production deployment
    • Remove unused rules
    • Remove console.log and other debugging aids

The UglifyJS2 package is useful for doing this with JavaScript, and there are various CSS processing packages.

There are also preprocessor packages, to do things like compile a richer style language to CSS.

Deploying on the Server

A few steps:

  1. Create virtual machine
  2. Set up SSL certificate
  3. Create WSGI bridge
  4. Configure Apache to use your app

We're going to do that for Animals!