FRONTEND DEVELOPMENT
Supercharge your frontend development with little languages
and smart tools
Dave Jeffery
@DaveJ
dave@davejeffery.com

Freelance frontend guy.
How I like to develop

• Invest

time getting the set up right

• Write

descriptive code

• Use

tools that are 'of' the ...
#1: Coffeescript for your
Javascript
• Coffeescript
• Minimal

is just Javascript

syntax

• Javascript:

‘The Good Parts’
Coffeescript: Links

• Coffeescript: http://coffeescript.org/
• The

Little Book on CoffeeScript: http://arcturo.github.io...
COFFEESCRIPT DEMO
#2: Sass for your CSS

• Sass

is just CSS

• Great

mixins available, especially Bourbon & Foundation
Sass Examples 1

• Variables
$primary-color: #cc0000;

• Mixins
@include background-image(linear-gradient(-45deg, #aaa, #c...
Sass Examples 2
• Nesting
.menu {
background: #fff;
&::before { @include triangle(25px, #333, up); }
> ul { list-style: no...
Sass: Links
• Sass: http://sass-lang.com/
• Bourbon: http://bourbon.io/
• Compass: http://compass-style.org/
• Foundation:...
Jade for your HTML

•

doctype html
html(lang="en")
head
title Page Title
script(type='text/javascript').
if (foo) {
bar(1...
AngularJS

•Two-way

data binding
Angular: Links
• AngularJS: http://angularjs.org/
• Angular

Classy: http://davej.github.io/angular-classy/

• Polymer: ht...
Grunt

• Automation
• Thousands

of plugins
Grunt: Links
• Grunt: http://gruntjs.com/
• Makefile
• Gulp: http://gulpjs.com/
• CodeKit

(Mac): https://incident57.com/co...
DEMO
Upcoming SlideShare
Loading in...5
×

Frontend Development - Supercharge your frontend development with little languages and smart tools

1,084

Published on

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/

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,084
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Frontend Development - Supercharge your frontend development with little languages and smart tools

  1. 1. FRONTEND DEVELOPMENT Supercharge your frontend development with little languages and smart tools
  2. 2. Dave Jeffery @DaveJ dave@davejeffery.com Freelance frontend guy.
  3. 3. How I like to develop • Invest time getting the set up right • Write descriptive code • Use tools that are 'of' the web
  4. 4. #1: Coffeescript for your Javascript • Coffeescript • Minimal is just Javascript syntax • Javascript: ‘The Good Parts’
  5. 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. 6. COFFEESCRIPT DEMO
  7. 7. #2: Sass for your CSS • Sass is just CSS • Great mixins available, especially Bourbon & Foundation
  8. 8. Sass Examples 1 • Variables $primary-color: #cc0000; • Mixins @include background-image(linear-gradient(-45deg, #aaa, #ccc);
  9. 9. Sass Examples 2 • Nesting .menu { background: #fff; &::before { @include triangle(25px, #333, up); } > ul { list-style: none; } } • Partials @import ‘_typography’;
  10. 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. 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. 12. AngularJS •Two-way data binding
  13. 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. 14. Grunt • Automation • Thousands of plugins
  15. 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. 16. DEMO
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×