punypng is a free tool that dramatically reduces page load times by reducing the file size of an image without any loss of quality. punypng uses several web optimization techniques to reduce the file sizes of your images. It first analyzes the content of your image and figures out the best image format to use.
Depending on the file, punypng will automatically convert your GIF into a PNG format and then further compress that. For JPEGs, sometimes it’s better to make it a PNG, and other times it’s better to keep it as JPEG and use jpeg-tran to optimize it. punypng makes all those decisions for you and ensures the best possible results.
Requirements: –
Demo: http://www.gracepointafterfive.com/punypng/
License: License Free
CSSHttpRequest is cross-domain Ajax using CSS. Like JavaScript includes, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. CSSHttpRequest functions similarly to JSONP, and is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.
CSSHttpRequest.get(
"http://www.nb.io/hacks/csshttprequest/hello-world/",
function(response) { alert(response); }
);
Data is encoded on the server into URI-encoded 2KB chunks and serialized into CSS rules with a modified data: URI scheme. The selector should be in the form #c<N>, where N is an integer index in [0,]. The response is decoded and returned to the callback function as a string:
#c0 { background: url(data:,Hello%20World!); }
#c1 { background: url(data:,I’m%20text%20encoded%20in%20CSS!); }
#c2 { background: url(data:,I%20like%20arts%20and%20crafts.); }
CSSHttpRequest is open source under an Apache License (Version 2.0).
Requirements: IE6+, Firefox 2+, Safari 3+, iPhone
Demo: http://nb.io/hacks/csshttprequest
License: Apache License
Cheat sheet is a reference tool that provides simple, brief instructions for accomplishing a specific task. We have collated a set of cheat sheets for web developers a while ago.
Woork has just released jQuery Visual Cheat Sheet, which is an useful and practical reference to jQuery 1.3 for web designers and developers. This cheat sheet (6 pages) contains the full jQuery API reference with detailed descriptions and some sample code. The simple visual style allows you to find at a glance everything you are looking for.
Requirements: –
Demo: http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html
License: License Free
Yesterday, we mentioned How to Delay Images Loading. Today, we have QueryLoader which preloads images or even a whole web page with Loading bar and custom animations.
There is always a minor problem when it comes to preloading image on a website. Nobody really has a full solution for it. There are a lot of preloaders available, but most of the time they only display the words: “Loading page†or have an animated image that spins.
Why can’t there be a nice loading bar of some kind? QueryLoader has it all. Loading bar, custom animations and getting all images included in the web page.
Requirements: jQuery Framework
Demo: http://www.gayadesign.com/scripts/queryLoader/
License: License Free
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.
Using Lazy loader on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
There are options for control maniacs who need to fine-tune. You can set threshold on how close to the edge image should come before it is loaded. You can also set placeholder image and custom event to trigger loading. You can check out the demo with FadeIn Effect enabled.
Requirements: jQuery Framework
Demo: http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
License: MIT License
The CSS Awards select the best websites developed with CSS from around the world. The awards are given to only the best desigerns, agencies and bloggers in the online community. The awards are selected daily under a strict system of valoration.
Websites are selected for the Site of the Day and Site of the Month by the international panel of judges. Winners of the awards receive cash prizes, technological equipment, and most importantly, the promotion, press releases and exposure of your website through their vast network of blogs, collaborators, directories and international forums related to web design and creativity.
Source: http://www.thecssawards.com/
Securimage is an open-source free PHP Captcha script for generating complex images and CAPTCHA codes to protect forms from spam and abuse. It can be easily added into existing forms on your website to provide protection from spam bots.
It can run on most any webserver as long as you have PHP installed, and GD support within PHP. Securimage does everything from generate complicated CAPTCHA images to making sure the code the user entered was correct.
Requirements: PHP and GD Support
Demo: http://www.phpcaptcha.org/?page_id=12
License: License Free
Since icons are such a huge element in modern day web design, WooThemes has partnered with Liam McKay, and brought you a fantastic new web icon set.
The WooFunction Icon Set includes 178 amazing web-related icons in a sophisticated and glossy design style. All 178 icons are available as 32×32 pixel PNG files and they are indeed pixel-perfect. If you have an in-depth look at the individual icons, you’ll notice that Liam has spent a lot of time paying attention to the finer details.
Requirements: –
Demo: http://www.woothemes.com/2009/09/woofunction-178…
License: GPL License
SlickPlan is a web-based sitemap/flowchart generator that allows for the creation of free sitemap and flowchart design quickly and easily. SlickPlan is ideal for web designers and developers who need to create navigation flowcharts for their clients. Although SlickPlan is perfect for professionals, its simplicity allows anyone who needs a basic flowchart to use it.
Creating an account enables you to keep your sitemaps neatly organized on SlickPlan’s website. That way, you don’t have to keep track of them yourself. Your sitemaps will be right in front of you when you sign in.
Requirements: –
Demo: http://www.slickplan.com/
License: License Free
A few months ago, James Padolsey introduced a cool greyscale technique for non-IE browsers. His technique inspired SohTanaka to come up with a workaround with a similar effect.
Greyscale Hover Effect with CSS & jQuery relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/hover-over-trick/
License: License Free
