Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.

Bin-Blog

Refferer Links in Google Analytics

Google Analytics is a great tool for tracking your visitors - I use it for all my sites. But there is one problem - you cannot find the exact URL from which the visitor has come(the 'Refferer' URL). Well, they provide this data - but have hidden it in the menu.

To get this list, open this menu in the left side of the Analytics page...
Marketing Optimization > Marketing Campaign Results > Referral Conversion.

Now just open a site to see the incoming links from that site.

I have no idea why they have decided to hide this feature - I use this feature a lot.

Read More...

Wired Design Reviewed

Wired Magazine have redesigned their magazine - and since it is one of the best technology magazines, I decided to review the code of the site. The magazine redesign gave me the idea of doing the review for the site's design. I am not an expert in graphical design - so I am not going to say much about it.

The page I decided to review was the page announcing the redesign.

Does not validate

The page does not validate - and not just any small mistake like missing end tags - it does not even have a doctype! In all I found 126 errors.

Includes too much Files

The page calls 10 JavaScript files and 9 CSS files in the head section - with more in the body. Splitting up code to multiple files is a good method for managing code - but it would take up more requests. A better method for a high traffic site like Wired is using just one external file that includes all its javascript code and one CSS file.

Don't get me wrong - I would not advertise that method in smaller sites. Using just one file for all your code is a maintenance nightmare. If you want to do this the best choice is to use a merging tool like the merging tool by Ed Eliot.

Inline JavaScript Code

<body id="storyPage" onload="setStyle();">

A much better way of doing this is to store all the javascript in an external file and use this code...

window.onload=setStyle;

Or you could use one of the many addEvent() functions.

Image Based Navigation Links

Moving down, we have the navigation - this are linked images. All the images have alt attributes - but it still does not sit well with me. See the code..

<a id="nculture" href="/culture.html" title="Culture Story Index">
<img src="http://www.wired.com/ly/wired/shared/images/cs1/nav_culture.gif" alt="[Culture]" class="" />
</a>

[Returns added by me]

I don't know why it has ' class="" ' - but it was there when I got it.

A better method is using a list of links and using any image replacement technique to insert the image.

And those images they used are not all that good. Maybe they look better in a CRT monitor - but in my LCD monitor they look really bad. But I am not a designer and I am overstepping my bounderies when I say that - so why don't you decide...

Text Resizing Function

Wired gives the user a chance to change the size of the text. This is duplicating a functionality that already exists in the browser. Any decent browser can resize the text of the content. Note: IE does not count as a 'decent browser' - but if you use em as your font size unit, resizing works in it as well.

Currently the code look like this - ignore the inline JavaScript - we already covered that...

<a href="#" onclick="setActiveStyleSheet('Small Text', 1);return false;">
<img alt="Small Text " height="18" src="http://www.wired.com/ly/wired/shared/images/common/icon_text_sm.gif" title="Small Text" width="18">
</a>

Bookmarking using name

<a class="skiplinks" name="content"> </a>

This is for the skip links to work - but a much better method to do this is using ID for that section...

<div id="content">...

Unsemantic Code

<h1 class="lg"><cite>Wired</cite> Redesign: Change Is Good</h1>

<cite>? What do they mean by that? <em> should be a better choice here.

There are some code to display advertisements - but as a rule, I ignore that when I review a design. That is because most of the advertisement provider's code are very bad - and it is beyond the control of the designer.

By this time I got enough of it - after this much code cruft, I don't think anything better is going to come along in this page.

I found a few good things about wired - like their 'Standards Notification' and Skip Links.

Why Wired?

Why did I review a site like wired - especially when all 'big' sites fail to provide a standard code. Because I thought that if a site has articles promoting web standards, they will design their site so. Clearly, I was wrong.

Just for your information, I reviewed a site and complained that it did not validate - but this site will fail validation as well. Blogger inserts too much stuff that fail to validate that I stopped trying a long time ago. But my sites will validate - if you have any doubt, take a look at the code of OpenJS or Bin-Co. Its not perfect, but still is much better than wired's redesign

Read More...

Ajax Data Transfer Format - UED(Url Encoded Data)

JSON has taken the award for the easiest method for transporting data when using Ajax. JSON is great to get data from the server side to the client side. What what about when you need to send data to the server side? Sure you can use JSON then - but the advantage of using JSON is lost. So I propose using another format for it - UED or URL Encoded Data. Its a very simple concept - and it has been in use for a long time - all I have done is create a function that will encode the data into this format. The basic concept behind this is that the most used data structures can be easily encoded into a URL. You can create variables, numerical arrays, associative arrays, multi-level arrays etc. using existing syntax. The best part is all the server side languages are capable of handling this format - so no parsing is needed.

ued_encode() will take an array as its argument and return the data encoded in UED format - as a string. You can use that string to send the data via POST or GET in the query part of the URL.

Demonstration

See ued_encode() in action.

Usage


var arr = {
 'name':"Binny",
 'year':2007,
 'quote':"Hello, World!",
 'os':['Windows','Linux','Mac'],
 'software':{
  'editor':"vi",
  'audio':"xmms",
  'video':"vlc"
 }
}
var data = ued_encode(arr);

Code

ued_encode.js - <1 KB

Read More...

Enabling Image Uploading in FCKEditor for PHP

FCKEditor is one of the most feature rich web based WYSWYG editors. I use it for almost all my projects. However, if you wish to enable image uploading in it, you have to jump through some hoops. This is a small tutorial on how to enable image uploading in FCKEditor. This tutorial is aimed at FCKEditor 2.3.2 - but the principle works in other versions of FCKEditor as well

Configuration

fckconfig.js

Open the file FCKEditor/fckconfig.js

Make sure that the default php connector is selected.

Line : 143 - Approx.

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

By default, the ASP connector is enabled. If any FCKEditor developer is reading this, please make the default connector PHP as it is more commonly used than ASP.

Connector

Open FCKeditor/editor/filemanager/browser/default/connectors/php/config.php

Enable the connector

Line : 24
// SECURITY: You must explicitelly enable this "connector". (Set it to "true").
$Config['Enabled'] = true ;

Make sure that the given 'UserFilesPath' folder exists in the server and has write permission.

$Config['UserFilesPath'] = '/UserFiles/' ;

Uploader

Open file FCKeditor/editor/filemanager/upload/php/config.php

Enable the uploader

Line : 24
// SECURITY: You must explicitelly enable this "uploader". 
$Config['Enabled'] = true ;

All configurations are done.

Test the Editor

Now open up the url : http://www.yoursite.com/FCKeditor/editor/filemanager/browser/default/connectors/test.html in the browser

Select PHP from the 'Connector:' drop down and click the 'Get Folders and Files' link.

If the files and folders of your 'UserFiles' folder is shown in the XML format, all is fine.

Read More...

Flash 9 for Linux

Finally - Adobe have released Flash 9 for Linux. I have been using the beta version of Flash 9 for some time now. Still no flash for 64 bit Linux.

Installing

  • Download the tar.gz file from the Adobe site.
  • Extract the file
  • Run the installer using the command './flashplayer-installer' in the extracted folder
  • Once the installation is complete, the plug-in will be installed in Firefox. To verify, open Firefox and type 'about:plugins' in the address bar.

Unlike last time, I have not run into any problems yet.

Filed Under...

Read More...

'Snap Preview Anywhere' Review

I am seeing a lot of sites using the Snap Preview Anywhere. I just cannot understand why people are using it - it adds almost no value to the page.

Only the title is readable

If you can read the text in the linked page, there will be some advantage - but the only thing that can be read using the Snap tool is the heading of the page. Yes, knowing the title is useful - but you don't need a screenshot for that. The '<A>' tag has a 'title' attribute that does the job ver well.

The rest of the text is unreadable because the screenshot is small. No - the solution is not creating a bigger preview - the solution is using title attribute.

Obscures text

If you hover over a hyperlink, a small window appears that will show the preview - and hide a lot of text. This will break the flow while reading. I constantly find myself maneuvering the mouse to avoid stepping on these 'virtual land-mines'.

Not Marked

Some sites use this only for external links - and some for internal links as well. But all the links are marked in the same way - making it harder for me(and others) to navigate through this 'mine field'.

Added 20K Download

The Javascript file behind this is 20.8 KB - not adding the images that will be downloaded later. Are you sure that the advantage of this script justifies this extra load?

Privacy Issue

You are calling a script from a third party site. Basically you are handing over your useage stats to this site. Snap has a Privacy Policy statement. I recommend you go through it before using the script on your site. I am not sure wether this privacy policy is for their site or their script. If you know, please let me know.

Users hate it

Maybe hate is a strong word - but when Darren Rowse at Problogger asked the visitors about their opinion about Snap, the majority said "No, thanks". This caused Darren to remove the script from his site.

The Code

I took a look under the hood - I downloaded the JS file and took a look at the code. It was compressed so I had to use a code beautifier. Snap uses Object Literals - so it will not wreak havoc with your javascript code. However I saw some for-in loops - I don't know how they will hold up if your site uses Prototype.

Disable Snap Globally

Despite all these negative things, I liked this thing about Snap. There is an option to deactivate the script globally. Just follow the 'Disable Snap Link' and snap will be disabled for all sites. More details about the Disable feature.

Filed Under...

Read More...

De-lurking day for all you Lurkers out there

I always wanted to do a 'de-lurking' post. Two of my favorite web development bloggers - 456 Berea st and veerle's blog have done it. So I have decided to join in and create a de-lurking post of my own.

What is De-lurking?

A lurker is a 'person who reads discussions on a message board, newsgroup, chatroom, file sharing or other interactive system, but rarely participates'. De-lurking is an operation to get you out in the open. Basically what you need to do is post a comment for this post.

What do I write in the Comment?

I would like the following details...

  1. Your Name
  2. Your field
  3. URL(if any)
  4. What kind of articles would you like to see on my blog?

I am always on the lookout for new blogs to add to my RSS Aggregator. I figured the best way to do that is to find people who have the same interest as me - if you read my blog, you will be interested in Web Development. And that is the topic I am most interested in.

If you leave your URL, I will take a look at your site. And if you have great articles I will even link to it. So please leave your URLs.

But, please... please... comment. Even if you comment is just 'Hi', post it, all right?

Filed Under...

Read More...

Creating Web 2.0 Graphics In Gimp

There are many tutorials about creating buttons and graphics in the new 'Web 2.0' style. Unfortunately, all these tutorials are for Photoshop users. The Gimp users are completely ignored. To solve this problem I have written a series on creating Web Graphics in Gimp.

Using Gimp to make Web 2.0 Buttons and Graphics
There are many tutorials about creating buttons and graphics in the new 'Web 2.0' style. Unfortunately, all these tutorials are for Photoshop users. The Gimp users are completely ignored. So, I have decided to correct this error - this is a tutorial on how to create a Web 2.0 style button in Linux using Gimp(will work in windows as well).
Creating Badges/Violators using Gimp
In the first part of this series we saw how to create a Button using Gimp - now to create another prominent element of Web 2.0 design - badges or violators. Very useful for under construction beta sites.
Creating Reflections for Logos in Gimp
Let us see how to create Logos using the reflection trick. Reflections or wet surfaces have been used in many 'Web 2.0' Logos. I used this technique to create my OpenJS.com logo. This is very easy to do - once you get the idea.
Creating a shadows in Gimp
Shadows are an integral part of Web 2.0 design. Here are a few ways to create a shadow in Gimp...
Read More...

Bests Posts in 2006

Happy new year, all! This year I will continue the tradition of highlighting the best posts of the year at the end of the year(or at the beginning of the next - as in this case). The best posts in 2006 in this blog are...

Articles

A Gentle Introduction to Ajax
Ajax or Asynchronous JavaScript and XML enables the programmer to execute a server-side script without refreshing the page. This is a three part series that teaches the basics of Ajax.
CSS Shorthand
CSS Shorthand is a method to compress multiple declarations into one declaration. Two or more related declarations can be compressed to form one easily readable declaration.
Ajax Response Data Formats
Some time ago, Peter Paul Kosh wrote an article about the different types of Ajax data formats - The AJAX response: XML, HTML, or JSON? This is my take on the subject
Web Development in Linux
Linux is a better platform for Web Development than Windows can ever hope to be. Most of the thing you would need in a development server like a Web Server, Database Server, PHP, Perl, Python, Ruby etc. are already present on any decent distribution. Linux has browsers(Firefox,Konqueror,Lynx,etc.), design tools(Gimp), editors(Quanta Plus,Emacs), programming tools(CVS,Cervisia) - in short, everything you need for web development. This is the longest series in my blog - in is not over yet.
Using Gimp to make Web 2.0 Buttons and Graphics
There are many tutorials about creating buttons and graphics in the new 'Web 2.0' style. Unfortunately, all these tutorials are for Photoshop users. The Gimp users are completely ignored. So, I have decided to correct this error - this is a tutorial on how to create a Web 2.0 style button in Linux using Gimp(will work in windows as well). A four part series.

Scripts

Inline Perl code in HTML
One of the main advantage of using PHP is that you can embed PHP code inside HTML files - just give it the extension '.php' and the server will parse it and serve the resulting page. In Perl, you will have to embed HTML code in perl's print statements - this is a much tougher approach. So I created a perl function that will let you insert Perl code within HTML files using <?perl ... ?> tags.
Live Validator - JavaScript Field Validation Script
Live Validator is a JavaScript program that will validate any form field as the user types the data using the regular expressions that you have specified. To see a working example, visit the registration page of OpenJS.
Query() Function for PHP
query() function is a PHP function will accept a query as its argument and return the data in different formats based on the result of the query.
XML Parser function for JavaScript - xml2array()
I have created a small function called 'xml2array()' that will take an XML document as the argument, parse it and return an associative array as the result. This array will contain the data of the XML file - which can be easily accessed. This function is available in PHP too - xml2array() - XML Parser for PHP
Updated version of jx Ajax Library
x is a small toolkit for providing AJAX support in JavaScript. To get the latest version of this script, go to jx - JavaScript Ajax Library
Read More...

Subscribe to : Posts