Jul

25

Eternally Up To Date Copyrights

I can't tell you how many times, both personally and professionally, I've come across web sites that have out of date copyright dates. A living, breathing, up to date site should have a current copyright date somewhere on the page, usually in the footer. Changing the year is easy enough if it's static, but it's one of those things you have to remember to do (and you have to know how to do it). If your code isn't modularized (that is, if every page has the copyright date hard coded), then having to change these dates each year could be a very laborious process, even if you're savvy enough to use a global find and replace.

Why should you even have to make this update by hand? The web page should know that the copyright year is always the current year. There are a couple of ways to do this, depending on what you have available on your web server.

Concept

The concept behind this technique is very simple. You simple replace the year with a dynamically written number pulled from the supporting language's date functions. Here is the static code that we will start with:

<p>Copyright &#169;2007 Your Web Site</p>

By the way, &#169; is the © symbol.

Client-side Code Method

If you don't have any access to a dynamic server-side technology such as PHP, Java, Python, Perl, .NET, or some other programming language, then you will need to use Javascript. Here's an example of generating the year dynamically with client-side Javascript:

<p>Copyright &#169;
<script type="text/javascript">
    var date = new Date();
    document.write(date.getFullYear());
</script>
Your Web Site</p>

The downside to this method is that, since the date is rendered by the browser, it is dependent upon the client's environment. If the user has Javascript disabled or if there is just some other unpredictable variable in the client's browser then the copyright year will be completely missing rather than just a year or two out of date. The other problem that arises is this: if the client's computer has the year set to 1963, then the copyright date on the web page will appear as 1963.

Server-side Code Method

If you have the ability to utilize a server-side technology, such as PHP, then you should. This method is preferred because you control the behavior and the date is written to the client as plain text. That is, it is rendered on the server and then streamed to the client as plain text. Here's an example in PHP of server-side dynamic copyright year text:

<p>Copyright &#169;<?php echo date('Y'); ?> Your Web Site</p>

I could list out a dozen examples of how to dynamically generate the year, but I would probably end up leaving out the specific language that you are looking for. You can use this technique with any language. Yes, I know this isn't a ground-breaking technique, it's just printing the year, but I've seen enough examples of people with out of date copyright years that I thought this was a worthwhile tip to share. Good luck.

Jul

13

Spam-proof MailTo Links

I like providing links for e-mail on web pages, but I hate that spam-bots scrape sites looking for e-mail addresses linked in the usual manner. There are many hacks to try to avoid spam-bots

The Cander Method Version 1 (AKA: "Make The User Do The Work")

Named for a friend that I learned this from, one way to avoid this is to use ineffective links that require a person to modify address before sending it. Here's an example:

<a href="someuser_AT_somedomain_DOT_com">someuser_AT_somedomain_DOT_com</a>

…which appears as…

someuser_AT_somedomain_DOT_com

While this isn't spam-proof, it's spam-resistant. However, as I said, the user would then have to replace _AT_ with @ and _DOT_ with . in order for the e-mail address to be valid.

The Cander Method Version 2 (AKA: "Promiscuous Links, Strong Immune System")

The theory behind this method is "ah, screw it". Well, kinda. This method, also gleamed from the same friend, employs a standard mailto link that is completely vulnerable to spam-bots. Rather than try to trick spam-bots, you just resign yourself to the fact that spam is part of life and it's more important provide users with a good link. The spam protection is then handled by a good spam filter or by redirecting all your e-mail to a Gmail account, which is famously known for it's fantastic spam filtering. While I understand this approach, I still think that a good offense is the best defense.

The Corporate Method

Form e-mail is also a good option if your server supports it. That is, you can setup a script to take text from a standard HTML form and submit it via e-mail to you. This requires a bit more code and monkeying with the server to make sure that the web server is up and functioning and some web hosts may not even allow for this.

The Script-Redirect Method

Another method that I ran across (again, compiled from many sources and some original tinkering) is to provide a redirect that prevents spam-bots from scraping the address. The downside to this method is that you don't display the text of the e-mail address. The upside of this method is that the link works as-is and the user doesn't have to clean up the address before sending the e-mail. Here's how it works:

<a href="mailto.php?u=someuser&d=somedomain.com"
    onclick="target='_blank';"
    onmouseover="this.style.cursor='pointer';">E-mail</a>

Incidentally, the onclick and onmouseover events provide an XHTML Strict method of opening a new window without using extensive Javascript.

Place the preceding link wherever you'd like the e-mail link to occur. You'll notice that the link points to another script called mailto.php and it has a couple query string parameters. The u parameter refers to the username in the e-mail address (everything before the @) and the d parameter refers to the host (everything after the @).

Now that we have the link setup, we need the script that we are actually calling: mailto.php. This is the really easy part. It's one single line that pulls the query string parameters, puts them into standard e-mail address form, and redirects the browser to the mailto link. It's as simple as that. Here's the script for mailto.php:

<?php
    // pull values from query string and
    // redirect to a mailto link
    header("Location: mailto:$_GET[u]@$_GET[d]");
?>

While this may not fool all of the spam-bots out there, it should hopefully cut down on a significant bulk of spam that you might incur from posting a link to your e-mail address.

Jul

13

Make A File Dropbox For Quick Downloads

I frequently need to setup a quick and temporary link for file download either for myself or others, but I hate having to create a new page with links to files that are only going to exist for a few hours. Apache and other web servers often provide this functionality with directory browsing, but I usually want directory browsing disabled or the server that I'm using (that isn't mine) has directory browsing disabled and I can't turn it on.

I wrote (and by "wrote", I mean "wrote some, borrowed some from all over the web–yes, I know I'm not the first to write a script like this) this script to parse a directory and display links for all the files in that folder.

Take the script below and either create a folder called 'files' in the same directory as this file or you can modify the $filesDir variable to point to the location that you'd like to place your temporary downloads. For example, on my server, I have a folder under the root called downloads (http://myserver.com/downloads/) and I place this script in the folder and name it index.php. Within downloads/, I have another folder called files where I place the files for download.

If you want the files in the same folder as the script (that is, you want them all at the same level), I've included a check before the links are displayed to make sure that it's not displaying index.php. If you don't call this script index.php, you'll need to modify that piece of the code.

Let me know if you have any questions or comments. As with the usual disclaimer, I'm sure there are enhancements that can be made to this for both performance and security and the code comes as-is and without warranty. :)

<?xml version="1.0" encoding="iso-8858-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Download Dropbox</title>
</head>
<body>
    <h1>Download Dropbox</h1>
    <hr />
    <?php
        $filesDir = './files/'; // where you intend to drop files
                                // relative to this page
        $files = array();
        $dir = opendir($filesDir);

        // get the list of files
        while(($file = readdir($dir)) !== false)
        {
            // ignore directories and special files that
            // we don't care about
            // .DS_Store is a Mac system file that I
            // don't want displayed
            if($file !== '.' && $file !== '..' && !is_dir($file) &&
                ($file !== '.DS_Store'))
            {
                $files[] = $file;
            } // end if test
        } // end while loop
        closedir($dir);

        if(count($files) < 1)
        {
            echo "<p>There were no files found.</p>n";
        } // end if test
        else
        {
            // display links for download
            natcasesort($files); // sort files
            echo "<ul>n";

            for($i = 0; $i < count($files); $i++)
            {
                if($files[$i] != "index.php")
                {
                    echo "<li><a href=\"files/" . $files[$i] . "\">" .
                    $files[$i] . "</a></li>n";
                } // end if test
            } // end for loop

            echo "</ul>n";
        } // end else test
    ?>
</body>

Jul

6

Turn Blogger Into Your Own Blog

Recently I was working with a client who wanted a blog for their site but they didn't have the money (and I didn't have the time) for a completely one-off solution. The initially proposed solution was to simply make the "Blog" link point to a Blogger (which was purchased by Google a while back, if you missed it) site for the client. I didn't feel very comfortable with this idea because I didn't think it would look very professional to link to a free blogging site, so I started out by using the template editor that Blogger provides to mimic the client's site. While this was a better solution, it still didn't seem professional enough. The site was still a Blogger site; the URL was Blogger's and I couldn't exactly match the look-and-feel of the client's site.

This is when I remembered that Blogger (as many with many other sites) provides an XML-based RSS feed of each individual blog. Why not consume the RSS feed and redisplay the content on the client's site?! This technique allowed me to utilize the blog publishing and management tools from Blogger while full integrating the blog into the client's site. Now, instead of linking to an external site for the blog, I would just create a page that scraped the RSS feed, parsed the XML, iterated over the entries, and displayed the content.

Now for the meat. First, you need to create a Blogger account (if you have a Google/Gmail/G-anything account, that will work), then create a blog under that account and enter some dummy posts. Make sure that your blog has site feeds enabled; consult the Blogger help if you can't figure this out. Once you have that setup, your blog's feed can be found at http://someblog.blogspot.com/feeds/posts/default?alt=rss where "someblog" is the name of your blog in your URL. Also, you'll notice that I've appended ?alt=rss to the link. This is mentioned in the Blogger documentation in reference to forcing the feed into RSS format rather than Atom.

The following PHP code example shows a function that parses an RSS feed into a 2D array for display within your site. Note: the simplexml_load_file() function is part of PHP5, so you'll need to make sure that your server is running PHP5 if you want to use this code directly.

<?php
    function getBlogPosts($blogFeedURL)
    {
        $xml = simplexml_load_file($blogFeedURL);
        $posts = array();

        if($xml)
        {
            // get all posts
            foreach($xml->channel->item as $post)
            {
                $posts[] = array('title' => $post->title,
                                    'pubDate' => $post->pubDate,
                                    'description' => $post->description);
            } // end foreach loop
        } // end if test
        return $posts;
    } // end getBlogPosts function
?>

This next block of code utilizes this function and iterates over the 2D array to display the blogs. Also, I've incorporated the concept of paging where you can specify the number of posts to display at a given time and paging links are found at the top and bottom of each page.

<?php
    global $blogFeedURL; // defined globally, URL to RSS feed
    global $blogPostsPerPage; // defined globally, used for paging
    $posts = getBlogPosts($blogFeedURL);

    if(count($posts) < 1)
    {
        ?>
            <p>There are no posts currently available.</p>
        <?php
    } // end if test
    else
    {
        // get paging index from query string
        $firstPost = (array_key_exists('first', $_GET) &&
                                is_numeric($_GET['first'])) ?
                                $_GET['first'] : 0;

        // if first post index plus offset is more than total posts,
        // set last post to total number of posts
        $lastPost = (($firstPost + $blogPostsPerPage) > count($posts)) ?
                                count($posts) : ($firstPost + $blogPostsPerPage);

        // previous page link
        if($firstPost > 0)
        {
            $first = (($firstPost - $blogPostsPerPage) < 0) ?
                                0 : ($firstPost - $blogPostsPerPage);
            ?>
                <p><a href="<?php echo $_SERVER['PHP_SELF'] . '?first=' .
                                $first; ?>">Previous Page</a></p>
            <?php
        } // end if test

        // next page link
        if($lastPost < count($posts))
        {
            $first = (($firstPost + $blogPostsPerPage) > count($posts)) ?
                                count($posts) : ($firstPost + $blogPostsPerPage);
            ?>
                <p><a href="<?php echo $_SERVER['PHP_SELF'] . '?first=' .
                                $first; ?>">Next Page</a></p>
            <?php
        } // end if test

        // display only those for this page
        for($i = $firstPost; $i < $lastPost; $i++)
        {
            $title = $posts[$i]['title'];
            $pubDate = date('D, M j, Y g:i A', strtotime($posts[$i]['pubDate']));
            $description = $posts[$i]['description'];
        ?>
            <div>
                <p><?php echo $title; ?></p>
                <p><?php echo $pubDate; ?></p>
                <p><?php echo $description; ?></p>
            </div>
        <?php
        } // end foreach loop

        // previous page link
        if($firstPost > 0)
        {
            $first = (($firstPost - $blogPostsPerPage) < 0) ?
                                0 : ($firstPost - $blogPostsPerPage);
            ?>
                <p><a href="<?php echo $_SERVER['PHP_SELF'] . '?first=' .
                                $first; ?>">Previous Page</a></p>
            <?php
        } // end if test

        // next page link
        if($lastPost < count($posts))
        {
            $first = (($firstPost + $blogPostsPerPage) > count($posts)) ?
                                count($posts) : ($firstPost + $blogPostsPerPage);
            ?>
                <p><a href="<?php echo $_SERVER['PHP_SELF'] . '?first=' .
                                $first; ?>">Next Page</a></p>
            <?php
        } // end if test
    } // end else test
?>

As I said earlier, the great thing about this method is that someone else (Google and Blogger) did all the hard work for you. The downside is that you have to login to Blogger to post content, but I think that's a small price to pay for the amount of work that is already done for you. You get the layout-free content and you can style it yourself and embed it in your own site as you see fit. Alternately, you could of course do this in Python, Java, .Net, or any language that you can make an HTTP call and then parse the XML.

As for the usual caveats, I'm sure there are ways to improve the security, add layers of error checking, use objects instead of a 2D array, so feel free to modify as you wish. This is where the "This software is presented as-is and without warranty…" bit goes.