Jeff Malterre

accessible web programmer, SEO specialist, e-commerce professional

WordPress Plugin jQuery Image Lazy Load – Targeting main content and not the sidebar.

Recently I found this plugin called jQuery Image LazyLoad, and it’s been around for 3 years now. In history, web designers and developers wanted their images preloaded when a user browses to their page, in order for it to display properly and look seamless – you can find a plethora of old JavaScripts out there that do this. However, this was mostly intended for the design, and not for the content. Lazy Load is intended for content, not design, and it works in the exact opposite way.

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.)

Read the rest of this entry »

Ubuntu 9.10 – Logitech MX 5500 – Getting keyboard mail notifications to work

First I’d like to say how happy I am that *every* key/mouse button works except the Flip 3D/Zoom keyboard buttons – which I’m going to be working on soon. Everything works out of the box, even horizontal scrolling with mouse wheel tilt left/right. I’m pretty impressed!

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.

Read the rest of this entry »

Enabling the Developer menu in Safari 4 (for Vista and Windows 7)

Had a little bit of a run-around trying to do this because some information I found was for another version so I thought I’d post a quick ‘how-to’ up here. We’re going to be editing the preferences file for Safari. This file has a .plist extension and to edit it you’ll need to get this. After you finish downloading and installing it, launch it. Now go to File -> Open, and browse to this location: \Users\<your user name>\AppData\Roaming\Apple Computer\Preferences\, the file we need to edit is com.apple.Safari.plist so go ahead and open it.

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.

SingleFeed Export Module for Magento – How to strip HTML tags and special characters

Tested on:
SingleFeed Export Module v1.1.0
Magento v1.3.2.4

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.)

Read the rest of this entry »

DD-WRT350N v24 SP2 – Updated!

Originally I had thought my USB storage device was successfully connecting to router, it wasn’t. After reading a bit I discovered why…

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.

Read the rest of this entry »

TweetSuite for WordPress Plugin – W3C Validation Error: Fixed

TweetSuite is a great plugin, it has a widget for displaying your latest tweets, displays tweetbacks, and lets you add in links to tweet or re-tweet a post on your blog. There’s more then a few things that need to be fixed with this plugin (ref: TweetSuite Errors and Troubleshooting), right now I’m just going to focus on some markup validation errors I came across.

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…

Read the rest of this entry »

DD-WRT350N – USB Multimedia

So I run DD-WRT on my Linksys WRT-350N router. I know the router comes with a media server, allowing music and videos to be played through a wireless connection. My goal is to get this working using DD-WRT, but I’m having trouble figuring out how to do this.

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.

Adding a mini login box to Magento

I’m surprised there is not one in the default template for Magento.  Nevertheless, it’s pretty common to see a login box on a sidebar, and I need one.  This is actually pretty simple to do, we’re going to be modifying templates, layouts, and unfortunatly we’re going to have to alter the core (for something really silly.)

Read the rest of this entry »

3 books I'd like to read

VIM is probably one of the most powerful text editors I’ve ever come across. I can’t even begin to tell you what it’s capabilities are. This book is probably a little advanced for me, but I’ll still be able to learn from it.

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.

Thinkpad x61 with Ubuntu: Getting the 3rd mouse button to work.

There are two different methods I found, which work for different version of Ubuntu.

Read the rest of this entry »

del.icio.us

  • No bookmarks avaliable.