Front end Tips Tricks & Tools
Preview:
Citation preview
- 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: Sandeep.Ramgolam@gmail.com Twitter : @ _ _ sun _ _