This
is a collection of code patterns for some of the common Internet programming
tasks which tend to repeat from time to time. When not singled out and
classified these patterns get easily lost in the bulk of an application-specific
code, and constant rewriting (and debugging) of them from scratch is a senseless
waste of time.
Normally
there are several ways to code the same logic, and some ways are better than
the other in terms or size, effectiveness, readability and ease of modification.
These criteria are rather fuzzy (except for the "size"), and are affected by personal
preferences. Yet, there seems to exist a certain common sense consensus
of what is "good" – like mnemonic names and labels, use of indentation, commenting,
etc.
This
selection is my attempt to collect the most usable of such "good" code patterns
into one document hyperlinked for the ease of use, and accessible from anywhere
and by anybody who might have interest in it. However, this selection
is not compiled for the Web only – rather it's my working reference
which I try to maintain as accurate and current as possible.
As such it inevitably will always lack an overall integrity and completeness,
yet it is still a rather useful tool that often saves time.
Most
of the tasks originated from a real-life experience of an Internet programmer.
Most of the solutions were coded and debugged in the process of practical
programming of various applications. Every pattern was checked to the
best of my competence, and as a rule was tested by a substantial time of repeated
usage. This is not to suggest that it is in any way guaranteed
to be error-free – you will be using any code you pick
from this selection entirely at your own risk, and will be completely
responsible yourself for any problems that might arise from this usage.
So when trying a code, please exercise the common sense precautions, and
test it most thoroughly yourself before applying it to anything
serious.
This
legal mantra been chanted, I want to mention that all error reports and any
comments about this code pattern selection are most welcome, and I'll try
to do my best to fix any known problem as quick as I'll be able to do this.
Note:
To maintain a proper formatting of this document some excessively long lines of code
have been split into parts (for a presentation purpose only). Those line split points
are indicated either by a light green highlighted space ""
(line splicing is optional), or by a light red highlighted space ""
(line splicing is required for code to be valid). Regardless of the sliced line
parts' indentation, line splicing should be done in such a way that first character of the
next line part follows immediately the corresponding split point indicator (highlighted space)
of the previous line part.
Below there's an example of "pure" redirection
(no content) page. It gets Refresh-ed with the delay
of 0 seconds (i.e., no delay), which
results in the immediate browser switching to the specified URL
http://www.davar.net/IT.
This is the real switching page from my web site
that serves as a switch from a short it.davar.net subdomain
entry to the actual index.htm page location at www.davar.net/IT.
Subdomains are organized differently at different web space providers
(I've tried few of them), and in most cases this redirection scheme
comes quite handy, providing a sort of common ground, and ensuring
that necessary changes are reduced to bare minimum when you move
web site from one provider to another.
If you want to display some content before actual
redirection, specify the appropriate delay (in seconds) sufficient
to view the content presented in the HTML BODY.
The following STYLE specification placed
within HTML HEAD (I prefer to place it at the very end
right before the </HEAD> tag) will result in link text
color turning Red, and getting highlighted with Light-Yellow when
mouse moves over it (according to specified COLOR and
BACKGROUND attributes). Any other appropriate color
names or numeric specifications can be used. The page you
are looking at has exactly this HOVER specification for
the A (Anchor) tag — move mouse
to the nearest link to see its effect (this was tested to work
with Firefox 1.5, Mozilla 1.7, Netscape 7.x, IE 6.x,
and Opera 7.x; classic Netscape 4.x doesn't support this
feature).
There is nothing special about using the entire
image as a link – just place the image description <IMG SRC=...>instead of the text between <A HREF=...>
and </A> tags as it is shown below.
Code above displays Flag image, which is here
a relative link to the entry page of Davar web site (try
clicking it or watch status bar as mouse moves over).
It is necessary to specify parameter BORDER=0
in order to get rid of otherwise default border of a link image,
the color of which is determined by LINK=... ALINK=...
VLINK=... parameters of the HTML text BODY tag (e.g.:
LINK=Blue ALINK=Fuchsia VLINK=Purple), or by the browser
defaults in the absence of these parameters.
Code above is almost identical to the previous
one with only one exception – border suppression parameter
BORDER=0 is omitted, which leads to image border
being displayed.
Specification of active areas
(links) within the image.
In order to specify active areas (links) within
the image it is necessary to determine characteristic points of
each area border in the coordinate system of pixels having the origin
(0,0) at the Top-Left corner of the image with Horizontal
coordinates (X) increasing from Left to Right and Vertical
coordinates (Y) increasing from Top to Bottom.
It makes sense to use an image manipulation system such as Adobe
Photoshop, which permits to overlay coordinate grid over the image
and thus determine required coordinates. Coordinates of
active areas within the image are used to create an image map
that associates each active area with the corresponding URL.
In the example below the image of the Flag is divided into two
distinct active areas of the blue star field and the rest of the
image. Two shapes are used to define those areas:
Rectangle – defined by coordinate pairs
of its Top-Left and Bottom-Right corners and
Polygon – defined by the list of coordinate
pairs of its vertices.
<!-- Calculation of Rectangle and Polygon definition coordinates (in pixels):
0 44 9
0 01 9
00 a-----+w-------x Rect: a - 00,00 Top-Left corner (coordinate origin)
¦ ¦¦ ¦ b - 40,30 Bottom-Right corner
30 +-----b¦ ¦
31 u------v ¦ Poly: u - 00,31 First coordinate (moving clockwise)
¦ ¦ v - 41,31
54 z--------------y w - 41,00
x - 99,00
y - 99,54
z - 00,54 Last coordinate (moving clockwise)
Rect: 00,00,40,30
Poly: 00,31,41,31,41,00,99,00,99,54,00,54 -->
<IMG SRC="../../USA-FLAG.GIF" TITLE="USA Flag" WIDTH=100 HEIGHT=55 BORDER=0 USEMAP="#Flag_Map">
<MAP NAME="Flag_Map">
<AREA SHAPE=Rect COORDS="00,00,40,30" HREF="../../index.htm">
<AREA SHAPE=Poly COORDS="00,31,41,31,41,00,99,00,99,54,00,54" HREF="../../ABOUT.HTM">
</MAP>
Code above displays Flag image, which has
a relative link to the entry page of Davar web site (index.htm)
from the blue star field and to "About" text (ABOUT.HTM) from
the rest of the image (try clicking those areas or watch
status bar as mouse moves over).
Another possible shape is a circle that is useful
when it is necessary to make active only a circular area within
the image (image by itself is always rectangular). Circle
is defined by three numbers: coordinate pair of its center and
radius.
Prepare several tiling background images and make
them all *.JPG (or all *.GIF). Let them be,
for example, PAPER1.JPG through
PAPER9.JPG — 9 of them total.
Write code to get an integer random number within the required
range (1 through 9 in our example):
Get random number in the range of [0,1]
Multiply it by the number of choices (9 in our example) to
change random number range to [0,9]
Get the floor value of the result — an integer
random number in the range of [0,9]
Get remainder of its division by the number of choices (9 in
our example) to change range to [0,8]
Add 1 to get a random integer exactly within the required
range of [1,9]
Use that number N
within document.write in the standard JavaScript setup
to generate BODY line with the BACKGROUND image
selected at random from 9 predefined images, making appropriate
adjustments to the directory structure (I keep all background
images in the home directory of my site so backgrounds
of all pages are related to it).
To see an example of how random page background
selection works go to the entry
page of this site and reload it several times (use [Reload]
button or [Ctrl]+[R]).
Selection of background image for the table is
almost identical – code the TABLE line the similar way the
BODY line is coded above.
Does this cartoon by David Horsey
looks painfully familiar? Have you ever wondered how this
annoying lowlife got your e-mail address? Are you willing
to take several simple steps to protect yourself from the flood
of junk?
E-mail address may get to spammers in many different ways.
Some of them are hard to control — indecent merchants sell e-mail
lists for profit, sloppy merchants loose them to hackers, etc.
But it looks like that the major source of e-mail lists comes
from the scavenger robots that "harvest" e-mail addresses directly
from the web. Your e-mail address can be retrieved from
news groups' postings and archives, and you are especially
vulnerable, if you are running a web site and have to place your
address there for the feedback.
The obvious way to hide e-mail address from scavenger
robots is to make it hard to recognize in the HTML text residing
on the web server. Client-side JavaScript offers a natural
and simple way to do this by splitting e-mail address into words
using variables, complemented with splitting mailto: tag
into separate characters. All those parts will be combined
only on the client side (by browser on your computer),
leaving scavenger robots that are busy sniffing web servers for
e-mail addresses without anything recognizable to grab.
In order to provide e-mail address in case JavaScript
is disabled it is possible to stuff it with some HTML tag that
will be ignored by the browser; empty SPAN tag serves
this purpose well (mailto: tag shouldn't be used without
JavaScript).
One possible use of this approach is shown below.
... please e-mail it to
<NOSCRIPT>
me (<FONT COLOR=Blue>VladV<SPAN>@</SPAN>verizon<SPAN>.</SPAN>net</FONT>)
</NOSCRIPT>
<SCRIPT LANGUAGE=JavaScript>
<!--
Id="VladV"
Pr="verizon"
Dm="net"
Ad="<A "+"HREF=\'"+"m"+"a"+"i"+"l"+"t"+"o"+":"+Id+"@"+Pr+"."+Dm+"'>me</A>"
document.write(Ad)
//-->
</SCRIPT>
as a file attachment...
With JavaScript enabled the code above will produce
phrase "please e-mail it to
as a file attachment"
with the word "me" clickable
for opening mail composer window and directly readable as e-mail
address in the window status bar when mouse moves over word
"me". With JavaScript disabled
it will produce e-mail address after word "me" that can be used
to cut it from here and paste into mail composer window.
Another possible use of this technique is an explicit
signature combined with the e-mail address.
With JavaScript enabled the code above will produce
the signature
that is clickable for opening mail
composer window and directly readable as e-mail address in the
window status bar when mouse moves over signature. With
JavaScript disabled it will produce e-mail address below signature
that can be used to cut it from here and paste into mail composer
window.
Of course these are cheep tricks good only to fool
scavenger robots which are most primitive, but that's what they
inevitably are. They have no other choice but to make them
simple to be able to search the vast ocean of the web. And
being scavengers, they look for an easy prey, so making your signatures
just one simple step less than easy to steal most likely will
protect you from the majority of these annoying pests.
Code above displays Flag image, which is here a relative link to the entry page of Davar web site (try clicking it or watch status bar as mouse moves over).