45 tools to boost your front-end

BreizhCamp 2015

#BzhCmp

#45tools #BzhCmp

BreizhCamp 2015

#BzhCmp

45 Toolsto Boost Your Front-

End

Nicolas Pennec - @NicoPennec

2015/06/12

Nicolas Pennec

● Full-Stack Web Developer○ JavaScript○ PHP○ JEE

● Rennes, France

● Co-Founder of RennesJS

● @NicoPennec / pennec.io (WIP)

#45tools

RennesJS.org #45tools

Rules #45tools

● 1 min / slide

● Auto Play

● Questions at the end

● #45tools #bzhcmp

$document.ready() #45tools

DevDocs.io #45tools

Angular.io (2.0 alpha) #45tools

Aurelia.io #45tools

Polymer-project.org #45tools

Materializecss.com #45tools

Boostrap-Material-Design #45tools

Cmder #45tools

sass/node-sass #45tools

Babeljs.io #45tools

cssnext.io #45tools

JSCS.info #45tools

CSSLint.net #45tools

danielstjules/JSInspect #45tools

JSPM.io #45tools

browserify.org #45tools

webpack.github.io #45tools

Pesticide.io #45tools

FontFace.Ninja #45tools

callmecavs/layzr #45tools

giakki/UnCSS #45tools

Fontello.com #45tools

zeman/Perfmap #45tools

addyosmani/Critical #45tools

BrowserSync.io #45tools

NightwatchJS.org #45tools

Webdriver.IO #45tools

marmelab/gremlins.js #45tools

WebPageTest.org

WPT Private Instance + Vagrant

https://github.com/NicoPennec/vagrant-webpagetest

#45tools

gmetais/grunt-devperf #45tools

VorlonJS.com #45tools

djfarrelly/MailDev #45tools

typicode/json-server #45tools

FrisbyJS.com #45tools

jariz/vibrant.js #45tools

imsky/holder #45tools

MomentJS.com #45tools

connoratherton/Loaders.css #45tools

astoilkov/console.message #45tools

NVD3.org #45tools

jsPDF.com #45tools

ionicframework.com #45tools

facebook/React-Native #45tools

Wappalyzer.com #45tools

Master your Dev Tools

● Chrome Dev Tools + Chrome Canary● Firefox Dev Tools / Firefox Developer

Edition● Microsoft F12 Developer Tools● …

#45tools

GitHub.com/Trending #45tools

Communities!!! #45tools

Success… #45tools

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

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

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

Thanks!

@NicoPennec / pennec.io

#45tools