Everything you didn't know you didn't know A Crash Course in Front End
Web Development

Amelia Bellamy-Royds (@AmeliasBrain)

Edmonton, 2 December 2016

These slides: ameliabr.github.io/front-end-crash-course

What?

Front-end: In web development, the code & content that is interpreted on the end-user's computer.

AKA client-side

Compare with back-end, AKA server-side

Why?

Reports that say that something hasn't happened are always interesting to me, because as we know, there are known knowns; there are things we know we know. We also know there are known unknowns; that is to say we know there are some things we do not know. But there are also unknown unknowns – the ones we don't know we don't know. And if one looks throughout the history of our country and other free countries, it is the latter category that tend to be the difficult ones.

Donald Rumsfeld, 12 February 2002

How?

  • Learn the language
  • Learn the goals
  • Learn the obstacles

Eight themes.

The Front-End Dev platform is:

  • Declarative
  • Distributed
  • Defensive
  • Evolutionary

Front-End Dev should be:

  • Responsive
  • Accessible
  • Performant
  • Robust

Declarative

Not all computer code is programming code!

  • Declarative: Encode the content / state / properties.

    Interpretter required to Make It So.

  • Imperative: Encode the instructions step-by-step. AKA programming.

HTML & CSS are declarative code.

They provide native functionality.

Distributed

Write once, run everywhere

  • Hardware
  • Operating Systems
  • User preferences
  • Network quality
  • Software interpreters

Web browsers are competing software. But your code needs to work in all of them.

Web standards make this easier, but not easy!

Web standards are practical, political, consensus-based: no enforcement.

Defensive

Web browsers are user agents.

They work for the user, not web site developers.

  • Defend against hostile web site code.

  • Sandbox communication between web domains & to the file system.

  • Allow user to override behavior & turn off features.

Evolutionary

not Revolutionary!

Both web sites & web browsers must be backwards compatible.

  • Progressive Enhancement

  • Graceful Degradation

  • Progressive Enhancement

  • Graceful Degradation

JavaScript libraries can help ease the transition.

Polyfills can patch over incomplete support.

But there is a cost to shipping extra code!

Responsive

You're not designing for one device.

  • Don't try to create separate designs for each type of device!

    (There are way too many devices.)

  • Do create adaptive, flexible designs, using content breakpoints.

Accessible

The WCAG goals should guide all software. Make sure it is:

  • Perceivable
  • Operable
  • Understandable
  • Robust

…for all users.

With declarative code, used as designed, the browser can handle most of this. You only need to provide the content (image alt text, video captions).

With imperative code (or hacks), you must recreate native functionality.

Performant

Respond to user input quickly.

Animate visuals smoothly.

…on all devices and networks!

  • Don't ship code you don't have to.

  • Don't ship assets that won't be used.

  • Don't block the main thread.

Robust

The opposite of fragile.

Robust code handles unexpected problems:

  • Network interuptions
  • Older browsers / Unsupported features
  • Incorrect user input
  • Alternative user hardware / software options