front end tips tricks & tools
TRANSCRIPT
- 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 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 Front-end Development Tools Tips & Tricks Agenda The Web Tools to Improve your workflow in HTML CSS General Purpose Tools
- 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 Front-end Development Tools Tips & Tricks The Web HTML/CSS Guy!
- 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 Front-end Development Tools Tips & Tricks The Web Lets try to make sense out of all that..
- 8. 8 Front-end Development Tools Tips & Tricks HTML Writing html can be boring Its a pain..
- 9. 9 Front-end Development Tools Tips & Tricks HTML Lets think again How do we really write html?
- 10. 10 Front-end Development Tools Tips & Tricks HTML Emmet! (Zen-Coding)
- 11. 11 Front-end Development Tools Tips & Tricks HTML Zen Coding Demo
- 12. 12 Front-end Development Tools Tips & Tricks CSS Preprocessors Refresh CSS Plugin *SourceMaps(edit scss in chrome)
- 13. 13 Front-end Development Tools Tips & Tricks CSS Preprocessors extends css and gives it additional features SASS LESS Stylus
- 14. 14 Front-end Development Tools Tips & Tricks CSS SASS vs LESS
- 15. 15 Front-end Development Tools Tips & Tricks SASS/SCSS How to install $ gem install sass $ gem install compass Prerequisites ruby rubygems
- 16. 16 Front-end Development Tools Tips & Tricks SASS/SCSS Features of Preprocessors import anywhere nesting variables maths functions/mixins
- 17. 17 Front-end Development Tools Tips & Tricks SASS/SCSS SASS Demo
- 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 Front-end Development Tools Tips & Tricks General Purpose Tools Prerequisites Nodejs Node Package Manager (npm)
- 20. 20 Front-end Development Tools Tips & Tricks -- httpster -- bower -- js task runner(gulp) -- autoprefixr* General Purpose Tools
- 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 Front-end Development Tools Tips & Tricks Httpster demooo! General Purpose Tools
- 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 Front-end Development Tools Tips & Tricks Bower demooo! General Purpose Tools
- 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 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 Front-end Development Tools Tips & Tricks gulpjs your project manager be like...
- 28. 28 Front-end Development Tools Tips & Tricks GulpJS demo gulpjs
- 29. 29 Front-end Development Tools Tips & Tricks Thank You! Questions?
- 30. 30 Front-end Development Tools Tips & Tricks Contact Me Email: [email protected] Twitter : @ _ _ sun _ _