Frontend Developers' Toolkit

A resource collecting a suite of useful tools and technologies for front end web development.

Code Standards

• Isobar Code Standards & Best Practice - document which contains guidelines for front end coding for you/you and your team.
• CSS Style Guide - an excellent high-level overview of CSS best practices
• Idiomatic CSS Guidelines - outlines a reasonable style guide for CSS development which encourages the use of existing, common, sensible patterns.

Documentation Tools

• Style Docco - auto generate style guides from CSS comments using Node.js
• PEARS - collect, test, and experiment with interface pattern pairings of CSS & HTML -

###Boilerplates

• HTML5 Boilerplate - the professional frontend developers's base HTML/CSS/JS template for a fast, robust and future-safe site.
• 320andup - the ‘tiny screen first’ responsive boilerplate.
• Zurb Foundation - An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

###CSS Preprocessors

• Sass - an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
• Compass - works with Sass to bring you standarised mixins and advanced tools (including auto spriting!).
• Less - LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. Runs on client and server sides.
• Stylus - Expressive, robust, feature-rich CSS language built for nodejs.

###Javascript

####Javascript Frameworks

A excellent list of javascript frameworks is maintained over at www.remotesynthesis.com.

####Mobile Frameworks

Quojs - micro, mobile JS library with great gesture support.

####Javascript Unit Testing

• QUnit - QUnit is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).
• Jasmine - Jasmine is a behavior-driven development framework for testing your JavaScript code.
• JSCheck - JSCheck is a specification-driven testing tool. From a description of the properties of a system, function, or object, it will generate random test cases attempting to prove those properties, and then report its findings.

####Plugins

• ScrollPath - create custom scroll paths for navigating via scroll.
• Chosen - create super enhanced select and multiple select form UI's.
• Skrollr - super powered parallax CSS transition lib. No jQuery dependencies
• Butterfly Accessible Lightbox - accessible Lightbox solution
• Sequence CSS3 Animated Slidehosw - a Responsive Slider with Advanced CSS3 Transitions

Performance

• Yahoo Web Performance Guidelines - Yahoo's best practices for making web pages fast. The list includes 35 best practices divided into 7 categories.
• SpriteMe - a bookmarklet that runs on any page, finds background images, groups images into sprites, generates the sprite, recomputes CSS background-positions injects the sprite into the current page.
• H5BP Node Build Script - the Node port of the HTML5 Build Script

###Process automation

• Grunt - a task-based command line build tool for JavaScript projects.
• Codekit - a gui interface which helps you work faster by combining Sass, Minifaction, Image Compression, Live Reload, JSHint/Lint and much more!

###Device/Browser Testing

• Browserling - interactive cross-browser testing via Canvas and Javascript.
• Browser Stack - live web-based cross browser testing for desktop and mobile devices.
• Mogo Test - automated web consistency testing comparison tool. Automatically checks for geometric layout changes across a suite of browsers.
• Adobe Shadow - inspect and preview web workflows on iOS and Android devices.
• Remote Tilt - emulate device motion events in your test page which can either be a regular browser or even a mobile emulator.

###Editors

• Sublime Text 2 - the fastest and most incredible code editor. Boasts an active community and plugin ecosystem.
• Coda - thr all in one editor for MacOS. Combines text editor + file transfer + svn + css + terminal + books + more!

###Responsive

####Responsive Grids

• Responsify.it - custom responsive grid generator.

####Responsive Layout Patterns

• Off Canvas Swipe - a proof of concept for "off canvas" mobile navigation using Zepto or jQuery.

####Responsive Image Solutions

• Foresight.js - tell if the user's device is capable of viewing high-resolution images and judge if the user's device currently has a fast enough network connection to receive them.
• Responsive Images - deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions.
• AdaptiveImages - a solution to automatically create, cache, and deliver device-appropriate versions of your website’s content images. It does not require you to change your mark-up.

###Charts & Graphing

• Envision - a library for creating fast, dynamic and interactive HTML5 visualizations.
• Google Charts - interactive charts and data tools based on SVG and HTML5.
• d3.js - advanced visualisation JavaScript library for manipulating documents based on data.
• Crossfilter - not strictly a charting library, but rather a JavaScript library for exploring large multivariate datasets in the browser. Works well with d3.js.
• YUI Charts - provides a JavaScript API for visualizing data in a variety of formats across a browser test baseline. Accessibility support built in!

###HTML Email

• HTML Email Boilerplate - a template, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients.
• Fractal - build your email just like a web page using CSS, and Fractal will make it work in all major email clients.
• Inline Styler - converts CSS rules into inline style attributes.
• Litmus - online email testing application.

###Misc Tools & Bookmarklets

• Entity Lookup - allows you to quickly find the HTML entity based on how it looks.
• Media Query Bookmarklet - shows which Media Queries are currently active on your page inline and in realtime.
• HTML5 Outliner Bookmarklet - a bookmarklet to test your HTML5 outlines in the browser.
• FixieJS - an open source tool that automatically adds filler content to HTML documents.
• Pano2Vr - create HTML5-based virtual tours and panorama's.