Front-End Tooling

FRONT-END
TOOLING
"For Smarter web developers "
#GDG Blida #DEVFEST

HOUSSEM YAHIAOUI
AKA : EL-CODE
Student & GDG Blida member
&
MEAN stack lover & AngularJS indoor speacker

NO AGENDA !
So Let's Rock in !

WE ALL DO AGREE THAT <WEB />
Become a frustrating place for newbies !

REASONS
1. More time doing Stupid Stuff like : downloading libs and
making directories ...
2. More Time on updating and managing lib versions
3. More time on tedious stuff like trying to figuring out why
stuff dont work together !

IN OUR BIZ TIME = $$
&
TIME IS THE KEY FACTOR TO STAY
PRODUCTIVE

That's was our problimatic
Let's fix the problem

1 - Automate your workflow !
"Automation is having tools do the tedious work, so you don't
have to."

That' exactly what i'm trying to say !
Let's Start dig in!

1 - EMBRACE THE POWER OF : $ / #

Windows / Cmder :
with enhancements spiced with Monokai colours and a custom prompt layout

2 - Question :
What is the most used Tool by the Developers / Designers
or even End user?

Trivial answer :
Simply your Web Broswers !

Our Browser of choice : Google chrom
Cause Chrom include all the new and great spec +
extensions so for web develop/designers is the right tool

That was the tip of the iceberg !
Let's dive in ...

CAN'T LIVE WITHOUT SUBLIME !
Pligunize IT !

You have to </3 the Package Control

Emmet for The WEB </3
body>section*3>h3{Hello GDG}+p{Nice To Be HERE!}
And We'll get the following !
<body>
<section>
<h3>Hello GDG</h3>
<p>Nice To Be HERE!</p>
</section>
<section>
<h3>Hello GDG</h3>
</section>
<section>
<h3>Hello GDG</h3>
</section>
</body>

MarkDown Editing for conf writers

And more !
1. Code Snippets
2. Themes
3. Additional Language Support such : jade / less / scss /
sass ...

You use CSS ?
Are you sufring from vendor-prefixes ? and the lack of
functionality ?
Did you heard about CSS Pre-processors !
1. SASS / SCSS 2. LESS 3. Stylus

You use JS ?
Are you sufring ? and you think that it's just overwelming ?
Did you heard about Language Transpilers !
1. Coffee Script 2. TypeScript

We talked about Speed !
Statistique : 98% of the over all rendring is due to the JS /
CSS / HTML rendring ..
We need a serious Solution !

Two Words !
Files Minification

But the process can be just overwelming !

Did you heard about the Task Runners ?

What's That !
it's a tool that :
1. Improve Your Code quality.
2. Make your User Happy.
3. It’s easily repeatable. - we will discuss this point later on -

Examples !
Let's Check Grunt out !

Grunt is a task runner !, he use a set of configuration
principales in order to do his WORK ! those conf are saved
in a key file called Gruntfile.js

Grunt use the module pattern to the max !
and we can download them using Node Package Manager
aka : npm
Then we load those plugins using grunt api !

Let's minify using Grunt-Concat + Grunt-uglify
Download it through the following commande :
than we configure the tasks and load them in the
Gruntfile.js

No Time for Downloading / Updating / Configuring
packages !
Use a package manager !
Personal Choice : Bower !

Bower how To !
We have in fact two ways to do the job !

1. From the Bower.json (manifest file) :
+
2. From the Cli :

Yeoman !
But we will see that in practise in our Code Lab

Keep in touch with me !
G+ : +HoussemYahiaoui
Twittre : @free_g33k
Facebook : fcb.com/houssem.intern0t
#peace

Front-End Tooling

More Related Content

What's hot

Similar to Front-End Tooling

Recently uploaded

Front-End Tooling