List of tools for front-end developers

List of tools for front-end developers

<h3>Design</h3>
<ul>
	<li>Start with the UX
<ul>
	<li><a href="http://balsamiq.com/">Balsamiq</a> - a very cool online tool to sketch something quickly.</li>
	<li><a href="https://www.google.com/webdesigner/">www.google.com/webdesigner/</a> - A free tool that could help you in your next project.</li>
	<li>Use a <a href="http://images.businessweek.com/ss/08/02/0225_doodles/index_01.htm">napkin</a>. It’s the best way to have a cool story how you started your wonderful company out of a napkin.</li>
</ul>
</li>
	<li>Get ideas/inspiration
<ul>
	<li><a href="http://www.webdesign-inspiration.com">www.webdesign-inspiration.com</a></li>
	<li><a href="http://www.pinterest.com/search/boards/?q=web%20design">http://www.pinterest.com/search/boards/?q=web%20design</a></li>
	<li><a href="http://pttrns.com">pttrns.com</a></li>
	<li><a href="http://mobile-patterns.com">mobile-patterns.com</a></li>
	<li><a href="http://www.siteinspire.com">www.siteinspire.com</a></li>
	<li><a href="http://www.awwwards.com/css-gallery/">www.awwwards.com/css-gallery/</a></li>
</ul>
</li>
</ul>
<h3>Develop</h3>
<h4>CSS3 Frameworks</h4>
I like the first two... They are very powerful and after you get some experience with them, it will save you a lot of time.
<ul>
	<li><a href="http://foundation.zurb.com/">foundation.zurb.com</a></li>
	<li><a href="http://getbootstrap.com/">getbootstrap.com</a></li>
	<li><a href="http://framelessgrid.com/">framelessgrid.com</a></li>
	<li><a href="http://jquerymobile.com/">jquerymobile.com</a></li>
</ul>
<h4>Boilerplates</h4>
Why reinvent the wheel again and again? Let's the boilerplates do the hard work for you.
<ul>
	<li><a href="http://html5boilerplate.com/">html5boilerplate.com</a></li>
	<li><a href="http://www.initializr.com">www.initializr.com</a></li>
</ul>
Btw, check out [embed]http://yeoman.io/[/embed] as it can save you a lot of time with its brothers:
<ul class="tools-list">
	<li class="gruntjs"><a href="http://gruntjs.com/">Grunt</a> - used to build, preview and test your project by using tasks curated by the Yeoman team &amp; grunt-contrib.</li>
	<li class="bower"><a href="http://bower.io/">Bower</a> - used for dependency management, so that you no longer have to manually download and manage your scripts. Think of it as the npm for the client side.</li>
</ul>
<h4>Rapid Prototyping</h4>
It's a good way to hack something quickly and with one of these tools, to be able to share it with your team.
<ul>
	<li><a href="http://jsbin.com/">jsbin</a></li>
	<li><a href="http://codepen.io/">codepen.io</a></li>
	<li><a href="http://jsfiddle.net/">jsfiddle</a></li>
</ul>
<h4>Best practices</h4>
<ul>
	<li><a href="https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/">https://developers.google.com/web/fundamentals/</a></li>
	<li><a href="http://mobilewebbestpractices.com/resources/">http://mobilewebbestpractices.com/resources/</a></li>
	<li>Use <a href="http://yeoman.io">http://yeoman.io</a> or <a href="https://docs.google.com/a/google.com/document/d/1ZAUUTStPogFYLCN66ACxbufbdfn7g9dJTQKhyszTnb4/edit#heading=h.4am1smjt77eg">Boilerplates</a> that will save you from re-inventing the wheel again and again.</li>
	<li>Listen to click events AND touch event here is how to do it: <a href="http://www.html5rocks.com/en/mobile/touch.html">http://www.html5rocks.com/en/mobile/touch.html</a></li>
	<li>Good set of examples to most HTML5 APIs: <a href="http://www.simpl.info/">www.simpl.info</a></li>
</ul>
<h3>Debugging</h3>
<ul>
	<li>Learn it for real: <a href="https://developer.chrome.com/devtools/index/">developer.chrome.com/devtools/index</a></li>
	<li><a href="https://developers.google.com/chrome/mobile/docs/debugging">Chrome for Android</a> - Now you can drive your web app with Chrome devtools and see the results on your mobile.</li>
	<li>Remote debugging with <a href="http://jsconsole.com/remote-debugging.html">jsconsole.com</a> - for all the cases you wish to check other devices that don't have Android on them.</li>
	<li>Opera dragonfly <a href="http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly/">supports</a> it as well.</li>
	<li><a href="http://lucasr.org/2012/03/28/remote-debugging-in-firefox-mobile/">Firefox mobile</a> got an option - so all the friends of the fox could enjoy it.</li>
</ul>
<h3>Testing</h3>
<ul>
	<li><a href="http://www.browserstack.com/">browserstack.com</a> - A good way to check how your work is looking on older browsers (e.g. IE9-)</li>
	<li><a href="http://seleniumhq.org/">Selenium</a> and its mobile option <a href="http://code.google.com/p/selenium/wiki/RemoteWebDriver">Remote Web Driver</a>.</li>
	<li>MVC provides separation of concerns. So you can use frameworks like <a href="http://qunitjs.com/">Qunit</a> - test your models.</li>
</ul>
<h3>Optimization</h3>
<ul>
	<li><a href="https://developers.google.com/speed/pagespeed/insights/">Google Page Speed</a></li>
	<li><a href="http://stevesouders.com/mobileperf/mobileperfbkm.php">Mobile Perf</a></li>
	<li><a href="http://greenido.wordpress.com/2012/01/01/mobile-web-performance/">Mobile Web Performance</a></li>
</ul>
<h3>Compatibility</h3>
<ul>
	<li><a href="http://chromestatus.com/">chromestatus.com</a></li>
	<li><a href="http://caniuse.com/">caniuse.com</a></li>
	<li><a href="http://modernizr.com">modernizr.com</a></li>
</ul>
<h3>Validators</h3>
<ul>
	<li><a href="http://validator.w3.org/">http://validator.w3.org/</a></li>
</ul>
<h3>Misc / Last tips</h3>
<ul>
	<li>Get feedback on your design
<ul>
	<li><a href="http://www.spurapp.com/">http://www.spurapp.com/</a></li>
	<li><a href="http://www.bounceapp.com/">http://www.bounceapp.com/</a></li>
</ul>
</li>
	<li>Few Presentations from the past
<ul>
	<li><a href="http://mobile-html.appspot.com">mobile-html.appspot.com</a></li>
	<li><a href="http://ido-green.appspot.com/mwa-start/index.html">ido-green.appspot.com/mwa-start/index.html</a></li>
	<li><a href="http://ido-green.appspot.com/mwa-html5/index.html">ido-green.appspot.com/mwa-html5/index.html</a></li>
</ul>
</li>
	<li><a href="http://www.w3.org/2009/dap/" target="_blank">Device APIs</a> - Yep, we are getting closer to the metal with HMTL5</li>
</ul>
<ul>
<ul>
	<li><a href="http://dev.w3.org/geo/api/spec-source.html">Geolocation API</a></li>
	<li><a href="http://www.html5rocks.com/en/tutorials/device/orientation/">Device Orientation API</a> - accelerometer</li>
	<li><a href="http://www.chromeexperiments.com/webgl/">WebGL</a></li>
	<li><a href="http://www.html5rocks.com/en/tutorials/file/filesystem/">HTML5 Filesystem API</a></li>
	<li><a href="http://www.w3.org/TR/battery-status/">Battery API</a></li>
	<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/Gamepad">Gamepad API</a></li>
	<li><a href="http://www.webrtc.org/">WebRTC</a> - voice &amp; video</li>
	<li><a href="http://www.html5rocks.com/en/tutorials/webaudio/intro/">Web Audio API</a></li>
</ul>