Frontdesk

Community driven list of useful things for front end developers. How to contribute?

Browsers bug trackers

• Opera
• Mozilla
• Chromium
• Webkit

Mobile simulators

• Opera Mini, Opera Mobile
• iOS Simulator in XCode

Browsers Dev Builds

• Chrome Canary
• IE 10
• Opera Next Beta, Opera Next Labs, Opera Next Nightly
• Webkit Nightly
• Firefox Nightly, Firefox Aurora

Where to download version X of browser Y?

• Firefox:
  • Official archive
  • Bash script
  • All Firefox Releases
• Opera:
  • Official archive
  • Version history
• Safari
• Chromium:
  • All builds

Browsers plugins

• Chrome Dev HTTP Client
• Firebug
• Web Developer for Firefox

Code snippets

• Dabblet
• JSBin
• gist.github
• JSFiddle
• CodePen
• refiddle
• RegExr
• CSS-Tricks snippets

Img

• PNG compressor
• Tiny png - can make IE6 friendly PNGs
• IMGO - image optimization tool
• JPEG compressor
• [Smush.it] (http://www.smushit.com/ysmush.it/) - online image optimization tool
• placehold.it
• lorempixel
• Sprite generator
• Favicon generator

JS

• [XML to JSON](XML to JSON http://jsontoxml.utilities-online.info)
• MicroJS
• JavaScript Beautifier
• JavaScript Patterns Collection

JS frameworks

• Backbone.js - give your JS App some Backbone with Models, Views, Collections, and Events.
• Knockout - is a JavaScript MVVM library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML.
• Knockback.js - provides Knockout.js magic for Backbone.js Models and Collections.
• AngularJS
• Ember.js
• CanJS
• Spine - lightweight MVC library for building JavaScript applications.
• Batman.js - is a framework for building rich single-page browser applications with CoffeeScript or JavaScript.
• Dojo
• Agility.js - 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 is a broad, well-tested, modular, and cross-browser JavaScript library.
• APE(Ajax Push Engine) APE is a full-featured OpenSource solution designed for Ajax Push. It includes a comet server and a Javascript Framework. APE allows to implement any kind of real-time data streaming to a web browser, without having to install anything on the client-side.

Testing frameworks

• Jasmine
• Mocha
• QUnit
• Buster.js
• YUI Test
• D.O.H.
• wru

Notify

• Gritter

Emoji

• jquery-emojiarea

Wizard

• jQuery-steps

HTML

• html5please
• mobilehtml5

Template engines

• Template-Engine-Chooser!
• Handlebars
• ICanHaz.js
• Hogan.js - JavaScript templating from Twitter.
• Jade
• EJS
• JUST
• Closure Templates
• ECT - JavaScript template engine with CoffeeScript syntax
• Dust - Asynchronous templates for the browser and node.js
• TwigJS - A port of PHP template engine to JavaScript
• yate - Yet Another Template Engine

CSS

• Data URL Toolkit, online service
• css3please
• The CSS3 Test
• CSScomb - tool for sorting CSS properties in specific order
• Procssor - CSS Beautifier
• Eric Meyer's reset
• normalize.css
• CSS Gradient finder
• CSS Gradient generator
• Sprite Cow - CSS Sprites
• CSS3 Transitions, Transforms and Animation Tutorial
• Easing animation tool
• Cubic-Bezier
• Easings function
• Responsive CSS grid system

CSS Preprocessors

• Less
  • CSS to Less
  • LESS Elements – a set of useful mixins for the LESS
  • lesshat.com – smart LESS mixins
• SASS and SCSS
  • CSS to SASS
  • Compass
    • Compass Ceaser CSS Easing Transitions
  • sassmeister - playground for Sass
• Stylus
  • nib - library for the Stylus, providing robust cross-browser CSS3 mixins
• xCSS - PHP based CSS preprocessor

CSS frameworks

• Twitter bootstrap
• Zurb Foundation
• YUI
• Blueprint CSS
• HTML5 boilerplate - The web’s most popular front-end template
• HTML5 mobile boilerplate - A best practice baseline for your mobile web app
• HTML5 Reset – One more boilerplate
• HTML Email boilerplate
• Initializr — Choose your boilerplate
• 960gs - CSS grids system framework
• The Semantic Grid System
• 1140 CSS Grid
• Fluid 960 Grid System
• Less Framework
• Skeleton
• inuit.css
• baseline
• Frameless grid

Style guides and methodologies

• Github style guide
• Google style guide
• SMACSS - Scalable and Modular Architecture for CSS
• OOCSS - Object oriented CSS
• BEM - Block Element Modificator

Misc

• caniuse
• The Toolbox
• humans.txt
• robots.txt
• Adobe Edge Inspect
• Unicode Emoticons
• Special Characters Easy to Paste
• Entity Conversion Calculator
• ipsum.me
• Schema.org - Most modern microformat documentation supported by Google, Bing, Yandex and Yahoo
• Microformats.org - hcard, hcalendar and etc.
• base64 converter

Stats

• StatCounter
• LiveInternet
• OpenStat

Performance

• YUI JS, CSS compressor
• CSSO - Cleaver css optimizer
• YSlow - Cross-browser plugin for page speed and performance testing
• Google page speed - Page speed measurement tools collection from Google
• Web page test - Check page speed from multiple locations around the globe using real browsers
• jsPerf — JavaScript performance playground

CDN

• Google CDN
• Yandex CDN
• cdnjs

Manuals

• jQuery Docs
• MDN
• CSS, HTML, JavaScript, DOM, jQuery, PHP, Python

Validators

• W3C HTML Validator
• W3C CSS Validator
• CSSLint
• JSLint
• JSHint

Fonts

• CSSFontStack
• Font Squirrel
• Google WebFonts
• Fontello — iconic fonts scissors
• Online Font Converter
• Check font name by screenshot

OS X Apps

• ColorSnapper - easy-to-use tool for quickly finding out the color of any pixel on the screen
• Gitbox
• LiveReload
• PixFit
• xScope - for measuring, inspecting & testing on-screen graphics and layouts
• MAMP PRO
• DataURLMaker
• ImageOptim
• ImageAlpha
• BLESS CSS - fighting IE's CSS selectors limit, and nice tool for checking CSS selectors count

Git

• GitHowTo
• Pro Git
• Try Git