Internet Explorer PNG problem

I just installed a weather icon on the side bar of my blog. In Firefox it looks great. It draws a PNG formatted icon for the weather condition. The plugin is easy to install, provides a option page in WordPress admin and is easy to work with.

Being pleased with myself I mentioned this to my wife and took a look at the web page on her computer to show her. The icon looked less than good. She uses Internet Explorer which does not handle PNG transparency. Below is what happened.

ie-png-problem

The left side is Firefox, the right Internet Explorer. After looking up the problem in the WordPress support forums I found this web page to solve the problem.

Great help! I put a copy of the pngfix.js into the wp-content directory and in the header.php file for my theme right after the <HEAD> portion I added

<!–[if gte IE 5.5000]>

<script type=”text/javascript” src=”http://www.dembowski.net/pngfix.js”></script>

<![endif]–>

And now the transparency of the PNG icons are handled correctly within Internet Explorer. Very easy fix.

Ubuntu Linux

ubuntu.pngI had been thinking about playing with Ubuntu Linux for some time now and at the end of October I went to the web site https://shipit.ubuntu.com/ and ordered a set of Ubuntu 5.10 CDs. You fill out the form, and they ship you CDs for free. Minimum order is 5.

Friday the CDs (5 sets, cool) arrived and in each CD folder is an install CD and a Live CD. I ran the live CD on my desktop and also on my laptop. The Live CD is very functional and I could not break it. Even when I made my laptop sleep, the session “woke up” without a hitch. My graphic and sound cards were supported. Applications like e-mail clients, web browser, I even ran Synaptic and updated the running live session. Worked flawlessly.

I am typically a RedHat Linux user from version 4.2 and on. This server runs the free RedHat derivative Fedora. But the desktop experience for both RedHat and Fedora has always been very lacking. Applications break (I could kill the e-mail client Evolution in 5 minutes, I don’t know why) and the desktop felt less than user friendly. It was just all part of the Geek Appeal. You expected Linux to be clumsy and require editing of files using vi.

Ubuntu Linux installed on my desktop with no problem. I have a nvidia 6800GT graphics card. In the past I would install a Linux distribution, get it working, install nvidia’s drivers, edit configuration files by hand, experience some pain till I got all the options right. Eventually I would be able to run my 3D accelerated video game (which BTW runs perfectly on the same dual booting Windows XP system) and enjoy.

On Ubuntu it is just a matter of running Synaptic (GUI for package management) installing some packages, and run a simple command. The whole process is well documented here.

Everything works really well. For a desktop solution this is the most easy going distribution I have seen so far.

More fooling around with WordPress

This is a posting using Zoundry Blog Writer. fear-end.jpg

The picture on the side was taken in the F.E.A.R. game at the end. This is me playing with the picture placement within Zoundry Blog Writer Lite.

A few days ago I put in a lengthy blog entry about using the Apache module mod_layout. I wrote over a thousand words and the posting ate up most of the web page.

After looking around I found this plugin for WordPress called PostTeaser. This plugin takes the posting and truncates it after a set number of words (defaults to 100 words) on the main web page. At the bottom of the preview it puts a link so you can go directly to the posting. That plugin keeps the blog organized and presentable.

I have also been playing with windows applications for posting blog entries (see below). Right now I think that I am really choosing between BlogJet, Zoundry Blog Writer Lite, and just sticking to the ‘Write Post’.

BlogJet works really well, but for some reason when it publishes it posts to a different timezone (GMT I think, I am EST). It’s simple, I can (and have) modified the html code it generates by hand. The timezone thing is weird and I am sure that it is because I have not read the manual. If I can’t figure it out I’ll just e-mail the author. My lengthy apache mod_layout post was made using Blogjet.

Zoundry Blog Writer Lite looks really slick. I played with the picture insertion and editing, it does multiple pingbacks, etc. I need to play with it some more, and see which one I like.

Adding favicon.ico to every web page

Edit May 2nd, 2009: It’s amazing that I still get hits for this web page.  This info was from 2005 and these days it is easy to add a favicon.ico just by putting a copy in your web servers root directory.

Original post below.

– – – – – – – – – – – – – – – – – – – – – – – –

Recently I figured that I would add an icon for the web pages. After some digging I found that in order to do this, all you need to do is put a Windows formated favicon.ico file on your web server and add the following tags

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

within the <HEAD> portion of the web page. The second tag seems to be for Internet Explorer. Pretty easy to do, an when you add that URL to your favorites in Internet Explorer, the icon gets listed in the menu next to the title.

In Firefox it’s even better. The icon next to the URL http://www.dembowski.net/ shows up there too. Very cool. I put the favicon.ico I created on my web root so http://www.dembowski.net/favicon.ico works.

Then I realized that in order to get the icon onto all my pages I would have to insert that HTML tag into every page by hand.

Not so cool. Some of the pages, WordPress blog software for example, were not created by me. I can modify them but that is potentially a lot of pages to mess with.

I run this server on a Linux distribution (Fedora Core 1) and am running this blog on the Apache 2.0 web server software. It’s a good environment and just about every idea has been done already.

Turns out there is an Apache module called mod_layout (http://tangent.org/index.pl?lastnode_id=478&node_id=362) that can dynamically modify web page content based on entries in the config file.

So I downloaded the latest source from the author’s web site (http://download.tangent.org/mod_layout-4.0.2a.tar.gz) uncompressed the software and built.

That’s when the fun began. The documentation I found online is dated and no longer entirely applicable. The mailing list archives were not much help either. I could have sent the author an e-mail (the mailing list archive shows he’s a really good guy) but I A) did not want to bug him for a RTFM question and B) why couldn’t I just figure it out? I have the source code after all.

After looking at the source code and trying unsuccessfully to figure it out, I reasoned that some distribution (not Fedora) bundles mod_layout. I went onto google and found apache2-mod_layout-2.0.48_4.0.1a-2sls.i586.rpm. It’s part part of the OpenSLS distribution which I never even heard off. This rpm contained a well commented config file 15_mod_layout.conf which spelled out what each config option does.

I’ve put a copy of that sample conf file at http://www.dembowski.net/15_mod_layout.conf. OpenSLS apparently became Annvix at http://annvix.org/.

On Fedora Core 1, I needed to install the httpd-devel package (yum install httpd-devel as root). The Makefile needed be changed since Fedora moves the apache source and utilities from the default.

The diff for the Makefile is

$ diff Makefile mod_layout-4.0.2a/Makefile
5,7c5,7
< top_srcdir=/usr/local/apache2
< top_builddir=/usr/local/apache2
< include /usr/local/apache2/build/special.mk

> top_srcdir=/usr/lib/httpd
> top_builddir=/usr/lib/httpd
> include /usr/lib/httpd/build/special.mk

Then as root just

$ cd mod_layout-4.0.2a/
$ make && make install

This will build and copy the binary mod_layout.so to /usr/lib/httpd/modules add to the /etc/httpd/conf/httpd.conf file the line

LoadModule layout_module /usr/lib/httpd/modules/mod_layout.so

Which I copied and deleted. The httpd.conf file is part of the httpd rpm package; I try to not mess with that except when needed. Instead in the /etc/httpd/conf.d directory I created a file called mod_layout.conf. All *.conf files in that directory get read and included, so modifying the the main file is just not needed.

In that file I placed the following lines:

LoadModule layout_module modules/mod_layout.so
AddOutputFilter LAYOUT html

Layout “<HEAD>” “<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”><link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>” append

LayoutComment On

First line is loads the mod_layout module. Then I have a AddOutputFilter LAYOUT for html. I have to try peppering a plain text file with <HEAD> just to see what happens, but the filter should only be engaged for HTML content.

The Layout command is where the good stuff happens. Whenever the <HEAD> string is seen, it appends right after that the two tags

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”><link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

This way I keep the <HEAD> tag intact and get what I want, a reference for the icon on every web page. I added the LayoutComment On as a sanity check.

Here is the difference it makes. For http://www.dembowski.net/foo/junk.html

<HTML><HEAD><TITLE>mod_layout test</TITLE>
</HEAD>
<BODY BGCOLOR=”#fefefe” TEXT=”#222222″ LINK=”#000000″ VLINK=”#222222″>
TEST OF GAH!
</BODY>
</HTML>

Comes out as

<HTML><HEAD>

<!– Beginning of: Static Content –>

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”><link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

<!– End of: Static Content –>

<TITLE>mod_layout test</TITLE>
</HEAD>
<BODY BGCOLOR=”#fefefe” TEXT=”#222222″ LINK=”#000000″ VLINK=”#222222″>
TEST OF GAH!
</BODY>
</HTML>

Which works exactly as I wanted. It’s all good.

The only minor drawback I see is that the next time I get an update to my httpd package (security, bug fix, developers added something, etc.) I’ll have to rebuild the module.

Okay found one commercial product for posting.

BlogJet logo

Hrm. Here is an interesting program. BlogJet is a windows application that gives a GUI for blog posts. It supports

  • Bullets
  • Spell Checking
  • Insertion of links to images (see above logo)
  • And comes with a 30 day trial

It has all of the usual formating tools one would expect from a word processing like tool.

I’ll kick it around for a while and see if it works for me.

Interesting application this WordPress

After a couple of days I can see that blog’s are an interesting concept, and light weight software on the server and client. Using WordPress I can

  • Write and publish content,
  • I can play with the theme of the blog,
  • Administer the blog,
  • install new themes, plugins, etc.

All done with very little effort; this software is very easy to use. WordPress was disturbingly quick to install and very little Geek Points needed to set this up. Total time spent setting this up was all of 45 minutes, and mostly because I did not read the easy to read and search online help. But I also see that there are some (minor) drawbacks.

I have not yet seen (okay in a few days) a good interface for formating and dropping in graphics. The default tool is very good and easy to use but requires the author to insert HTML codes. What I’d like to see is some sort of editing tools along the lines of gmail’s interface. Gmail’s compose mail tool let’s you format the text, insert bullets, change font and size, etc. I’m very happy with WordPress and will keep looking for someway to do this. GMail might actually work; I can setup a mail account and post via that e-mail. I’ll set that up and see if it preserves the html formatting.

F.E.A.R. Game

Two weeks ago I purchased a really cool game called F.E.A.R.

This is a scary well written horror/action flick. It’s meant to be played in the dark with the volume turned up. And the kids asleep, the game is very graphic.

The game is so good, I upgraded my 128MB Geforce 5700 to a BFG 6800GT OC 256MB DDR card. It was well worth it, even if I still cannot run the game at the maximum settings.