The other day, I found an online tool Addy Osmani introduced on Google+ that looked useful, so I'd like to introduce it to you.

DocHub.io #

API reference for CSS, HTML, JavaScript, DOM, jQuery, PHP, and Python. It supports incremental search, so it's a good idea to keep it open during development.

Dillinger.io #

This tool allows you to visually input Markdown, a popular syntax used recently in GitHub-related projects. It seems you can upload files by connecting to a Dropbox or GitHub account. The Mac desktop app Mou was also introduced.

HTML5Please #

This is a useful site that provides a list of HTML5 features you can start using now, advice based on browser support, and information on Pollyfill (a JS library that complements features for unsupported browsers).

And the API. By embedding the widget created here on your own site, you can easily create a UI that notifies you when there are unsupported features. Browser support information is always up to date by using caniuse.com.

CSS3Please #

This is a convenient site that allows you to edit the CSS displayed on this page inline, allowing you to copy and paste while checking the displayed content.

CSS3 Playground #

A playground where you can tinker with CSS3 properties while seeing what's displayed, including gradients, text properties, transforms, and more.

Responsive #

The concept of responsive web design is to use a single source to support a wide range of browsing environments, from smartphones to desktops. This tool allows you to check the display content of sites created using such responsive web design all at once.

CanIUse.com #

As many of you may already know, this is the site to check the HTML5 compatibility status of each browser.

HTML5 Readiness #

This is also a well-known site for finding out about HTML5 support, but rather than being a place to look up individual APIs, its main focus is to provide a visual understanding of the progress being made in HTML5 implementation.

Browserstack #

A paid service that allows you to test various new and old browsers.

Grunt #

A command line build tool for JavaScript projects, from file concatenation to validation, minification (obfuscation) and unit testing. Still in beta but very powerful.

jsPerf #

This site allows users to create and share various JavaScript test cases. Existing test cases are useful for reference. Browser comparisons are also available using Browserscope.org.

jsconsole #

This is a web app that combines a JavaScript console and debugger. I'm not sure how useful it is now that tools like Adobe Shadow have been released, but the debugger function that can be connected to iOS or Android browsers is great.

Chrome DevTools AutoSave #

http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/

The change history management and saving features of Chrome DevTools are useful, but this extension will automatically save your changes, essentially allowing you to develop within Chrome DevTools. Addy Osmani provides a clear explanation in this screencast.

Codiqa #

jQuery Mobile A web application that allows you to visually build websites.