IAT-339: 11 Turning it to 11

IAT-339: 11 Turning it to 11 — A slide deck

Turning it to 11

Cranking the amp

Common P02 problems

Design

  • Responsiveness: Things seem to break as we resize the browser window.
  • Interaction cues: I look at things (or) hover on things and am unsure if they are clickable or not.

Code

  • Missing <html lang="en">
  • Missing <meta name="viewport" content="width=device-width, initial-scale=1">
  • Going from h1 to h3 (or similar)
  • Missing <img src="image.jpg" alt="Description of image as if we did not see it">
  • <label> not connected to <input>

Page Speed Optimization

To get our pages to render as efficiently as possible, we need to keep in mind a couple of things:

  • Render blocking
  • Compression
  • Caching
  • Critical rendering path

Render Blocking

Anything that appears in the head of our HTML must be loaded before the page can start to render.

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/grids.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/jquery.ui.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>

Preprocessing, Compression & Request Reduction

"Minifying" your files

Using tools such as preprocessing we can remove all the extra spaces and comments in our files and deploy them online. We can also use such tools to to reduce requests.

/* We can set up preprocessing to combine files */

@import "main.scss";
@import "grids.scss";
@import "animations.scss";

Compression

We can compress images and all the extra spaces out of our text files, but we can also compress our files for transfer as well. Using a server-side file (on Apache servers) called .htaccess, we can set some specifications as to how our page should use compression.

# An .htaccess file allows us to control server-side redirection and delivery

<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
</IfModule>

Caching

To enable caching of files, we can again use our .htaccess file to tell the user's browser to cache content accordingly.

# Enabling caching in .htaccess

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType text/css "access 1 week"
ExpiresDefault "access 1 day"
</IfModule>

Critical Render Path

If we are getting into extensive page-speed optimization, we begin considering what is absolutely necessary for the user to get first (when they access the page), as opposed to what can wait until later.

<head>
<style>
<!-- Here we put in the 'critical' CSS for the page -->
</style>
</head>

<body>
<script src="js/loadCSS.js">
// Here we load non-critical CSS
</script>
</body>

Lazyloading

JavaScript:

// We need to collect ourselves all the elements we have flagged for 'lazy loading':
var lazyloads = document.getElementsByClassName("lazyload");

// Then select one based on a action (i.e. a click, or a scroll):
otherElement.addEventListener("click", function() {
var element = lazyloads[0];
});

// Then swap out attributes:
var img = element.getAttribute("data-src");
element.setAttribute("src", img);

HTML:

<img src="blank.png" data-src="actual-image.jpg" class="lazyload" alt="...">
<noscript><img src="actual-image.jpg" alt="..."></noscript>
What Web Can Do Today

Build your own Apps!

With Electron you can make your own apps using your knowledge of HTML, CSS, and JavaScript.

You should ask yourself...

Is the Web HTTP/2 Yet?

Webbing Without 339

For moving beyond this course, some suggested things 'to-do':

  1. Read
  2. Break
  3. Build
  4. Interact

Read

Read often, and carefully.

A Book Apart

Break Things

Dev Tools is Your Bestest Friend

Who doesn't want their website with a kitten background? Let's make it happen.

Learn How Others Do It

Avoid Absolutes

"What are you using ___________ for? ____________ is the way of the web now."
Web Devs Say

I need to create a page that displays the latest activity from the users... I was thinking maybe using jQuery to fetch and display the data?

- Oh my god no, no one uses jQuery anymore. You should try learning React, it’s 2016.

How it Feels to Learn JS in 2016.

Build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build, build... then keep building

Failure

  1. Fail
  2. Fail again
  3. Fail betterest

Perfection

"Have no fear of perfection, you'll never reach it"
Salvador Dali

???

Engage with the Community

Next Week

In lecture next week we will be doing your final reading quiz and debugging. Please make sure to bring your portfolio websites as complete as possible and ready-to-go for lecture next week.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna
1/1