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?

My work-flow

Sublime Text

Sublime Text

...previously

Aptana Netbeans

Dev Tools

Chrome DevTools / Firefox Firebug extension 


console.log( someObject.stuff );

Chrome Dev-tools docs

Package Manager

Bower 

bower search ember
Bower list command 

bower install ember
    

bower list
Bower list command

Result...

Bower

Also worth a look

Yeoman

Other package managers...

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


Laravel PHP example...


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

Pre-Processor

CodeKit

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

Pre-Processor

Prepros

PrePros (Open-source)

Version Control

Using Git...

try.github.io

GitHub

http://github.com/edu

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

Modernizr

Performance



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

LessCss SASS Css

HTML5Boilerplate

HTML5Boilerplate

h5bp.com | On GitHub

Twitter Bootstrap

Twitter Bootstrap

getbootstrap.com | On GitHub

jQuery

jQuery

jquery.com | On GitHub

Ember.js

Ember.js

emberjs.com | On GitHub

BackBone.js

Backbone.js

backbonejs.org | On GitHub

Angular.js

Angular.js

angularjs.org | On GitHub

D3.js

D3.js

d3js.org | On GitHub

Leaflet.js

LeafletJS.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...

Questions?



Get in Touch

hi@davidkelly.ie

@davkell

linkedin.com/in/davkell



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