Rocket Surgery for Brain Scientists
a.k.a Frontend Tooling
@waako
What is Frontend Tooling?
A collection of tools to help automate, speed up and improve developmet workflows.
What tools build these slides
Node.js
Grunt
On a good day
It's easy:
$ npm install
$ grunt watch
What does this provide us with?
- sass
- autoprefixr
- uglify
- cssmin
- jshint
- connect
- qunit
- watch
- zip
Give us an idea of what tools we could use
CSS Test
CSS Comb
CSS Lint
Autoprefixr
CSS Shrink
CSS Colorguard
Linting
Gulp
Grunt
Broccoli
Brunch
Emmet
Pageres
PerfMetrics
WebPageTest
Critical Path
Iconizr
Browserify
Font-face render check
Modern.ie
PhantomJS
Yeoman
Sitespeed
PerfMap
Performance Budget
Prettify
Static Inline
Regression Testing
HTML Lint
Watch
Minification
Concatenation
Optimise Performance
IE8 Linter
Styleguide conformance
Vulcanize
UnCSS
CSS Stats
BackstopJS
A11Y
PerfBudget
TMI
disclaimer: there are more, I just got bored!
## Type of tools
* Build
* Testing / Validation
* Optimisation (CSS, JS, Images, Font)
* Performance
* Analysis / Stats
* Design
**Also:**
the tools to install & manage these tools…
* Node.js
* npm
* Bower
* …
# Build
Things you are probably already doing
### Scaffolding
[Yeoman](http://yeoman.io/generators/) provides you with a template which builds a working environment in one command:
[Drupal theme generator](https://github.com/frontend-united/generator-drupal-theme)
[Hedley](https://github.com/Gizra/generator-hedley)
headless Drupal backend, Angular app client, Behat and PhantomCSS tests
[Drupal profile generator](https://github.com/itarato/Yeoman-Drupal-profile)
### Code Linting
### Beautify / Prettify
### Minification
### Uglification
### Compiling everything
### Livereload
### Frameworks
Bootstrap
Foundation
Web Starter Kit
### Styleguides & Documentation
Automatically generated from code
### Images
Generate sprites
SVG fallpack images
## Automated Browser testing
* [Pageres](https://github.com/sindresorhus/pageres)
Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive.
* [Browserify](http://www.browsersync.io/)
sync browsing & actions between devices
### Headless Browser engines
PhantomJS:
headless WebKit scriptable with Javascript
### Visual Regression testing
Generate page screenshots with diff with every code change
### IE (*yeah I know*)
* [ie8 linter](https://github.com/israelidanny/ie8linter)
* [Modern.IE Static Code Scan](https://github.com/InternetExplorer/modern.IE-static-code-scan)
analyzes the HTML, CSS, and JavaScript of a site or application for common coding issues.
## Code Reviews
Highlight issues in your HTML, CSS, JS…
### CSS
* [CSS Test](http://csste.st/)
The why and how of CSS testing
* [Revenge](https://github.com/Heydon/REVENGE.CSS)
Puts pink box & comic sans around your dirty work
* [CSS Colorguard](https://github.com/SlexAxton/css-colorguard)
Keep a watchful eye on your css colors.
### JS
* jsfmt
* fixmyjs
* jsinspect
### Accessibility
* [a11y.css](https://github.com/ffoodd/a11y.css)
Roughly evaluate a site's quality by simply including it as an external stylesheet.
* [a11y](https://github.com/addyosmani/a11y)
Easy accessibility audits powered by the Chrome Accessibility Tools.
### Drupal
* [Gulp DrupalCS](https://github.com/patrickocoffeyo/drupalcs)
Portable Gulp tool that checks a Drupal installation for JavaScript and PHP syntax errors.
## CSS
* [CSS Comb](https://github.com/csscomb/csscomb.js)
Reorganises your CSS into defined order
* [Autoprefixr](https://github.com/postcss/autoprefixer)
* [UnCSS](https://github.com/giakki/uncss)
Removes unused CSS from your stylesheets
## Images
* [TMI(Too Many Image)](https://github.com/addyosmani/tmi)
* [Grunt Image](https://github.com/1000ch/grunt-image)
Optimize PNG, JPEG, GIF, SVG images
## Markup
* [Grunt Static Inline](https://github.com/dayvson/grunt-static-inline)
Replace url from static files such as img,js,css an put inline in a template.
## Page Speed
* [PageSpeed ngrok](https://github.com/jrcryer/grunt-pagespeed-ngrok-sample)
Run mobile and desktop performance tests for your deployed site using Google PageSpeed Insights, uses grunt-pagespeed, psi and gpagespeed for local development environments.
## Performance Budgets
* [Intro by Tim Kadlec](http://timkadlec.com/2013/01/setting-a-performance-budget/)
## Performance Mapping
* [PerfMap](https://github.com/zeman/perfmap)
Front-end performance heatmap of resources loaded in the browser using the Resource [Timing API](https://camo.githubusercontent.com/cffc7939b714e2a0795732dce6db97c6ea3275a2/687474703a2f2f7a656d616e2e6769746875622e696f2f706572666d61702f6578616d706c652e6a7067)
## Development Performance
* [DevPerf](https://github.com/gmetais/grunt-devperf)
Helps front-end developers to reach a good quality and good performances
## Browser Metrics
* [Phantomas](https://github.com/macbre/phantomas)
PhantomJS-based web performance metrics collector and monitoring tool
* Page Speed Insights
## Code Stats
* [CSS Stats](https://github.com/cssstats/cssstats)
* [Houndci.com](https://github.com/thoughtbot/hound): Review your Ruby, JavaScript, CoffeeScript, and SCSS code for style guide violations with a trusty hound.
## Styleguides
* [Styleguides.io](https://github.com/maban/styleguides)
* [Lonely Planet's rizzo](https://github.com/lonelyplanet/rizzo)
This barely scratches the surface.
## People worth watching
* [Sindre Sorhus](https://github.com/sindresorhus/)
* [Addy Osmani](https://github.com/addyosmani/)
* [Chris Ruppel](https://github.com/rupl/)
Great [Frontend Ops talk](https://github.com/rupl/frontend-ops)
