Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

# Session 14: Special Topics

Harvard Extension School
Fall 2018

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@dce.harvard.edu

### Topics

1. HTTPS
2. JavaScript Frameworks
3. Monitoring Your Site
4. Scaling Your Site
5. Web Analytics
6. Oh the Places You'll Go

slide1 slide2 slide3 slide4 slide5 slide6 slide7 slide8 slide9 slide10 slide11 slide12

- img
- img
- img
- img
- img

## HTTPS

Encryption of communication between browser and server.

SSL (outdated)
  Secure Sockets Layer
TLS
  Transport Layer Security
https
  HTTP over TLS/SSL

https connection (Chrome; American Century):

## Encryption Overview

- Plaintext
- Ciphertext
- Key
- Cryptographic Algorithm

### Symmetric Key Cryptography

### Public Key Cryptography

### Digital Signatures

### Public Key + Signature

## Identity

### Certifying Authorities (CAs) and Server Certficate

1. Generate a public/private key pair
2. Send your public key to a CA
3. CA verifies your identity and signs your public key with its own private key
4. Your signed certificate identifies you; analagous to your "passport".

Some CA Companies

- Comodo
- GeoTrust
- Verisign

## JavaScript Frameworks

- Angular JS
- Ember
- Backbone.JS
- React

## Angular Example

- Congress - Angular Example
- Congress - Angular - Files

## Monitoring Your Site

Steve Souders
High Performance Web Sites, Even Faster Sites, Web Performance Daybook Volume 2

- Content Performance
  - Synthetic vs RUM
  - Synthetic: WebPageTest (O'Reilly, "Using WebPageTest"), PageSpeed, YSlow
  - RUM: SpeedCurve, catchpoint, pingdom
- Application Performance
  - New Relic, AppDynamics, Foglight, etc.
- Servers/Infrastructure
  - Nagios, Zabbix, Sensu, statsd/graphite
- Capture (Log), Measure, Display
  median, 95th, 98th percentile.

## Scaling Your Site

- Shared to Dedicated/Private
- Bigger and Faster
  - Disk (SSD)
  - CPU
  - RAM
- Separate
- Reverse Proxy Caching Server
- More - Horizontal Scaling

### Shared to Dedicated/Private

### Bigger and Faster

### Separate Components

### Cache

### More - Horizontal Scaling

## Web Analytics

Javascript is used to collect information about the browser and request, and then it sends this information back to a server, typically as request parameters for a 1x1 pixel transparent GIF image.

- Typically run as a service

### Open Source Software

- Piwik: Open Source Web Analytics

### Services:

- Chartbeat
- Google Analytics
- WebTrends

## Google Analytics

Google Analytics

JS included on page sends information back to Google Analytics server, which tracks and builds reports.

### Example Reports

## Overview of How Google Analytics Works

#### Javascript is included on page

    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-2675499-2");
    pageTracker._initData();
    pageTracker._trackPageview();
    </script>

#### Request for image contains information

Javascript causes an image to be requested from the Google Analytics Server. Parameters sent with the image request contain information about the page loaded and about the browser capabilities.

URL of image:
`http://www.google-analytics.com/__utm.gif?utmwv=4.1&utmn=1726621737&utmhn=cscie12.dce.harvard.edu&utmcs=UTF-8&yutmsr=1680x1050&utmsc=32-bit&utmul=en-us&utmje=1&utmfl=9.0%20%20r115&utmdt=Introduction%2C%20Internet%20and%20Web%20Basics&utmhid=99327265&utmr=0&utmp=/lecture_notes/2007-08/20080130/slide1.html&utmac=UA-2675499-2&utmcc=__utma%3D261712543.446246362.1206127732.1209398731.1209569723.25%3B%2B__utmz%3D261712543.1208810203.19.10.utmcsr%3Dgoogle%7Cutmccn%3D(organic)%7Cutmcmd%3Dorganic%7Cutmctr%3Djquery%2520tabs%2520cscie12%3B`

Parameters sent (via query string):

## Oh the Places You'll Go

- Computer Science
  - CSCI E-3 Introduction to Web Programming with JavaScript
  - CSCI E-10A/B Introduction to Computer Science Using Java - I and II
  - Introduction to Programming with Python
  - CSCI E-15 Dynamic Web Applications
  - CSCI E-26 Introduction to C, Unix/Linux Programming, and Web Interfaces
  - CSCI E-32 Advanced JavaScript with Node.js and AngularJS
  - CSCI E-34 User Experience Engineering
  - CSCI E-56 Web Application Development with Groovy and Grails
  - CSCI E-65 Mobile Application Development Using Swift and iOS
- Digital Media
  - DGMD E-5 Exploring Digital Media
  - DGMD E-10 Exposing Digital Photography
  - DGMD E-20 Modern and Mobile Front-End Design I
  - DGMD E-27 Modern and Mobile Front-End Design II
  - DGMD E-23 Website Planning and Design
  - DGMD E-25 Introduction to Web Content Management Systems Site Development

Copyright © David Heitmeyer