Community driven list of useful things for front-end developers. How to contribute?
- Chrome Canary
- Internet Explorer 10
- Opera Next Desktop, Opera Beta Mobile
- WebKit Nightly
- Firefox Nightly, Firefox Aurora
- Firefox:
- Opera:
- Safari
- Chromium:
- Internet Explorer:
- IE 10
- IE 9
- Any version - Any version of IE on any Windows version, free VM images
- Browser Logos β collection of high resolution web browser logos with transparent backgrounds
- Chrome Dev HTTP Client
- Postman - useful tool for RESTful APIs
- Firebug
- Web Developer for Firefox
- Chrome DevTools Casts for beginners
- LiveReload - Provides Chrome browser integration for the official LiveReload apps (Mac & Windows) and third-parties like guard-livereload and yeoman.
- Live HTTP Headers βΒ Provides information about the HTTP headers
- Dimensions - You can measure everything you see in the browser
- browsersync.io - Time-saving synchronised browser testing
- Dabblet β interactive playground for quickly testing snippets of CSS and HTML
- JSBin β JavaScript, HTML and CSS playground
- gist.github β code snippets
- GitLab Snippets β code snippets
- JSFiddle β JavaScript, HTML and CSS playground
- CodePen β Another JS, HTML, CSS sandbox
- RegExr β regular expression playground
- PNG compressor
- Tiny png β can make IE6 friendly PNGs
- IMGO β image optimization tool
- SVGO β SVG optimization tool
- JPEG compressor β your photos on a diet
- Smush.it β online image optimization tool
- placehold.it β a quick and simple image placeholder service. By the way placekitten & placeboobs
- lorempixel β placehold random images with dummy text
- SpritePad β Sprite generator
- Favicon Cheat Sheet β Favicon Cheat Sheet
- Favicon generator β draw your favicon
- Real Favicon Generator β Generate the favicon pictures and HTML code that work on all major browsers and platforms
- Grumpicon β tool processes a set of SVG files, generates PNG fallback images for legacy browsers
- XML to JSON
- MicroJS β helps you discover the most compact-but-powerful microframeworks
- JavaScript Beautifier
- pro.jsonlint.com β pro version of jsonlint.com
- JavaScript Patterns Collection
- Learning JavaScript Design Patterns
- Oboe.js - Streaming JSON loading for Node and browsers
- Polymer - Polymer is a library that uses the latest web technologies to let you create custom HTML elements
- x-tags - is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers
- KeyCode - Easy visualizer for JavaScript KeyCodes
- TodoMVC β helping you select an MV* framework.
- 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.
- React - A JavaScript library for building user interfaces
- 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.
- Metro JS - plugin for jQuery which enables the Modern UI interface on the web.
- toastr - simple JavaScript toast notifications.
- jsdb.io β The definitive source of the best JavaScript frameworks, plugins, and tools
- Jasmine
- Mocha
- QUnit
- Buster.js
- YUI Test
- D.O.H.
- wru
- sinon - Standalone test spies, stubs and mocks for JavaScript
- protractor - E2E test framework for Angular apps
- Chai - Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework
- expect.js - Minimalistic BDD-style assertions for Node.JS and the browser
- should.js - BDD style assertions for node.js
- HTML5 Rocks
- html5please
- mobilehtml5
- DirtyMarkup - Quick/easy HTML auto formatting
- HTML5Pattern - HTML5Pattern is a source of regularly used Input-Patterns.
- HTML 5 Outliner
- (X)HTML5 Validator
- 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
- yate.io β Playground for Yate
- Ractive - Next-generation DOM manipulation
- cnCt βΒ Building DOM from JSON-templates
- Data URL Toolkit, online service
- css3please β The Cross-Browser CSS3 Rule Generator
- The CSS3 Test β check your browser!
- 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
- cssdb.co β Popular CSS Libraries
- Helium β JavaScript tool to scan your site and show unused CSS
- The Responsinator β helps to see responsive site will look on the most popular devices
- Stylie β A fun CSS animation tool
- autoprefixer β Parse CSS and add prefixed properties and values by actual Can I Use database
- Patternify β Draw your own Pattern then just copypaste CSS code
- Screensiz.es - Table of characteristics of popular devices.
- DPI Love - Calculation DPI of devices.
- Device pixel density tests
- CSS3 Generator
- Ultimate CSS Gradient Generator
- :nth Tester
- The CSS3 test
- The 3D CSS text generator
- Get Your Nested Border Radii Right!
- extractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet
- CSS Explain β Think of it like SQL
EXPLAIN
, but for CSS selectors.
- 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
- sassmeister β playground for Sass
- Bourbon β A simple and lightweight mixin library for Sass. Also, neat.
- Stylus
- nib β library for the Stylus, providing robust cross-browser CSS3 mixins
- xCSS β PHP based CSS preprocessor
- Roole β a language that compiles to CSS
- Rework β arbitrary CSS preprocessing library for node.js and the browser
- Semantic UI β Semantic empowers designers and developers by creating a language for sharing UI.
- 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
- Kube
- Topcoat
- Ratchet - Build mobile apps with simple HTML, CSS, and JS components.
- Meteor - Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you're an expert developer or just getting started.
- Google Apps Script - Build web apps and automate tasks with Google Apps Script
- Github style guide
- Google style guide
- NPM Coding Style
- Code Conventions for the JavaScript Programming Language by Douglas Crockford
- Dojo Style Guide
- jQuery JavaScript Style Guide
- Harry Roberts' CSS Guidelines
- SMACSS β Scalable and Modular Architecture for CSS
- OOCSS β Object oriented CSS
- BEM β Block Element Modificator
- DoCSSa {dok~sa} β Sass based CSS architecture and methodology
- Pragmatic jQuery Style
- Principles of writing consistent, idiomatic CSS and HTML
- Idiomatic.js β principles of writing consistent, idiomatic JavaScript
- Pragmatic.js code style guidelines
- KSS
- StyleDocco
- Source
- StyleDown
- SassDown
- SC5 Styleguide β Informative and easily navigable live styleguide which can be edited directly in the browser
- Styleguides.io β Website Style Guide Resources
- caniuse
- jquer.in - A collection of jQuery plugins organized according to their category.
- The Toolbox β a collection of the best time-saving apps, tools, and widgets from around the web
- humans.txt
- angular-js.in - A curated list of angular directives and modules.
- 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 (from computer)
- pasteboard.co β image sharing web app
- Color Scheme Designer - find resonate colors for a great design.
- Windows-8-like animations with CSS3 and jQuery - a demo made by Sara Soueidan about creating a Modern UI design like in Windows 8.
- CSS-Tricks snippets β useful code snippets
- TypeScript
- JSDB.io - The Database of JavaScript Libraries
- Prepros β CSS/JS preprocessor(LESS, Sass, SCSS, Stylus, Jade, Slim, CoffeeScript, LiveScript, Haml and Markdown), minifier and image optimization
- Front-end Frameworks Compare - Comparing front-end frameworks for faster and easier web development.
- Gridlover - Tool to establish a typographic system with modular scale and vertical rhythm.
- Unicode Table - Unicode character table.
- Graphemica - One more unicode character table.
- Web Developer Checklist
- fuckyeahmarkdown.com β Online HTML to Markdown converter with API and stuff.
- 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
- Google CDN
- Yandex CDN
- Microsoft CDN
- cdnjs β We host it all - JavaScript, CSS, SWF, images, etc
- jQuery Docs
- Try jQuery
- MDN
- dochub.io β CSS, HTML, JavaScript, DOM, jQuery, PHP, Python
- devdocs.io β HTML, CSS, DOM, DOM Events, JavaScript, jQuery
- overapi.com β Collecting All Cheat Sheets
- Bento β Everything you need to know about web development. Neatly packaged.
- Superherojs.com - This site is a continuously updated list of articles that help explain the syntax of JavaScript, how to organize your projects, how to test your code, and what's on the horizon.
- JSBooks - JSBooks the best free JavaScript books/resources
- WebPlatform.org - Open community of developers building resources for a better web, regardless of brand, browser or platform
- W3C HTML Validator
- W3C CSS Validator
- CSSLint β static analysis tool for CSS code
- RECSS β A simple and attractive code quality tool for CSS built on top of LESS
- JSLint β The JavaScript Code Quality Tool by Douglas Crockford
- JSHint β community-driven tool to detect errors and potential problems in JavaScript code
- JSCS β JavaScript Code Style checker
- CSSFontStack
- Font Squirrel
- Google WebFonts
- Fontcustom β command line utility to generate fonts from separate svg/eps files
- Fontello β easy way to combine selected icons from popular icons sets into custom made font
- Online Font Converter
- Check font name by screenshot
- Font Awesome - The iconic font designed for Bootstrap
- Entypo - command line utility to generate fonts from separate svg files. This is possible to associate each icon with a symbol
- Font Family Reunion - Compatibility tables for default local fonts.
- Grunt - Javascript task runner
- Gulp - Javascript task runner based on node streams
- Yeoman - Developer workflow
- Brunch - Brunch is an assembler for HTML5 applications
- Bower - Javascript package manager
- Jam - Jam is a package manager for JavaScript
- Component - Component package manager for building a better web
- Karma test runner - Spectacular test runner for Javascript
- browser-repl - Launch a repl on your command line to any browser in the cloud
- CodeKit β web-dev workflow in the one app: compile everything, autorefresh all browsers, catch errors, add source maps
- Sketch β beautiful, simple, and powerful vector graphics app.
- Google Web Designer β tool for creating interactive HTML5-based designs and motion graphics
- ColorSnapper β easy-to-use tool for quickly finding out the color of any pixel on the screen
- Gitbox β version control as easy as Mail
- LiveReload β "As soon as you save a file, it is preprocessed as needed, and the browser is refreshed..."
- PixFit β measure tool
- xScope β for measuring, inspecting & testing on-screen graphics and layouts
- MAMP PRO β Mac, Apache, MySQL and PHP
- DataURLMaker
- ImageOptim β drag'n'drop UI and various optimisation tools
- ImageAlpha β converts 24-bit PNG to paletted 8-bit with full alpha channel
- BLESS CSS β fighting IE's CSS selectors limit, and nice tool for checking CSS selectors count
- Kaleidoscope β a nice diff tool
- Dash β gives you instant offline access to 80+ API documentation sets.
- Ghostlab β responsive development workflow tool that allows for synchronized testing of your web app across multiple devices β similar to Edge Inspect
- ClipMenu β A clipboard manager for Mac OS X
- GitHowTo
- Pro Git
- Try Git
- LearnGitBranching
- Gitflow - A collection of Git extensions to provide high-level repository operations for Vincent Driessen's branching model.
- Git Cheat Sheet
- Githug β Git Your Game On