Open Source Resources for Web Application Developers

html2canvas allows you to take “screenshots” of webpages or parts of it, directly on the users browser. The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.

It does not require any rendering from the server, as the whole image is created on the clients browser. However, for browsers without canvas support alternatives such as flashcanvas or ExplorerCanvas are necessary to create the image.

The script should work fine on the following browsers: Firefox 3.5+, Google Chrome, Newer versions of Opera, >=IE9 (Older versions compatible with the use of flashcanvas).

Requirements: Google Chrome 12, Firefox 4 and Opera 11.5
Demo: http://html2canvas.hertzen.com/screenshots.html
License: License Free

• 1 Comment

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes like those on Flickr.

imgAreaSelect is highly configurable and customizable with CSS styling. Keyboard support for moving and resizing the selection. It works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Requirements: jQuery Framework
Demo: http://odyniec.net/projects/imgareaselect/
License: MIT, GPL License

• 1 Comment

Millions of entrepreneurs struggle to communicate their ideas on a web product they’re working on. Fast, easy, specific, contextual visual feedback is crucial to creating killer products. Bounce opens up an ability to give visual feedback to everyone. And best of all, it’s free and there is no signup required.

You can make some notes for every screenshot you made on Bounce. Simply click anywhere on your screenshot, and type in what you want to say. You can also change the size and location of your note to highlight exactly what you want. You can share the screenshot easily, at the same time, they can make their own notes, save them, and bounce them!

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

• 4 Comments

Search and Share makes highlighting text a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing.

Whenever someone selects more than 40 characters from your web page and clicks the “Copy” link, your page title and URL will be included in the footer of the copied text. Your users will also be presented with the option to directly embed the excerpt in a newly composed email within Outlook, Gmail or Yahoo Mail. Sometimes, Search and Share enables your users to get the options of Wikipedia, Amazon or eBay as well.

Requirements: jQuery Framework
Demo: http://www.latentmotion.com/search-and-share/
License: Creative Commons 3.0 License

• 1 Comment

One of the least used properties in CSS is the Clip property. Clip is part of the visual effects module of CSS 2.1 and its job is to place a visible window on top of an object that is being clipped.

It is useful for clipping images and creating thumbnails without having to create additional files. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without actually duplicating files on the server.

You can also add some drop shadow to the clipped thumbnail by using three wrapper divs with negative offsets of slightly varying background colors to create a shade effect.

Requirements: -
Demo: http://www.seifi.org/css/creating-thumbnails…
License: License Free

• 5 Comments

Aviary has just launched Screen Capture Talon that can let you capture any webpage from any browser, by simply putting Aviary.com/ in front of the URL. You can capture a page at different resolutions or to only capture a portion of the page as well.

After capturing the page, you can edit it, add simple markup to it and save it to your desktop (or host it online with a single click). It works on almost any public page on the Internet, with any browser. It can even capture Flash. However, it does not support multiple browsers / operating systems at the moment.

Source: http://aviary.com/launch/talon

• 6 Comments

Many websites offer syndication formats such as RSS, JSON, or XML based services to allow for easy content delivery. But what happens when a website doesn’t offer one of these services? How do you syndicate content from a website that doesn’t offer a news feed?

Nettus has gaven us a a simple solution using JQuery’s AJAX functions and PHP’s cURL library that allows us to syndicate external content. This is a simple solution if you require content from an external website.

Although JQuery’s easy syntax and CSS-selectors give us the convenience of styling and selecting what we want from the client-side, this is not speed optimized. Remember you have no control over whether or not the content creator changes what tags and classes they use, it is always best to style general elements that will be commonly used.

Requirements: jQuery Framework
Demo: http://net.tutsplus.com/tutorials/php/how-to-syndicate-content…
License: License Free

• 1 Comment

MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific functionality with just a few simple parameters. David has shown us 4 examples of using ScrollSpy.

Example 1: “Top the Top”
When you scroll down a defined number of pixels, you get a “Scroll to Top” link in the lower right hand part of the screen. When you’re back at the top, ScrollSpy is directed to hide the link.

Example 2: “The Show”
When you click the link, the window scrolls to the right. During the scrolling process, ScrollSpy shows and hides content blocks based on where in the scrolling process the window is.

Example 3: “Team Colors”
This displays a different background color depending on where you are in the page.

Example 4: “Position Pointer”
This displays imagery in different positions on the page based upon where the user scrolls.

Requirements: MooTools Framework
Demo 1: http://davidwalsh.name/dw-content/scroll-spy.php?
Demo 2: http://davidwalsh.name/dw-content/scroll-spy.php?page=1
Demo 3: http://davidwalsh.name/dw-content/scroll-spy.php?page=2
Demo 4: http://davidwalsh.name/dw-content/scroll-spy.php?page=3
License: License Free

• 4 Comments

In today’s web2.0 era, more and more websites are user generated and boast dynamic content. Users sumbit text, images, videos, providing content for entire web sites. Most of the time, people submit photos straight from their camera because they don’t have photo editing programs or they don’t know how to use them. This simplified tool gives your users the ability to create a selection area that can be used to crop an image, live on your web site.

With UvumiTools Crop, you don’t have a dozen handles and double-click features. Drag from the middle to move, tug on the lower-right corner to resize, and that’s it. Simple. To use this plugin you’ll need Mootools 1.2. UvumiTools Crop must be paired with a server-side script that will actually be able to so something with the coordinates.

Requirements: Mootools Framework 1.2
Demo: http://tools.uvumi.com/crop.html
License: License Free

• 3 Comments

Jcrop is a powerful image cropping engine for jQuery. It’s been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility.

It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Jcrop also features clean, well-organized code that works well across most modern web browsers.

Requirements: jQuery Framework
Demo: http://deepliquid.com/projects/Jcrop/demos.php
License: MIT License

• 14 Comments