Site Moved

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

Bin-Blog

New Computer

I was finally able to replace my aging computer with a brand new one. My old computer is about five years old - it had a (don't laugh) 400Mz Celeron processor and 128 MB RAM. Now that I am into web development using PHP and MySQL I am finding it very difficult to get it to function properly. For example, if I try to run a Apache Server on my old system it promptly crashes. I found an alternative to apache - the Sambar Server. This is much more light on the resourses. But I still can't run the Sambar Server, PHP and MySQL server along with a browser. If I some how manage to do this, the machine slows down to a crawl.

Anyway, now all this is behind me. Now that I have a better system, I can use Linux OS(Fedora Core 3) as my primary OS(it was way too slow on my other system. The Specs of the new system is given below...

  • AMD Athelon 3000 XP(64 Bit)
  • Asus Motherboard K8V-X
  • 512 MB DDR RM
  • Sony DVD ROM
  • Acer 15" LCD Monitor
  • Samsung 80GB SATA HDD

And finally, a gimped up version of a picture of my new system.

Filed Under...

Read More...

Javascript Functions for converting Hex colour to RBG Values

I recently needed to create a fade effect for some text for the new version of Sudoku. In the process of creating the effect, I needed to convert three Red,Blue and Green values to a Hex code - the format of colour used in HTML. For example, if the values 255,255,255 is given, the hex code #FFFFFF must be returned.

The code for the two hex convertion functions are given here. As for the fade effect function, well that will be made available in a later post. There are the two functions...

hex2num(hex)
This function will accept a hex colour value(like #0FCAF8) and convert it to an array with three elements. The first element of the array will be the value of red, the second will be blue and the third one will be green. For example...
hex2num("#0FCAF8") will return the value 15,202,248.
num2hex(triplet)
This function will take an array with three elements and return a hex value created from it. For example...
hex2num(new Array(15,202,248)) will return the value #0FCAF8.

Code

//Convert a hex value to its decimal value - the inputed hex must be in the
// format of a hex triplet - the kind we use for HTML colours. The function
// will return an array with three values.
function hex2num(hex) {
 if(hex.charAt(0) == "#") hex = hex.slice(1); //Remove the '#' char - if there is one.
 hex = hex.toUpperCase();
 var hex_alphabets = "0123456789ABCDEF";
 var value = new Array(3);
 var k = 0;
 var int1,int2;
 for(var i=0;i<6;i+=2) {
  int1 = hex_alphabets.indexOf(hex.charAt(i));
  int2 = hex_alphabets.indexOf(hex.charAt(i+1)); 
  value[k] = (int1 * 16) + int2;
  k++;
 }
 return(value);
}
//Give a array with three values as the argument and the function will return
// the corresponding hex triplet.
function num2hex(triplet) {
 var hex_alphabets = "0123456789ABCDEF";
 var hex = "#";
 var int1,int2;
 for(var i=0;i<3;i++) {
  int1 = triplet[i] / 16;
  int2 = triplet[i] % 16;

  hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2); 
 }
 return(hex);
}

Filed Under...

Read More...

Icons for Select Menu Options in (X)HTML/CSS

The HTML Select menu is notoriously inflexible for designers - as is many other form controls. I will try to remedy this is a small way. I will add a small icon to the left of all options - a different icon for each option. See Demo.Warning : This script will not work in IE.

This is what I propose to do...

HTML Code

<label for="some_countries">Straight Forward</label>
<select name="some_countries" id="some_countries" class="icon-menu">
<option style="padding-left:0px;" value="">Select a Country</option>
<option style="background-image:url(flags/usa.png);" value="US">USA</option>
<option style="background-image:url(flags/india.png)" value="IN">India</option>
<option style="background-image:url(flags/england.png);" value="UK">England</option>
<option style="background-image:url(flags/france.png);" value="FR">France</option>
<option style="background-image:url(flags/germany.png);" value="GE">Germany</option>
<option style="background-image:url(flags/canada.png);" value="CA">Canada</option>
<option style="background-image:url(flags/russia.png);" value="RU">Russia</option>
</select>

CSS

select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}

This is enough to create the desired effect in Firefox. Of course, you must have the images of all the required flags. However, there is a problem with this code - inline CSS is used in the above example. If you want to separate presentation from content, you could use the following code...

HTML

<select name="countries" id="countries" class="icon-menu">
<option value="">Select a Country</option>
<option value="US">USA</option>
<option value="IN">India</option>
<option value="UK">England</option>
<option value="FR">France</option>
<option value="GE">Germany</option>
<option value="CA">Canada</option>
<option value="RU">Russia</option>
</select>

CSS

select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}
select#countries option[value="US"] {
background-image:url(flags/usa.png);
}
select#countries option[value="IN"] {
background-image:url(flags/india.png);
}
select#countries option[value="UK"] {
background-image:url(flags/england.png);
}
select#countries option[value="FR"] {
background-image:url(flags/france.png);
}
select#countries option[value="GE"] {
background-image:url(flags/germany.png);
}
select#countries option[value="CA"] {
background-image:url(flags/canada.png);
}
select#countries option[value="RU"] {
background-image:url(flags/russia.png);
}

Explanation

This example makes use of more advanced(Level 2) selectors to do the job.

select#countries option[value="IN"] {
background-image:url(flags/india.png);
}

This means that all option with value "IN" will be given the background image 'flag/india.png'.

Usage

So we come to the real question - do we use it? This will not working in IE - effectively making it useless for almost 90% of our visitors. Still, I will recommend that we use it - the code degrades beautifully if the browser don't support the option, it will show a default select menu - no mess, no fuss.

Filed Under...

Read More...

Dynamic Form Field Generation in JavaScript

Ever had the need to create more fields dynamically? For example, consider a form where there is five file uplaod fields. But if the user wants to upload more than five files, they have to upload 5 files first, then come back to that page and agian upload more file. This process would be made much easier if you had added a button that will dynamically add more fields to the form.

The below code will insert more text fields into a form that already has 5 fields in two different categories. I am using a list here - but that is not necessary - you can do it with just a div element.

Codes...

JavaScript Code

//Add more fields dynamically.
function addField(field,area,limit) {
 if(!document.getElementById) return; //Prevent older browsers from getting any further.
 var field_area = document.getElementById(area);
 var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
 //Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
 //  field given in the argument is 'friend_' the last id will be 'friend_4'.
 var last_item = all_inputs.length - 1;
 var last = all_inputs[last_item].id;
 var count = Number(last.split("_")[1]) + 1;
 
 //If the maximum number of elements have been reached, exit the function.
 //  If the given limit is lower than 0, infinite number of fields can be created.
 if(count > limit && limit > 0) return;
  
 if(document.createElement) { //W3C Dom method.
  var li = document.createElement("li");
  var input = document.createElement("input");
  input.id = field+count;
  input.name = field+count;
  input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
  li.appendChild(input);
  field_area.appendChild(li);
 } else { //Older Method
  field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
 }
}

HTML Code

<form name="frm" method="POST">
<strong>Friends List</strong><br />
<ol id="friends_area">
<li><input type="text" name="friend_1" id="friend_1" /></li>
<li><input type="text" name="friend_2" id="friend_2" /></li>
<li><input type="text" name="friend_3" id="friend_3" /></li>
<li><input type="text" name="friend_4" id="friend_4" /></li>
<li><input type="text" name="friend_5" id="friend_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('friends_area','friend_',10);" />

<strong>Enemies List</strong><br />
<ol id="enemies_area">
<li><input type="text" name="enemy_1" id="enemy_1" /></li>
<li><input type="text" name="enemy_2" id="enemy_2" /></li>
<li><input type="text" name="enemy_3" id="enemy_3" /></li>
<li><input type="text" name="enemy_4" id="enemy_4" /></li>
<li><input type="text" name="enemy_5" id="enemy_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('enemies_area','enemy_',0);" />
</form>

Demo

I have created a Demo of this example in my site.

See Also

Peter Paul Kosh's Extending forms.

Read More...

My Computer in 2005

The following charts shows my computer useage for the last year. These were create using the data created with the Boot Booster Program. Boot Booster is a program that I made in C++ that is used to log my computers startups andshut downs. The information is saved to a text file in the following format...

Session Started At : 31-12-1999 11:59 PM
Session Ended At : 1-1-2000 1:00 AM
Session Lasted 1 hours and 1 minutes.

I then use a perl script to parse this file to create the chart that outlines my computer useage in the specified time. The following is what my compter usage in 2005 looks like...


902 boots in record.
Total Usage 1149 Hours, 21 minitues.

From 11:56 PM, 31/12/2004 to 8:51 PM, 30/12/2005


OS

Windows896
DOS6

Restarts And Crashes

Restart31
Crashes70

AM Vs PM

AM (139)
PM (757)

Morning Hours (AM)

HourBoot Count
0 AM
43
1 AM
12
2 AM
2
3 AM
0
4 AM
1
5 AM
4
6 AM
1
7 AM
10
8 AM
10
9 AM
19
10 AM
18
11 AM
19

Evening Hours (PM)

HourBoot Count
0 PM
13
1 PM
28
2 PM
36
3 PM
34
4 PM
30
5 PM
34
6 PM
45
7 PM
122
8 PM
101
9 PM
112
10 PM
107
11 PM
95

Monthly Comparison

MonthBoot Count
January
101
February
84
March
117
April
88
May
65
June
75
July
70
Augest
65
September
71
October
48
November
46
December
66

Usage Comparison

UsageBoot Count
0 - 1 Hours
351
1 - 2 Hours
226
2 - 3 Hours
121
3 - 4 Hours
62
4 - 5 Hours
24
5 - 6 Hours
5
More than 6 Hours
3

Made with RecAn 1.00.B and Boot Booster 2.01.A from Binny's Softwares


This graphs only show the amount of time I spent on my home computer - the detials on the computer that I am using at work is not provided here. That would work out to be about seven hours every working day.

I spent 1149.5 hours on my home system in the last year. So I spent 3 hours and 9 minites on my system daily. Seem like too much? Or does it seem like too little to you? How much time do you spent on your system(an approximate figure will do)?

Filed Under...

Read More...

Sudoku 2.00.A Beta 1 is Out

The first beta Sudoku 2.0 is ready. I have been working on this beta for a few days now. Try it out and let me know if you find any problems. I have not yet set the latest version at the main Sudoku page. Before doing that, I have to make sure that it works. So your feedback is crucial.

New Features...

Difficulty Level
Hard/Normal/Easy Levels of play
Pen Feature
Helps the user to insert one value into multiple cells using just the mouse.
Error Reporting
Invalid items will be show in another color - ie. if the user enter two numbers or an alphabet, it will be shown in a red colour - so that the user sill remember to change it.
A hint system
The users will have an option that will warn them about a bad move(repeated numbers) right after they made the change. For example, the user will enter 7 and the script will give a warning that 7 already exists in the vertical row.
Multiple Style
User can chose any style from the available list for display - this will be set as a cookie so that user can use when they come back later.
Cheats
Reveal the real value of a cell at users choice.
Status Indicator
'How am I doing' Option.
Faster processing
The new version is a much faster one. I had to optimize the script - you know how slow javascript can be.
Read More...

Sudoku 2.0 in the Works

I have started work on the second version of Online Sudoku. It is easily the most popular page on my Bin-Co site - so working on it is a good investment of my time.

Some of my planes for the new version...

  • Hard/Normal/Easy Levels of play
  • The Pen feature
  • Invalid items will be show in another color - ie. if the user enter two number, it will be shown in a light blue colour - so that the user sill remember to change it
  • A hint system - the users will have an option that will warn them about a bad move(repeated numbers) right after they made the change. For example, the user will enter 7 and the script will give a warning that 7 already exists in the vertical row.
  • Multiple Style - from which the user can chose one for display - this will be set as a cookie so that user can use when they come back later.
  • Reveal the real value of a cell at users choice.
  • 'How am I doing' Option.
  • Faster processing - I really had to optimise the script - you know how slow javascript can be.

The script is in heavy development and will be over before long. I will let you know as soon as a beta version is out.

Eariler posts on Sudoku...

Read More...

The Best Posts of 2005

Some of the best posts from the last year. The best stuff in Bin-Blog in 2005...

AHAH(Asynchronous HTML over HTTP) - AJAX 2.0

AHAH or Asynchronous HTML over HTTP is a much simpler version of AJAX. Using AHAH approach in JavaScript you can display external XHTML pages inside your HTML page. The beauty of the script is that it is so very simple - the underling code is just twenty lines!

CSS Coding Style

I don't have to tell you the effect on readability when a big CSS file is created with the first style of coding - it will be impossible to find anything without wading thru the code for some time. On the other hand, the same task will be a piece of cake if the code is in the second form. So here, I am trying to make a coding style for writing CSS code.

Dump() Function - Javascript equivalent of PHP's print_r()

The moment I saw the print_r() function of PHP, I fell in love with it. It is a very necessary function and I can't understand why no other language supports it. So I have ported the print_r function to javascript.

New Greasemonkey User Script - Multiple Engine Searcher

I have created some Greasemonkey User Scripts before, but this is the first one that could be used by others. This script will add links to other search engines when searching for something on google.

My Custom JavaScript Functions

Dustin Diaz have recently written an article on Top 10 custom JavaScript functions of all time. So I thought that I would write about all the functions on my common.js file.

Calendar Navigation System for Blogger

Serious bloggers will tell you that calendar navigation is pretty useless as a form of navigation. But I still wanted to have that option available to me. And since blogger did not have it, I decided to create one myself.

PHP Security

A few days ago I read an article on PHP Security on ILoveJackDaniels.com. I could not even begin to stress the importance of the concepts said there.

SiteMaps - A New Technology from Google

Google came up with something new - a method in which webmasters tell the search engines which all files must be indexed, where it can be found, and how important it is. Till date, search engines index a site by scanning the html files for links to other files.

An Introduction

I have started the blog - but as of yet, I have not introduced myself. I am Binny. Binny V Abraham. I am a programmer by profession. Currently I am working at a Web Development company, Reubro International as a programmer in Perl/PHP. I am settled in the Southern part of India - Kerala(also known as 'God's own country').

The Very First Journal Entry

After planning this for a long time, I finally got down to writing a Jorunal entry. So what made me write a journal? I have no idea - even though I have a lot of theories...

Filed Under...

Read More...

Happy New Year!

2006 is here. Happy new year everybody. I hope 2005 has been a good for you - and I wish that 2006 may be a even better year for you.

Some reviews about the past year that I liked...
Wired - Predictions
Best Tech Moments of 2005
Best Inventions in 2005

Here are some of my predictions for 2006. I must warn you that they are just guesses and I did not do any kind of research before creating them. Lets start off with the mighty Microsoft...

  1. IE 7 will vindicate the Internet Explorer line of browsers - many of IE's most glaring problems will be fixed in this.
  2. But Vista will fall flat.
  3. Microsoft will make the code of some of its products open.
  4. Firefox will eat more from IE's share of the Browser pie.(Obviously)
  5. Google will make one great product
  6. But it will make a huge public relations blunder.
  7. Wikipedia will regain the credibility that it recently lost.
  8. Web 2.0 will be shown to be more hype than matter.
  9. Scematic Web will become much more popular.
  10. Linux will get more footing in the Desktop market.
  11. Hardware prices will plummet.
  12. Quantum computer are still a long way from now(won't happen in 2006).

Now lets wait till the end of this year to see how much I got right... If you have a blog, why don't you too create a list of pedictions for 2006? Just leave the URL of the list in the comments section.

Read More...

Subscribe to : Posts