When we need to clip an irregular shape from an image and use it on the web, PNG is the most common answer as it is the only image format used by all web browsers that support alpha channels.

However, PNG images come with a penalty of size (if the source is a photograph) compared to similar sized JPEGs.

polyClip.js is a script, built on jQuery, that allows us to clip any image with imagemap coordinates using HTML5 Canvas.

For implementation on many images, "how practical would it be to use polyClip.js" is open to discussion however, for only few images, it can be a huge byte-saver.

And, it is supported in most browsers including IE7 (with Excanvas).

WordPress offers a huge space for creativity and flexibility when designing and developing new websites.

Any type of website can be built on top of it: from blogs to newspapers, corporate websites to landing pages and even social networks. All you need is a theme coded to handle that functionality.

Yes, WordPress theme development. That is an easy process for experienced hands who knows the capabilities of the application and familiar with its functions and "not too hard" for others.

To simplify developing new themes, there are awesome WordPress theme frameworks and starter themes that you can use as a base for skipping the repetitive steps and begin with an optimized playground.

Here are the 34 free and good-quality ones that will save your time from searching them. And, in the bottom, you can find a comparison table for these WordPress theme frameworks.

Roots

The main power of this framework is its extremely clean WordPress code output, clean head and URLs (even for the head, CSS and JS paths).

Upon its activation, it automatically applies many useful customizations (like creating a homepage, defining the permalink structure, etc.).

Roots has 2 widget areas and it includes Blueprint CSS, 960.gs, the 1140px Grid, Adapt.js, Less Framework 4, Foundation by Zurb, and Bootstrap by Twitter.

Skeleton

It is a theme aimed at helping you build simple, uncluttered, useable, and mobile-friendly websites.

Skeleton has styling for typography and form elements + includes simple tabs and accordions.

The theme is based on and inspired from Skeleton Responsive Boilerplate, Theme Options Framework, Thematic Framework, Formalize and TwentyTen Theme.

P.S. There are also optional styles for bbPress and Jigoshop.

Read the rest of this entry »

HTML5 Please is an interactive compatibility chart of HTML5/CSS3 features to find out "in which browsers they are supported (or not)".

Using a smart search bar, it is possible to filter the results with browser or device support, type (HTML5 or CSS3 elements/properties) and more.

Every item is described shortly and an opinion on whether they should be used with fallbacks or polyfills (with links to them) are shared.

The site is simply a must-bookmark for anyone designing with the new web technologies and need a guide for quickly checking the support for each property/element.

In order to save space and display the content only when requested, expanding/collapsing panels are used widely.

Using jQuery, such a functionality is very easy to implement with methods like toggle, show, hide and several others.

jQuery-Collapse is an ultra-lightweight (<1kb minified) plugin built specifically for this case with added features.

It allows us to define the HTML elements to be hidden and displayed when needed with a simple function that has callbacks for integrating custom events.

There is also cookie support which remembers the state of the content panels and displays them accordingly when the page is re-visited.

The plugin is also designed with WAI-ARIA in mind that helps the web pages being more accessible to people with disabilities.

And, it is also cross-browser, completely tested in major browsers (including IE6).

You'll remember the 2 previously shared and popular resources for quickly developing websites: Twitter Bootstrap and Foundation.

Here is a powerful alternative named HTML KickStart which is a HTML5, CSS and jQuery-powered toolkit for easily creating any type of layouts with web elements in-rhythm.

It has styles for grids, typography, forms, buttons, tables or lists and cross-browser eb elements like a JavaScript gallery, lightbox, breadcrumb navigation, menus with sub-menus and more.

HTML KickStart is focused on providing a clean, standards-compliant and cross-browser mark-up (for HTML,CSS and JS).

The project is documented in detail, has examples for all elements and it is improved regularly.

Rickshaw is a JavaScript toolkit, created by the developers of the stock photo service Shutterstock, for generating interactive and real-time graphs.

It is built on top of the D3.js visualization library and can render stack or line graphs.

The graphs are interactive, respond to hovering them or their legends, items in the stack can be re-ordered with drag 'n' drops and more.

There is a good margin for customization: colors, sizes, interpolation and functionality in general with the modular/extendable structure of the toolkit.

TextExt is a feature-rich jQuery plugin for improving the functionality of text input fields.

The plugin is modular, can be extended easily and has features like tag inputs, filtering, auto-complete, placeholder text and Ajax (which are all plugins of TextExt).

It can also display a custom arrow besides select fields, show the items in them as suggestions-while-typing and more.

TextExt is very well-documented, regularly improved and has too many examples to start with.

Gridpak is an interactive web application for generating responsive grid layouts very quickly.

The width of the grid, number of columns, column padding and gutter width can all be defined which are standard features we have seen from several other layout generators.

It gets better with the ability of adding breakpoints for responsive outputs. You can change the size of the layout, click "Add break point" and there you have it.

Once you have setup the layout, a custom download is ready which includes:

• a CSS file with all the classes and properties you need to create the responsive grid layout
• a LESS file with much the same information but including variables, mixins and methods to help you.
• an SCSS file like the LESS file, but in SCSS.
• a semi transparent PNG image for each grid you have created to help with your design, or with lining things up in your front end.
• a JavaScript snippet that allows you to toggle an overlay of your grid on and off in any browser using the 'G' key.

InkyDeals is a daily deals website, shared previously at WRD, focused on offering design resources for much lower prices.

They are regularly featuring items like vectors, Photoshop actions, PSD templates, brushes and more.

They have packed a new and huge set of design resources named Winter Bundle which includes:

• 100 floral vectors
• 270+ vectors of fashion items and silhouettes
• 10 vector t-shirt designs
• Japanese art vectors
• Tillable paper textures pack for Photoshop
• 100 winter-themed vectors
• 100 spring-themed vectors
• 54 hand-drawn, colorful sugar skulls and 14 floral elements
• 30 vector trees
• 9 Heraldry Photoshop brush packs
• Photoshop actions for cinematic 3D effects
• A set of seamless floral patterns
• 100 valentine-themed vectors

The pack would originally be priced $500+ if items were purchased separately but offered for $29 as a bundle.

InkyDeals Winter Bundle's license is royalty-free, can be used over and over again and the pricing is valid until 24 Jan 2012.

Almost every website owner tracks the statistics of their websites with the free and powerful Google Analytics.

The service has made a huge step forward with its "live stats" feature which shows the instant activity.

There are very few reasons left to use another solution to track stats where one of them is the lack of "live overall stats" (as Google Analytics still displays the overall stats with a delay) and the other is the need for using an open source system.

For anyone looking to see the overall stats in real-time and needs a simple/lightweight solution (compared to other options like Piwik), ChiliStats is an alternative.

The application is free, open source, built with PHP and uses MySQL for storing the data.

It presents a snapshot of the statistics -supported with charts- in a "OneView" page and sub-pages for viewing top-referrers, visited pages or referring keywords exist. And, a "History" page allows digging the statistics of past months.

ChiliStats also offers a stats counter widget to be integrated inside web pages.