Archive for the ‘Goodies’ Category

Online communication is a part of every designer/developer. With our friends, customers or colleagues, chats are usually the fastest and easiest way of communication.

Sometimes, the information we exchange online can be critical like passwords or "details of a project" and we want to make sure that it is private.

PrivyTalks is a free, simple and security-focused chat application that encrypts and decrypts the communication with RSA on the client-side.

PrivyTalks

Usage is pretty straightforward; once the room is created, the chat link is shared among two partners and the communication begins.

And, to make sure that there is no 3rd party sniffing the communication, fingerprints are created for each side, so they can exchange this information via another channel (like e-mail or SMS) and check if the connected user is the one that they are expecting.

That may sound paranoid but I'm sure every user had moments on worrying "what would happen if that info was leaked out" (and PrivyTalks is a simple + strong solution for the case).

The fast and real-time communication engine is built with Socket.io and the application works in all major browsers including mobile.

The increasing variety and usage of device/screen types (cell phone, smart phone, tablet, desktop..) urge the need for serving web content accordingly.

Adaptive Images is a solution for delivering browser-size-specific images for any device.. automatically.

It is JavaScript-PHP-powered where a lightweight JS file detects the browser size and the PHP file resizes the images on the web page. And, all this happens with the help of a .htaccess rule which redirects any requests for .JPG, .GIF or .PNG files to the PHP image processor file.

Adaptive Images

Adaptive Images is a plug 'n' play resource which can be easily integrated into any PHP website.

There is a built-in caching system for minimizing each image only once for each size.

Also, several options for customization exist including "array of browser-image sizes", .JPG quality and more.

glfx.js is a JavaScript library for applying effects to images using WebGL.

The library has a wide set of built-in-filters including brightness/contrast, curves, sepia, hue/saturation, noise, lens blur, tilt shift, hexagonal pixelate and much more.

glfx.js

glfx.js has 3 parts:

  • texture: a raw source of image data (created from an <img> tag)
  • filter: an image effect (represents one or more WebGL shaders)
  • canvas: an image buffer that stores the results (a WebGL <canvas> tag)

Every filter comes with different variables that can be configured to create custom effects.

Although WebGL is supported by most modern browsers, not by all of them yet (check if your browser supports it).

Diapo is a jQuery plugin for creating content sliders with beautiful and custom transition effects (like curtain and mosaic).

It can display images, videos or any other HTML and can be browsed manually (with prev-next buttons or pagination links that can also display thumbnails) or the auto-slideshow functionality.

Diapo jQuery Slideshow Plugin

The plugin is mobile-ready and has options to enable-disable features for mobile usage.

Transitions can also be customized by defining sliced rows-columns, the transition period and more.

Combogrid is a jQuery plugin for adding advanced auto-complete functionality to input fields.

As the user types, it displays the list of possible results dynamically inside a paginated grid interface.

Requests are sent via Ajax and results are returned in JSON (or JSONP for cross-domain requests) datatype.

jQuery Combogrid Plugin

There are many options provided like the ability to setup alternate row colors, auto-choosing the result that matches the query, minimum length of the text before the grid is activated and more.

Also, it is ThemeRoller-ready and there is keyboard support for navigating through the items.