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

Archive for the ‘Goodies’ Category

firefly is a totally different chat system which can power your websites.

By adding a line of JavaScript, your visitors can chat with each other in an overlayed screen.

JavaScript Chat

Users can:

  • See other users mouse movements,
  • Choose avatars,
  • See the chat history,
  • Howmany people are already in the page.

As a developer, all I can ask for more is an API that enables integrating any userbase to the system for adding auto avatars, names to the users etc. Considering this is a fresh chat service, in the future, why not?

You should definitely give firefly a try & will probably be impressed.

This is a JavaScript time picker with a drag’n drop enabled clock interface.

JavaScript Time PickerUsage is very simple, hour and minute hands can be dragged & dropped to the desired value. Clicking to the AM-PM also enables you to switch between them.

This time picker is highly configurable including the "starting hour", sizes & images used.

It requires Mootools and the document to be a XHTML doctype to run. Download package includes all the necessary resources including the PSD files.

Flare is an ActionScript library for visualizing data like creating charts, graphs and complex interactive graphics.

The library supports data management, visual encoding, animation, and interaction techniques. It provides a modular design which enables you to create customized techniques easier.

Flash Visualazation Library

Flare has a tutorial which will help you to start using it and its API is well documented.

To see its power, check the demos.

ProtoChart is an open source canvas chart library built with Prototype.

This library is highly inspired from Flot, Flotr and PlotKit & it enables us to create different chart types on the fly.

Prototype Canvas Charts

Features of this chart library:

  • Line, bar, pie, curve, mix, and area charts available
  • Multiple data series on same graph
  • Highly customizable legend support
  • Customizable grid, grid border, background
  • Customizable axis-tick values (both x and y)
  • Supports: IE6/7, FF2/3 and Safari
  • Even works on an iPhone!

As IE6 does not support the canvas tag, Excanvas library is used for compatibility.

Logdy is a real-time web analytics service that provides all the information you may need about your website.

With an easy to use, plain and Ajaxed interface, Logdy makes it very easy to drill down every detail even to the user level.

For example, you can filter: 

Visitors from x country > who used Google > reached your contact page > using "contact" keyword.

Real Time Statistics

Logdy enables you to reach data (in real-time) like:

  • Visitors: daily, weekly, monthly summaries, countries, languages, timezones.
  • Sources of visitors: keywords, search engines, referring pages, referring domains and more.
  • Visitor navigation: entry pages, exit pages, pages popularity, visit depths, visit duration.
  • Outbound links and pages.
  • Technical stuff: browsers, browser types, platforms, screen resolutions, screen color depths.

A beautiful feature is "outbound links report". It shows which links your visitors click on your website & even magnify the users who clicked them like every other report.

Country Analysis

You can instantly share your analytics with other users with the special "share link" which Logdy creates & also get reports to your e-mail.

With a 1-click "cookie install", you may choose not to track yourself in the analytics for more objective results.

To sum up, Logdy is a very user-friendly service for reaching the deepest parts of your stats in real-time.

The service has a free 1 website plan besides the bigger & paid ones. You can find the pricing for the service here.

P.S. This post is a sponsored site review.

js-hotkeys is a jQuery plugin which enables you to create keyboard triggered events.

Update: The plugin is based on shortcut.js. You may want to use this for not being restricted with jQuery.

This is a very nice feature if you want to provide users more browsing flexibility. And also, it can be used in JavaScript testing environments like triggering a test function by clicking CTRL + t.

JavaScript Keyboard Control

A simple usage of the plugin is:

$.hotkeys.add('Ctrl+a',function(){/*DO YOUR DUTY*/});
$.hotkeys.remove('Ctrl+a');

A demo of this jQuery keyboard control plugin can be found here.

woork presents a nice MooTools news ticker, which scrolls vertically, similar to the one in Newsvine.

Mootools News Ticker

Content is currently hard-coded inside the HTML within li elements. There is also an information provided for how to get the content dynamically from a database.

Speed & delay of the slide effect can be configured within the code.

Spacegallery is a very simple but nice image gallery built with jQuery.

It is a static gallery where images are hardcoded in the HTML and presented with a beautiful grow – fade out effect.

jQuery Image Gallery

How to use?

After inserting the JS & CSS files into your webpages, create a div element with images inside like:

<div id="myGallery" class="spacegallery">
    <img src="images/bw3.jpg" alt="BW" />
    <img src="images/lights3.jpg" alt="Lights" />
</div>

And call the gallery:

$('#myGallery').spacegallery({loadingClass: 'loading'});

You can also configure the perspective, border & animation duration.

MooColumns is a Mootools class that helps creating multiple-column contents easier & quicker.

It automatically divides the contents into columns and supports multiple instances to be run at the same page.

Mootools Columns

MooColumns is highly configurable. You can mention the classes which the column-creation will be applied, specify column-break elements, number of columns & column widths. Or leave all these settings to the default ones.

This Mootools class is currently in beta but looks promising and very functional for presenting the content.

FotoViewr is a web-based image gallery application which enables you to create 3D image galleries for your Flickr account.

You can choose to present your images from 6 different 3D gallery types.

Flickr Image Gallery

Galleries can be created instantly by simply providing your Fickr username (no password required) and the applications lets you select which gallery to display.

After the Fickr gallery selection, FotoViewr provides you the embed code you need to insert into your webpage to display the gallery & that’s it.

Tip:

FotoViewr also has a Facebook application to use with Facebook galleries.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com