Code is available here: https://github.com/davej/CorkDev.io-KCs-app and go here to see the app in action: http://davej.github.io/CorkDev.io-KCs-app/

1. FRONTEND DEVELOPMENT
Supercharge your frontend development with little languages
and smart tools

2. Dave Jeffery
@DaveJ
dave@davejeffery.com
Freelance frontend guy.

3. How I like to develop
• Invest
time getting the set up right
• Write
descriptive code
• Use
tools that are 'of' the web

4. #1: Coffeescript for your
Javascript
• Coffeescript
• Minimal
is just Javascript
syntax
• Javascript:
‘The Good Parts’

5. Coffeescript: Links
• Coffeescript: http://coffeescript.org/
• The
Little Book on CoffeeScript: http://arcturo.github.io/library/
coffeescript/
• Literate
Coffeescript: http://ashkenas.com/literate-coffeescript/

6. COFFEESCRIPT DEMO

7. #2: Sass for your CSS
• Sass
is just CSS
• Great
mixins available, especially Bourbon & Foundation

8. Sass Examples 1
• Variables
$primary-color: #cc0000;
• Mixins
@include background-image(linear-gradient(-45deg, #aaa, #ccc);

9. Sass Examples 2
• Nesting
.menu {
background: #fff;
&::before { @include triangle(25px, #333, up); }
> ul { list-style: none; }
}
• Partials
@import ‘_typography’;

10. Sass: Links
• Sass: http://sass-lang.com/
• Bourbon: http://bourbon.io/
• Compass: http://compass-style.org/
• Foundation: http://foundation.zurb.com/
• Stylus: http://learnboost.github.io/stylus/
• Less: http://lesscss.org/

11. Jade for your HTML
•
doctype html
html(lang="en")
head
title Page Title
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.

12. AngularJS
•Two-way
data binding

13. Angular: Links
• AngularJS: http://angularjs.org/
• Angular
Classy: http://davej.github.io/angular-classy/
• Polymer: http://www.polymer-project.org/
• React: http://facebook.github.io/react/
• Ember: http://emberjs.com/

14. Grunt
• Automation
• Thousands
of plugins

15. Grunt: Links
• Grunt: http://gruntjs.com/
• Makefile
• Gulp: http://gulpjs.com/
• CodeKit
(Mac): https://incident57.com/codekit/
• Prepros
(Windows): http://alphapixels.com/prepros/
• Write
your own

16. DEMO