Front-End Tooling
•
3 j'aime•523 vues
All the new and awesome way into the ways and tricks behind the new front-end tooling ..
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Front-End Tooling
Similaire à Front-End Tooling (20)
Dernier
Dernier (20)
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
- 20. DEV Tool !
- 22. Page Speed test !
- 23. And many more !
- 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>
- 29. Navigate Using Ctrl + p
- 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
- 43. 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 :
- 51. The Result :
- 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