Connect With WRD
feed via e-mail
feed via e-mail

There are many beautiful content sliders out there which can be easily integrated into web pages where most of them come with a default design and functionality.

If you want to create a completely custom one, Revolver.js,a boilerplate for customizable sliders is a good fit.

Revolver.js is a jQuery and MooTools plugin with an API covering the most common slider functions.

Revolver.js

Almost any markup can be used for sliders, their designs are under control with CSS and the API is flexible enough to manage it in any desired way.

There are various transitions types to choose from, functions exist for browsing items (first, last, next, etc.) and callbacks are offered for each event.

The resource is very easy-to-use, documented in detail and has a small footprint (~4.5kb minified).

Grid Builder is a web application handy for anyone looking to create a base HTML-CSS grid quickly.

On a canvas with a 3*4 grid, you simply drag 'n' drop the given grid units to create the desired template (like a 3 column design with a header and footer).

3*4 Grid Builder

After that, just click the "Show me the code" button and get the HTML-CSS output of the designed grid.

P.S. You can also check out "The 892 unique ways to partition a 3 x 4 grid" article andget the PDF provided to find more about the 3*4 grids.

MASHA is a JavaScript utility that allows readers to highlight any parts of a web content and share it with others.

The feature is triggered when readers select any desired text and an icon appears to inform them about the feature + create a unique link when clicked.

Masha

Readers can simply click the icon, copy the unique URL generated and share it with others. When a MASHA-generated URL is loaded, the selected text is highlighted so that it is seen easily.

There are callbacks for onMark, onUnmark and onHashRead (when a MASHA URL is loaded) that makes custom events possible and a WordPress plugin exists for quickly adding this utility.

Info: The demos of the resource don't work as the source video files are unavailable.

Acorn Media Player is a jQuery plugin for creating a customizable HTML5 media player with support for accessibility.

The player can be completely controlled with keyboard (with standard tab-based navigation), has screen-reader support + accessible themes and various other accessibility tweaks.

There is also support for closed captions and a dynamic transcript generated from the selected captions is provided.

Acorn jQuery Media Player

Acorn Media Player can be themed with ease, can display videos in fullscreen, informs users on loading processes with loading + buffering indicators and can even remember the volume level used with HTML5 localStorage.

The sliders (seek and volume) can either use jQuery UI's widgets or a custom one is provided as well and few other options exist (like the direction of the volume slider) for further customization.

Qhub LogoQ&A websites are a great way of sharing information with other users. Simple, focused and easy to use for everyone.

Qhub, a web application for quickly creating Q&A websites, is giving away 4 annual licenses (1*Deluxe and 3*Pro licenses) to WRD readers.

Joining the giveaway is pretty easy and details can be found at the bottom of this post.

What is Qhub?

Qhub is a hosted web application for having a question and answer website within minutes.

It is either a new community you are trying to create or a place to engage with your users and answer their questions, the application handles the requirements well.

Qhub Sample Website

Users can simply ask questions with adding tags to them and others can choose to answer and/or rate other answers. There is also a point system for motivating users to be more active.

The look and feel of the website can be completely customized (logo, background, colors, custom CSS, etc.) to match the main website.

Admin panel provided is feature-rich enough to control users, entries and any other system settings.

Various widgets (like Side Tab widget or Ask a Question widget) are offered for spreading the content into other websites. And, an API exists for integrating the data with 3rd party apps.

How to join the giveaway?

Qhub is giving away 1*Deluxe and 3*Pro licenses (all of them are annual) and in order to join the giveaway, you can choose one or both of the options below to increase chances of winning by:

The winners will be announced as an update to this post a week later (12 Jan 2012).

Good luck everyone.

The winners

Here they are:

  • @ElDesperado381 (Deluxe account)
  • Zack (comment #484588) (Pro account)
  • Mosselman (comment #484813) (Pro account)
  • @LOx3N (Proaccount)

Congratulations and thanks to everyone for joining the giveaway.

Designing grid-based layouts in Photoshop is usually a headache as it takes time to calculate and position many vertical + horizontal guides.

GuideGuide is a free Photoshop plugin which simplifies creating grids in Photoshop with only a few clicks.

GuideGuide Photoshop Plugin

After defining a few variables (number of rows/columns, gutter width, etc.), it instantly generates the grid using Photoshop guides. And, for any active selections in the document, the plugin sets the grid within the limits of the selection.

Also, any frequently-used grid settings can be saved for later use.

P.S. Smashing Magazine has a very nice article on the usage details of the plugin.

Sugar is a JavaScript library that aims to ease JS development by extending its native objects with new, helpful methods.

It brings lots of new featured for working with strings, numbers, dates, arrays, objects,regular expressions and functions.

Sugar JS

As an example:

  • capitalize would make the 1st letter capital
  • isEven and isOdd helps finding if the given number is odd or even
  • count would find how many times the given character exists in an array
  • isFuture would return if any given date is bigger than today
  • and so much more.

The library is very well-documented and it is a huge helper for JavaScript-heavy applications.

Bijou is a set of beautiful icons that are tiny-in-size yet pixel-perfect in details.

There are 120+ items in the set which consists of popular icons like charts, actions, arrows, smileys, etc.

The download package includes transparent PNGs, a PSD file with all the icons as layers and a Photoshop custom shapes version (.CSH).

Also, usage is free for personal and commercial projects (no attribution required).

Bijou - Free Vector Icons

Scrollorama is a jQuery plugin for creating eye-candy effects in parallel to the scrolling of web pages.

By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.

The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.

Scrollorama

Few months ago, a WRD article: "9 Free JavaScript Libraries & Templates For Beautiful Web-Based Presentations" has shared great presentation engines built by web technologies.

A new presentation framework is released recently -named Impress.js- which enables us to build very beautiful outputs.

Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).

And, for older browsers, Impress.js fallbacks to a standard presentation without the effects but by keeping the functionality.

Impress.js

Uptime Robot
feed-holder
FeedBurner
  • ManageWP
  • PSD to HTML
  • PSD to HTML
    aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter