Professional Front End Development

22
Professional Front-End Development

description

 

Transcript of Professional Front End Development

Page 1: Professional Front End Development

Professional Front-End Development

Page 2: Professional Front End Development

Overview

Context What How

Page 3: Professional Front End Development

ContextContext

Page 4: Professional Front End Development

Front-end is not simple

Performance Usability Accessibility Security Internationalisation Localisation Scalability

Mobile platforms Maintainability Browser bugs Debugging Testing Build processes

Page 5: Professional Front End Development

“The most hostile software development environment imaginable”

– Douglas Crockford on web browsers

Page 6: Professional Front End Development

Areas of concern

Knowledge areas Dimensions Platforms Browsers Rendering modes

✕ 7

✕ 4

✕ 3

✕ 4

✕ 2

672Slide: Nate Koechley

Page 7: Professional Front End Development

WhatWhat

Page 8: Professional Front End Development

A change of attitude

Recognition Professionalism

Page 9: Professional Front End Development

Principles

Availability Openness Richness Stability

Slide: Nate Koechley

Page 10: Professional Front End Development

Principles

Availability

Slide: Nate Koechley

Page 11: Professional Front End Development

Principles

Openness

Slide: Nate Koechley

Page 12: Professional Front End Development

Principles

Richness

Slide: Nate Koechley

Page 13: Professional Front End Development

Principles

Stability

Slide: Nate Koechley

Page 14: Professional Front End Development

Principles

Availability Openness Richness Stability

Slide: Nate Koechley

Page 15: Professional Front End Development

Understand the medium

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

Page 16: Professional Front End Development

HowHow

Page 17: Professional Front End Development

Semantic (X)HTML

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

Page 18: Professional Front End Development

Object-oriented CSS

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

Page 19: Professional Front End Development

Unobstructive Javascript

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

Page 20: Professional Front End Development

Do the right thing

Follow standards

if impossible then

Follow conventions

if impossible then

Do what it takesSlide: Nate Koechley

Page 21: Professional Front End Development

Thanks

Page 22: Professional Front End Development

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/