Lazy Load will display images (content) that are on the visible portion of the web page, images that are outside of the visible are of the page are not loaded until the user scrolls down the page – this is when Lazy Load will load those images. The idea is to save page load time. Since the images outside of the visible area are not loaded until the user scrolls to them, load time is saved. Let’s see we’re looking at a blog that displays 20 articles on a page and has several images in each post. When we load the page, we’re probably only seeing the first 2 articles on top, while we’d have to scroll down to see the rest of the posts. Well, since we’re not actively looking at the rest of the posts at that time, then we wouldn’t need the images within those posts loaded, right? We’d only need to see those images when we scroll down the page to view those posts. That’s the great idea behind this tool, it will load the images outside of the active visible area of the browser when the user scrolls down to that part of the web page. Load time is saved because those images outside the active visible area of the page are simply not loaded, but are waiting to be loaded when the user gets to that part of the page.

Ok, so now we know how great this idea is, and how wonderful of a tool we have here. Now we’re going to focus on the plugin for WordPress that implements this tool. I recently installed this plugin and noticed only 1 thing it was missing – a setting to target elements. Why do we need this setting? Well, if you’ve installed this plugin and used it, you’ll notice that some images that are in the active visible area of the screen aren’t loading until the user scrolls to the bottom of the page (actually, to the bottom of the main content area – the posts.) An example of this would be a sidebar, and this is because the HTML for that sidebar would come after the HTML for the main posts – towards the bottom of the page. Even though the HTML for that sidebar is at the bottom of the page, CSS will bring it to the top (if that’s how your layout is being displayed.)

First, let’s think of how we’re going to fix this problem. The function is being applied to all elements of the page. We know there’s a function that handles the lazy loader and if you’re familiar with jQuery, we know that that we can target specific elements, and apply the function to those specific elements. We only want to target our posts and maybe the footer. First determine what classes or ids of the elements that contain the content you want to target are. In my case (at the time of this post) my I’m going to use #mainColumn and #footer, because those ids are applied to the elements of the content that I want to target.

Changing the code to target these elements is really easy, so let’s change it! First let’s take a look at the original code that call’s this function (we don’t need to change the function, just the call to the function.)

~/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php

<?php
 
  /*
  Plugin Name: jQuery lazy load plugin
  Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
  Description: a quick and dirty wordpress plugin to enable image lazy loading.
  Version: v0.10
  Author: Andrew Ng
  Author URI: http://blog.andrewng.com
  */
 
function jquery_lazy_load_headers() {
  $plugin_path = plugins_url('/', __FILE__);
  $lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
  $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
  wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
}
 
function jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('images/grey.gif', __FILE__);
  echo <<<eof
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>
EOF;
}
 
  add_action('wp_head', 'jquery_lazy_load_headers', 5);
  add_action('wp_head', 'jquery_lazy_load_ready', 12);
?>

The description of this plugin is completely accurate, quick and dirty. The only thing it really lacks is a configuration for the selector that the function is called from – jQuery(“img”).lazyload on line 27. This is what is applying the Lazy Load function to every image on the page. We’re going to change it so that it only selects what we want it to, again in my case (at this time) it’s #mainColumn and #footer.

We’re going to change the line 27 of that same document we have opened to this:

27

  jQuery("#mainColumn,#footer").find("img").lazyload({

All this says is “jQuery, find all the image tags in the #mainColumn and #footer elements, and apply the lazyload function to them!”; Like I said, very easy

With all the keys working and utilities available for the MX5500, getting mail notifications via keyboard is really easy to do. What keyboard notifications am I talking about? In Windows, the keyboard will give a little beep when a new email is received. Also, a mail icon will pop up in the LCD on the keyboard.

First we need a mail notification application that can run custom commands on new email received and email checked (we need something to get rid of the mail icon once the mail notification has been acknowledged.) Here’s a good one: Mail Notification. Note: if you have problems with getting SSL to work, you’ll need to add a source to the repository to get an updated version (see https://launchpad.net/~mail-notification-ssl/+archive/ppa).

Once we get Mail Notification installed, we’re going to need a utility to control the keyboard functions (such as the beep and LCD icons.) This utility is called mx5000-tool. We’re not going to go into instructions on installing this, as they are readily available via a quick Google search. Here is a good link to follow to get this utility installed: http://www.gentoo-wiki.info/Logitech_Cordless_Desktop_MX_5000#Installing_mx5000-tools.

Next we’re going to make two scripts, one for new mail and one for read mail. I like to keep things organized in my home directory, you can place these scripts anywhere you want.
~/.scripts/mx5500/mail_new.sh:

1
2
3
4
5
6
7

#!/bin/sh
 
#send a beep to the keyboard
mx5000-tool --device /dev/hiddev0 -b
 
#set the mail icon on the keyboard to 1 - on
mx5000-tool --device /dev/hiddev0 -i 1000

~/.scripts/mx5500/mail_read.sh:

1
2
3
4

#!/bin/bash
 
#set the mail icon on the keyboard to 0 - off
mx5000-tool --device /dev/hiddev0 -i 0000

Remember you need to make these 2 files executable: chmod +x ~/.scripts/mx5500/*

Now to pass these scripts as custom commands for the mail notification app.

Run gconf-editor by either running that in a terminal or hit ALT+F2, type ‘gconf-editor’ an hit ENTER. Browse to apps -> mail-notification -> commands. Here we see ‘mail-changed’, ‘mail-read’ and ‘new-mail’.

Click on ‘new-mail’ and change the ‘command’ value to “~/.scripts/mx5500/mail_new.sh” (without quotes.)

Click on ‘mail-read’. Now when I was entering the custom command for this function, the ‘command’ value was set as an integer. Go ahead and double click it and change it to a string. Now, change the ‘command’ value to “~/.scripts/mx5500/mail_read.sh” (again, without quotes.)

That’s it! You can now sit back and enjoy the keyboard beep boop.

Append these lines before the final </dict> and </plist> elements:

<key>IncludeDebugMenu</key>
<true/>

Restart Safari, you’ll now notice the ‘Develop’ menu option next to ‘Bookmarks’ and ‘Window’.

Enjoy.

So I found this great module for Magento the other day, made by SingleFeed. It will export a product data feed every night. Then, we can import this feed into things like Google Base.

I ran into a problem though. You can’t import a data feed into Google Base that contains HTML tags and special characters. Most of the clients I work with prefer to have a WYSIWYG editor for things like the CMS pages, product descriptions, etc., which will add HTML formatting in the database. The SingleFeed Export Module does not automatically strip HTML on the fly (however I believe if you sign-up for an account at their website, they have a wizard that can do it for you.)

I poked around at the code for a bit and discovered that stripping the HTML tags and special chars would be quite easy using two functions: strip_tags, htmlspecialchars_decode.

Open app/code/community/SingleFeed/Export/Model/Mysql4/Profile.php and goto line 360:

360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382

// format product data as needed
foreach ($products as $id=>&$p) {
  foreach ($p as $attr=>&$value) {
    // replace raw numeric values with source option labels
    if ($options = $this->attr($attr, 'options')) {
      if (is_array($value)) {
        foreach ($value as &$v) {
          $v = isset($options[$v]) ? $options[$v] : '';
        }
      } else {
        $value = isset($options[$value]) ? $options[$value] : '';
      }
    }
    // combine multiselect values
    if (is_array($value)) {
      $value = join(', ', $value);
    }
    // process special cases of loaded attributes
    switch ($attr) {
    // product url
    case 'url_path':
      $p["singlefeed.url"] = $baseUrl.$value;
      break;

I love well-written code, especially with good comments. All we’re going to do is add in our new formatting (in this case, just for the product description.)

360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386

// format product data as needed
foreach ($products as $id=>&$p) {
  foreach ($p as $attr=>&$value) {
    // replace raw numeric values with source option labels
    if ($options = $this->attr($attr, 'options')) {
      if (is_array($value)) {
        foreach ($value as &$v) {
          $v = isset($options[$v]) ? $options[$v] : '';
        }
      } else {
        $value = isset($options[$value]) ? $options[$value] : '';
      }
    }
    // combine multiselect values
    if (is_array($value)) {
      $value = join(', ', $value);
    }
    // process special cases of loaded attributes
    switch ($attr) {
    // product url
    case 'url_path':
      $p["singlefeed.url"] = $baseUrl.$value;
      break;
    // product descriptions
    case 'description':
      $p["description"] = htmlspecialchars_decode(strip_tags($value));
      break;

That was almost a little too easy…

From www-947.ibm.com:

The USB 2.0 specification requires a 10ms reset recovery time (TRSTRCY) after port resets before commands are issued to USB devices.

However linux kernels before 2.6.11 do not implement this recovery time leading to failures on USB 2.0 devices.

This failure is intermittent and seen on some devices (If other system activity causes there to be a 10ms delay between port resume and device access, then it works, else it would fail).

It also depends on the Host controller implementation.

The EHCI controller in the Broadcom HT1000 (BCM5785) SouthBridge does not like this violation of the spec. and fails to initialize devices.

I was using DD-WRT v24-sp1, and unfortunately I was having this problem. Luckily there is an unstable SVN version that fixes this problem.

From www.dd-wrt.com:

The unstable SVN version is in the others/EKO directory

Eko TNG svn 11296
http://www.dd-wrt.com/dd-wrtv2/down.php?path=downloads%2Fothers%2Feko%2FV24_TNG%2Fsvn11296/

dd-wrt.v24-11296_NEWD_mega.bin
TNG means the next generation,V24 SP2
NEWD means new driver, 500gpv2 should use NEWD version

I was nervous about installing this because it’s not an official release, but I felt re-assured after seeing several other people with the same router (Linksys WRT350N) running this SVN version. Installation went perfectly, and there is a new section/tab for USB.

After I could see that everything was working properly, I temporarily moved the data on the USB storage and re-partitioned the hard drive. I made 4 partitions: opt (2GB ext3), jffs (2GB ext3), swap (2GB linux swap), storage (~ FAT32.) I did this so that I would be able to install optware packages onto the USB storage instead of using the memory on the router. The memory on the router is very limited, mounting optware to the USB storage now gives me the space to install whatever I want.

After everything was said and done, I installed Samba and now the FAT32 partition is shared over my network. I’m not going to go over all the steps involved such as mounting the partitions and installing Samba, because this is already covered on the DD-WRT Wiki. Good luck!!

The widget for displaying your latest tweets lists each tweet enclosed with li (listed item) tags. Unfortunately, these listed items have no unordered or ordered list parent tag. This causes a the markup to be invalid. To fix this is quite easy…

Open TweetSuite.php and goto line 907:

907
908
909
910
911
912
913
914
915

$buff = $wpdb->get_results("SELECT * FROM $table_name order by datetime desc limit $max");
 
foreach ($buff as $line) {
	$tweet = $line->tweet;
	$link = $line->link;
	$dt = date('m/d/y h:ia', $line->datetime);
	$output .="<li class=\"tweet\">$tweet <a href='$link'?phpMyAdmin=GNiTviqADsNCTwBkw2A2k7Yfxf8>$dt</a></li>";
}
echo $output;

and add in the appropriate opening and closing tags…

907
908
909
910
911
912
913
914
915
916
917
918
919
920

$buff = $wpdb->get_results("SELECT * FROM $table_name order by datetime desc limit $max");
 
$output = "<ul>";
 
foreach ($buff as $line) {
	$tweet = $line->tweet;
	$link = $line->link;
	$dt = date('m/d/y h:ia', $line->datetime);
	$output .="<li class=\"tweet\">$tweet <a href='$link'?phpMyAdmin=GNiTviqADsNCTwBkw2A2k7Yfxf8>$dt</a></li>";
}
 
$output .="</ul>";
 
echo $output;

This will enclose all the listed items with an unordered list tag, thus fixing the invalid markup.

The other problem I found was that some of the tweets had special characters (such as an ampersand) that were not converted to the specific html character code. This will also cause validation errors. To convert any special characters to use the appropriate special character code, we’ll need to make a real simple change.

Open TweetSuite.php and goto line 915:

915

$output .="<li class=\"tweet\">$tweet <a href='$link'?phpMyAdmin=GNiTviqADsNCTwBkw2A2k7Yfxf8>$dt</a></li>";

and change it to…

915

$output .="<li class=\"tweet\">" . htmlspecialchars($tweet) . " <a href='$link'?phpMyAdmin=GNiTviqADsNCTwBkw2A2k7Yfxf8>$dt</a></li>";

This will now convert any special characters in a tweet to use special character code.

My first step was to upgrade my version of DD-WRT to v24-FINAL. Doing this gave me the option to enable USB via the web control panel. The upgrade went flawlessly. I enabled USB and my external hard drive is connected.

This is where I am right now. I’m doing a bit of reading into where to go from here, but it looks like I’m going to have to install some Optware packages. My main concern now is how much space I have on the router to be able install the packages I will need.

First, lets go ahead and make a template for the mini login box.  Take a look in ⁄template⁄customer⁄form⁄…  What’s this!?  We already see that there is a mini.login.phtml.  For a closer look:

<form action="<?php echo $this->getPostActionUrl() ?>" method="post">
    <table width="100%" class="mini-login">
        <tr><td><?php echo $this->__('Email') ?>:</td><td><input name="login[username]" /></td></tr>
        <tr><td><?php echo $this->__('Password') ?>:</td><td><input name="login[password]" /></td></tr>
        <tr><td>&nbsp;</td><td><input type="submit" value="<?php echo $this->__('Login') ?>" /></td></tr>
    </table>
</form>

We’ll, even though functional, this isn’t styled nor does it fit in with the default Magento template. So let’s change this.

<div class="box base-mini mini-login-form">
    <div class="head">
        <h4><?php echo $this->__('Login') ?></h4>
    </div>
    <form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
        <div class="content">
            <ul class="form-list">
                    <li>
                        <label for="email"><?php echo $this->__('Email Address') ?> <span class="required">*</span></label><br />
                        <input name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" title="<?php echo $this->__('Email Address') ?>" id="email" type="text" class="input-text required-entry" style="width:122px;" />
                    </li>
                    <li>
                        <label for="pass"><?php echo $this->__('Password') ?> <span class="required">*</span></label><br />
                        <input name="login[password]" type="password" class="input-text required-entry validate-password" id="pass" style="width:122px;" />
                    </li>
                </ul>
                <p class="required"><?php echo $this->__('* Required Fields') ?></p>
          </div>
    <div class="actions">
        <button class="form-button-alt" type="submit" name="send" id="send2"><span><?php echo $this->__('Login') ?></span></button>
    </div>
</form>
<script type="text/javascript">
    var dataForm = new VarienForm('login-form', true);
</script>
</div>

Also add this to your CSS:

.mini-login-form h4 { background-image:url(../images/icon_page_white_text.gif); }

Now that we have a template (mini.login.phtml), we’re going to have to add it to our block structure. Open layout/customer.xml, and make this change starting at line 65.

<customer_logged_out>
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
        </reference>
        <remove name="wishlist_sidebar"></remove>
        <remove name="reorder"></remove>
        <reference name="right">
            <block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
        </reference>
    </customer_logged_out>

Remember to copy this file/folder structure and put it in app/code/local. We do this, because when you go to upgrade your Magento installation, your core files get patched, thus erasing all the hard work you did

Java is always something I wanted to learn. Also, I enjoy reading books published by Apress.

MooTools is a light, modular JavaScript framework that makes adding Ajax, animations, and interactive elements to your site a breeze. This would help a lot with web animation, and avoiding building applications in Flash.

Ubuntu 8.10

First, copy/paste below

<match key="info.product" string="TPPS/2 IBM TrackPoint">
<merge key="input.x11_options.EmulateWheel" type="string">true</merge>
<merge key="input.x11_options.EmulateWheelButton" type="string">2</merge>
<merge key="input.x11_options.YAxisMapping" type="string">4 5</merge>
<merge key="input.x11_options.XAxisMapping" type="string">6 7</merge>
<merge key="input.x11_options.Emulate3Buttons" type="string">true</merge>
<merge key="input.x11_options.EmulateWheelTimeout" type="string">200</merge>
</match>

Then, make a new file /etc/hal/fdi/policy/mouse-wheel.fdi

sudo vi /etc/hal/fdi/policy/mouse-wheel.fdi

Insert a new line by hitting the letter i
Paste by hitting shift+ctrl+v
Save and quit by typing :wq
Reboot.
That’s it, pretty hard eh?

Ubuntu 7.10

Replace the mouse entry of your /etc/X11/xorg.conf with the following (its a good idea to back up your xorg.conf before making any changes):

Section "InputDevice"
 
Identifier "Mouse1"
 
Driver "mouse"
 
Option "Protocol" "ExplorerPS/2" # IMPS/2 is not recommend for TrackPoints
 
Option "Device" "/dev/input/mice"
 
Option "EmulateWheel" "on"
 
Option "EmulateWheelTimeout" "200"
 
Option "EmulateWheelButton" "2"
 
Option "YAxisMapping" "4 5"
 
Option "XAxisMapping" "6 7"
 
EndSection

Reboot.