Hidden side menus are a good way of enabling users to view the navigation options on request. And, they are perfect for responsive layouts as they save space.

Sidr is a jQuery plugin for creating “hidden side menus” on-the-fly.

It can be set to be displayed at right or left, a single page can have multiple side menus and offers multiple methods (existing or remote content) for loading the content.

For responsive layouts, a Sidr menu can be attached to a button (that is displayed for specific screen sizes with media -queries) and it’ll be a very handy navigation solution for small screens.

Animated GIF files are the widely-used format for displaying “loader…” images.

Sonic is a tiny JavaScript class for creating such loader images with HTML5 canvas.

It works by drawing a shape at tiny intervals along a pre-defined, custom path where sizes, colors or fps can all be customized.

There are ready-to-use examples provided and a web-based Sonic Creator exists for creating loaders and getting them as a HTML5 canvas code, animated GIF or a sprite image with the CSS3 code.

RazorFlow is a PHP framework for easily creating dashboards that work well on all major devices and browsers.

It works by simply inserting a single PHP file into any app, feeding it with data and choosing the output type.

The outputs can be charts (many chart types are supported), data grids or items that display a single value.

They are all interactive, have support for filtering the data and, like mentioned, they are responsive.

RazorFlow can connect to MySQL, PostgreSQL, or SQLite databases.

Bespoke.js is a lightweight (<1kb minified-gzipped) JavaScript framework for crafting totally custom presentations or content sliders.

It is a foundation that offers the base (keyboard + touch support and adding the necessary classes to slide items) and the rest (CSS transitions or any other JS ) can be developed however preferred.

There is a JavaScript API provided with all the major events like next, prev, a specific slide, etc. and a plugin system exists for extending it.

Also, the demo includes awesome themes that can be find many use cases to themselves.

Swipebox is a jQuery lightbox plugin that has support for touch events and works well in responsive layouts.

It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too.

The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers.

Captions can be displayed with ease and few options exist for customization (like the appearance delay of the action bar)

Induction is an open source and free tool for understanding and communicating relationships in data.

It can be used to explore rows/columns, run queries and visualize the data in several ways.

The tool has support for many databases including PostgreSQL, MySQL, SQLite, Redis and MongoDB. Also, any others can be added by writing new adapters.

Induction is currently in alpha and not a full-featured client yet but has a roadmap to become one.

Today, creating cool videos for any platform (web, TV, etc.) is not that hard with the help of high-quality footage.

VideoBlocks is a professional stock footage website to find 100,000+ stock videos, motion backgrounds, sound effects, production music and more.

Info: VideoBlocks is giving away 3 * 1 month (unlimited downloads) subscriptions ($79 value/each) to WRD readers and details can be found at the end of this post.

The website has a huge library which is well-categorized (slow-motion, nature, people, locations or cartoon, ambiance, horror.. for sounds) which eases browsing and locating the right resources.

In contrary to what you would expect, they are offered for a good price with a single plan of “unlimited downloads”. They can be used in any type of projects and no additional fees for that.

VideoBlocks’ library grows regularly with new resources being added each day and their footage is already being used by media giants ABC, MTV or National Geographic.

How to join the giveaway?

Commenting to this post is enough. Winners will be selected on 27 March 2013 (1 week later) with the query below and announced as an update to this post.:

SELECT * FROM wp_comments WHERE comment_post_id=3885 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck.

The winners:

• dlv (comment #1182947)
• Luca (comment #1182707)
• pablo luis rey (comment #1186747)

Congratulations to the winners and thanks to everyone for joining.

HTML form elements look and behave slightly (or sometimes more) different in each browser.

In order to find out the differences and test them easily, there is a website: Native Form Elements.

The website does a simple thing, it lists all the form elements (including HTML5 elements) and their disabled states.

So, to compare, opening the site in different browsers is enough.

While working on web projects, we usually use dummy content and images to see how things would look.

hhhhold is a free service for inserting random images (from FFFOUND!) of any size to our projects.

By using a specific URL format, we can call images with a pre-defined size, format and brightness.

There are various other placeholder image services however hhhhold is capable of bringing random-sized images which is great to stress-test our layouts that may have different-sized items.

The service works directly by using hhhhold as the source of images or with the help of a jQuery, WordPress plugin and a Sublime Text plugin.

Chart.js is an impressive JavaScript charting library that is built on top of HTML5 canvas.

It currently supports 6 chart types (line, bar, radar, pie, column and polar area) and all this comes in a standalone, <5kb package.

Colors, fonts, borders and their sizes can all be customized. Also, optionally, charts can be loaded with an animation.

As the library is built with canvas, it works on a wide set of browsers, loads fast but lacks interactivity.