The holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website.
The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, Potentially improvable markup, Deprecated and Non-W3C Elements and Non-W3C Attributes.
Requirements: –
Demo: http://www.red-root.com/sandbox/holmes/
License: License Free
What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.
WhatFont Tool can easily get font information about the text you are hovering on. There is a Bookmarklet and Chrome Extension available for download. I am sure it will make web designer’s life much easier.
Requirements: –
Demo: http://chengyinliu.com/whatfont.html
License: License Free
With the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep all of the device resolutions and screen sizes straight. So Punchcut has packaged up their Toolset For Managing Screen Resolutions, that help them stay current and they are offering it for download.
It contains a collection of Photoshop CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios. It also contains a collection of layered Photoshop CS5 PSDs each providing common devices for comping and design presentations.
Requirements: –
Demo: http://punchcut.com/perspectives/expanding-universe-toolset…
License: License Free
When working with events in Javascript, it is often easy to loose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. If things go wrong, it can be difficult to trace down.
It is due to this Allan Jardine has put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.
Requirements: –
Demo: http://www.sprymedia.co.uk/article/Visual+Event
License: License Free
diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.
diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2. All you have to do is import it, specify the container to which the group of items resides.
Requirements: jQuery Framework
Demo: http://jonobr1.github.com/diagonalFade/
License: License Free
TeamLab is a free open-source platform for business collaboration and project management. It allows you to use social networking tools such as blogs and forums, organize business tasks and milestones, as well as communicate with your team members via corporate IM.
TeamLab business collaboration platform is an open-source software. The source code is for developers and experienced users who wish to install and configure the platform manually on their own server. According to the license terms, you are free to test, evaluate, customize and improve the code.
Requirements: –
Demo: http://www.teamlab.com/
License: GPL License
Now that we can use CSS transitions in all the modern browsers with Ceaser – CSS Easing Animation Tool. Simply choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go.
Requirements: –
Demo: http://matthewlein.com/ceaser/
License: License Free
Loads.in gives you the possibility to see how fast your (or any) website loads in a real browser from over 50 locations worldwide.
If you have a worldwide audience, or your site is hosted in a different country from where your visitors live, it is useful to see how long it takes to load your web pages. With loads.in you simply enter the full URL of the page you want to check, and the page is retreived by a browser at a random location. For each subsequent check you can choose a specific location and browser profile.
Requirements: –
Demo: http://loads.in/
License: License Free
CSS3Warp is a proof of concept: create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML.
CSS3 brings new text-transform options: rotation, skew, matrix, transform-origin… By applying the right transformations to every single letter it is possible to create the illusion of text following a path.
Type your text into the webform, click “Warp it!”, then alter the path as you like. You can attach your text to a circle or a bezier. Add or delete points, or change position, angle and radius of the circle. When your done, click “Generate code”. Copy the CSS and HTML into your document.
Requirements: CSS3 Support
Demo: http://csswarp.eleqtriq.com/
License: License Free
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element. Waypoints makes a solid base for modern UI patterns that depend on a user’s scroll position on the page.
Waypoints is dual licensed under the MIT and GPL licenses. It has been tested with jQuery versions 1.4+ in IE6+, FF3+, Safari 4+, and Chrome 6+.
Requirements: jQuery Framework
Demo: http://imakewebthings.github.com/jquery-waypoints/
License: MIT, GPL License
