Stuff

I’ll add stuff to this section as I come across it. stuff so far:

Some JavaScript Stuff I did on the Type 45 Web site (no longer online) §

Normally I put a short description of the sites I’ve worked on in my work section but for the Type 45 (contracting at wheel:) I finally got to try out some unobtrusive dom scripting. The site itself comes in three forms. A flash version, a scripted html version and a plain old vanilla html version for those without javascript. We also wanted to reduce any duplication of effort to the bare minimum. Naturally the flash version would duplicate some of the content that would then have to be re-created for the html versions, but, as far as possible, content that could be shared would be. The other aim was to get the flat html version essentially for free. Which I suppose is what unobtrusive scripting is about.

One of the first decisions was to make the page fall back seamlessly — Flash to dhtml (there I’ve said it) to flat html. To achieve this I would need to style the page as if no javascript was present and then when the page loaded use javascript if it was on to detect flash and style accordingly. The first thing I do when the page loads is attempt to use javscript to link to a style sheet that hides elements that need to be hidden in the scripted version of the site.

Next I need to detect Flash as soon as possible and then insert the necessary <object> tag while hiding any inappropriate html content. For this I needed a flash detection script so off to Google. The funny thing was I didn’t find one that really suited my needs. In the end I merged ppk’s detection script with Geoff Stearns Javascript Flash detection using his bit that detects activeX. My humble bit of hacking can be downloaded and please feel free to point out any bugs. I really can’t take any credit for it I just needed something a little less complex than Geoff’s script provided.

With the flash detection working nicely (I hope) I needed to script the insertion of the <object> tag. My initial approach was to use the dom methods create element and insert element. This worked fine for Firefox, but failed in ie. I think the reason it fails in ie is that ie ignores <param> tags when they are inserted using the appendChild() method. I would set up a test case for this bug but since I know very little flash I have no idea how to prove if it is ignoring the param tags or if it is something else. When I’m dealing with ie I use innerHTML instead. I’m not overly keen about using two ways of inserting the object but since the movie would not run when inserted using the dom I didn’t have much choice.

Initially I was adding the flash when window.onload fired, this would cause the user to get a glimpse of the html version before the page had quite loaded and I wasn’t too keen on that and it did not meet the seamlessness aim. So I did something I’m not sure was the absolute best way to do it, but, it doesn’t seem that bad. I used setInterval() and then used try {} catch(){} until the element I wanted to manipulate had loaded. It bugs me because it seems like I’m adding extra load to the browser just when it is working hardest, but it also seems a reasonable solution, since as soon as the element becomes available I can do stuff and I don’t need to wait for the whole page to load.

The page has a calendar of events with one event per day. When the reader clicks on the day in the calendar the associated content is displayed. It made sense to do this content in html. The flash version could then call a javascript function to display the appropriate content. In the Javascripted version I could attach events to the calendar links and display the content that way. This centralised the descriptions so we would only need to maintain one copy and meant that the content for the flat version would be there already. It also made adding content very straightforward — add a description, add a link to it, put the link in the correct class and bang the Javascript would jump in and display things correctly. Naturally the css needs to be correct to get the formatting but the behaviour becomes as automatic as the formatting which is so nice. Any of the popups work in the same way and so when Javscript is off the links work as expected (the site actually works reasonably well in lynx).

Things that did not quite go to plan. In the end the static html page was split into three, so it did not quite come for free. The additional two pages were simply copies of the content for week two and week three, but, it still failed in the aim of requiring no extra work. The back button is broken in an odd sort of way. Fixing this should be easy because every bit of content has a unique uri but I didn’t think of it till after hand over (I will know for next time though). The performance of some of the animation is fine in ie, but a bit poor in Firefox 1 better in Firefox 1.5 and just not up to it on my five year old G4. I’m going to be investigating why this is and when I find the reasons I’ll update here. I suspect two reasons — I did the animation using negative margins on floats and the png overlay on the ends of the time line. And finally the layout does not scale well.

What character encoding are you really using? §

I have been thinking about this a lot lately and since this is my section for random stuff I thought I’d put it here. Often when browsing the web I come to web pages with odd characters floating about. This usually happens where ’ and ‘ would appear and instead there are ? or the little black diamond that for fulfils the same role. Then if you look at the encoding meta tag the page will claim to be utf-8. The web-server will will send an encoding of iso-8859-1 or something similar and the content will not be either of them.

Why is there all this confusion? I think the problem lies in the process. First the tools. Many text editors make setting the encoding scheme obscure. This is particularly true in Windows where the encoding is often tucked away somewhere in the ‘save as’ dialogue box.

Next the copy for the page will usually come in a word document and be copy and pasted into the text editor to be marked up. I’m still not sure how this is handled, does the text maintain its original encoding? Does it take on the encoding of the document it is being pasted into? I’m inclined to believe the former which makes things very tricky to get right. I started to think that the encoding was carried over from the word document when I started having letters change before my eyes as I pasted them into SubEthaEdit. I would start getting unexpected characters, one that turned up frequently was Đ not sure why.

Why does this not cause more difficulties than just a few stray characters and why are so many people building web sites still blissfully unaware of the problem? Possibly mainly because those of us working in the Latin alphabet can get away with it. If we stick to essentially 7 bit ascii and encode all the rest using the sgml entity references then the encoding schemes over lap very much and so we get away with it. I’m sure if we were working in languages that required paying attention to the encoding more closely there would not be so much ignorance.

Why is this important? For a number of reasons, first if the encoding is not correct those ugly stray characters appear and make the page look badly produced. Second if it is an xml document and the encoding is wrong then it is not well formed. Third if we use the correct encoding then inserting letters and punctuation like ñ, é and ’‘ becomes easier and the code is simpler to read.

How to avoid the problem? Find out from you client which encoding they use for the web server. Once you know, track down the encoding setting in your text editor of choice and make sure you use the correct one. Get to know what the repertoire of that encoding is and if in doubt use the entity reference instead.

Finally can I make an appeal to the developers of text editors — please make the encoding explicit in the user interface. Put it in the tool bar and maybe the bar at the bottom of the window where many apps put status info (not sure what it is called). Maybe it would be sensible to default to utf-8? After all many new html and xml documents are intended to be (or at least aspire to be) utf-8 and the encoding itself has many strengths.

To see much better explanation than I can make on the strengths of utf-8 see Tim Bray’s Characters vs. Bytes. It is also very worthwhile reading his articles On the Goodness of Unicode.

Post @media Javscript get-together §

As much as I would have liked to have attended the @media in London last week it was not to be. I did however go to the Javscript get-together on Saturday organised by PPK which was very interesting and it was very nice to be able to put faces to all the sites I’ve been reading. It is also interesting to see how much enthusiasm there is for pushing Javascript forward. Hopefully the meeting will result in Javascript not only becoming part of the web standards buzz, but, also allowing those of us (or is it just me) who really need to look at it again.

The discussion was mainly about getting the message about dom scripting and coming up with good examples of how to use Javascript and help people learn. For more detailed discussions of what was said I would recommend PPKs weblog he also has links to some of the other attendees web pages.

For myself I’m looking at Javascript with new enthusiasm and hopefully I’ll be able to do something constructive to help get the ball rolling. It looks like things could be fun over the next few months and with some luck I’ll come up with something to help the learning process on this page, all I need is for inspiration to strike.

org.tigris.subversion.svnserv.plist §

I decided to put this here after I had quite a time getting the correct launchd plist file working for subversions svnserv on Mac OSX Tiger. Since it caused me so much frustration I thought I’d put it here so it might save some time for others.

If you are using svn over ipv6 please see the note below.

Here is the plist file: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Debug</key>
    <false/>
    <key>Disabled</key>
    <false/>
    <key>GroupName</key>
    <string>svnowner</string>
    <key>Label</key>
    <string>org.tigris.subversion.svnserv</string>
    <key>OnDemand</key>
    <true/>
    <key>Program</key>
    <string>/path/to/svnserve</string>
    <key>ProgramArguments</key>
    <array>
      <string>svnserve</string>
      <string>--inetd</string>
      <string>--root=/subversion/document/root</string>
    </array>
    <key>ServiceDescription</key>
    <string>SVN Code Version Management</string>
    <key>Sockets</key>
    <dict>
      <key>Listeners</key>
      <dict>
        <key>SockFamily</key>
        <string>IPv4</string>
        <key>SockServiceName</key>
        <string>svn</string>
        <key>SockType</key>
        <string>stream</string>
      </dict>
    </dict>
    <key>Umask</key>
    <integer>2</integer>
    <key>UserName</key>
    <string>svnowner</string>
    <key>inetdCompatibility</key>
    <dict>
      <key>Wait</key>
      <false/>
    </dict>
  </dict>
</plist>

Notes: I installed subversion using darwin ports which was completely seamless, it places files in /opt/local. Also the <key>SockFamily</key> and <key>SockType</key> are probably redundant.

The line <string>/path/to/svnserve</string> should be replaced the path to your svnserve (darwin ports puts it in /opt/local/bin/svnserve).

The line <string>--root=/subversion/document/root</string> is optional I use it to simplify the paths I need to type when using subversion. I had problems using the -r switch instead of --root not sure why, but this works well, so I’m not really bothered to find out.

Finally <key>UserName</key> <string>svnowner</string> and <key>GroupName</key> <string>svnowner</string> needs to be changed to match the group and user name that you have created on your system for svnserver.

You may also need to edit /etc/services and uncomment: 

#svn       3690/udp  # Subversion
#svn       3690/tcp  # Subversion

Once the plist is customised to meet your needs place it in /Library/LaunchDaemons/ and sudo launchctl load /Library/LaunchDaemons/org.tigris.subversion.svnserv.plist at the command line. You need to start this as root as it needs to bind to a network port which needs root privileges.

I’ve received an email from Steve Nicholson, he says that the plist failed to work until he removed the SockFamily key at which point things worked fine. So if you are having problems you may want to try that. I should point out that this plist works as posted on my system I have not tested it anywhere else but feed back has indicated that for the most part it works.

Another update Jonathan del Strother writes: recent versions of svn switched to ipv6, so svn://<hostname> wasn’t recognised and I had to use the IP address of the server

The amended code is below, just update the plist’s sockets section 

<key>Sockets</key>
<dict>
  <key>Listeners</key>
  <array>
    <dict>
      <key>SockFamily</key>
      <string>IPv4</string>
      <key>SockServiceName</key>
      <string>svn</string>
      <key>SockType</key>
      <string>stream</string>
    </dict>
    <dict>
      <key>SockFamily</key>
      <string>IPv6</string>
      <key>SockServiceName</key>
      <string>svn</string>
      <key>SockType</key>
      <string>stream</string>
    </dict>
  </array>
</dict>

A further note: this plist will make svnserve launch on demand, so after the plist is loaded, running — ps -aux | grep svnserve — will not find the server, because it will not be running. I know this seems obvious but I thought I’d reinforce it all the same.