Created
June 1, 2014 11:58
-
-
Save greenido/8052ce553ab8433ba5f5 to your computer and use it in GitHub Desktop.
List of tools for front-end developers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 & 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 & video</li> | |
<li><a href="http://www.html5rocks.com/en/tutorials/webaudio/intro/">Web Audio API</a></li> | |
</ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment