Fedmich Designs

Smoothie Charts is a really small charting library designed for live streaming data. Joe Walnes wanted to show real time streaming data pushed over a WebSocket. Although many of the charting libraries allow you to dynamically update data, none have really been optimized for a constant stream of data.

Smoothie Charts only works on Chrome and Safari. And it doesn't support legends. Or pie-charts. In fact, it's inferior in virtually every way to a library like Flot. But, it's very good at displaying streaming data.

Requirements: Chrome and Safari 5
Demo: http://smoothiecharts.org/
License: MIT License

The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Despite these shortcomings they hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.

The HTML5 test score is calculated by testing for the many new features of HTML5. Each feature is worth one or more points. Apart from the main HTML5 specification and other specifications created the W3C HTML Working Group, this test also awards points for supporting related drafts and specifications.

Some of these specifications were initially part of HTML5, but are now further developed by other W3C working groups. WebGL is also part of this test despite not being developed by the W3C, because it extends the HTML5 canvas element with a 3d context.

Requirements: -
Demo: http://www.html5test.com/
License: License Free

BonBon Buttons are sweet CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. There are 3 different materials. A “mate”, “glossy” and a “glass” version. The difference of the later two is that the glass version adds a dark blurry text-shadow which makes it look like you can see trough the button to its bottom.

However, BonBon Buttons are not meant to be used on your next project that targets the average internet user. He just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features. So only the current version of Safari, Chrome and Firefox are supported.

Requirements: CSS3 Support
Demo: http://lab.simurai.com/css/buttons/
License: License Free

There are some great JavaScript testing frameworks out there. Many only work from within a browser. Most don't support testing asynchronous code like event callbacks. Some have syntax that's hard for JS developers or IDEs to understand.

Jasmine is a JavaScript testing framework. It's heavily influenced by, and borrows the best parts of, ScrewUnit, JSSpec, JSpec, and of course RSpec. Jasmine is not tied to any browser, framework, platform, or host language. It work anywhere JavaScript can run, including browsers, servers, phones, etc.

Requirements: -
Demo: http://winstonwolf.pl/css,europe.html
License: MIT License

When you publish something online, there are not that many ways to determine whether people like what you have to say. Comments, the cornerstone of blogging, are too demanding, and users often prefer not to post one.

If you’ve dropped by Behance, you’ve probably noticed their appreciate badge, which is a neat solution to this exact problem. With it people share their appreciation for somebody's work. Tutorialzine taught us how to implement An AJAX Click to Appreciate Badge, which you can include in every page of your website with a bit of jQuery magic.

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/07/click-to-appreciate-badge…
License: License Free

One of the more interesting and fun aspects of iPad usage is the ability to effect change in a webpage by swiping a finger across the screen of the iPad. For example, swiping to the left to navigate to the next page in a series of pages, or swiping to display the next image in a series of images. For iPad users, these actions are intuitive and natural.

However, for those who compose webpages, adding touch detection to a page can be a challenging and difficult process. No more. The information presented on Padilicious: Add Finger-Swipe Support to Webpages, will make it easy to add touch sensing to your pages, requiring only a minimum of JavaScript coding on your part.

Requirements: -
Demo: http://padilicious.com/code/touchevents/basicswipe.html
License: License Free

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.

Requirements: jQuery Framework
Demo: http://www.addyosmani.com/resources/wanderwall…
License: License Free

Thank you for all of the participants of Giveaway 1 x Custom Logo Design By LogoBee. We are happy to announce the following winner. Congratulations. You will receive an email about how to claim your prize.

Cody Lambrecht

WebAppers will continue giving away some really nice web development tools and resources to our readers. Please feel free to suggest what you would like for the next Giveaway under this post. Thank you.

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.

Requirements: jQuery Framework
Demo: http://www.xarg.org/project/jquery-color-plugin-xcolor/
License: MIT, GPL License

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.

Requirements: jQuery Framework
Demo: http://www.viget.com/uploads/file/image-scroller/
License: MIT, GPL License

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!

Totally straightforward, MeasureIt! lets you draw a ruler so that you can measure the pixel width and height of any element online.

2. Pendule

Pendule provides a veritable smorgasbord of valuable developer tools to help with style sheets, JavaScript, forms, images, accessibility and much more.

3. BuiltWith Technology Profiler

BuiltWith profiles the webpage you’re looking at, exposing all the technologies used therein.

4. Flashblock

With Flashblock, Flash elements on a website are replaced by placeholders, which can be clicked on individually to load the Flash content.

5. Lorem Ipsum Generator

Use this extension to randomly generate lorem ipsum text. It’s as simple as that.

6. iMacros for Chrome

As a web developer, you’ll end up repeating the same actions over and over again. Record these actions as iMacros to save yourself valuable time. Great for filling out web forms.

7. Xmarks Bookmarks and Password Sync

Xmarks is the best tool at your disposal for backing up and syncing bookmarks. Use it to sync across computers and different browsers. 163,569 users can’t be wrong.

8. goo.gl URL Shortener

Google URL Shortener takes long URLs and makes them smaller for easier tweeting and emailing. Use this extension to incorporate the Shortener into your browser.

9. Aviary Screen Capture

Take a screenshot of a webpage and perform basic editing (crop, resize, rotate) in your browser with Aviary.

10. Snippy

While Aviary is the best at capturing entire webpages, Snippy is ideal for grabbing snippets from sites of interest for research.

11. Ibrii

Some people prefer Snippy; others prefer Ibrii, which is another excellent extension for capturing snippets of pictures, text and videos. Try both and see which one’s right for you.

12. PlainClothes

PlainClothes “unstyles” the websites you visit, colour coding specific elements for accessibility and educational purposes.

13. Firebug Lite

An absolute must have extension for web developers. Use it to inspect HTML elements and live edit CSS properties.

14. IE Tab

Use IE Tab to view websites in Internet Explorer while using Chrome.

15. Eye Dropper

Pick any colour from any webpage using this terrific tool.

16. TooManyTabs

Having too many tabs open at once can cause serious confusion and major errors. Clean up your online working environment with TooManyTabs, which makes it possible to clearly see all the tabs you’re using.

17. Session Manager

Session Manager saves your internet session, including all open tabs and windows, for you to come back to. It’s another good one for developers who are a little too “tab-happy”.

18. Chrome Sniffer

The aptly named Chrome Sniffer enables users to inspect the CMS and JavaScript library running on a page. Over 50 different kinds are detectable.

19. Web Developer

You get a whole new toolbar full of web developer goodies when you install this extension.

20. Shareaholic

The first step on the path to recovery from “shareaholism” is admitting you’ve got a problem. The next step is installing Shareaholic for Chrome which makes sharing webpages via Facebook, Twitter and email etc really, really easy.

21. FastestChrome

With over 10 million users, chances are you’ve heard of FastestFox, which speeds up your Firefox browsing experience. FastestChrome is essentially the same thing, but (you guessed it!) for Chrome.

22. Validity

Once installed, you can click on the Validity icon in the address bar to validate your HTML documents without even leaving the page.

23. LastPass

This one’s great for everyone, not just web developers - you can use LastPass to securely store and manage all of the passwords that you use online.

24. Google Tasks

Essentially a to-do list built into your browser, Google Tasks is another extension which is useful for everyone.

25. Chrome SEO

Chrome SEO provides Chrome users with a suite of handy SEO tools. It’s the most popular SEO extension available.

26. Resolution Test

Change the size of your browser to see how websites fare at different resolutions.

27. Speed Tracer

Using Speed Tracer, you can pinpoint and solve speed-related issues with you web apps.

28. Picnik Extension for Chrome

Picnik is one of the best free online image editors out there and now it’s available as a Chrome extension.

29. Chrome Flags

Chrome Flags tells you the physical location of the website you’re viewing by displaying the appropriate national flag.

30. WebEdit

WebEdit’s a superb extension for killing time while experimenting with your developer skills. Use it to edit (non-permanently, of course) any webpage you like.

31. Domain Availability Checker

Checking the availability of domains online is pretty easy, but if you do it regularly you can really benefit from this extension, which runs the necessary checks in secs.

32. SEOQuake Lite

SEOQuake Lite displays the PageRank and Alexa rank of the website you’re viewing in the bottom right of your Chrome browser window.

33. Site Geo IP Locator

Click on the Site Geo icon and the IP address of the current website you’re viewing is revealed. This can then be located on a proper map.

34. Google Mail Checker Plus

Not only can you use Google Mail Checker to see what’s inside your Gmail inbox without navigating away from your current webpage, you can preview messages: deleting, marking as spam or reading as appropriate.

35. SEO Analysis Tool

SEO Analysis Tool picks apart the SEO characteristics of any webpage, providing you with detailed information about meta tag listings, keywords found in anchor tags and URLs found in the page, amongst other things.

About the Auhor

James is a writer and designer who works for an online supplier of toner cartridges where he reviews and analyses hardware such as the MLT-D1082S as well as posting on their advertising and design blog.

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.

Source: http://anthologize.org/

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.

Requirements: -
Demo: http://www.webdesignerdepot.com/2010/08/buddycons…
License: License Free

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.

Requirements: -
Demo: http://polymaps.org/
License: BSD License

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.

Requirements: Does not work in IE8 or lower
Demo: http://mezzoblue.github.com/PaintbrushJS/demo/
License: MIT License

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.

Requirements: jQuery Framework
Demo: http://www.itsalif.info/content/demo-ezmark-jquery-plugin/
License: MIT License

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

4. SYNTHVIEW

5. Matthew Miller

6. Atrai

7. JNashDesign

8. Matt Imus

9. Ricky Synnot

10. I Draw Designs

11. FirstView

12. Playing Card

13. Ryan Ellison

14. Aurora Design

15. Mark Dormand

16. SP Grafiks

17. GoonPay

18. Janet Freysoldt

19. Creaam

20. Studiovuurdoorn

21. My Old Red Hat

22. HicksDesign

23. Diesel Design

24. Ordered List

25. Wunderburg Design

Sponsored by

Creating unusual business cards for your business, will differentiate you from the competition. Next Day Flyers can print tri-fold brochures on glossy paper to go along with your creative business card designs. Having a cohesive appearance for your marketing materials will add to your credibility.

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.

LogoBee is very kind to giveaway 1 x Custom Logo Design to our readers. Simply leave a comment and tell us what you are going to use the Logo for. We will pick 1 lucky person and announce the winners on 29th August. What are you waiting for?

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.

Source: http://rapportive.com/

Thank you for all of the participants of Giveaway 3 x Slideshow Box Premium HTML Licenses. We are happy to announce the following 3 winners. Congratulations. You will receive an email about how to claim your prize.

1. Yoosuf, 2. Tiaan Willemse, 3. JopS

WebAppers will continue giving away some really nice web development tools and resources to our readers. Please feel free to suggest what you would like for the next Giveaway under this post. Thank you.

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.

Source: http://jquerymobile.com/

Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>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.

Requirements: Javascript Enabled
Demo: http://www.mitya.co.uk/scripts/Animated-table-sort…
License: License Free

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.

Requirements: -
Demo: http://html5boilerplate.com/
License: License Free

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

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.

Requirements: jQuery Framwork
Demo: http://addyosmani.com/blog/rocketbar/
License: License Free

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.

Therefore, you get a beforehand information and a more reliable result to which one is better, and would yield profitable business.

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.

About the Author

This post is shared by PixelCrayons, a creative web design and development agency that specializes in custom web design & development, PSD to HTML service, CMS & E-Commerce solutions.

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

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.

Requirements: Javascript Enabled
Demo: http://dematte.at/colorPicker/
License: GPL License

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

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/

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.

As professional web designers, we want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari. If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch. This is not as hard as it seems.

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

Article: Building a custom HTML5 video player with CSS3 and jQuery taught us how to build an easily customizable HTML5  <video> player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation.

Source: Building a custom HTML5 video player with CSS3 and jQuery

InputNotes jQuery Plugin automatically adds notes below textareas and input fields based on regex patterns. The patterns are normal JavaScript regex patterns and you are free to create and style any type of notes and note texts as you want. Note texts can contain HTML. It has been tested on IE 6 and 7, Firefox 3.5, Safari 4, Google Chrome, Opera 9.6.

Requirements: jQuery Framework
Demo: http://fredibach.ch/jquery-plugins/inputnotes.php
License: License Free

Stashboard is a status dashboard for APIs and software services. It’s similar to the Amazon AWS Status Page or the Google Apps Status Page. Stashboard was originally written by Twilio to provide status information on its Voice and SMS APIs. Stashboard is designed to provide a generic status dashboard for any hosted service or API. The code can be downloaded, customized, and run on any Google App Engine account.

You are able to Track multiple different API or SaaS services, Set custom status messages and icons such as Up/Down, Show historical status for each service, CNAME to http://status.yourapp.com. Stashboard is written in Python and hosted on Google App Engine.

Requirements: -
Demo: http://www.stashboard.org/
License: MIT License

How to Build a Successful Blog Business is a straight forward guide to building a publishing business online that covers everything from choosing a niche to hiring staff, registering a business to selling it, finding traffic to monetizing it. This is an essential read for web entrepreneurs and online publishers.

Collis is a web veteran with a wealth of experience and an easy to read style. He has founded sites such as the Tuts+ network, the Envato Marketplaces, FreelanceSwitch and AppStorm which combined serve up over 50 million pageviews a month.

In How to Build a Successful Blog Business Collis shares tips from his years of operating kick ass blogs, and reveals stats, graphs, revenue figures and inside details from three real world case studies.

Nowhere else will you be able to find information like this. It costs $39 for Ebook, $47 for Paperback Copy. You can always view a sample of the book here first. I strongly recommend this book to everyone who wants to build a successful blog business.

Source: How to Build a Successful Blog Business

boomerang is a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user’s point of view. It has the ability to send this data back to your server for further analysis.

With boomerang, you find out exactly how fast your users think your site is. boomerang comes to you from the Exceptional Performance team at Yahoo!, aided by the Yahoo! Developer Network. boomerang is opensource and released under the BSD license, and they have a whole bunch of documentation about it.

Requirements: -
Demo: http://yahoo.github.com/boomerang/doc/
License: BSD License

Codrops has shown us how to create a Beautiful Background Image Navigation with jQuery. The main idea is to have three list items that contain the same background image but with a different position.

The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

On top of that we will have sub-menus that appear with their semi-transparent background sliding in. These backgrounds create an awesome effect of actually just being one element that slides into place, changing its color.

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/
License: License Free

SmashingMagazine has just released Free Full Layered Facebook GUI PSD Kit. The main idea behind the kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. As usual, the kit is free to use in all projects, without any restrictions.

The kit brings the Facebook vector icon and logo. Also, since the focus of this resource are the UI elements, it brings a main window with the header, menu and the chat window for you to set up your realistic mock-ups. Plus all the modal components, comment boxes, buttons, message boxes, tabs, etc. All the components are full layered, built using vectors and blending options, so that scaling and editing the objects will not be a problem. The theme is released under Creative Commons. You can use it for all your projects for free and without any restrictions.

Requirements: -
Demo: http://www.smashingmagazine.com/2010/07/23/free-facebook-gui…
License: Creative Commons License

Dojo Toolkit 1.5 is now available download. Dojo is a JavaScript toolkit that is lean enough for use on a simple blog, yet powerful enough to scale to solve the most advanced web application engineering challenges, allowing you to use just the features and flexibility needed for your application. The 11th major Dojo release, version 1.5 offers many important improvements and enhancements and remains as IP-safe, freely-licensed, and free to use as the first release over five years ago.

The new version of Dojo offers substantial user interface improvements in the form of the beautiful Claro theme. Claro delivers a modern and engaging visual style for rich internet applications with Dojo's Dijit library, with the visual enhancements of transparent gradient background images, drop shadows, and appropriate CSS animations (on Webkit and Mozilla-based browsers).

Requirements: -
Demo: http://download.dojotoolkit.org/release-1.5.0…
License: Academic Free, BSD License

There are very few design elements with more uses than icons. Icons can be used in just about every type of project, from software applications to website designs.

Icon Nebula has released a really nice set of 75 free icons called Eloquence! Icon Set. This pack includes seventy-five 32 x 32 pixel icons in PNG format that you can use for personal and professional projects.

Requirements: -
Demo: http://psd.tutsplus.com/freebies/icons/exclusive-freebie…
License: License Free