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
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...
