Front-End Web Development

A flying visit

Dave Kelly @davkell Research Technologist Arts, Humanities & Social Sciences Research @ NUI Galway

Structure

• Intros
• Overview
• My work-flow
• Considerations
• Interesting / useful front-end tech
• Questions (or just stop me...)

What?

• HTML5 (Structure)
• CSS (Presentation)
• JavaScript (Behaviour & Interaction)

Why?

• It implements your design
• It's responsible for a large part of your UX
• It requires flexibility
• It affects performance

Need to learn?

• CodeAcademy (HTML/CSS/JS courses)
• Treehouse (some free)

My work-flow

Sublime Text

...previously

Dev Tools

Chrome DevTools / Firefox Firebug extension

console.log( someObject.stuff );

Chrome Dev-tools docs

Package Manager

• New to me
• Serious time saver
• Easy to keep up to date / experiment
• Network security on NUIG WiFi

bower search ember

bower install ember

bower list

Result...

Also worth a look

Other package managers...

• Composer (PHP)
• Homebrew (osx)
• NPM (Node.js)

Laravel PHP example...

composer create-project laravel/laravel --prefer-dist

Pre-Processor

CodeKit - "It's like steroids for web developers" ($28)

Pre-Processor

PrePros (Open-source)

Version Control

Using Git...

try.github.io

GitHub

Think about

Being responsive

Being responsive

@media (min-width: 22em) {
	/* styles for this device size... */
}

@media screen and (min-width: 34em) {
	/* styles for this device size... */
}

@media screen and (min-width: 54em) {
	/* styles for this device size... */
}

Look into "mobile-first" development approaches

Cross-browser

BrowserStack | BrowserShots | Litmus (email)

Check supported features

• CanIUse
• HTML5Please

Performance

• Limit HTTP Requests
• Think about complex CSS animations
• Minify code
• Optimise Images

Use tools to help performance (and submit the un-minified code too!)

Your JavaScript

• Don’t go straight to jQuery (or any library)
• Data → JSON vs XML
• Avoid global namespace pollution

var aa = {
	name: ‘Dave’,
	logName: function(){
	    console.log( aa.name );
	}
}
aa.logName();

Read / watch Douglas Crockford's stuff: javascript.crockford.com

Interesting Front-End Tech

CSS Pre-Processors

HTML5Boilerplate

h5bp.com | On GitHub

Twitter Bootstrap

getbootstrap.com | On GitHub

jQuery

jquery.com | On GitHub

Ember.js

emberjs.com | On GitHub

BackBone.js

backbonejs.org | On GitHub

Angular.js

angularjs.org | On GitHub

D3.js

d3js.org | On GitHub

Leaflet.js

leafletjs.com | On GitHub

Leaflet.js

var map = L.map('map');

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {})
	.addTo(map);

map.locate({setView: true, maxZoom: 16});

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    L.marker(e.latlng).addTo(map)
        .bindPopup("You are within " + radius + " meters from this point")
        .openPopup();

    L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);

Quick back-end tech mention

Check out the Laravel Framework (laravel.com) if doing PHP development

Reading...

• A List Apart
• Smashing Magazine
• 24 Ways (articles & authors' sites)
• diveintohtml5.info

Questions?

Get in Touch

hi@davidkelly.ie

@davkell

linkedin.com/in/davkell

Slides available at talk.davidkelly.ie/codeninja-2013