Front end Tips Tricks & Tools

  • Published on
    07-Aug-2015

  • View
    104

  • Download
    0

Transcript

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