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

Archive for the ‘Goodies’ Category

FileAPI is a huge set of JavaScript tools for almost anything related to working with files.

It provides the features for file uploading (single/multiple) with drag ‘n’ drop support, image cropping, resizing , applying filters, getting file info and much more.

FileAPI

The tools are standalone and comes with a PHP class that handles the actions on the server-side.

Also, there are Flash fallbacks for unsupported browsers (uploads and camera). And, it is documented in detail.

There are many jQuery slideshow plugins out there (make sure you check the Gallery section) and it is usually hard to decide which one is better.

Actually, sometimes, it is not about being better but being a good fit for the job as each gallery has various differences from another.

jQuery SlideMe! Plugin

SlideMe! is another solid option which is responsive and supports both limited or full screen views.

It can be used vertically or horizontally, makes use of CSS3 transitions and has support for pagination.

There are methods to control the slider (prev, next..), callbacks for each of them and much more.

Ember Charts is an open source and free charting library that is built with D3.js and Ember.js.

The library has support for time series, bar, pie and scatter charts where all of them can be extended with ease.

Ember Charts

It is possible to customize and add/remove legends, labels, tooltips or mouseover effects.

Also, for Ember.js fans, the same team also develops 2 other handy projects: Ember Widgets and Ember Table.

We usually use Google Maps with its default styles which is the most familiar one to all.

However, starting with v3 of the Google Maps API, it can be customized with ease so that the look and feel can match the website’s design.

Snazzy Maps

Snazzy Maps is a website which shares many Google Maps styles freely.

There are already 20+ styles and, once clicked, the JavaScript array for the style is displayed and can be downloaded.

File uploads are one of the most problematic things when it comes to web development (security, big files, etc.).

Resumable.js, a JavaScript library, handles one of the problems: the ability to resume uploads.

The library uses the HTML5 File API and offers a fault-tolerant upload mechanism by splitting each file into small parts.

Resumable.js

And, whenever the upload of them fails, uploading is retried until it is completed so that connectivity issue is never a problem.

Also, users can always pause, resume or restart uploads with ease.

There are options to set the size of the chunks, detect if the HTML5 File API is supported, getting the progress status and much more.

Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders.

It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript.

The slider is responsive, it’ll adapt well to all devices and comes with touch support.

Glide.js

You can navigate through the items with keyboard, swipe events or with the help of the bullet and arrow menus.

Glide.js also has a public API that supports all its events (play, pause, next, prev, etc.).

It is sometimes the network our the computer but losing the internet connection happens to everyone.

And, when this happens to the users while they are browsing your website, we can inform them nicely so that they easily know “the problem is not about the site”.

Offline.js, a simple JavaScript library, detects the disconnection and presents an alert to the users about it.

Offline.js

Also, it re-sends any failed Ajax requests once the connection is back so that the users are not affected at all.

The library is plug ‘n’ play with no setup and it comes with multiple good-looking themes.

Creating the design and functionality of a form with HTML is the most standard way.

Alpaca, a form-creation-library that is built with jQuery, aims to change that by separating the data and presentation.

It transforms a pre-formatted JSON schema into a fully-functional form which can be styled easily with CSS.

Alpaca - jQuery Forms

Using that approach, it is possible to reuse the same code on any platform (mobile- tablet, desktop).

The library is pre-packaged with controls, wizards, layouts, I18N support and pluggable template engines for EJS, Handlerbars and jQuery.tmpl.

Alpaca’s documentation is worth checking for finding out out its capabilities.

  • Tags:
  • Filed under: Forms, Goodies, Other License
  • 2 Comments
  • TemplateMonster is one of the biggest and oldest brands when it comes to website templates.

    They have a huge repository of templates for anything, standard HTML, mobile, e-commerce, Facebook and more.

    Also, they have WordPress themes (here) + Joomla templates (here) and they are giving away “any selected template” to 5 WRD readers.

    Both of them have 1000+ of options to choose from and they can easily be filtered through categories (business, sport, design, etc.) or colors.

    TemplateMonster Joomla Templates

    How to join the giveaway?

    In order to join, you can simply answer “which TemplateMonster template would you like to win?” in the comments.

    The winners will be selected randomly with the query below and announced as an update to this post 1 week later (29 Oct 2013).

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

    Good luck to all.

    The winners

    Here they are:

    • Wesam Alalem (comment #1279753)
    • Etrimon (comment #1279721)
    • Makarand Patil (comment #1279778)
    • Drake (comment #1279765)
    • mohd (comment #1279709)

    Congratulations to the winners and thanks to everyone for joining.

    Sometimes, we need to take environment-specific actions while working on web projects.

    Device.js is a tiny JavaScript library that simplifies writing conditional CSS or JavaScript that is based on the platform, operating system or browser.

    Device.js

    The library detects them and adds specific classes to the <html> element, just like <html lang="en" class="android tablet landscape">.

    But that’s not all. Device.js has JavaScript methods to detect them too. And there is support for all the major operating systems + browsers.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com