Designing for the Colour Blind

Today I was whinging about getting yet another email, nothing odd in getting emails you may think, however for me as a colour blind person, sending me an email that is written in a colour I cannot see properly just ends up as being grey and if the colour is a bright colour it is a light gray on a white background. This is deeply deeply annoying so I tweeted my discomfort and sent a polite but firm email to the sender asking them to send emails to me in a format that I would easily read.

My tweet brought several responses from UI designers keen to understand where I was coming from and asking me for some hints as to how to make their designs better for the colour challenged.

Colour blindness is alas sometimes forgotten and to be fair it is more of a pain in the arse than a real handicap and designing your site for people with more profound problems is MUCH more important, however it is deeply deeply irritating when you land on some sites or get emails that the designer or sender at the other end thinks are "dead cool" and "trendy" but for the colour blind are at best confusing or at worst just un-usable.

I discovered I was almost totally colour blind in my late teens early 20's and I can see a little blue and a little green and no red at all. Why had I not noticed you may ask well we learn colour through association with known "things". The sky is blue, the grass green and milk white, we then learn to associate that colour with other things. For colour blind people they can recognise the colour from the context it is in. Confusion only arises when confronted with something unkonow and the CB person has to guess by the tonal value what colour it might be.

The eye has two light sensitive cells,  Rods and Cones. Rods are mainly clustered around the edge of the visual field and cones in the middle. Rods see tones and Cones see the colour. Colour sightedness is basically a problem that is usually genetic and usually found on the Y chromosome making it much more common in men.The problem manifests itself with the Cones they are either malformed, don't work or just arent there at all. I was born with only 11% of the Cones I should have so whilst I can can see some colour I am mostly monchromatic. The up side is that I have more Rods which are smaller than cones which means I have extremely good visual accuity :-) always an up side eh?

About 1 in 10 Europeans mainly men have some level of two colour colour blindness, about
1 in 1000 are like me totally or very nearly totally colour blind.

It is worthy remembering that someone who is "Blue" colour blind does not see nothing when the something is Blue. We can still see something but just not in way you see it. It will be a gray that matches the tonal value of the actual colour.

I paint and I love painting and I am asked "How can you being colour blind paint in colour?" Well paint manufacturers helpfully put paint in tubes with a label on it that says "Blue" or "Red" and comes with a Colour Index  for example French Ultramarine Blue has PB 29 (77007), so contains Pigment Blue 29  and is color 77007. Simple when you know how ;-). Also my paintings are inclined to be a collection of colours with white added to lighten, so you will see a lot of one colour tonally adjusted to make sense to me.

Similarly I am often asked .. "How do you know which is the Red Stop light?" well that's easy it usually has STOP written on it as well as being red and more obviously it is always the light at the top of a traffic signal ;-) and they are tonally very different. On the other hand put me infront of the old style electrical cables (Brown Red and Green) I just cannot cope. Thankfully the new wiring cables are a dark one, a light one and a stripy one and I have stopped blowing up toasters.

Now I am not saying that you should go deliberately out of your way to make your
UI colour-blind friendly, please make your site as glorious as you can for the 90+%
of visitors that can see all the colours. However keep me and my kindred in the back of
your mind and offer us some help if we need it.

Some things to remember and or do ...

1. Don't use ONLY color to indicate something specific on your page.
   There is nothing quite so fecking annoying as getting an error message that
   says "Please correct the entries highlighted in red" when you can't see red.
   and because it is a "dark" hue it looks just like black. Use color and a * or >
   as well to indicate the problem.
2. Similarly having a RED alert box with White writing does not to a Red colour blind person
   convey the same "Danger" context as it would to a colour visioned person. Add a nice Icon
   to help with the context.
   
   
3. Desaturate your images to see if they still have impact to grey scale.
   Beware this is NOT how most color blind people see the images and will need to be
   tweaked slightly giving less contrast (make it lighter) as the viewer may not see the tones
   in the same way you do... but it will give you a quick and easy way to tell if the image is still useful particularly if you have text or navigation objects on top of the image.
   
   
4. Try to avoid placing red and green together. (RG colour blindness is the most common)
   Especially on items like navigation buttons, the text can actually blend into the
   background, making it very hard to read.. here (CTRL+A is your friend if you are colour blind)
   
   
5. Try and avoid using two colours that are of similar tonal value - and this is not as easy as it sounds for example this to color sighted people is fine and easy to discern. The outer colour is
   RGB(112,161,207) the inner colour is RGB(97,179,122)
   
6. Gray Scale this image and you get the idea of how this looks like to me
   
7. It is always better to have a dark colour on a light background, you can reverse this but it isn't quite so good. Also be aware that it is more difficult for everyone to distinguish dark (low value) and/or saturated colors (e.g., a 16-color palette blue or red against black), and extremely light pastels, particularly in low or bright light conditions. This is doubly true for the colorblind.
   
   
8. If you can, find a color blind friend or relative to look at your site. If you're not color blind it's often very difficult to tell what they might have trouble with. The challenge is as can be seen above that if they can't see something,  they might not even know they aren't seeing it.
   
   
9. http://colorfilter.wickline.org/ is a useful place to go to test web pages
   it isn't brilliant.. but it does show you what the various types of CB people
   may see when they visit your site. Try your favourite business sites and you will be surprised how different they look to the colour blind.

"Pain in the Arse" problem found in 853 client pre-roll out testing

During Lotus Client testing of 853 we have come across a problem that it is perhaps wise to be aware of.
If you have the following set of circumstances
1. You have laid out a forms elements in a table
2. You display the form in a Frameset, page or Dialog box
3. You have not explicitly set a Background Colour in all the cells of the table
4. Your First cell in the table has an explicit Background Colour set
This happens

The background colour of the first cell in the table is inherited by all the cells that have the backgound colour as the default [NONE] Which is a bit ackward if your font colour happens to be the same as the background colour!

I don't think UP1 fixes this but I haven't tried so it might but I am informed that UP1 is more to do with xPagey stuff.

I have tested this on XP, Vista and Windows7 853 clients and they are all the same.

To fix it set the BG colour to an actual colour rather than the [none] default and it appears as expected

Given my previous contact with bug reporting being less that warm and fuzzy . we are currently looking at the possibility tweaking all our tables in forms so default [none] background colours are replaced with an actual colour prior to 8.5.3 rollout, for now we will have to stay on 8.5.2

jQuery 1.7 Event Delegation.. Gitanes and whisling at girls are they walk by

In the wonderful world of JS event listeners cost memory.
Lots and lots of memory!
In today's shiney shiney click,drag swipe an pinch world has a whole heap of event listeners floating around smoking cheap ciggarettes, whistling at the girls and generally making your web site perform badly. But all is not lost jQuery provides some really easy methods for handling event listeners efficiently through the wonders of event delegation.

In a bit of an extreme example but hey we are Domino Developers we are extreme! Imagine a situation where a 10×10 cell table needs to have an event listener on each cell; let’s say that clicking on a cell adds or removes a class that defines the cell’s background color. A typical way that this might be written:

$('table').find('td').click(function() {
    $(this).toggleClass('yuckygreen');
});

Enter jQuery 1.7's  on() method. It acts as a utility that wraps all of jQuery’s event listeners into one convenient method, and the way you write it determines how it behaves.  so we replace .click()  .on() using this code.

$('table').find('td').on('click',function() {
    $(this).toggleClass('active');
});

Is that cool or what? Mind you we are still binding 100 hundred event listeners to our page, one to each individual table cell and they are still puffing away on their Gitanes and scratching their arses in a most undignified and memory wasting way . Since the majority of events bubble up the DOM tree, we can bind a single event listener to one element (in this case, the <table>) and wait for events to bubble up from its children. Like this

$('table').on('click','td',function() {
    $(this).toggleClass('active');
});

All we’ve done is moved the td selector to an argument inside the .on() method. Providing a selector to .on() switches it into delegation mode, and the event is only fired for descendants of the bound element (table) that match the selector (td). With that one simple change, we’ve gone from having to bind one hundred event listeners to just one. You might think that the browser having to do one hundred times less work would be a good thing and you’d be completely right as I found this evening!

[If you are using a version of jQuery less than 1.7 all is not lost.. look up the .delegate() method and you will be able to do nearly the same thing!]

Ye Godz TheTroubledGeek.com gets an email!

It was many moons ago that awesome team of Fabulous Francie and Professor Ignatius Gonad IV were called upon by a member of the liaty to answer one of their problems. Sadly the domain is no longer active ... it is a long story which I may be allowed to tell some day when they lift the court orders. However the questioner got around this knowing that I was a close friend of Ignatius Gonad and knew I that would be able to contact him  and sent me the email and I am very glad to be able to reproduce the email and the Professors reply here in the august pages of DominoYesMaybe

Dear Professor and Fabulous:

First, let me convey my deep condolences for the cancellation of your
"Troubled Geek" show. Initially, the loss of this bastion of comfort in a
cold, cold world saddened me nearly to the point of doing myself harm! But
then I took a nap and felt much, much better. I do hope to see you back on
the air again soon.

Now, to my question. While investigating some of the detailed behavior of
"garbage collection" in the "Java" programming language, I decided to put
some background music on in my "office". I chose to loop the Ping Floyd
song "Wish You Were Here", as it seemed appropriate for certain situations
when the "Java" "Garbage Collector" (why do they call it that, anyway?
Seems a bit supercilious, no?) removes bits of memory that I really did not
want it to.

Here's the problem: My son, who is not a fan of Pink Floyd, wandered by and
criticized my choice of "entertainment". He claims that the Beatles song
"Everybody's Got Something To Hide (Except for Me and My Monkey)" is far
more appropriate, as (in his explication) the "Monkey" in the song
represents my missing heap storage, and that, beyond simply stating the
problem, the song also provides useful "advice" (i.e., "Take it easy").

I, however, claim that "Take it easy" actually refers to the methodology
implemented by the "Garbage Collector", by which the so-called "garbage" is
removed.

Who is right, he or I?

Thank you for your adjudication!

regards,
A Fan

and the reply ...

Comrade Fan

Since Fabulous Francie as at this time deep in her research program on
the effect of suntan oil on the defrag time of AIX servers I will jump in
first.

Alas and alack, TheTroubledGeek.com is as you have found no more
due to an unfortunate incident with some Pirate Rum, an unripe banana
and a goat about which I can say no more other than the nun now has
a restraining order.

I believe you problem lies not in the choice of music but in your unnatural
urges with respect to Java! In their seminal work "Javaphiliacs, the Hidden
deviants" by Weisenberg, Smith and Widdle 2002 the abnormalities that
lie deep in the psyche of those that dabble in the deep murky stack of Java
can be traced back to incidents in early childhood that involve wellingtons
(I believe you americans call then gumboots), wheelbarrows and an inability
to eat icecream with a spoon.

You son's perspicacious grasp of the situation is laudable however it seems
he too may be suffering from C++osopatheticsonolasitis, which is in short
a perpondersance to see more meaning the the words of messieurs Lennon
and McCartney than in fact is actually there.

So in effect what I am saying is you are both wrong and should immeadiately
repair to Itoons and purchase "We're Only in It For the Money" by Frank Zappa
and the Mothers the only album to play when considering anything to do with
Java and it makes about as much sense!

Much Love and Hedgehogs!
Professor Gonad

Professor Gonad wishes me to make known to the world at large that the authorities are quite happy for him to answer any and all of your queries using the good offices of DominoYesMaybe as an intermediary. The Prof is also a great believer in collaboration and invites not only your problems but your input in the comments section of any posts he may receive and reply to

Tidying up closed jQuery UI Tabs

A wee tip:

If you use jQuery UI tabs you may have noticed the that .remove() method does not really get rid of the tab, it clears the.html() and hided the [div] container. Now that is fine and dandy if you have a app that people dip into infrequently, however if you app stays open all day and users are opening and closing tabs frequently and not refreshing the page the tabs are on .. then your DOM can get very heavy with unused [div]s.

An easy way to get rid of them is to use this wee bit of code everynow and then for example on a setTimeout(), the code parses the DOM for any div defined as a tab tests if it is empty and removes it.

$('div[id^=ui-tabs-]:hidden').each(
                                                        function(index)
                                                        {
                                                            if($(this).html() == "")
                                                            {
                                                                $(this).remove();
                                                            }
                                                        }
                                                        )

Steve

Interesting wee additional method for Lotusscript (yes you read that right)

Well I never!
Yes you did read the title of this post correctly I have discovered a NEW thing in Lotusscript.
I know I too had to sit down and have a long cup of tea and a biccie to recover from the shock not only that there is something new but (a) it is useful and (b) it works really well.



I speak of  NotesView.ReSortView("columnname",AscendingFlag)


Now what this does, although not explicit in the help is , if you have a view and the columns have the "Click on column headers to sort = Both" turned on you can in Lotusscipt ask the view to be Resorted based on the programatic name of the column you want the view to be sorted on.

You do not have to set the column to be sorted by default (this reducing what could be a VERY silly view size) you just have to have the "Click column headers to sort = BOTH" turned on.

What this meant to me was I could have a web agent that returns data to an AJAX request that was sorted in a user defined way at the click of a button!! FANTASIC no more messing around with empty documentcollections, sorting lists and adding the documents from the orginal back into the empty collection. All I needed to do was

Call MyView.ReSortView("OrderQuantity",True) 
to sort the view into the order I wanted and deliver it to the wating browser.

The Second parameter is TRUE = Ascending or FALSE = Descending. A word of caution on this param, it appears not to be accessible when you pass it as a variable. You need to pass it as an actual value rather than a Boolean Variable.Also if you have something other than "Click on column headers to sort = Both" this second variable is ignored and the view is sorted on what ever you have set as the value for "Click on column headers to sort"

Really very useful for fiddling with views.. THANK YOU the Dev team in IBM :)

.o0( Why shosuld I use Browser Prefixes in CSS ?)

Browsers don't ya just love em? We wait with baited breath for each new iteration of our favourite window onto the internet and with each new version we devs get new toys to play with. Now the Browser writers (well all of them except the ****wits that write IE) like the new stuff that is coming down the tuvbes from the W3C however there are things that are no yet at Cadidate Recommentation status, so they add a browser specific prefix in front of the property so that the particular rendering engine can process it. For example the -mox-border-radius is the Mozilla (Firefox, Camino and Flock) version of the border-radius  property.

The prefixes are:

1. -khtml- for Konqueror rendering engine KHTML
2. -ms- for IE's rendering engine Trident
3. -moz- for Firefox,Camino and Flock's engine Mozilla
4. -o- for Opera, Opera Mobile, Opera Mini, Nintendo Wii engine Presto
5.  -webkit- Safari, Mobile Safari, Chrome,Android engine webkit.

So why do these boyos exist? Well it allows the rendering engineers to "play" with new properties and values before they are finalised which is a good way for them to be tested in the wild and then corrected and tweaked as required. If they were just to jump straight in they would then be locked into that behaviour for ever. Devs like me would start making curvey corners and using partially opaque PNGs and quite rightly expect that when the browsers updated that particular behaviour would continue to work in a standard way.from that point onward. If the browser changed the standard property for whatever reason, buggy or a W3C spec change then lots of websites could potentially stop working as expected ... so they use the prefixes to get around this.  Have a look at Prefix or Posthack by Eric Meyer for an example of this actually happening.

CSS has long been a country full of "hacks" and kludges that rely on bugs in rendering engines most completely unrelated to the property you want to "hack" which are used to get the browser to do what you want it to do.


So you can use both the standard unrefixed property in your CSS and use the prefixed version as well, this means that as the property becomes a standard an impliemented in the same way over all the browsers your precious web pages will not break. It should be noted that IE9's prefixes are a bit "odd" at the minute for lots of properties they decided to jump straight into the standard and hope that the W3C doesn't change the spec!

div {
                  -moz-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                  -webkit-transform: rotate(45deg);
                  transform: rotate(45deg)
}

In the code aboveI am rotating a [DIV] element thru 45 degrees and I am covering the main browsers (inc IE9) However .. all this repitition will lead to large css files. It really would be so much nicer to have one single entry and have done with it. Well there is a way around this using a CSS pre-processor. SASS is one and LESS and eCSSTender to name 3. However by hiding prefixes with pre-processors devs may forget that they are using "experimental" properties that are likely to change when they are infact nothing of the kind. Also the Pre-Processor comes with a browser overhead and process overhead on the user's PC which becomes more noticeable on complex pages,

As time progresses you can remove the browser prefixs from your CSS, which is MUCH easier than "unhacking" css using the older hacks that relied on browser bugs.

A minor annoyance of using prefixes is that they do not validate and in DDE this can be a pain and can hide real errors in your CSS. to get around this I generally have two CSS files.. one with the pristine Standard CSS and one with the prefixes. There is an extra HTTP request hit here, but it does make debugging easier during testing.

So there you have it Prefixes .. next time I will have a think about coping with browsers that don't support CSS3

.o0( ok Why CSS3? )

Since the dawn of the first browser CSS (Cascading Style Sheets) have been evolving with progressive enhancements that allow developers more and more "design" options when designing a web site and the most recent iteration of this standard is CSS3 and having been playing with it on a couple of "new build" projects over the last couple of months and it has to be said I am impressed. Very Impressed!

The new techniques inherent in CSS3 give the developer more advantages over the older alternate more hacky methods. They extend the developer toolkit and in doing so bring the web-pages we create closer to the idea of a "web app" that looks and performs exactly like a desktop app.

Used correctly CSS3 can totally replace images, for example drop-shadows can now be done with CSS so you no longer have to design, place and download PNG or GIF images to get this effect. If you client wants to see what it looks like a little darker, a little further or wants it as a neon purple glow no longer do you have to hit GIMP or Photoshop a simple change to the CSS style is all that is required.

Some CSS allows you to do away with Javascript functions or Embedded Flash Objects which can be ackward to code for every browser particuklarly now we have to provide for a myriad of mobile browsers as well as desktop ones.

CSS3 also can reduce your markup by requiring fewer and less complex DIVs and associated Classes. for example you can now load multiple background images into a single Element so you do not have to have nested internal DIVs each one styled differently. Also and IMHO most markedly you can now target elements in the DOM directly based on their position in the document tree.

[All the above comes with the presupposition that all versions of IE are shit shit shit shit shit]

Having said that I have discovered that there are "the right tools for the job" and sometimes although the CSS3 technique is dead cool and sexy doing it using Javascript can sometimes do it more efficently and with less development time. So basically watch out and if CSS3 can do something quicker and more efficently use it otherwise .. well use your common sense. ;-)

I will endeavour over the next couple of posts to throw out some both my "oooooo!" and the less frequent "oh bollox!" moments that I have had with CSS3 over the past few months and perhaps spur you on to have a look at what I think is a definite gain to the art of web design.

The Dander for Dosh 2011

Just a quick "Thank You!" to all the friends, colleagues and strangers who donated to the First Domino Dander for Dosh charity walk. Eileen Fitzgeral, Andy Clark (a colleague from AVX where I work) and I completed the 26.22 miles of the Moyle Way yesterday in 10hrs and 6 minutes and thanks to the generosity of you lot we raised £1,375.00 for the Disaster Emmergency Committee appeal for the drought and famine in East Africa.

It is humbling to think that we 3 can raise some cash and make a difference to lives so far away. £0.25 will bring a child back from the brink of death, and £1375.00 will make a real difference to lots of people. We did the walk because we enjoy walking and hoped to make a bit of a difference to some other people ... you helped us to do that and we are very very very grateful to you all..

Thank you thank you thank you!

A full post on the goings-on with picture can be found here on the family blog

And once again THANK YOU!!! You guys ROCK!

SInging jQuery's praises in a Domino Environment

Riding as I do just behind the xPage wave, I still spend most of my time using the older web tech on the domino server to web enable my apps, some apps are just to big and too difficult to make all xPagey and lovely quickly, so we take a gradual approach to migration.

This does not mean however that the poor users have to put up with old fashioned make do an mend. We have been using a lot of jQuery of late to leverage some bells and whistles and whilst not the pre supplied Dojo that lives on the server which gets used a bit, For the shiney front end stuff we do use jQuery because it is so easy to code in.

You can get every thing you need from the UI page here. jQuery comes in two parts, the core product and the UI and there are pages to download both, However when you download the UI you will get the current stable jQuery core that matches the UI code, so I generally go down this route when acquiring the required bits and bobs.

When dealing with the UI components do have a look at the themes avaiable and choose the one that best suits you before you download. There is a "Theme Roller" app that allows you to tweak just about everything before you download and this is very useful when trying to get something that is "corporate identity friendly".

When you download the core and ui elements you get a zip file with everything you need including samples.Which can be a bit daunting. However the files you need are in two places all the Javascript is found in a directory called JS .. the files are currently
jQuery-1.5.1.min.js  - 84kb which contains the jQuery core code
and
jQuery-ui-1.8.15.custom.min.js - 206kb which contains the jQuery widget code.
You also need to resuce the CSS file and the associated graphics files which are in the CSS directory
when you tweaked the theme or selected one of the themes from the gallery of predfined ones you will have a subdirectory called the name of the theme. For example if you select "smoothness" there will be a dir called smoothness in which you will find
jQuery-ui-1.8.15.custom.css - 33kb
and a sub directory called images which has all the image files you need for the widgets

You have a couple of  options here,you can totally ignore the download and use the CDN hosted files or you can just copy the JS and CSS to the Domino\Data\Domino\html directory on your server,or you can embedd the requred files in your domino application. The choice is up to you. From a personal point of view I am inclined to embed the files in my apps as I live in a very disparate server environment where I cannot guarantee that every user will have access to the internet for the CDN files , or guarantee that every server in the domain has the correct JS in the correct place at the same time.

Housing the jQuery in an NSF is not that difficult but it does need a wee bit of tweaking.

The JS files are minified and as such cannot just be cut and pasted into a JS library, so I just import them into the RESOURCCES / FILES section.

The CSS I import directly into a RESOURCES Style sheet, edit and run a Replace All on URL(images/ replacing it with plain URL(

The Images are all PNG so will not import into the images section of the nsf so I load them into the RESOURCES / FILES section as well.

... and that is it. you are ready to roll.

As an example of how easy it is to provide a jQueried widget I wil use the old favoutie a name finder field

For this you will need access to the jQuery code defined above by one of the methods

Create your form
Add links to the JS files and CSS files in the HTML HEAD Section

(i have renamed the files for ease of typing)

Add the field you want to have an autocomplete onto the form
Give it an HTML ID property of say "myname"
Create some HTML in the JS Header section like this

jQuery has a special function  $(document).ready() which fires when the document is completely ready and all JS, images etc has been downloaded, and is ready for use. This is what is happening in (A) above which says when the document is ready run the function fInitApp()

fInitApp() is defined below and the jQuery selector $('#myname') tells jquery to search the document and locate the HTML element with the ID of myname [jQuery uses the same short hand as CSS in that a . defines a css classname and # defines an ID name.

Having found the element with an ID of myname, in this case a Text or Name field on the form jQuery then uses the autocomplete widget instansiator. Autocomplete is defined in the UI JS file and all that is required is that you set it up once when the document is loaded.

The Autocomplete function is supplied with an array of options surrounded in curly brackets.In the example above what I am saying is .. trigger the autocomplete when I have type 3 characters, get the data from a notes agent called getnames and the return data will be in json format.

jQuery passes what you type back to the agent url as a field called TERM in the CGI field called Query_String

So you write an agent with the same name as the Source: definition that takes this CGI field and queries the ($users) views in your names.nsf and returns a JSON String something like this ( I am limiting the return to 10 names you can set this as you see fit)

And that is all there is to it...

I have popped the above code into an NSF and you can have a look at by downloading it from here
and if you havent looked a jQuery yet, i advise you to have a look see. There is a wee learning curve but once you have the basics you can get remarkable effects very quickly and you do not need xPages to do it, so if you are stuck back on early V8 or V7 then you can still serve your users something pretty good very quickly.

Please give to Domino Danderers Dander for Dosh 2011

Folk of the yellowverse and others that come to read my wittterings i make no apologies for coming to you cap in hand looking for $'s £'s and €'s for this year's Domino Danderers Dander for Dosh.

Eileen and I are going to walk the Moyle Way, 26 miles of mainly off road dandering in the Glens of Antrim on the 19th August this year. We may well will be joined by some of the "AVX Bog Faeries" and perhaps a couple of bods from ni-wild.org this will be a long hard dander for this old grumpy codger and I fully expect to be punctured at the end of it.

So why am I and the rest of the team here cap in hand looking for cash of my friends, colleagues and totaly strangers? Well for the past couple of days the news out of East Africa is getting pretty grim. Only last night I was in tears watching the 10 o'clock news as a child to weak from starvation and dehydration to scream was brought back from the brink by the doctors working the Dadaab refugee camp in Kenya. Built to care for 90,000 it has swollen to 400,000 with 1000 new arrivals everyday each arrival brings chilling tales of horror and anguish like this...

...A mother of six was forced to decide today whether to leave behind her daughter, who is simply too sick to travel, in order to save the rest of her family. Suffering from malnutrition, her daughter wasn't strong enough to continue with their 30-day, 50-mile journey from Somalia into neighboring Kenya. The mother, who was so traumatized that she couldn’t continue describing her ordeal to the doctors or to even give her name, had to leave her child by the side of the road to die where she was left.

 I sit here at my desk, comfortable, warm , well fed and watered and I feel guilty as well I might that I am so well served by my lifestyle. Death does not sit as an un-invited guest at my table each evening I am never faced with making the choice as to which of my family will live and which will die ... I and you gentle reader are lucky, really really lucky!

Eileen, I and our dandering friends will be walking a mere 26 miles, in comfy boots, well supplied with liquids and sandwiches. We will end up in a pub and raise a few glasses to our achievement but that achievement will be as nothing to those now on the road to the refugee camps right now. There are children dying NOW and we can help NOW.

If you know Eileen or myself and would buy us a pint at the bar at a LUG please please please buy us a pint now, buy us 2 or 3 or even 4, whatever you can manage. Visit our Just Giving page and click the DONATE button and give what you can ...

To quote Bob Geldolf  at live aid  "Give us your F***ing Money NOW!" :-)

Thank you for reading this far and thank for giving!

A javascript for reconizing a URL in text and linkifying it

On a similar theme to the one below. here is a JS function that will linkify any http:\\ in a text strream for you

String.prototype.linkify = function() 
 {
   var url1 = /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g
   var url2 = /(^|<|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|>|$)/g
   var myresult = myresult.replace(/&/g, '&')
                         .replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(url1, '$1<a target="_blank" href="http://$2">$2</a>$3')
                         .replace(url2, '$1<a target="_blank" href="$2">$2</a>$5');
  
   return myresult;
}

A Javascript regexp for getting tags out of a textarea

If you are ever faced with , as I was recently, with a loading a text area with some text that has HTML tags in it and you want to get rid of them for say an abstract and you can't be arsed going back to the server here is a wee Javascript function that will do the job for you.


function fStripTags(a)
{
    b =  a.replace(/<\/?[^>]+>/gi, '')
    return b;
}



A wee problem with FIrefox and Quickr

Came across a problem with Firefox 4 and 5 today. It is a rather esoteric problem but it is a pain in the arse if you get it. I upgraded to FF4 last week and as soon as I did Quickr stopped working. When I went to the quickr home page I got 6 errors logged in Firebug starting with an "unterminated string error". this only seemed to be affecting me, the tech support chappies were all OK with both Firefox 4 and 5.

I started disabling plugins and addons and it was when I disabled the Lotuslive chat extension that the problem went away. Rather than just blame the Lotus Live extension I uninstalled FF and all the add-ons and extensions and installed a clean version 5.0.1 with no add-ons and re-added Firebug, Flashbug and the LotusLive chat extension (in that order) and Quickr continuted to work normally, so I would guess that it was a more complex issue that just the Lotuslive chat extension that caused the problem.

So if you come across Firefox not working for quickr and you get 6 errors starting with an "Unterminated Sting" error I suggest you uninstall FF and then do a clean install and everything should be fine

WARNING the Domino 852* ID Vault does no play well with 850* client code stream and there is no fix!

This is by way of a warning to anyone who uses ID Vault and has clients on the 850* code stream and is considering moving their domino servers up to the 852 code stream - DON'T DO IT!

Last week we moved one of our production servers up to Domino 852FP2 (300+ mail clients) and the Admin server for the domain started to get very very very slow, bandwidth vanished and everything all over the 20+ servers suddenly got very groggy.

We quickly tracked the problem to ADMIN4.NSF it was 2.4Gb in size and had over 6 million documents in it. 5,996,891 of them where HTTP Password Change requests originating on the server we just upgraded to 8.5.2FP2. A morning of testing showed that any Notes Client attaching to the affected server that was on the 850* code stream was generating an HTTP Password request everytime it started an NRPC session with the server. In some connection senarios 1000's of these requests were appearing a second. These then replicated from the affected server over to the ADMIN server in Ireland where is was actioned, updated the NAB and then replicated the NAB and ADMIN back to the affected server in the Czech Repulic and then out to all the other servers in the domain ... what fun!!!
A road warrior user reported a client directory replications of 26,000+ updates over the space of 12 hours.

We got around this initially by changing the ACL on ADMIN4.NSF and Denying Access to the affected server. This stopped the HTTP Requests appearing in ADMIN4 and allowed the network to return to normal. In the meantime I turned off the SYNC Internet password in the sec policy for that server pushed out the policy and then relaxed the ACL and the HTTP requests disappeared a quick agent run later ADMIN4,nsf had all the rogue records deleted and it had been compacted.
Now the change to "non-syncing the HTTP password", while being outside the strictest interpretation of our security policy was no "real" problem short term as the password change intervals gave us a couple of weeks of grace before this becomes a real problem.

I opened a PMR with IBM and informed them of the situation and the facts of the case. Their response was quick and unexpected- Ok upgrade all your clients to the 851 or 852 code stream ... that is the fix ... can we close the PMR?
WFT? 
Sorry what?
Could you repeat that?
A potential server and domain threatening bug which IBM acknowledge is a problem in code that at both 850* and upwards are within support and there is and will be no fix, just the advice to upgrade all your 850* clients to fix the problem ???

I rechecked the Upgrade Instructions and not a hint, link or suggestion that this could or would be a problem. Needless to say had there been a "If you are running... etc" warning I would NOT have upgraded the fecking server until all the clients were on the 851 code stream or better. There are Tech Notes that mention it at other releases but not the combination we had. Since there were no actual errors as such and the problem was silent when tested on a standalone server in a standalone domain where the rogue HTTP server requests were all created and actioned and resolved quickly and with no replication or heavy user load, this problem went un-noticed.


Now a quick check on the interweb showed that this has been a problem on an off for several 8* releases and it has been addressed previously ... I am asking myself how does the same bug get back into the code stream with such seeming regularity ? The answer to that I will leave you to make your own mind up about .. but I am thinking change control.

So "Upgrade all your clients or roll back the server" were the only options we were given to answer our PMR followed by a request for it to be closed. Well in the situation why the hell ask me if the PMR can be closed?  For me there is still a problem, it is a bug and it has NOT been addressed other than to provide something unexpected, unplanned and unbudgeted upgrades to 200 odd clients before the end of the month. Even so I am assured that the PMR will not result in a fix and that old chum is that!

I made sure that my reluctance to close the PMR was noted and that I thought my expectation of "support" for an active code stream was very markedly different from IBM's I also stressed that it would have been helpful if this problem had been written in a nice large font in the upgrade notes.

IF YOU ARE USING ID-VAULT AND HAVE 850 CLIENTS DO NOT UPGRADE.
would have helped more than the suggested fix.

A colleague had encouraged me to open this PMR and even though my already somewhat jaundiced view of support being offered not only by IBM but other big companies made me reluctant to do so, however the idea that "Well things will never get fixed if you dont report them" convinced me that I should be a good upstanding net-citizen and report the problem.

I did .. and it gives me no satisfaction to report my experience was a factor of annoyance many times worse that even this grumpy 30 year IT industry cynic could have imagined. Will I waste my time reporting an issue the next time we have one, or will I just not bother and find my own way to work around the problem?

Bah Humbug!

Anyway rant aside.. please do be careful if you are planning an ugrade, while this will not crash your servers it does have the effect of ADMINP jobs taking 70+% of the CPUage and your bandwidth will probably drop to 1989 speeds and remember IBM don't mention this in the upgrade notes so it will take you by surprise.

** UPDATE ** I forgot to mention the Replication Conflicts in the NAB if you have HUB and SPOKE servers.. since the NAB is being updated several times a second you get lots and lots of replication conflicts when the remote servers can't keep up

How to answer a "Would you like to take part in our customer satisfaction survey?" question

After a frustrating and entirely unsuccessful trawl through a support site of a well known and very large IT company I was presented with a pop up asking me did i want to take part in a survey? ... In Hind sight this was probably a mistake to give me the opportunity to respond, but they did ask and given a nice wee [textarea] for Other comments I add this ...

My visit to your support site was one, and I can say this without fear of contradiction, that filled me with a mixture of raw despair, sphincter tightening anguish and the urgent need to increase my anti depressive medication! I can only imagine that the reason your support site is such a heap of Rhino diahorrea left festering in the raw heat of the Serengeti sun is to allow the employes of ****** to relaxin the warm glow of schadenfreude radiating from the pain this site brings to us, the users.

I have left feedback about the careless nature with which you scatter hundreds of characters willynilly in your URLS. I have waxed long and lyrical about the less than purple nature of your prose in ***** documentation. I have gloried in the princely obfuscation with which you commission even the most simple of Installation Instructions. I have marvelled at the depth with which you can iterate the humble footnote ... but satisfaction? Alsa no! Satisfaction and myself are not loving bedfellows when it comes to the ***** Support site. I would go so far as to say that no longer do we share a bed but we have had expensive counselling followed by an acrimonious divorce and are now happily existing at either end of the universe!

I would love to be able to say "Thank you" but it hardly seems appropriate does it?

Turning off the CLOSE button in a jquery dialog

Here is a wee tip if your jquery and jquery UI elements in your apps. There may be an occasion when you want to use a jquery dialog and turn off the user's ability to close the dialog using ESC or the X in the top left of the dialog.

The easiest way to do this is thus

$("#xlogon").dialog(
{ modal: true,
closeOnEscape: false,
focus: function(event, ui) {
        $(".ui-dialog-titlebar-close").hide()
}});

the closeOnEscape is a supplied method and does what it says it does and the FOCUS event function hides the X in the top right of the dialog.

So what have you done in the last 12 months that you are proud of?

I am back from UKLUG and I am now in that period of slight anti-climax that comes before work starts again and normal life kicks me with that 18 hole Dr.Marten steel toe capped boot of reality right in my professional nuts.

Many were the chats at UKLUG and mighty was the craic. Geekness with a heady after note of nerd lay heavy in the air. Mind you that could have been Bill Buchan who was perhaps a tad heavy on the baked beans at breakfast.

Having watched the great and the good do their stuff, having seen the very brave sponsors do their thing and show off their products I am once again enthused and dare I say empowered. The other side of this coin is if I am now enthused and empowered what was I before? Taking a long hard look at my output I am forced to ask myself, what HAVE I done recently that I am actually proud of?

I have circumnavigated the corporate globe trying to pass my enthusiasm for a way of working that while Domino centric basically when all said and done is not so much a method but the simple act of sharing just, when all said and done, sharing and I should NOT have to teach adult people how to share!

I have created several applications that users both love and sometimes despise. I have enacted corporate policies over which I have little control or input but take all of the ire and blame that they generate. I take this flack with some level of professional courtesy most of the time ... but sometimes the toys get lined up alphabetically and some poor sod standing next to my pram gets the whole toy box turfed out onto them in glorious technicolor WITH subtitles AND fully biological accurate diagrams for those poor of understanding.

So whither my new enthusiasm and where to use my empowerment? In a year's time will I be able to create a [UL] list of all those things I am proud of and display them in a glowing neon font here on my blog or will I once again be listening to Mahler and feeling just a tad discomfited that another year has slipped by?

Let's be fair now, I am not all depressed and gloomy about this state of affairs :) I am reflective and a little disappointed in myself and this will probably prove more useful than anything else I picked up at UKLUG.

So given that I have found use in my cogitations on this subject I pose this question to you all - What have you done that you are proud of in the last year?

UKlug 2011 -raw chilies and refrigerated underpants

Well it's done!
Another Lug is in the box... And by all accounts it was a good one :)

So some thoughts from the comfort of terminal 3 Manchester airport ... Most importantly I learned an invaluable life lesson Never let a colleague order you 5 raw chilies at an Indian restaurant and then eat them ... No matter how much you enjoy it at the time, certain parts of your anatomy south if the belly button will thank you in the morning and Manchester airport does not have underpant freezing facilities!

However that aside uklug,what can one say? I have now been involved with the organization of 2 I and 2 UK lugs and with each one I come to a deeper understanding that herding cats is actually a doodle, organizing geeks on the other hand is best done only when you gave access to a dark room, soothing music and a supply of krispy creme donuts and / or Tunnocks teacakes.

Team building on the persistent Skype chat will only work if you sing the 'tigger song' at least once a call.

It is possible to make Eileen Fitzgerald (@eileenfirzy) speak at such a high frequency that bats get confused.

Giving a session with Mr Frank Doherty (@fsdoc) is both a pleasure and a privilege as he is a gentleman and scholar and an admin ranked in the dominoyesmaybe top 10.

Talking of Mr Doherty , his daughter Rebecca who foolishly volunteered to be one of the reception desk possee and checkin maaasive (aka Kitty's Geek Herders and freestyle extreme clipboard team) is amazing! If you are having an event invite her along ,she is fantastic and should do really well in her chosen career of hospitality management! Well done Rebecca!

The sessions were well attended and from what i heard very well received again another triumph directly related to the quality of experts and their desire to share with the greater community!

To all the foreign folk both attendee and speakers thank you so much for coming we really appreciate it. Some of you came from a very long way away and I hope the jet lag was worth it .. I suspect it was.

A big shout out to Warren and Kitty Elsmore without whom there would be no Uklug and without their good humour and organisational skills chaos and tears would result.

Oh for all those who volunteered for 'Moon the Mooney' on Tuesday afternoon this has been postponed until the next lug when participants are reminded that clean underwear is required aand in order to add the 'blast' to adminblast you must have had beans for breakfast!!

Another thing of note was that having that tornado of yellow tinted enthusiasm Mat Newman (@matnewmann)in the same bar as Bill Buchan (@u235) and myself did nor trigger the apocalypse but did result in a 'timtam-slamgasm' that could have destablised the space time continuum, we have dispatched Mark Myers (@stickfight) into the rift that ensued to recover Tom Duff's (@duffbert) spectacles and Francie Tanner's (@akafrancie) luggage.

So .. The sessions are over the beer has been quaffed the sponsors have been quizzed about new releases and prices and Big Firm Tony and Tim Clark has eaten an acre of naan bread. That's it for another year, thank you all for coming and I am already looking forward to seeing you all again next year

Making a CHECKBOX field align nicely on a Domino form

I was asked by my padowan in Austrailia today how to ensure that a multi colum CHECKBOX field on a Domino web app form can be made to line up properly.

There are several methods of doing this, however given the requirements that my padowan had this is the solution I gave her.

If you look at the RAW code that the domino server produces for a CEHCKBOX element you will notice that it created a [LABEL] envelope that contains the [INPUT] tag and the option's text. Depending on the number of columns you have defined on the field there will also be a [BR] tag inserted after that number of [LABEL]s have been placed on the form.

So how do we force the HTML and CSS to our will?

Well the first thing to do is work out how wide your [LABEL] set needs to be to incorporate both the checkbox itself, a margin, and the text label. Once we have this information we can work out how wide a container that will hold the columns needs to be, lets say 6 columns where each [LABEL] is 155px wide.
x155 = 930px. So we now know that a container for the SELECT needs to be a minum of 930px wide.


So I create a containing [DIV] for the field and syle it to be 930px wide
I place the field in the containing [DIV], the number of columns can be set to anything as it will be ignored
I create CSS that sets [BR] display to none , effectively turning it off
I then create CSS rule for [LABEL]s inside the containing [DIV] so they are BLOCK and of a known width

So the code looks like this :-

 Resulting in a display of the CHECKBOX like this all nicely lined up in the browser window

An invite to all Hong Kong Lotus Folks - Beer and geek chat anyone?

I just got confirmation of a spot of corporate travel next week and I and a lotus admin colleague will be in Hong Kong 9th to 17th May. So if anyone fancies meeting up for beer and a chat some evening between those dates drop me a reply here or an email at mcdonaghs (at) utvinternet (dot) com and we get together for an impromtue and freestyle LUG, everyone welcome :) don't be shy :) I am safe just ask Bill Buchan or Paul Mooney I am the soul of propriety, sense and sensibility.

Graphing the Contents of Mail.box

We were having an issue with one of our comms lines the other daywhich resulted in the sudden build up of mail in mail.box on one of the server. Probes were played with an found wanting as they needed someone to be poised Green Lantern like in their inbox waithing for a warning message to appear from a probe that flagged up the problem. In a busy IT dept this is sometimes not possible. What we needed was an app that polled mail.box and when a given limit of mail was passed went "DING" and changed colour.

So it occured to me that there are products outthere like GSX which would do that for me however I have less chance of getting a budget for new software at the minute than I have of becoming Pope! So I thru together this wee app for the ops team which they can open in their borwser and use as a visual and auditory warning of problems before they become really nasty.

This is what the app looks like

Fig 1. The Logon Screen
(A) Normal Domino Web Logon
(B) Interval the server is polled for data in MilliSeconds
(C) The root of the server URL
(D) The Panic Level at which the app warns the user

Fig 2. The Data and Graph - Normal status
Here the left hand panel shows the result of the last status and the graph the last 9 minutes

Fig 3. The Data and Graph - Limit Passed status
Here is the app having passed the danger threshold of 30 entries in mail.box at this time
the left hand panel has changed to RED and there is also a loudish DING triggered.
This continues until the contents of mail.box return to a level below the panic level.

So.. how is it all done?

Well I get the data using a /mail.box/mail?readviewentries&count=9999 call which returns some nice readable XML that I can parse and get a Grand total, Total of Live mail , Total of Dead Mail,Total of Held Mail and current size of all the mails currently in mail.box. This data I stick in a JS array which builds to a maximum of 100 entries and then then wraps by loosing the last entry and adding the newest at the end.

I use this JS array to build the graph which uses the Buff Graph library [canvas] HTML object (ExCanvas is used for the ever crap IE)
The data refreshed every x seconds depending what you put in the logon screen and the graph will redraw on every 4th data poll.

If you would like to have a play you can download the code here - there is one HTML file and 4 JS files and the DING.WAV file to slip into a folder on the Domino Server's Domino/Data/HTML folder then all you need to do is browse to the server and you are ready to go. If you have any questions just drop me a line

A plea for some $$ and ££’s for a friend dandering for dosh

In this connected “social” world of the internet that I and the ever patient and uber tidy Valerie (aka Slightlydoolally) inhabit on Twitter Facebook etc, there comes the occasional moment when the day to day stream of news, geek miscellanea and in my case downright weirdness takes a bit of a back seat and something important comes along and this is one of those occasions.
You may have noticed, I am a danderer, I love a bit of a plod around the countryside taking pictures and generally making a nuisance of myself by looking over fences and shouting MINT SAUCE at passing sheep so I take a keen interest in places my chums go for a dander. So it was with some excitment in Casa McDonagh that we noticed one of our  online chums Jules is doing the INCA TRAIL in Peru!! Setting aside for the moment that this is one of my “bucket list” danders and the jealousy quotient was immeadiately off the scale, Jules is doing this to raise some cash for a very important charity The Children’s charity.

The Children’s Society is committed to helping vulnerable and disadvantaged young people, including children in care and young runaways. They give a voice to disabled children, help young refugees to rebuild their lives and provide relief for young carers. Through their campaigns and research, they seek to influence policy and perceptions so that young people have a better chance in life.

TheSprog © (aka Niall McDonagh) can be a right royal pain in the arse, infuriating childish and yet thoughtfully adult in equal measures and his road to adulthood has been both fun and difficulty for him and us his parents. BUT and this is an important “BUT” many many children do NOT have the fun bit in their lives, for them it is just difficulty heaped on difficulty that that is quite simply WRONG! That is why Val and I are right behind Jules in her effort to “Dander for Dosh” for this important cause.
Now I know times are tough for us all just now and demands on our purses are many however if you motely collection of family, friends, colleagues and fellow geeks could spare just a couple of £’s or $’s today to help Jules raise and pass her target of £3950.00 for this very important charity it would be the best couple of clicks you could use your mouse for  on this Easter Sunday. So Please please please please click here and give Jules as much as you can … one less pint this evening and you will be helping to bring smiles back into the lives of some kids and you can’t really say fairer than that!
Happy Easter to you all  – Steve and Val

A gadget recommendation - PowerPod Executive Solar Phone Charger

It is not that often I get a new gadget.. I blame the bankers... however as part of my Birthday Pressie this year the wonderful and ever patient val (@slightlydoolaly) got me a "Powerpod" Solar charger for my phone direct from their website, which appeared in 2 days after ordering which is pretty good going considering I am in Northern Ireland!

To be precise the charger is called the i3500 Executive Solar Phone Charger £26.11 if bought direct.

(Picture courtesy of SolarKitsDirect.co.uk)

As you can see it is around the size of an iPhone contains a 3500 mAh battery,
monocrystalline solar cells which are much better than the cheaper and less efficent polycrystalline cells (I work for a company that manufactures high end domestic and industrial solar panels so things like that impress me!) The box also contained a plethora of connection adaptors for most mobile devices and a rather swish carry pouch that can be attached to a belt. The device itself is nice and light and the build quality seems excellent.

Now the main reason I have for buying this is .. I walk .. rather a lot ... and I usually use my HTC Desire's GPS function to record where I have been which sadly sucks the life out of the standard 1300mAh battery that comes with the phone. After 4 or 5 hours on the road and taking the odd photo the phone is nearly dead so I need something for those "all day danders" and I was definite that I did not want an extra battery or one of the "Thick" replacement batteries that requires a new back only gives another couple of hunderd mAhs and can mess up the heat disapation of the phone. So I went for one of these gadgets as it would give me just under 5000 mAh of battery to play with which should be ample for even the longest walk.

It was only partially charged when I took it out of the box so I plugged it into the mains using the supplied cable and the HTC USB mains plug and gave it a good deep charge. I worked out what connectors I needed to keep with the device. The only minus point in the whole start up is the supplied instructions while they cover the main areas well are a bit basic on a few topics. Like how exactly to charge using the sun. That aside .. how did it perform?

The first use was with the phone @ 75% battery with wifi, gps and 3g turned off. The phone charged to 100% in 31 minutes, reducing the charger from 4 status LEDs to 3

The next use was on a walk of about an hour with GPS on a 10 second refresh and 3g data turned on. Normally this would take between 20-25% of my battery depending on how many pictures I took and how much I tweeted. I had the chrager on my hip in its wee pouch and I discovered a bonus as the phone fits in the pouch as well!. The supplied USB cable is long enough to reach from the belt to most pockets and Micro USB adpator fits sunggly and securely in the charger and phone.. After 30 minutes the phone was showing 95%, probably because I used the camera a couple of times and uploaded some pictures to yFrog/Twitter along with the other background processes. At the end of the 75 min walk the phone was showing 91% and as soon as I stopped CardioTrainer GPS and 3G the phone was back up to 100% in 12 minutes, leaving the charger STILL with 3 of the 4 status LEDs lit so I am confident that it will cope with even my most demanding all day walks with ease.

I did have a couple of questions relating to how the device charged so I shot the support desk an email at 11pm and at 8:30am the next day I had a reply and a phone number from Nath one of the support staff suggesting I give him a ring to discuss my queries. So I did just that and I found Nath to be very helpful and knowledgable. He was able to fill in all the gaps about using the sun to charge the device, not that I expect the Northern Ireland sun will ever be out long enough to actually charge it fully :-)

So in conclusion owning a Powerpod has been great so far and the support has been excellent .. well done everyone at PowerBee.co.uk and Nath in particular

HELP !! Really odd Domino Designer 8.5.2 issue

I have a really peculiar error on my Domino Designer and would like your input.

01. I open an NSF in Designer or Right Click "Open in Designer" from the client workspace
02. The file opens in designer and in the title and file location in the left hand designer panel  is correct
03  I open any of the design elements Forms, Outlines, Pages whatever
04. The designer has a think and rather than open it on the server that I opened it on, it goes off and tries to open the file on another server, it is always the same other server, and the file may or may not have a replica on that server. Most of the time the file is on the developement server ONLY
05. This results in a FILE NOT FOUND error if the file does not exist on the other server

Changing to a local replica and everything is fine and the local elements open
Have a replica on the other server and the element you want will open but on the other server even though you have opened the correct server AND the file appears to be on the correct server in designer.

This is what it looks like on the LHS side bar, Server LNS/AVXEUR which is correct.. yes when it tries to open an element it attempts to open the file on AVX_HKG_LNS1  (the hong kong server).

Using the "Open in CLient" option opens the correct file

My Location doc has the correct home server defined.

I have removed all the replicas from my Workspace on AVX_HKG_LNS1

I have check Notes.ini for any evidence of AVX_HKG_LNS1 and there is none

I have delete cache.ndk

I have compressed my workspace

I have removed and re-created all my Connection documents

So where is this coming from? Any suggestions gratefully received!!!!

**UPDATE**
Tracked down the cuplrit and it appears to have been something in the Location document .. I created a totally new location (not a ciopy and edit that DOES NOT WORK!) once i had removed the old Location Documents everything now is normal and has been for 2 days. I have my fingers crossed that this will not happen again anytime soon
Steve

UKLUG 2011 More reasons to go!

UKLUG 2011 is 2 months away on the  23rd and 24th May in Manchester England. I have started perparing my session(s) and the pace is starting to heat up. Registration is starting to get tight and places will be limited. So it would be a really good idea to register now ... and do not forget .. IT IS FREE!

Warren Elsmore has announced that the lovely people at TLCC have very generously offered 20% discount on any of their excellent courses this offer is open to UKLUG attendees only and you get a discount code in your UKLUG handouts. Thanks TLCC that is great!

Also .. yes there is more .. Matt White over at xpages101.net is offering 33% off his excellent xpages training videos.. *PHEW* what more could you want! :-)

See full details of these offers over on Warren's blog so what are you waiting for, register now and we will see you in May in Manchester for all that is good in Social Business and did i mention it ... It is all free!!

LS11 My take from a far

I had been following with interest the info streams coming from LS11 and reading the followup blog posts from attendees and there was a resonance that this was the Lotusphere where the focus changed perceptibly from  announcements of wondrous new products (or improvements to old products) to something else. I wasn't there and it is a bit difficult for me to work out what the "something else" is. It seems perhaps that it might be a move away from pushing a particular software package centred solution where we compromise or work around a function because it is too difficult to implement or is just not possible. So what are we moving towards? Again distance and the lack of clarity in a message being retold by Twitter and blog posts makes me wonder but I do have the feeling that I was being lead to the idea that everything is possible but we need not to be bound by a "yellow" , "blue" or "black" ideology but one that embraces the delivery of function regardless of platform to this new "social" landscape that business is evolving into.

Hmmmmmmmm ... there is one part of me that rises up, reaches for my Yellow Soap Box and gets all William Wallace ... except for the woad ... I have been a Notes/Domino geek for a long time so perhaps that is only natural. However coming from an environment where we already use a plethora of platforms and software and my job has evolved not as a talented soloist in the orchestral of IT but as a conductor getting all the disparate sections to play together I sort of see where that is coming from.

Perhaps and I could be wrong we are being asked by IBM , paraphrasing My Big Fat Greek Wedding. "Don't let our past dictate who we are, but let our past dictate who we become" .....

Developing for Mobile Browsers (Part 2)

Moving on.... so what next, well having decided which method we are going to choose for getting the mobile content to the device as defined in part 1. Next how and what are we going to display?

Mobile stylesheets need to alter your content for the smaller more vertical display on most smartphones. (I am going to aim this at the smartphone mobile, tablets and iPads are a slightly different kettle of fish) If your desktop web site uses multi-column layouts we need to alter this so that it is displayed in single columns. Most mobile screens will be used vertically, so horizontal space becomes even more “expensive” and mobile layouts can rarely afford more than one column of content. Next, reduce clutter throughout the page by setting display: none; on any less important elements. Finally, save additional pixels by reducing margins and padding to create a tighter layout.

Setting display:none; however does not reduce bandwidth, the content will still be downloaded it will just not be displayed. If your workforce regularly travels outside the bounds of their local mobile ISP they may be hit with much more expensive roaming data charges if they can't find a nice friendly free wifi hotspot. In the US this is probably not a problem, however in Europe where proximity to a border can cause you to be hit with 5 euros a meg charges this is more worrisomesome.

If your site uses images for buttons or navigation, consider replacing these with plain-text / CSS counterparts. If you’d like to force the browser to use the alternate text for any of your images, use this snippet (and use JavaScript to add the as-text class for img and make sure that alt-attributes are properly defined in your markup):

img.as-text { content: attr(alt); }

Given the generally imprecise nature of the "click" event it is wise to make any clickable object have a display:block; style with increased padding and perhaps a tad more margin.

If you have made use of tiny or small fonts, consider how these will look on a small screen, if the user has to constantly zoom in on your content to make it usable then this should be looked at and an increase in font size considered

Floats, ah floats oh how I loath you particularly in Mobile layouts, I use them only when I really really have to. Given the ease with which elements are zoomed into and out off floats can really screw up a nice design on a mobile device. I use the axiom that on mobile devs vertical scrolling is better than horizontal.

The good old mouseover event doesn't work on most mobile devices and given the way they are used with fingers and not mice this is fair enough So make sure to have proper definitions of :active-states. and forget about the :hover It may be useful to apply definitions from the already defined :hover states to the :active states.

Avoid drop down Nav bars and menus at all times.. these can be a nightmare to code, instead have them either visible at all times or in a slide in/out panel.

If you want some good JS that will allow you to explore the RIA I can recommend jQueryMobile : The Touch-Optimised Web Framework for iPads and Smartphones which has a growing array of functions and UI widgets that make your mobile web pages sing.

The jQuery mobile framework takes the "write less, do more" mantra to the next level. Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms

See here for details of current coverage

In the next post I will look at some of the "mobile" only things you can do with HTML schemes

Developing for Mobile Browsers (Part 1)

I have been working with a web site that needs to be viewable from both desktop and mobile browsers. The site has an established CSS which works well across the current desktop browsers (even IE after a shed load of fiddling and hacking). However there are now a vast array of mobile browsers and whilst they do their best when faced with a CSS definition that was coded, tweaked and hacked for the desktop it basically just either doesn't work or the accessibility for the user goes out the window in a flurry of gestures and scrolling.

Yes you did read that right I used the "accessibility" word. It has, for good or ill, become a euphemism for "We will look at that in the next release", "There is no budget for that" and most tellingly "I am not paid to be that sort of designer".

The concept of the "Usable App" is now becoming firmly ingrained into the user. My better and ever patient half Valerie is a prime example of this. She was a late comer to the tech world but is now equipped with both net book and smart phone. She was lying on the sofa the other night downloading apps from the Android market and if she could not use the app quickly, see it's usefulness and intuitively use it then it was deleted and forgotten very very quickly. This brutal but fair criticism of mobile applications is now appearing daily inside the firewall. Users want similar ease of use of corporate apps on their mobile devices. I have been asked several times "Why can't you make it like TweetDeck*? (*insert app of choice here) and I foresee a time in the very near future when the same sentiments will be expressed about desktop apps.

So where does that leave us the developers? Geek seer and banana imitator Tom Duff perhaps saw this very thing 3 years ago when he did a session ILUG entitled "Moving from a Plumber to a Painter". Well I am seeing my career move in that very direction. I still have the requirement to have all the perfectly lovely uber-geeky back end code but I need to spend an equal effort enabling an interface that allows all my users to access it on whatever platform they want to use.

So I want to share what I have discovered about mobile web coding so far. I am not an expert by any stretch of the imagination (and I welcome input from anyone out there that is!) , but I have learnt a couple of tricks and in the next few posts I will run them up the flag pole and you can use or abuse them as you see fit ;-)

So onward with the first Topic ... Getting Started
I have to say I got stuck on this particular thorny question for some time and there appear to be 3 ways you can tailor your site for mobile access :-

1) Server-side Methods & The UA String

One approach to including mobile stylesheets involves detecting the user agent string with a server-side agent. With this technique, the site detects mobile devices and either serves an appropriate stylesheet or redirects the user to a mobile subdomain. This server-side approach has several advantages in that it ensures compatibility and also allows the website to serve special mark-up/content to mobile users with a minimum of fuss, avoiding potentially expensive multiple downloads of style sheets.

This technique can be perfect for big websites on super servers, I have my doubts when implementing on most sites. New user agent strings come out almost daily, so keeping the UA list current is next to impossible and requires lots and lots of testing with the currently available mobile browsers. Additionally, this approach depends on the device to relay its true user agent and yet browsers have been spoofing their UA string to get around this type of detection in the past. For instance, most UA strings still start with “Mozilla” to get through the Netscape checks used in the 90's, and for several years Opera rather inexplicably pretended to be IE!

This method also implies that there are two separate applications a desktop and a mobile one, this can lead to the development of two mutually separate and unique applications rather than one application which has been optimised for particular platforms.

Client-side Methods & Media Queries
Alternately, the easiest approach involves detecting the mobile device on the client side. One of the earliest techniques for including mobile stylesheets involves taking advantage of the stylesheet’s media type, for instance I could add this to my HTML:

<link rel="stylesheet" href="desktop.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />

Here we’ve included two stylesheets, the first desktop.css targets desktops and laptops using the screen media type, while the second mobile.css targets mobile devices using handheld. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both which with mobile data costs can be a download to far.

The pubic hair in the soap of this method is that most newer devices have done away with the handheld distinction altogether so that users get a fully-featured web page as opposed to what used to be duller mobile layouts. I have found that media queries work rather well. This method allow us to target styles based on the client based on viewport width.

<link rel="stylesheet" href="mobile.css" 
media="only screen and (max-device width:480px)"/>

First, define two stylesheets: desktop.css with everything for normal browsers and antidesktop.css to overwrite/nullify any styles that you don’t want on mobile devices. Tie these two stylesheets together in another stylesheet main.css which contains this code

@import url("desktop.css");
@import url("antidesktop.css") handheld;
@import url("antidesktop.css") only screen and (max-device-width:480px);

Finally, define another stylesheet handheld.css with additional styling for mobile browsers and link them on the page like this

<link rel="stylesheet" href="main.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" 
media="handheld,only screen and  max-device-width:480px)"/>

While this technique reaches a large market share of mobile devices, it is by no means perfect. Some mobile devices such as iPad are more than 480 pixels wide and will not work with this method. However, these larger devices arguably don’t need a condensed mobile layout. Moving forward, there will likely be more devices that don’t fit into this mold. Unfortunately, it is very difficult to future-proof mobile detection, since standards are still emerging.
Besides device detection, the media query approach also presents other issues. Mainly, media queries can only style content differently and provide no control over content delivery. For instance, a media query can be used to hide a side column’s content, but it cannot prevent that mark-up from being downloaded by your users. Again given mobile bandwidth and cost issues, this additional HTML should not simply be ignored.

3. User Selection
Considering the difficulties with mobile UA detection on the server and the pitfalls of media queries on the client it could be best simply allow the user to decide whether to view the mobile version of your website. This has the disadvantage of requiring more user interaction but it is arguably the most fool-proof method and also the easiest to accomplish.

Simply stick a button or a link that reads Visit our mobile site which when clicked takes the user to the correctly styled mobile page. The one problem with this is Users are stupid and will miss the button or will click it when they are using a desktop, then try to get it to work by touching their screens and then phone the help desk to tell you it doesn't work, but if you have sensible users then this could be the route for you, particularly since some will prefer a condensed layout that is optimized for their device, whereas others may prefer to access the entire website, without the restrictions of a limited mobile layout.

Those are the 3 options I have come across, there may be more and if there are please let me know :-)

In my next post on this I will look at what I think you should change when optimizing for a mobile device.