Front end Tips Tricks & Tools

1
Front-end Development Tools Tips & Tricks
Tools, Tips & Tricks
for
Front-endDevelopment
Starting @ 14:30
RAMGOLAM Sandeep
24 April 2015, Bagatelle, Mauritius

2
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
Agenda
• The Web
• Tools to Improve your workflow in
• HTML
• CSS
• General Purpose Tools

4
The Web
Browsers• Core Developers
• DNS Systems
• NSA
• The Internet
• Users
• Designers
• Backend Devs
• DB Admins
and….

5
The Web
HTML/CSS Guy!

6
The Web
New HTML/CSS/jQuery/UI/UX/Angular/Ember/NoSQL
Localstorage/SVG Animator/etc..

7
The Web
Lets try to make sense out of all that..

8
HTML
Writing html can be boring
It’s a pain..

9
HTML
Let’s think again…
How do we really write html?

10
HTML
Emmet! (Zen-Coding)

11
HTML
Zen Coding Demo

12
CSS
• Preprocessors
• Refresh CSS Plugin
• *SourceMaps(edit scss in chrome)

13
CSS
• Preprocessors
• extends css and gives it additional features
• SASS
• LESS
• Stylus

14
CSS
SASS vs LESS

15
SASS/SCSS
• How to install
$ gem install sass
$ gem install compass
• Prerequisites
• ruby
• rubygems

16
SASS/SCSS
Features of Preprocessors
• import anywhere
• nesting
• variables
• maths
• functions/mixins

17
SASS/SCSS
SASS Demo

18
CSS
CSS Reloader Plugin
https://chrome.google.com/webstore/detail/css-
reloader/dnfpcpfijpdhabaoieccoclghgplmpbd?hl=en

19
General Purpose Tools
• Prerequisites
• Nodejs
• Node Package Manager (npm)

20
-- httpster
-- bower
-- js task runner(gulp)
-- autoprefixr*

21
$ 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
Httpster demooo!

23
$ npm install –g bower
• Bower
• web package manager.
need a framework? a library? Its right here.

24
Bower demooo!

25
$ npm install –g gulp
• gulpjs
• JavaScript task runner
Purpose : Automate simple repetitive tasks

26
• 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
gulpjs
your project manager be like...

28
GulpJS demo
gulpjs

29
Thank You! Questions?

30
Contact Me
Email: Sandeep.Ramgolam@gmail.com
Twitter : @ _ _ sun _ _

Front end Tips Tricks & Tools

More Related Content

Viewers also liked

Similar to Front end Tips Tricks & Tools

Recently uploaded

Front end Tips Tricks & Tools