Skip to content

Instantly share code, notes, and snippets.

@MichaelMartinez
Created March 7, 2012 03:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MichaelMartinez/1990812 to your computer and use it in GitHub Desktop.
Save MichaelMartinez/1990812 to your computer and use it in GitHub Desktop.
Addy's Helpful tools
Dillinger.io
==========
http://dillinger.io - An excellent markdown editor in the browser which can connect with both Dropbox and GitHub. I personally use it for everything from drafting slides to articles when Mou (http://mouapp.com/) isn't available. We're working on bringing GitHub markdown and Gist support to it soon.
HTML5 Please API
===============
http://api.html5please.com - (Released this week) An API and set of widgets for detecting modern browser features required by your page/app/demo and suggesting compatible alternatives to your users if yours doesn't meet requirements. We're hoping to convince some Chrome experiments to adopt this shortly.
HTML5 Please
===============
http://html5please.com - Modern browser features rated by how safe they are to use with recommendations on the best 3 polyfills to consider for each (where applicable). If you ever use the Modernizr polyfills list as a reference point, this is an improved view of that data.
DocHub.io
=======================
http://dochub.io - Centralised documentation for JavaScript/CSS/HTML (sourced from the MDN), jQuery, PHP and Python. Very useful if you need a super-quick reference interface while working on a project. (thanks to Xavier for reminding me about this one)
Browerstack
=================
http://browserstack.com - This has all but completely changed how I cross-browser test new projects and I can't recommend it highly enough. Browserstack lets you spin up VMs for practically any old or modern web browser you may need to test in and they've also been working on getting support for distributed testing in place. You might also be interested in +Scott González's node-browserstack project that lets you use their API through Node https://github.com/scottgonzalez/node-browserstack.
Grunt (not online, but very useful)
================
https://github.com/cowboy/grunt - Ben Alman's task-based build tool for projects does everything from concatenation through to unit testing with a headless browser. It can even watch for file changes if you're interested in that. Do check it out as although it's in beta, it's already very powerful.
CSS3 Please
================
http://css3please.com - A cross-browser CSS3 rule generator that covers everything from gradients to @font-face. I crack this open more than once every week.
Matt Kersley's 'Responsive'
======================
http://mattkersley.com/responsive/ - A really simple, but useful little tool for testing responsive layouts. This helped me test out the redesign on my blog and was fairly accurate when I later confirmed rendering on actual devices.
Remy's jsconsole
==================
http://jsconsole.com - A super-awesome tool that lets you remotely control and debug browser windows, regardless of whether they're in another another browser or completely different device. Great for partial testing your app on mobile/tablet devices.
Chrome Dev-tools AutoSave
======================
http://bit.ly/usqlZh - I covered this in a screencast but CDA is a really hot way to make changes to pages in the Chrome developer tools and have them automatically save locally (so you don't even need to switch back to your editor). If you haven't checked it out it's definitely worth trying.
John Alsopp's CSS3 Playground
=======================
http://westciv.com/tools/gradients/ - When you need something a little more visual, John's CSS3 tools let you play around with configurations for gradients, text properties, transforms and more. Great for tweaking designs.
jsPerf (an absolute must)
======================
http://jsperf.com - I've listed this more than once as my site of the month in .net magazine and for good reason. It's an extremely useful way to benchmark your JavaScript snippets and get a lot more value out of Browserscope.
Codiqa
========
http://www.codiqa.com/ - An extremely helpful visual builder for creating jQuery Mobile apps. It's not promoted as one, but it's also very useful to creating app mockups without needing to touch any code.
CanIUse.com
==============
http://caniuse.com - Most of you will already know this one, but it's helped power some of the other tools on this list. It's a curated list of browser features supported by browsers, broken down by browser versions.
HTML5 Readiness
=================
http://html5readiness.com/ - A historic view of how far HTML5 and CSS3 feature implementation has progressed over the years and where we are now (last updated 2011, will probably be updated again soonish). Mostly here for funsies.
That's it! I of course use a number of other desktop tools but that's about it for now. jsFiddle/jsBin etc have also been awesome but for the most part I've shifted to doing everything in gists if not with Dillinger.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment