Open Source Resources for Web Application Developers

YensDesign has written an interesting jQuery tutorial (Create an music player using mouse gestures and hotkeys) focused on improve the user’s interaction in your web applications. There are a lot of online jukebox based on javascript interaction, but the most of them ignore the power of mouse gestures and hotkeys.

YensDesign has created an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Requirements: -
Demo: http://yensdesign.com/tutorials/musicplayer/
License: License Free

• 8 Comments

I would like to share two Digg Spy jQuery scripts that you can use on your site. A few years ago Digg released a very cool little visualisation tool called Digg Spy (it’s since been upgraded to the Big Spy). Recently Realmac Software released the site QuickSnapper which makes use of the similar spy technique.

if JavaScript is turned off, the list of snaps is visible by default. It only keep pulling in new items until it hits the end. jQueryforDesigners shows us how we can keep the list looping in “Simple jQuery Spy Effect Tutorial“, and in a follow up tutorial he’ll show us how to hook this in to an Ajax hit that doesn’t hammer your server and keeps the effect nice and smooth too.

You can also get the “jQuery Spy Plugin” from LeftLogic. It gives you the Digg Spy effect immediately as well. You can have your very own spy, for anything, with only a few lines of JavaScript.

Requirements: -
Demo: http://jqueryfordesigners.com/demo/simple-spy.html
Demo: http://leftlogic.com/jquery_spy/spy.html
License: License Free

• 3 Comments

An Animated Cartoon Robot with jQuery was created by layering several empty divs over each other with transparent PNGs as background images.

The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. This effect simulates a faux 3-D animated background dubbed the “parallax effect” originating from old-school side scrolling video games.

The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The final step, was animating the robot with some jQuery.

Requirements: -
Demo: http://robot.anthonycalzadilla.com/
License: License Free

• 13 Comments

Shout’Em is platform on which you can easily start co-branded microbloging social networking service. Something simple as Twitter or with more features like Pownce. Networks on Shout’Em are “lightweight social networks”. They have small set of features: microblogging, links and photo sharing, geo location sharing and mobile browser support.

Shout’Em is the service that want’s to make your job that much easier. With features such as posting links, photos as well as geolocating and mobile interfaces, it’s the easiest way to get your own microblogging service up and running. This lets bloggers and small companies get back to what’s important – creating value, while letting Shout’Em do all the hard (technical) work. Scalable, they’ve made sure of it.

Anybody can use Shout’Em. From single person building up a community for his friends, to large corporations providing nice new service to their existing user base. Use the invitation code “doneright” to register and create your own social network now.

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

• 3 Comments

Cocomo is a Platform as a Service that allows Flex developers to easily add real-time social capabilities into their RIA (rich Internet applications).

Comprised of both Flex-based client components and a hosted services infrastructure, Cocomo allows you to build real-time, multi-user applications with Flex in less time than ever before. And because Acrobat.com hosts the service, issues like deployment, maintenance, and scalability are taken care of for you.

Features of the Cocomo beta includes, VoIP Audio, Webcam Video, Chat, Multi-User Whiteboards, Real-Time File Sharing, User Management, Roles and Permissions and Robust Data Messaging. To get access to the public beta of Cocomo service and Cocomo SDK, you just need to create a developer account in Adobe.

Requirements: Flex
Demo: http://labs.adobe.com/technologies/cocomo/
License: License Free

• 3 Comments

Everybody loves free textures, and finding these and sharing is one thing that Abduzeedo staff loves to do. They have collected 29 Great Free Textures for designers. So check this great selection right now. From organic to metal rust, this list has lots of great textures.

Source: 29 Great Free Textures from Abduzeed

• 8 Comments

Nowadays, there are so many social bookmarking sites, e.g.Del.icio.us, Digg, Facebook, Fark, Mister-Wong, Newsvine, Reddit, Technorati, Slashdot, StumbleUpon and etc…

What do you to do if you want readers to promote your content? Encourage your visitors to submit their favorite stories directly to Digg? Not everyone uses Digg. You have to decide on which bookmarking site, if any, to dedicate your precious screen real-estate. It’s a hard choice. If you choose poorly your reader won’t vote—it’s not a single click coupled and out-of-sight means out-of-mind—and your content losses its chance to make it big. You have to choose your horse wisely.

On the other hand, if you take the bird-shot approach, it overloads your reader with branded badge after branded badge. It turns your page into the village bicycle. Not pretty. Nobody seems to have solved the problem yet.

If you could detect which social bookmarking sites your reader uses, on a per-reader basis, you could display only the badges they care about. SocialHistory.js enables you to detect which social bookmarking sites your visitors use. SocialHistory.js has a big list of the most popular social bookmarking sites which it checks against.

Requirements: -
Demo: http://www.azarask.in/blog/post/socialhistoryjs/
License: License Free

• 2 Comments

Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR and data integration, as well as a variety of third-party components, effects, skins, and more. Tour de Flex has three primary purposes:

• Provide non-Flex developers with a good overview of what is possible in Flex in a “look and see” environment
• Provide Flex developers with an illustrated reference tool
• Provide commercial and non-commercial Flex developers a place to showcase their work

One of the objectives of Tour de Flex is to provide a place for developers to showcase their work. They are always looking for new samples to add. You can follow the instruction and complete the sample submission form in order to submit your own Flex work.

Requirements: Flex
Demo: http://flex.org/tour
License: License Free

• 1 Comment

You can find many really free seamless background on AVA7 Patterns. There are over 150 pages with 4 beautiful patterns on every single page. You can set the current background with that specific pattern if you clicked on “Preview”. So that you can have a look at what it will look like on the actual site. And simply click on “Download” in order to download the pattern on your computer.

Requirements: -
Demo: http://patterns.ava7.com/
License: License Free

• 13 Comments

We have featured Niceforms v1.0 long time ago. It is a script that will replace the most commonly used form elements with custom designed ones. And it looks very pretty as well. However, there were some limitations and minor bugs. I am always hoping for a new version.

Finally! After what seemed like an eternity, the fully revamped version of Niceforms is ready to make its debut. Pretty much everything is new, from the basic coding approach, to the number of elements it handles, to the customization options. Niceforms v2.0 fully supports all modern browsers, with the exception of IE6, in which case it degrades gracefully to the original form.

You can customize the look of your forms in any way you want by creating your own themes. Since Niceforms replaces the form elements with images, it’s just a matter of slicing these images up correctly and creating the CSS that holds them all together. More themes are on the way as well.

Requirements: IE7+, Firefox2+, Safari3+, Opera9+, Chrome0.3+, Mozilla1.5+, Camino1.6+
Demo: http://www.emblematiq.com/niceforms/v20/niceforms.html
License: License Free

• 14 Comments