Open Source Resources for Web Application Developers

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

I have found an interesting article called “Maxing out your Triangle” today. He found that most people take on new jobs, projects and hobbies for three reasons: 1. To learn something new, 2. To pay the bills, 3. Because they love doing it. These three things fulfill some of our very basic needs—they give us stability, excitement, ways to contribute and opportunities to grow.

Some people might ascribe to the philosophy that it’s okay to be at a well-paid-yet-crappy day job and use the remaining time and money enjoying your hobbies. you end up missing out on pieces of the bigger (triangular) pie. There’s a certain joy that comes from doing what you love, getting compensated for it and constantly learning new things in the process. Your goal should be to maximize each experience and try to cover as many new areas of the bigger triangle as possible.

Re-evaluate everything you’re working on. Grab a pen right now and draw a triangle for every job, project and hobby. Take a good hard look at each one. What can you do to get more out of that experience? If it’s not helping you max out the bigger triangle, drop it and find something else to spend your time on.

I am really glad that I am a freelance web developer. I can learn something new every day, and I love what I am doing, at the same time, it pays the bills as well. How about you?

Source: Maxing out your Triangle

• 2 Comments

We use Gmail everyday, do you get bored with the look of Gmail? Would you like to have a new fresh look for your Gmail? Gmail fans have been building unofficial extensions to spice up their inboxes for a while, but up til now themes haven’t been an integral part of Gmail.

Google wanted to go beyond simple color customization, so out of the 30 odd themes, there’s a shiny theme with chrome styling, another one that turns your inbox into a retro notepad, nature themes that change scenery over time, weather driven themes that can rain on your mailbox, and fun characters to keep you in good company. There’s even an old school ascii theme (Terminal) which was the result of a bet between two engineers — it’s not exactly practical, but it’s great for testing out your geek cred.

To customize your inbox, go to the Themes tab under Settings. They will be rolling out themes to everyone over the next couple of days, so if you don’t see them yet, you probably need to wait a bit. Please feel free to tell us which one you like most.

Source: Spice up your inbox with colors and themes

• 15 Comments

There is a lot of money being made in Open Source, although the profitable companies are not always the ones you would expect.

While many companies don’t disclose detailed financial information we have dug around to find numbers for some well-known open source companies and projects to see how they are doing financially. Royal Pingdom has collected the financial information of some of the most popular open source companies.

One of the great examples is Mozilla which has the famous Firefox web browser and the Thunderbird email client. In 2006 the Mozilla Corporation generated $66.8 million in revenue with 85% of the revenue coming from Google for being the default search engine and ads placed on search result pages. Google and Mozilla recently extended the deal to 2011 (just before Google launched Chrome, ironically).

You can have look at other popular open source companies like Canonical, Novell, Sun Microsystems, Red Hat, Yahoo and Nokia.

Source: This is the money being made TODAY in Open Source

• 1 Comment

Cheat sheet is a reference tool that provides simple, brief instructions for accomplishing a specific task. We have collated a set of best cheat sheets for web developers. It includes some of the popular programming language, e.g. jQuery, Mootools, Prototype, PHP, MySQL and etc… Please feel free to suggest some of the cheat sheets we did not mention.

1. jQuery Cheat Sheet

2. Mootools Cheat Sheet

3. Ruby on Rails Cheat Sheet

4. Django Cheat Sheet

5. YUI Cheat Sheet

6. Prototype Cheat Sheet

7. Scriptaculous Cheat Sheet

8. extJs Cheat Sheet

9. Javascript Cheat Sheet

10. HTML Cheat Sheet

11. CSS Cheat Sheet

12. Mod_Rewrite Cheat Sheet

13. Regular Expressions Cheat Sheet

14. PHP Cheat Sheet

15. MySQL Cheat Sheet

16. SEO Cheat Sheet

• 84 Comments

Shocking, shocking. Is it the end of complex CSS layout techniques, and will be the final nail in the coffin of using HTML tables for layout. Finally, producing table-like grid layouts using CSS will be quick and easy?

When released, Internet Explorer 8 will support many new values for the CSS display property, including the table-related values: table, table-row, and table-cell—and it’s the last major browser to come on board with this support.

Perhaps you’re feeling slightly uncomfortable—after all, haven’t web standards advocates been insisting for years that you shouldn’t be using tables for layout?

Applying table-related display property values to web page elements causes the elements to mimic the display characteristics of their HTML table equivalents. Digital Web Magazine published “Everything You Know About CSS Is Wrong” which demonstrates how this will have a huge impact on the way we use CSS for web page layouts.

Source: Everything You Know About CSS Is Wrong

• 8 Comments

The main pattern used in nearly every site (grid and non grid) was the “title, thumbnail, short summary, more link” pattern. This pattern is generally used for indexing blog post summaries in sidebars, listing services, or creating small calls-to-action.

However, only those small bits of sporadic content were clickable. Sure it’s not that hard for the user to hover over one of the three links, but the user experience could be improved.

Leevi Graham felt that a user should be able to click anywhere in the content and navigate through to the target page — basically making the whole content block one big link. He came up with a jQuery Plugin called BigTarget.js with the following concept.

• Attach the plugin to any link in the content block.
• Pass through the click zone selector as a plugin option.
• The plugin then attaches onclick and hover events to the click zone.
• User clicks anywhere on the click zone.
• The original link href is retrieved.
• If the link has a rel attribute and it’s set to ‘external’, open the link target in a new window; otherwise open the link in the current browser window.

Requirements: jQuery Javascript Framework
Demo: http://newism.com.au/blog/post/58/bigtarget-js-increasing…
License: License Free

• 6 Comments

Developing web applications is getting more complex – it’s easy to accidentally break functionality as changes are made. In this article, Ben describes the setup his team uses test their apps as changes are committed; automatically notifying the developers of any problems.

Being able to support Ajax-heavy applications through multiple browsers across multiple operating systems is now a primary requirement, as is being able to scale to thousands (or, if you’re lucky, millions) of users. This article looks at one way of cracking the problem of regression testing (retesting previously working parts of an application following a new build) a modern web application, using two superb open source projects: Hudson and Selenium. Article “Easy Automated Web Application Testing with Hudson and Selenium” taught us the following.

• It checks our Subversion repository every hour to see if anyone has committed any changes.
• If they have, it updates the project from Subversion and builds it.
• It then creates a clean version of our application database, loads in reference data and deploys the application on our app server.
• A job is triggered that runs through a series of tests in a remotely-controlled web browser on the fresh application.
• Anything that deviates from the accepted norm is logged and screenshots of the web browser are taken.
• Screenshots of the browser are also taken for key pages of the site for later checking by a human.
• If any of the tests fail, the developers responsible for the changes are notified by email of the problems.
• Their issue tracker is updated with any issues that were fixed in the build

Source: Easy Automated Web Application Testing with Hudson and Selenium

• 2 Comments

Are you a freelancer? Would you like to find some freelance works related to Web Development or Web Design? There are loads of job boards out there, but how many of them are actually built for web developers and designers? And How many of them are acutally popular? Here is a list of the top job boards for web developers and designers. Please feel free to suggest the ones you like.

FreelanceSwitch Job Board

Authentic Jobs

Smashing jobs

FreshWebJobs

Elance

Krop

• 19 Comments

jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions, they move by different amounts, in a parallaxy kind of way. If the layers are made of <div>s or <li>s or any other container then content can be positioned inside those layers, and Parallax provides methods for navigating to that content in response to user events.

The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of a jParallaxed element. The simplest way to use jParallax is to make the layers different sizes using CSS. Bigger layers move faster and thus appear closer, and unless a layer is smaller than the viewport, its edges are never seen.

Requirements: -
Demo: http://webdev.stephband.info/parallax.html
License: License Free

• 8 Comments