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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,039

Published 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/

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

  • Be the first to like this

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

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

×