Professional Front-End Development

Overview

Context What How

ContextContext

Front-end is not simple

Performance Usability Accessibility Security Internationalisation Localisation Scalability

Mobile platforms Maintainability Browser bugs Debugging Testing Build processes

“The most hostile software development environment imaginable”

– Douglas Crockford on web browsers

Areas of concern

Knowledge areas Dimensions Platforms Browsers Rendering modes

✕ 7

✕ 4

✕ 3

✕ 4

✕ 2

672Slide: Nate Koechley

WhatWhat

A change of attitude

Recognition Professionalism

Principles

Availability Openness Richness Stability

Slide: Nate Koechley

Principles

Availability

Slide: Nate Koechley

Principles

Openness

Slide: Nate Koechley

Principles

Richness

Slide: Nate Koechley

Principles

Stability

Slide: Nate Koechley

Principles

Availability Openness Richness Stability

Slide: Nate Koechley

Understand the medium

Respect user choice Web layers: semantic, presentation, behaviour Progressive enhancement

HowHow

Semantic (X)HTML

It must have meaning For users, machines, developers Layer richness

Object-oriented CSS

Focus on the left Encapsulate your objects Cascade the look Layer richness

Unobstructive Javascript

Separate layer Provide enhanced behaviour Mind your manners Be paranoid Layer richness

Do the right thing

Follow standards

if impossible then

Follow conventions

if impossible then

Do what it takesSlide: Nate Koechley

Thanks

Links

Blog: http://fittopage.org Twitter: nelsonmenezes

OOCSS: http://oocss.org/ Thanks to Nate Koechley:

http://nate.koechley.com/blog/

http://www.yuiblog.com/blog/2009/03/18/video-koechley-prof2e/