Useful Hover-based User Interface with jQuery, CSS3, HTML5

AddyOsmani is going to teach us how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? With the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too.

WanderWall achieves that and what it could easily be used for a portfolio or business site but the concepts we’ll learn could certainly be used to expand the idea further.




information shared by www.irvs.info

Manipulate Colors in All Imaginable Combinations with Xcolor

The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors.

Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.



information shared by www.irvs.info

Create Scrollable Interface with jQuery Image Scroller Plugin

jQuery Image Scroller Plugin creates a scrollable interface to scroll over a large image in a smaller area. The idea is that we have a container with a fixed height and width, an image that is taller than the container, and a container for the thumbnail of that image.

Once the plugin is applied, there is a span with a class of indicator appended to the small preview area which represents the area you can drag up and down.




information shared by www.irvs.info

35 Best Free Chrome Extensions for Web Developers

It will take an awful lot of effort on Google’s part to tear most web developers away from their beloved Firefox, but with the number of web-developer-friendly extensions for Chrome on the rise, developers in increasing numbers are giving Chrome a try and some of them are not looking back.

Chrome’s faster than Firefox, uses less CPU and comes with built-in Developer Tools (accessible by pressing Ctrl+Shift+I). Even if you’re not ready to abandon Firefox yet, make sure you give Chrome a chance with the outstanding extensions below. Chrome’s improving rapidly and early adopters will benefit most.

1. MeasureIt!



2. Pendule



3. BuiltWith Technology Profiler




information shared by www.irvs.info

126 Circular & Rounded Vector Social Media Icons

Buddycons Icon Set includes includes 126 vector social media icons. Included in the set are PNG versions of all 126 icons in both circular and rounded variations as well as a vector source file for easy resizing.

The original .ai file is included in the download! In order to be able to edit the raw files you will need a vector based editing program such as illustrator. Feel free to use the icons for both personal and commercial projects without attribution. You are free to modify them as you wish to suit your needs.



information shared by www.irvs.info

Tiled Based Vector & Raster Maps using SVG and Javascript

Polymaps is a display and interaction library for tile-based vector and raster maps using SVG and Javascript. Their intent is to provide a minimal, extensible, customizable, and free display library for discriminating designers and developers who want to use interactive maps in their own projects.

Polymaps provides speedy display of multi-zoom datasets over maps, and supports a variety of visual presentations for tiled vector data, in addition to the usual cartography from OpenStreetMap, CloudMade, Bing, and other providers of image-based web maps

Polymaps can load data at a full range of scales, it’s ideal for showing information from country level on down to states, cities, neighborhoods, and individual streets. Because Polymaps uses SVG (Scalable Vector Graphics) to display information, you can use familiar, comfortable CSS rules to define the design of your data. And because Polymaps uses the well known spherical mercator tile format for its imagery and its data, publishing information is a snap.



information shared by www.irvs.info

Transform Your WordPress Content into An Electronic Book

Anthologize is a free, open-source, plugin that transforms WordPress 3.0 into a platform for publishing electronic texts. Grab posts from your WordPress blog, import feeds from external sites, or create new content directly within Anthologize. Then outline, order, and edit your work, crafting it into a single volume for export in several formats, including—in this release—PDF, ePUB, TEI.

PaintbrushJS – Browser Based Image Processing Library

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.

You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create a temporary canvas element and manipulate the image there, before finally saving it back out to the original element. You can check out PaintbrushJS in action here.




information shared by www.irvs.info

Stylize Radio Button & Checkbox with ezMark jQuery Plugin

ezMark is a jQuery Plugin that allows you to stylize Radio button and Checkbox easily. Its very small (minified version is ~1.5kb) compared to other similar scripts. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it gracefully degrades.

To customize the default checkbox/radiobutton image, simply change the background image (checkbox-black.png/radio-black.png) and CSS (ez-checkbox/ez-radio) and (ez-checked/ez-selected) accordingly.




information shared by www.irvs.info

25 Professional Business Cards Made By Designers

Business cards are cards bearing business information about a company or individual. They are shared during formal introductions as a convenience and a memory aid. Traditionally many cards were simple black text on white stock; today a professional business card will sometimes include one or more aspects of striking visual design.

Here we have collected 25 Professional Business Cards Made By Designers. Most of them are unique and really creative. Please feel free to suggest some creative business cards design you have come across.

1. Ronald Paredes



2. P2 concept




3. Genix Design



information shared by www.irvs.info

Giveaway 1 x Custom Logo Design By LogoBee

LogoBee creates logo designs for all types of businesses all over the world. They have a logo design team of professional graphic designers, working to provide your organization with the most unique, and modern company logo. At their design company they combine all their logo designer skills to provide you with a custom logo design which will portray your company’s philosophy.

You can choose from 6 to 8 different logo design samples. You will receive a complete logo design kit including vector and common file types. Lifetime logo design and stationery file support are provided as well. You can take a look at the logo design they have done in the past within portfolio.



information shared by www.irvs.info

Rapportive – Replace Gmail Ads with Rich Contact Profiles

Rapportive shows you everything about your contacts right inside your Gmail inbox. You can immediately see what people look like, where they’re based, and what they do. You can establish rapport by mentioning shared interests.

You can grow your network by connecting on LinkedIn, Twitter, Facebook and more. And you can record thoughts for later by leaving notes. Imagine relationship management built into your email. For free.



information shared by www.irvs.info

jQuery Mobile – A Web Framework for Smartphones & Tablets

jQuery Mobile is a Touch-Optimized Web Framework for Smartphones & Tablets. It is a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

The aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs). jQuery Mobile is now under development for late 2010.



information shared by www.irvs.info

Animated Table Sort with REGEXP Friendly

Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s s, or on the content/value of a child/descendant element within those s. The various s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.




information shared by www.irvs.info

HTML5 Boilerplate – Professional HTML/CSS/JS Template

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.



information shared by www.irvs.info

Bundle Hunt is a premium resource pack aimed at empowering the creative community, offering more than $1,400 worth of outstanding apps, templates, ic

JumpeyeComponents has launched SlideshowBox recently. SlideshowBox comes with 24 professionally designed photo slideshow templates. There is no coding required. Everything can be easily customized through the FlashEff-like interface with no more than a few clicks. They work hard to make your job easier. SlideshowBox is a web development product that is fun and easy to use!

SlideshowBox is packed as: The Flash version of SlideshowBox works with standard XML files containing each image’s title, URL and description. The HTML version that uses SWF embed code generated by SlideshowBox online panel to customize the slideshows. Also, there are 5 out of 24 slideshows are available as pure JavaScript slideshows and are compatible with iPad and iPhone. They are working on more full JS slideshows and they plan to release another 2 in mid August sometimes. This version is for non-Flash developers who want to use Flash slideshows on their projects.

JumpeyeComponents is very kind to giveaway 3 x Slideshow Box Premium HTML License ($99 each) to our readers. Simply leave a comment and tell us what you think about Slideshow Box. We will randomly select 3 lucky people and announce the winners on 15th August. What are you waiting for?

Please note that the Free Version is always available for download. It includes a cool preset for each photo slideshow template but it doesn’t feature any customization options. The free version can only be used for non commercial purpose, it includes a context menu item (”About SlideshowBox.com”) and it has no time limitations.



information shared by www.irvs.info

Highly Customizable Javascript ColorPicker with 4 Sizes

JavaScript ColorPicker is a light weight all-rounder (only ~46k incl. all 16 files) that can display and let you choose the entire color palette (~16.78 mil. colors) in 6 different color modes (+3 extra modes in RGB).

This highly customizable and easy to install app comes in 4 different sizes (from 151 x 87 pixels to 405 x 302 pixels) and therefore different feature levels so you can use it for every supposable cause from ‘easy choice’ to ‘professional determination’. That’s probably all you’ll ever need to let your clients choose the right color.

You’ll also find a lot of extra helpers and smart features like contrast-meter, color-difference-meter, value-slider in input fields, web-smart and web-save button, color memories and much more that can help your clients make the right decision.



information shared by www.irvs.info

CLEditor – Open Source jQuery WYSIWYG HTML Editor

CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor which can be easily added into any web site.

In addition to the standard text formatting features found in other WYSIWYG editors, CLEditor also contains rich drop downs for font name, size, style, text color and highlight color. CLEditor allows you to insert images, hyperlinks and horizontal rules.

CLEditor supports the following browsers on both the mac and pc: IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+. All testing is done using jQuery 1.4.2.



Requirements: jQuery Framework
Demo: http://premiumsoftware.net/cleditor/
License: MIT, GPL License

Stylish Simple Navigation with jQuery & CSS3

Everyday on the web there’s something that we all do, almost regardless of the site that we’re on – we scroll down. In every case we need to scroll back up to the top of the page if we want to use the site navigation again or perform a site search. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.
RocketBar consists of two main components – the first is the jQuery code that powers it, adding the floating class and attributes to the bar that make it appear ‘detached’ when the user scrolls up and down the page. The second element are the CSS3 buttons you find along the bar.

A/B testing

The world of websites is expanding rapidly and this has given rise to the need of creating good and interesting websites. How does one even make out whether it would lead to good and quality conversion rates? What would you do to make your website popular apart from the other Internet marketing strategies, analytics, SEO, and usability? What about A/B testing?
This post is an attempt to provide you with an ultimate guide on the W’s and H’s of A/B testing.
Now, cutting short the long communication threads, let’s begin the very first question of the post:

What Is A/B testing?

As the name suggests, A/B indicates to the idea of making a choice. In the world of web design, it is a method to figure out the performance of two individual designs for a specific purpose. Improving upon the conversion rate is the specific goal of testing, and these tests are generally for the design elements to be able to figure out the response of the visitors.
Let’s take it in a more general way. For instance, you have two designs for your website and cannot choose between the two even if you have a fair knowledge of all the points that lead to a good and quality web design. Then, you put both on the web and conduct an experiment to be able to come up to a conclusion that would serve the needs of a successful website. You calculate the conversion rate by comparing the number of visitors on both the sites and the number of users who had actually signed up. The more the conversion rate, the better the design.


What’s the Use?
There have always been articles, posts, studies and debates to figure out what has detached the visitors from the website? What makes them drive away from the site? In the light of proving where your website actually stands, this test involves the testing of the specific elements. The elements could be the product description, navigation menus, layout, theme or colours, headlines or be it anything.
Since, we have already called it as an experiment; therefore, it ought to be accompanied by observing the change in the behaviour of the visitor with the change in the situation. There is no doubt to the fact that the process is actually quite complex, but tends to provide quality-oriented and reliable results. It actually lessens the unnecessary hassles of risking the rapport of your site at the first place.
Another major benefit that these freelance web designers and even the professional web design services can actually leverage from the use of a test is that you would have a solid and concrete proof to what actually can make your business profitable. Undoubtedly, there have been a stiff competition in the web design and development industry and to be able to build up a long term relationship with your clients, this test would definitely prove to be an important part of the designing process.

How to do it?
For testing, there are actually few simple steps that tend to be followed with a certain set of dos and don’ts of conducting a true A/B test.
The first and the foremost step that is so pretty obvious that you need to have a set of two designs, which ought to be randomly shown to the target visitors or be it to a particular set of test audience. The second step wherein you actually present the two designs in front of the subjects (psychological term for the test audience), you need to keep the following things in mind:
- Make sure that you ought to change one element at a time and then, carry out the test. You may test anything— it could be the header, the navigation or the content. Everything should be one at a time. It ensures correct and accurate results. You get to know the test result of the individual items and where does website design lacks.
Each and every element would be accompanied by the individual conversion rate and hence, it can be calculated.
- Since, the individual elements need to be tested; it is but obvious that it would take considerable amount of time. So, be prepared that it is going to take time.
- Make sure that you keep a track record of the variations that you choose for a user and avoid the situation wherein you present it to the same user a different price or design or offer.
- The element to be tested should be consistent throughout the site. It should not differ from one page to another.
- Always test both the versions at the same time, splitting the traffic both the sides and then, compare the results for different variations.
However, we still have an option of the multivariate testing wherein we can test with 5 to 6 designs keeping the number of the elements consistent. In addition to it, there are different tools that can be administered for the A/B testing as tools have always made our task easier and comfortable to work with them. So, we have listed some of the A/B testing tools to have a complete guidance on the tests—
1. Google Website Optimizer is a free tool that allows you to run A/B testing and even multivariate tests with perfect guidelines for the same.
2. Press9 A/B Testing Joomla! Plugin is a tool that conducts the test in a Joomla! based website.
3. There is ABtests.com that shares the views and several samples that have been conducted, tried and tested so that the others have a fair idea of the previous results and to be able to get an idea from that.
4. Split test calculator allows you to perform mathematical calculations to be able to attain the conversion rate, and statistical data for comparison.
5. Amazon Mechanical Turk helps you find the visitors/ the subjects to carry out the experiment.
In a nut shell, A/B testing not only helps the small websites, but has been a popular method of testing with the large websites as well. Though, it is a time consuming test but to be able to leverage the large profits of a global economy through the first hand medium, these tests would lead you to have a handsome deal in the world of websites and build a tested long-term relationship with the potential customers.

How to Create a Gallery with Scrollable Thumbnails

Thumbnails Navigation Gallery with jQuery tell us how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style.
The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right. When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

Requirements: -
Demo: http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
License: License Free

Bundle Hunt Offers Premium Design Resource Pack

Bundle Hunt is a premium resource pack aimed at empowering the creative community, offering more than $1,400 worth of outstanding apps, templates, icons, eBooks, hosting plans and premium memberships, all for less than $50.
The bundle will only be available for 15 days, from Aug. 2-16 and includes some of the most prestigious brands in the business. The items Included in the bundle are top selling resources for designers & developers, each of them normally sold for more than this entire bundle.

Source: http://bundlehunt.com/

Various Billing Services for Your Web Applications

Increasingly web application developers and entrepreneurs are turning to the “Software As A Service” (SaaS) model to monetize their products. Together with this growth has come the need for reliable recurring billing systems and in turn a number of enterprising folks have built said solutions and fittingly used the SaaS model to monetize their efforts.

ThinkVitamin has written a really nice article: Recurring Billing For Web Apps, we will look at how these services work, why you’d want to use them, the various options available, and how they differ from one another. It should give you a better idea of which service is right for you and how you plan to use it.


Source: Recurring Billing For Web Apps