Another 20 essential tools for web designers
Web Designer get industry experts to recommend 20 essential tools that will improve your productivity and creativity.
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
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
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
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
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.
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.
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.
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.
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…
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
Nicolas Gallagher’s modern, HTML5-ready alternative to CSS resets
A browser add-on that analyses webpages for speed improvements
14. HTML5 Cross Browser Polyfills
A huge list of polyfills for tonnes of brand spanking new web technologies
15. W3C CSS Validatior Service
The W3C’s tool for checking for invalid CSS
16. HTML5 Please
Helps you to use the new HTML5 and CSS3 features responsibly
17. Isobar’s Front-End Coding Standards
Pillars of front-end development are outlined in this extremely useful guide
A web accessibility evaluation tool from WebAIM
Jonathan Snook’s great guide to scalable and modular CSS
20. Wufoo’s Current State of HTML5 Forms
A detailed guide for support of new HTML5 form features
20 essential tools for