The other day I learned how to wrap text in a paragraph next to an image. Normally I hate dealing with CSS as I’ve found it to be very twiddly and time-consuming to get the right effects and I stay away from it but this site explains the wrapping fairly well (I like the analogy of the text on the page flowing around images like water in a stream) AND it links off to the official CSS 2.1 documentation with examples.

Another page that talks about this in the context of a larger example is Fancy Form Design Using CSS which I’ve found to be awesome!

Since I only wanted text floating around selected images in the posts of this Wordpress blog all that was required was creating a new style class to apply to any images where I want the text to float:

.floatimg{
  float: left;
  padding:5px 10px 5px 5px;
}

All that is now required is to add the new class “floatimg” as an attribute to the img tag where I want the text to wrap around:

<img class="floatimg" src='http://alweb.homeip.net/dw0rm/dblog/wp-content/uploads/2008/04/river.jpg' alt='River' />

Easy!

A while ago I mentioned how I had to switch off my spambot protection because of something broken in the new Wordpress Indigo theme I installed. It turned out the theme writer forgot to add all the necessary “plugin API hooks” to the theme files. The hooks are basically a set of markers that Wordpress uses to mark locations in the theme where extra functionality can be inserted with the help of plug-ins.

The Peter’s Anti-Spam Image Plugin that I use for comments hooks into the theme at the location marked with the comment_form hook. This hook was missing from the comments.php and the Anti-Spam plugin was not displaying.

I double checked the remaining hooks and found a couple of other ones missing as well. Makes you wonder how difficult it would be for the Wordpress Theme site to create an automatic theme checker that verifies the presence of required plugin hooks for all newly uploaded themes? This would serve as a basic code review for theme writers and I’m sure it would save many people trying out new themes from wasting time figuring out why functionality that worked on their previous theme has suddenly stopped working when they applied a new theme.

Oh and btw, it took the spambots about a month to index the site again and start posting spam comments. In the last week I would get between 3-5 spam posts per day which was the main reason why I finally got around to fixing the antispam plugin.

Had a short panic attack the other day. Got an email saying my blog got hacked! Included in the email were my user id and password to the blog. My first thought “how the ?$#@” but then the *hacker* went on to point out how in the code for the todolist in my previous blog entry which I made available for download I accidentally left in the login details to my site. To make matters worse the password was the same I used for my web mail account which he went on to log on to send the actual email from.. what a slap in the face of this sloppy blog writer…

I’m glad this was noticed by somebody honest enough to point this out to me. One can only have nightmares about the *bad* stuff that could happen to your identity should it get into the wrong hands..

On a different note - a couple of updates to the blog itself over the last few weeks: I have made my old wiki public - maybe somebody will find useful information in there - link available through the top menu or here. I have also added a link to my new and growing collection of external pages I have recently read and found interesting in one way or another. I will keep this updated as often as need be..

Something I wanted to share today is a little widget on my blog that helps me keep this site up to date and improving. But first a bit of background.

This blog is not my first attempt at downloading the contents of my brain on line. Many years ago - before the time of blogs - I decided to create a web site. It never expanded past the first “under construction” page. A few years later I setup a wiki as a reference for various pieces of semi-useful technical info and that went well but it was private and lacked the reader feedback loop that a blog provides. So last year I started again. I wrote my first post in May 2007 but it hasn’t been until late last year when I picked up the tempo - with regular posts and small site improvements.

Something that has helped me a lot is the “AJAX ToDo List”. Not only is it cool but having a TODO list visible on the front page of the blog allows me to keep track of items that need doing, of posts that need writing and generally helps me stay focused and prioritise.

Here is a screenshot of the Ajax TODO list for my blog in action:

Most important:

• Easy and quick to maintain items - if it was too difficult to use I wouldn’t use it. This is where it’s Ajax capabilities came in - letting you to add and delete items with a single mouse click without page reloads.
• Integrates into look and feel of blog - it’s small and easily integrates into general site layout - on the main page
• Kept private - like any other functionality on the site it is easy to make it private by looking at whether the user is logged in and determining who it is.

I modified it slightly - added the icon and ensured it worked with my Wordpress blog. I have also added a check to display it only for myself (the admin user). You can download all files (including icons) with my modifications and details on how to use it from this link.

To get it going you need to do the following:

1. Change database, user name and password in todolist.php to the ones for your wordpress mysql database.
2. Make sure the references to the icons and todolist.php (in req.open() calls) point to the files in the correct location. This seems to be the main problem that most of the users have - for wordpress the location is something like “wp-content/themes/yourtheme/todolist.php”.
3. In the calling code I have added a check to make sure it only gets displayed when the user is the admin user:

   <!-- only display the todo list if the logged in user is admin -->
   <?php global $userdata;
   if ($userdata->user_login=='admin') { ?>
    
     <h1>My TODO list:</h1>
     <div>
         <ol class="notelist" id="list">
         </ol>
     </div>
     <span class="info">help: !<i>italic</i>! *<strong>bold</strong>*</span><br />
    
     <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/todolist.js"></script>
     <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/todolist.php?init=1"></script>  
    
   <?php } ?>

Note: The todolist.php is called as javascript - this just means that the output of the todolist.php is considered javascript i.e. must evaluate as html when finished. This is important for debugging purposes as you cannot use the php print() command but must use document.write() to display any debug info.

My current TODO list contains 19 items and I am certain I will get most of them done this month!

Use the comments below to let me know whether you want to know anything else about this or my Ajax TODO list or suggest any improvements!

One of the most important things when developing software is having a fast code-deploy-test cycle. To be a great software developer you not only have to be smart you have to work smart and speeding up this phase is key. A combination of a good integrated IDE (I always use the latest version of Eclipse), quick deployment capabilities for your server - possibly integrated into the IDE, a strong focus on unit testing and a LOCAL development environment all combine to provide a quick turnaround of this often very time-consuming phase.

On my latest engagement I was quite shocked to see some developers working in the Java Eclipse IDE but not understanding build-paths or project settings so they would edit the code in the IDE but build the application from the command line using maven. Then deploy the ear file on a remote Weblogic server and have to ssh to it to look at logs etc. while testing remotely (!!). Although it took me the better part of 2 days to install the software and get the complex development environment configured on my LOCAL machine, when it was done, I could code a change, deploy it on a locally installed Weblogic server and test it locally - all in under a couple of minutes. The time saved over the course of an entire project is well worth the initial couple of days outlay - not to mention the frustrations that you spare yourself when you deploy and test and realise you put that debug statement one line too far below and you have to repeat the whole cycle just to move it.

This also applies to the development of your blog and personal website. I have until now been using the Wordpress provided admin interface to edit files on this blog. This turned out to be painful so I downloaded the entire blog code to my computer and whenever I had to make a bigger change I would edit the files locally (I use the free PSPad) and upload them to the server to see whether the changes worked. This was still slow going - especially if you are making lots of tweaks and also - like myself - are still learning both php and javascript.

I found XAMPP. Apache, PHP, MySQL all in one, easy to install package.

1. Download the appropriate XAMPP version from the site above.
2. Install on local machine as per instructions. (e.g. in C:\xampp)
3. If you have an existing MySQL server it will be used instead of the one that comes with XAMPP - make sure you change to your database login details in C:\xampp\htdocs\xampp\mysql.php
4. Start Apache and MySQL from the supplied XAMPP Control Panel.
5. Copy your entire blog/website (e.g. blogsite) directory files to C:\xampp\htdocs\blogsite
6. Run your website by going to http://localhost/blog/blogsite
7. If running Wordpress it will prompt you to recreate the tables when running for the first time.
8. You will need to log in to the admin console to change to your theme - since the configuration of this is also stored in the database.

That’s it. You will now have your entire blog on your local machine. (NOTE: your blog posts etc. will of course not be migrated since you’d have to download the entire db schema and data and upload it into your local database)

You can do any development and testing locally - which will give you a much faster development turnaround time. Once done, go live by uploading all changes to server. You’re on your way to iterative development and eXtreme programming