mrrena

How to migrate mail from one Gmail account to another on Windows, including Chats

2011-10-30T17:43:00.000-07:00

This is the Microsoft Windows version of this article (though it contains screen shots from Mac). The Mac OSX version can be found here.

Recently at work, we got a new Gmail domain and had to switch from one Gmail account to another.

You can migrate your mail easily using POP3, but POP3 won't get your chats or preserve your labels. The superior solution is IMAP, even if it's a little more cumbersome. And even if you have already migrated using POP3, IMAP will still allow you to retrieve your chats and work for you on a tag-by-tag basis.

IMAP requires bit of a work-around—you must first fully download all your files to your machine, and only then can you migrate them back again into your new Gmail account.

Here's everything you need to get set up.

First, the downloads.

Download Mozilla Thunderbird and install on your machine.
Download and unzip the toIMAP files (we'll set these up later)

Now log in to your usual (old) Gmail account.

Then:

1. Click the gear icon in the upper-right corner and select Mail settings:

2. Click the Forwarding and POP/IMAP tab, scroll down to IMAP Access, and make sure it is turned on:

3. Click Labels and make sure that Chats and any other labels you want migrated are checked. (Note: If you already used the POP3 solution, you might want to limit only to Chats.)

4. Open Thunderbird, click Create a new account and use the address you want to pull the mail from, then click Continue:

Note: The wizard should smartly detect the proper settings; if not, you can click Manual config and enter the IMAP and SMTP settings shown below:

5. Click Create Account and let Thunderbird start downloading; this may take hours, and it goes without saying that the more mail you have, the longer the process will be. If you have to shut down for a while, to easily restart where you left off, just open Thunderbird, right-click, and click Get Messages in the context menu:

6. Log in to your new account and repeat steps 1 and 2 above for it. Make sure that you re-create any custom labels you used in your old account:

Now... go find something else to do for a few hours and come back to step 7 after Thunderbird (eventually) finishes.

7. Yay! Your e-mail finally downloaded! Rejoicing, right-click your account name, and click Settings (last option in the screen shot for step 5). Navigate to Server Settings, and copy the Local directory path at the bottom.

8. Open a new folder, and paste this address in the location bar. Keep this window open, as you'll need it for the following steps:

9. Go to Start > All Programs > Accessories > Notepad and start the program. Use it to open the toIMAP.cfg file in the toIMAP folder you downloaded to your Desktop. Make sure your configuration file is set up like the one below, subbing in your username and password:

{
     'host' : 'imap.googlemail.com',
     'user':'YOU@gmail.com',
     'password':'YOURPASSWORD',
     'ssl': True
}

10. Save the file and close it. Your configuration file is now set; all that is left is to run the file.

Go to your Windows Start menu and type cmd.exe in the search box, pressing ENTER. The Windows command-line prompt will open.

You'll need to be at the same level as the file; for Microsoft Vista, the path would be (where "YOU" is your username): C:\Users\YOU\Desktop\toIMAP. To do this, you'll need to change directories (cd) into the folder on your desktop:

cd C:\Users\YOU\Desktop\toIMAP

To run the uploader script, you'll use the following convention while still sitting at the level in step 9:

toIMAP.exe -m path_i_just_copied/FOLDER_NAME -f FOLDER_NAME

For example, if I want to upload the folder "admin stuff" (shown in step 8), I would type (surrounding my file path with quotation marks to bypass the space between "admin" and "stuff"):

toIMAP.exe -m "C:\Users\YOU\AppData\Roaming\Thunderbird\Profiles\76sexgps.default\ImapMail\imap.googlemail.com\admin stuff" -f "admin stuff"

Some Gmail flags like Starred may need to omit the -f "admin stuff" part.

To specify a different Gmail tag than the name of the Thunderbird folder, just pass -f the new name, making sure that the tag already exists in your new account per step 6.

For example, to move your chats, you will not be able to use the same "Chats" name for your tag as that is reserved by Google. You'll need to create a new tag in your new account—I used "Archived Chats"—then import using the additional -f flag:

toIMAP.exe -m "C:\Users\YOU\AppData\Roaming\Thunderbird\Profiles\76sexgps.default\ImapMail\imap.googlemail.com\[Gmail].sbd\Chats" -f "Archived Chats"

If your upload gets interrupted at any point, see the toIMAP directions on how to resume where you left off.

11. Repeat step 10 for as many folders as you need to migrate. Once you have gone through every folder you want backed up, you're done. Bliss is yours.

How to migrate mail from one Gmail account to another on Mac OSX, including Chats

2011-10-30T17:01:00.000-07:00

This is the Mac OSX version of this article. The Windows version can be found here.

Download the Mac edition of Mozilla Thunderbird and install on your machine.
Download and untar the toIMAP files (we'll set these up later)

Now log in to your usual (old) Gmail account.

Then:

1. Click the gear icon in the upper-right corner and select Mail settings:

2. Click the Forwarding and POP/IMAP tab, scroll down to IMAP Access, and make sure it is turned on:

3. Click Labels and make sure that Chats and any other labels you want migrated are checked. (Note: If you already used the POP3 solution, you might want to limit only to Chats.)

4. Open Thunderbird, click Create a new account and use the address you want to pull the mail from, then click Continue:

Note: The wizard should smartly detect the proper settings; if not, you can click Manual config and enter the IMAP and SMTP settings shown below:

6. Log in to your new account and repeat steps 1 and 2 above for it. Make sure that you re-create any custom labels you used in your old account:

Now... go find something else to do for a few hours and come back to step 7 after Thunderbird (eventually) finishes.

7. Yay! Your e-mail finally downloaded! Rejoicing, right-click your account name, and click Settings (last option shown in the screen shot for step 5). Navigate to Server Settings, and copy the Local directory path at the bottom.

8. Open Finder, and select Go > Go To Folder, then paste the path you just copied. Keep this window open, as you'll need it for the following steps:

9. Open a new terminal window and type the following lines on your Mac:

cd ~/Desktop/toIMAP
vim toIMAP.cfg
i

The "i" puts you in insert mode; make sure your configuration file is set up like the one below, subbing in your username and password:

{
     'host' : 'imap.googlemail.com',
     'user':'YOU@gmail.com',
     'password':'YOURPASSWORD',
     'ssl': True
}

Then press ESC to exit insert mode, and type:

:wq!

to write and quit (save and exit) your configuration file.

10. Your configuration file is set; now all that is left is to run the file. Unfortunately, it does not appear that the script is smart enough to parse all folders at once, so you'll need to parse a single folder at a time, hence the opened Finder window in step 8 so you can reference each of your mail folders.

To run the file, you'll use the following convention while still sitting at the level in step 9:

python toIMAP.py -m path_i_just_copied/FOLDER_NAME -f FOLDER_NAME

For example, if I want to upload the folder "admin stuff" (shown in step 8), I would type (using a backslash to escape the space between "admin" and "stuff"):

python toIMAP.py -m ~/Library/Thunderbird/Profiles/76sexgps.default/ImapMail/imap.googlemail.com/admin\ stuff -f "admin stuff"

Some Gmail flags like Starred may need to omit the -f "admin stuff" part.

To specify a different Gmail tag than the name of the Thunderbird folder, just pass -f the new name, making sure that the tag already exists in your new account per step 5.

For example, to move your chats, you will not be able to use the same "Chats" name for your tag as that is reserved by Google. You'll need to create a new tag in your new account—I used "Archived Chats"—then import using the additional -f flag:

python toIMAP.py -m ~/Library/Thunderbird/Profiles/76sexgps.default/ImapMail/imap.googlemail.com/[Gmail].sbd/Chats -f "Archived Chats"

PHP: Simple and Effective Way to Validate Email Addresses

2011-10-02T08:52:00.000-07:00

There are a number of regular expression solutions that have been written to test the validity of user-entered email addresses in PHP, some of them quite good. However, the most consistent and reliable way to validate email addresses takes advantage of PHP's built-in functionality.

filter_var does just what it says: it filters a variable using a variety of pre-defined filters (see the complete list of filters categorized by type); when you are validating email addresses, the filter you want is FILTER_VALIDATE_EMAIL:


if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
     exit('E-mail is not valid.');
}

Object doesn't support property or method 'createContextualFragment': Solved Internet Exporer 9 JavaScript Error

2011-08-27T09:57:00.000-07:00

Object doesn't support property or method 'createContextualFragment'

I use a rich-text editor on my site, and received this JavaScript error when trying to view it on IE9. An easy solution exists, however, which I found in a discussion thread; simply add the following lines of code at the top of your file or before the method where you use createContextualFragment which makes it available to the Range object via prototyping.


if ((typeof Range !== 'undefined') && !Range.prototype.createContextualFragment) {
    Range.prototype.createContextualFragment = function(html) {
        var frag = document.createDocumentFragment(); 
        var div = document.createElement('div');
        frag.appendChild(div);
        div.outerHTML = html;
        return frag;
    };
}

ChromePHP: Google Chrome's PHP Debugging "FirePHP" Extension

2011-08-12T22:48:00.000-07:00

Firebug is by far the most popular developer's tool for Firefox. FirePHP is another well-known add-on that allows for debugging PHP. Unquestionably great dev tools.

Google Chrome's built-in debugger is arguably parallel in features and performance to Firefox's Firebug. A lot of devs like using Chrome, but they don't know that they can also debug their PHP in it as well. An extension called ChromePHP bridges that gap.

Still haven't heard of any console debuggers for Python in Chrome. Looks like your only choice of a command-line debugger for now is Firefox/Firebug using FirePy, though it probably wouldn't take too much work to use Python's built-in logger to capture and log to the console via JavaScript.

JavaScript "Interactive Shell" (like Python) and Variable Hoisting

2011-07-04T10:41:00.000-07:00

When I first started working at IWS, there were two teams, the front-end or "Interface" team and the back-end or "Systems" team. I was part of the Interface team writing JavaScript; the Systems team wrote Python. We have now gone to a new approach in development, the two teams merging into a single "Engineering" team. Though most of us have written at least some code in both languages, we've been knee-deep in cross-training.

As part of our cross-training, the new Engineering team has been further divided into "squadrons" of three with team members consisting of both (previous) Python and JavaScript developers working together on small projects. My team includes two Python developers who know relatively little about JavaScript, so the responsibility of catching them up to speed has fallen on my shoulders.

In working with my two teammates, I mentioned the concept of "hoisting" where variables are lifted to the top of function blocks by the interpreter. I also shared with them the PyCon video PyCon 2011: Javascript For People Who Know Python which offers a decent overview of JavaScript for the Python-minded.

The PyCon video suggested two things I want to mention: first, it suggested that JavaScript's behavior has an undeserved reputation for being unpredictable, and second, in the Q&A there was a question asked about an interactive shell for JavaScript. I'll come back to the former in a moment; regarding the latter, the video didn't mention it, but did you know Firebug provides its own interactive shell?

To use Firebug's "command editor" (as it is called), click the arrow next to the Console tab, then select Command Editor from the context menu:

The command editor offers a side window on the right; simply type or paste raw JavaScript and click Run to see the results in the console:

If you don't use Firefox, the MooTools' team has created the excellent JSFiddle, which comes with virtually all the major JS frameworks on board (not just MooTools) and which can be embedded directly in web pages and/or created examples can be saved and linked to: very cool stuff.

Okay, so now that we have an interaction shell, a large step toward understanding the "unpredictable" nature of JavaScript is to understand fully how hoisting works. I've been writing JavaScript for years now, and I'll have to say that if I was given an exam with the two examples listed at the beginning of JavaScript Scoping and Hoisting, I would have failed miserably.

The reason I would have failed is because JavaScript is normally backward to Python or PHP. Defining a private (definition scoped) variable in Python involves nothing more than declaring it in an assignment. If you want it to be global, you have to explicitly use the global keyword, exactly as you do in PHP (except in PHP, a semi-colon is mandatory).

But in JavaScript, if you want a private variable scoped to the function, you have to use the var keyword. If you omit the var keyword, the variable becomes available globally—define a variable without the var keyword anywhere in a script, and it's instantly global. (That said, if you declare a variable using the var keyword outside any functions or classes, it is also global—we might say that it is "private to the global scope" because though it was declared with the var keyword, it was nevertheless defined globally, outside a containing function or class.)

With this var / no var knowledge in place, that's why I would have failed an exam with the two examples from the article above: I did not understand exactly how hoisting worked, and this articles does an excellent job of taking another level of unpredictability out of JavaScript's run-time behavior.

So, check out JavaScript Scoping and Hoisting and put the claims to the test: fire up Firebug's command editor or try out JSFiddle and verify for yourself that the results accord with the claims made, then read the rest of the article to see why the results are counter-intuitive, and, ultimately, highly predictable once you understand what's going on under the hood.

Strikethrough in Gmail: At Long Last! (For Chrome and Firefox)

2011-07-04T10:38:00.000-07:00

Gmail has come a long ways since I first started using it. However, one feature that is conspicuously absent is strikethrough text, which I often want to use because I'm proofreading someone else's writing and want to show the parts that I recommend deleting.

Now there is a way that I can have my cake and eat it too. If you're using Google Chrome, just click the Install button at Gmail Strikethrough Button. If you are using Firefox, first install the add-on Greasemonkey (if it isn't already installed), restart, then click Install.

Balabolka: A Free Text-To-Speech (TTS) Swiss Army Knife for Windows Operating Systems

2011-05-20T22:20:00.000-07:00

Let Your Computer Read to You

Typically when I'm home, I've set the company Mac aside and fallen back on a wide-screen Windows PC. I've gotten lazy as I've gotten older: I rather like having the computer read things to me I don't necessarily feel like reading myself. :)

Being read to is especially enjoyable when I'm either working on another task or I want to completely relax without having my eyes glued to the screen.

Enter Balabolka (Russian for "chatterer"), the free Windows text-to-speech (TTS) engine.

Balabolka is easy to use, and works with any TTS voice currently installed on your system (my current preference being "VW Kate"), and the documentation points you to additional voices you can download free of charge.

It supports a range of reading options including text-based documents of assorted types, pasted text, or the contents of the clipboard.

Balabolka has all the features you'd expect without getting carried off to bloat-land. Like most quality software, a lot of the best things about it are its most basic.

Two bread-and-butter features I needed that work especially well include the ability to save MP3s* and to "train" the dictionary to correct mispronunciations.

Click image to enlarge

* In addition to MP3, Balabolka supports seven other file export formats: WAV, OGG, WMA, MP4, M4A, M4B, and AWB.

It also comes with the ability to save ID3 meta information to MP3s (though since I've been using Balabolka to record chapters in audio books, I prefer to bulk edit this info using another first-rate freeware program called Tag Scanner featured in Best Free MP3 Tag Editor).

Other useful features are the ability to have multiple documents open displayed as tabs along the top or bottom (your choice set in Options -> Settings) and the ability to use context menus while Balabolka is reading (both pictured in the screen shot shown above).

Balabolka is an all-around useful program that works well and is easy to use, and it comes in a portable version as well if you want to stick it on a USB drive and go. Just grab yourself a free copy today. Cheers! :)

How to Minify HTML using PHP and Minify (including final HTML output of PHP files)

2011-02-26T13:52:00.000-08:00

Full disclaimer: I did not actually implement this method in the project where I had it set up. I explain why below.

Before Doing Anything Else, Gzip Your Pages!

The first line of defense in reducing the payload of an HTML page is to gzip, or compress, your files. Make sure you have taken that step first if you haven't before doing anything else mentioned here, as that will provide the biggest pay-off.

Benchmark Your Speed, Before and After

I said I didn't implement this method on the particular project I was working on: often after your pages are gzipped, the benefits you get from further compression are either negligible or actually decrease load speed, the very thing you're hoping to improve.

Therefore, testing the speed of your pages before and after minification is advised: there are several free, online solutions available, and I happened to be using Webwait, which I liked because it is simple, does not require registration, and does not place restrictions.

In my case, results revealed that I was actually suffering a slight penalty in load time when stripping whitespace. That said, I have a writing site that has massive HTML pages, and when I have time, I will likely try it again there: I suspect that for very large files, minification by PHP before page load would provide a benefit.

Enough preamble.

Whitespace Removal: Basic Steps

There are several steps you need to take to set it up and get it working.

PHP Check:

First, is PHP already being used to render your page? If so, you're good to go as is—skip this paragraph. If not, does the page have an "htm," "html", or "shtml" file extension and does that extension matter? If the answer to the second question is no, just change your file extension to "php" and if your web service provides PHP you should be good. If the file extension does matter and you're hosted on an Apache server, take a look at Step 4 here on how to give PHP control of rendering your pages.

Note: If your extension is "shtml" and you currently make full use of server-side includes (SSI), you will need to reconfigure your pages to use PHP for the same task or else find a different solution. The beauty is, PHP can do everything Apache's support of SSI can and more.

Basic PHP Function with Associated "Gotchas" Explained:

Now we need to write a PHP function, so let's create a new file called compress_html.php that we include on all our pages we want to minify. Open the IDE or text editor of your choice and create this new file.

Now let's type a simple function.

<?php

//This function is probably too simple to use: It can bite.

function replace_tabs_newlines($content) {

    return preg_replace('(\r|\n|\t)', '', $content);

}

?>

A very simple function like this that strips newline characters and tabs might be all you'd need. The danger with this approach though happens when your site includes any inline JavaScript or CDATA that uses single-line comments (double slashes) or any pre-filled textareas that need to have newline characters for human readability. For example...

<script type="text/javascript">

//click event

myFormElement.onclick = function() {

     this.submit();

};

</script>

...our simple PHP function would cause all the JavaScript below the "click event" comment to fail, because it's just stripping newlines and tabs from the entire HTML page indiscriminately. Once the document gets parsed by the browser, as far as the interpreter is concerned, without the newlines the script tag contains nothing but a big, long comment: //click eventmyFormElement.onclick = function() {this.submit();};. That means, of course, that your click event just died a horrid death.

And if you have any textareas on your page with text already included in them, you'll also see just one big, long string. Probably not what you want.

Wrapper Function Using Minify:

My approach was to use Minify's little-documented and still-experimental HTML minifier instead. Simply download Minify, and check out this page on getting it set up and running.

Once Minify's in place, here's the new and improved, as before assumed to be saved to a file named compress_html.php; there's still nothing exotic about our now wrapper function, and if you know PHP, you could probably write a better one (and if you do, please post it here and share with the rest of us), but this one will at least get your foot through the door.

<?php

function replace_tabs_newlines($content) {

    require_once 'min/lib/Minify/HTML.php';

    require_once 'min/lib/Minify/CSS.php';

    require_once 'min/lib/JSMin.php';

    $content = Minify_HTML::minify($content, array(

        'cssMinifier' => array('Minify_CSS', 'minify'),

        'jsMinifier' => array('JSMin', 'minify')

    ));

    return $content;

}

?>

With some sort of callback method in place (such as the one above using Minify), you've now ensured that JavaScript and CSS at least should get handled correctly.

Serving Minified HTML on a Platter:

Now, simply include in the very top line of the PHP or HTML page you want to minify the following code, which includes the file that contains our replace_tabs_newlines function and calls ob_start:

<?php

//includes are relative to the including file: this example

//assumes compress_html.php lives at the same directory level

//as the file in which you'll include these lines

include('compress_html.php'); 

ob_start('replace_tabs_newlines');

?>

ob_start tells PHP to output any file contents to its internal memory buffer rather than the screen (think "o.utput b.uffering start"—you are turning on output buffering). The "replace_tabs_newlines" tells ob_start to send the raw output from the buffer through the function we just wrote and included in a separate file. Notice the quotation marks—single or double doesn't matter: ob_start expects the function reference to be a string.

Then, at the very bottom of the file after all other code and markup, include the following:

<?php

ob_end_flush();

?>

This does just what it says: it ends, or turns back off, output buffering, then flushes the contents previously held in the buffer either to the screen (if ob_start is passed no callback method) or through "replace_tabs_newlines" (or any other callback method, if one is specified).

Final Check:

View your source code, and you should see that white space and newlines * were stripped before the page was rendered.

That's it! Make sure to test your page speed before and after: Webwait or however. If you are seeing any performance increase, go for it! :)

Update on Getting a Totally Blank Output Page

I host through 1&1, and ran into a caveat when testing this on my writing site (which incidentally did improve speed performance for the large pages): I had to edit the file min/lib/Minify/CSS.php, taking out the three references to Minify in the require_once statements:


//edits made to "min/lib/Minify/CSS.php"



public static function minify($css, $options = array()) 

    {

        require_once 'CSS/Compressor.php';//removed "Minify/" from the front

        if (isset($options['preserveComments']) 

            && !$options['preserveComments']) {

            $css = Minify_CSS_Compressor::process($css, $options);

        } else {

            require_once 'CommentPreserver.php';//removed "Minify/" from the front

            $css = Minify_CommentPreserver::process(

                $css

                ,array('Minify_CSS_Compressor', 'process')

                ,array($options)

            );

        }

        if (! isset($options['currentDir']) && ! isset($options['prependRelativePath'])) {

            return $css;

        }

        require_once 'CSS/UriRewriter.php';//removed "Minify/" from the front

        if (isset($options['currentDir'])) {

            return Minify_CSS_UriRewriter::rewrite(

                $css

                ,$options['currentDir']

                ,isset($options['docRoot']) ? $options['docRoot'] : $_SERVER['DOCUMENT_ROOT']

                ,isset($options['symlinks']) ? $options['symlinks'] : array()

            );  

        } else {

            return Minify_CSS_UriRewriter::prepend(

                $css

                ,$options['prependRelativePath']

            );

        }

    }

Note that (a) I am using the Minify library a directory level deeper (/some_dir/min), and (b) I only ran into problems when including it in files that lived in directories deeper than root, not at the root level itself.

However, I suspect that even if (a) were not an issue, (b) would probably still apply, and since CSS.php physically lives in the Minify directory, there should be no reason that directory should have to be specified at the front of the require_once path anyway, as includes are relative to the including file.

I can also verify that modifying this file in this way works equally well in root as it does any number of directory levels deeper.

* Minify does not necessarily strip all newlines depending on its heuristics and your particular page. If you can be assured that stripping all newlines and tabs will have no effect on your particular setup, you can replace "return $content;" with the return found in the otherwise too-simple first example. Minify will have safely stripped all comments from the CSS and JS and you'll be stripping any whitespace it "missed," but you've still got any pre-populated textareas to consider, inputs Minify knows to leave well enough alone.

Simple Class-Based JavaScript Fade Animation: An Object-Oriented Reworking

2010-09-30T20:32:00.000-07:00

Simple Object-Oriented Fade Animation

Normally, I'd just use MooTools for fade animations, but a long-time client wanted a simple, one-time popup that notified her patients that her doctor's office had moved—a temporary courtesy to be removed in a few months.

To make the custom popup just a little nicer, I wanted a simple fade effect without the extra framework code. Of course, I could have just copied and pasted the methods in MooTools, but I was feeling creative and shopped around to see if any native JS solutions existed.

I found a solution I liked, though it lacks the greater flexibility of a more object-oriented approach. It also sets foreign attributes, FadeState and FadeTimeLeft, directly on the element

<div id="fadeEl" FadeState="-2" FadeTimeLeft="33">
    I am the fade element.
</div>

and passes a spliced-together variable that looks up the same element over and over again: document.getElementById(eid),

setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);

neither of which are optimal.

The logic was there, however, and it wasn't hard to convert into an object. The nice thing about objects is that an object is just that: A flexible model of something that once modeled can be easily reused. So, I revamped the function provided there to make it less intrusive and more modular.

I'd originally posted the following re-working in the comments on that site, but this is a slightly more polished example.

Basic Object

The AnimateFade Class

//declare class so we can use the "new" keyword to create unique instances
var AnimateFade = function(elmOrElmId, duration, state) {
    this.setOptions(elmOrElmId, duration, state);
    this.animate();
};

//prototype its methods
AnimateFade.prototype = {

    setOptions: function(elmOrElmId, duration, state) {
        this.fadeDuration = duration;
        this.element = (typeof elmOrElmId == 'string') ? document.getElementById(elmOrElmId) : elmOrElmId;
        this.fadeState = (state && state == 1) ? 1 : 0;
        this.fadeTimeLeft = duration;
        this.lastTick = this.newTick();
    },

    newTick: function() {
        return (new Date).getTime();
    },

    getElapsedTicks: function() {
        return this.currentTick - this.lastTick;
    },

    animate: function() {

        this.currentTick = this.newTick();

        var self = this;
        var elapsedTicks = this.getElapsedTicks();

        //helper function, called in the timeout below,
        //recurses with correct reference to "this"
        var helper = function() {
            self.animate();
        };

        if (this.fadeTimeLeft <= elapsedTicks) {
            this.element.style.opacity = this.fadeState;
            this.element.style.filter = 'alpha(opacity = ' + (this.fadeState * 100) + ')';
            return;
        }

        this.fadeTimeLeft -= elapsedTicks;

        var newOptVal = this.fadeTimeLeft / this.fadeDuration;

        newOptVal = (this.fadeState == 1) ? (1 - newOptVal) : newOptVal;


        this.element.style.opacity = newOptVal;
        this.element.style.filter = 'alpha(opacity = ' + (newOptVal * 100) + ')';

        this.lastTick = this.currentTick;
        this.currentTick = this.newTick();

        setTimeout(helper, 24);
    }
};

//initializer function
var init = function(elmsOrElmIdArr, duration, state) {
    for (var i = 0, l = elmsOrElmIdArr.length; i < l; i++) {
        //"new" keyword creates unique instance
        new AnimateFade(elmsOrElmIdArr[i], duration, state);
    }
};

Instantiations

Single/Multiple Elements, Single Duration and Fade State

To instantiate with one or more elements that will all fade in or out for the same duration:

//pass in either string id or element reference

//Example A: fade just one element
var myOnlyElement = ['myUniqueId'];

//Example B: fade multiple elements
var myMultElms = ['myId', document.getElementsByTagName('div')[7], 'anotherId'];

//how long fade should last
var myDuration = 1000;//1,000 milliseconds, or 1 second

//start fading out
init(myMultElms, myDuration);
//or fading in
init(myMultElms, myDuration, 1);

Multiple Elements, Durations, and Fade States

Or retool the initializer function...

//initializer function capitalizing on parallel arrays
var init = function(elmsOrElmIdArr, duration, state) {
    for (var i = 0, l = elmsOrElmIdArr.length; i < l; i++) {
        //"new" keyword creates unique instance
        new AnimateFade(elmsOrElmIdArr[i], duration[i], state[i]);
    }
};

...to take full advantage of arrays, simultaneously fading multiple elements in and out for different lengths of time:

//set parallel arrays
var myElms = [elm1, elm2, elm3];
var myDurations = [1000, 2500, 300];
var myStates = [0, 1, 0];

//start effects
init(myElms, myDurations, myStates);

//elm1 fades out in 1 second
//elm2 fades in in 2-and-a-half seconds
//elm3 fades out in 3/10ths of a second

This could be useful if you wanted to fade in one set of elements while simultaneously fading out another set, perhaps a confirmation dialog and its acknowledge that the user's choice has either been implemented or canceled. Or whatever.

Make Caching Less Aggressive in Firefox on Development Machines

2010-08-06T20:58:00.000-07:00

I have been having some issues with Firefox caching files too aggressively on my development machine at work: not good when you write client-side code.

My first attempt to resolve the issue was to disable caching entirely using the Web Developer toolbar (Disable > Disable Cache). However, that is not optimal, as every page resource gets downloaded every time you refresh the page.

So I did some reading up, and, just as I suspected, there is a Firefox configuration setting that forces a 304 request each time you refresh the page. This solution is superior to disabling the cache, as only resources that have changed are downloaded again.

If you have caching problems (or you're concerned that you might), you'll need to change a value in Firefox's "power-user" configuration settings. Here's how:

Open a new tab, type about:config into your address bar, and promise Firefox you'll be careful. ;)
Enter browser.cache.check_doc_frequency into the filter field.
Change the value of 3 to 1, which tells Firefox to check the server for updated resources on every refresh.

Further Information: For the full reference see here, and for a list of the seven hidden pages in Firefox, see The Seven "Hidden" Pages.

Slick Ajax Site for Creating Throbbers / Spinners

2010-06-19T19:02:00.000-07:00

Ajax throbbers (or spinners as they are often informally called) are a hallmark of Web 2.0 applications, invaluable for showing the user that something is happening, at least when an accurate and detailed progress indicator is not required. Now, thanks to Yannick Croissant, creating custom variations is easy (and free).

You can set the foreground and background colors, or set to transparent (though depending on the colors you choose, it may cause the image to look a little ragged around the edges). What is more, this free service could not be easier to use.

Just go to ajaxload.info to get started. :)

A few examples that took less than a minute to create playing off the colors of this blog:

Cross-Browser: Getting/Setting the Class Attribute of an Element Using JavaScript

2010-01-27T21:58:00.000-08:00

It is common knowledge that getting and setting the class of an element in Internet Explorer requires a bit of a work-around from the standard JavaScript solution that works with all other browsers.

The Usual Way

For example, using setAttribute to set the class requires two different values depending on whether the browser is Internet Explorer (className) or all others (class):

//a conditional statement specifies class or className
var klass = (isIE) ? 'className' : 'class';
element.setAttribute(klass, 'new_class');

The same is also true when attempting to get the class value with getAttribute:

element.getAttribute('className'); //for IE
element.getAttribute('class'); //everybody else

But what if you could both get and set the values on all browsers without any conditional logic? Apparently, you can.

A Better Way

The following solution works in all versions of IE from at least 6 onward, Firefox 3, Chrome, Safari, and Opera 10. I haven't tried it on Konqueror or any of the Linux browsers yet, but I would be surprised if it did not work there equally well.

element.className; //get class(es)
element.className = 'new_class'; //(re)set to single class

//or, if you don't want to tamper with any existing
//classes: note the space before the new class name
element.className = element.className + ' new_class';

//examples
if (/new_class/.test(element.className) { //test
    element.style.border = 'solid 1px #555';
}

if (someVariable == someValue) { //add "new_class" class
    element.className = element.className + ' new_class';
}

I have created a simple example page. In this case, the script toggles a show and hide class on table rows. Just download a copy from Google Docs, open in your litany of browsers, and enjoy. :)

$dom2mootools: MooTools JavaScript Element Construction / Adoption Just Got Easier!

2009-12-16T23:06:00.000-08:00

$dom2mootools

Overview: $dom2mootools drastically speeds up the process of JavaScript element construction when using the MooTools framework. Given any element node, it produces MooTools element constructors and should perform nearly seamless parent-child adoption (including a final adoption at the end and a reminder to reassign to your own root node).

Accreditation: Idea suggested by Jessie Yeagle and implemented by Eric Knickerbocker, both JavaScript developers at Intuitive Web Solutions.

Creation Date: November 20, 2009. Last updated June 23, 2010.

URL: http://mrrena.blogspot.com/2009/12/dom2mootools.html.

Simply paste the HTML source code you want
to convert into the text box below and click Submit.

Input

Check to flatten div HTML.

Output

"Failed To Find Flength File": Uber-Uploader Error SOLVED

2009-10-19T13:13:00.000-07:00

"Failed to find flength file."

I moved a new application we're developing from the development server onto the one that we hope to release live soon. As part of this package, we make use of Uber-Uploader and experienced no problems with the dev server, which was set up identically to the soon-to-be-live configuration. However, I kept getting a "Failed to find flength file" error on the new server.

I first consulted the page from Uber Uploader entitled Flength File Help "Failed To Find Flength File." That was clearly not the problem—I did not even have the mod_security module for Apache configured. I then ended up in a discussion forum related to the XUpload solution. Still no joy, though looking back, some people may have been on the right track, just not able to clearly communicate the solution.

In short, it was a file permissions issue. As most of you reading these words probably know, Linux has file permission settings and your Perl/CGI uploader script needs to chmod-ed to 755 or similar—it needs to be fully executable, in other words. No doubt the same issue would be true of an MS server with permissions set as well.

Don't know how to set script permissions? Most FTP programs offer that functionality, including the open-source program FileZilla—right click the Perl upload file, as shown below, and set your permissions to fully executable:

"EntityRef: expecting ';' at line 1": XML Error SOLVED

2009-07-08T12:48:00.000-07:00

"EntityRef: expecting ';' at line 1"

I was using the Uber Uploader script for a project, and ran into the error above in the Firebug console. In my case, I had been passing a URL with a query string that needed to have HTML entities for the ampersands.

In other words, the following URL:

http://somesite.com/file.php?c=1&d=2&e=3

was creating an error in the XML file. The ampersands had to be encoded, which solved the error:

http://somesite.com/file.php?c=1&d=2&e=3

Wikipedia has a list of all the characters that must be encoded when using XML. I list them below with the symbol followed by the HTML entity you will need to use to replace it with. If you are receiving the same error (or the error "Reserved XML Name"), you most likely need to make sure that these symbols are encoded (and with the latter error, watch out for deadly white space and newline characters).

Symbol: HTML Entity: Description:
" " (double) quotation mark
& & ampersand
' ' or " apostrophe (= apostrophe-quote)
< < less-than sign
> > greater-than sign

Symbol:	HTML Entity:	Description:
"	"	(double) quotation mark
&	&	ampersand
'	' or "	apostrophe (= apostrophe-quote)
<	<	less-than sign
>	>	greater-than sign

Note that if you are using PHP, htmlspecialchars and htmlspecialchars_decode should give you everything you need for XML; for JavaScript, you'll want a custom solution such as this one.

Gregwired Blogs about Synching Audio and Video in Cam Studio, Especially for YouTube

2009-04-10T12:28:00.000-07:00

My friend Greg has recently taken an interest in creating YouTube content and has put together an arsenal of free, quality tools for that purpose. Among these is CamStudio (which can be used to record anything that appears on your screen), as well as Any Video Converter that allows you to easily configure a variety of different options, providing conversion both to and from a range of popular video formats (including, but not limited to, avi, asf, mov, rm, rmvb, flv, mkv, mpg, 3gp, m4v, and vob).

However, the default settings on CamStudio are not optimized for online content and it is frequently the case that audio and visual are not synced properly. That of course is not unique to CamStudio; out-of-sync videos can be especially noticeable in YouTube where the phenomenon has achieved no little notoriety.

In any case, quality information on optimal CamStudio settings (and perhaps most especially on curing sync problems) is all but non-existent on the Internet, so Greg has both blogged about the issue as well as created a YouTube video taking you step by step through the optimized settings, with a special eye toward creating content to publish on YouTube. To read his blog entry, click here; to watch his YouTube "how to," click here.

Speed up Torrent and Peer to Peer (P2P) Downloads on Vista and other Windows Platforms

2009-03-05T11:45:00.000-08:00

As a security precaution, Windows XP and Vista and the new Windows 7 limit the number of so-called "half-open" outbound TCP connection attempts to 10. Normally, that poses no problems, but if you do any downloading with torrent files or other peer-to-peer (P2P) networking, that can significantly slow your downloads.

Many XP users have relied on the lvllord.de patch for their solution, but that only works for XP and it modifies the tcpip.sys file, which has been known to have disastrous results for Vista users. Fortunately, there is a simple and elegant solution that works not only on XP (and better than the patch), but on Vista and 7 as well.

TCP-Z is a small GUI program for Windows that you can use to change the number of allowed half-open connections on the fly (up to 251) without restarting the computer (click image for full-size view):

To find out more about this program—and most importantly to download a copy for yourself—just head over to the TCP-Z Network Monitor site.

Note: To open the downloaded file, you may need a copy of the excellent and free 7-Zip (which in my opinion works better than the native Windows zip program), as the native program does not recognize the .7z file extension. (7-Zip recognizes its own extension and many others, including all the standards.)

How to Easily Combine, Minify, and Cache JavaScript and CSS with 1&1 (And Other Web Hosts)

2009-02-26T18:31:00.000-08:00

Sections Covered:

An Opening Word
Setup And Basic Use
Setting a Long Cache Life for Your Pages
Note on Use Inside A Sub-Directory

An Opening Word

In How to Compress Perl/CGI-Scripts... and How to Compress PHP and Other Text-Based Files..., I write about achieving better standards according to Yahoo’s Best Practices for Speeding up Websites guide.

If your server supports PHP5, now there is an incredibly easy way to minify both JavaScript and CSS files on the fly, PLUS a way to combine a number of different files into a single HTTP request. (See Step 4 of my blog entry on compressing PHP scripts to convert your site to PHP5, particularly if you are using a 1&1 shared hosting package.)

Thanks to Ryan Grove and Steve Clay, Minify! is now here (download link). As the source page on GoogleCode suggests, it combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.

Setup and Basic Use

Just download the zip file and drop the min folder in your root directory.

Then, to include single resources on your page, just set them up like the following with ?f= (f short for "file"), followed by the URL of the resource:


//css
<link rel="stylesheet" href="/min/?f=/path_to_file/file.css" type="text/css" />
//js
<script type="text/javascript" src="/min/?f=/path_to_file/file.js"></script>

You can also use URL-rewriting if your host supports it (see Note below):


//js -- notice the "?" before the "f" has been dropped
<script type="text/javascript" src="/min/f=/path_to_file/file.js"></script>

Minify comes with its own URL-builder for easily creating and checking links which you can access at http://name_of_your_site_here.com/min/index.php once you have it installed on your server.

The builder interface itself will teach you how to serve groups of files as a single, minified resource by adding a few lines to /min/groupsConfig.php, but we'll go ahead and look at it here anyway:


//In /min/groupsConfig.php, I set up the unique identifier "js"
//to specify a group of 5 hypothetical JS files
return array(
    'js' => array(
        '//js/file1.js',
        '//js/file2.js',
        '//js/file3.js',
        '//js/file4.js',
        '//js/file5.js'
    )
);

You can then include this group of files in your HTML tag by specifying g (for "group"), followed by your unique js identifier.

<script type="text/javascript" src="/min/g=js"></script>

Or you can take full advantage of comma-delimited arrays and set up as many sets of files paired with unique identifiers as you want (of course including any CSS files using the link tag, as shown in the first example on this page):


//"js" and "css" file groups set in /min/groupsConfig.php
return array(
    'js' => array(
        '//js/file1.js',
        '//js/file2.js',
        '//js/file3.js',
        '//js/file4.js',
        '//js/file5.js'
    ),
    'css' => array(
        '//css/file1.css',
        '//css/file2.css',
        '//css/file2.css'
    )
);

Setting a Long Cache Life for Your Pages

Minify's default cache life is 30 minutes for CSS and JS files. This works well for development servers, but for production servers with stable code, a longer cache time is recommended. Your can easily implement a year-long cache life in the HTML simply by appending a number (yes, any number) as a query string variable.


//css
<link rel="stylesheet" href="/min/g=css&1" type="text/css" />
//js
<script type="text/javascript" src="/min/g=js&1"></script>

However, you must update this number if you make changes to these files and it is important that users have the latest versions. For this reason, I recommend starting off with the number 1 and incrementing it as your changes dictate, though as long as the numbers are always different, it makes no difference how you do it.

Since this approach requires manual editing, this may not be optimal for you. For the full spectrum of caching possibilities, see the developer doc HttpCaching; for advanced options of specifying a different cache system (as well as other advanced uses) see the CookBook doc.

For more general use ideas, including how to specify a b for "base directory" when a group of single files all share the same root directory path, see the developer README file beginning with the heading "Minifying a Single File"; for advanced usage beyond the scope of the examples here, see the developer comments at CustomSource.

Note: If you want to use rewritten urls and you are using a Linux shared hosting package with 1&1 (and maybe even if you're not), you will probably need to make a small adjustment to the included .htaccess file in the min directory. The line in the native code you're after reads as follows:

RewriteRule ^([a-z]=.*) index.php?$1 [L,NE]

but you will probably need to change it:

RewriteRule ([a-z]=.*) /min/index.php?$1 [L,NE]

Also to point out the obvious, make sure if you put the min directory a level deeper (see below), you specify the sub-directory: for example, /myscripts/min/index.php.

Note on Use Inside A Sub-Directory

By default, Minify is intended to have the min directory parked at the root level. It works just fine a directory level deeper, however, though this sometimes causes problems with the URL-building interface. The developer docs recommend a solution that uses PHP; see AlternateFileLayouts. Update: I also ran into a small issue when minifying HTML: see the gray box at the end of How to Minify HTML using PHP and Minify (including final HTML output of PHP files) for the work-around.

If you prefer to hatch a solution to the builder interface in JavaScript, you'll need to modify the code slightly. Use your IDE or text editor to open the _index.js file found in the builder directory.

The first block of code currently reads as follows; our interest here all deal with _minRoot:

var MUB = {
    _uid : 0
    ,_minRoot : '/min/?'
    ,checkRewrite : function () {
        var testUri = location.pathname.replace(/\/[^\/]*$/, '/rewriteTest.js').substr(1);
        function fail() {
            $('#minRewriteFailed')[0].className = 'topNote';
        };
        $.ajax({
            url : '../f=' + testUri + '&' + (new Date()).getTime()
            ,success : function (data) {
                if (data === '1') {
                    MUB._minRoot = '/min/';
                    $('span.minRoot').html('/min/');
                } else
                    fail();                
            }
            ,error : fail
        });
    }

Replace this with the following code, which is not particularly pretty, but is "smart" and will read the location of the directory when the script is called, no matter how many levels deep. The three changes are marked below by the comment //here.

var MUB = {
    _uid : 0
    ,_minRoot : location.pathname.replace('/builder/', '') + '?'//here
    ,checkRewrite : function () {
        var testUri = location.pathname.replace(/\/[^\/]*$/, '/rewriteTest.js').substr(1);
        function fail() {
            $('#minRewriteFailed')[0].className = 'topNote';
        };
        $.ajax({
            url : '../f=' + testUri + '&' + (new Date()).getTime()
            ,success : function (data) {
                if (data === '1') {
                    MUB._minRoot = MUB._minRoot.replace('?', '');//here
                    $('span.minRoot').html(MUB._minRoot);//here
                } else
                    fail();                
            }
            ,error : fail
        });
    }

Copy to Clipboard Functionality with JavaScript and Flash 10: Creating a Loop to Instantitate Multiple Copy Buttons

2009-02-26T18:12:00.000-08:00

As a security precaution, JavaScript is not allowed to read from or write to the system clipboard. Up until Flash 10 came out with a new security feature that required copying to the clipboard to be instantiated directly from a user clicking on a Flash control, it was a simple thing to download a tiny Flash file, include it invisibly on a web page, and send it information intended for the clipboard via JavaScript. When Flash 10 came out, however, that functionality was broken.

Not any more. There is a project on GoogleCode developed by Joseph Huckaby known as zeroclipboard that is also backwards compatible with Flash 9:

The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.

This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.

To date, adding the functionality to multiple controls requires you to call multiple instances, unless the size of the control remains constant. Joe put together a demo version of the latter using JQuery on this page.

I also put together a non-JQuery technique using straight JavaScript below. The code is heavily commented to explain what I am doing in each step and where everything goes.

Step 1: Find the "glue" function and space it down one space to open a blank line. Paste the following "addon" function (including ending comma!) directly above the "glue" function in the space you opened--it recreates only that portion of the "glue" function that we still need to get hover effects to work properly.

addon: function (elem) {
    this.domElement = ZeroClipboard.$(elem);
},

Step 2: Replace the original ZeroClipboard.Client() function with the following, which remembers the unique ID of each copy button (that's what the "divId" is about):

//modified ZeroClipboard.Client() function
Client: function (elem, divId) {
    // constructor for new simple upload client
    this.handlers = {};

    // unique ID
    this.id = ZeroClipboard.nextId++;
    this.movieId = 'ZeroClipboardMovie_' + this.id;

    // register client with singleton to receive flash events
    ZeroClipboard.register(this.id, this);

    // create movie
    if (elem) this.glue(elem);

    // if passed, register the unique div id
    if (divId) this.divId = divId
}

Step 3: The following init() function is meant to replace the existing one. It loops through all objects of a given type looking for a particular class. Your HTML page will need to assign both a common class and a unique ID to these elements in order for it to work.

Example:

<div id="unique1" class="common">Copy!</div>

<div id="unique2" class="common">Copy!</div>

and so on.

Make sure you change the SOME_CLASS_NAME variable to whatever common class name you are using. As with the original script, you will also need to determine what text to copy and work out how that will be performed.

function init() {
    //set the SOME_CLASS_NAME variable to whatever common class you are
    //using. Our example above uses the class "common"
    var SOME_CLASS_NAME = 'common';
    //Gather together all the elements we're interested in 'divs' variable
    //(could be any element including '*' to grab all elements), and
    //initialize 'node' variable.
    var divs = document.getElementsByTagName('div'),
        node = '';

    //This kind of unorthodox looping has been shown to be faster with
    //benchmarking tests when looping over DOM elements
    //(http://blogs.sun.com/greimer/entry/best_way_to_code_a). Note that
    //'node' is the unique instance of the container in each loop.
    for (; node = divs[i++];) {

        //If the elements we've collected together have the class
        //'SOME_CLASS_NAME' set, we want them. We need to
        //ensure that they have a unique id specified as well.
        if (node.className && /SOME_CLASS_NAME/.test(node.className)) {

            //We read the id of the element automatically (the reason a unique ID
            //needs to be set in the first place).
            var buttonId = node.id;
            //We send the newly read ID for registration in the modified
            //ZeroClipboard.Client function shown above.
            clip = new ZeroClipboard.Client('', buttonId);
            //We take advantage of new 'addon' function above.
            clip.addon(buttonId);
            clip.setHandCursor(true);
            clip.addEventListener('mouseOver', function (client) {

                //'client' is the unique instance of our movie container, so we need it
                //to prefix the setText function. (Our example below uses the instantiated
                //id of the copy button div to grab its value--$(client.divId).value
                //--though it is not likely that this will be the copy element we want.
                //A little ingenuity is probably in order here for the setText text.) 
                client.setText($(client.divId).value);

                //Here we pass the copy button id on mouseover.
                ZeroClipboard.$(buttonId).addClass('hover');
            });
            clip.addEventListener('mouseOut', function (client) {
                //We again pass the copy button id on mouseout.
                ZeroClipboard.$(buttonId).removeClass('hover');
            });

            //We read/set button_width and button_height.
            var button_width = $(buttonId).offsetWidth,
                button_height = $(buttonId).offsetHeight;

            //We create a floating DIV...
            var div = document.createElement('div'),
                zIndex = 99;
            //Check the z-index...
            if ($(buttonId).style && $(buttonId).style.zIndex) {
                zIndex = parseInt($(buttonId).style.zIndex) + 1;
            }
            div.style.position = 'absolute';
            div.style.left = 0;
            div.style.top = 0;
            div.style.width = button_width + 'px';
            div.style.height = button_height + 'px';
            div.style.zIndex = zIndex;
            //We need the button id so that we can append its movie instance.
            $(buttonId).appendChild(div);
            //All finished! :)
            div.innerHTML = clip.getHTML(button_width, button_height);
        }
    }
}

Step 4: As mentioned on the issue report above, I also ran into a tiny (and easily fixable) error in the ZeroClipboard.$ function dealing with the removeClass function inside of it. Those lines can be replaced by these; we just test to see if the class attribute is present, and if not, we set it to an empty value:

if (this.className) {
    this.className = this.className.replace(new
    RegExp('\\s*' + name + '\\s*'), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
}
else this.className = '';

Opening/Unblocking .CHM Help Files on Windows XP SP2 or Vista

2009-02-26T17:46:00.001-08:00

In one of my coding projects, I created a .chm help file, and loaded it to the server. However, it didn't survive the round trip: when I attempted to open a downloaded copy in Windows Vista, I saw the following message (click to view full size):

I did not for certain what was wrong, though I suspected it was some kind of security issue on Vista. I was correct.

.chm files that have been downloaded from the Internet are considered a security risk on both Windows XP and Vista. Bill Evjen blogs about the solution here; the solution, as he reports, is simple. Just right-click the file, select Properties, and then click Unblock (click to view full size):

Getting the HTML of a Range Created in JavaScript

2009-02-14T07:18:00.001-08:00

Working on a mainly JavaScript-driven rich-text editor for the discussion forum on Mr. Renaissance, I wanted to include a feature that automatically inserted block quotations. Two days after the editor's debut, I suddenly noticed that this feature was losing its formatting: all line breaks and markup were gone, in its place one large, crunched-together paragraph that even ran sentences together in places.

A bit of Googling revealed that using range to retrieve the user's selection returns plain text (at least in non-IE browsers), not its formatted HTML:

The contents of userSelection

The userSelection variable is now either a Mozilla Selection or a Microsoft Text Range object. As such it grants access to all methods and properties defined on such objects.

However, the Mozilla Selection object that userSelection refers to in W3C-compliant browsers also contains the text the user has selected (as text, not as HTML).

From Introduction to Range, emphasis mine.

Frustrating, to say the least. I won't go into a list of all the things I tried, but I finally found the following (slightly modified) snippet of code at Snipplr, courtesy of David King of the entirely open-source OOPStudios in Newcastle, UK:

var getSelectionHTML = function() {
    var s;
    if (window.getSelection) {
        //W3C Ranges
        s = window.getSelection();
        //Get the range:
        if (s.getRangeAt) var r = s.getRangeAt(0);
        else {
            var r = document.createRange();
            r.setStart(s.anchorNode, s.anchorOffset);
            r.setEnd(s.focusNode, s.focusOffset);
        }
        //And the HTML:
        var clonedSelection = r.cloneContents(),
            div = document.createElement('div');
        div.appendChild(clonedSelection);
        return div.innerHTML;
    } else if (document.selection) {
        //Explorer selection, return the HTML
        s = document.selection.createRange();
        return s.htmlText;
    } else {
        return '';
    }
};

I am pleased to report that David has created a wonderful little function that returns the HTML of the user's selection rather than just plain, unformatted text.

Note: If you want to simulate the action of Cut (rather than Paste), change r.cloneContents() to r.extractContents(). Normally, there would be no reason to do so, but it is a possibility.

"invalid range in character class": JavaScript Error Solved

2009-02-13T09:09:00.000-08:00

"invalid range in character class"

It was maddening. Firebug showed this error, but gave no additional information: not even a script or function name, much less a line number. Googling didn't help very much: it suggested that it was an error involving regular expressions. Thousands and thousands of lines of code and at least half a dozen external JavaScript files later, I'm pleased to say that I discovered what the message means and now want to pass along the knowledge in hopes of saving someone else endless hours.

The short answer is that the word range refers to a "range of values," say the range from 1 to 100 typically written as 1-100. Notice that my shorthand for range involves a dash or minus sign between the 1 and 100. Therein lies the problem. If you want a regular expression to test for the presence of a dash/minus sign as a dash/minus sign, it needs to be escaped with a backslash, or else some browsers (Firefox 2 in this case) think that you are attempting to express a range instead and freak out accordingly.

In particular, I had one tiny function that was used on only one form dealing with phone numbers. Valid data included a blank space, any number, a dash, or a right or left parenthesis to accommodate a number such as (555) 555-5555. It wasn't crucial that users type in their phone number in any certain way, I just try to get in the practice of filtering my data both client and server side.

In a test copy of the production environment, I first eliminated my scripts one by one until the offending error disappeared. Then I brought that script back, eliminating each function body until the error disappeared. It turned out to be this tiny function, short for "is integer" though obviously adding the space, dash, and parentheses:

var isInt = function(s) {
    s.value = s.value.replace(/[^\d-()\s]+/g, '');
};

Notice that the - character is not escaped. Now here's the fix:

var isInt = function(s) {
    s.value = s.value.replace(/[^\d\-()\s]+/g, '');
};

I have now added the escape \-, and thousands of lines of code are now working again. Hopefully this post will save someone else hours of frustration.

Update: As Earl suggests in his comment below, you can also move the dash to the end of your regular expression square brackets without using an escape: /[^\d()\s-]+/g. 5n1p3r also brings up the point below that if you're using the RegExp object and an escape, you need two backslashes, the first to escape your escape.

How to Compress PHP and Other Text-Based Files with 1&1 (and Other Shared Hosts)

2009-01-27T17:59:00.000-08:00

If you have a shared Linux hosting package through 1&1, you have no doubt discovered that the usual method of changing your .htaccess file does not allow you to compress your files using Apache because 1&1 has disabled the mod_deflate and mod_gzip modules; you also cannot specify php values in .htaccess files in 1&1 shared packages, so a solution like this one also will not work. However, there is a solution that does work, and it works even on the most basic 1&1 Beginner’s Package.

Note: If you plan to implement the Minify! option I blog about in How to Easily Combine, Minify, and Cache JavaScript and CSS..., you can safely skip steps 1 and 2 and include only the first line shown in step 3.

Step 1:

Determine what your root path is; if you are using a 1&1 package, it will look something like this:

/kunden/homepages/12/d123456789/htdocs/

You can do that by creating a text file in Notepad or other editor,* entering the following lines, then saving it with as phpinfo (or whatever you want) followed by the .php extension.

<?php
phpinfo();
?>

(* If you’re using Notepad, you’ll probably want to put quotation marks around the name "phpinfo.php" when saving, to keep it from saving the file as phpinfo.php.txt. Personally, I like either Geany or Notepad++ on Windows or Komodo Edit on Mac; Komodo Edit and Geany come in all three flavors, Windows, Linux, or Mac, with Geany supporting the Mac only via a port. Notepad++ is a Windows-only program. All three IDEs rely on the Scintilla editor as their base.)

Now browse to the newly uploaded file with your web browser and search for DOCUMENT_ROOT. This variable will tell you what the exact path is to your server.

Step 2:

Now create another php file in the same way, this time adding the following information so that when you compress your CSS and JS files, they are served with the right headers, or else they will not load properly in Firefox and other browsers:

<?php
$pathinfo = pathinfo($_ENV['SCRIPT_FILENAME']);
$extension = $pathinfo['extension'];
if ($extension == 'css') {
    header('Content-type: text/css; charset=utf-8');
}
if ($extension == 'js') {
    header('Content-type: text/javascript; charset=utf-8');
}
?>

Make sure that you don’t space down between the lines or add an extra space at the end, and save this file as headers.php, uploading it to wherever you keep your scripts. For the sake of this example, I will assume that you store your scripts in a directory named webscripts.

[Update: As Brett reminds me in the comment below, you have now given PHP control of rendering your pages, so you will also need to include in this file any other header information you know you’ll need by declaring each header on its own line. For example, to set the "Vary" header, you'd add this extra line:
header('Vary: Accept Encoding');
Based on the readership of these articles, this will be particularly useful when optimizing for speed using a free tool like Google's Page Speed. Add as many extra headers as you need, one per line.]

Step 3:

Create a third file, this time a PHP configuration file, entering the following information (though of course changed with the information you looked up in step 1 and whatever directory you use for step 2—unfortunately, you can’t use environmental variables in .ini files, as they are straight ASCII):


output_handler=ob_gzhandler
auto_prepend_file=/kunden/homepages/12/d123456789/htdocs/webscripts/headers.php

Name your configuration file the conventional php.ini and save it.

The first line tells the server to use PHP’s built-in g-zip handler for compression; the second line points to the exact location of the file you created in step 2: /kunden/homepages/12/d123456789/htdocs/ is the document root you located in step 1, and webscripts/ is the directory where you uploaded the headers.php script. auto_prepend_file tells the server to automatically “prepend,” or “attach to the beginning of” all pages it serves (versus auto_append_file, which would “append,” or “attach to the end” of all files). The if/then conditional statements in step 2 ensures that the headers.php file will only attach headers if the file in question has a .css or .js extension.

Note: Check with your web host. With 1&1, at least, you will need to upload a copy of your php.ini file to EVERY directory containing files you want compressed.

Step 4:

Create an .htaccess file or modify your existing one by adding the following line (if you’re not familiar with an .htaccess file, see here):


AddType x-mapp-php5 .php .shtml .html .htm .txt .js .css

This line tells the server to process all the file extensions specified through PHP5; change it to x-mapp-php4 if you want to use PHP4 instead. You can add other extensions or take away from the ones here: whatever extensions are listed on the line after the x-mapp-php5 will be processed via PHP.

CAUTION: If you plan to implement the Minify! solution I blog about in How to Easily Combine, Minify, and Cache JavaScript and CSS..., I do not recommend including the .css and .js file extensions on this line. Doing so processes these files twice, as Minify! already has its own mechanism for compressing files. And, as a result of double compression, certain versions of Internet Explorer choke and die silently.

[June 4, 2011 Update: I was setting up my sister's site recently, also on a 1&1 Beginner’s Package, and the style sheets were not working correctly. The fix was to add this line to the .htaccess file immediately above the line shown in the example above:


RemoveHandler .css

I first tried removing all file extensions I was using, including .htm, but this caused problems. Just know that you have the option of removing file handlers and play around with it as needed.

Step 5:

Now test to see whether or not your pages are being compressed by using the free tool from GIDNetwork.

How to Compress Perl/CGI-Scripts with 1&1 (and Other Shared Hosts)

2009-01-20T06:15:00.000-08:00

According to Yahoo’s Best Practices for Speeding up Websites, it is a good idea to compress (gzip) all text-based files, including php, css, javascript, and the topic of today: Perl CGI scripts. However, if you are hosting your website on 1&1 (or other shared hosting package*), you probably know of no easy way to g-zip your files. I first tried the method outlined in the article How To Install Perl Modules On Shared Hosting, but I couldn’t get it to work quite like the author suggested. With a little experimentation, however, I found a way to gzip Perl files on a 1&1 Beginner’s Package.

Step 1:
Download a copy of CGI-WebGzip from CSPAN. Unzip it, and extract WebGzip.pm, the file you need. (If you don’t have the software to unzip tar.gz files, download a copy of the free 7-zip for your operating system, and tell your computer to use the 7-Zip File Manager (7zFM.exe) to open files with the tar.gz extension. Such files are zipped twice, so you'll have to unzip the .gz part, then the .tar part before you finally get to your files.)

Step 2:
Open WebGzip.pm and take out take out the CGI:: on the very first line, changing it from:

package CGI::WebGzip;

to:

package WebGzip;

Step 3:
Upload the WebGzip.pm file to the same directory where the Perl CGI-scripts you want to compress live.

Now open your Perl file. On the second line under the Perl shebang (#!/usr/local/bin/perl), add the following:

use lib "$ENV{DOCUMENT_ROOT}/path_to_Perl_scripts"

where you change path_to_Perl_scripts to the directory from root in which they live.

For example, if you have your Perl files stored in a directory called Perl inside another directory called scripts, the line would read use lib "$ENV{DOCUMENT_ROOT}/scripts/Perl". This tells the script to use the library located in such-and-such directory from the root.

Step 4:
Somewhere in your Perl script should be the following line or one very similar:

print "Content-type: text/html\n\n";

which tells the script to print the output to the screen as HTML. Directly above that line, add the following line:

use WebGzip;
print "Content-type: text/html\n\n";

This line tells the script to include the module you just uploaded when it outputs its contents.

Step 5:
First check and make sure that your Perl script loads as expected: it is possible that you left a semi-colon off somewhere or got something a bit out of place. Once that is done, test to see that your file is being compressed by entering the URL into the free testing tool from GIDNetwork. If your page is being compressed, it will show you a green Yes, if not you’ll see a red No. If it is not working correctly, go back to step four and see if there are any other such lines in the script. If you are not using a 1&1 hosting package, you might also look at the asterisk below.*

* Your server will need to have the Compress::Zlib module installed. It is possible, even if it is not installed, you could use a method similar to the one outlined in this document to include it: you can download it here. If you’re not sure if you have it installed and you’re not sure how to check, try the directions here and see if it works. If it works, you have Compress::Zlib installed.

Stay Away From Imediablast.com! Ad Redirection Annoyance

2009-01-20T00:34:00.000-08:00

If you are a web content provider, you might think twice before doing business with imediablast.com. They employ rouge ads that forcibly redirect users from the webpage they intended to view. A recent ad campaign involving bigbrandpromotions.com uses the following URL:

http://imediablast.com/adserve/www/delivery/ajs.php

The original link that led to bigbrandpromotions actually had a lot more garbage appended to the end of it: right-click here and select "Copy Link Location" if you want to see it--otherwise, you can safely click on it.

If you click on it, it will serve up a raw JavaScript file pre-processed via PHP. It uses a random variable prefixed with OX_ to help ensure it isn't blocked. Specifically, if you click on that link, this is what you'll see (except that the variable, being random, will differ somewhat):

var OX_600eac89 = ''; 
OX_600eac89 += "<"+"script type=\"text/JavaScript\">\n"; 
OX_600eac89 += "<"+"!--\n";
//below is the offending line
OX_600eac89 += "setTimeout(\"top.location.href = \'http://www.incentaclick.com/nclick.php?id=13735&cid=5677\';\",1000);\n";
//above is the offending line
OX_600eac89 += "-->\n"; 
OX_600eac89 += "<"+"/script><"+"div id=\'beacon_de907c62c2\' style=\'position: absolute; left: 0px; top: 0px;
visibility: hidden;\'><"+"img src=\'http://imediablast.com/adserve/www/delivery/lg.php?bannerid=626&campaignid=87&zoneid=139&source=_blank&channel_ids=,&loc=fill_in_the_server&referer=fill_in_the_server&cb=de907c62c2\'
width=\'0\' height=\'0\' alt=\'\' style=\'width: 0px; height: 0px;\' /><"+"/div>\n";
document.write(OX_600eac89);

I have marked the offending line with comments. Basically, it sets a second-long time-out, then redirects to a click tracker that in turn redirects to a come-on from bigbrandpromotions.com. If you are familiar with JavaScript, you'll easily recognize the top.location.href = line, which is responsible for the redirect. So, users who wanted to access a completely different webpage suddenly find themselves forcibly redirected to the page shown in the screen shot below.

So then, stay away from imediablast.com if you value your clients! (I also find it interesting that it seems to be tied with bravenet.com as well, notorious for junking things up with billions of blinking ads.)