Backup Your gMail Account (part 2)

Okay, I wrote an article here how to backup your gMail Inbox, and here are some more tips that will speed up the process because with large INBOX files the time increase exponentially.

1. Enable your gMail to get all INBOX messages

If you’d like to create full back to your gMail Inbox you need to go to the POP section under settings and select “Enable POP for all mail”

2. Create your file structure

To keep everything organized create a directory structure where you’ll store INBOX file parts and single message files as well.

3. Break your large INBOX file into smaller (size) files

To speed up the process I found that with files between 60-80MB it is the fastest, it takes couple of minutes to go through each file.

Here is the PHP function that does that.

 <?php /** script global options */ ini_set("max_execution_time", "99999"); ini_set("memory_limit", "-1"); /** default & config values & script init */ $file_name = "INBOX"; $limit_lines = "1000000"; $total_lines = count(file($file_name)); break_inbox_file(0, $file_name, $limit_lines, $total_lines, 1); print memory_get_peak_usage(); function break_inbox_file($start, $file, $limit, $total, $part) { $line = 0; $message_num = 0; $content_part = null; $fih = new SplFileObject($file); $fih->seek($start); while(!$fih->eof()) { if ($fih->current() != "") $content_part .= $fih->current(); /** there is limit for 2044 files open per connection so don't let to have more then 2000 message in one part file */ if (preg_match("/From kobra/", $fih->current(), $matches)) { $message_num++; } /** exits at the end of the file but don't forget to write the last part of content */ if ($fih->key() == $total) { $file_tmp = "G:/parts/" . $file . "_" . $part . ".tmp"; $foh = fopen($file_tmp, "w"); fwrite($foh, $content_part); fclose($foh); return 1; } if ($line >= $limit || $message_num > 1999 || mb_strlen($content_part) > 74372611) { /** continue adding new content until we don't get to a news message start with the marker */ while (!preg_match("/From kobra/", $fih->current(), $matches)) { if ($fih->current() != "") $content_part .= $fih->current(); $line++; $fih->next(); } /** extract the content from the array into string & write it into file */ $file_tmp = "G:/parts/" . $file . "_" . $part . ".tmp"; $foh = fopen($file_tmp, "w"); fwrite($foh, $content_part); fclose($foh); unset($content_part); /** recursion starts here pass all default options + setup new start line and next file name index */ return break_inbox_file($start + $line, $file, $limit, $total, ($part+=1)); } $line++; $fih->next(); } } ?> 

 

4. Statistics & Performance

For 1GB Inbox file (about 10,000 messages) it took me about 5 minutes to separate the INBOX file into smaller (size) parts, about 20 minutes to separate into single message files & another 10 minutes to pull out all the attachments using munpack.

Backup your gMail Account *

Here are the steps that you need to take to backup your gMail account including all the attachments (under Windows).

1.Enable POP in Gmail

2. Download and install Cygwin

  • How to Install Cygwin
  • To download you email you need a program called fetchmail, so during the Cygwin installation go under the “Mail” category and select fetchmail, exim and procmail packages.

3. Setup and run Fetchmail

3.1 Create .fetchmailrc inside your home directory and change its permissions


  $ touch .fetchmailrc
    poll pop.gmail.com with proto POP3 and options no dns
    user 'your-gmail-user@gmail.com' there with password 'your-gmail-password' is 'your-cygwin-user' here options ssl
  $ chmod 0744 .fetchmailrc

 

3.2 Run fetchmail and find your ‘INBOX’ file (the file that contains all your email messages)


  $ fetchmail -vk --service POP3+SSL

 

You’ll find your gMail INBOX file under /var/spool/mail named your-cygwin-user. If the mail directory doesn’t exists you need to create it and set permissions:


  $ mkdir /var/spool/mail
  $ chmod 0744 /var/spool/mail

 

4. Separate messages & pull out attachments

Once you have you downloaded you gMail messages you a ready to pull out the attachments. For this we use a program called mpack which is available for Windows as well.

The program will come up with 2 executable files mpack.exe and munpack.exe (which we are going to use to pull out all the attachments). However, munpack needs each message into separate file, that’s why we need to use some PHP magic to separate the big INBOX file into individual message files.

Here is the PHP script that does the job (you need to modify the ‘your-cygwin-user’ to what you username is):


  <?php
    /** script global options */
    ini_set("max_execution_time", "9999");
    ini_set("memory_limit", "-1");

    /** default & config values & script init */
    $dir_part   = "parts/";

    /** get all part files inside the parts/directory */
    if ($dih = opendir($dir_part)) {

        while (false !== ($file_name = readdir($dih))) {

            if ($file_name != "." && $file_name != "..") {

                $full_name = $dir_part . $file_name;
                $total_lines = count(file($full_name));

                get_inbox_message(1, $full_name, $total_lines);
            }
        }
    }

    function get_inbox_message($start, $file, $total) {

        $line            = 0;
        $message         = array();
        $message_content = "";

        $fih = new SplFileObject($file);
        $fih->seek($start);

        while(!$fih->eof()) {

            if ($fih->current() != "")
                $message[] = $fih->current();

            /** exits at the end of the file but don't
                forget to write the last message */
            if ($fih->key() == $total) {

                foreach($message as $message_line) {

                    $message_content .= $message_line;
                }

                $file_tmp = "messages/msg" . base_convert(mt_rand(0x19A100, 0x39AA3FF), 10, 36) . ".tmp";
                $foh = fopen($file_tmp, "w");
                fwrite($foh, $message_content);
                fclose($foh);

                return 1;
            }

            /** marker which is set by fetchmail, this is where the
                start of each gmail message is. NEED TO CHANGE TO YOUR MARKER.
                Sample: From kobra Sun Mar 11 22:15:20 2012 */
            if (preg_match("/From kobra/", $fih->current(), $matches)) {

                foreach($message as $message_line) {

                    $message_content .= $message_line;
                }

                $file_tmp = "messages/msg" . base_convert(mt_rand(0x19A100, 0x39AA3FF), 10, 36) . ".tmp";
                $foh = fopen($file_tmp, "w");
                fwrite($foh, $message_content);
                fclose($foh);

                // go to the next line
                $line++;
                $fih->next();

                /** recursion starts here pass all default options
                    + setup new start line */

                return get_inbox_message($start + $line, $file, $total);
            }

            $line++;
            $fih->next();
        }
    }
  ?>

 

And once we have all gMail messages into separate files we are ready to run the munpack (assuming the the all messages are under /messages directory)


  C:>munpack messages/*

 

Continue reading in Part 2 of the article.

* Okay, I know there are a lot of steps involved and for larger gMail boxes it can take quite a while to do the backup (it took me 2 days to backup my 5GB account, 10-12 hours to download and another 10-12 hours to separate (part 2) the INBOX file into single message files)

Keep your HTML From Text Input & Textarea Default Values

Do you want to keep the default values in your text input & textarea from elements when they get out of focus?

The code below will remove the default value if the field is active and then if the user doesn’t input anything and field is out of focus the default value will appear back inside.

To accomplish this we will need to use the jQuery library and all you need to do is copy & paste the code below between your head tags.


<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.ftxt').each(function() {

    var default_value = this.value;

    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
        }
    });

    $(this).blur(function() {
        if(this.value == '') {
            this.value = default_value;
        }
    });
  });

  $('.fta').each(function() {

    var default_value = this.value;

    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
        }
    });

    $(this).blur(function() {
        if(this.value == '') {
            this.value = default_value;
        }
    });
  });
});
</script>

 

And this a very simple form with text input and textarea fields.


<form method="post" action="#">
  <input type="text" name="t1" id="t1" value="Enter you email address..." maxlength="255" class="ftxt" />
  <textarea class="fta" rows="10" cols="40">Comments / Questions / Suggestions</textarea>
</form>

 

Some of the Best Website Design Related Sites

Here is a very short list of some of the most useful sites about web design, inspiration and front end development.

How to Open External Links in New Window/Tab in WordPress

Here is very simple way to open external URL links in new window or tab in WordPress using the jQuery library. Just copy & paste the following code somewhere between your head tags.


<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("body a[href^='http://']").not("body [href*='thechoppr.com']").attr('target','_blank');
    });
</script>

 

This link will open in new window & this will not.

Some Free Tools to Speed up Web Development

photo via flickr (credit)

It won’t give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.

Suggestions:

Target with CSS

photo via flickr (credit)

BR generates a line-break and it is only a line-break. As this element has no content, there are only few styles that make sense to apply on it, like clear or position. You can set BR‘s border but you won’t see it as it has no visual dimension.

If you like to visually separate two sentences, then you probably want to use the horizontal ruler which is intended for this goal. Since you cannot change the markup, I’m afraid using only CSS you cannot achieve this.

It seems, it has been already discussed on other forums. Extract from Re: Setting the height of a BR element using CSS:

[T]his leads to a somewhat odd status for BR in that on the one hand it is not being treated as a normal element, but instead as an instance of A in generated content, but on the other hand it is being treated as a normal element in that (a limited subset of) CSS properties are being allowed on it.

I also found a clarification in the CSS 1 specification (no higher level spec mentions it):

The current CSS1 properties and values cannot describe the behavior of the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat ‘BR’ specially.

IMG vs. CSS Background Image

photo via flickr (credit)

In what situations is it more appropriate to use an HTML IMG tag to display an image, as opposed to a CSS background-image, and vice-versa?

Single-reason answers are welcome, but I’m hoping eventually to see a consolidated list of scenarios, rationales, etc. that can be used as a best-practice guide for making this kind of GUI design decision. Or rather, two lists: Pro and Con.

Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.

Pro and Con lists:

PRO

  • Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people).
  • Use IMG if you intend to have people print your page and you want the image to be included by default.
  • Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
  • Use IMG if you rely on browser scaling to render an image in proportion to text size.
  • Use IMG for multiple overlay images in IE6.
  • Use IMG with a z-index in order to stretch a background image to fill its entire window.
  • Using img instead of background-image can dramatically improve performance of animations over a background.

CON

  • Use CSS background images if the image is not part of the content.
  • Use CSS background images when doing image-replacement of text eg. paragraphs/headers.
  • Use background-image if you intend to have people print your page and you do not want the image to be included by default.
  • Use background-image if you need to improve download times, as with CSS sprites.
  • Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.

Best CSS Color-wheel Samples

photo via flickr (credit)

Most popular:

Adobe Kuler is widely considered to be the best color palette selector out there, as it also lets you share color palettes other users have created. Sign in, click create, and you’ll have options including “complementary” that give you a good starting point if you have one color in mind.

Others in alphabetical order:

Font size ‘%’ or ‘em’

photo via flickr (credit)

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

via AListApart

%: Some browsers doesn’t handle percent for font-size but interprets 150% as 150px. (Some NN4 versions, for instance.) IE also has problems with percent on nested elements. It seems IE uses percent relative to viewport instead of relative to parent element. Yet another problem (though correct according to the W3C specs), in Moz/Ns6, you can’t use percent relative to elements with no specified height/width.

em: Sometimes browsers use the wrong reference size, but of the relative units it’s the one with least problems. You might find it interpreted as px sometimes though.

pt: Differs greatly between resolutions, and should not be used for display. It’s quite safe for print use tough.

px: The only reliable absolute unit on screen. It might be wrongly interpreted in print though, as one point usually consist of several pixels, and thus everything becomes ridiculously small.

  Subscribe to our RSS Feed   Follow us on Twitter

You've arrived on the "Advanced CSS/HTML Explained" weblog. Here you will find how can you tackle the more difficult topics of Cascading Style Sheets: Floating theory, Forms, Tables, Navigation elements, CSS Positioning. Also you will find lots of Resources, Tutorials, Articles, and Tips, Tricks Tools, and Techniques on CSS.

Recent Posts

Categories

Twitter Updates

Bookmark and Share