Compfight – Rails Based Ajax Search for Flickr Photos

Compfight is a home brewed flickr search tool specifically for the advertising / design community. The rails based ajax search bar pulls in a flickr feed at speed so that you can quickly scour the site.

You can restrict your search to the Creative Commons with “only”, and use the “commercial” setting for commercially usable assets. Blue bars indicate flickr is holding an original. Linger your cursor over the image to display dimensions. For nothing but originals switch Seek Original to “only.”



Information is shared by www.ideasroad.com

jCryption – Javascript HTML-Form Encryption Plugin

jCryption is a javascript HTML-Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form. It uses the Multiple-precision and Barrett modular reduction libraries for the calculations and jQuery for the rest. jCryption is completly free and dual licensed under the MIT and GPL licenses like jQuery.

Normally if you submit a form and you don’t use SSL, your data will be sent in plain text. But SSL is neither supported by every webhost nor it’s easy to install/apply sometimes. So I created this plug-in in order that you are able to encrypt your data fast and simple. jCryption uses the public-key algorithm of RSA for the encryption.

jCryption at it’s current state is no replacement for SSL, because there is no authentication, but the main goal of jCryption should be a very easy and fast to install plugin which offers a base level of security.

Information is shared by www.ideasroad.com

Tagedit jQuery Plugin with Auto Complete List

Tagedit jQuery Plugin by Oliver Albrecht offers an easy way to add, edit and delete lists of keywords. Keywords can be brought to the user with a autocomplete list. I really like the clean and sleek design of the tags. This work is licensed under a Creative Commons Attribution 3.0 Unported License.



Information is shared by www.ideasroad.com

Custom Variables & Advanced Segments in Google Analytics

For many webmasters, Google Analytics is an awesome way to collect information while experimenting and study what’s going on with your website or web application. Tweaking Google Analytics can give some terrific data that wouldn’t be available by using their default setup.

Alan Johnson has published an article: Advanced Google Analytics for Startups, which tells us how to use Custom Variables and Advanced Segments to get more useful information from Google Analytics.



Information is shared by www.ideasroad.com

Visualize Images Using HTML Text with Textify

Textify lets you drag an image onto the page and watch it be reconstructed purely out of text. The markup for the resulting textual image can be copied and used elsewhere.

There are a lot of settings which allow you to control the characteristics of the text. Even the smallest tweak to the settings can result in a very different output. Beware that using very large amounts of text will cause heavy browser lag. Textify has only been tested and confirmed to work in Chrome and Firefox 4.



Information is shared by www.ideasroad.com

How to Drive Your Visitors Away with Annoying.js

Kilian Valkhof came across a website that had a whole slew of JavaScript that attempted to prevent you from selecting text, right clicking or dragging any content onto your desktop.

So he decided to copy the JavaScript and create a library with examples of JavaScript techniques you can use if you want to scare your visitors away, or want to piss them off. Annoying.js is the result.

As you can see, you can do some pretty bad things with Annoying.js that will certainly drive your visitors away. However, some functions is actually very useful if you’re writing complex “html5″ web applications. By disabling text-selection on interface elements you can make the application easier to use, and you can re-implement the right click menu using your own options.



Information is shared by www.ideasroad.com

Add Notes to Code Snippet and Share Them Easily

Giving one-off feedback on coding errors is a pain. You just want to share a quick, contextual note with someone, but there aren’t any good tools out there to help you do it.

Chop is a simple way to add notes to a code snippet and share them. Chop is a quick and easy way to let the offending engineer know the error of their ways. Just copy and paste the lines in question, add your notes and share them with a unique URL.

The person you share with will have the chance to pull out their Chopper and comment right back. You can keep the conversation going and even add more people to the mix if need be.



Information is shared by www.ideasroad.com

Pure Browser QR-Code Generation jQuery Plugin

jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download.

It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language. jquery.qrcode.js wraps it to make it easy to include in your own code. You can also try out QR-Code Generator.



Information is shared by www.ideasroad.com

Sigma Grid – Ajax Editable Data Grid

Sigma Grid is written in pure javascript, which is an Ajax data grid for displaying and inline editing data in a scrollable and sortable table. Sigma grid appearance is controled via a stand-alone CSS(style sheet). Developer can change grid skin by defining themes in different CSS files.

It supports online printing, to make it easy to print tabular data in WYSIWYG way. Paging enable developer display data page by page. Data will not be retrieved from server side until end user come to the page it is at. End user can sort records by clicking on the header of a column. Developer may define a new data type and a new way to sort.

Bar diagram, line diagram and pie diagram are built in. Translation tabular data into diagram without any server-side coding. Data filter enables sigma grid to present the data users are interested in only. And you can download and use Sigma Grid freely under LGPL license.
http://www.blogger.com/img/blank.gif


Information is shared by www.ideasroad.com

FullScreen Background with Slideshow & Overlay Support

Vegas Background jQuery plugin lets you add beautiful fullscreen backgrounds to your webpages. It even allows Slideshows. Slideshows of different backgrounds, transition and callbacks can be easily set up.

Most of the time, backgrounds are stretched a lot to fit big screens. An overlay with a texture can be added to mask the image degradation effects. It also adds a stylish look to your backgrounds. You can easily add overlay pattern to your backgrounds with CSS.



Information is shared by www.ideasroad.com

Chevereto – Open Source One-Click Image Hosting Script

Chevereto is an open-source image hosting script that allows you to mount your own one-click image hosting on your server. It is very simple to use, you will love it by their appearance.

It allows you to resize images, verify its integrity and integrate it with url shorteners like TinyURL. And also, you can install Chevereto quickly, requires no database and is configurable.



Information is shared by www.ideasroad.com

Lightweight Interative Maps for Mobile Web Browsers

Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers. It is built from the ground up to work efficiently and smoothly on both platforms, utilizing cutting-edge technologies included in HTML5.

Its top priorities are usability, performance, small size, A-grade browser support, flexibility and easy to use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.



Information is shared by www.ideasroad.com

CSS3 Patterns Created Only with CSS3 Gradients

CSS3 Patterns Gallery contains all the beautiful patterns that are able to create with CSS3 gradients. The patterns themselves should work on Firefox 3.6+, Chrome, Webkit nightlies, Opera 11.10+ and IE10+.

However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Opera doesn’t support radial gradients and Gecko is quite buggy with them).



Information is shard by www.ideasroad.com

Easy Way to Add Style & Validation to Forms

Formly allows an unbelievably easy way to add style and validation to your forms. Forms are everywhere and, usually, suck. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function.

Formly is a light little fella. 17kb in total for the full and 14kb for the minified version. It has been tested on iPhone/iPad, Chrome 8.0+, Firefox 3.0+, Safari 4.0+, Internet Explorer 7.0+.



Information is shared by www.ideasroad.com

Allows Webpage to Interact with Kinect using Javascript

DepthJS allows any web page to interact with the Microsoft Kinect using Javascript. Navigating the web is only one application of the framework they built – that is, they envision all sorts of applications that run in the browser, from games to specific utilities for specific sites.

The great part is that now web developers who specialize in Javascript can work with the Kinect without having to learn any special languages or code. DepthJS is open source under the AGPL license.



Information is shared by www.ideasroad.com

Ajax AutoComplete jQuery Plugin for Textfields

Ajax Autocomplete for jQuery allows you to easily create autocomplete / autosuggest boxes for text input fields.

It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.

It has been tested on IE 7+, FF 2+, Safari 3+, Opera 9+. And it is is freely distributable under the terms of an MIT-style license.



Information is shared by www.ideasroad.com

Real-time Comments Built For the Social Web with Livefyre

Livefyre is a real-time engagement platform focused on building a community around the content of your website. It replaces your outdated comment section with a live stream of comments, images, videos, tweets, and Facebook posts.

Livefyre is built from the ground up for the social web, focused on bringing the conversation back to your content and giving your community the most quality online conversation experience possible, with the people, communities, and topics that they care about the most.

Best of all, Livefyre is free for websites with less than 20M monthly pageviews. Please feel free to try it out yourself.



information is shared by www.ideasroad.com

Easy Creation of On-Page Tutorials with Amberjack 2.0

We have mentioned Amberjack long time ago. Amberjack enables webmasters to create cool site tours. By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.

Now they have released Amberjack 2.0, which allows easy creation of On-Page Tutorials. Users can navigate with bubble arrows, keyboard right/left or mouse click left/right. Text bubbles explain page elements to your visitors. You can also use HTML and CSS knowledge to customize the bubbles as you like. Embed a video is also possible.

You can have a look at the source here. However, we have to wait a bit longer, in order to get more tutorials and documentation of Amberjack 2.0.



Information is shared by www.ideasroad.com

jQuery Content Slider Awkward Showcase

Awkward Showcase is a pluging for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more.

It supports different View Modes. The showcase is easy to implement and very easy to customize in CSS. A slide can contain any type of HTML element. It’s an infinity slide. It is compatible with all the Major Browsers .



Information is shared by www.ideasroad.com

30 CSS3 Progress Bars 100% Free for Download

Galen Gidman has made a set of 30 CSS3 Progress Bars – each it’s own color. He is offering them as a 100% free download. Those progress bars were using no images what-so-ever… just CSS3. You can use them wherever you like, even in commercial projects.

You can also check out Pure CSS Progress Bar with Animation and CSS Javascript Progress Bar we mentioned before. I am sure they will be useful when creating web applications.



Information is shared by www.ideasroad.com

Discover Micro Frameworks & Micro Libraries with Microjs

How much library code do you really need – 50K? 100K? 150K? More? How much of that do you really use?

Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. And at 5k and under, micro-frameworks are very very portable. A micro-framework does one thing and one thing only – and does it well. No cruft, no featuritis, no feature creep, no excess anywhere.

Microjs.com helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.



information is shared by www.ideasroad.com

Checking Quality of Your Code with Holmes.CSS

The holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website.
The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, Potentially improvable markup, Deprecated and Non-W3C Elements and Non-W3C Attributes.



Information is shared by www.ideasroad.com

Slippy Takes a HTML File and Plays It In Any Browser

Slippy is a HTML Presentation library written with jQuery, it takes a html file in and plays it in any browser. It is optimal for programming-related talks since it includes a syntax highlighter and is very easy to use since it’s just standard html markup with a few classes to enable specific functions.

If you are making a talk about Javascript, Slippy can even execute your code samples live and displays alert() boxes nicely instead of using the ugly browser dialog, which -I tried it today- works quite well to prove your point interactively.



information is shared by www.ideasroad.com