Open Source Resources for Web Application Developers

Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. Anthonyshort has collated all the information he could find to create some coding conventions for ensuring that your site will work first time in every browser. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes. Here is a quick summary of How to get Cross Browser Compatibility Every Time:

• Always use strict doctype and standards-compliant HTML/CSS
• Always use a reset at the start of your css
• Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
• Never resize images in the CSS or HTML
• Check font rendering in every browser. Don’t use Lucida
• Size text as a % in the body, and as em’s throughout
• All layout divs that are floated should include display:inline and overflow:hidden
• Containers should have overflow:auto and trigger hasLayout via a width or height
• Don’t use any fancy CSS3 selectors
• Don’t use transparent PNG’s unless you have loaded the alpha

Source: How to get Cross Browser Compatibility Every Time

• 9 Comments

PHPBench was constructed as a way to open people’s eyes to the fact that not every PHP code snippet will run at the same speed. You may be surprised at the results PHPBench generates. It was also created so that you would be able to find discovery in these statistics and then maybe re-run these tests in your own server environment to play around with this idea yourself, by using the code examples. You can see some interesting conclusions from PHPBench as follow as well.

1. Surprising results show that if you implement sizeof() there is almost no difference in whether calculating the size of a loop in advance.
2. In reality the echo and print functions serve the exact purpose and therefore in the backend the exact same code applies. The one small thing to notice is that when using a comma to separate items whilst using the echo function, items run slightly faster.
3. The while loop 90% of the time is indeed slightly faster.

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

• 2 Comments

Nick La has made another great great tutorial for us. Nick La shows us how to decorate our images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). To change the look and feel, simply edit the CSS specifications of the span element. To show how flexible it is, Nick La has created 15 different styles as examples for us (notice the HTML markup is same).

Source: CSS Decorative Gallery

• 10 Comments

If your website doesn’t stand out and do a heck of lot of things right, then chances are it’s going to crash and burn. Take the “Successful Website Checklist Challenge” designed by Chromatic Sites and see what you’re doing right, what you’re doing wrong, and what you’re forgetting to do. They have even included notes and resources for nearly every item on the checklist (just to make your life easier). The checklist is divided into the following sections.

1. Planning
2. Design/Layout
3. Usability/Accessibility
4. Content
5. Website Optimization/Standards
6. Search Engine Optimization/Marketing

Source: The Official “Successful Website Checklist Challenge”

• 4 Comments

As web designers, we’ve grown pretty good at understanding how to create a modern, semantic, accessible website using XHTML and CSS. We understand what makes a good website, and how to make it happen.

When it comes time to design emails though, do all the same rules apply? Are there things we should be doing specifically for email that don’t make sense on a website? Campaign Monitor has published an article of 2008 Email Design Guidelines that shows us the technical, design and information elements that make up a successful HTML email.

• Don’t waste your readers’ time — An email inbox is a busy place, you won’t get much attention.
• Permission matters — Not only do you need to have permission to email people, but it helps to remind them of how they gave you permission, as specifically as you can.
• Relevance trumps permission — Just having permission is not enough, the content you are sending must also be relevant.
• Make unsubscribing easy — There’s no point emailing people who are not interested.
• Image blocking is common — You can’t rely on people actually seeing your images.
• Bring back tables — Structural tables are still often necessary for creating columns.
• Add inline styles — Gmail removes anything else.
• Don’t forget your plain text version — You can make blocks of text more readable.
• Meet your legal obligations — For example, CAN-SPAM for US senders.
• Test, test, test — It’s the only way to be confident about your design working.

Source: 2008 Email Design Guidelines

• 4 Comments

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

Many sites offer browser compatibility charts, but few back up their compatibility claims with repeatable tests. Google believes strongly in the value of test cases and automated regression testing. All of the tests in Google Doctype can be run individually or in groups, using the JSUnit automated testing framework. This allows us to update our charts quickly and easily as new browser versions come out. It also allows you to test in your own browser to see exactly what the compatibility claims mean.

Many sites offer developer resources for the open web, but few sites make those resources available under open licenses. You can read, but you can’t download. Or you can download, but you can’t redistribute. Google makes it easy to download the entire encyclopedia and take it with you, publish it on your private intranet, or package it for redistribution.

Source: Google Doctype

• 0 Comments

Few days ago, we have SEO Cheat Sheet from SEOMoz. Now, Nick La from WebDesignerWall has discovered that just over 1 out of 10 people don’t think SEO (Search Engine Optimization) is mandatory as a designer as well, therefore he has written an SEO Guide for Designers who want to learn about making it easier for websites or blogs to be found by search engines. He explains the common mistakes made by designers and developers. He also provides some basic tips that you should be practising to optimize your site for search engines.

Source: SEO Guide for Designers

• 3 Comments

SEOmoz has become a recognized leader in the field of SEO by providing the very highest quality solutions to their clients. These services are intended to help websites achieve higher rankings and greater levels of traffic through the organic listings on search engines (Google, Yahoo!, MSN & Ask). Recently, SEOmoz has released The Web Developer’s SEO Cheat Sheet which I have found very useful for webmasters. The Web Developer’s SEO Cheat Sheet shows us the following.

• Important SEO Html Tags, Search Engine Indexing Limits
• Recommended Title Tag Syntax, Common Canonical Issues
• 301 Redirect, Important Search Engine Robot User-Agents
• Common Robot Traps to Avoid, Robots Meta Tag Syntax
• Robots.txt Syntax, Sitemap Syntax

Source: The Web Developer’s SEO Cheat Sheet

• 11 Comments

After the massive success of PSDTUTS, Eden Creative Communities decided to branch out into tutorials on other subjects. Since one of the most requested types of tutorials has always been for web development, that seemed like a logical place to go. So Eden Creative Communities has just launched NETTUTS for us. NETTUTS is tackling pretty much any subject to do with building websites including:

• Complete step by step website builds
• HTML and CSS techniques
• Flash effects and techniques
• Javascript and AJAX
• Dreamweaver and other tools
• General web development skills

Although NETTUTS has just launched few days ago, there are some very nice and useful content for web developers like us. For example, Creating a PayPal Payment Form and Build a Sleek Portfolio Site from Scratch. I strongly recommend you subscribing to NETTUTS, so that you can receive top quality website tutorials as soon as you can. I am sure NETTUTS will not disappoint you.

• 5 Comments

Google App Engine is a developer tool that enables you to run your web applications on Google’s infrastructure. The goal is to make it easy to get started with a new web application, and then make it easy to scale when that app reaches the point where it’s receiving significant traffic and has millions of users.

Google App Engine enables you to build web applications on the same scalable systems that power Google applications. It also provides an API for authenticating your users. If you choose to use this, anyone with a valid Google Account may sign in your application. It saves you some time on building users registration and managing users accounts. At the moment, every Google App Engine application can use up to 500MB of persistent storage and enough bandwidth and CPU for 5 million monthly page views which I think it is more than enough for a startup.

This is only a preview release of Google App Engine. For now, account registrations are limited to the first 10,000 developers, and applications are restricted to the free account limits. Go and grab your account now!

Requirements: -
Demo: http://code.google.com/appengine/
License: License Free

• 6 Comments