Open Source Resources for Web Application Developers

Popcorn.js is an event system for HTML5 media developers. Think jQuery for video. You can leave the heavy lifting to Popcorn, and concentrate on what you do best: writing awesome code.

Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions. Popcorn has dozens of plugins for common services and APIs, ranging from Twitter, to Maps, to media events, and more. But if it doesn’t do what you need right now, you can write your own plugins quickly and easily.

Requirements: -
Demo: http://mozillapopcorn.org/popcornjs/
License: MIT License

• 0 Comments

Have you ever create a really good looking interactive map using HTML5 and jQuery? MigrationsMap.net allows you to see for every country X in the world either the top ten providing countries of lifetime migrants to X or the top ten receiving countries of lifetime migrants from X.

On top of that, when you let your mouse hover over a country, you can see the total population, the GDP per capita, the HIV and Tuberculosis prevalences and the death rate of children under five. All the code of the site and the scripts used to produce it are available on github.

Requirements: HTML5 and jQuery
Demo: http://migrationsmap.net
License: MIT License

• 0 Comments

Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the same name.

CSS animations are supported in Apple Safari, Google Chrome, and Mozilla Firefox. Microsoft have also promised support for Internet Explorer 10, and support has been announced for Opera 12.

Animate.css is actually built to complement tools like jQuery. Use something like Modernizr to detect support for CSS3 animations, then use jQuery or another library to provide fallback animations for the browsers that don’t support them. It’s a win-win situation.

Requirements: CSS3 Browsers Support
Demo: http://daneden.me/animate/
License: MIT License

• 0 Comments

JavaScript today is capable of generating a lot of data. The easiest way to deliver multiple files to your users is in a zip file. Instead of wasting server resources and bandwidth you can get the client to do it for you.

JSZip creates .zip files with Javascript automatically for you. The biggest issue with JSZip is that the filenames are very awkward, Firefox generates filenames such as a5sZQRsx.zip.part, and Safari isn’t much better with just Unknown.

Requirements: Javascript Enabled
Demo: http://jszip.stuartk.co.uk/
License: GPL v3 and MIT License

• 2 Comments

CSS Dock (V2) is an experiment mimicking the Dock of OS X using only CSS. Labels, animations, reflections and indicators… it’s all there. This is Version 2 of my CSS Dock featuring leaner code and better documentation.

The dock works best in current WebKit browsers (Safari and Chrome) but the good news is: it degrades quite gracefully. So while you won’t get all effects in all browsers, the experience won’t be broken either (except for IE, of course).

Requirements: Webkit Browsers
Demo: http://michaelhue.com/cssdock/
License: MIT License

• 1 Comment

Html5 finally solves an age old problem of being able to upload files while also showing the upload progress. Essentially, what you need to do is hook into the server’s byte stream while it is receiving a file so you know how many bytes you’ve received and somehow convey that information back to the client browser, while it is still in the process of uploading the file.

Matlus has written a really throughout tutorial on how to make a HTML5 File Upload with Progress, which is uploading of files using XMLHttpRequest and providing upload progress information to the end-user. This solution does not require any change to the server side, at least insofar as handling the multipart/form-data protocol. So existing server side logic should remain unchanged, which makes adapting this technology that much easier.

Requirements: HTML5 Supported Browsers
Demo: http://exposureroom.biz/upload.aspx
License: MIT License

• 1 Comment

Moment.js is a lightweight javascript date library for parsing, manipulating, and formatting dates. It was designed to work in both the browser and in NodeJS. All code will work in both environments. All unit tests are run in both environments.

Instead of modifying the native Date.prototype, Moment.js creates a wrapper for the Dateobject. To get this wrapper object, simply call moment()with one of the supported input types. Moment.js is freely distributable under the terms of the MIT license.

Requirements: Javascript Framework
Demo: http://momentjs.com/
License: MIT License

• 0 Comments

jQuery Countdown is a jQuery plugin that sets a div or span to show a countdown to a given time. The countdown functionality can easily be added to a division with appropriate default settings, although you do need to set the target time.

You can also use images instead of text. It’s possible to count up instead of down. You can stop or pause (lap time) the countdown and resume. It supports Callbacks per tick and/or on expiry. And best of all, it supports over 40 localisations.

Requirements: jQuery Framework
Demo: http://keith-wood.name/countdown.html
License: GPL , MIT License

• 0 Comments

Nowadays most developers already know how to quickly code a menu or a layout structure, but there’re always a great difficulty when coding a form, either contact, login, newsletter, comment etc.

Formee is nothing but a framework to help you develop and customize web based forms. works with the technique provided by Fluid 960 Grid System to compose the form’s layout, allowing total flexibility to put it in any website or web system.

The form has a structure built around percentage widths, thus allowing its inclusion in any project, adapting to the space available. Formee has its structural code independent of the style codes, facilitating the complete customization and manteinance of the form.

The form was built with care to preserve web standards and their semantic values, working with the smallest possible amount of tags and according to the W3C rules.

Requirements: -
Demo: http://www.formee.org/demo/
License: GPL, MIT License

• 0 Comments

GitHub is a web-based hosting service for software development projects that use the Git revision control system. GitHub is the best way to collaborate with others. Fork, send pull requests and manage all your public and private git repositories.

Have you ever you can have GitHub-like system on your own server? GitLab is a lite app for projects or repositories hosting on your server. It is Fast, secure and stable solution based on ruby on rails. And it is free for download and distributed under the MIT License.

Requirements: Ruby on Rails
Demo: http://gitlabhq.com/
License: MIT License

• 1 Comment