Archive for March, 2006
Marc-Antoine Ross
March 30th, 2006
I am always searching and searching for the same shell commands. I don’t use them often enough to remember them. Here’s one to backup your whole site directory into one archive file:
tar -cvzf ~/$(date ’+%F_%H%I%S%P’).tgz ~/domain.com/
This will backup the whole folder “domain.com” into an archive. The filename will include a timestamp, which is quite useful!
Marc-Antoine Ross
March 23rd, 2006
You want me to bring you something back from my current or next trip? Just leave a comment with your request and I will try to get it for you!
Cheers!
Marc-Antoine Ross
March 17th, 2006
Here is a link to a very good cheat sheet on Prototype by Jonathan Snook: Snook.ca.
Mario Laflamme
March 15th, 2006
Here is a list of different valid XHTML bases which can be used. The first one is the one that I use most of the time, but the others can be useful in certain cases.
Please note that the file “/scripts/links.js” used in the XHTML bases contains the function which allows to open links in a new window as explains it the article “XHTML: Open a link in a new window“.
XHTML 1.0 Strict with ISO-8859-1 encoding
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title></title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript”
src=”/scripts/links.js”> </script>
<link rel=”stylesheet” href=”/styles/styles.css” />
</head>
<body>
</body>
</html>
XHTML 1.0 Transitional with ISO-8859-1 encoding
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title></title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript”
src=”/scripts/links.js”> </script>
<link rel=”stylesheet” href=”/styles/styles.css” />
</head>
<body>
</body>
</html>
XHTML 1.0 Frameset with ISO-8859-1 encoding
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Frameset//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title></title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
</head>
<frameset rows=”100,*”>
<frame src=”header.html” />
<frame src=”content.html” />
<noframes>
<body>
<p>Warning! Your navigator doesn’t
support frames.</p>
</body>
</noframes>
</frameset>
</html>
Mario Laflamme
March 15th, 2006
Even if I advocate the use of the XHTML, the HTML can be useful in certain cases. Then, here is a list of valid HTML bases which can be used.
HTML 4.01 Strict with ISO-8859-1 encoding
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01//EN”
”http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title></title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″>
<link rel=”stylesheet” href=”/styles/styles.css”>
</head>
<body>
</body>
</html>
HTML 4.01 Transitional with ISO-8859-1 encoding
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”
”http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″>
<link rel=”stylesheet” href=”/styles/styles.css”>
</head>
<body>
</body>
</html>
HTML 4.01 Frameset with ISO-8859-1 encoding
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Frameset//EN”
”http://www.w3.org/TR/html4/frameset.dtd”>
<html>
<head>
<title></title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″>
</head>
<frameset rows=”100,*”>
<frame src=”header.html”>
<frame src=”content.html”>
<noframes>
<body>
<p>Warning! Your navigator doesn’t
support frames.</p>
</body>
</noframes>
</frameset>
</html>
Mario Laflamme
March 10th, 2006
The use of popups is very wide-spread, but most of the time they are not indexable. Nevertheless, there is a very simple way to conceive popups which can be crawled by the robots of search engines.
Demonstration
Insert the url of the popup in the href tag and insert the function which opens the popup in the onclick tag followed by the return false; command as in the following example:
<a href=”example.html” onclick=”openPopup(this.href);return false;”>popup example</a>
Explanations
This way allows the robots to follow the link in the href tag while opening the link in a popup with the openPopup() function which gets back the content of the href tag.
Mario Laflamme
March 9th, 2006
Sure, you can to use the tag target=”_blank” to open a link in a new window with XHTML, but this tag is not valid. A simple and effective alternative is to insert the following JavaScript function in your pages and to add the tag rel=”external” to the appropriate links.
<script type=”text/javascript” language=”JavaScript”>
function externalLinks() {
if (!document.getElementsByTagName) {
return;
}
var anchors = document.getElementsByTagName(”a”);
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute(”href”) &&
anchor.getAttribute(”rel”) == ”external”) {
anchor.target = ”_blank”;
}
}
}
window.onload = externalLinks;
</script>
Marc-Antoine Ross
March 8th, 2006
This is something that can drive me crazy quite quickly. Everybody talked about Google Analytics and all but I’ve been using Urchin for a client and I wasn’t too curious to create a Google Analytics account yet… but now I need one and guess what? It is now “Invitation only”. Please subscribe and we will send you a code when we open more room for you. I want it noooooow! Am I the only geek on earth that can’t wait more than 10 minutes for something?
Reading in a few forums, it varies from a few days to a few months… Anybody has a hint?
Mario Laflamme
March 7th, 2006
I am convinced that most of you have already faced the problem caused by the rollovers with the delay of downloading the images. Several scripts exist and some work better than the others but the following technique is my favorite with its lightness… and even its accessibility!
Demonstration
First of all, merge the image OUT and the image OVER in a single image by placing them the one above the other one as the following image:

Then, insert the following HTML / XHTML code in your page:
<a href=”http://www.devtaxi.com/” class=”taxi”>Taxi</a>
Finally, insert the following CSS code in your style sheet.
a.taxi {
display: block;
text-indent: -10000px;
text-decoration: none;
width: 110px;
height: 73px;
background: url(taxi.gif) 0 -68px no-repeat;
}
a.taxi:hover {
background: url(taxi.gif) 0 0 no-repeat;
}
Here is the result:
Taxi
Explanations
All the control is behind the background property which allows moving the image… which is half veiled with the height property which allows hiding a part of it. For its part, the text-indent property allows hiding the text, what turns out to be a better alternative than the image with its alt tag.
You can use this technique and simple modifications to achieve different results… among which a link like this one.
Rico Nagtalon
March 6th, 2006
I consider it an honor to be part of the DevTaxi team. Marc and Mario have been in web development far longer than I have (they were doing server-side scripting when I was still ecstatic from having learned JavaScript image-swapping). Read what they write! Between the two of them, they have close to 20 years of development experience and have come up with some pretty spiffy stuff. I feel privileged to be writing side-by-side with such seasoned coders.
One thing we definitely share is a passion for web development. If you find yourself on this site, then most probably you share that passion too. And if you’re a relative beginner like myself, keep that eagerness to learn new stuff burning! It will take you a long way. I know that for a fact; I’ve already learned a lot from Marc and Mario.
We hope you find your time here at DevTaxi productive. We will do our best to be as informative (and occasionally, entertaining) for you. And if you’re the relative beginner, I hope my articles will be as informative to you as Marc and Mario’s work is to me.
Ride the DevTaxi often! Don’t forget to sit back and enjoy the ride.
Previous Posts