Introducing PixelPerfectJs

PixelPerfectJs allows developers to put an image overlay on top of your HTML page and achieve pixel precise results.

How to use:
———–
Save the following link as a bookmark, or drag it to the links/bookmarks bar in your browser:

PixelPerfectJS

Or if you don’t want to use the bookmarklet, just add the following line before your closing body tag:
<script type="text/javascript" src="//dl.dropbox.com/u/2369055/pixelperfectjs/_ui/js/pixelPerfect.all.js"></script>

The PixelPerfectJS panel will then be displayed.

Settings:
———
* Enable: Yes/No. Whether you want to enable PixelPerfectJs or not
* Designs: Enter the image URL you want to overlay on top of your HTML. It must be either an absolute or relative URL. You can add as many images as you want.
* Position: You can manually set the position of the overlay
* Opacity: Control the opacity of the overlay.

Features:
———
* Simple! Just add 1 line of javascript!
* Not an extension or addon. Will work in any browser!
* No image size restrictions!
* Multiple overlays support
* Your settings are saved between sessions.

Contact:
———
Please send bug reports and ideas for future versions to: asvin.balloo@gmail.com

You can find the code on GitHub too: https://github.com/asvinb/pixelperfectjs
Feel free to contribute!

imgble.com – adaptive image resizing for mobile devices

I am happy to announce the launch of www.imgble.com. imgbleis a web-based utility that formats a specified image to best fit in different mobile screens. Those who work with mobile CMS, rendering image for the mobile devices into suitable format and dimension is obviously a big point to be considered which consumes a big portion of the development time. Based on the mobile device’s screen resolution, imgble automatically resizes your image, keeping its aspect ratio. imgble also supports the chaining of different effects on your image, such as blurring, adding borders, rotating, etc. You can find everything in the documentation.

So let me know your views, comments, and how imgble will be useful to you ;)

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

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

Latest update :

twitterers can now

  • update their status via twitree
  • follow a user by right clicking on the user and choose “Follow” from the contextual menu
  • send a direct message to a fellow twitterer by right clicking on the user and choose “Send message” from the contextual menu

FAQ has also been added

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?

Continue reading 9 tips to validate your XHTML code

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:

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. 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.
Continue reading 8 practical tips to make your web pages faster