XRAY is a free cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page. Just click the XRAY button to instantly answer those vital questions: where is the top and left of this element? how big is each margin? how big is the padding? how wide and high is the content box? XRAY works just like any other bookmarklet. To install it, normally you would just drag the box marked XRAY below to the bookmarks bar in your web browser. In some browsers bookmarklets work differently: just do whatever you would normally do to create a bookmark for whatever is linked to the XRAY box below.
Requirements: Any Browsers Except Internet Explorer and Opera
Demo: http://westciv.com/xray/xray_more.html#step2
License: Open Source License
Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Therefore WebAppers has created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App. Bare Naked App taught us how to display Percentage Bar with 2 images only by using CSS. And then I used a little bit of Javascript to make it more interactivity. You can use it anywhere you can think of. Use your Imagination, I am sure you will find it useful somewhere.
Click the image above to see the demo and documentation of Progress / Percentage Bar. And please feel free to grab the package below and test it on your machine.
Download Ajax Progress Bar
Bram.us has created a better version written in objects and unobtrusive, You can view the documentation and demo through Dynamic Unobtrusive Javascript Progress/Percentage Bar.
Download Ajax Progress Bar Version 0.33 by Bram.us
If you have any suggestions, please feel free to leave comments. I will update the script regularly.
Requirements: Prototype Framework
Demo: http://www.webappers.com/progressBar/
License: Creative Commons License
Adam Woodhouse released many sets of quality brushes including Web 2.0 Style Brushes with different shapes, and many dynamically generating gradients, Grunge Brushes and Retro Brushes. All of the brushes are free to use, free to use in your artwork, however they are subject to copyright and may not be distributed without written permission from Adam Woodhouse. Enjoy using these brushes, they are Compatible with Adobe Photoshop CS, CS2 + CS3.
Requirements: Adobe Photoshop CS, CS2 + CS3
Demo: http://www.adamwoodhouse.co.uk/?p=20
License: Creative Commons License
The FWA : Favourite Website Awards is a Flash based website gallery. It shows all the cutting edge and beautiful websites. The FWA interface is scaleable to the nth degree and allow users to view as much content as their monitors and dual monitors will permit. So that you can view as many stunning websites as possible in full screen. Let’s get inspiration now!
Requirements: No Requirements
Demo: http://www.thefwa.com/
License: N/A
Wanna test your web application or website in different browsers and different patforms? Browsershots can help you. It makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl.
When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server of Browsershots. It supports Windows ( Firefox 1.5, Internet Explorer 5.0 and 6.0 ), Mac (Firefox 2.0, Safari 2.0 ), Linux ( Iceweasel 2.0, Konqueror 3.5 ).
Requirements: No Requirements
Demo: http://browsershots.org/
License: License Free
CodeIgniter is an Application Development Framework/Toolkit for people who want to create full-featured web applications using PHP. Its goal is to enable you to develop projects much faster than you could if you were writing code from scratch, by providing a rich set of libraries for commonly needed tasks, as well as a simple interface and logical structure to access these libraries. CodeIgniter lets you creatively focus on your project by minimizing the amount of code needed for a given task.
Requirements: PHP version 4.3.2 or newer with Database
Demo: http://codeigniter.com/tutorials/
License: License Free
No one in their right mind likes pop-up windows and personally, the thought of embedding JavaScript blocks within the (X)HTML just doesn’t do it for Brian, so, Brian coded an Unobtrusive Date-Picker that was accessible using the keyboard and suitable for use within documents served as application/xhtml+xml (as no document.write statements are used). The date-picker attempts to auto-detect the language of the users browser installation and download the corresponding language file from the server. And also, it has the nice fade in and fade out effect.
Requirements: Modern Browsers with Javascript Enabled
Demo: http://www.frequency-decoder.com/demo/fd-date-picker/
License: Creative Commons License
Yes, it is true that dfGallery is one of the best Galleries currently on the web! It is a Flash Gallery with a lot of great features. It allows integration of most popular photo sharing sites like Flickr , Picasa , Photo Bucket and Fotki along with background music. It also supports both RSS and Custom Images. You can easily set the language for the dfGallery by setting values for a few xml nodes in the gallery.xml file. User can also swicth to full screen mode to view the gallery as well. dfGallery is easy to customised, for exmaple, Time duration of the slideshow, Pause slideshow, Link Images, Hide Menu System and Scale the images from RSS feeds.
This gallery fulfills all the needs of even a professional photographer or even a freelance artist. dfGallery is still in Alpha stage because there will be a lot more feature additions. This is really similar to the Gallery at Slideshowpro.net for which they charge $25 but here is the Gallery for FREE.
Requirements: PHP version 5+ and Flash player 7+
Demo: http://www.dezinerfolio.com/2007/06/07/dfgallery/
License: License Free
Deziner Folio found an Flash XML Gallery from one of his old download collections. It looks very nice and east to use. You can create different albums within the gallery. It allows One-Click integration with Flickr and Picasa. All pictures are stored in the XML and the Folders. Simply place the Thumbnails under /images/thumbs and the Actual Images under /images.
Requirements: Modern Browsers with Flash
Demo: http://www.dezinerfolio.com/works
License: License Free
About two months ago, I realized I have collected so many open source resources for building websites or web applications. I think it would be such a waste if I am having them for myself only.
And also, as a freelancer, we do always look for some resources on the web to aid our development. However, I found some of the sites are overloaded with too many not so good resources. I personally would like to spend more time on development rather than spending the time on picking the best from a list of 100+ resources that doing the same thing.
Therefore, I would like to share all my findings of open source resources at the same time picking only the best from the list for you. Once Webappers was opened to public, I received so much encouraging feedback about how useful Webappers is. WebAppers is gowing rapidly and just gained 1000+ subscribers today in less than 2 months time ( I know it will go down a bit on weekends, but breaking 1000 readers really is a milestone for WebAppers ). I am really happy and I will try my best to continue finding more open source resources for you everyday at the same time maintain the quality of the resources.
If you have any comments for WebAppers, please feel free to leave a comment! And also I would like to know what kind of resources you would like, more Gallery? Components? Brushes?
P.S. If you like WebAppers, introduce it to your readers is really appreciate!!!
Thank you for all of your support!
