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

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
It’s a pain..

9. 9
Front-end Development Tools Tips & Tricks
HTML
Let’s 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 _ _