1. The front-end toolkit
For the modern web developer

2. A brief history
• This is gonna be short…
• ...cos front-end development has been around for
about 5 minutes in the big scheme of things…
• Back in the dark ages, software developers and
the like used to “design” apps and websites.
[shudder]
• Designers of the time were horrified, but were
too busy printing shit out on paper and had no
clue as to how this new-fangled internetness
worked.
• SO….

3. Front-end development was born!
• It basically covers: wire-framing, client-side
presentation & programming, user
interface, “UX” design, and other confusing
buzzwords.
• The role has only really come of age quite
recently, and it’s still a bit of a grey area as to
what front-end development entails. Meaning…
• There’s a crap load of jobs out there for front-end
developers… and even more for code monkeys
who can get their hands dirty on the client-side!

4. So get excited about front-end
development :D
…cos it looks like it’s here to stay… at least for the
foreseeable-ish future…
• More and more employers are looking for devs
with mad front-end skillz
• A lot of it is still uncharted territory, a veritable
wild west where best practices and standards are
still not firmly established.
• Some smart cookies have realised the need for a
reliable, DRY approach to front-end development
that make it easier to get started.

5. The tools we’ll be looking at today
In alphabetical order…
• Bootstrap & Foundation
• CoffeeScript
• Compass & Sass
• Grunt
• Haml & Handlebars
• jQuery

6. Compass & Sass
• Compass is a rails-based tool built for speedy web app
presentation.
• It follows the rails philosophy of not repeating oneself
by generating CSS (something which has been rather
clunky and tedious to work with in the past) in a
programmatic way.
• Compass itself is a nice big handy library to use with
Sass. Sass itself has a fair amount of useful functions
built-in, Compass is basically like strapping a jetpack to
Sass.
• It makes web presentation a whole lot faster, easier
and more fun.

7. OK that’s nice… but what kinda stuff
does Compass do?
• Cross-browser bug fixes and browser-specific
prefixes
• Sneaky hacks for legacy browsers
• Data-URI generation for images
• Automatic sprite-sheet generation!
• Basic programming shenanigans like
variables, methods, conditionals and loops.

8. Bootstrappin’
• Some clever folks have put together front-end
‘frameworks’ for whipping up sites and apps in a
matter of hours.
• The two most popular right now are Twitter’s
Bootstrap and Zurb’s Foundation.
• Presentational elements are easily customisable
and they include some fancy pants JavaScript for
cool interactivity straight out of the box.
• They are a back-end developer’s dream; a really
quick solution to the rigors of design and front-
end development.

9. The down-sides of using front-end
frameworks
• It’s easy to end up with a very generic looking
app or site, which generally looks a lot like the
other brazillion websites using a bootstrap.
• All that simplicity comes at a price… like any
framework, there is a lack of flexibility.
• They don’t exactly follow web development
best practices… The one-size-fits-all approach
to front-end dev means a certain degree of
hackiness which can become troublesome.

10. CoffeeScript
• JavaScript has irked developers since it found
it’s place as the predominant client-side
scripting language.
• It’s actually a pretty cool language, it’s quite
forgiving and very versatile. Unfortunately it
can become quite repetitive and security
vulnerabilities can arise when undiscerning
developers get there hands on it.

11. CoffeeScript
• CoffeeScript provides some syntactic sugar
that makes JavaScript a whole lot sweeter to
write.
• It deals with a lot of the irksome repetition
required to keep things secure.
• It’s indent-based syntax is similar to Ruby or
Python and is way easier to read
• You can do tricksy stuff in less lines of code.

12. Grunt
• The ultimate pre-processing tool: you can tell
Grunt to watch everything that needs watching...
Sass, Less, CoffeeScript, Haml, etc…
• Grunt can also do cool stuff like compress images
on-the-fly… might not sound that cool, but it’s a
super annoying repetitive task.
• Lint and Hint – to help keep your code
clean, point out errors, security issues and other
handy stuff the browser console won’t tell you.

13. Aside: Yeoman
• Yeoman is a hip new web app development tool
which combines the power of Grunt, Yo and
Bower.
• Yo is a scaffolding tool which fleshes out an
application and sets up Grunt configuration.
• Bower goes off and fetches all the additional
scripts and resources, then keeps them up to
date.
• Unfortunately at the moment Yeoman works on
Mac  but it looks pretty handy…

14. Haml & other templating languages
• Just like CSS and JavaScript, HTML has also
become one of the bottlenecks in front-end
development. This is where the ‘templating
languages’ come in handy.
• Haml is another rails tool which is used to
make templating a breeze. Once again, it uses
an indent-based syntax to make mark-up
cleaner, simpler and easier to read.

15. The magic of jQuery
• Most of you have probably already heard of jQuery; the
JavaScript library that lets designers do the coding.
• jQuery UI is a massive library that includes a standardised
collection of interactive elements which are incredibly fast
and easy to implement into a project.
• jQuery Mobile has been built from the ground up to help
devs get a mobile version of a website or app up and
running quickly.
• It includes listeners for mobile device inputs like
multitouch, swipe and pinch gestures.
• It means you can build a web app with behaviour similar to
a native app!

16. Other great front-end tools available
• The development landscape is always
changing, and new tools are popping up all
the time.
• Check out PhoneGap – a platform for making
web apps which function and behave like
native apps.
• JavaScript application frameworks like
AngularJS, Backbone and Ember.

17. To wrap things up…
• These are all handy tools to have at your
disposal, go out and give them a go on your next
project. Keep an eye for more, and don’t get too
attached to any one tool!
• Front-end work doesn’t have to be a hassle, if
anything ever seems dull, tedious or
repetitive, there’s a 99% chance that somebody’s
built a fancy tool to make it easier and more fun…
Hell, that’s what development is all about.