Anything that can save time for a web developer is well worth its weight in gold. Whether you’re looking to cut loading time for your website or make light work of placing interactive elements into a design, these four tools could help speed things up:
YUI Compressor
With more web traffic than ever coming from smartphones, it’s crucial that web developers keep code lightweight. One excellent way to cut down on bandwidth-eating excess code is to use the YUI Compressor. This tool minifies JavaScript without compromising quality, and claims to save over 20% of space over JSMin’s 10%. CSS can also be compressed with the YUI Compressor. How does it work? According to their website, the open-source application analyzes the files, removing excess whitespace and and making safe substitutions where it can to save space. It’s worth a look, especially if you plan to enter the mobile market.
YUI Compressor Home
Yslow
Speaking of speed, if your site is running slow for unknown reasons, the appropriately-named Yslow could be your new best friend. This tool evaluates your site performance and grades it based on either predefined or user-defined rules. Then, it suggests strategies to improve it based on those rules. For example, Yahoo! researchers determined that moving stylesheets to the head of the document and moving scripts to the bottom were effective in getting the page to load faster (or at least appear to load faster). Other speed-inhibitors Yslow checks for include duplicate scripts, redirects, non-minified JavaScript and CSS, and a host of other points.
Yslow Home
YUI
These YUI Components take the guesswork out of adding cross-browser compatible Reset, Base, Fonts, and Grids Style Sheets to your website. You can use them individually or you can use their more efficient, minified file that combines all four. These CSS files are loaded from Yahoo!’s server, so your own server files can load in parallel with theirs, saving time. YUI provides information about how to adjust the font styles with a chart containing percentage equivalents of pixel sizes ranging from 10 to 26. If you want to customize the code yourself with Grids CSS, Base CSS, and Reset CSS, the code is available and open-source. In fact, while you’re checking out the CSS, be sure to take a look at the variety of other components available in the YUI library.
YUI Home
Yahoo! Design Stencil Kit
If you’re a developer who also designs, this kit will help make your job easier. Packed with a variety of commonly-used visual elements like calenders, form elements, buttons, and screen resolutions, this package can be downloaded in a variety of formats for free (including Fireworks, InDesign, and PNG). These elements also correspond with many of the components from the YUI Library, so the design matches the final output. That means even if you’re just handling the code, you can still send these stencils to your designer so the customer knows exactly what to expect in the UI design (and you know exactly how to meet those expectations).
Yahoo! Design Stencil Kit Home
Would You Recommend any Yahoo! Tools?
Whether you’re just now checking them out, or have already used them, would you recommend any of these (or other) Yahoo! Tools to other developers?
You might also like…
CSS Form Templates, Tools & Services →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
30 Pure CSS Alternatives to Javascript →
40 Essential CSS Templates, Resources and Downloads →
Website Speed Part 1: Write More Efficient CSS →
50 Free Tools and Apps for Web Designers and Developers →
CSS3 Compatibility Tools, Resources and References for Internet Explorer →
10 Online Tools and Apps to Help Optimize and Format CSS →
50 Useful Tools and Generators for Easy CSS Development →
