This post is part of the Blog Action Day 2009 over climate change.

Green web hosting is something that has started to become quite popular among many web hosting companies. Even some of the big players are starting to turn to alternative energy sources to power their servers, or to try show that they don’t have a negative impact on the environment.

Why does this matter? It matters because of a little study on server energy usage conducted by Stanford in 2007. Thanks to the explosion of video, VOIP and an increase of broadband Internet services, energy consumed by data centers from 2000 to 2005 doubled. And it’s only been getting worse over the past 4+ years since the study.

Every effort web hosts can make to consume less energy and become more environmentally friendly is a very important thing as we use more and more energy to power our websites.

How Does Green Hosting Work?

There are a few ways that web hosting companies and server farms have figured out how to become more environmentally friendly in how they power their servers.

Carbon Offsetting

Because changing to a more eco-friendly setup is expensive for web hosts, the most popular way to become more eco-friendly is to do carbon offsetting to reduce (or eliminate) their carbon footprint. Companies will do things like plant trees for new accounts and do general energy conservation.

Carbon Credits

Buying carbon credits means that the company is purchasing credits to fund another eco-friendly project, which in theory cancels out their carbon usage.

Renewable Energy Certificates

Renewable Energy Certificates (RECs or Green Tags) show that the energy used by the web host is from a natural source like solar energy or wind energy.

Energy-friendly Servers

There are lots of different types of servers that can potentially cut down on power and resources used. “Speed stepping” is a technology for servers that reduces the amount of voltage and heat a server uses.

Better Data Center Layouts

Data center makers have figured out ways to optimize their server farms so that the least amount of energy is used. The less air conditioning a server needs, the more eco-friendly it is.

Other Eco-Friendly Options

Some companies use propane instead of diesel gases for backup resources. In some cases windmills power the servers, or there are paperless offices. There are any number of ways that a web hosting company can make their company more environmentally friendly.

Now that we’ve got a bit more knowledge about how web hosts can become more green, here are some hosts that are doing their part to make a more environmentally-friendly hosting company.

Major Players

While typically greener initiatives are for smaller hosting companies, there are a handful of the major players in the hosting industry that are “going green”.

A2

A2 has started with an initiative called FutureServe, that utilizes carbon offsets, eco-friendly employment practices (renewable office supplies, telecommuting, etc.), and energy efficient servers.

Dreamhost

Much like A2, Dreamhost has become a carbon neutral company (with a carbon neutral certificate. Dreamhost uses eco-friendly office products, employees who telecommute, and they purchase Renewable Energy Credits.

Hostgator

Hostgator prides itself in using 130% wind energy by purchasing Renewable Energy Credits and using wind-powered servers. In theory, they’re actually reversing their environmental impact.

1&1

1&1 relies solely on renewable energy to power all of their servers, and utilizes renewable energy to power two of their large office buildings. 1&1 also uses highly-efficient power supplies with less than 20% heat loss.

Rackspace

Major hosting company and reseller Rackspace has partnered with NativeEnergy to become a greener company. Also, they’re helping customers become more environmentally-conscious by providing a carbon calculator that lets business learn their carbon footprint and gives information on how to reduce it.

Here are some lesser-known web hosts who are doing their part to reduce their impact on the environment.

Ecological Hosting

Ecological Hosting is an environmentally-friendly and ethical hosting provider. They use their own solar energy to power their data centers in the UK.

Acornhost

Acorn is powered by green energy and and is carbon neutral. The servers are low-voltage servers and recycle their hardware equipment.

Aiso

Aiso is an incredibly innovative company that has tons of green initiatives within the company. The company’s cooling is done with collected rain water, and the office and data center has a “green roof”, or a roof with grasses on top that cools the buildings by 20 degrees. The offices use solar lighting, and the servers are powered by solar energy. If that weren’t enough, they also use alternative air conditioning that doesn’t rely on fossil fuels to cool the servers and offices.

ecoSKY

ecoSKY uses wind and solar energy to power their servers.

Solar Energy Host

Solar Energy Host is a “beyond carbon neutral” web host. Instead of buying carbon credits, Solar Energy Host’s servers produce zero emissions.

Green WebHost

Green WebHost plants a tree for every new account, and also utilizes solar power to run their data centers.

HostPapa

HostPapa is a Canadian web hosting company that is powered by green renewable energy sources.

Ilisys

Ilisys is a green-powered company based out of Australia. The energy they used is created from water, wind and waste, in order to cut greenhouse gas emissions.

iMountain

iMountain powers their servers with the solar panels on the roof of their data centers and office.

Lightbeing Creations

Lightbeing Creations is a web host that uses solar energy instead of Renewable Energy Certificates.

Planetmind

Planetmind uses solar-powered energy from a grid to power their Colorado-based servers.

Sustainable Websites

Sustainable Websites run their sites from a green data center in Atlanta, and the electricity is generated by wind power. On top of that Sustainable Websites purchases RECs.

ThinkHost

ThinkHost uses wind and solar power to manage their data centers, and each of their plans is covered under their carbon neutral green program. Also, they’ll plant a tree for each hosting account.

WebHostingBuzz

WebHostingBuzz is a carbon-neutral host that runs energy-efficient servers and computers in their company. They’ve also partnered with the International Tree Foundation to help plant trees in developing countries.

GreenGeeks

GreenGeeks bills itself as the “World’s #1 Green Webhost”. They won the Best Green Hosting award in 2009 and 2008. They use energy efficient servers, carbon-neutral energy and they buy back 3x the amount of energy they pull in RECs.

Treecentric

Treecentric is a Green e-certified program that purchases Renewable Energy Credits to offset their energy usage.

Super Green Hosting

Super Green Hosing uses “Green” Dell servers that produce 20% less CO2 than the average server. Super Green Hosting also provides ways for customers to purchase RECs and plant trees.

Taproot Hosting

Taproot Hosting uses only wind power to run their servers out of Portland, Oregon. The employees all telecommute, and for every new customer they’ll plant a tree with the Plant a Billion Trees project.

Beanstalk Solar Hosting

As the name implies, Beanstalk Solar Hosting uses solar power from the roof of the servers.

Sustainable Hosting

Sustainable Hosting is a carbon neutral web host, and they go well beyond common in their quest for sustainability. Sustainable Hosting uses e-certified renewable energy certificates, the office is paperless, and they even use a socially responsible bank.

Fat Cow

Fat Cow uses only wind energy RECs to power their servers and office.

Integritive

Integritive web hosting has solar-powred hosting plans that run their green data centers and offices. Integritive also utilizes AMD Opteron servers that use 60% less energy and generate 50% less heat.

Green Web Hosting by Lush

Lushtech servers are powered by clean, renewable energy. They recycle computers and computer parts, and participate in many other green practices, like using bamboo flooring in their offices.

I’ve been noticing some buzz about the newly-launched photo sharing service DailyBooth, and can’t help but notice a trend that seems to happen with nearly every new web service. All newly-released websites seem to have an cycle of innovation that looks something like this:

1. Release product to early adopters
2. Early adopters sign up on a whim, not knowing how to utilize the product
3. More people sign up because of early adopters
4. API is relased
5. New, better uses are found
6. Product starts to refine itself

Now in case you weren’t paying attention here, the key part of this cycle was API being released. Why? Because API’s mean innovation. And innovation is the key to winning the web app game.

So let’s go back to the original example of DailyBooth. They are at the “release product to early adopters” stage. If you check out some of the suggested users, you’ll see that all they do is post profile pictures of themselves.

Is this wrong? No. Is it the best use of the system? I doubt it. But this is a natural cycle of a product: people are just starting to become aware of it.

DailyBooth isn’t going to become a true powerhouse until it lets innovation (and an API) into the product’s picture.

A lesson in history: Twitter

Photo by Paul Snelling

Let’s go back in time and look at how Twitter started. It began as a pet project for the founders Jack Dorsey, Evan Williams and Biz Stone. They didn’t release it with a specific goal in mind, other than as a microblogging service. They wanted to change the way information was shared in a more concise way, much like a text message.

They received a huge bump in usage at the SXSW conference in 2007, and early adopters started to use the service. Initially the early adopters used the service as a way to update what they were doing (ie. “I’m writing this rad article for Web Jackalope”), as many still do today. Not a lot of innovation, and certainly not that much use. It left many wondering if Twitter was ever going to really become popular, or even useful to the public as a whole.

But the real uptick in innovation (and traffic) came when Twitter released their API. The API has allowed countless mobile, desktop and web applications to utilize Twitter to spread information farther and wider than the founders could have ever imagined. Here are some of the creative applications that use Twitter:

• StockTwits – A service for stock traders to find and share breaking stock news.
• Tweets on Tees – Vote, submit and create T-Shirts from tweets/
• Trazzler – Tracks tweets around travel sites.
• Twestival – Find the nearest Twitter festival around you.
• ExecTweets – Find and follow top business executives on Twitter.
• … and many, many more.

This list doesn’t even include the slew of mobile and desktop applications that you can use to update your Twitter status, as well as the countless services who have integrated Twitter into their site (Facebook, Posterous, Tumblr, and many more).

Now that we’ve seen what an API can do for innovation and overall success of a service, let’s take a look what happens when a company doesn’t release an API or encourage innovation.

A lesson in history: Plurk

Photo by hellfroze

When Twitter was experiencing some major downtimes last year, Plurk entered like a White Knight into the microblogging scene. It featured a fresh timeline setup of microblogging, and many started to jump Twitter’s ship and moved over to Plurk. It seemed like the stars were aligning for Plurk to possibly be the “Twitter Killer”; the new de facto microblogging service.

Unfortunately, Plurk never had an API released with it, and interest waned once Twitter regained uptime. The team behind Plurk didn’t encourage innovation, and their product has essentially died.

When DailyBooth is going to get interesting as a service is when they start to become as ubiquitous as TwitPic in the mobile picture space. This means integration with services like Twitter, Friendfeed and Facebook.

Conclusions

The Internet has changed greatly over the past few years. The web browser isn’t the only way to access web data, and mobile phones are becoming an increasingly popular way to browse the web. It’s imperative that you make it easy as possible for innovation to happen with your web service.

Release that API!

Think how powerful a service could be with hundreds or even thousands of developers making interesting applications and furthering your brand. Make it ridiculously easy to access your data.

Drupal is an excellent choice for a content management system (CMS). However, many people only see it as a simple CMS, a site to build a landing page or two. But Drupal is much more than that. Not only is Drupal easy to theme, it’s got a wide range of built in functionality and a large community powering the popular CMS.

One of the great things about Drupal is that you can build almost any sort of site that you can imagine, with the help of a couple modules. Want to go beyond the basics of a simple CMS? Drupal has an excellent API that allows you to extent nearly any aspect of the software. In fact, many people have started to talk about using Drupal as a framework, as it’s robust, well written, handles lots of traffic, and has a large and helpful community.

So, if you’re thinking about building your next big site, here are a few ways that you can take existing modules and turn a project quickly, without needing to make any custom modules.

A quick note: I don’t think it’s a great idea to make exact clones of existing sites and slap a new name on them. Clones hardly become as popular as the original site. This article is merely to show the power of Drupal and what can be done with limited time and no development budget.

1. Digg Clone

There’s plenty of Digg clone software out there, but it’s pretty simple to make a site that allows users to submit links to content, vote, comment and moderate the submitted links. It’s even easier when that functionality is all wrapped up into a single module. Drigg creates an identical voting site that allows users to add web links, vote on them, share stories, and many more features.

2. Blog

This is one of the most obvious and common uses for Drupal, but that doesn’t mean it’s not important. Drupal comes primed for blogging straight out of the box, and there are many modules available that can enhance the commenting and overall blogging functionality.

3. News Portal

For those of you wanting a site that can showcase lots of information like Yahoo! or some of the other news portals, Drupal has you covered. Thanks to an excellent module called Views and some custom categories, you can quickly create many different types of content and display them in different ways on the homepage. Views is an indispensable module for a Drupal site. It’s a rare occasion that I’m not using the module on a site that I’m developing.

4. Robust user site

Here is where I think Drupal shines brighter than most (if not all) content management systems. Drupal has an excellent user management system, user profiles and even OpenID right out of the box. It also has modules that can connect to Twitter, Facebook, and it’s easy to connect to other authentication gateways with the use of custom modules.

Drupal also has a stellar module called Organic Groups that allows users to “organize” themselves into groups. Each group can have it’s own homepage, blocks, themes, taxonomy and more.

5. Awareness site

If you’re wanting to build a site specifically for a cause or organization, Drupal makes that easy as well. Aside from the Organic Groups plugin and other community-friendly features, there’s a donation module that accepts payments from Paypal, and shows the donating users on a donation page.

CiviCRM (demo) is a constituent relationship management solution module that was specifically created for advocacy and non-profit groups. Over 5,000 organizations use CiviCRM, and it’s well-supported and has many sub-modules for more specific advocacy needs.

Another great Drupal module for developing an awareness site is the Connect module. Connect allows you to easily create petitions, emails or fax campaigns.

6. Twitter Clone

Yeah, yeah… the world doesn’t need another Twitter clone, right? Well, I tend to disagree. The concept of sites and communities built around short, cross-platform messaging systems are a phenomena that just aren’t going away any time soon. With Drupal, it could be just as easy. Drupal’s Microblog module copies most of the features of Twitter. Micro-messaging, following users and public timelines.

7. File Storage Site

File storage sites like Drop.io or Box.net could be created with Drupal and the help of a module like Media Mover. Media Mover allows you to take uploaded files and copy them over to Amazon S3, the highly-scalable data storage system.

8. Flickr Clone

Photo sites like Flickr and Photobucket could also be created with the Image module and Views. The Image module gives users the ability to upload images, and then creates thumbnails and galleries from the uploads. Users could also comment on the photos using the built-in commenting functionality.

9. Delicious Clone

It turns out that making a bookmarking site like Delicious is fairly trivial in Drupal. There are several options for modules that give users the ability to post bookmarks to their Drupal account.

10. YouTube Clone

If you’re wanting to build a video sharing site like YouTube, Drupal has some modules that can greatly help with that. FlashVideo adds functionality to convert uploaded files to flash, and then moves them over to Amazon S3 if desired. FlashVideo also provides the ability to embed the videos, just like the big boys.

11. Amazon Clone

Trying to recreate the powerhouse’s ecommerce dominance is a tall order, but if any CMS is capable of it, Drupal is. Drupal has a few stellar ecommerce modules like Ecommerce and Ubercart. Both of these modules have an extensive feature list that make it easier to create an ecommerce powerhouse.

12. Tumblr Clone

Creating a social aggregation site with Drupal is easy enough with the excellent Activity Stream module. Activity Steam allows you to pull in user’s activity on social sites like Facebook, Twitter, YouTube, Qik, StumbleUpon and many others.

13. Blogger Clone

If you’re wanting to start a blog host like Blogger or Wordpress.com, Drupal is easily equipped to do that. Drupal has a blog module that comes shipped with the package, and it allows every site member the ability to have a blog.

14. Blog network

Blog networks like Performancing and WiseBread rely on Drupal to power their networks. This requires the use of the built-in blog module. Member’s blog posts all end up on the homepage of the site by default, and you could modify how the member’s blogs looked with the help of the Views module.

15. News Aggregator

I built the LifeRemix network site with Drupal and a single module to aggregate all of our blogger’s posts. The site updates itself without any monitoring from me.

16. Friendfeed

By utilizing the excellent Activity Stream module, it would be quite easy to build a FriendFeed clone. As Drupal already comes shipped with an awesome set of user and profile modules, a quick Friendfeed clone could be made in a matter of hours, depending on your design skills.

Use your imagination! These are by no means the only uses for the popular CMS. I’d love to hear more examples of sites built with Drupal, or possible sites that I’ve left off the list.

Signup forms have long irked the casual visitor. During the process of discovery, nobody wants to stop and fill out details before they can “unlock” the rest of the site’s potential. As web users become more and more fickle, signup forms are becoming an increasingly large barrier that repels many prospective visitors from great sites.

Fortunately there’s a new signup system in town that is making it much easier for the visitor to interact with the site and it increases signups. I give you: Lazy Registration.

Lazy Registration

Helping the web visitor only helps your site. One great trend that we’re starting to see in web development that helps visitors is “lazy” registration. Lazy registration is a process that allows the prospective user to test out many of the core features, save her sessions and data, and then when she’s ready to sign up everything is ported to her “new” account. Lazy registration is a way to allow users to try the site out before they sign up, no strings attached. Really clever sites have even found a way to bypass the signup form altogether. They slowly ask for data along the visitor’s path of discovery, and pretty soon she’s a member of the site, without having to fill out a form!

The Old System

So let’s contrast the lazy registration system with the crufty old signup forms most sites use today. Using the traditional method, users have to fill out a form (most of the time with too many fields), check their email, verify their email address, and only then are they allowed to start using the web site. The process creates a wall between the visitor and the user. You’re either in or you’re out, as the movies say.

Contrast the antiquated signup form method with lazy registration. Lazy registration almost always bypasses the traditional signup form and instead takes the data in other methods, without making the user fill out a long, unwieldy form. Lazy registration removes the barrier of entry into the site, as registered and non-registered are able to do the same things.

Increasing Engagement and Trust

Think about what kind of engagement sites would get if the user could get his hands dirty playing with the site’s features, and then later ask for his registration details? Or even better, the user just provides information sporadically, and the smart registration system figures out how to keep him into the system.

Also, when a site has a registration wall that the user can’t see over, it creates a level of distrust. How do you know that it’s worth your time to sign up? What is it like? What will they do with my data?

If the site allows users to easily start using the site, the trust barrier instantly topples. People will more than likely sign up for a product or site that they trust, and a great way to add trust is to drop a cumbersome registration barrier.

Great Examples of Registration Systems

Some sites have already implemented systems like this, and have definitely increased engagement. Here are 12 awesome examples of innovative registration systems that are leading the way in terms of usability for the visitor.

1. StackOverflow

StackOverflow is bar-none the best question/answer site for web developers. What’s amazing about StackOverflow is that new visitors are able to answer a question right away, without having to deal with a pesky signup form. StackOverflow relies on the community to report spam or irrelevant questions. Engagment = +1.

2. Magdex

The makers of the Magdex (used by The Guardian, The Times & about 150 other sites worldwide) have actually shared a video on how they used lazy registration in their job boards. Essentially, whenever a user fills out a job application, they take the information and create an account with it when the user clicks a checkbox that says “save my data”. All of the data is there in the first place, it only makes sense to store it without requesting the user to fill out a redundant form.

3. Picnik

Picnik is a wonderful online image editor that requires no registration to start using their editing tools. It’s only at the very end of the editing process is the user asked to save his edited picture by creating an account. It’s brilliant, and Picnik gives compelling reasons why the user should save the picture which undoubtedly increases signups.

4. Netvibes

Netvibes has long since been the pioneer in allowing people to try their product before registering. You can create a start page, and your information is saved in a session until you register. The Netvibes mindset is that if you keep exploring the product, you’ll eventually find value and want to register with the site.

5. Picamatic

While Picamatic might not be the most well-known site in the world, it is an excellent and simple image hosting site that allows you to upload your images without having to create an account. You can even opt to have your persistent image link emailed to you, but you never register for an account. It’s a simple and non-intrusive way to quickly share images.

6. Blummy

Blummy is another dead-simple application that allows you to make a quick bookmarklet to your favorite web services, consolidating them into one bookmark. While it isn’t the most complicated application, Blummy does a great job of not asking for user information when it doesn’t need it. You can always sign up for an account, but most people don’t need that kind of “commitment” from a bookmark manager, and Blummy has recognized that.

7. Kayak

Kayak is one of the cleanest lazy registration systems around. When you search for vacation, car or flight prices, it saves your data and always keeps your recent searches on the right-side of the page, until you login or register.

8. Drop.io

My favorite file sharing site is Drop.io because of the clean interface and because I never have to register to use the full features of the site. In fact, they really don’t even have a user registration system until you decide to pay for an extended feature set (that most normal users wouldn’t need). The fact that Drop.io gets out of the way and lets users user their product unhindered only increases their brand and encourages referrals.

9. Doodle

Doodle is easily the best way to schedule an event with a bunch of people. It kind of fuses a poll with a calendar application to allow prospective event attenders to pick the best dates/times for them to attend. Then it smartly decides the best time to host the event, based on the polling. But the best part about Doodle is that you don’t have to register, even to administer the polling results. Another great example of unfettered access for the user.

10. Fusecal

And last, but certainly not least, is Fusecal. You can find, add, update, modify calendars and export them to your calendar system of choice, all without having to register. The site keeps you coming back because it gives so much away. Once you create an account, your session data is automagically ported into your account.

Other Registration Resources

If you’re wanting to see a real example of an ajax cart that utilizes the lazy registration system, Ajax Patterns has created a demo shopping cart that stores data without users creating an account. It’s a great way to look under the hood to see what kind of resources it takes to start user data in sessions with ajax.

If you’re wanting more information about how to create better webforms, we highly recommend Luke Wrobleski’s book Web Form Design: Filling in the Blanks. The book goes into much detail about how to get the most out of signup forms, and other best practices.

Google Web Toolkit is a monumental project for Java developers. Java is a language that isn’t usually associated with web development. PHP, Ruby, Python and others are typically seen as the languages of choice when building web applications. At least until recently. Google’s steady development and improvement of the GWT is a major step towards bridging the gap between ajax-driven web applications and Java. And it works well.

GWT: Three Years in the Making

Google Web Toolkit was released in 2006 at the Java One conference, and since then has shaken both the Java world and web development worlds. GWT is an open source Java development framework that essentially allows Java developers to quickly build JavaScript apps in Java. Essentially, GWT makes developing Ajax applications much easier. No more stressing over browser differences and other quirks that developers have to deal with. These quirks are compounded when you’re trying to wield AJAX applications. Just like the GWT official description states, developers spend 90% of their time working around these browser-specific issues.

So now that Google Web Toolkit has hit it’s stride with the latest release of 1.5, it might be time for you to check out GWT as a platform for your next rich Internet application. Here’s a roundup of resources that will help you get on your way to quickly developing in the GWT environment.

Official Google Web Toolkit Resources

GWT Blog
The latest news and updates about GWT as provided by the Google team.

Official Google Web Toolkit Discussion Group
If you’re wanting to find answers to specific GWT questions, this should be your first stop. It’s a fairly large community, and the questions are monitored by the GWT team.

GWT Product Overview
Learn how the toolkit works, the development workflow and the features of the toolkit.

GWT Quick Start
Ready to try your hand at a quick GWT application? Here’s a guide from the official documentation on starting the GWT application environment and creating your first demo app.

GWT API Reference
Roll under the Google Web Toolkit hood. Functions and calls galore.

GWT Showcase of Features
Google provides a demo application that allows you to play with GWT functionality and look at the source code so you can implement the features in your own app. Quite handy for learning the basics.

Official GWT Tutorials

Photo by Alain Bachellier.

Google offers (at the time of this writing) 4 tutorials related to GWT development.

DOM Events, Memory Leaks, and You
How GWT prevents Ajax memory leaks in their applications.

Security for GWT Applications
Different attacks your application might expect, and how to combat them.

Using GWT for JSON Mashups
Different ways to interoperate JSON data to build mashups and other JSON services.

Put Your GWT Application on Facebook
A few easy steps and your GWT app is now interfacing with Facebook.

Google Web Toolkit Books

Google Web Toolkit: Taking the Pain Out of Ajax

Google Web Toolkit Applications

Pro Web 2.0 Application Development with GWT (Expert’s Voice in Web Development)

GWT in Action: Easy Ajax with the Google Web Toolkit

Google Web Toolkit Solutions: More Cool & Useful Stuff

Accelerated GWT: Building Enterprise Google Web Toolkit Applications

GWT in Practice

Google™ Web Toolkit Solutions (Digital Short Cut): Cool & Useful Stuff

Google Web Toolkit Tools

Google Web Toolkit Hacks
A large collection of Ajax applets, games, plugins and widgets for use in blogs, CMS, and more.

GWT Components
Collection of components that add extra functionality to GWT like drag-n-drop, as well as interfacing with existing Javascript libraries.

GWT Component Library
Autocompletion, rounded corners, Scriptaculous integration, and more.

GWT Widget Library
An entire library of widgets to use with the Google Web Toolkit platform.

IDE Plugins

Photo by Nano Taboada.

Already using an IDE for development? Here are a list of plugins for working with GWT.

GWT Designer
Plugin for the IDE Eclipse.

GWT4NB
A Netbeans plugin on web applications.

GWT-Java
Another Eclipse plugin for GWT.

GWT Resources and Reference

Stack Overflow: GWT Tags
Stackoverflow is an amazing resource for developers, and many questions about GWT have already been asked. If not, there’s a huge community to help with you find your answer.

gwt site
A collection of GWT links, libraries and resources.

GWT Blog
The most frequently updated of the GWT blogs.

An Unofficial GWT Blog
Blog written by some of the GWT engineers.

GWT Articles

Photo by Thomas Hawk.

Odds are there are plenty of people smarter than us writing about GWT. (A quick Google search confirms this.)Learn from other people smarter than us with these articles on GWT.

Ajax for Java developers: Exploring the Google Web Toolkit
An extensive article from the IBM developerWorks showcasing some sample code that can be used with GWT.
http://ajaxworld.com/node/609633

Supercharge your Ajax development with Google Web Toolkit (GWT)
A quick overview on how the toolkit can help with your application development.

Hands-On Google Web Toolkit
An excellent 5-part tutorial on how to create a Flickr photo album mashup.

Working with the Google Web Toolkit
Another 5-part intro intro with many code examples and applications.

Online Sample Applications built with GWT
An extensive list of applications built with the toolkit. Lots of functionality is explored in these applications.

Developing Web 2.0 Apps with the Google Web Toolkit
A nice, comprehensive tutorial on how to build Ajax apps without tearing your hair out. From the article:

Ajax development hurts, and is not recommended without a bottle of analgesics by your side. Luckily for us there are tools that can make developing Web 2.0 apps a breeze.

Chords of Dissension

Photo by k is for kristina.

No resource list should be complete without a few chords of dissonance. Here are a few of the naysayers of the Google Web Toolkit framework.

Why Google Web Toolkit Rots Your Brain
Ryan Doherty goes into extensive detail as to why he thinks GWT isn’t all that fantastic. He believes that the toolkit is too bloated, doesn’t handle browser sniffing correctly, and many other details. His follow up to the post is a tad more forgiving.

Why I Dumped GWT
Pieter goes into details as to why he doesn’t develop with the Google Web Toolkit after one and a half years with the toolkit. He goes over reasons like SEO, Adsense customization, and others.

Social media websites have made a huge splash on the Internet as we know it. No longer do editors dictate what is news, and what is important. The power belongs to the masses on social news sites, which is a huge reason for their traction and loyal users.

It’s no surprise that developing a niche social media site is a popular job request for web developers. When I first learned about brand new social site for financial news, ideas, and tips Tip’d, I was immediately impressed with the clean, sophisticated design and impressive functionality. Yet what was truly amazing about Tip’d was how fast the site was assembled by it’s rockstar development team.

Quick Turnarounds

Most developers know that sites involving social media features are hard to do right. Features like voting, comments, account creation and moderation take a long time to get right. The Tip’d team bypassed a lot of that coding and used a CMS specifically for social news sites, Social Web CMS, which had many of the features that they needed right out of the box.

Here’s an interview with the Tip’d team of Andy Hagans, Chris Pearson and Jimmy (”Jimbeaux”) Atkins.

Planning: Interview with Andy Hagans, Tip’d Founder

WJ: What sparked the idea behind Tipd?

AH: A couple weeks ago, I was reviewing all of the ‘niche social media sites’ (Ballhype for sports, Lipstick for celeb news, etc). I simply couldn’t believe (2 years after social news hit it big) that there still wasn’t a financial social news site with some real presence. So I ran the idea by Jimbo, and that night, around 2 AM, we got the first (very ugly) version of the site up and running.

WJ: What were planning meetings like to get everyone together and organized? Just email, or did you use something like Basecamp to get organized?

AH: Email, Basecamp, and IM, depending on what needed communicated. We work virtually as we all live in different areas.

WJ: Do you have any goals or expectations of the site? Big future plans?

AH: Goals- We want to have 2,000 members by the time we move out of beta in early December. Long term, we want to be THE place people set as their homepage for financial news. We want to have 50,000 members and get 5 million pageviews per month. I think it’s do-able–not because I’m a genius or anything, but because our team is so good at what they do, and because so many bloggers and finance junkies have been craving a more social place to find and comment on financial content.

Development: Interview with Jimmy Atkinson, Tip’d Developer

WJ: What was the total time taken to get the site from concept to launch? Can you kind of give a general idea of the breakdown of time spent?

JA: Andy and I first discussed the concept of Tip’d on September 24. We purchased the domain name and began working on the site that day. Our beta launch occurred just three weeks later, on October 14. Here’s how we got there: The first steps we took was to install Pligg to our server on day 1, September 24. After a few days of customizing it as best we could, we decided on October 1 to contact Ash, the a former Pligg developer and current lead developer on the SWCMS team, to see if he would be interested in working with us. He began working with us later that day, and this gave our development productivity a much needed shot in the arm. It was on this day that we made the change from Pligg to SWCMS. Since then, we’ve constantly been tweaking and adding new features on an almost daily basis. This will likely continue for a few more weeks until we reach a stable point.

WJ: Caching/Performance- What hardware do you guys use to host the site?

JA: Currently the site is hosted on a Media Temple grid server. We use a caching plugin designed specifically for Pligg/SWCMS.

WJ: I hear that you guys had a doozy of a time hacking the socialwebcms. Can you give us a little background about this? What were you changing from the source code?

JA: As I explained in the first question, we did spend a few days configuring (I’m not sure I would quite call it hacking) Pligg after we first installed it on September 24. A few days later, we reached the point where we decided we needed some outside expert help on the system. That is when we decided to reach out to Ash. And since October 1, Ash has been handling all of the really complex stuff (i.e. adding new features and working out bugs).

WJ: I noticed that you guys use a redirect script to track outgoing clicks, as opposed to just linking to the story normally. Are you going to be providing any statistics or analytics in the future?

JA: We are not planning on providing any stats at this point; although this could be something we’ll discuss in the future.

WJ: What tools did you guys use to speed up your development process? Any IDE’s, collaboration tools, etc.?

JA: No IDEs, but we did use NotePad, PsPad, WinMerge, and Windows Grep in development. We love using 37signals’ Basecamp as our collaboration tool.

WJ: 6. Any tips for developers wanting to hack a CMS and create a social news site?

JA: If you’re going to hack a CMS, don’t hesitate to talk to the developer if possible. Doing this has worked out great for us so far. If you’re going to create a social news site, remember that the most important thing is the community. You can have a fantastic CMS with all sorts of great features, but if no one is using it, what’s the use? The community is the most important aspect of any good social news site. The fact that we recognized this before we began work on the project is one of the main reasons for the success of Tip’d so far.

Design: Interview with Chris Pearson, Designer for Tip’d

WJ: Designing a community site is much, much different than designing a website like a blog. Can you explain some of the ways that the Tip’d design is different than a typical blog or website?

CP: Sites like Tip’d exist primarily to steer people in the direction of articles that they want to read, and because of this, the design/usability goal is simply to get people the information they need as clearly and as quickly as possible. In environments like this, users tend to process information in visual chunks, and this means that certain details (headlines, submission data, usernames, links, etc.) must be both obvious and quickly discernable.

On a community site like Tip’d, it’s extremely important to give users the context they need to process information and then to get the hell out of their way. Unlike a blog, people tend to use community sites over and over again in search of new and rewarding content, and this places an even higher premium on usability (which is really the hallmark of any great community site).

WJ: The Tip’d’s theme is very nice, clean, and reeks of Chris Pearson’s excellent design work Did you guys create a theme from scratch, or did you just modify an existing socialwebcms theme?

CP: In order to reduce development time, we simply used the HTML from an existing SocialWebCMS template to build the site. In truth, the existing code was so bad that we had to make lots of little customizations, but when you look at the big picture, most of the HTML is stuff that was there before I got my hands dirty with the styles.

The CSS is a completely different story, though. I rewrote everything from the ground-up and basically breathed new life into an HTML structure that makes me want to pull out my hair. As a result, I don’t really know what to call this… I guess it’s sort of a hybrid re-design, and even though we started with an existing template, the final product looks, feels, and behaves differently than the original.

WJ: What features in the design did you try to do differently than other major social news sites, like Digg or Reddit?

CP: Not that it’s all that “different” from other major social news sites, but with Tip’d, I simply tried to guide users directly to the meat of the site. In this case, the “meat” consists of three main things—article headlines, article summaries, and vote buttons. These are the three most important elements users rely on when scanning, and I wanted to make sure that they didn’t have to put forth any effort whatsoever to locate them.

To accomplish this, I employed some very basic typographical conventions in combination with a limited color scheme to emphasize both important elements and visual breaks. The end result is a layout that is almost devoid of visual fluff, and this makes scanning a more intuitive, less confusing process. The idea is that you want to avoid forcing users to learn a proprietary navigation system or new usability conventions when they visit your site—just give ‘em the keys and let ‘em drive.

WJ: Were there any restrictions designing the theme of a CMS as opposed to a blog or a regular website?

CP: CMS platforms like Pligg exist because they run a very particular type of Website, and naturally, there are little nuances that are unique to each type of site. Aside from that, though, most sites share common elements that constitute a vast majority of both the design and functionality. For instance, the primary content column of Tip’d really isn’t that much different from a stream of blog posts; it’s just been adapted to display the specific blurbs and meta data that are important to this type of site.

WJ: Do you have any tips/advice for anyone wanting to design a killer social news site?

CP: The biggest thing to watch for with any type of site built on a CMS is the core template system that you use as a foundation. Before you get started, make sure you’ve got a sensible markup structure and a stylesheet setup that isn’t overly complicated—it’ll make your life MUCH easier as you trudge through the intricacies of the design process!

Find this post helpful? Support it by saving it at Delicious.

While more and more people are using faster Internet connections, there seems to be less emphasis by web developers on optimizing pages for faster load times. We’re seeing more and more widgets and javascript-heavy pages that take a long time to load, even on fast Internet connections. It’s a breath of fresh air when a website loads quickly and cleanly.

Web developers sometimes neglect some simple rules when it comes to developing a fast website, which really hurts the user’s experience. Fast page load times are crucial for keeping users happy. This is especially true for ecommerce websites. Here are a few reasons why quickly loading websites are critical to the web developer.

• Faster pages make a better user experience. The user notices page load times, either consciously or subconsciously. Load times are a lot like the kicker on the football team: they’re only noticed when they’re not good. There’s something refreshing about a snappy-loading web page.
• It’s possible that page load times are directly associated with search engine rankings. Google has made it clear that they’re paying attention to load times when they’re indexing Adwords pages, so it wouldn’t be too much of a stretch to assume that page load times might be a factor in how sites are ranked.
• Slow pages lose money – Sites lose money when users click away from a slow-loading website. It’s estimated that the ecommerce industry loses $1.1 to $1.3 billion yearly on slow load times.

Slow load times can be a killer to even the best web design. Here are some great methods and tools to ensure your site is running quickly and smoothly.

1. A basic site analyzer

There are a lot of these tools, but I’ve always used the Web Page Analyzer to check for general errors and seeing the “health” of my site in terms of load times. The analyzer shows tons of information about how many scripts you have, total file size, and many other things that factor into load time.

2. Pingdom

Pingdom is a nifty site that allows you to check for broken images and paths, as well as loading time for all of your images and scripts. Broken paths and images can be a major load time killer. For example, I ran my blog LifeDev through the pingdom checker, and found that I had 1 script and 2 images that weren’t loading because of bad paths. Once I fixed the errors, it split my load time in half

.

Another nifty feature of Pingdom is being able to see the lengths of the different stages of loading. Pingdom shows a different color for each stage of the loading process, like initial connection, first byte downloaded and last byte downloaded, so you can see where the image or script is taking the longest to load.

3. Host files locally

While this may take a bit more bandwidth for your servers, you’ll gain a lot of speed by not having to go out into the web to find the image. Instead of using services like Flickr to host your images, put them on your own server and save the time spent for the browser to travel to flickr.com and download the image. Local files almost always load faster than external files

.

4. Use image heights and widths

Here’s a sample of a correctly tagged image with height and width tags:

<img src="images/mine.gif" border="0" alt="my image" width="125" height="250" />

Adding width and height tags to images can make a huge difference when the web browser loads the page. If the browser knows the width and height, it can go right on past the image and let it load in the background while it renders the rest of the page. If an image doesn’t have these tags, the browser has to wait until the image loads before it can go on loading the rest of the page.

5. Reduce widgets

It’s easy to forget that even though widgets are cool and add some functionality to a website, the benefits of having a slew of them on a page hardly outweigh the slow load times. If the site is down that is serving the widgets, it could keep your site from loading properly as well.

6. Use static caching

Caching is a There are many different solutions for caching. Essentially, caching is this: Taking pages written in dynamic languages like php and turning the result into a static web page. Web servers are incredibly good at serving static files. By turning your dynamic pages into static pages, you’ll reduce load on your server and greatly improve page loading times. Here are some great primers on caching for a few popular languages:

• PHP
• Rails
• Perl
• Java
• ASP

7. Accelerators

Dynamic languages typically have scripts that can help accelerate how fast the language is run. If you develop in PHP these scripts might help: , APC, Zend cache, Xcache

.

8. Firebug

Firebug is a Firefox extension that offers tons of reporting tools for a Web site, right inside the browser frame. One of the main features of Firebug is the ability to analyze all the aspects of a given web page. It’s especially helpful for figuring out slow load times and

9. CSS shrinker

Smaller external scripts like javascript and CSS can make a big difference in load times. Try using online services like CSS clean to take your CSS source and strip things like

• white spaces
• line breaks
• remove unnecessary charachters
• and many more things, depending on the level of compression that you’ll want.

10. Server from multiple domains

If you’re serving a lot of web objects on a page, it might be a good idea to utilize multiple domains for serving the content, like server.example.com, server2.example.com, etc. You can only have a limited number of connections sent to the web browser at a time. By using multiple domains (even if they’re using the same IP address) you can download objects at the same time, where on a single server you’d have to load one at a time.

11. Cut back on cookies

Much like in our diets, cookies should be cut back from if the goal is to have healthy page load times for our websites. Extra cookies that are set on the user’s browser adds time to each page load. Make sure that you’re only using the smallest possible number of cookies, and also try optimizing cookie usage

.

12. Use a different domain for cookie-free resources

In an attempt to optimize cookie usage, try using a different domain for resources that don’t need to have cookies set. This is helpful when you’re using top-level cookies (yoursite.com). Everything downloaded from yoursite.com will have a cookie attached to it. Sites can get around this by using a completely different domain to store the resources that don’t need a cookie attached to them. For example, Yahoo! uses the domain yimg.com to store their resources that don’t need a cookie attached to them.

13. Shrink your javascript

Much like you should reduce your CSS sizes (#9), it’s a very good idea to compress your javascript files as well. Using services like Dean Edward’s packer can strip out unwanted line breaks, characters, and other redundant code in your javascript files.

14. Combine javascript files

As a general rule, downloading lots of small scripts takes longer than downloading one large script. If you can combine your javascripts into one large file, you’ll see faster download times. The easiest way to do this (without using programming knowledge) is to physically open your javascript files and copy and paste all of the javascript into one file. However, this isn’t always the easiest option, so here are a few resources that show how you can merge javascript files dynamically.

• PHP
• Smarty (PHP templating language)
• Rails
• ASP

15. Use a content delivery network

If you’re starting to get some serious international traffic to your website, it might be a good idea to start thinking about using a Content Delivery Network (CDN). CDNs allow you to use servers from around the world, depending on where the user is from. For example, it takes a lot longer for a user from Australia to download a webpage served from New York than it does a user from within the USA. Content delivery networks would recognize that the user was from Australia and would serve the page from a server within Australia, or close nearby. This results in much faster page load times.

Conclusions

Sometimes it’s easy to get carried away adding extra functionality when building a website. As a general rule of thumb with web development, less is more. Having less images, external scripts and widgets to load mean that your pages will load faster. A few small changes can make a major difference to page load times for the user. Remember: Quickly loading pages mean happy users.

Other Page Load Resources

• Best practices for speeding up a website by Yahoo!
• Optimizing page load times
• Serving Javascript Fast