PHP Bug Lost is a free and open source script for debugging and monitoring PHP code.

It is a one-file-script, works by inserting a function inside web pages and displays the information in a console window right over the web page.

The script can present custom logs, SQL queries, variables, Ajax queries and measure loading times + CPU/memory usage.

PHP Bug Lost is not only built to be used in the development environment but it can also be set to auto-send e-mails when any of the monitored data is over or below the expected values.

App Icon Template is an icon design toolkit for creating iOS application icons faster.

The kit includes a .PSD + .ATN (Adobe Photoshop Action) file where the .PSD comes with useful layers like the rounded corners, gradients and even various background textures.

Smart objects are used to automate the generation of multiple sizes and, once the design is saved, the template instantly displays the same icon in multiple sizes.

The PS actions included generate every needed file, both in squared (no transparency, to be used in the app) and in rounded versions (for other design uses). The files are automatically named after the Apple HIG so they’ll be good to deliver instantly.

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.