‘computing’ Category

Internet Explorer bug

I’ve recently been spending a lot of time working on lots of new code (lots of JavaScript, PHP, HTML and CSS) for the Lab Rescue. I do all my testing in Firefox on my Macbook, using the fantastic Firebug debugger. Once everything was working, I booted up Windows XP and Internet Explorer 7 to confirm that it worked there as well. As soon as I opened the page in IE7 though, the browser window vanished, and IE7 exited without any warning or crash report.

I did my usual debugging technique of removing bits of code and trying again, so that when the crash stopped happening, I’d know which bit of code to focus my efforts on. Imagine my surprise when I had eliminated all my Javascript, and had gotten down to one line of actual HTML, and the crash was still happening! The one line was this:

1

  <button title="Example" value='foo'>Example 1</button>

Since this innocent line couldn’t possibly be the problem (or Microsoft would be in big trouble!), the only other place to check was the style sheet. Whittling it down, I ended up with the above HTML line, and this single style statement in the style sheet:

1
2
3

  button[value='foo'] {
    border: 2px solid red;
  }

With this simple attempt to style a button based on its value, IE7 would instantly crash. Go ahead, try it… open IE7 and click here. I haven’t been able to find any info on this problem online, but I’m pretty sure I’m not trying to do anything invalid (and even if I was, I would expect a browser to ignore the invalid code rather than silently crash). Anyway, it was a frustrating couple of hours trying to track down this problem, and then having to find a workaround which wasn’t nearly as elegant as the original solution.

One more reason (as if there weren’t enough already) to use Firefox!

My WordPress install

I promised a couple people I’d write up some of the technical details of the recent migration of www.mfischer.com to WordPress. This could take a while…

Background

My blog was hosted on Google’s Blogger.com, but the features and flexibility they offered were pretty limited. I also had lots of older “static” pages and our photo gallery running off my basement Linux server, unfortunately only available on port 8080 since Verizon’s FiOS doesn’t allow customers to run web servers on the standard port (80). My goal was to bring both these sites together, make them more dynamic, and hopefully easier to manage as well. WordPress features both a blog (called “posts”) and the ability to add static content (called “pages”), which seemed like it would suit me just fine.

The wordpress install

The actual wordpress install was extremely easy, assuming you have a little bit of Linux experience and know how to create a MySQL database. I was running version 2.2.2 during the initial install, and upgraded to 2.3 just recently when it was released.

Themes

There are thousands of different themes available, mostly at the official wordpress theme viewer site, but there are also many other places to look. I knew that I would want to customize whatever theme I ended up choosing, so I was looking for one that had the basic features I wanted and was easy to understand. My main requirement was a three-column theme with both sidebar columns on the right — most three-column themes seem to have one sidebar on each side and the content in the middle. I wanted three columns due to the relatively high amount of “extras” I wanted in the sidebars. I planned to have the most important information (the blog entries) on the far left, semi-important information (such as navigation) in the first sidebar, and “optional” information (XBox games, etc.) on the far right. This way, visitors with smaller monitors or browser windows — that might not fit the entire page width — wouldn’t risk missing out on important information. The theme I chose is titled Cleaker.

The biggest changes I made to the theme were:

1. The plain banner across the top I replaced with a dynamically changing collection of banners created from photos of our recent Mediterranean vacation. The animation is done by the free JW Image Rotator flash application. Set-up was pretty straightforward: install the flash app anywhere in the web site, add a few lines to the wordpress theme’s header.php file so that the flash app is loaded instead of the old banner, upload my banner images, and create an XML file listing the URLs of the images (the image rotator site links to a simple PHP script which does this automatically).
2. I added a double-wide box above the two sidebars where I could put a photo and very brief synopsis of the web site. This was done by creating a new sidebarDouble.php theme file with the code for the content box, and calling that file from each of the theme template files (page.php, index.php, archive.php, etc.)
3. Since the “search” form used to live in the banner area, which was now replaced with the flash image rotator, I put a search form in the navigation menu and moved the navigation menu from the right to the left (changing header.php and style.css).

That’s all the significant changes to the theme, apart from some color and spacing changes done in the style sheet.

Migration

Migration from Blogger wasn’t as easy as I’d hoped. Blogger offers an “export to XML” feature which I used, and WordPress has a Blogger import feature, but it wasn’t working for me. Some searching on Google confirmed this wasn’t my fault, and pointed out that WordPress’s blog hosting service at wordpress.com had a working Blogger import function. The solution was to create a new blogging account at wordpress.com, import from Blogger, then export as a WordPress archive, then import that into my self-hosted wordpress install. Clunky, but it worked.

This got me the main content (including comments) but not images. I found a wordpress plug-in that would import images from a Blogger blog, but it only worked partially, and I ended up having to do some scripting to correct the shortcomings of that plug-in.

As for importing the static pages from my basement, there were only a couple dozen so I settled on an afternoon of copying and pasting.

Sidebar widgets

WordPress makes it very easy to add content to the sidebars by installing “widget” plug-ins and dragging them to the desired sidebar location. Some basic widgets are included, to show a block of text, a list of links, etc.

In my left sidebar I have:

1. A “category cloud” widget showing all the categories I’ve posted blog entries in (vacation, for example) where the size of the word indicates how many posts are in that category. Clicking will list all posts in that category.
2. A “recent comments” widget showing the last five comments visitors have left on the blog.
3. A text widget providing links to some of my friends’ blogs.
4. A second text widget listing some of the major static pages on the site.
5. A third text widget with links to allow visitors to subscribe to blog updates via e-mail or RSS feed.

The right sidebar has:

1. A PHP widget that allows execution of any PHP code. In this case the code just calls one of the plugins I have installed — StatusPress — which displays my most recent FaceBook status.
2. An RSS feed widget that shows the most recent entry from Kathie’s blog.
3. Three instances of my [[wplink wp-ignlist]] widget that display the list of video games I’m currently playing, games on my wishlist, and my favorite games.

The right sidebar got rather long so I searched for an interesting way to display the content. I found it in deziner folio’s Simple Javascript Accordions script which collapses many bits of content, and allows displaying one at a time, folding the others up like an accordion. The script was quite simple and straightforward, which meant that although it didn’t do everything I wanted, it was easy to understand and modify. I changed it in several ways:

1. The script was very rigid about how its content must be structured, which was very different from the way WordPress’s sidebar widgets are structured. I modified it to work with any WordPress sidebar widgets automatically.
2. I added a timer to the script so that it would automatically “turn the page” every set interval rather than requiring a person to click a header. If a header is clicked, the timer is disabled.
3. I added a rotating “countdown clock” icon showing how long it would be until the next page was turned. This gives the visitor a better understanding of what’s going on and why the content keeps changing.

Other plug-ins

I currently have 14 plug-ins installed. You can see the complete list, along with descriptions, at my “[[wplink wordpress-plugins-i-use]]” page, which is automatically generated by one of the plug-ins! Some supply the previously mentioned sidebar widgets, some generate content that can be included in posts, and others handle the display of images. I’m still browsing through the WordPress plug-in database and will undoubtedly be adding more plug-ins in the future.

Wrap-up

That’s about all I can think of to write about the WordPress install. If you have questions or comments, feel free to leave a comment and I’ll reply pretty quickly.

New web site banners

If you’re reading this blog via e-mail or RSS feed, you won’t have noticed the variety of new banner images randomly parading their way across the top of the www.mfischer.com site. Stop by and check them out… click on the banner to visit the [[wplink banner-photos]] page to read the background behind this change, and check out all the new images. Here’s one, to give you a feel for the type of banner image I’m talking about:

New web site launched!

After a few (ok… more than a few) hiccups, the new mfischer.com is finally live!  There were far more moving pieces than I’d originally planned, including a few last-minute issues.  In short, I’ve set up WordPress software on a new server, and have consolidated almost all my content there under the www.mfischer.com name (no more separate blog.mfischer.com domain).  That meant migrating my existing blog from Google’s blogger.com, my static pages from home.mfischer.com (the Linux server in our basement), our photo gallery, and a few other odds and ends.  At the same time, I was implementing a few new things for the web site, which you’ll mainly find in the sidebars to the right.  They include live status updates from FaceBook, daily updates from 360voice.com on what our XBox 360 thinks I’ve been spending my time on each day, and personalized video game lists pulled from IGN.com.  Also along the top of this page are high-level menu options for the major parts of the site.

If you’re subscribed to the daily email updates or the RSS feed, you should continue to receive updates from the new site automatically.  Since the feed is smart enough to detect that the blog is running on a new site, it thinks all the posts are new, so you’ll probably see 10 or so blog entries that you’ve already seen before during the day of the switchover (today, Wednesday).  Sorry about that!

Look for a more detailed post on my WordPress configuration once things settle down a bit.

Catching up

It’s been a little while since my last update. I’ve been a little hesitant to post because I’m working on redesigning my web site and blog, and was planning to finish that first… but as with most things, it’s taking longer than expected. Right now my blog is hosted by Google, and I’ve got some static web pages on my Wiki running in my basement (which is a pain because with Verizon’s FiOS, my IP address changes from time to time, and they block the standard web server port, so I need to run my server on port 8080), and some older pages just lying around in various places. I’m working on consolidating everything into one application: WordPress. I’m hoping to be done in a week or two. In theory, RSS feeds and e-mail subscriptions should keep working, but if you stop getting automatic blog updates after mid-September, check back in at www.mfischer.com to re-subscribe.

If you’ve been reading Kathie’s Blog you’ll know most of what’s been going on recently. To sum up, we went to a Nationals baseball game last weekend, we’ve got a new foster dog named Harper, and we’ve been playing a lot of video games. Our XBox 360 blogs for us automatically every day about what we’ve played… here’s my 360 blog and here’s Kathie’s. The 360’s online / Internet functionality is light-years ahead of the Playstation 3 and Wii — even though those consoles came out a full year after the 360. Since the long (long, long) awaited Metroid Prime: Corruption came out last week for the Wii, that’s pretty much all I’ve played. We’ve also been working on the garden outside again now that the weather isn’t as oppressive, and working on our resumés since we’re thinking it’s time for our vacation to wrap up soon.