Here’s an object:

const user = {
	firstName: 'Jack',
	lastName: 'Smith',
  	age: 30,
};

If you wanted a variable called firstName with the value of user.firstName, you could do this:

const firstName = user.firstName;

But that gets a bit verbose when you also need lastName and age:

const firstName = user.firstName;
const lastName = user.lastName;
const age = user.age;

To solve this, ES6 added destructuring assignment. So, to assign those same variables in a functionally equivalent way, you can do the following:

const { firstName, lastName, age } = user;

Much neater. But if you’ve not encountered this syntax before, it’s understandably quite confusing to see what looks like an object being used backwards to the ‘normal’ way.

Bonus tips

You can also use destructuring to ‘spread’ the remaining variables after the initial assignment into a new object:

const { age, ...rest } = object;
// rest contains { firstName: 'Jack', lastName: 'Smith' }

Finally, you can also access nested variables in child objects:

const user = {
	firstName: 'Jack',
	lastName: 'Smith',
  	age: 30,
	favouriteMeals: {
		breakfast: ['pancakes', 'yoghurt'],
		lunch: ['sandwiches']
	}
};

const { firstName, favouriteMeals: { breakfast, lunch } } = user;

This assigns the variables: firstName, breakfast, and lunch, but crucially, doesn’t assign favouriteMeals.

<link rel="stylesheet" href="/style.css?ver=20180207">

This is the most basic form of cache busting. It works well for manually created assets but it’s a pain to remember, plus it can have some issues.

2. The better URL

# .htaccess
# Version control scripts - https://adactio.com/journal/8504
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)\.([0-9]*)\.(min.js|js|css)$ $1.$3 [L]
</IfModule>

<link rel="stylesheet" href="/style.20180207.css">

You keep your filenames clean but perform a rewrite for requests so: style.20180207.css is served the file style.css. This has the benefit of looking much nicer and not having the querystring problems, but it still requires remembering to update it when you make a change. The other downside is BrowserSync gets a bit upset with it (I haven’t spent much time looking for a fix, it’s probably not a big deal).

2.5 Automating the above

You can use the last modified time to generate the timestamp. filemtime(assets/style.css) in PHP will return you a timestamp that could be appended to the link/query string:

echo '<link rel="stylesheet" href="/style.' . filemtime('style.css') . '.css">'

3. The hosting solution

As I’m a big fan of Netlify at the moment, I can’t help but recommend their setup. It’s a nice solution because: You do nothing!

They check the assets when deploying and compare them (or more specifically their ETags) to the current file. If it’s changed, they bust the cache on the file. For the user, it goes something like this:

When you ask for a file, they send the ETag in the request headers. They also set a header to tell the browser not to trust it’s own cache (which sounds a bit mad). Then when you request the page, it opens a persistent HTTP2 connectio (no new connections for subsequent requests). When it requests that earlier asset, the browser sends the ETag back to Netlify and they either return nothing if the ETag matches, or the new file with the new ETag. No style.20180207.css or style.css?v=20180207. Just clean style.css with instant cache invalidation. It’s so so good.

4. The build step

If you’re using a build step, you can perform the hash and add it to the filename on build. Here’s a Webpack example:

module.exports = {
  entry: './src/app.js',
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
}

This will create a file like /dist/app.5ec8e954e32d66dee1aa.js. More details here.

The difficult bit is then integrating it into your HTML. With Webpack, you can use the HtmlWebpackPlugin to add the <script src="app.5ec8e954e32d66dee1aa.js"></script> tag to the bottom of your HTML page – this works great if you’re using a fully integrated Webpack setup. This probably means using their dev server for local developement, not storing the compiled production files in the repo and using some form of server deployment build step to generate the production files on the server.

This is the ‘best’ solution if you’re happy to wade in with Webpack and get a full deployment setup working – which in the long term is worthwhile but in the short term sounds scary. It’s also reliant on your hosting setup being good enough too.

1. Forms

• Methods & actions
• Input types & attributes
• CSS pseudo classes on inputs

Task: Newsletter signup form

2. JS - Variables

• What is a variable
• Types of variables
• Mutable types
• Scope
• Global scope
• IIFEs
• Render function

Task: Milage calculator

3. JS - More JavaScript

• Imperative vs. Declarative
• Shorthand operators
• Ternary statements
• Module/Singleton pattern
• You might not need jQuery
• Array methods: find, findIndex, filter, map, reduce & sort

Task: Wrangling array data

4. JS - DOM

• What is the DOM
• childNodes vs. children
• HTMLCollection vs. NodeList
• addEventListener
• createElement
• innerText vs. innerHTML
• getAttribute, classlist, dataset & style
• Finding elements with querySelector & querySelectorAll
• Event delegation and bubbling

Task: TODO List

5. JS - AJAX

• Polyfill.io
• XMLHttpRequest
• jQuery
• Fetch
• Axios
• Asynchronous gotchas
• Streaming, when to not use AJAX

Task: Load more posts

6. Video

• Resonsive embedding
• Video tag attributes
• Source tag
• .webm & .webp
• Object-fit
• Fullscreen API

Task: Video player

Today’s task(s)

I’ve created a bunch of small and smallish tasks to run through. Refer back to the previous session notes, there’s nothing we haven’t covered before. The tasks are in the training repository under: /2018-01-24/index.html. If you load up that file in Sublime/Chrome and check out the script tag.

The DOM (Document Object Model) is the interface between HTML and JS. It represents the page as a tree with the ‘document’ at the top (the <html> element, and each node as a child, grandchild, great-grandchild etc…

console.log(document)

<html>
    <body>
        <p>Hi there</p>
    </body>
</html>

var document = {
    body: {
        children: [
            {
                nodeName: 'P',
                innerText: 'Hi there'
            }
        ]
    }
}

It acts very much like an object, we can even use dot-notation to access (some) children. Accessing the <body> element is a case of writing document.body.

childNodes

Each item on the tree is a node. There are several different types of node that we need to be aware of:

• Element
• Text
• Comment

Using the following HTML, we can see how JS interprets markup:

<html>
    <body>
        <!-- A hidden comment -->
        <p>123</p>
        Hi there!
    </body>
</html>

console.log(document.body.childNodes)

How many nodes will be returned in this statement?

The answer is 5:

1. Text: newline character
2. Comment: our hidden comment
3. Text: newline character
4. Element: our paragraph
5. Text: newline and ‘Hi there! and then newline’

This shows you can’t rely on childNodes returning just the HTML, or just the text. When we indent our code, we’re introducing this extra ‘content’. It’s not a problem for actually displaying the HTML in the page, but it does need to be considered when we’re reading from the DOM.

Children

console.log(document.body.children)

Let’s compare the difference using .children on the same markup. We get a HTMLCollection with one element, the paragraph. This is more useful for only dealing with HTML.

Iteration - HTMLCollection vs. NodeList

In our first example, we were returned a NodeList, in the second we got a HTMLCollection. If we console.dir them, we can see the prototyped methods & properties available to us. For HTMLCollection, the only useful property is length. With this, we can use a classic for loop to access the elements.

In a NodeList, we have access to forEach, support is good but it needs a polyfill for IE.

A nice loop that works for both is:

[].forEach.call(document.body.children, function(el) {
    console.log(el)
})

addEventListener

In jQuery, we can attach events using .on. In vanilla JS, we use .addEventListener. For a single node, we can write:

element.addEventListener('click', function() {});

For a NodeList or HTMLCollection, we need to loop through the elements and attach the event listeners individually:

[].forEach.call(document.body.children, function(el) {
    el.addEventListener('click', function() {});
})

.removeEventListener works in the same way as jQuery’s .off.

createElement

document.createElement('p') lets us create new HTML elements. Until they’re added to the DOM, they’re still virtual.

appendChild

Once we’ve created our element, we can append it into another Node with appendChild.

var el = document.createElement('p')
el.innerText = 'Abc'
document.body.appendChild(el)

removeChild

Removing a node is a bit more complicated. You have to call removeChild on the parent node. Fortunately, we can use node.parentNode to find the parent.

node.parentNode.removeChild(node)

replaceChild

.replaceChild has the same parent requirement rules as .removeChild, but we pass in two arguments, the newNode and the oldNode.

innerHTML vs. innerText

innerText will return the text of the node and it’s children. innerHTML returns the text and HTML of the node and it’s children.

<html>
    <body>
        <p>123 <b>456</b></p>
    </body>
</html>

document.body.children[0].innerText
// "123 456"
document.body.children[0].innerHTML
// "123 <b>456</b>"

Be careful when adding user generated content to the DOM. Always use escape or use innerText! If you use innerHTML, a ‘hacker’ could add a script tag to their content and it would run on your page. This is called Cross-site scripting or XSS.

getAttribute / setAttribute

To read & write attributes to a node, we can use getAttribute and setAttribute. Note that they will always return a string, so remember to cast the type when reading values back if you need to work with anything other than a string.

document.body.setAttribute('a-new-attribute', 123)
document.body.getAttribute('a-new-attribute') // '123'
// <body a-new-attribute="123"></body>

classList

Classes can be edited with setAttribute, but it’s better to use .classList as it provides much more flexibility.

el.classList.add('className')
el.classList.remove('className')
el.classList.toggle('className')
el.classList.contains('className')

dataset

Dataset operations lets you read/write to data- attributes on the HTML element.

document.body.dataset['123'] = 'abc'
// <body data-123="abc"></body>

style

element.style returns all the current CSS applied to an element. It’s object-like so you can write element.style.color to be more specific. Hyphenated properties are converted to camelCase: element.style.marginLeft. These a getters and setters.

nodeName

.nodeName provides an uppercase name of the HTML tag, not used that often, but really helpful on occasion.

Element positioning

.offsetLeft and .offsetTop provide an integer representing the offset to the nearest parent with position: relative (can be found with .offsetParent).

.offsetHeight and .offsetWidth give the height of the element including borders and padding.

element.getBoundingClientRect() gets you all these things in one go.

Finding elements

The key methods we need are .querySelector() and .querySelectorAll(). The first takes a CSS selector and returns the first matching element, the second takes a CSS selector and returns a NodeList of all matching elements. These methods are most commonly run on the document but can be run on another node for more specific and performant look ups.

We always want to ‘cache’ the lookup to minimize DOM read operations:

var ctaButton = document.querySelector('.cta-button')
ctaButton.innerText = 'Read more'
ctaButton.style.color = '#123456'

Event delegation & bubbling

Bubbling is the process of an event working it’s way up the DOM tree. For example, when you click on a <button>, you’re also clicking on all the parent elements, right up to the document. This can seem like a strange behaviour at first, but it’s really helpful. Imagine we want to alert the user every time they click on the text in the following markup:

<p>Abc, easy as <strong>123</strong></p>

Without event bubbling, we’d need to add an event on the p AND strong, as both could be clicked on. This would be a pain to keep track of. So bubbling means we only need to put the event listener on the p, and when the strong is clicked, the p event will be triggered.

We can use this to our advantage to group events and avoid putting eventListeners on multiple elements.

Task - TODO list

The classic task. Using the following markup, hook up the JS to make a todo list:

<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed" rel="stylesheet">
<style>.todo,body{padding:40px}body{background:#2962FF;margin:0;font:18px/1.5 'Barlow Condensed',sans-serif}.todo{width:100%;max-width:400px;margin:0 auto;background:#E3F2FD;border:10px solid #0D47A1}.todo input,.todo li button{background:#FFF;font:inherit}.todo form:after{content:'';display:table;clear:both}.todo [type=text]{width:calc(100% - 100px);float:left}.todo [type=submit]{width:80px;float:right}.todo input{padding:10px;display:inline-block;border:2px solid #DDD}.todo ul{padding:0}.todo li{padding:5px 0;list-style:none;margin:0}.todo li button{border:1px solid #DDD}.todo li+li{border-top:1px solid rgba(0,0,0,.2)}</style>


<div class="todo">
    <form id="addTodo">
        <input name="todo" type="text" placeholder="What would you like to do?" required>
        <input type="submit" value="+" />
    </form>

    <h2>Still to do</h2>
    <ul class="todo__incomplete">
        <li><button>&times;</button> Task 1</li>
    </ul>

    <h2>Completed</h2>
    <ul class="todo__completed">
        
    </ul>
</div>

1. When the form submits, add an item to the ‘Still to do’ list.
2. When the user click on the button, move the todo between the ‘Still to do’ and ‘Completed’ list.

Imperative vs. Declarative

In the last session we finished by making a distance calculator in vanilla JavaScript. We found that it was pretty easy to repeat ourselves. For example, when doing the initial render of the list, we wrote code to create a li element, fill it with content and add it to the list. We also wrote code to tot up the distances. The problem came when we added a form to let a user add another trip. All that code was needed again for this feature.

For the li appending feature, we wrote a helper function that added the element to the ul. As each individual route didn’t need to know about the previous data, we could do that.

For the total distance feature, we needed all the data to make the calculation so we couldn’t use an appending helper function. We needed to re-render the total each time, hence we wrote a ‘render’ function that destroyed the old data and put in new data.

For page load, we could run the helper function for each of the inital routes and call the render function once. Then for each form submittion, we called the helper function once and the render function once. We moved much of the duplication into functions (which is great), but we still have duplication for the helper function calls.

Duplication is an opportunity for errors to creep in, especially as a program expands. Say another developer came along and added a feature in a few months time that needed to add routes from a real-time database. If they didn’t realise they had to call two seperate functions to force a re-render, their could be problems.

This is an imperative programming style. This ‘programming paradigm’ is pretty common, it’s often how we start out developing simple programs. jQuery is regularly used in an imperative fashion: make this button yellow, fade this div out, change this text to say ‘hello’. We use statements to change the programs state, and we specify how the program operates.

Constrast this to the declarative paradigm where we describe the logic of the program without specifying how it should run. We can achieve this by de-coupling the inputs and outputs from the state. If the outputs always reflect the current state, we only need to worry about inputting to the state. So when our hypothetical future developer comes along, all they do is add another input to the state and the outputs will react to any changes.

Distance calculator in Vue.js

To make this clearer, I’m going to show a rewrite of our distance calculator in Vue.js, a framework that encourages you to be declarative.

JS shorthand operators

var a = 1

a++ // Eqivalent to: a = a + 1

a-- // Eqivalent to: a = a - 1

a += 2 // Eqivalent to: a = a + 2

a -= 2 // Eqivalent to: a = a - 2

var b = 'trys'
!!b // This is the boolean representation of 'b'. In this case, !!b === true

||

var c = d || 'default'

// Imagine: 
var c;
if (d) {
  c = d
} else {
  c = 'default'
}

–

This is great for falling back to defaults and is regularly used in functions for default arguments.

&&

var a = 0
var b = 1
var c = a && b // 1

// Imagine: 
var c
if (!a) {
  c = b
} else {
  c = a
}

&& can be used before function calls to check variable/function existence before making the call:

var map = false
map && renderMap(map) // renderMap doesn't get called unless 'map' is truthy

Ternary

var a = b ? c : d;

// Imagine:
var a
if (b) {
  a = c
} else {
  a = d
}

A module/singleton pattern

var Namespace = (function () {
  "use strict";
  return {
    Initialise: function () {
      Namespace.Menus();
    },

    Menus: function () {
      // Do menu things
    }

  };
}());

$(Namespace.Initialise);

Sidenote: $(fn) is equivalent to $(document).ready(fn).

You might not need jQuery…

(function(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
})(Namespace.Initialise)

Array methods

Push/pull/unshift/shift

var people = [{
	name: 'Jen',
	age: 32
}, {
	name: 'Keith',
	age: 48
}, {
	name: 'Sarah',
	age: 22
}]

find

Find the first item in the array that returns true

// First person whose name starts with a 'K'
var a = people.find(function(person) {
    if (person.name.indexOf('K') === 0) {
        return true
    } else {
        return false
    }
})

// This can be refactored down
var a = people.find(function(person) {
    if (person.name.indexOf('K') === 0) {
        return true
    }
})

// And some more
var a = people.find(function(person) {
    return person.name.indexOf('K') === 0)
})

// In ES2015, we can get even shorter
var a = people.find(person => person.name.indexOf('K') === 0)

findIndex

Same as find, but it returns the index that matches

var b = people.findIndex(function(person) {
    return person.age === 22
})
console.log(people[b]) // { name: 'Sarah', age: 22 }

filter

Create a new array with items that return true

var c = people.filter(function(person) {
    return person.age > 25
})
console.log(c) // [{ name: 'Jen', age: 32 }, { name: 'Keith', age: 48 }]

map

Create a new array with a subset of the original array (made from what you return)

var d = people.map(function(person) {
    return person.age
})
console.log(d) // [32, 48, 22]

reduce

Accumulate through an array. The first argument is the reducer function. The second argument is the starting value (in this case: 0). In the reducer function, there are two arguments, the current value of the accumalation, and the current item in the array. You return the new value of the accumalation.

var e = people.reduce(function(current, person) {
    return current + person.age
}, 0)
console.log(e) // 102

sort

In the sorting function, you’re provided items a and b. If a is less than b, you return -1, if a is greater than b, you return 1, and if they are equal, you return 0. A shorthand can be used:

var f = people.sort(function(a, b) {
    return a.age - b.age
}, 0)
// Items in order of Sarah, Jen, Keith

Remember with sorting, it’s default is to compare strings, not numbers. The default behavior of ‘sort’ on a single-dimensional array will gets multiples above 10 in the ‘wrong’ order. // [1, 10, 3, 35]

Also, don’t view this a traditional loop, for longer arrays, it will run items through multiple times.

Task: wrangle some data.

Take this FIFA World Cup data and perform the following operations:

1. Return the item that corresponds to France’s first win
2. Return the array index of the 1970 World Cup final
3. Return a new array of winner team names
4. Count up the total number of goals
5. Return all items where the host has won the World Cup
6. Sort the items based on the total goals scored
7. (Stretch goal) Return a new array of teams and their total number of wins, in descending order

Foundations

The engine runs from through your JS from top to bottom. When you call a function, it switches context into the function, runs through it, then returns back to the main context.

Variables

What is a variable?

A variable is a box you can put things in and retrieve later.

var a = 2
console.log(a) // 2

Variables can be updated:

a = a + 1
console.log(a) // 3

Variables hold values. There are 7 value ‘types’:

• string
• number
• boolean
• null
• undefined
• symbol
• object

The first six are ‘primitive’ types. Primitive types are immutable (can’t be mutated) For a string, this means the once the string is created. It’s not possible to modify it!

var b = 'trys'
b.toUpperCase()
console.log(b) // 'trys'

You can however reassign b to hold a new string:

var b = 'trys'
b = b.toUpperCase()
console.log(b) // 'TRYS'

Why is this useful? Mutable values are consistent, once they’re assigned, you have to be explicit to change them. This becomes more useful when we start passing values around a program.

Objects

The only non-primitive, mutable data type is an object. It is a collection of data.

Interestingly, arrays and functions are both types of object in JS.

Variables vs. Values

When I said ‘A variable is a box you can put things in and retrieve later’, I wasn’t being strictly true. A variable points to a value and the value is the box that holds things. This means you can have two variables looking at one value. We’ll get to that in a bit.

The types

String

Strings represent text data: ‘Trys’ is a string. ‘1’ is a string.

Number

Numbers represent numerical data. 0 is a number. Infinity is a number. NaN is a number!

Boolean

Booleans are logical values. true or false. Note ‘true’ is a string, not boolean. More importantly, ‘false’ is truthy.

Null

Null is the intentionaly absence of a value

Undefined

Undefined is when you have a variable that isn’t pointing to a value.

var c
console.log(c) // undefind

Symbol

Symbols are a bit beyond our scope. They were added in ES2015 and they represent unique, primitive (immutable) data.

What’s the big deal?

Variables come into their own when you start passing them around your program. They are a way of linking sections of your program. They help you enforce modularity.

Arrays

An array is a zero-based collection of items. They are generally created with square brackets:

var a = ['12', '34']
var b = []

You can push items onto the end of it, pop items off the end, shift to remove the first item, unshift to prepend items. .forEach loops them, indexOf returns the index position. You access them via square brackets: arrayName[arrayIndex] = 123. You can remove items with splice. slice makes a shallow copy.

Scope

When a variable is declared, the compiler notes down what the value is and what scope it was defined in.

Imagine a tree. A leaf is concerned about leafy things. It has access to all it’s own information. This is called ‘local scope’. When the leaf asks for the variable leafColour, the engine asks the local scope if it has the value leafColour. The scope says yes and returns ‘orange’.

Occasionally, a leaf needs to know some twig information, say twig length. So it asks for the variable twigLength. First, the engine asks the local scope for the value twigLength. The scope says nope. So the engine goes up a level to the twig scope and asks for twigLength. It replies yes and returns ‘10cm’.

Finally, the leaf may ask for the type of tree. It asks the leaf scope, then the twig scope, then the branch scope, then the trunk scope, then the tree scope. In this tenuous analogy, the tree is the global scope and it returns the type ‘oak’.

If the leaf had asked for the variable ‘breakfast’, the engine would’ve worked up the scopes, to the global scope. If nothing was found, it would return undefined.

So scope works from the children up to the global scope. So sibling leaves don’t have access to each other, they only have access to their own local scope and all parent scopes. The other key takeaway is parent scope doesn’t have access to child scope.

Scopes are (mostly) created each time you call a function.

Scopes and primitives

var a = 1
function add() {
  a = a + 1
}
console.log(a) // 1
add()
console.log(a) // 2

Compare to:

var a = 1
function add(b) {
  b = b + 1
}
console.log(a) // 1
add(a)
console.log(a) // 1

In the first example, the function add asks for a, the scope doesn’t have it in local scope, so it goes up a level to global scope and finds it. So it is able to modify a variable in the parent.

Contrast it to the second example. We pass a into the function, it comes in to the parameter b (for clarity). As it is immutable, it creates a new variable called b that is no longer linked to a. Calling add(a) only updates the values inside the function. There are two ways around this. One, return the new value of a after each function call. Two, use a mutable data type.

One:

var a = 1
function add(b) {
  return b = b + 1
}
console.log(a) // 1
a = add(a)
console.log(a) // 2

Two:

var a = {
  count: 1
}
function add(b) {
  b.count = b.count + 1
}
console.log(a.count) // 1
add(a)
console.log(a.count) // 2

var, const, let

In ES2015, const and let were added. Where var declares variables that are limited to function-level scope, let and const declare block-level scope.

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

MDN link

Furthermore variables declared as const, can’t be reassigned.

const a = 123
a = 456 // TypeError: Assignment to constant variable.

const can be mutated:

const b = []
b.push(123)
console.log(b) // [123]

In ES2015, const is now seen as the ‘correct’ way to declare variables. let should be only used if you have to updated it (ie. a counter). var shouldn’t be used at all. However, we’re not all in ES2015 land just yet.

Global scope

You may’ve heard the phrase ‘polluting the global scope’. This happens when we define our programs globally. The problem is collisions. If you write a plugin that requires a global object that holds certain values, calling it settings may well conflict with another plugin that also uses a settings variable. Now whichever program registers the variable last, overwrites all previous settings, and probably breaks your program in the meantime.

You want to reduce global variables as much as possible, ideally to zero or one instances. Then name your global variable to something sensible.

If you don’t need to pollute the global scope at all, you can use a IIFE (instantly instantiated function expression). They look like this:

(function() {
  // Your program
})()

An IIFE creates a new functional scope block so your variables don’t pollute the global scope. You can even pass in values into an IIFE:

(function(a) {
  console.log(a) // 123
})(123)

This is a great pattern to utilise as it forces you to break your code into modules.

Task - mileage calculator

Take an array of journey objects, each with a start, end and distance.

• To begin with, output them in the console.
• Then calculate the total distance and display it on the page
• Display the trips on the page
• Stretch goal: Add a form that lets you add new journeys
• Stretch stretch goal: store the changes in localstorage for persistent calculations

It was a very new experience to conduct such a formal session but it seemed to go down pretty well. I’ve noted down lots of tweaks to make in preparation for the next session in three weeks time. Below are my (pretty rough) notes for the ‘talky’ bit of the session, we followed up with a coding task.

Why use a form?

• Getting user-generated data to and from a server.
• It links client and server side.
• There are accessibility benefits like keyboard shortcuts, tabindex, outlines
• There are user benefits like autocomplete
• They are system optimised, datepickers, email fields etc
• They are standardised forms of input

It’s possible (and arguably too easy) to create psuedo-forms with JS. But they fail accessiblity and they don’t leverage web standards.

Actions

A standard form attribute is action. It tells the browser where to submit the form, kindof like a href on an <a> tag. If omitted, it submits to the current URL.

Methods

Methods tell the browser which HTTP method to use. There are two main ones. GET and POST. They both cause a full page reload (by default).

A GET request passes the submitted data into the URL of the next page. Search is a good example of this. If you don’t mind the data being public (or messed with), GET is a good option. All the data will be visible in users history, so you wouldn’t want to expose passwords etc.

POST requests are more private. They don’t expose the data to the URL so they’re not shareable in the same way GET requests are. This makes them more useful for login forms.

There are three more HTTP request types but they’re not usable on forms (yet). They are PUT, HEAD and DELETE. They are used in REST APIs. Example

Add a user      - POST /users/             -> POST   /users/
Get the user    - GET  /users/trys/        -> GET    /users/trys
Edit the user   - POST /users/trys/edit/   -> PUT    /users/trys
Delete the user - POST /users/trys/delete/ -> DELETE /users/trys
User existence  - GET  /users/trys/        -> HEAD   /users/trys

The method describes the indent of the request, a search GETs data from the server, and login POSTs data to the server.

Input types

The default input type is text. Common others are number, email, password, hidden, checkbox, radio & submit. If you omit the type or put an invalid type, it falls back to text. This is the great ‘progressive enhancement’ feature of forms. There are other form ‘inputs’ such as textarea, button, select.

Run through inputs on MDN: input, select, textarea & button

Form layout

‘Required’ attributes

Although there are not strictly mandatory attributes, there are attributes are necessary on each input to provide basic functionality.

<input name="username">

All inputs arrive on the server as a key/value pair. name is the key. Whatever you type into the input is the value. For a Google search, q is the name attribute, which translates in the URL to ?q=123.

<label for="username">Username</label>
<input name="username" id="username">

id is required to link a label to an input with for. This is crucial for accessibility, even if you have placeholders. If you click on a label linked to an input, it focuses on the input. Label wrapping does this too

<input type="hidden" name="post-type" value="post">

value pre-fills the input. This is useful for defaults, hidden inputs and re-filling after failed validation.

<label for="username">Username</label>
<input name="username" id="username" placeholder="Batman, Robin...">

placeholder is used to provide an example of the expected input. It only shows when the input is empty. It’s often ‘abused’ by designers to replace the need for a label. Never remove the label, hide it using screen-reader safe CSS. display: none is not read by screenreaders so hiding a label like that is useless. Placeholder styling is a bit buggy, some browsers take the colour value straight from the color of the input, others take it and make it a bit lighter to differentiate.

Checkboxes/radios

The input types checkbox/radio are a bit different as you tend to have multiple input tags. Either wrap the input in the label or, write it as:

<input name="contact" type="radio" id="contact_2" value="Phone"><label for="contact_2">Phone</label>
<input name="contact" type="radio" id="contact_1" value="Email"><label for="contact_1">Email</label>
<input name="contact" type="radio" id="contact_3" value="Pigeon"><label for="contact_3">Pigeon</label>

Checkboxes have multiple inputs and multiple outputs, so you need to add [] to the name. This’ll arrive on the server as an ‘array’ (of sorts).

<input name="toppings[]" type="checkbox" id="toppings_2" value="Mozzerella"><label for="toppings_2">Mozzerella</label>
<input name="toppings[]" type="checkbox" id="toppings_1" value="Tomato"><label for="toppings_1">Tomato</label>
<input name="toppings[]" type="checkbox" id="toppings_3" value="Chicken"><label for="toppings_3">Chicken</label>

Accessibility

tabindex can be used, don’t if you can avoid it. It gets super confusing and difficult to manage. Leave the broweser to do its job.

Provide an <input type="submit"> or <button type="submit">Submit</button>. Some browsers get grumpy if they’re not present. Plus: accessibility \o/

Styling

Styling can be a pain. There are a load of incompatibilities between browsers. Some input types aren’t supported at all and fallback to text. But it can be ‘reset’ pretty well, you just have to be a bit creative about styling techniques.

:invalid, :focus, :active, :checked can all be used in CSS to target an input with a given state.

Task: Newsletter sign up form.

We’ll make a Mailchimp-esque form with first name, last name, email (required) and a subscribe button. It should POST to itself and catch invalid states. It should be responsive (1 col on mobile, 4 col on desktop).

Future things for future weeks

Grabbing data in PHP, filtering data safely, catching/inspecting forms in JS. event.PreventDefault() – how not to use it. Event bubbling/delegation. Security. OTK.