Online tools I regularly find helpful
Hey guys. I thought it might be helpful to put together a list of some of the tools I use in my workflow these days in case it's useful. Please feel free to check them out (or share your own toolbox) if you think it would be of assistance to others.
With thanks to +Paul Irish +divya manian
, +Joe McCann
and others for their work on these tools.
- 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
- (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.
- 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.
- 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)
- 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.
- 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'
- 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.
- 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
- 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
- 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)
- 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.
- 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.
- 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.