Archive for March, 2006

How to Backup a Website on Unix

Marc-Antoine Ross March 30th, 2006 Add comment

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!

What should I bring you back?

Marc-Antoine Ross March 23rd, 2006 5 comments

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!

Prototype Cheat Sheet

Marc-Antoine Ross March 17th, 2006 Add comment

Here is a link to a very good cheat sheet on Prototype by Jonathan Snook: Snook.ca.

XHTML bases

Mario Laflamme March 15th, 2006 Add comment

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>

HTML bases

Mario Laflamme March 15th, 2006 Add comment

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>

An indexable popup… it’s possible!

Mario Laflamme March 10th, 2006 1 comment

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.

XHTML: Open a link in a new window

Mario Laflamme March 9th, 2006 1 comment

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>

Google Analytics - the waiting has started!

Marc-Antoine Ross March 8th, 2006 3 comments

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?

An immediate rollover… with no delay!

Mario Laflamme March 7th, 2006 Add comment

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:

Taxi

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.

Here we go!

Rico Nagtalon March 6th, 2006 Add comment

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

Schedule

March 2006
M T W T F S S
    Apr »
 12345
6789101112
13141516171819
20212223242526
2728293031