Open Source Resources for Web Application Developers

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Usage is straightforward and requires JavaScript and the Flash player to be installed and functional on the client’s browser. tubular is dependent on jQuery and swfobject.

Just attach it to your body tag, specify a YouTube video ID and tell it the ID of your content wrapper, and you’re on your way. Please note, tubular must be deployed on a web server to function. The YouTube player will not work when loaded into your browser from your machine.

Requirements: jQuery and Flash
Demo: http://code.google.com/p/jquery-tubular/
License: MIT License

• 1 Comment

With Colllor it is much easier to generate a consistent color palette with just a few clicks. You should use colors consistently, so you have a common look and feel throughout your design. All the alternative proposals produced by Colllor derive from the same color and they all have a common denominator sharing hue, lightness or saturation values.

Colllor will let you find the exact value of darker shades of any color, not just something that ‘looks darker’. That will be a huge step towards professionally looking color combinations. And also, you can use plain English or Hex color names.

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

• 0 Comments

Hogan.js is a 2.5k JavaScript templating engine developed at Twitter. You can use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.

Hogan.js was developed against the mustache test suite. That means you get variables, sections, lambdas, partials, filters, and everything else you’ve come to expect from mustache templating but only much, much faster.

Requirements: JavaScript supported browsers
Demo: http://twitter.github.com/hogan.js/
License: Apache License

• 0 Comments

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browers that don’t support canvas or dynamic favicons.

Alerts in the favicon allow users to pin a tab and easily see if their attention is needed. You can look up and check out the favicon on the example page to see the library in action on chrome and firefox.

Requirements: Canvas Supported Browsers
Demo: http://tommoor.github.com/tinycon/
License: MIT License

• 0 Comments

Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine with HTML5. It works in all modern browsers including touch devices. And it is easy to manipulate, and lightweight with only 15k. Turn.js is released under MIT License.

Requirements: HTML5 Supported Browsers
Demo: http://www.turnjs.com/
License: MIT License

• 2 Comments

Smashing Magazine has just released fantastic St. Valentine’s icon set, which is available in transparent PNGs as well as Photoshop PSDs (128×128 px) and are perfect for any projects you have coming up for St. Valentine’s Day.

Valentine’s icon set is completely free to use for commercial or personal applications without any restrictions.

Requirements: -
Demo: http://www.smashingmagazine.com/2012/02/02/freebie-valentines…
License: License Free

• 0 Comments

psd.js is a Photoshop (PSD) file parser written in Coffeescript/Javascript for both browsers and NodeJS implementations. Given a PSD file, it can parse out information such as image size and color modes, image resources, layer info, image contents, etc.

This implementation is more or less a direct port of pypsd with some help from psdparse. However, this is still a work in progress and is not finished yet. We do not recommend using in production anywhere.

Requirements: -
Demo: http://meltingice.github.com/psd.js/
License: License Free

This article made possible by the rack card printing company with quick turnaround times, Next Day Flyers.

• 0 Comments

Bootstrap 2.0 has just released with a lot of new features, rewritten documentation, and use cases to test with the addition of media queries.

They have also added some new components like progress bars, customizable gallery thumbnails and split buttons. Another great new feature are the new glyph icons, that you can use to style your buttons and menus.

Now there are total 12 custom jQuery Plugins for you to enhance Bootstrap. It includes, Modals, Tooltips, Dropdowns, Scrollspy, Carousel and more. All in all a huge update with many exciting features.

Requirements: -
Demo: http://twitter.github.com/bootstrap/
License: Apache License v2.0

• 0 Comments

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup. It was created using a combination of HTML5/CSS, jQuery and PHP, with some help from the PHP Simple HTML DOM Parser and Uploadify jQuery Plugin.

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

• 0 Comments

HTML5 Please helps you look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. So that, you can decide if and how to put each of these features to use.

The recommendations represent the collective knowledge of developers who have been deep in the HTML5 trenches. If you think the recommendation is incorrect, you can edit the recommendation for each feature and send a pull request as well.

Requirements: HTML5 Browser Support
Demo: http://html5please.us/
License: License Free

• 0 Comments