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

Like this? Share it with your network

Share

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

  • 1,176 views
Uploaded on

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/

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,176
On Slideshare
1,064
From Embeds
112
Number of Embeds
2

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 112

http://corkdev.io 109
http://www.corkdev.io 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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