frontend development - supercharge your frontend development with little languages and smart tools
DESCRIPTION
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/TRANSCRIPT
FRONTEND DEVELOPMENTSupercharge your frontend development with little languages
and smart tools
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 is just Javascript
• Minimal 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
• Mixins
$primary-color: #cc0000;
@include background-image(linear-gradient(-45deg, #aaa, #ccc);
Sass Examples 2
• Nesting
• Partials@import ‘_typography’;
.menu { background: #fff;
&::before { @include triangle(25px, #333, up); }
> ul { list-style: none; }}
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 htmlhtml(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