Mais conteúdo relacionado Semelhante a 45 Tools to Boost Your Front-End (20) 45 Tools to Boost Your Front-End2. Nicolas Pennec
● Full-Stack Web Developer
○ JavaScript
○ PHP
○ JEE
● Rennes, France
● Co-Founder of RennesJS
● @NicoPennec / pennec.io (WIP)
#45tools
49. Master your Dev Tools
● Chrome Dev Tools + Chrome Canary
● Firefox Dev Tools / Firefox Developer Edition
● Microsoft F12 Developer Tools
● …
#45tools
53. Resources (1/3)
● http://devdocs.io/
● http://angular.io/
● http://aurelia.io/
● https://www.polymer-project.org/
● http://materializecss.com/
● http://fezvrasta.github.io/bootstrap-material-design/
● http://gooseberrycreative.com/cmder/
● https://github.com/sass/node-sass
● https://babeljs.io/
● http://cssnext.io/
● http://jscs.info/
● http://csslint.net/
● https://github.com/danielstjules/jsinspect
● http://jspm.io/
● http://browserify.org/
#45tools
54. Resources (2/3)
● http://webpack.github.io/
● http://pesticide.io/
● http://fontface.ninja/
● http://callmecavs.github.io/layzr.js/
● https://github.com/giakki/UnCSS
● http://fontello.com/
● https://github.com/zeman/perfmap
● https://github.com/addyosmani/critical
● http://www.browsersync.io/
● http://nightwatchjs.org/
● http://webdriver.io/
● https://github.com/marmelab/gremlins.js
● http://www.webpagetest.org/
● https://github.com/gmetais/grunt-devperf
● http://vorlonjs.com/
#45tools
55. Resources (3/3)
● https://github.com/djfarrelly/MailDev
● https://github.com/typicode/json-server
● http://frisbyjs.com/
● https://github.com/jariz/vibrant.js/
● https://github.com/imsky/holder
● http://momentjs.com/
● https://github.com/ConnorAtherton/loaders.css
● https://github.com/astoilkov/console.message
● http://nvd3.org
● http://jspdf.com/
● http://www.ionicframework.com/
● https://facebook.github.io/react-native/
● https://wappalyzer.com/
● Press F12
● https://github.com/trending?since=monthly
#45tools
Notas do Editor http://www.breizhcamp.org/ https://twitter.com/NicoPennec
http://pennec.io http://rennesjs.org http://devdocs.io/ http://angular.io/ http://aurelia.io/ https://www.polymer-project.org/ http://materializecss.com/ http://fezvrasta.github.io/bootstrap-material-design/ http://gooseberrycreative.com/cmder/
https://github.com/sass/node-sass https://babeljs.io/ http://cssnext.io/ http://jscs.info/ http://csslint.net/ https://github.com/danielstjules/jsinspect
http://jspm.io/ http://browserify.org/ http://webpack.github.io/ http://pesticide.io/ http://fontface.ninja/ https://github.com/callmecavs/layzr.js https://github.com/giakki/UnCSS
UnCSS un outil qui va effacer le CSS inutilisé de votre feuille de style.
Interet => gain de poids => temps de chargement et de traitement de CSS
Utilise PhantomJS pour le rendu et pars ensuite le css (avec CSS Parse = css parser pour node)
Lib sous Npm évidemment, configurable (media queries, ignore list, fichiers cibles, etc.)
Task Grunt / Gulp / Brocoli
Style ajouté par interaction utilisateur non détecter (hover, click, ….) => mettre en « ignore »
http://fontello.com/ https://github.com/zeman/perfmap https://github.com/addyosmani/critical http://www.browsersync.io/ http://nightwatchjs.org/ http://webdriver.io/
https://github.com/marmelab/gremlins.js http://www.webpagetest.org/ https://github.com/gmetais/grunt-devperf http://vorlonjs.com/
https://github.com/djfarrelly/MailDev https://github.com/typicode/json-server http://frisbyjs.com/ https://github.com/jariz/vibrant.js/ https://github.com/imsky/holder http://momentjs.com/
https://github.com/ConnorAtherton/loaders.css https://github.com/astoilkov/console.message http://nvd3.org http://jspdf.com/ http://www.ionicframework.com/ https://facebook.github.io/react-native/ https://wappalyzer.com/ Press F12 https://github.com/trending?since=monthly (BONUS)
http://rennesjs.org https://github.com/pazguille/offline-first http://dotdotdot.frebsite.nl/ https://twitter.com/NicoPennec
http://pennec.io