My Programming Tricks

Caveman Blogger

Caveman Blogger

I recently bumped into a problem with my old CGI script that sends emails from LINUX/UNIX server in PERL platform.

I later found out that the server I rented/shared is no longer supporting emails using the sendmail –t command. I found a solution to it by using the PERL module of Net::SMTP.

Here are the codes that saved my day:

use Net::SMTP;

$smtp = Net::SMTP->new("smtp.yourdomain.com");

$smtp->mail("username\@ yourdomain.com");
$smtp->to($touser);
$smtp->data();
$smtp->datasend("MIME-Version: 1.0\n");
$smtp->datasend("From: $fromuser\n");
$smtp->datasend("To: $touser\n");
$smtp->datasend("Subject: $subject\n\n");
$smtp->datasend("$messagebody");
$smtp->dataend();
$smtp->quit();

Make sure you know your smtp address before using these codes. I found many other similar codes online but none is fully working. These codes are fully tested with no problem. Let me know if find any problem with these codes.

P.S.: Please replace your own variables for $touser, $fromuser, $subject, $messagebody in PERL.

Caveman Blogger

I like to use shortkey, especially the address bar shortcut.

I like to use CTRL-ENTER whenever I type the web address.

For example in the address bar,

I type yahoo followed by CTRL-ENTER. The browser will complete it as http://www.yahoo.com and go to this address. Whether it is IE, Safari, Firefox or Chrome, it is able to perform this trick.

Lazy me, lazy me...
Update (April 5th, 2016): Most browsers can now "auto-complete" your website address if you type in the domain name of popular websites such as Facebook, Google, Youtube, etc.

Caveman Blogger

HTML (Div Layer):
<div id="myDiv" style="position:absolute; visibility:hidden; width=100%;">
<table ...
...
</table>
</div>

HTML (Event Starter):
<input type=checkbox name=mycheckboxid onclick="javascript:toggle(document.myform);">

Javascript:
function getObj(name)
{
  if (document.getElementById) {
   this.obj = document.getElementById(name);
   this.style = document.getElementById(name).style;
  }
  else if (document.all) {
   this.obj = document.all[name];
   this.style = document.all[name].style;
  }
  else if (document.layers) {
   this.obj = document.layers[name];
   this.style = document.layers[name];
  }
}

function toggle(theForm) {
  obj1 = new getObj('myDiv');
  if (obj1.style.visibility == 'visible') {
    obj1.style.visibility = 'hidden';
    obj1.style.position = 'absolute';
  }
  else {
   obj1.style.visibility = 'visible';
   obj1.style.position = 'relative';
  }
}

There are three parts of this implementation:
1) DIV Layer (to wrap the table)
2) Activation (to trap events to activate the hide/unhide action, for this method make sure the form name is called myform or change accordingly)
3) The Javascript Subroutines to handle the hide/unhide action (I'm showing the toggle version which changes the visibility depending on the current exposure)

Caveman Blogger

Here are the codes:

sub connect_db {
if (!$connect) {
$dbh = DBI->connect("dbi:mysql:your_db_name;host=localhost:3306;user=db_user;password=user_password") or die "Couldn't connect to database: DBI::errstr\n";
$connect = 1;
}
}

sub disconnect_db {
$dbh->disconnect;
$connect = 0;
}

Try to use as little disconnect as possible as connecting and disconnecting may cause delay and to the HTML connection. As you may already know you may need to install the DBI module for PERL before running these codes. You also need to create a database and obtain the database name, user id and password in order to connect to the database.

Caveman Blogger

This module is important for SSL - LWP connections. I used this command to install the module using ppm (usually in c:\Perl\bin):

ppm> install http://theoryx5.uwinnipeg.ca/ppms/Crypt-SSLeay.ppd

I just reran the command a few days ago and it is still working!

Caveman Blogger

I have tried:

parent.scroll(0,0);
window.scroll(0,0);
.
.
.

Finally I found a site that says:

window.parent.scroll(0,0);

That saved my day! Hope it works for you too!

Caveman Blogger

Almost the same as the previous post. Just need to replace the cookie variable in the assignment of innerHTML.

HTML:
<span id="myHTML"></span>

Javacript:
document.getElementById('myHTML').innerHTML = document.cookie.indexOf("myCookieName"); // where 'myCookieName' is the name of the cookie such as the shopping cart item quantity, etc..

You can set up a Javascript function to handle this dynamic capability and receive event calls from omouseover, onload, ... HTML event as a trigger to the change of content. You can also set up a timer to change the content periodically.

Caveman Blogger

HTML:
<span id="myHTML"></span>

Javascript:
document.getElementById('myHTML').innerHTML = htm; // where 'htm' is a variable to hold the HTML codes you want to display in the <span> portion.

You can set up a Javascript function to handle this dynamic capability and receive event calls from omouseover, onload, ... HTML event as a trigger to the change of content. You can also set up a timer to change the content periodically.

Caveman Blogger

It depends on whether you want to use it to surf or you want use it to develop websites.

For web developers, it is always Firefox as it comes with tools to help troubleshoot websites and the plug-ins are widely available such as plug-ins to view raw HTTP headers, etc.

If you want to use it to surf net, I would recommend Safari and Chrome. I use to like Safari. After installing Chrome, Google has the upper hand.

For best compatibility, IE wins the race as many websites are built based on IE as it has the most users in the world.

In summary, Google Chrome is the best browser to surf although it has its own shortcomings.
UPDATE (April 5th, 2016): Many things occurred since this post. As of today, the scenario has drastically changed. Here is the latest browser statistics from w3schools website:

where it used to be:

Google Chrome's popularity surged from 11.6% (February 2010) to 69% (February 2016). The increase is almost 700%!

Caveman Blogger

Some say CGI/PERL is slow.
Some say CGI/PERL has security problem.
Some say CGI/PERL is phased out by PHP.
...

But there is still one "BIG" website that is still using CGI/PERL until today. Have you seen this:

https://www.paypal.com/my/cgi-bin/webscr

If CGI/PERL is not good, why is PayPal still using it until today to deal with large sum of credit everyday?
UPDATE (April 4th, 2016): It has been six years since I posted this comment about PERL's popularity. But I now would say PERL is already obsolete for me as PHP is far well supported by the developer's community. PERL's support doesn't seem to exist anymore as most developers are now using PHP as their favorite scripting software running on the server side. Whether Paypal is still using PERL, nobody knows as it is important for website like Paypal to refrain the visitors from knowing the type of scripting language it is using. Even the question now is whether PHP will be phased out by free online web editors such as Wordpress, Drupal and Blogger.

Caveman Blogger

I have decided to add Google Chrome browser to my browser list as test vehicle of websites I built or am going to build.

The download path is http://www.google.com/chrome/

After clicking the download button, a terms-and-conditions page appeared asking downloader to "agree and download".

The download file is called ChromeSetup.exe and it is just 551KB. Very small. It takes around a second to download the file.

ChromeSetup.exe then starts to download Google Chrome. It takes around 3 minutes to complete the download.

The installer then pops up asking me to start Google Chrome with a checkbox whether I want to make Google Chrome my default browser.

Since my Firefox is running while the installation is running, I was asked to close Firefox or skip the import of settings from Firefox.

Then the broswer pops up and the default page is Google.com. Here is the screenshot of the browser:

The icons appeared in my quick launch list as well as on the Desktop.

It does support my shortkey to .coms. The magic CTRL-ENTER after typing the name of the website without having to type http:// or www. or .com. Just type say "yahoo" and then press CTRL-ENTER to go to http://www.yahoo.com. A thumb up for Chrome.

For web developer, they like to "view source" and it works pretty well. But I like firefox better as it can tell you whether it is an iframe after clicking on the right button. It is still better than IE which one cannot view the source codes of an iframe.

The speed is much faster than I expected. The launching of the program is lighting fast and it is even faster than IE. I thought Safari runs the fastest but I have a new champion of speed: Chrome.

The buttons seems in the right place better than Safari which the refresh button is minute.

There is one shortcoming of Chrome that I don't like which is the inability to show the browsing history. I am unable to see the list of previous websites that I surfed. Firefox and IE are still better if this feature is compared. This could be the reason that I may not use Chrome in the future. But I will run to see the compatibility with websites I built or am going to build. This shortcoming is hurting the user-friendliness of Chrome.

In overall, the most impressive of part of Chrome is the speed. With a few more versions in the future, it should be a browser of my choice to be used on daily basis. Since the browsing history feature is lacking in this browser, I will only use it as a testing platform of websites. I hope the future releases add this feature to the speedy browser.

UPDATE: Google Chrome does have the browsing history feature. One just need to press and hold on the forward/backward button to see the history list.
UPDATE 2 (April 4th, 2016): After five years of using Google Chrome, it is a browser I cannot live without. It is flawless when it comes to displaying website contents especially sites that run a lots of Javascripts. It is also now the top ranking browser for the visitors to this blog. It used to be the IE browser that sits in the number one spot for a long time.

Caveman Blogger

Usually I will do the following setting:

select(STDOUT);
$| = 1;
print "Content-type: text/html\n\n"; # whenever your browser sees this, it will blank the screen
$| = 0;

$| = 1; is to make sure to send data to client web browser immediately. It is like a "live" connection.

$| = 0; is to make sure to send data to client web browser only when the buffer is filled.

Such configuration can make the user feel that the response of the web is fast but it is actually just slightly faster.

If you use $| = 1; throughout the HTML code spitting process, your web can be slower as it is wasting the buffer and burst capability of TCP connections. Unless you want to have live output capability such as the ping result from the server, avoid setting it to live output mode.

Caveman Blogger

The mod or modular operator in PERL (%) is responsible for this trick.

The following codes show how I did it:

.
.
.
$total_hits++;

if ($total_hits % 2) { $rowcolor = " bgcolor=#FFEEEE"; }
else { $rowcolor = " bgcolor=#FFFFFF"; }
.
.
.

These codes are in a loop to list out all the items. You can place the $rowcolor in the <TR> tag. The rows displayed will be in pink and white alternatively.

Caveman Blogger

I once encountered a problem with the cookie length with Firefox when the cookie name or value is too long.

I now try to imitate the same problem I encountered last time, the problem is gone.

But I use shorter cookie name and value so that Firefox won't reject them I encountered last time which caused me a lots of pain debugging.

It's good to test cookies using firefox as one can view the cookies easily using this:

Tools->Options...->Privacy->Show Cookies

Thank goodness there is a browser called Firefox or the debugging of cookie problem will be quite troublesome.

Caveman Blogger

Here are the codes I have been using. The key is to use the "-e" in the if statement. Other than that it is not a hard programming problem:

if (-e "../htdocs/prod/small/$image_id.jpg") {
$img_path = "/prod/small/$image_id.jpg";
}
else {
$img_path = "/img/default_small.gif";
}

Those in red (the relative path to the cgi-bin directory) depend on your server's configuration. One needs to ftp into the server to see the structure.

You can also "elsif" to support more file format rather than just jpg image files. Usually when an image file is not found, I will point it to a default "no photo" image file so that it looks more professional.

You then use the $img_path in the <img src=...> HTML tag.

Hope this helps.

Caveman Blogger

I like Filezilla. Especially the "File permissions..." feature, one can easily set the file permission without having to worry much about. You can even set permission for many files at the same time. Anyway, this only applies to Linux/Unix based servers. For Windows based servers, the file permission has to be set in the control panel.

I have used many other FTP softwares before. Nothing compares to Filezilla yet. Give it a try, my dear web folks!

Caveman Blogger

For IE, this doctype or similar one is needed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If you use onmouseover+onmouseout to change the style using the method I mentioned before could be painful.

I came across a method which is code saving:- use TR:hover.

First I have this CSS declared:

tr.rowname:hover { background-color: #FF8888; color: #FFF; }

And I used it in HTML:

<tr bgcolor=#FFF1F1 class=rowname><td>blah blah blah</td></tr>

This is so cool as I save a lots of trouble defining onmouseover, onmouseout, ...

Caveman Blogger

If you have a DIV and you don't specify the width, the DIV won't show up ever until you specify the width.

I have tried the same thing on Firefox and Safari, they are both able to show the DIV without having to specify the width of the DIV.

Caveman Blogger

From HTML side:

<img src="/cgi-bin/myimage">

From PERL side (myimage):

#!/usr/local/bin/perl

print "Content-type: image/gif\n\n";

$pic[0] = "image0.gif";
$pic[1] = "image1.gif";
$pic[2] = "image2.gif";

$rndm = int(rand()*3);

open(PIC, "./../image/$pic[$rndm]");
binmode(PIC);
binmode(STDOUT);

while (<PIC>) {
print $_;
}
close(PIC);

This is neat. Seldom a programmer reveals this simple but neat secret.

Caveman Blogger

When you reach the location of your HTML that you need to display an randomized image, you can use these codes as a reference:

<script language="javascript">


Note that you need to use the Math.random() function to generate random numbers from 0 to 1 (exclusive). Then you need to multiply the random fraction number to the maximum random number you want plus 1. You then use Math.floor() to round it up to the closest integer number.

Here we go!

Caveman Blogger

Have you ever encountered a situation that you need to set a cookie with a javascript variable added to a cookie? But you cannot use "+" in your cookie assignment?

Here is where the javascript eval() comes into play:

function assignfruit(type) {
eval('document.cookie = "fruit='+ type +';"');
}

Since you cannot do this: document.cookie = "fruit="+ type +";" or this: document.cookie = 'fruit='+ type +';', you need to use eval().

Something I found out and I think it is useful to beginners to understand eval().

Caveman Blogger

This corresponds with the previous post:

For Pull-Down Selection:

document.docname.variablename.selectedIndex

// Replace docname with your document name and variablename with your selection variable name such as country. The selectedIndex starts from 0 which is the first item in your pull down selection list.

For Radio Selection:

document.docname.variablename[index].checked

// If selected, this notation will become 1. The index starts from 0. If your radio selections have two items, the first one is 0 and the second item is 1.

For Checkbox Selection:

document.docname.variablename.checked

// If checked, this expression will become 1.

Walla!

Caveman Blogger

This corresponds with the previous post:

For Pull-Down Selection:

if ($form_data{'country'} eq "Australia") {
.
.
.
}

For Radio Selection:

if ($form_data{'type'} eq "orange") {
.
.
.
}

For Checkbox Selection:

if ($form_data{'type'} eq "on") {
.
.
.
}

Please check with the previous posts for the the input/selection HTML. Please also note that you need to have the legendary cgi-lib.pl library called before you can use $form_data{'---'} hash table that captures the query strings from your HTML document.

P.S.: Everything is quite straigtforward except the checkbox query string. If the checkbox is checked, the variable will be sent with a "on" data. Those that are not checked will not be defined at all in PERL.

Caveman Blogger

For Pull-Down Selection:

<select name=country>
<option>Argentina</option>
<option selected>Australia</option>
<option>Austria</option>
<option>Bahamas</option>
.
.
.
</select>

For Radio Selection:

Orange <input type=radio name=type value=apple checked> Apple <input type=radio name=type value=orange>

For Checkbox Selection:

<input type=checkbox name=type checked>

Coming next, how to detect those selections in PERL-CGI script...

Caveman Blogger

Ever encounter this problem?

The alignment of your image and the adjacent text seem hard to be aligned. The text is always lower than the lowest part of the image. No matter how you adjust the CSS of the <img>, nothing works.

There is a simple solution to this:

<Table><TR><TD><img src="/image/but1.gif"></TD><TD><a href="[http_address]">Click if you need to click</a></TD></TR></Table>

Changed from the common mistake of mixing image with text next to each other:

<img src="/image/but1.gif"><a href="[http_address]"> Click if you need to click</a>

All you need to do is just to make a table out of it. Separate the image and text and put them into separate table data columns. Problem solved. If you need to further align the text, you can always use valign to adjust the vertical alignment of the text. Anyway, the TD height adjustment won't help as the TDs share the same height unless you create another table inside the TD.

Simple problem. Simple solution but hard to catch.

Caveman Blogger

This is the most common problem that a web developer faces throughout his or her career. It is the table problem. Why is the text not aligned? Why is the image glued to the other end instead being centered? These are the common questions in mind especially when you have many layers of tables stacked up to each other.

There is a easy fix to this. COLOR IT!

But RULE#1 before this. Make a backup copy. When you have a copy backed up, you dare to do any experiment with it. Usually I will purposely do these:

<table bgcolor=red>...
or
<tr bgcolor=green>...
or
<td bgcolor=orange>...

You will see very clearly how your table or table row or table data behave in the browser. I usually run these experiments with IE, Firefox as well as Safari. However, it also depends on your DOCTYPE. Different DOCTYPE has different specification.

COLOR it! My friend. This is crucial especially when you are playing with WIDTH=100% game.

Caveman Blogger

It is just a trick I learned recently to double underline the grand total in a shopping cart.

Actually there is no direct solution to this.

The trick is to combine both conventional <u> and CSS to perform the trick.

Here are the codes:

<table><tr><td style="border-bottom: 1px double #000;"><u>underline this</u><td><tr></table>

Yes, the double needs to be there and so is <u>. Make sure your <td> is as narrow as possible or the line at the bottom will look much longer.

Labels

Sunday, February 28, 2010

Saturday, February 27, 2010

Friday, February 26, 2010

Thursday, February 25, 2010

Wednesday, February 24, 2010

Tuesday, February 23, 2010

Monday, February 22, 2010

Sunday, February 21, 2010

Saturday, February 20, 2010

Friday, February 19, 2010

Thursday, February 18, 2010

Wednesday, February 17, 2010

Tuesday, February 16, 2010

Monday, February 15, 2010

Sunday, February 14, 2010

Saturday, February 13, 2010

Friday, February 12, 2010

Thursday, February 11, 2010

Wednesday, February 10, 2010

Tuesday, February 9, 2010

Monday, February 8, 2010

Sunday, February 7, 2010

Saturday, February 6, 2010

Friday, February 5, 2010

Thursday, February 4, 2010

Wednesday, February 3, 2010

Tuesday, February 2, 2010

Monday, February 1, 2010