Open Source Resources for Web Application Developers

Cameron Moll introducd “The Highly Extensible CSS Interface”, a four-part series of how-to’s and savvy conversation. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.

Part One: The Foundation
This first article will briefly discuss the importance of producing visually rich interfaces with semantic, accessible, and portable markup underneath.

Part Two: CSS Selectors & jQuery
This article will present examples that demonstrate how to take advantage of the now-supported CSS2 and CSS3 properties previously ignored by Internet Explorer, such as min/max-width, child and adjacent sibling selectors, and others. Also take a look at jQuery, a lightweight scripting library for enhancing UI elements.

Part Three: Adding Ajax Interactivity
The third article will lightly cover Ajax implementation and its role within the interface. Demonstration of a few ways to leverage Ajax judiciously.

Part Four: Testing for Extensibility
Lastly, the final article will look back at the chunks of code presented in the three previous articles to assess how they combine to produce a completed interface. A series of “extensibility tests” such as translation, text resizing and browser width resizing, the addition of new content, and so forth.

The final article also provides the full demo, as well as a bookmarkable site that gives you quick access to all resources mentioned throughout the series.

Source: The Highly Extensible CSS Interface

• 2 Comments

Yes, we all know that Internet Explorer has given us many troubles. We have spent most of our development time for designing the website just to show properly in Internet Explorer. Let see if our lives will be easier when working with IE8.

Windows Internet Explorer 8 Readiness Toolkit, the first place to look when you’re ready to optimize web sites and applications for Internet Explorer 8. It describes the new features that developers can exploit to make Internet Explorer 8 ‘light up’. These features include Activities, WebSlices, improvements in CSS support, innovations in AJAX functionality, improvements in DOM L2 Core support, and integrated Developer Tools. Here are the following main improvements of Internet Explorer 8.

• Activities are contextual menu options which quickly access a service from any Web page.
• WebSlices is a new feature for websites to connect to their users by subscribing to content directly within a webpage. WebSlices behave just like feeds where clients can subscribe to get updates and notify the user of changes.
• While one of Internet Explorer 8’s main goals is CSS 2.1 compliance, it is also forward looking towards CSS3. CSS3 is the next step in the evolution of Cascading Style Sheets, and unlike CSS 2.1 which consists of one single document, the CSS3 specification is broken down into different modules in order to increase the speed of converging on clear specifications and implementations of different features.
• Internet Explorer 8 includes tools that Web developers need to efficiently debug their sites directly in Internet Explorer. Developers can immediately debug a site’s HTML, CSS, and JScript from within Internet Explorer 8, rather than switch between Internet Explorer and a separate development environment.
• Internet Explorer 8 provides a simplified yet powerful programming model for AJAX development that spans browser, webpage, and server interaction. As a result, it is easier for you to build webpages that have much better end-user experiences, are more functional, and have better performance.
• During Internet Explorer 6’s long tenure as the leading market-share holder, Web developers revealed many bugs and inconsistencies in Internet Explorer’s DOM. Today, with the Internet Explorer 8 versioning plan, these bugs and inconsistencies are corrected by default, and those customers who choose to opt out of this behavior may enable IE7 compatibility mode.

Source: Internet Explorer 8 Readiness Toolkit

• 9 Comments

I have seen many website designs have Cross-Browser Transparent Columns, but how do we achieve it? Transparency is an effect that, unfortunately, haven’t gotten much use during the web’s history. One of the biggest reason for this is the lack of support for PNGs with alpha channels in IE6. This is starting to change with IE7 and Firefox gaining more and more ground on Windows systems. As most web developers are aware it’s possible to use PNGs with alpha channels, but this is filled with lots of problems and doesn’t work very well when you place content on top of them.

How do we create transparent columns that can work in all browsers? What if we could use the opacity property but still have the content opaque? Bits & Pixels has presented us some clever use of CSS-positioning. By having a parent element that contains two children. One transparent background that fills the entire width and height of the parent, and one child that contains the content. We can have a transparent background while the content remains opaque.

Source: Cross-Browser Transparent Columns

• 1 Comment

Would you like to evaluate your own websites? How would you evaluate your own websites? CarstenCumbrowski from SearchEngineJournal has come up with a great and pretty detailed list of 50 questions that a website owner should asked himself about his own website.

If the answer to every question that follows below was answered with yes, you can be very pleased with yourself and consider yourself the top of the crop, because most websites have flaws for a number of different reasons, mostly related to the limitation of resources and sacrifices that must be made as a direct result of the shortage.

These questions are divided into following main categories: Accessibility, Navigation, Design, Content, Security, Other Technical Considerations, Other Marketing Considerations and Legal Stuff/Re-Assurance/Legitimization.

Source: 50 Questions to Evaluate the Quality of Your Website

• 1 Comment

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. Stylized Web has shown us the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time. The list includes the following CSS hacks:

• Vertical align div
• Min-Height
• PNG transparency
• Autoclear
• Reset CSS
• Scrolling Render IE
• Opacity
• PRE Tag
• Li Background Repeat IE
• Good to know

Source: Stylize Web 10 Best Cross Browsers CSS Hacks

• 4 Comments

Have you ever thought of building an extension or pulling contents from other websites which have not got RSS feeds or API available? Dapper is a service that allows you to extract and use information from any website on the Internet. For those familiar with web services, you can think of Dapper as an API maker. For the rest of you, Dapper allows you to build web applications and mashups using data from any website without any programming.

Dapper is really easy to use. During the beta, Dapper is free and open to all. In the future, non-commercial and small uses will remain free. Dapper works on the HTML of any web page. It does not currently work with XML, Flash, or Javascript. If a web page has a Javascript contained within, the Javascript sections will simply be disabled, but you will be able to work with the rest of the page.

However, Dapper’s users have the sole obligation to respect the copyrights of content they use from the web. Dapper will not be held liable for any sort of copyright infrigement, and will immediately comply with any verified request by the lawful owner of the content to cease using his content.

Source: http://www.dapper.net/

• 3 Comments

OpenDNS is the world’s most intelligent DNS service. Their global network and their software work together symbiotically to offer a set of features custom-tailored to you, without requiring you to buy any hardware or install any software.

They have built a self-healing network across two continents to give you the most reliable DNS service. They use multiple carriers at every site to ensure full redundancy of our Internet bandwidth. That bandwidth then feeds into a cluster of servers, which is constantly balancing the load across itself so your DNS request is answered in the fastest way possible. They do this for you and every one of our customers, about 30,000 times per second and growing.

OpenDNS operates PhishTank.com, the most accurate and timely source of phishing data on the Web. They protect you from phishing scams by blocking the fraudulent sites from resolving on your network by incorporating PhishTank directly into our system. And it is Free!

Source: http://www.opendns.com/

• 4 Comments

iA has presented us with the 2008 Web Trend Map, in all its beautiful beta glory. This time they have taken almost 300 of the most influential and successful websites and pinned them down to the greater Tokyo-area train map. By popular demand, they enlarged the poster size from A3 to A0.

iA has spent so much time on making this wonderful and detailed Web Trend Map. I think this looks really good and it is a good idea to set it as your wallpaper, or even put the poster on the wall of your home or office. There is a Big, A3 PDF and Clickable online version to play with as well.

Source: http://www.formforce.com/web-trend-map-2008-beta/

• 7 Comments

Collis Ta’eed has written a very nice article on Digital Web Magazine about Creating The Perfect Portfolio. An online portfolio is very important to a freelancer. Your portfolio will be looked at without you present, without any other information about you. If your portfolio has to stand alone in a critical situation like hiring, it’s worth spending some time making sure it’s going to get the job done.

Collis shares with us some of his observations and opinions—particularly from the viewpoint of an employer—on how to approach the task of building an online portfolio. The article is very detailed and well-written, it has also featured some of the best portfolio examples on the internet. Read the article carefully, you will learn a lot from it.

Source: http://www.digital-web.com/articles/the_perfect_portfolio

• 1 Comment

FreelanceSwitch which has over 17,000 readers, has released their first FreelanceSwitch book which covers everything from getting started to expanding your business. The book is called How to Be a Rockstar Freelancer which is written by Collis & Cyan Ta’eed – the founders of the site – it’s packed with new information, advice and insights not covered on the blog.

The book with 212 Pages of Expert Freelancing Advices is available now for $29 only.

Source: Grab Your Copy Now

• 2 Comments