<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
    <channel>
        <title>Journal of an Avocational Web Project</title>
        <link>http://www.webotech.co.uk/blogs/avocational_web_project/</link>
        <description>Observations, experiences and recordings of the evolution of bulgariaseaview.com.</description>
        <language>en</language>
        <copyright>Copyright 2012</copyright>
        <lastBuildDate>Sun, 24 May 2009 20:07:00 +0000</lastBuildDate>
        <generator>http://www.sixapart.com/movabletype/</generator>
        <docs>http://www.rssboard.org/rss-specification</docs>
        
        <item>
            <title>BSV 1.10 Released</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Release Notes<br /><br /></font></b>Version 1.10 has been deployed, here is the change log:<br /><span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://www.webotech.co.uk/blogs/avocational_web_project/2009/05/24/changelog.txt">changelog.txt</a></span><br />There haven't been big changes in this release for good reason...<br /><br /><b><font style="font-size: 1.25em;">More Content<br /><br /></font></b><span class="caps">This release have been focused on content. A volunteer has joined the project and his first task was to add a guide. A lot of my time has been dedicated in bringing him up to speed and ensuring that the development environment is shared (especially since the volunteer lives in another country!). It was also important to get him to do some work which could directly contribute to BSV and the area of lowest risk is adding static content. Guides are nonetheless deceivingly complex; the publishing technology has to be understood, the images with the correct license have to be collated, map data needs to be added, the guide knowledge has to be gained and finally all this has to be brought together and validated. In this case, the results are the new <a href="http://www.bulgariaseaview.com/sofia.html">Sofia guide pages</a>. It's all good work and the project now has a new fully trained member.<br /><br /><font style="font-size: 1.25em;"><b>Hotels</b></font><br /><br />While the guides where getting their overhaul I thought I would add to them as well by integrating hotel search functionality. This was done with a 3rd party comparison engine which has white labelling technology. They give you access to some rich UI functionality which I checked and found wasn't very good so I rewrote it using compliant code and used that instead, another advantage is that we host it now so we minimise the chances of something going wrong without us noticing. There is an outstanding item for this work and that is automated testing to ensure that the 3rd party service continues to work. Sounds like a job for the new team member to me. <br /><br /></span><div><br /></div>]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000013</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000013</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">FYI</category>
            
                <category domain="http://www.sixapart.com/ns/types#category">Releases</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">content</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">robots</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
            <pubDate>Sun, 24 May 2009 20:07:00 +0000</pubDate>
        </item>
        
        <item>
            <title>BSV 1.8 Released</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Release Notes<br /><br /></font></b>In <span class="caps">BSV</span> 1.8 there are a few changes which were driven by the site. By that I mean the way the site was being used was causing too much manual administration so I added code to stop it, more on this below. Oh, there is also a bit of pure creative input in the form on new content which is always a bit of fun. Here are the release notes:<br /><span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://www.webotech.co.uk/blogs/avocational_web_project/2009/01/29/changelog.txt">changelog.txt</a></span><br /><br /><b><font style="font-size: 1.25em;">Captchas and Robots<br /><br /></font></b><span class="caps">Not all internet robots are written for a good purpose like search engine bots. In fact I would dare say that the vast majority of them are malicious and by their very nature they will ignore the robots.txt file. And this can be problematic.<br /><br />BSV had been targeted by one or more of these. Basically they would fill in the 'add a property' form with any old rubbish, probably in the hope that it would generate a listing automatically. If the listing contained links back to their sites, these may enjoy an increased page rank. It was never going to work though since BSV requires email validation and all posted content are verified for legitimacy. However it did cause quite a bit of manual work for me and it did leave some rubbish in the database.<br /><br />One solution to this kind of problem is to put in a captcha image which effectively forces human interaction when a form is filled in. Some clever robots are able to deal with some captcha images but fortunately that was not the case with the ones targeting BSV.<br /><br />In case you are wondering I looked into using an open source captcha library but I could find a single decent one. Most didn't consider what may happen with a high transaction count nor did they have any kind of session management, so I knocked one up myself with the help of <a href="http://www.imagemagick.org/">image magick</a>.<br /></span><br /><b><font style="font-size: 1.25em;">Creative Content<br /><br /></font></b>Writing content, the blood of the internet, is never dull. It's fun because it means I get to browse the web doing research, take photos and/or use appropriately licensed photos from other sources. <br /><br />Once I have collated the info I need, I get to put it down in a coherent and hopefully easy to read format before getting it validated by people who know the real truth. The process does take quite a bit of time but it's worth it. In this release I added a <a href="http://www.bulgariaseaview.com/bansko.html">guide to Bansko</a>, which is a ski resort. Then, I got my <a href="http://www.bulgariaseaview.com/propertybg/seaview_5.html">property page translated into Bulgarian</a> since we have been getting a few Bulgarian clients recently.<br /><br />It's all good.<br /><br />]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000012</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000012</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Releases</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">captcha</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">content</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">robots</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
            <pubDate>Thu, 29 Jan 2009 21:20:35 +0000</pubDate>
        </item>
        
        <item>
            <title>BSV 1.6 Released</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Release Notes<br /><br /></font></b>BSV 1.6 release is primarily a consolidation of existing code, so that BSV is ready for the onslaught of new features. There is a bit of re-organising here, some defect fixing there and a splash of standardising functionality. Here are the release notes:<br /><span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://www.webotech.co.uk/blogs/avocational_web_project/2008/10/27/changelog.txt">changelog.txt</a></span><br /><br /><b><font style="font-size: 1.25em;">Third Party Code<br /><br /></font></b>I guess it is coincidence that I came across two separate problems with other people's code during this release but this deluge (OK, that's bit strong) has highlighted the pros and cons of third party libraries.<br /><br />The obvious pro is that you presumably save time and effort because you are using someone else's code and usually there are no problems, actually you avoid them because the library is often well tested and well used. The problem is when something goes wrong. Do you just ditch it, write your own, wait for a patch, etc?<br /><br />The first issue I came across was with the perl XML::DTD package. All I want to do is validate my XML against the DTD. Pretty simple stuff. I didn't want to write the validator myself as it is completely generic, perfectly specified and to be honest I didn't want to maintain a library that may need to change if the spec changes. Third party, open source code is the perfect solution for this.<br /><br />Unfortunately I ran into problems installing the package due to dependency issues. When I did eventually install the library there was a bug which needed fixing. In true open source fashion the bug was fixed quickly. However when I wanted to go live with BSV I realised that the package wasn't installed on the server and my provider didn't want to install it because it isn't available on <a href="http://www.freebsd.org/ports/">BSD ports</a>. I can only guess it isn't available because of the dependency issues I came across. In the end I had to include XML::DTD in my library tree which I really wanted to avoid.<br /><br /><b><font style="font-size: 1.25em;">Google Maps<br /><br /></font></b>The new google maps (ajax) API which provides namespacing for all their members was the next piece of code I had problems with. I wanted to implement the API because their web page says you have to if you want the latest stable release of google maps.<br /><br />The instructions say <i>use the google.maps.* namespace for all classes, methods and properties you currently use in the Google Maps API, replacing the G prefix with this namespace</i>. If you try that with G_HYBRID_MAP property, it won't work. In this case you have to replace the G_ prefix, a minor difference yet one that you can only find out by guessing or reading through google's code. Oh and the code examples all use the old API, so they don't help.<br /><br />Once I worked that out, I got my code to work fine with firefox so it was time to test it with IE. Suprise, suprise IE bombed out. It just freezes when you try and load the map, using various versions of IE and operating systems. There are no error messages, no logs, nothing it just freezes. I ended up <a href="http://groups.google.com/group/Google-Maps-Troubleshooting/browse_thread/thread/24001954390c54e3">posting the problem</a> on a groups page (ignored so far) and reverting back to the old API.<br />]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000011</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000011</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Releases</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">third party</category>
            
            <pubDate>Mon, 27 Oct 2008 19:49:28 +0000</pubDate>
        </item>
        
        <item>
            <title>BSV 1.4 Released</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Release Notes<br /><br /></font></b>It's a new month and a new release, BSV version 1.4 more specifically. Here are the release notes:<br /><span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://www.webotech.co.uk/blogs/avocational_web_project/2008/09/23/changelog.txt">changelog.txt</a></span><br /><br /><b><font style="font-size: 1.25em;">Production Is The Only True Test<br /><br /></font></b>Have you noticed the way a lot of usually web based software is a beta? That's because the software houses recognise that no amount of testing will guarantee a defect free piece of software so they are reluctant to give it the <i>release</i> stamp of approval. As a developer you will always miss something. Most likely you will only find out once it has been deployed in production and given a good bashing by the users.<br /><br />I guess that this is the theme for today's release since about half the items in the change log are due to problems that users encountered. I think they were minor enough for them not to notice as I didn't get any direct complaints but my logs showed me that not all was well. You will also note that this release has had new asserts added to the UI tests. These have been put in place to esure the defects I fixed aren't unwittingly re-introduced.<br /><br /><b><font style="font-size: 1.25em;">Users Driven Development<br /><br /></font></b>This release has also definitely been user driven. Having fixed the defects they unearthed, I improved some features which they use (the way map data is submitted and it's content) and finally I added some admin features to help me manage my users.<br /><br />The difficulty with the admin features was setting up the main framework for it. Now that it has been done, creating new admin functionality should be a lot easier. And another thing, since admin features are only used by me, users won't be finding any defects in them!<br />]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000010</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000010</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Releases</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">testing</category>
            
            <pubDate>Tue, 23 Sep 2008 21:12:36 +0000</pubDate>
        </item>
        
        <item>
            <title>BSV 1.2 Released</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Release Notes<br /><br /></font></b>It took a long time but I have a couple of good excuses; new house, new job. Once I recovered form the initial shock of these life defining events, I got back to some coding and then after dealing with a number of smaller aftershocks, I released BSV 1.2. As always the release notes are here for reference:<br /><span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://www.webotech.co.uk/blogs/avocational_web_project/2008/08/02/changelog.txt">changelog.txt</a></span><br /><br /><b><font style="font-size: 1.25em;">Stats To August 2008</font><br /><br /></b>When I did the last release I noted that <a href="http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000008">I needed more site usage</a>, so I concentrated on getting some good incoming links and where appropriate putting a link in the <a href="http://www.bulgariaseaview.com/rsrc.html">useful resources section</a>. It's still early days but it had an effect here are the stats:<br /><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="stats-aug-2008.gif" src="http://www.webotech.co.uk/blogs/avocational_web_project/2008/08/02/stats-aug-2008.gif" class="mt-image-none" style="" width="550" height="80" /></span><br /><br />It's probably worth noting that it is high season in Bulgaria so I will naturally get more visitors as they browse the internet for holidays. I hope that when that has died down I will end up in a better place than I was before the high season. That will be the real test of my emarketing strategies.<br /><div><br /><b><font style="font-size: 1.25em;">Users Are Up<br /><br /></font></b>Apart from the google analytic stats which are just <i>it's</i> view on my visitors - and you have to remember there is a layer of javascript as well as a statistics application of some kind so google analytics certainly do not report the absolute truth - there are two other sources that I use.<br /><br />The first is the raw server stats which are guaranteed to be the absolute truth although interpreting them is the real challange. The second is the number of registered users or database stats in the case of BSV. Both these last sources are also on the increase.<br /><br />Of course with more users comes more support. On a recent occasion I had a user who forgot his password. Since there was no password retrieval facility I had to hack the database and manually manage the change until the user could log in again. Once was enough for me to fix the problem properly and you can see the entry in today's release notes there is an enhancements called <b>forgot username and password functionality</b>. That's it, sorry there is no houmerous anectdote but the point is that the site is growing according to it's needs. In my opinion organic growth should always play a major part in the developent of any project or business for that matter.<br /><br /></div>]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000009</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000009</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Releases</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">marketing</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
            <pubDate>Sat, 02 Aug 2008 19:04:14 +0000</pubDate>
        </item>
        
        <item>
            <title>BSV 1.0 Released</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Release Notes<br /><br /></font></b>I released the next version of BSV over the weekend. It satisfies all my criteria so this release is 1.0 (finally). Here are the release notes:<br /><span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://www.webotech.co.uk/blogs/avocational_web_project/2008/04/29/changelog.txt">changelog.txt</a><br /><br /></span><br /><b><font style="font-size: 1.25em;">What Next</font><br /><br /></b>Now that there is sufficient functionality for the website to be really useful without taking up too much of my time, it is time to take it to the next level. By that I mean to make sure I have a few more users than I currently have. So I need to concentrate on a bit of e-marketing.<br /><br />Firstly you may have noticed from the release notes that I now have an <b>about us</b> page, where I unashamedly ask for people to link to the site and donate to the site so that I can invest the money in some e-marketing. In addition, there is a useful sites page which has a list of links to sites that I think are useful for my users. They are all sites that require a reciprocal link and have passed quality criteria (they have to be useful <i>and </i>well used).<br /><br />I'll keep you posted on the traffic but some preliminary stats are looking good!<b><br /></b> <div><br /></div><div><br /><b><font style="font-size: 1.25em;">Link Farms<br /><br /></font></b>Let me explain something about linking to other sites.<br /><br />Google's early success was largely attributable to the accuracy of the results that it returned when you did a search. It soon became clear that the algorithm that was used to prioritise results was absolutely critical. Some may think intellectual property as valuable as that would be a closely guarded secret although there is an argument that you should be as open as possible, especially when a massive number of consumers are involved. Anyhow, I'm not sure why or exactly when but Google decided to divulge the concept behind their code.<br /><br />The idea is pretty simple, every web page that has been indexed is assigned a number that represents how popular it is (the page rank). For a given search the results are ordered by popularity. So how can you possibly calculate how popular a web page is without access to exhaustive usage statistics of all web pages? You can't but Google believe that with the information they have, they are able to approximate popularity. They do this by looking at how many inbound links there are and the contents that is wrapped in the links.<br /><br />All good and well, as long as no one exploits this information. But this is the real world so of course the same group of marketeers that exploited older search engine technologies to improve their listings used the algorithm information similarly, to the detriment of all web users. One of the tactics they used was creating link farms. Link farms are websites or areas of a website which has the sole purpose to improve the page rank of a site by exchanging links <i>indiscriminately</i>. Ultimately link farms are bad because they offer no value to a user at all, they simply artificially (and therefore incorrectly) increase a website's popularity which means Google's results aren't as accurate as they used to be.<br /><br />Google obviously are aware of link farms and probably are taking/have taken steps to deal with them. There is one rumour going around that when they discover a link farm they simply strip the page rank of the offending site, personally I don't think they would be quite so drastic. They certainly have been presented with a problem which isn't easily solved: how do you identify indiscriminately exchanged links with truly valuable ones in a automated manner? You either need a highly sofisticated heuristic approach which will no doubt be constantly changing or you do it manually (at least some of it).<br /><br />All this is also a problem for website owners because if we choose to increase our popularity using links (and when you have no budget like me there pretty much is no alternative) how do you do it without being classed as a link farm? The answer is not to link indiscriminately and that is what BSV's <a href="http://www.bulgariaseaview.com/rsrc.html">useful sites</a> page does.<br /></div>]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000008</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000008</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Marketing</category>
            
                <category domain="http://www.sixapart.com/ns/types#category">Releases</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">marketing</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
            <pubDate>Mon, 28 Apr 2008 19:23:14 +0000</pubDate>
        </item>
        
        <item>
            <title>BSV 0.8 Released</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Software Releases</font></b><br /><br />Since I am writing a journal about this I may as well formalise a couple of things. Firstly I need to give the software a name, <i>BSV</i> is good for me so that's what I called it. <br /><br />Next on the agenda is versioning. I have decided that version 1 will have to satisfy the following criteria:<br /><ol><li>Full CRUD functionality for property management</li><li>Working satisfactorily in IE 6 and Firefox</li></ol>This release is missing part of the photos update functionality in IE due to the browser not adhering even closely to W3C standards, so I'll randomly give this version 0.8 (you have to start somewhere).<br /><br /><br /><b><font style="font-size: 1.25em;">Release Notes</font><font style="font-size: 1.25em;"></font></b><br /><br />Here are three quick definitions that I will use in the release notes:<br /><ul><li>enhancement - refers to new functionality</li><li>change - refers to modification of existing functionality<br /></li><li>defect - refers to correction of erroneous functionality</li></ul>I know they are a bit fluffy around the edges but they are only intended to be an indication. Here are the release notes:<br /><span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://www.webotech.co.uk/blogs/avocational_web_project/2008/04/09/changelog.txt">changelog.txt</a></span><br /><div><br /></div>]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000007</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/releases/#000007</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Releases</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
            <pubDate>Wed, 09 Apr 2008 10:01:14 +0000</pubDate>
        </item>
        
        <item>
            <title>Image Caching In IE</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Caching Problem</font></b><br /><br />The problem is that IE does not cache images at all if they are referenced in DOM javascript. The effects of this are obvious: pages are slower to load and bandwidth is consumed unnecessarily. When I came across this, I didn't try and change IE settings so it may be that you can fix the problem by playing with <i>Tools &gt; Internet Options</i>. But more to the point I wouldn't want to fix this by tweaking my settings, I'm operating a public website and it should work well with out of the box settings.<br /><br />Sadly there is no quick fix and no workaround. I have confirmed it to be a problem in IE 6 and IE 7.<br /><br /><br /><font style="font-size: 1.25em;"><b>Scenario</b></font><br /><br />Here is a scenario to reproduce<br /><ul><li>create multiple image nodes <i>iNode = document.createElement('img')</i></li><li>set the same source attribute on the images <i>iNode.src= uriSrc</i></li><li>append the images to an existing DOM node <i>domNode.appendChild(iNode)</i></li></ul>IE will download every image as a distinct object, although they have the same <i>src</i> attribute. Maybe I'm going slightly mad but to make it worse it seems to take way longer to do this than it ought to. I'm not going to waste time verifying that so I'll give it the benefit of the doubt.<br /><br /><br /><font style="font-size: 1.25em;"><b>Real Life</b></font><br /><br />What I've just described is all a bit abstract and you're probably thinking '<i>yeah, but why would you want to do that? Give me real scenario.</i>' Well, here it is. Have a look at this snapshot:<br /><br /><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="image caching" src="http://www.webotech.co.uk/blogs/avocational_web_project/2008/03/31/widet.jpg" class="mt-image-none" style="" height="327" width="357" /></span><br /> <div><br />There is a main image and below it thumbnails, each with mini icons above and below. The mini icons are used to manage photos, the arrows allow you to move them left and right while the <b>A</b> and <b>X</b> icons allow you to edit the photo title and delete the photo. When you click on any mini icon the meta data for this widget changes and communicates this to the back end asynchronously.<br /><br />There are two situations where this widget needs to create image nodes and they are when it initialises and when meta data changes (since it synchs with the database). Obviously, when this happens the browser has to render each mini icon. In firefox one loads and they all appear at the same time. In IE one loads, then another, then another. You get bored go and grab a coffee, still loading, come back, still loading, take a sip, the next one appears... OK that's exaggerated but you get the picture.<br /><br /><br /><b><font style="font-size: 1.5625em;"><font style="font-size: 0.8em;">What To Do?<br /></font></font></b><font style="font-size: 1.5625em;"><font style="font-size: 0.8em;"><font style="font-size: 0.8em;"><br />So what should I do about this on <a href="http://www.bulgariaseaview.com/">bulgariaseaview.com</a>? This is where my earlier <a href="http://www.webotech.co.uk/blogs/avocational_web_project/fyi/#000004">decision to work on this project independently</a> begins to pull it's weight. There is no one to answer to here, so I have opted to leave it working slowly in IE and added a note recommending the use of firefox.<br /><br />It's a bit naughty, after all who am I to tell anyone what browser they should use? But on the other hand imagine how completely I would be ignored if I asked Microsoft to fix their code and maybe by explaining why it works better in a more compliant browser it will convince users to stop using inferior ones.<br /><br /><br /></font></font></font></div>]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/web-20/#000006</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/web-20/#000006</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Web 2.0</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">DOM</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">IE</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
            <pubDate>Mon, 31 Mar 2008 11:18:26 +0000</pubDate>
        </item>
        
        <item>
            <title>Styles Starting With Underscores</title>
            <description><![CDATA[<b><font style="font-size: 1.25em;">Quick Fix<br /><br /></font></b>The quick fix is this: <b>do not use CSS styles that begin with an underscore (_) if you want them to be rendered in IE 6</b>. By the way, the bug in IE has been fixed in version 7.<br /><br /><br /><font style="font-size: 1.25em;"><b>IE CSS Underscore Bug</b><font style="font-size: 0.8em;"><br /><br />I was sort of aware of <a href="http://www.google.co.uk/search?q=IE+CSS+underscore+hack&amp;client=pub-0904194663667841">IE's CSS underscore hack</a> but I was doing my best to forget it, since it's a piece of information which is as mundane as it is common with IE, "<i>yet another problem with IE</i>"</font>.</font> However, this issue must be related to that hideous hack.<br /><br />This is a screenshot of what I wanted to achieve in IE 6:<br /><br /><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="ie6ok.gif" src="http://www.webotech.co.uk/blogs/avocational_web_project/2008/03/17/ie6ok.gif" class="mt-image-center" style="margin: 0pt auto 20px; text-align: center; display: block;" height="191" width="259" /></span><br />Simple enough, so I put together this HTML which should be absolutely fine:<br /><br /><b><font style="font-size: 0.8em;">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;IE 6 - styles starting with underscore&lt;/title&gt;<br />&lt;style type="text/css"&gt;<br />._mOuter {position:relative;top:-2px;left:20px;}<br />._mTabOn,._mTabOff {width:100px;min-width:100px; text-align:center;<br />&nbsp;font-size:14px;border:1px solid #000000;border-bottom-width:2px;<br />&nbsp;border-top-width:2px;}<br />._mTabOn {background-color:#79B0D4;border-top-color:#79B0D4;}<br />._mTabOff {background-color:#497c9d;}<br />._mTabLn {color:#000000;display:block;padding:4px;}<br />._mTabSp {width:1px;background-color:#000000;}<br />a._mTabLn:link {text-decoration:none;}<br />a._mTabLn:visited {text-decoration:none;}<br />a._mTabLn:active {text-decoration:none;}<br />a._mTabLn:hover {background-color:#5c90b3;text-decoration:none;}<br />&lt;/style&gt;<br />&lt;/head&gt;&lt;body&gt;<br />&lt;table cellspacing="0" cellpadding="0" border="0" class="_mOuter"&gt;<br />&nbsp;&lt;tr&gt;<br />&nbsp; &lt;td class="_mTabSp"&gt;&lt;/td&gt;<br />&nbsp; &lt;td&gt;<br />&nbsp;&nbsp; &lt;div class="_mTabOn"&gt;&lt;a href="#" class="_mTabLn"&gt;Tab 1&lt;/a&gt;&lt;/div&gt;<br />&nbsp; &lt;/td&gt;<br />&nbsp; &lt;td&gt;<br />&nbsp;&nbsp; &lt;div class="_mTabOff"&gt;&lt;a href="#" class="_mTabLn"&gt;Tab 2&lt;/a&gt;&lt;/div&gt;<br />&nbsp; &lt;/td&gt;<br />&nbsp; &lt;td class="_mTabSp"&gt;&lt;/td&gt;<br />&nbsp;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;&lt;/html&gt;</font></b><br /><br />However IE 6 renders this:<br /><br /><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="ie6notok.gif" src="http://www.webotech.co.uk/blogs/avocational_web_project/2008/03/17/ie6notok.gif" class="mt-image-center" style="margin: 0pt auto 20px; text-align: center; display: block;" height="172" width="256" /></span><div><br />Can you spot what's wrong? Most people would and I would argue that the difference is not acceptable for a public website, even though styles are subjective.<br /><br />To fix it you simply change all the styles defined in the &lt;style&gt; tag that start with an underscore with styles that don't. Here is the working code:<br /><br /><font style="font-size: 0.8em;"><b>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;IE 6 - styles starting with underscore&lt;/title&gt;<br />&lt;style type="text/css"&gt;<br />.XmOuter {position:relative;top:-2px;left:20px;}<br />.XmTabOn,.XmTabOff {width:100px;min-width:100px; text-align:center;<br />&nbsp;font-size:14px;border:1px solid #000000;border-bottom-width:2px;<br />&nbsp;border-top-width:2px;}<br />.XmTabOn {background-color:#79B0D4;border-top-color:#79B0D4;}<br />.XmTabOff {background-color:#497c9d;}<br />.XmTabLn {color:#000000;display:block;padding:4px;}<br />.XmTabSp {width:1px;background-color:#000000;}<br />a.XmTabLn:link {text-decoration:none;}<br />a.XmTabLn:visited {text-decoration:none;}<br />a.XmTabLn:active {text-decoration:none;}<br />a.XmTabLn:hover {background-color:#5c90b3;text-decoration:none;}<br />&lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table cellspacing="0" cellpadding="0" border="0" class="XmOuter"&gt;<br />&nbsp;&lt;tr&gt;<br />&nbsp; &lt;td class="XmTabSp"&gt;&lt;/td&gt;<br />&nbsp; &lt;td&gt;<br />&nbsp;&nbsp; &lt;div class="XmTabOn"&gt;&lt;a href="#" class="XmTabLn"&gt;Tab 1&lt;/a&gt;&lt;/div&gt;<br />&nbsp; &lt;/td&gt;<br />&nbsp; &lt;td&gt;<br />&nbsp;&nbsp; &lt;div class="XmTabOff"&gt;&lt;a href="#" class="XmTabLn"&gt;Tab 2&lt;/a&gt;&lt;/div&gt;<br />&nbsp; &lt;/td&gt;<br />&nbsp; &lt;td class="XmTabSp"&gt;&lt;/td&gt;<br />&nbsp;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</b></font><br /><br /></div>]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/web-20/#000005</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/web-20/#000005</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Web 2.0</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">CSS</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">IE</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
            <pubDate>Mon, 17 Mar 2008 10:51:22 +0000</pubDate>
        </item>
        
        <item>
            <title>Setting the Scene</title>
            <description><![CDATA[<font style="font-size: 1.25em;"><b>An Afterthought</b></font><br /><br />This blog is an afterthought, one that came to me like so: I was happily doing some web 2.0 development, testing in <a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=81584&amp;t=55">Firefox</a> with those <a href="http://addons.mozilla.org/">very useful add-ons</a> and it was all looking good. Then I thought I'd better make sure it worked in IE which is always slightly annoying since the computer that has it installed isn't mine.<br /><br />Having successfully negotiated use of the test machine, "<i>I'll prepare you a hot chocolate if you let me use your lappy</i>", I was ready to do my 5 minutes of validation before calling it a night. There was no way it was going to take longer than that, after all my code was <a href="http://www.w3.org/">W3C </a>compliant. What could possibly go wrong?<br /><br />IE bombed out with it's usual ironic error message (you know, the one that is supposed to be helpful but is actually almost completely pointless). It soon became apparent that the only reliable way to fix the problem was to bombard the search engines with questions until they revealed the answer. On this occasion it came in the form of a tech-site written in that unique form of hispano-germano-cyrillo english that you are probably familiar with.<br /><br />Anyhow, this got me thinking. Wouldn't it be great to write down all the issues I encounter for the duration of the project with details of how I solve them so that others can benefit? What a unique and genius idea! Then I realised that actually it wasn't unique, that hispano-germano-cyrillo-english guy had already thought of it (along with millions of others). Nonetheless, I concluded that it was still a good idea to document the project since there was bound to be at least one person who would find it useful.<br /><br />That is why this journal is an afterthought and because it is an afterthought, it has come into existence just over 1 year since the project began. So, let me give you a brief run down of what has happened so far.<br /><br /><br /><font style="font-size: 1.25em;"><b>My Approach<br /><br /></b></font>Firstly, I decided that this would be purely my own work. No partners, no clients (like I can just choose to have clients), no other developers, no time schedules, no one to answer to: fantastic. Embarking on a project with that mindset makes a huge difference.<br /><br />Being my own client I told myself that all I wanted was a quick brochure site that I could start e-marketing within a few days. I toyed with the idea of using java but then I decided if I wanted to do things quickly it would have to be done in perl. Perl development is fast anyway and on top of that I had tried and tested libraries that I had built up over the years which would make it even faster. <br /><br />I set to work to get a couple of pages with fresh content, good usability, nicely styled (isn't that subjective?), targeted meta data and compliant mark-up. You know, all the elements needed for SEO if you believe in that particular form of occultism. Then I used a bit of web 2.0 magic so that I could display my holiday snaps in a single compact page. Finally, I implemented the <a href="http://code.google.com/apis/maps/">google maps API</a> so that users could get a bearing of where the apartment is, and an AJAX control so that they could send me coords of areas of interest. Next I went shopping for a <a href="http://www.spacereg.com/">domain name with my favourite registrar</a>, and set up hosting with them as well.&nbsp; An hour after that, I had deployed my new web app and registered it with the search engines.<br /><br />A final step was needed: approval from one of the world's greatest consumers and avid on-line reader. I showed the site to my girlfriend and watched her expectantly. She stared at the monitor for a couple of seconds, then her hand moved tentatively towards the mouse. She retracted it before it got there and turned to face me.<br /><br />"<i>Shall we go dancing tonight?</i>" she blurted out.<br /><br />Success!<br /><br /><br /><font style="font-size: 1.25em;"><b>How The Website Has Grown<br /><br /></b></font>The website has changed a lot since then. Without going into great detail this is what I did on the technical front:<br /><br /><ul><li>I packaged it up properly so that it could be reliably deployed in various (<a href="http://www.linux.org/">linux</a> and <a href="http://www.freebsd.org/">FreeBSD</a>) environments by referencing an appropriate configuration file.</li><li>I improved my publication technology so that it was able to publish in static or dynamic mode.</li><li>I modified my templating technology so that code was naturally divided into <a href="http://en.wikipedia.org/wiki/Cohesion_%28computer_science%29">cohesive units</a>.</li><li>I improved my core javascript library so that it had inherent support for AJAX calls.</li><li>I added a whole load of custom UI tags.<br /></li></ul><br />As far as what is considered creative in the traditional way, even though personally I consider software development just as if not more creative, this is what I got up to:<br /><br /><ul><li>I added guides with photos (my holiday pictures). For the guides I did some on-line research, had conversations with people from the area and added my personal experience.</li><li>I picked up a few other pictures with appropriate <a href="http://creativecommons.org/">creative commons</a> licenses and in doing so I had to improve my image widget so that I could properly attribute the photos.</li><li>I integrated <a href="http://www.skyscanner.net/integration.asp">skyscanner mini</a>.<br /></li></ul><br /><br /><font style="font-size: 1.25em;"><b>The Big Decision<br /><br /></b></font>By this time the site was attracting enough traffic to get a couple of enquiries about the property. More importantly, it felt like the code was solid. I had adequate unit test coverage, was working on integration tests using <a href="http://selenium-ide.openqa.org/">selenium IDE</a> and a proper error notification framework made sure I fixed defects pretty quickly.<br /><br />Also at this time, it came to be that an acquaintance who owns an apartment in Bulgaria as well, demanded that I add a page for his property to my site. My defences had been weakened by the effect of beer and I responded enthusiastically "<i>Yeah, no problem. Get me another drink, will you?</i>"<br /><br />So I was faced with this question. Should I<br /><blockquote>create another static HTML page for his property<br /><blockquote><blockquote>- or -<br /></blockquote></blockquote>enhance the web app so he could add and manage his property and in doing so allowing anyone to do the same with theirs?<br /></blockquote><br />The answer to this dilemma is obvious and as far as I can remember these are the steps (more or less in order) that bring us to today:<br /><br /><i><b>Requirement 1</b>: set up a straight through processing form that,</i><ul><ul><li><i>creates a user account with contact information,<br /></i></li><li><i>allows the user to enter property address, descriptive details, select from a list of communal and private facilities, property meta data, season dates, rental rates, rental and payment terms, photos with meta data and of course map coordinates.</i></li></ul><li>I used the above requirement with bit of <a href="http://www.agilemanifesto.org/">agile modelling</a> (scribbled on a piece of paper which was ultimately destined for the bin) to design the relational object model.</li><li>From the object model I derived a database schema.</li><li>I set up a data system for my web app which hooks into <a href="http://www.mysql.com/">mysql</a>, and coded up repeatable and reversible scripts for<br /></li><ul><li>creating the schema</li><li>populating standing data</li><li>validating (at a basic level) data integrity<br /></li></ul></ul><ul><li>Then I wrote a load of perl modules which together forms the data access layer of my web app. <br /></li></ul>With that my first requirement was satisfied and I deployed code to see if anyone would add their property.<br /><br /><i><b>Requirement 2</b>: use the data collected from requirement 1 to create a single HTML page per property.</i><ul><li>I had most of the technology for this, all I needed was to code up a component that extracted the data and then used my publishing and templating technologies to create the HTML.</li><li>I added support for scheduled publication of property pages (with <a href="http://www.linuxmanpages.com/man1/crontab.1.php">cron</a>) and the ability to publish a single page or the whole lot. <br /></li></ul>With the second requirement completed, I replaced my old static property page with my new database generated one and added the page for the second property as well.<br /><br /><i><b>Requirement 3</b>: the property owner should be able to manage the content related to their property.</i><ul><li>I dug out an old library that I wrote for an authenticated web session. I improved it (a hell of a lot) until it was a proper <a href="http://en.wikipedia.org/wiki/Model-view-controller">MVC system</a> using the <a href="http://en.wikipedia.org/wiki/Command_pattern">command</a> and <a href="http://java.sun.com/blueprints/corej2eepatterns/Patterns/FrontController.html">front controller</a> patterns (I know, it's not a JEE project but it's a good pattern) as the core framework.</li><li>I added support to the MVC framework so that I could plug my publishing and templating technologies into it.</li><li>Then for each object model I coded <a href="http://en.wikipedia.org/wiki/Create,_read,_update_and_delete">create, read, update and delete</a> functionality.</li></ul>Well, for almost each one. I have the photos model left and if I hadn't started this blog that would be ready as well.<br /><br />]]></description>
            <link>http://www.webotech.co.uk/blogs/avocational_web_project/fyi/#000004</link>
            <guid>http://www.webotech.co.uk/blogs/avocational_web_project/fyi/#000004</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">FYI</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">software architecture</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">software development</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">technology</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">web project</category>
            
            <pubDate>Mon, 10 Mar 2008 22:42:03 +0000</pubDate>
        </item>
        
    </channel>
</rss>
