Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front end Tips Tricks & Tools

600 views

Published on

This is a presentation on Front-end Tools Tips and Tricks by Sandeep Ramgolam, for the Developers Conference Mauritius 2015

Published in: Education
  • Be the first to comment

  • Be the first to like this

Front end Tips Tricks & Tools

  1. 1. 1 Front-end Development Tools Tips & Tricks Tools, Tips & Tricks for Front-endDevelopment Starting @ 14:30 RAMGOLAM Sandeep 24 April 2015, Bagatelle, Mauritius
  2. 2. 2 Front-end Development Tools Tips & Tricks Who am I • I make things for the web • HTML/CSS guy • I work at Prodigious. - Front-end Developer - Research & Development • I also enjoy Music & Gaming • I am a very lazy person
  3. 3. 3 Front-end Development Tools Tips & Tricks Agenda • The Web • Tools to Improve your workflow in • HTML • CSS • General Purpose Tools
  4. 4. 4 Front-end Development Tools Tips & Tricks The Web Browsers• Core Developers • DNS Systems • NSA • The Internet • Users • Designers • Backend Devs • DB Admins and….
  5. 5. 5 Front-end Development Tools Tips & Tricks The Web HTML/CSS Guy!
  6. 6. 6 Front-end Development Tools Tips & Tricks The Web New HTML/CSS/jQuery/UI/UX/Angular/Ember/NoSQL Localstorage/SVG Animator/etc..
  7. 7. 7 Front-end Development Tools Tips & Tricks The Web Lets try to make sense out of all that..
  8. 8. 8 Front-end Development Tools Tips & Tricks HTML Writing html can be boring It’s a pain..
  9. 9. 9 Front-end Development Tools Tips & Tricks HTML Let’s think again… How do we really write html?
  10. 10. 10 Front-end Development Tools Tips & Tricks HTML Emmet! (Zen-Coding)
  11. 11. 11 Front-end Development Tools Tips & Tricks HTML Zen Coding Demo
  12. 12. 12 Front-end Development Tools Tips & Tricks CSS • Preprocessors • Refresh CSS Plugin • *SourceMaps(edit scss in chrome)
  13. 13. 13 Front-end Development Tools Tips & Tricks CSS • Preprocessors • extends css and gives it additional features • SASS • LESS • Stylus
  14. 14. 14 Front-end Development Tools Tips & Tricks CSS SASS vs LESS
  15. 15. 15 Front-end Development Tools Tips & Tricks SASS/SCSS • How to install $ gem install sass $ gem install compass • Prerequisites • ruby • rubygems
  16. 16. 16 Front-end Development Tools Tips & Tricks SASS/SCSS Features of Preprocessors • import anywhere • nesting • variables • maths • functions/mixins
  17. 17. 17 Front-end Development Tools Tips & Tricks SASS/SCSS SASS Demo
  18. 18. 18 Front-end Development Tools Tips & Tricks CSS CSS Reloader Plugin https://chrome.google.com/webstore/detail/css- reloader/dnfpcpfijpdhabaoieccoclghgplmpbd?hl=en
  19. 19. 19 Front-end Development Tools Tips & Tricks General Purpose Tools • Prerequisites • Nodejs • Node Package Manager (npm)
  20. 20. 20 Front-end Development Tools Tips & Tricks -- httpster -- bower -- js task runner(gulp) -- autoprefixr* General Purpose Tools
  21. 21. 21 Front-end Development Tools Tips & Tricks General Purpose Tools $ npm install –g httpster • Httpster • Super Simple web server Purpose : saves lives! Purpose : provides a quick web environment without wamp/xampp/mamp/lamp/apache/sql/virtualhost hassle
  22. 22. 22 Front-end Development Tools Tips & Tricks Httpster demooo! General Purpose Tools
  23. 23. 23 Front-end Development Tools Tips & Tricks General Purpose Tools $ npm install –g bower • Bower • web package manager. need a framework? a library? Its right here.
  24. 24. 24 Front-end Development Tools Tips & Tricks Bower demooo! General Purpose Tools
  25. 25. 25 Front-end Development Tools Tips & Tricks General Purpose Tools $ npm install –g gulp • gulpjs • JavaScript task runner Purpose : Automate simple repetitive tasks
  26. 26. 26 Front-end Development Tools Tips & Tricks • copying files • renaming files • removing files • compress css or javascript • optimize images • packaging files • send file over ftp • so much more! gulpjs • Repetitive tasks?
  27. 27. 27 Front-end Development Tools Tips & Tricks gulpjs your project manager be like...
  28. 28. 28 Front-end Development Tools Tips & Tricks GulpJS demo gulpjs
  29. 29. 29 Front-end Development Tools Tips & Tricks Thank You! Questions?
  30. 30. 30 Front-end Development Tools Tips & Tricks Contact Me Email: Sandeep.Ramgolam@gmail.com Twitter : @ _ _ sun _ _

×