Frontend Development - Supercharge your frontend development with little languages and smart tools
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 952 views

Code is available here: https://github.com/davej/CorkDev.io-KCs-app

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/

Statistics

Views

Total Views
952
Views on SlideShare
851
Embed Views
101

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 101

http://corkdev.io 100
http://www.corkdev.io 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 web
  • #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/library/ coffeescript/ • Literate Coffeescript: http://ashkenas.com/literate-coffeescript/
  • 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, #ccc);
  • Sass Examples 2 • Nesting .menu { background: #fff; &::before { @include triangle(25px, #333, up); } > ul { list-style: none; } } • Partials @import ‘_typography’;
  • 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/
  • 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.
  • AngularJS •Two-way data binding
  • 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/
  • Grunt • Automation • Thousands of plugins
  • 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
  • DEMO