Another 20 essential tools for web designers

01.GitHub

www.github.com
GitHub is the immensely-popular hosting and code sharing service, currently used by more than a million people. GitHub hosts software development projects that use the Git revision control system. The power of GitHub comes from its collaborative tools and capabilities. It not only offers a place to share and fork code repositories, but also integrates wikis, issue tracking, and code review. GitHub has become the industry standard for making code projects public and getting feedback from potentially thousands of developers all around the world.

02.Font Squirrel’s @font-face generator

www.fontsquirrel.com/fontface/generator
For a long time, using custom fonts on web pages has been a big challenge for web designers. Font Squirrel’s @font-face generator is a big help in this regard. After you’ve chosen a font with appropriate licensing, it will give you the necessary cross-browser CSS.

03. Conditional Classes

www.paulirish.com
Extra HTTP requests are bad for page speed. So instead of targeting old versions of IE with separate stylesheets (which are also harder to maintain), use Paul Irish’s conditional classes method instead. It’s clean, easy, and it validates!

04. Google Web Fonts

www.google.com/webfonts
Google’s new font repository is an easy way to add custom fonts that are free for commercial use, and can be embedded using a single line of code. Download from a selection of hundreds of fonts in different styles and scripts.

05. Stack Overflow

www.stackoverflow.com
It’s tough to avoid Stack Overflow when Googling for solutions to coding problems. It’s a fantastic community that’s invaluable for collaborative problem solving. It should be one of your go-to resources for getting your questions answered by knowledgeable developers.

06. yepnope.js

yepnopejs.com
While Modernizr can help you detect features, yepnope lets you asynchronously load different scripts based on your feature detection results. This works great for avoiding loading polyfills unnecessarily, helping your pages load more efficiently.

07. Sass/Compass

www.sass-lang.com
www.compass-style.org
If you haven’t started preprocessing your CSS, then get on it! The combination of Sass and Compass brings real programming techniques to stylesheets, making your CSS much easier to code and maintain. Sass extends CSS by adding nested rules, variables, mixins, and much more. Compass helps you avoid unnecessary repetition in your CSS by providing reusable patterns for CSS3 vendor prefixed code, CSS typography, and more. Although these tools are command-line based, designers who aren’t quite so familiar with the command-line can use one of the available GUI apps (for both Mac and Windows) that automates these tasks for you. So the only real learning curve is related to learning the syntax, which has quite a few differences from traditional CSS.

08. CodeKit

www.incident57.com/codekit
CodeKit is gaining traction as one of the hottest apps. It helps you process files using a number of different time-saving tools – Less, Sass, Stylus, Haml, CoffeeScript, Compass, and more. But it does so much more than that. And best of all? No command-line abilities required.

09. jsFiddle

www.jsfiddle.net
Every developer needs a place to experiment with, debug, and share code publicly, without all the overhead of something like GitHub. jsFiddle has tons of great features, and a nice, clean, usable interface.

10. When can I use…

www.caniuse.com
This is a great online resource for finding browser support information on virtually anything. It’s kept up to date and includes info on new CSS3 stuff, HTML5 APIs, and other miscellaneous DOM features. It’s even great for browsing just to find out what’s new.

11. YUI Library

www.yuilibrary.com
Yahoo!’s open-source JavaScript and CSS Framework

12. Normalize.css

necolas.github.com/normalize.css
Nicolas Gallagher’s modern, HTML5-ready alternative to CSS resets

13. YSlow

www.developer.yahoo.com/yslow
A browser add-on that analyses webpages for speed improvements

14. HTML5 Cross Browser Polyfills

www.github.com/Modernizr/Modernizr/wiki
A huge list of polyfills for tonnes of brand spanking new web technologies

15. W3C CSS Validatior Service

jigsaw.w3.org/css-validator
The W3C’s tool for checking for invalid CSS

16. HTML5 Please

www.html5please.com
Helps you to use the new HTML5 and CSS3 features responsibly

17. Isobar’s Front-End Coding Standards

na.isobar.com/standards
Pillars of front-end development are outlined in this extremely useful guide

18. WAVE

www.wave.webaim.org
A web accessibility evaluation tool from WebAIM

19. SMACSS

www.smacss.com
Jonathan Snook’s great guide to scalable and modular CSS

20. Wufoo’s Current State of HTML5 Forms

www.wufoo.com/html5
A detailed guide for support of new HTML5 form features

RELATED ARTICLES

20 essential tools for
web designers