SlideShare a Scribd company logo
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 !
BUT NOT IF YOU WORKED SMARTER
But why exatcly it's So !
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."
Front-End Tooling
That' exactly what i'm trying to say ! 
Let's Start dig in!
1 - EMBRACE THE POWER OF : $ / #
the MAC / iTerm2
the MAC / Zsh
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
DEV Tool !
Angular Batarang !
Page Speed test !
And many more !
That was the tip of the iceberg ! 
Let's dive in ...
3 - EXTEND YOUR TOOLS !
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> 
<p>Nice To Be HERE!</p> 
</section> 
<section> 
<h3>Hello GDG</h3> 
<p>Nice To Be HERE!</p> 
</section> 
</body>
Navigate Using Ctrl + p
Git for commit lovers
MarkDown Editing for conf writers
And more ! 
1. Code Snippets 
2. Themes 
3. Additional Language Support such : jade / less / scss / 
sass ...
4 - BUILD TOOLS !
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
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
Front-End Tooling
Front-End Tooling
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 :
The Result :
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

More Related Content

What's hot

Automate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.jsAutomate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.js
Josh Lee
 
Django for n00bs
Django for n00bsDjango for n00bs
Django for n00bs
Jen Zajac
 
Blogging for hackers (english)
Blogging for hackers (english)Blogging for hackers (english)
Blogging for hackers (english)
Stephen Mariano Cabrera
 
Polyglot Gradle with Node.js and Play
Polyglot Gradle with Node.js and PlayPolyglot Gradle with Node.js and Play
Polyglot Gradle with Node.js and Play
Evgeny Goldin
 
Puppeteer: Getting Started
Puppeteer: Getting StartedPuppeteer: Getting Started
Puppeteer: Getting Started
HyunSeob Lee
 
Building plugins like a pro
Building plugins like a proBuilding plugins like a pro
Building plugins like a pro
Marko Heijnen
 
Novajs
NovajsNovajs
Novajs
wearefractal
 
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Ido Green
 
Intro to Puppeteer
Intro to PuppeteerIntro to Puppeteer
Intro to Puppeteer
Islam AlZatary
 
Bootstrapping your plugin
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your plugin
Marko Heijnen
 
Building the Front End with AngularJS
Building the Front End with AngularJSBuilding the Front End with AngularJS
Building the Front End with AngularJS
John Ennew
 
Node.js meets jenkins
Node.js meets jenkinsNode.js meets jenkins
Node.js meets jenkins
Evgeny Goldin
 
Status Updates 2.0
Status Updates 2.0Status Updates 2.0
Status Updates 2.0
duuble
 
Cucumber
CucumberCucumber
Cucumber
Bachue Zhou
 
Introduce cucumber
Introduce cucumberIntroduce cucumber
Introduce cucumber
Bachue Zhou
 
Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014
Stéphane Bégaudeau
 
Javascript
JavascriptJavascript
Front end workflow with yeoman
Front end workflow with yeomanFront end workflow with yeoman
Front end workflow with yeoman
hassan hafez
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
Austin Gil
 
Discover the power of browser developer tools
Discover the power of browser developer toolsDiscover the power of browser developer tools
Discover the power of browser developer tools
ylefebvre
 

What's hot (20)

Automate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.jsAutomate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.js
 
Django for n00bs
Django for n00bsDjango for n00bs
Django for n00bs
 
Blogging for hackers (english)
Blogging for hackers (english)Blogging for hackers (english)
Blogging for hackers (english)
 
Polyglot Gradle with Node.js and Play
Polyglot Gradle with Node.js and PlayPolyglot Gradle with Node.js and Play
Polyglot Gradle with Node.js and Play
 
Puppeteer: Getting Started
Puppeteer: Getting StartedPuppeteer: Getting Started
Puppeteer: Getting Started
 
Building plugins like a pro
Building plugins like a proBuilding plugins like a pro
Building plugins like a pro
 
Novajs
NovajsNovajs
Novajs
 
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
 
Intro to Puppeteer
Intro to PuppeteerIntro to Puppeteer
Intro to Puppeteer
 
Bootstrapping your plugin
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your plugin
 
Building the Front End with AngularJS
Building the Front End with AngularJSBuilding the Front End with AngularJS
Building the Front End with AngularJS
 
Node.js meets jenkins
Node.js meets jenkinsNode.js meets jenkins
Node.js meets jenkins
 
Status Updates 2.0
Status Updates 2.0Status Updates 2.0
Status Updates 2.0
 
Cucumber
CucumberCucumber
Cucumber
 
Introduce cucumber
Introduce cucumberIntroduce cucumber
Introduce cucumber
 
Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014
 
Javascript
JavascriptJavascript
Javascript
 
Front end workflow with yeoman
Front end workflow with yeomanFront end workflow with yeoman
Front end workflow with yeoman
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
 
Discover the power of browser developer tools
Discover the power of browser developer toolsDiscover the power of browser developer tools
Discover the power of browser developer tools
 

Similar to Front-End Tooling

The Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session IThe Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session I
Oded Sagir
 
Fun with Jenkins & Salesforce
Fun with Jenkins & SalesforceFun with Jenkins & Salesforce
Fun with Jenkins & Salesforce
Abhinav Gupta
 
PHP Mega Meetup, Sep, 2020, Anti patterns in php
PHP Mega Meetup, Sep, 2020, Anti patterns in phpPHP Mega Meetup, Sep, 2020, Anti patterns in php
PHP Mega Meetup, Sep, 2020, Anti patterns in php
Ahmed Abdou
 
Dictionary Within the Cloud
Dictionary Within the CloudDictionary Within the Cloud
Dictionary Within the Cloud
gueste4978b94
 
Riereta Node.js session 3 (with notes)
Riereta Node.js session 3 (with notes)Riereta Node.js session 3 (with notes)
Riereta Node.js session 3 (with notes)
Tekno Paul
 
Automate Yo' Self
Automate Yo' SelfAutomate Yo' Self
Automate Yo' Self
John Anderson
 
Moderne Android Builds mit Gradle
Moderne Android Builds mit GradleModerne Android Builds mit Gradle
Moderne Android Builds mit Gradle
inovex GmbH
 
Pilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot Tech Talk #10 — Practical automation by Kamil CholewińskiPilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot
 
Google Glass Mirror API Setup
Google Glass Mirror API SetupGoogle Glass Mirror API Setup
Google Glass Mirror API Setup
Diana Michelle
 
Forensic tools for in-depth performance investigations
Forensic tools for in-depth performance investigations Forensic tools for in-depth performance investigations
Forensic tools for in-depth performance investigations
SOASTA
 
Forensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance Investigations
Nicholas Jansma
 
Gulp.js & webpack
Gulp.js & webpackGulp.js & webpack
Gulp.js & webpack
Ted Hsu
 
Android Studio und gradle
Android Studio und gradleAndroid Studio und gradle
Android Studio und gradle
Dominik Helleberg
 
Auf Augenhöhe mit Android Studio und Gradle
Auf Augenhöhe mit Android Studio und GradleAuf Augenhöhe mit Android Studio und Gradle
Auf Augenhöhe mit Android Studio und Gradle
inovex GmbH
 
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ilya Grigorik
 
WordCamp Belfast DevOps for Beginners
WordCamp Belfast DevOps for BeginnersWordCamp Belfast DevOps for Beginners
WordCamp Belfast DevOps for Beginners
Stewart Ritchie
 
Gophers Riding Elephants: Writing PostgreSQL tools in Go
Gophers Riding Elephants: Writing PostgreSQL tools in GoGophers Riding Elephants: Writing PostgreSQL tools in Go
Gophers Riding Elephants: Writing PostgreSQL tools in Go
AJ Bahnken
 
12 tricks to avoid hackers breaks your CI / CD
12 tricks to avoid hackers breaks your  CI / CD12 tricks to avoid hackers breaks your  CI / CD
12 tricks to avoid hackers breaks your CI / CD
Daniel Garcia (a.k.a cr0hn)
 
What every C++ programmer should know about modern compilers (w/ comments, AC...
What every C++ programmer should know about modern compilers (w/ comments, AC...What every C++ programmer should know about modern compilers (w/ comments, AC...
What every C++ programmer should know about modern compilers (w/ comments, AC...
Sławomir Zborowski
 
From Zero to Hadoop: a tutorial for getting started writing Hadoop jobs on Am...
From Zero to Hadoop: a tutorial for getting started writing Hadoop jobs on Am...From Zero to Hadoop: a tutorial for getting started writing Hadoop jobs on Am...
From Zero to Hadoop: a tutorial for getting started writing Hadoop jobs on Am...
Alexander Dean
 

Similar to Front-End Tooling (20)

The Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session IThe Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session I
 
Fun with Jenkins & Salesforce
Fun with Jenkins & SalesforceFun with Jenkins & Salesforce
Fun with Jenkins & Salesforce
 
PHP Mega Meetup, Sep, 2020, Anti patterns in php
PHP Mega Meetup, Sep, 2020, Anti patterns in phpPHP Mega Meetup, Sep, 2020, Anti patterns in php
PHP Mega Meetup, Sep, 2020, Anti patterns in php
 
Dictionary Within the Cloud
Dictionary Within the CloudDictionary Within the Cloud
Dictionary Within the Cloud
 
Riereta Node.js session 3 (with notes)
Riereta Node.js session 3 (with notes)Riereta Node.js session 3 (with notes)
Riereta Node.js session 3 (with notes)
 
Automate Yo' Self
Automate Yo' SelfAutomate Yo' Self
Automate Yo' Self
 
Moderne Android Builds mit Gradle
Moderne Android Builds mit GradleModerne Android Builds mit Gradle
Moderne Android Builds mit Gradle
 
Pilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot Tech Talk #10 — Practical automation by Kamil CholewińskiPilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot Tech Talk #10 — Practical automation by Kamil Cholewiński
 
Google Glass Mirror API Setup
Google Glass Mirror API SetupGoogle Glass Mirror API Setup
Google Glass Mirror API Setup
 
Forensic tools for in-depth performance investigations
Forensic tools for in-depth performance investigations Forensic tools for in-depth performance investigations
Forensic tools for in-depth performance investigations
 
Forensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance Investigations
 
Gulp.js & webpack
Gulp.js & webpackGulp.js & webpack
Gulp.js & webpack
 
Android Studio und gradle
Android Studio und gradleAndroid Studio und gradle
Android Studio und gradle
 
Auf Augenhöhe mit Android Studio und Gradle
Auf Augenhöhe mit Android Studio und GradleAuf Augenhöhe mit Android Studio und Gradle
Auf Augenhöhe mit Android Studio und Gradle
 
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
 
WordCamp Belfast DevOps for Beginners
WordCamp Belfast DevOps for BeginnersWordCamp Belfast DevOps for Beginners
WordCamp Belfast DevOps for Beginners
 
Gophers Riding Elephants: Writing PostgreSQL tools in Go
Gophers Riding Elephants: Writing PostgreSQL tools in GoGophers Riding Elephants: Writing PostgreSQL tools in Go
Gophers Riding Elephants: Writing PostgreSQL tools in Go
 
12 tricks to avoid hackers breaks your CI / CD
12 tricks to avoid hackers breaks your  CI / CD12 tricks to avoid hackers breaks your  CI / CD
12 tricks to avoid hackers breaks your CI / CD
 
What every C++ programmer should know about modern compilers (w/ comments, AC...
What every C++ programmer should know about modern compilers (w/ comments, AC...What every C++ programmer should know about modern compilers (w/ comments, AC...
What every C++ programmer should know about modern compilers (w/ comments, AC...
 
From Zero to Hadoop: a tutorial for getting started writing Hadoop jobs on Am...
From Zero to Hadoop: a tutorial for getting started writing Hadoop jobs on Am...From Zero to Hadoop: a tutorial for getting started writing Hadoop jobs on Am...
From Zero to Hadoop: a tutorial for getting started writing Hadoop jobs on Am...
 

Recently uploaded

Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
softsuave
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
FIDO Alliance
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
DianaGray10
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and CitiesThe Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
Arpan Buwa
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
alexjohnson7307
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
Ivanti
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
Zilliz
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
FIDO Alliance
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 

Recently uploaded (20)

Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and CitiesThe Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 

Front-End Tooling

  • 1. FRONT-END TOOLING "For Smarter web developers " #GDG Blida #DEVFEST
  • 2. HOUSSEM YAHIAOUI AKA : EL-CODE Student & GDG Blida member & MEAN stack lover & AngularJS indoor speacker
  • 3. NO AGENDA ! So Let's Rock in !
  • 4. WE ALL DO AGREE THAT <WEB /> Become a frustrating place for newbies !
  • 5. BUT NOT IF YOU WORKED SMARTER
  • 6. But why exatcly it's So !
  • 7. 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 !
  • 8. IN OUR BIZ TIME = $$ & TIME IS THE KEY FACTOR TO STAY PRODUCTIVE
  • 9. That's was our problimatic Let's fix the problem
  • 10. 1 - Automate your workflow ! "Automation is having tools do the tedious work, so you don't have to."
  • 12. That' exactly what i'm trying to say ! Let's Start dig in!
  • 13. 1 - EMBRACE THE POWER OF : $ / #
  • 14. the MAC / iTerm2
  • 15. the MAC / Zsh
  • 16. Windows / Cmder : with enhancements spiced with Monokai colours and a custom prompt layout
  • 17. 2 - Question : What is the most used Tool by the Developers / Designers or even End user?
  • 18. Trivial answer : Simply your Web Broswers !
  • 19. 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
  • 24. That was the tip of the iceberg ! Let's dive in ...
  • 25. 3 - EXTEND YOUR TOOLS !
  • 26. CAN'T LIVE WITHOUT SUBLIME ! Pligunize IT !
  • 27. You have to </3 the Package Control
  • 28. 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> <p>Nice To Be HERE!</p> </section> <section> <h3>Hello GDG</h3> <p>Nice To Be HERE!</p> </section> </body>
  • 30. Git for commit lovers
  • 31. MarkDown Editing for conf writers
  • 32. And more ! 1. Code Snippets 2. Themes 3. Additional Language Support such : jade / less / scss / sass ...
  • 33. 4 - BUILD TOOLS !
  • 34. 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
  • 35. 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
  • 36. We talked about Speed ! Statistique : 98% of the over all rendring is due to the JS / CSS / HTML rendring .. We need a serious Solution !
  • 37. Two Words ! Files Minification
  • 38. But the process can be just overwelming !
  • 39. Did you heard about the Task Runners ?
  • 40. 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 -
  • 41. Examples ! Let's Check Grunt out !
  • 42. 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
  • 44. 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 !
  • 45. 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
  • 48. No Time for Downloading / Updating / Configuring packages ! Use a package manager ! Personal Choice : Bower !
  • 49. Bower how To ! We have in fact two ways to do the job !
  • 50. 1. From the Bower.json (manifest file) : + 2. From the Cli :
  • 52. Yeoman ! But we will see that in practise in our Code Lab
  • 53. Keep in touch with me ! G+ : +HoussemYahiaoui Twittre : @free_g33k Facebook : fcb.com/houssem.intern0t #peace