twitree.com - see on which leaves the birds are…
I am happy to announce the launch of twitree.com. It's a twitter application which allows a twitterer to view his followers in a tree-like navigation, which can be expanded.
twitree makes extensive use of the YUI library. The following components were used :
- grids css - for the layout
- yahoo dom event - for DOM and event handling
- connection manager - for AJAX requests like getting the list of followers for a user
- container family - to display modal dialogs like prompting for a twitter username, displaying the loading panel
- JSON utility - to parse the JSON data twitree receives from the twitter servers
- cookie utility - to fetch username information from a cookie so that the user doesn't have to input his username every time
- and finally the treeview control which provides a nice tree and dynamically loads the data upon clicking on a node
The application is very much in an initial phase and there are some limitations, like only 100 followers are being returned, rate limiting, etc...
Stay tuned for further information
Alternate colors to table rows with javascript (YUI)
This article will show you how to add alternate colors to table rows without any server side development or hard coding your scripts, thus providing good readability for your users and great flexibility for you. We will use the YUI library for that.
Read the rest of this entry »
Bubble menu javascript or playing with YUI’s event delegation
Image courtesy of jobee59's photostream
Event delegation refers to the use of a single event listener on a parent object to listen for events happening on its children (or deeper descendants). Event delegation allows developers to be sparse in their application of event listeners while still reacting to events as they happen on highly specific targets. This proves to be a key strategy for maintaining high performance in event-rich web projects, where the creation of hundreds of event listeners can quickly degrade performance. More on event delegation including examples.
This post illustrates the use of event delegation to create a "bubble" menu, inspired by Bedrich Rios' post on Nettuts.
Read the rest of this entry »
9 tips to validate your XHTML code
What is validation ?
According to the W3c, Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking and proofreading for grammar and syntax, but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language.
Why taking the trouble to validate your XHTML ?
- Properly written XHTML code will render better, render on more browsers, and render faster than XHTML with errors. It's also more easily adapted to print and alternative browsing devices like mobile phones and handheld computers.
- Properly written XHTML code is more likely to be "future-proof" (backward compatible with future standards and future web browsers).
- Browsers are becoming more standards compliant, and it is becoming increasingly necessary and important to write valid and standards compliant XHTML code
- Poorly written XHTML can greatly reduce the amount of traffic your web site receives from search engines.
- Write XHTML code right the first time and write it once.
- You don't want to look foolish among your friends while not knowing the rules, uh?
8 practical tips to make your web pages faster
Yahoo's Exceptional Performance team has compiled a list of 34 best practices to have faster web pages. In this post I'll show you 8 tips which helped me to get a B grade in YSlow! for web pages that I develop. Currently YSlow's web page analysis is based on 13 identified basic rules that affect web page performance. In decreasing order of priority they are:
- Make Fewer HTTP Requests
- Use a Content Delivery Network
- Add an Expires Header
- Gzip Components
- Put CSS at the Top
- Move Scripts to the Bottom
- Avoid CSS Expressions
- Make JavaScript and CSS External
- Reduce DNS Lookups
- Minify JavaScript
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
You can get more info by clicking on each item. Of course using a CDN is not affordable by everybody, including me. This didn't prevent me to have a B grade though. I will guide you through some of the items which worked for me.
Read the rest of this entry »
10 code snippets for PHP developers
I've compiled a small list of some useful code snippets which might help you when writing your PHP scripts...
Read the rest of this entry »
Pixidou - an Open Source AJAX Image Editor (PHP and YUI based)
Pixidou is a new open source AJAX image editor which will allow you to :
- adjust brightness
- adjust contrast
- cropping
- flipping
- negative
- resizing
- rotating
- tint
images.
Read the rest of this entry »
AJAX image cropper with YUI and PHP
This post will show you how to build an AJAX crop image tool using the image cropper control from YUI library and PHP.
Demo
Download sample file
Read the rest of this entry »
Show/hide containers by only adding CSS classes without writing javascript code (YUI-based)
This post will show you how to add the collapse/expand functionality in your HTML pages, perfect for FAQs by only adding two class names to your existing page and including the scripts below. Of course it's all YUI-based and also a demo of the fantastic YUI selector utility.
Demo of the toggler
Download the javascript file
Read the rest of this entry »
nouzil.com - a new Mauritian portal on the web (YUI-based)
I came to know the existing of a new Mauritian portal via Avinash called nouzil (which means our island in creole) and I must say at first look it reminds me of Netvibes a lot. I think the nouzil.com team picked up some bits and pieces from Netvibes.com.
Read the rest of this entry »