There are various jQuery plugins for filtering and sorting elements where the most popular ones are Isotope and Quicksand.

MixItUp is another great plugin to handle such tasks that deserves to be bookmarked.

While jQuery part decides which elements to show or hide, CSS3 transitions are used for animating them.

The plugin plays nice with responsive + fluid layouts it is lightweight and works pretty fast.

There are many options for customization: effects, easing, their speed, etc. and it is very well-documented.

Gallery CSS is a content slider that is built with HTML-CSS and without any JavaScript.

It is an ultra lightweight solution (<1kb gzipped) and comes with an acceptable browser compatibility (IE9+).

There is support for auto-play, items can be browsed with the ready-to-use bullet-navigation or by simply linking to any slide.

The slider can display any HTML and a very useful resource for simple and fast-loading galleries.

Map Icons Designer is a free set of 200+ icons that are designed to be used in maps.

The set is available in 2 formats: PSD (vector shape) + PNG and includes items for transportation, hotels, restaurants, animals and much more.

There are also 10 different-styled location pins where all look great.

And, the set is completely free to be used in both personal + commercial projects.

Kartograph is a framework for creating interactive maps without any mapping provider (like Google Maps).

It consists of 2 libraries:

• a Python library thatrenders vector maps from shapefiles or PostGIS and converts them to SVG
• a JavaScript library for turning these SVG data into interactive maps

If you already have the SVG data (for ex: any drawing can be converted to SVG with Adobe Illustrator), only the JavaScript library can help too.

The JS library uses jQuery + Raphaël, outputs can be styled with CSS and a very good documentation is provided.

Displaying video on websites is both easy and hard as a good video experience usually requires a custom-styled, cross-browser and fast player.

Flowplayer, the popular HTML5 video player, offers a great experience with a completely customizable feature set.

One of the most important things when playing video is probably the browser support. The player does that perfectly with HTML5 by default and falling back to Flash when needed.

Flowplayer’s interface is completely customizable and it comes with 3 beautiful skins. Also, its layout is fluid and works in any screen size with no extra settings.

There is a web-based designer to create a completely new skin and also see how flexible it is.

It can be controlled very easily (keyboard and touch events support) and offers a (native) fullscreen mode too.

Cuepoints can be defined for any video, sub-titles can be added and the videos can even be displayed in slow-motion.

For a better customization, any HTML can be shown when the videos are preloading and once they are ended (good for presentations and branding).

Flowplayer integrates well with Google Analytics and can track “how long a video is played, how many times it is played and in which format (HTML5 or Flash).

Each video file is embeddable (if enabled) with the help of a share button that auto-generates an embed link.

All the functionality of the player can be controlled with a powerful API and it has callbacks on every level to interact with any event.

The player is open source and free to use under the GPL license. For commercial use, it requires a license.

And, Flowplayer team provides great support (paid support exists) and an active user community that discusses on their product forum.

How to join the giveaway?

Flowplayer is giving away 3 * Commercial licenses ($95 value/each) and in order to join:

• please comment to this post

And, the winners will be selected randomly on 06 May 2013 (1 week later) with the query below:

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

Good luck to all.

The winners

Here they are:

• bigcloud (comment #1263775)
• Techspy (comment #1263756)
• Federico Garcia (comment #1263809)

Congratulations.

Sometimes, we don’t know how our SQL query will look like exactly as there are times that the query needs to be created dynamically.

Or, you may just be looking for a solution that will make SQL queries more readable.

Squel.js, a lightweight JavaScript library, helps building SQL query strings very easily through an object oriented API.

It works both on the browser (not advised as the queries will be visible to all) + with nodejs and supports all standard SQL queries (can be customized to support non-standard queries).

Flexisel is a jQuery carousel plugin that works well on screen sizes down-to-mobile.

It has settings for enabling autoplay, defining the animation speed and stopping on hover or not.

The standard layout of Flexisel adapts to different screen sizes but also, the plugin provides an option to customize the “number of visible items” for the screen sizes preferred which offers a great experience for users.

Companies usually share media related to their brands (logo, guidelines, images or documents) online so that they can be re-used properly by others.

Smartimage, a professional and paid web service, makes managing such media so easy and also provides a great experience for the end users.

It enables the brand admin to upload files (AI, EPS, GIF, JPEG, PNG, TIFF or PDF are supported) tag and categorize them from a clean admin interface.

Uploading is pretty easy via drag ‘n’ drops and a graphic file manager exists for editing meta data when needed.

After that, end users can browse these items from a user-friendly web page and download them in various sizes including Retina Display (different sized versions are auto-created).

The whole collection or each item can be shared with others with social links, e-mail or embedding.

And, Smartimage keeps track of all these sharing activity besides stats like “the number of downloads”.

Items uploaded can be public or private, the whole layout works in all major devices including mobile and custom domain names can be used for the hosted brand page.

The service is being improved regularly and new features like “multiple admins, customizable collections, video support” are planned to be released.

A demo exists to find out how an image collection can look like and the app can be tried freely for 45 days.

There are pretty standard ways to approach navigation when it comes to responsive layouts and, previously, responsive jQuery menu solutions were shared at WRD.

FlexNav is another jQuery plugin for easily handling menus in responsive layouts and it does that well for complex ones too.

The plugin has support for unlimited sub-menus that work similarly in both desktop and mobile layouts.

It has no-JS fallback, works with keyboard-tabs too (for accessibility) and touch-friendly.

There are various jQuery plugins for creating Pinterest-like dynamic grid layouts.

jQuery.Shapeshift is a strong alternative to them with an an extra touch: the items can be drag ‘n’ dropped (uses jQuery UI).

The drag ‘n’ drop doesn’t effect the grid negatively as the grid auto-fills the gaps when needed.

It also works on touch devices and responsive layouts.

The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.