Open Source Resources for Web Application Developers

Giving one-off feedback on coding errors is a pain. You just want to share a quick, contextual note with someone, but there aren’t any good tools out there to help you do it.

Chop is a simple way to add notes to a code snippet and share them. Chop is a quick and easy way to let the offending engineer know the error of their ways. Just copy and paste the lines in question, add your notes and share them with a unique URL.

The person you share with will have the chance to pull out their Chopper and comment right back. You can keep the conversation going and even add more people to the mix if need be.

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

• 1 Comment

jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download.

It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language. jquery.qrcode.js wraps it to make it easy to include in your own code. You can also try out QR-Code Generator.

Requirements: jQuery Framework
Demo: http://jeromeetienne.github.com/jquery-qrcode/
License: MIT License

• 8 Comments

Livefyre is a real-time engagement platform focused on building a community around the content of your website. It replaces your outdated comment section with a live stream of comments, images, videos, tweets, and Facebook posts.

Livefyre is built from the ground up for the social web, focused on bringing the conversation back to your content and giving your community the most quality online conversation experience possible, with the people, communities, and topics that they care about the most.

Best of all, Livefyre is free for websites with less than 20M monthly pageviews. Please feel free to try it out yourself.

Requirements: -
Demo: http://livefyre.com/
License: Free for websites with less than 20M monthly pageviews

• 0 Comments

The holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website.

The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, Potentially improvable markup, Deprecated and Non-W3C Elements and Non-W3C Attributes.

Requirements: -
Demo: http://www.red-root.com/sandbox/holmes/
License: License Free

• 1 Comment

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

WhatFont Tool can easily get font information about the text you are hovering on. There is a Bookmarklet and Chrome Extension available for download. I am sure it will make web designer’s life much easier.

Requirements: -
Demo: http://chengyinliu.com/whatfont.html
License: License Free

• 1 Comment

With the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep all of the device resolutions and screen sizes straight. So Punchcut has packaged up their Toolset For Managing Screen Resolutions, that help them stay current and they are offering it for download.

It contains a collection of Photoshop CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios. It also contains a collection of layered Photoshop CS5 PSDs each providing common devices for comping and design presentations.

Requirements: -
Demo: http://punchcut.com/perspectives/expanding-universe-toolset…
License: License Free

• 0 Comments

When working with events in Javascript, it is often easy to loose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. If things go wrong, it can be difficult to trace down.

It is due to this Allan Jardine has put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.

Requirements: -
Demo: http://www.sprymedia.co.uk/article/Visual+Event
License: License Free

• 2 Comments

diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.

diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2. All you have to do is import it, specify the container to which the group of items resides.

Requirements: jQuery Framework
Demo: http://jonobr1.github.com/diagonalFade/
License: License Free

• 3 Comments

TeamLab is a free open-source platform for business collaboration and project management. It allows you to use social networking tools such as blogs and forums, organize business tasks and milestones, as well as communicate with your team members via corporate IM.

TeamLab business collaboration platform is an open-source software. The source code is for developers and experienced users who wish to install and configure the platform manually on their own server. According to the license terms, you are free to test, evaluate, customize and improve the code.

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

• 10 Comments

Now that we can use CSS transitions in all the modern browsers with Ceaser – CSS Easing Animation Tool. Simply choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go.

Requirements: -
Demo: http://matthewlein.com/ceaser/
License: License Free

• 0 Comments