GrC 339
Web Design + Production

 

Week 4 • CDN + SSL

GIFs via Giphy

This Week

  • Tutorial Review #2 due Sunday
  • Mockups due Sunday
  • Content delivery using networks
  • Implementing encryption
  • Lab: layout challenge

Mockups

  • Upload a single PDF
  • Use placeholders for text, images, and sample titles
  • Page titles and filename for all 3 mockups
  • Citations for all content that is not yours
  • Descriptions for interactive/obfuscated components
  • Brand guidelines (logos, typography, swatches, image considerations, and analogies)
  • Single page sites should show section mockups

Mockups • Grading

  1. Page titles + filenames (0.5 marks)
  2. Branding and color scheme included (1.5 marks)
    • Color values provided (HSL, RGB, RGBA, or Hex)
  3. Layout scheme defined (columns, and spacing) for mobile and desktop (1 mark)
  4. Three mockups provided (2 marks x 3 = 6 marks)
    • Mobile+Desktop views with dimensions in pixels
    • Quality of design: feasibility, branding, color, grid
  5. Three peer reviews (start, stop, continue)

Responsive Logos

Image: Scott Graham

You've Got A Message

It must reach everyone.

 

How?

 

Let's figure that out...

 

  • Many accessing one message
  • All at once
  • From anywhere in the world

Proposed Solutions?

The Web's Solution

  • Redundancy (lots of copies)
  • Decentralized
  • Many geographic locations
  • Load-balanced

Setup

  1. Choose a provider
  2. Create a "CNAME" DNS record
    cdn.domain.com > accounts241.akamai.com
  3. Upload static assets (images, CSS, JS)
  4. Update links to cdn.domain.com

 

TTL = Time To Live (how long until asset expires)

Caching

  • TTL timestamp for any provided asset
  • Default is 12-24 hours (set in seconds)
  • Specifies how long it lasts
  • Expiry = browser should download again
  • Caching at browser, host, DNS, CDN levels
  • Downside: cached assets don't go away immediately

Shortlist of Providers

  • Cloudflare
  • Fastly
  • Netlify
  • Akamai
  • MaxCDN
  • AWS CloudFront
  • Microsoft Azure
  • Google Cloud

You've Got A Message

It must be secure from prying eyes.

 

How?

 

Let's figure that out...

 

  • One sender
  • One recipient
  • Many messengers

Proposed Solutions?

The Web's Solution

  • Encryption
  • Key exchange
  • Asymmetric keys (public/private)
  • 1-way locks
  • HTTPS = TLS 1.3 (Transport Layer Security)

Setup

  1. Host creates Certificate Signing Request (CSR)
  2. CSR sent to 3rd party Certificate Authority (CA)
  3. Certificate is generated
  4. Install certificate on host server
  5. Test https://domain.com
-----BEGIN CERTIFICATE REQUEST-----
MIIByjCCATMCAQAwgYkxCzAJBgNVBAYTAlVTMRMwEQYDVQQIEwpDYWxpZm9ybmlh
MRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRMwEQYDVQQKEwpHb29nbGUgSW5jMR8w
HQYDVQQLExZJbmZvcm1hdGlvbiBUZWNobm9sb2d5MRcwFQYDVQQDEw53d3cuZ29v
Z2xlLmNvbTCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEApZtYJCHJ4VpVXHfV
IlstQTlO4qC03hjX+ZkPyvdYd1Q4+qbAeTwXmCUKYHThVRd5aXSqlPzyIBwieMZr
WFlRQddZ1IzXAlVRDWwAo60KecqeAXnnUK+5fXoTI/UgWshre8tJ+x/TMHaQKR/J
cIWPhqaQhsJuzZbvAdGA80BLxdMCAwEAAaAAMA0GCSqGSIb3DQEBBQUAA4GBAIhl
4PvFq+e7ipARgI5ZM+GZx6mpCz44DTo0JkwfRDf+BtrsaC0q68eTf2XhYOsq4fkH
Q0uA0aVog3f5iJxCa3Hp5gxbJQ6zV6kJ0TEsuaaOhEko9sdpCoPOnRBm2i/XRD2D
6iNh8f8z0ShGsFqjDgFHyF3o+lUyj+UC6H1QW7bn
-----END CERTIFICATE REQUEST-----

Sample CSR

Leveraging a CDN

Pros & Cons

  • High availability
  • Optimized code (minified)
  • Versioning
  • Caching
  • Speed
  • No files to manage
  • Analytics
  • Downtime breaks things
  • Can't make edits
  • Combining files not possible
  • More to manage

Example: Using a CDN

cdnjs.com

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GrC 339 - Week 4</title>
  <!-- Link the week 4 stylesheet -->
  <link rel="stylesheet" href="week4.css">
  <!-- Include PrettyPhoto -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css"
        integrity="sha512-aB3UdGCt+QZdSlPCgDsJBJ+JytRb8oq/cdMEpLTaypINSyom0h5vcw2HsF1m0eZtWsetJllPtQOfCPM9UrdKYw=="
        crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js"
          integrity="sha512-IB7NSySDRedVEsYsOVuzN5O5jwRjV2ewVVmkDFIgE0yNu11GreBCOMv07i7hlQck41T+sTXSL05/cG+De4cZDw=="
          crossorigin="anonymous"></script>
</head>
<body>
  <!-- yadda yadda -->
</body>
</html>

Web Technologies

Frontend vs Backend

Why the separation?

  • Code is written with purpose
  • Form ∝ Function
  • HTML/CSS not meant for data processing
  • JavaScript:
    • modifies browser behavior
    • adds interaction
  • Send the user only what they need

Frontend

  • HTML
  • CSS
  • JavaScript

 

Client-side: processed by your browser

Backend

  1. Operating System: Linux, Windows, MacOS
  2. Web server: Apache, Nginx, Lighttpd, IIS, Tomcat
  3. Scripting language: JavaScript, PHP, Go, Java, Python
  4. Database: SQL, MongoDB, GraphQL

 

Server-side: processed by the server

Server Stacks

  • LAMP: Linux, Apache, MySQL, PHP
  • MERN: MongoDB, ExpressJS, ReactJS, NodeJS
  • MEAN: MongoDB, ExpressJS, Angular, NodeJS
  • RoR: Ruby on Rails
  • Django: Python-based stack

 

Server-side: processed by the server

For 339

{
  "arrayOfProducts": [
    {
      "imgUrl": "https://guesseu.scene7.com/is/image/GuessEU/M63H24W7JF0-L302-ALTGHOST?wid=1500&fmt=jpeg&qlt=80&op_sharpen=0&op_usm=1.0,1.0,5,0&iccEmbed=0",
      "name": "CHECK PRINT SHIRT",
      "price": 110
    },
    {
      "imgUrl": "https://guesseu.scene7.com/is/image/GuessEU/FLGLO4FAL12-BEIBR?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
      "name": "GLORIA HIGH LOGO SNEAKER",
      "price": 91
    },
    {
      "imgUrl": "https://guesseu.scene7.com/is/image/GuessEU/HWVG6216060-TAN?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
      "name": "CATE RIGID BAG",
      "price": 94.5
    },
    {
      "imgUrl": "http://guesseu.scene7.com/is/image/GuessEU/WC0001FMSWC-G5?wid=520&fmt=jpeg&qlt=80&op_sharpen=0&op_usm=1.0,1.0,5,0&iccEmbed=0",
      "name": "GUESS CONNECT WATCH",
      "price": 438.9
    },
    {
      "imgUrl": "https://guesseu.scene7.com/is/image/GuessEU/AW6308VIS03-SAP?wid=700&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;op_usm=1.0,1.0,5,0&amp;iccEmbed=0",
      "name": "'70s RETRO GLAM KEFIAH",
      "price": 20
    }
  ]
}

GRC339 Week 4

By Am Sagarwala

GRC339 Week 4

Content Delivery Networks (CDNs) + Secure Socket Layer (SSL)

  • 319

More from Am Sagarwala