Front-End Tooling
3 likes528 views
This document discusses various front-end tooling that can help developers work smarter and more efficiently. It recommends embracing tools like terminal shells and customizing browsers with developer tools. Popular tools are also mentioned like Sublime Text, which can be extended with plugins, packages and themes. Automating workflows with build tools like Grunt and package managers like Bower is also recommended to avoid tedious and repetitive tasks. Overall the document promotes maximizing productivity by leveraging the power of front-end tools.
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