Open Source Resources for Web Application Developers

punypng is a free tool that dramatically reduces page load times by reducing the file size of an image without any loss of quality. punypng uses several web optimization techniques to reduce the file sizes of your images. It first analyzes the content of your image and figures out the best image format to use.

Depending on the file, punypng will automatically convert your GIF into a PNG format and then further compress that. For JPEGs, sometimes it’s better to make it a PNG, and other times it’s better to keep it as JPEG and use jpeg-tran to optimize it. punypng makes all those decisions for you and ensures the best possible results.

Requirements: -
Demo: http://www.gracepointafterfive.com/punypng/
License: License Free

• 5 Comments

Yesterday, we mentioned How to Delay Images Loading. Today, we have QueryLoader which preloads images or even a whole web page with Loading bar and custom animations.

There is always a minor problem when it comes to preloading image on a website. Nobody really has a full solution for it. There are a lot of preloaders available, but most of the time they only display the words: “Loading page” or have an animated image that spins.

Why can’t there be a nice loading bar of some kind? QueryLoader has it all. Loading bar, custom animations and getting all images included in the web page.

Requirements: jQuery Framework
Demo: http://www.gayadesign.com/scripts/queryLoader/
License: License Free

• 4 Comments

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Using Lazy loader on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

There are options for control maniacs who need to fine-tune. You can set threshold on how close to the edge image should come before it is loaded. You can also set placeholder image and custom event to trigger loading. You can check out the demo with FadeIn Effect enabled.

Requirements: jQuery Framework
Demo: http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
License: MIT License

• 2 Comments

SlickPlan is a web-based sitemap/flowchart generator that allows for the creation of free sitemap and flowchart design quickly and easily. SlickPlan is ideal for web designers and developers who need to create navigation flowcharts for their clients. Although SlickPlan is perfect for professionals, its simplicity allows anyone who needs a basic flowchart to use it.

Creating an account enables you to keep your sitemaps neatly organized on SlickPlan’s website. That way, you don’t have to keep track of them yourself. Your sitemaps will be right in front of you when you sign in.

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

• 4 Comments

Yahoo! Media Player enhances your web site or blog by creating an embedded player for each audio link. All the links can be played with one click, and it automatically finds all audio links on your page, turning your page into a playlist.

Magical floating design never gets lost, is available when you need it, gets out of your way when you don’t need it. So that it keeps the user in the page rather than sending them away to a media player. This is done by adding one line of HTML to your page.

Requirements: -
Demo: http://mediaplayer.yahoo.com/
License: Terms

• 2 Comments

Yesterday, we have just mentioned SlickMap CSS, which is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. Now we have a great tutorial of Creating a Draggable Sitemap with jQuery.

There are a handful of javascript libraries and plugins available that attempt this task, but none of them worked flawlessly. After a number of failed attempts, BoagWorld has ended up a slick solution, building a drag-and-drop sortable sitemap with jQuery.

Requirements: jQuery Framework
Demo: http://boagworld.com/demos/sitemap
License: License Free

• 4 Comments

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

Requirements: -
Demo: http://astuteo.com/slickmap/demo/
License: License Free

• 6 Comments

IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

To implement interactions on a web page, programming with JavaScript is needed. However, it is hard to manage JavaScript for many designers. Therefore, making well-designed web interactions is difficult in general. IxEdit solves this problem. If you have basic knowledge about HTML and CSS, you can create interactions as you like. JavaScript coding is no longer needed.

Requirements: -
Demo: http://www.ixedit.com/
License: GPL License

• 5 Comments

Getting ready to launch a brand new concept? Would you like to know what other professionals think before you release it to the world?

Concept Feedback is designed specifically for small and medium business marketers, graphic designers, and web developers. Concept Feedback provides a simple tool to get quality feedback on marketing concepts. You can upload and share your website, advertisement, logo and more. Best of all, it’s 100% Free!

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

• 3 Comments

Lessn is an extremely simple, personal url shortener written in PHP with MySQL and mod_rewrite. The installation is very simple with full instruction in a readme file. Lessn is offered free, as is, sans support and without warranty (but is really not as scary as all that).

Open /lessn/-/config.php in a plaintext editor and create a Lessn username and password then enter your database connection details. Upload the entire /lessn/ directory to your server. For the shortest urls, place it at the root of your site and rename to a single character. And then visit http://yourdomain.com/x/-/ to Lessn a new url and grab the bookmarklets.

Requirements: PHP 4.4.8+ and MySQL 4.1.25+
Demo: http://www.shauninman.com/archive/2009/08/17/less_n
License: License Free

• 1 Comment