Awesome
Frontdesk
Community driven list of useful things for front-end developers. How to contribute?
Table of contents
- Browsers bug trackers
- Mobile simulators
- Browsers Dev Builds
- Where to download version X of browser Y?
- Browsers devtools docs
- Browsers plugins
- Code snippets
- Img
- JS
- JS frameworks
- Testing frameworks
- Assertion libraries
- HTML
- Template engines
- CSS
- CSS Preprocessors
- CSS Postprocessors
- CSS frameworks
- Platforms for building web app
- Style guides and methodologies
- Styleguide generators
- Misc
- Stats
- Performance
- CDN
- Security
- Manuals
- Validators & Quality Tools
- Fonts
- CLI Apps
- OS X Apps
- Git
Bug trackers (browsers & engines)
Mobile simulators
Browsers Dev Builds
- Chrome Canary
- Internet Explorer 10
- Opera Next Desktop, Opera Beta Mobile
- WebKit Nightly, Safari Technology Preview
- Firefox Nightly, Firefox Aurora
Where to download version X of browser Y?
- 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
Browsers devtools docs
- Chrome DevTools
- Microsoft Edge (EdgeHTML) Developer Tools
- Firefox Developer Tools
- Safari Developer Help
Browsers plugins
- 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
- Octotree - Browser extension that enhances GitHub code browsing and pull request reviewing. Available on Chrome, Firefox, Opera and Safari.
Code snippets
- 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
- Plunker — Open-source JavaScript, HTML and CSS playground with real-time code collaboration
- RegExr — regular expression playground
Img
- 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
- Smarticons — Customizable SVG icon system for the modern web.
- retinize.it — Photoshop actions for slicing retina assets @2x @3x.
JS
- 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
- Callback Hell – A guide to writing asynchronous javascript programs
- js2.coffee
JS frameworks
- 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
Testing frameworks
- 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
Assertion libraries
- 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
HTML
- 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
- Schema.org — Most modern microformat documentation supported by Google, Bing, Yandex and Yahoo
- Microformats.org — hcard, hcalendar and etc.
- Unicode Table - Unicode character table.
- amp-what.com — a quick, interactive reference of 14,500 HTML character entities.
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
- yate.io — Playground for Yate
- Ractive - Next-generation DOM manipulation
- cnCt — Building DOM from JSON-templates
- nunjucks — JavaScript port of Jinja2
- bem-xjst — A clever compiler for BEM-specific templates with JavaScript syntax.
CSS
- 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. - csstriggers.com — a game of layout, paint, and composite.
- Browser Hacks — extensive list of browser specific CSS and JavaScript hacks.
- CSS Cursor — web app helps you to choose cursor type from the showcase for use in your application.
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
- 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
CSS Postprocessors
- PostCSS
- postcss.parts – A searchable catalog of PostCSS plugins
CSS frameworks
- 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.
- Material Design Lite – An implementation of Material Design components in vanilla CSS, JS, and HTML.
- Marx – The stylish CSS reset. No JavaScript. No Classes. Just raw CSS.
- Wee – Mobile-first lightweight front-end framework.
- Lighter – flexible CSS micro framework, Based on the visual aspect, the framework offers you a clean and easy work.
Platforms for building web app
- 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
Style guides and methodologies
- 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
- Airbnb JavaScript Style Guide
- Harry Roberts’ CSS Guidelines
- SMACSS — Scalable and Modular Architecture for CSS
- OOCSS — Object oriented CSS
- BEM — Block Element Modificator
- Holy Grail Markup — “Hello world” markup using different CSS methodologies: OOCSS, SMACSS, Atomic & Organic, BEM
- 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
- U.S. Web Design Standards – a library of open source UI components and a visual style guide for U.S. federal government websites. Also here
- htaccessredirect.net — .htaccess Generator
Styleguide generators
- 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
Misc
- 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
- 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.
- Graphemica - One more unicode character table.
- Web Developer Checklist
- fuckyeahmarkdown.com — Online HTML to Markdown converter with API and stuff.
- Coolors – Fast color scheme generator.
- ColorMe – Visualize The CSS Color Function.
- oauthbible – Clear OAuth explaination.
- RequestBin.com - You can use the service to create a free HTTPS endpoint. Any HTTP requests sent to that endpoint will be recorded with the associated HTTP payload and headers so you can observe the data sent from webhooks or other apps before configuring your application to accept it.
Stats
Performance
- YUI JS, CSS compressor
- CSSO — In addition to usual minification techniques it can perform structural optimization of CSS files
- 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
- Microsoft CDN
- cdnjs — We host it all - JavaScript, CSS, SWF, images, etc
- BootstrapCDN - Delivering: Bootstrap, Bootlint, Font Awesome and Bootswatch
Security
Manuals
- jQuery Docs
- You Might Not Need jQuery
- 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
- howdns.works - A fun and colorful explanation of how DNS works.
Validators & Quality Tools
- 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
- SCSS-Lint - Configurable tool for writing clean and consistent SCSS
- 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
- livestyle.io/analyzer — A working prototype of LiveStyle’s conceptual UI for improving preprocessor stylesheet editing workflow.
Fonts
- 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.
CLI Apps
- 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
OS X Apps
- 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
- noiz.io – ambient sound equalizer for relax or productivity.
Git
- 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
- Git Fix Best Practices - Git How to Fix things (undo, revert and many best practices)