Frontdesk
=========

Community driven list of useful things for front end developers. [How to contribute?](https://github.com/miripiruni/frontdesk/wiki/How-to-contribute)

## Browsers bug trackers
- [Opera](https://bugs.opera.com)
- [Mozilla](https://bugzilla.mozilla.org)
- [Chromium](http://code.google.com/p/chromium/issues/list)
- [WebKit](http://www.webkit.org/quality/reporting.html)

## Mobile simulators
- [Opera Mini](http://www.opera.com/developer/opera-mini-simulator), [Opera Mobile 12](http://www.opera.com/developer/mobile-emulator), [Opera TV Emulator](http://business.opera.com/solutions/tv/emulator)
- [iOS Simulator in XCode](https://developer.apple.com/devcenter/ios/index.action)

## Browsers Dev Builds
- [Chrome Canary](https://tools.google.com/dlpage/chromesxs)
- [Internet Explorer 10](http://ie.microsoft.com/TESTdrive/)
- [Opera Next Desktop](http://www.opera.com/developer/next), [Opera Beta Mobile](https://play.google.com/store/apps/details?id=com.opera.browser.beta)
- [WebKit Nightly](http://nightly.webkit.org)
- [Firefox Nightly](http://nightly.mozilla.org), [Firefox Aurora](http://www.mozilla.org/en-US/firefox/aurora/)

## Where to download version X of browser Y?
- Firefox:
    - [Official archive](http://ftp.mozilla.org/pub/mozilla.org/)
    - [Bash script](https://github.com/omgmog/install-all-firefox)
    - [All Firefox Releases](http://mozilla-russia.org/products/firefox/history.html#release)
- Opera:
    - [Official archive](http://arc.opera.com/pub/opera/)
    - [Version history](http://www.opera.com/docs/history/)
- [Safari](http://support.apple.com/downloads/#safari)
- Chromium:
    - [All builds](http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html)
- Internet Explorer:
    - [IE 10](http://windows.microsoft.com/en-us/internet-explorer/ie-10-worldwide-languages)
    - [IE 9](http://windows.microsoft.com/en-us/internet-explorer/downloads/ie-9/worldwide-languages)

## Browsers plugins
- [Chrome Dev HTTP Client](https://chrome.google.com/webstore/detail/aejoelaoggembcahagimdiliamlcdmfm)
- [Firebug](http://getfirebug.com)
- [Web Developer for Firefox](http://chrispederick.com/work/web-developer/)
- [Chrome DevTools Casts for beginners](http://discover-devtools.codeschool.com/)

## Code snippets
- [Dabblet](http://dabblet.com) — interactive playground for quickly testing snippets of CSS and HTML
- [JSBin](http://jsbin.com) — JavaScript, HTML and CSS playground
- [gist.github](https://gist.github.com) — code snippets
- [JSFiddle](http://jsfiddle.net) — JavaScript, HTML and CSS playground
- [CodePen](http://codepen.io) — Another JS, HTML, CSS sandbox
- [RegExr](http://gskinner.com/RegExr/) — regular expression playground 

## Img
- [PNG compressor](http://www.punypng.com)
- [Tiny png](http://tinypng.org) — can make IE6 friendly PNGs
- [IMGO](https://github.com/imgo/imgo) — image optimization tool
- [SVGO](https://github.com/svg/svgo) — SVG optimization tool
- [JPEG compressor](http://www.jpegmini.com) — your photos on a diet
- [Smush.it](http://www.smushit.com/ysmush.it/) — online image optimization tool
- [placehold.it](http://placehold.it) — a quick and simple image placeholder service. By the way [placekitten](http://placekitten.com/) & [placeboobs](http://placeboobs.com/)
- [lorempixel](http://lorempixel.com) — placehold random images with dummy text
- [SpritePad](http://spritepad.wearekiss.com) — Sprite generator
- [Favicon generator](http://www.favicon.cc) — draw your favicon
- [Grumpicon](http://www.grumpicon.com) — tool processes a set of SVG files, generates PNG fallback images for legacy browsers

## JS
- [XML to JSON](http://jsontoxml.utilities-online.info)
- [MicroJS](http://microjs.com) — helps you discover the most compact-but-powerful microframeworks
- [JavaScript Beautifier](http://jsbeautifier.org)
- [pro.jsonlint.com](http://pro.jsonlint.com) — pro version of jsonlint.com
- [JavaScript Patterns Collection](http://shichuan.github.com/javascript-patterns)
- [Learning JavaScript Design Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book)

## JS frameworks
- [TodoMVC](http://todomvc.com) — helping you select an MV* framework.
- [Backbone.js](http://backbonejs.org) — give your JS App some Backbone with Models, Views, Collections, and Events.
- [Knockout](http://knockoutjs.com) — is a JavaScript MVVM library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML.
- [Knockback.js](http://kmalakoff.github.com/knockback/) — provides Knockout.js magic for Backbone.js Models and Collections.
- [AngularJS](http://angularjs.org) 
- [Ember.js](http://emberjs.com)
- [CanJS](http://canjs.us)
- [Spine](http://spinejs.com) — lightweight MVC library for building JavaScript applications.
- [Batman.js](http://batmanjs.org) — is a framework for building rich single-page browser applications with CoffeeScript or JavaScript.
- [Dojo](http://dojotoolkit.org)
- [Agility.js](http://agilityjs.com) — is an MVC library for client-side Javascript that lets you write maintainable code without compromising on development speed. It's write less, do more with maintainability.
- [Closure Library](http://code.google.com/p/closure-library/) is a broad, well-tested, modular, and cross-browser JavaScript library.
- [Metro JS](http://www.drewgreenwell.com/projects/metrojs) - plugin for jQuery which enables the Modern UI interface on the web.
- [toastr](https://github.com/CodeSeven/toastr) - simple JavaScript toast notifications.

## Testing frameworks
- [Jasmine](http://pivotal.github.com/jasmine/)
- [Mocha](http://visionmedia.github.com/mocha/)
- [QUnit](http://qunitjs.com)
- [Buster.js](http://busterjs.org)
- [YUI Test](http://yuilibrary.com/yui/docs/test/)
- [D.O.H.](http://dojotoolkit.org/reference-guide/1.8/util/doh.html)
- [wru](https://github.com/WebReflection/wru.git)

## HTML
- [HTML5 Rocks](http://html5rocks.com)
- [html5please](http://html5please.com)
- [mobilehtml5](http://mobilehtml5.org)
- [DirtyMarkup](http://www.dirtymarkup.com) - Quick/easy HTML auto formatting

## Template engines
- [Template-Engine-Chooser!](http://garann.github.com/template-chooser/)
- [Handlebars](http://handlebarsjs.com)
- [ICanHaz.js](http://icanhazjs.com)
- [Hogan.js](http://twitter.github.com/hogan.js/) — JavaScript templating from Twitter.
- [Jade](http://jade-lang.com)
- [EJS](http://embeddedjs.com)
- [JUST](https://github.com/baryshev/just)
- [Closure Templates](http://code.google.com/p/closure-templates/)
- [ECT](http://ectjs.com) — JavaScript template engine with CoffeeScript syntax
- [Dust](http://akdubya.github.com/dustjs/) — Asynchronous templates for the browser and node.js
- [TwigJS](https://github.com/fadrizul/twigjs) — A port of PHP template engine to JavaScript
- [yate](https://github.com/pasaran/yate) — Yet Another Template Engine

## CSS
- [Data URL Toolkit](https://github.com/sveinbjornt/Data-URL-Toolkit), [online service](http://dataurl.net)
- [css3please](http://css3please.com) — The Cross-Browser CSS3 Rule Generator
- [The CSS3 Test](http://css3test.com) — check your browser!
- [CSScomb](http://csscomb.com) — tool for sorting CSS properties in specific order
- [Procssor](http://procssor.com) — CSS Beautifier
- [Eric Meyer's reset](http://meyerweb.com/eric/tools/css/reset/index.html)
- [normalize.css](http://necolas.github.com/normalize.css/)
- [CSS Gradient finder](http://gradientfinder.com)
- [CSS Gradient generator](http://www.colorzilla.com/gradient-editor/)
- [Sprite Cow](http://www.spritecow.com) — CSS Sprites
- [CSS3 Transitions, Transforms and Animation Tutorial](http://css3.bradshawenterprises.com/all/)
- [Easing animation tool](http://matthewlein.com/ceaser/)
- [Cubic-Bezier](http://cubic-bezier.com)
- [Easings function](http://easings.net)
- [cssdb.co](http://cssdb.co) — Popular CSS Libraries
- [Helium](https://github.com/geuis/helium-css) — JavaScript tool to scan your site and show unused CSS
- [Media Query Builder](http://arcsec.ca/media-query-builder/)
- [The Responsinator](http://www.responsinator.com) — helps to see responsive site will look on the most popular devices
- [Stylie](http://jeremyckahn.github.io/stylie/) — A fun CSS animation tool
- [autoprefixer](https://github.com/ai/autoprefixer) — Parse CSS and add prefixed properties and values by actual Can I Use database
- [Patternify](http://www.patternify.com) — Draw your own Pattern then just copypaste CSS code
- [Screensiz.es](http://screensiz.es) - Table of characteristics of popular devices.
- [DPI Love](http://dpi.lv) - Calculation DPI of devices.

## CSS Preprocessors
- [Less](http://lesscss.org)
    - [CSS to Less](http://css2less.cc)
    - [LESS Elements](http://lesselements.com) – a set of useful mixins for the LESS
    - [lesshat.com](http://lesshat.com) – smart LESS mixins
- [SASS and SCSS](http://sass-lang.com)
    - [CSS to SASS](http://css2sass.heroku.com)
    - [Compass](http://compass-style.org)
        - [Compass Ceaser CSS Easing Transitions](https://github.com/jhardy/compass-ceaser-easing)
        - [Compass Reference Browser](http://compass.aether.ru)
    - [sassmeister](http://sassmeister.com) — playground for Sass
    - [Bourbon](http://bourbon.io) — A simple and lightweight mixin library for Sass. Also, [neat](http://neat.bourbon.io/).
- [Stylus](http://learnboost.github.com/stylus/)
    - [nib](http://visionmedia.github.com/nib/) — library for the Stylus, providing robust cross-browser CSS3 mixins
- [xCSS](http://xcss.antpaw.org) — PHP based CSS preprocessor
- [Roole](http://roole.org/) — a language that compiles to CSS
- [Rework](https://github.com/visionmedia/rework) — arbitrary CSS preprocessing library for node.js and the browser

## CSS frameworks
- [Twitter bootstrap](http://twitter.github.com/bootstrap/)
- [Zurb Foundation](http://foundation.zurb.com)
- [YUI](http://yuilibrary.com)
- [Blueprint CSS](http://www.blueprintcss.org)
- [HTML5 boilerplate](http://html5boilerplate.com) — The web’s most popular front-end template
- [HTML5 mobile boilerplate](http://html5boilerplate.com/mobile/) — A best practice baseline for your mobile web app
- [HTML5 Reset](http://html5reset.org) – One more boilerplate
- [HTML Email boilerplate](http://htmlemailboilerplate.com)
- [Initializr](http://www.initializr.com) — Choose your boilerplate
- [960gs](http://960.gs) — CSS grids system framework
- [The Semantic Grid System](http://semantic.gs)
- [1140 CSS Grid](http://cssgrid.net)
- [Fluid 960 Grid System](http://www.designinfluences.com/fluid960gs/)
- [Less Framework](http://lessframework.com)
- [Skeleton](http://www.getskeleton.com)
- [inuit.css](http://csswizardry.com/inuitcss/)
- [baseline](http://baselinecss.com)
- [Frameless grid](http://framelessgrid.com)
- [Kube](http://imperavi.com/kube/)

## Style guides and methodologies
- [Github style guide](http://github.com/styleguide)
- [Google style guide](http://code.google.com/p/google-styleguide/)
- [Harry Roberts' CSS Guidelines](https://github.com/csswizardry/CSS-Guidelines#readme)
- [SMACSS](http://smacss.com) — Scalable and Modular Architecture for CSS
- [OOCSS](http://oocss.org) — Object oriented CSS
- [BEM](http://bem.github.com/bem-method/pages/beginning/beginning.en.html) — Block Element Modificator
- [Pragmatic jQuery Style](https://github.com/modulejs/pragmatic-jquery)
- Principles of writing consistent, idiomatic [CSS](https://github.com/necolas/idiomatic-css) and [HTML](https://github.com/necolas/idiomatic-html)

## Misc
- [caniuse](http://caniuse.com)
- [jquer.in](http://jquer.in) - A collection of jQuery plugins organized according to their category.
- [The Toolbox](http://www.thetoolbox.cc) — a collection of the best time-saving apps, tools, and widgets from around the web
- [humans.txt](http://humanstxt.org)
- [robots.txt](http://www.robotstxt.org)
- [Adobe Edge Inspect](http://html.adobe.com/edge/inspect/)
- [Unicode Emoticons](http://unicodeemoticons.com)
- [Special Characters Easy to Paste](http://copypastecharacter.com)
- [Entity Conversion Calculator](http://www.evotech.net/articles/testjsentities.html)
- [ipsum.me](http://ipsum.me)
- [Schema.org](http://schema.org) — Most modern microformat documentation supported by Google, Bing, Yandex and Yahoo
- [Microformats.org](http://microformats.org) — hcard, hcalendar and etc.
- [base64 converter](http://webcodertools.com/imagetobase64converter/Create) (from computer)
- [pasteboard.co](http://pasteboard.co) — image sharing web app
- [Color Scheme Designer](http://colorschemedesigner.com/) - find resonate colors for a great design.
- [Windows-8-like animations with CSS3 and jQuery](http://sarasoueidan.com/blog/windows8-animations) - a demo made by Sara Soueidan about creating a Modern UI design like in Windows 8.
- [CSS-Tricks snippets](http://css-tricks.com/snippets/) — useful code snippets
- [TypeScript](http://www.typescriptlang.org/)

## Stats
- [StatCounter](http://gs.statcounter.com)
- [LiveInternet](http://www.liveinternet.ru/stat/ru/browsers.html?period=month)
- [OpenStat](https://www.openstat.ru/counter:meta/trends/report/browser/)

## Performance
- [YUI JS, CSS compressor](http://www.refresh-sf.com/yui/)
- [CSSO](http://afelix.github.com/csso/) — Cleaver CSS optimizer
- [YSlow](http://developer.yahoo.com/yslow/) — Cross-browser plugin for page speed and performance testing
- [Google page speed](https://developers.google.com/speed/pagespeed/) — Page speed measurement tools collection from Google
- [Web page test](http://www.webpagetest.org) — Check page speed from multiple locations around the globe using real browsers
- [jsPerf — JavaScript performance playground](http://jsperf.com)

## CDN
- [Google CDN](https://developers.google.com/speed/libraries/devguide)
- [Yandex CDN](http://api.yandex.ru/jslibs/libs.xml)
- [Microsoft CDN](http://www.asp.net/ajaxlibrary/cdn.ashx)
- [cdnjs](http://cdnjs.com) — We host it all - JavaScript, CSS, SWF, images, etc


## Manuals
- [jQuery Docs](http://docs.jquery.com)
- [Try jQuery](http://try.jquery.com/)
- [MDN](https://developer.mozilla.org)
- [dochub.io](http://dochub.io) — CSS, HTML, JavaScript, DOM, jQuery, PHP, Python
- [devdocs.io](http://devdocs.io) — HTML, CSS, DOM, DOM Events, JavaScript, jQuery
- [overapi.com](http://overapi.com) — Collecting All Cheat Sheets

## Validators & Quality Tools
- [W3C HTML Validator](http://validator.w3.org)
- [W3C CSS Validator](http://jigsaw.w3.org/css-validator/)
- [CSSLint](http://csslint.net) — static analysis tool for CSS code
- [RECSS](http://twitter.github.com/recess) — A simple and attractive code quality tool for CSS built on top of LESS
- [JSLint](http://jslint.com) — The JavaScript Code Quality Tool by Douglas Crockford
- [JSHint](http://jshint.com) — community-driven tool to detect errors and potential problems in JavaScript code
- [JSCS](https://github.com/mdevils/node-jscs) — JavaScript Code Style checker

## Fonts
- [CSSFontStack](http://cssfontstack.com)
- [Font Squirrel](http://www.fontsquirrel.com)
- [Google WebFonts](http://www.google.com/webfonts/)
- [Fontcustom](http://www.fontcustom.com) — command line utility to generate fonts from separate svg/eps files
- [Fontello](http://fontello.com) — easy way to combine selected icons from popular icons sets into custom made font
- [Online Font Converter](http://onlinefontconverter.com)
- [Check font name by screenshot](http://www.whatfontis.com)

## CLI Apps
- [Grunt](http://gruntjs.com) - Javascript task runner
- [Yeoman](http://yeoman.io) - Developer workflow
- [Bower](http://bower.io) - Javascript package manager

## OS X Apps
- [ColorSnapper](http://colorsnapper.com) — easy-to-use tool for quickly finding out the color of any pixel on the screen
- [Gitbox](http://gitboxapp.com) — version control as easy as Mail
- [LiveReload](http://livereload.com) — "As soon as you save a file, it is preprocessed as needed, and the browser is refreshed..."
- [PixFit](http://splashsoftware.pl/pixfit/) — measure tool
- [xScope](http://xscopeapp.com) — for measuring, inspecting & testing on-screen graphics and layouts
- [MAMP PRO](http://www.mamp.info/en/mamp-pro/) — Mac, Apache, MySQL and PHP
- [DataURLMaker](https://github.com/sveinbjornt/Data-URL-Toolkit/tree/master/Releases)
- [ImageOptim](http://imageoptim.com) — drag'n'drop UI and various optimisation tools
- [ImageAlpha](http://pngmini.com) — converts 24-bit PNG to paletted 8-bit with full alpha channel
- [BLESS CSS](http://blesscss.com) — fighting IE's CSS selectors limit, and nice tool for checking CSS selectors count
- [Kaleidoscope](http://www.kaleidoscopeapp.com/) — a nice diff tool
- [Dash](http://kapeli.com/dash) — gives you instant offline access to 80+ API documentation sets.

## Git
- [GitHowTo](http://githowto.com)
- [Pro Git](http://git-scm.com/book)
- [Try Git](http://try.github.com)
- [LearnGitBranching](http://pcottle.github.io/learnGitBranching/)