Slideshows by geeks

I read a post explaining slideshow design by a 'non-designer' geek on Google Reader. I was pretty inspired so I grabbed some of my own colour palettes from Colour Lovers.

I downloaded that amazing font Yanone Kaffeesatz and promptly also downloaded the font kit from Font Squirrel.
And started playing.... I've started on a slideshow explaining my experiences of Software Change Management processes whilst working within a multi-national safety driven company. OK, its only four slides long so far... but I love that just by reading this article I was able to create slides with such design credibility!


I had loads of issues trying to take away the chunky white border in my powerpoint presentation. I'm working on Office for Mac. So in case anyones got the same issues:

Create a custom Paper size  (I called it A4_no_borders)  based on A4 dimensions, but 'tweaked' to Width 210 Height 297.
Go to Page Setup and adjust the width and height again to Width 21.0cm and Height 29.7cm.
Press OK then go to print, check the numbers by going to Page Setup again - the numbers on my computer shifted to 21.01 and 29.69 so go and adjust your custom paper  to 210.1 and 296.9.
On print options click scale to fit paper and add frame to slides - this takes away the remaining stubborn white pixels.
Print to PDF

Resizing jQuery dialogs

I have a quick way of producing dialogs by specifying class="modal" with a href="the modal id", and a div with class="modal" and id="the modal id".

View the demo

What was annoying me is that when the page was resized to a small screen it wasn't displaying the dialog well. The dialog itself was too big and wasn't centred.

Add this script after the dialog opening to change the width and recenter for smaller windows:

 
if(window.innerWidth<=480){
    $('#'+($(this).attr("href"))).dialog( "option", "width", 300 );
    $('#'+($(this).attr("href"))).dialog("option", "position", "center");
}

then to modify the text within so that there is no scrolling need, change the css:

 
div.modal p {
    width: 480px;
    word-break: break-all; /*hyphenate*/
}
@media only screen and (max-width: 480px) {
    div.modal p {
        width: 280px;
        word-break: break-all;
    }
}

I'll be working soon on changing the header size for small screens on my boilerplate and making the dialogs work for ios5.

Writing UTF-8 XML files with Java

I had a method to write XML files with FileWriter but discovered when I wanted to (...allow my customers to...) use special characters it fell over. I needed to use a FileOutputStream in order to deal with bytes.

Original method:

 
public void oldWriteXML() throws Exception{
        storeDoc.normalize(); //storeDoc is type Document
        if (storeFile!=null){
            storeFile.delete(); //delete the old file to overwrite
        }
        OutputStreamWriter fos = new FileWriter(filename);

        OutputFormat format = new OutputFormat(storeDoc);
        format.setLineWidth(65);
        format.setIndenting(true);
        format.setIndent(2);
        XMLSerializer serializer = new XMLSerializer(fos, format);
        serializer.serialize(storeDoc);

        fos.close();
    }

New method to allow UTF-8:

 
public void writeXML() throws Exception{
        storeDoc.normalize();
        if (storeFile!=null){
            storeFile.delete();
        }
        OutputStreamWriter fos = 
                new OutputStreamWriter(new FileOutputStream(filename),"UTF-8");
        
        OutputFormat format = new OutputFormat(storeDoc, "UTF-8", true);
        format.setLineWidth(65);
        format.setIndent(2);
        
        XMLSerializer serializer = new XMLSerializer(fos, format);
        serializer.serialize(storeDoc);

        fos.close();        
    }

Remember Me

I was struggling this evening designing a simple user interface for a new application. I got in a rut over how to word 'remember me', or more accurately - 'store a cookie for this browser on this computer that says last time you got your log in right'.

I figured the most explicit way to word this would be 'Remember me on this computer' which I thought was the most popular way to write it. I also thought that was too long and wanted just 'Remember me' or shorter. But you know what some users are like - I didn't know if this wasn't self-explanitory enough!

So I did a bit of digging and found lots of ways to say it - I found 'Remember me on this computer' used to be used everywhere (lots of google images showed old screen captures of log in screens with this), but that the major websites have all now migrated to shorter versions, heres the line up:


Remember Me - wordpress, aol, twitter, wikipedia
Stay Signed In - Google Accounts
Keep Me Logged In - Facebook
Keep Me Signed In - yahoo, ebay, msn, hotmail

Other versions:

Stay Logged In
Remember My Password - I think this would make people uncomfortable?!

My thoughts have been that users like to think of websites as a human - if the human remembers them, it's friendly, if the human knows their password, its intrusive! 'Logged in' and 'Signed in' are very computer based activities, 'remembering' is human.

Some sites of course just go ahead and use the cookies (Amazon, apple...) I'm guessing that most users still like the thought that they have a choice - it's only polite!

Me? I think I'm going to go with 'Remember Me' - its short, it's meaning is obvious, and it's used enough on the major players that people understand that it doesn't work when you switch computers.

JQuery jerky movements

Even some of the simplest jquery animations can have a disappointing jerky quality to them. After a bit of digging I found that sometimes when jquery is animating something it gets the height (and therefore the animation step-heights) wrong. This led me to look at a quick fix -

1) Dynamically get the height of the element with .height()
2) Set the css to the fixed pixel value with .css(property, value)

My example has a nav element filled with divs, which in turn may have an ul (sub menu) to display.

View the Demo

 
$("nav div").hover(
 function() { // i.e. onmouseover function

   /*simple lines to fix a % based height to a px based height*/
   var h = jQuery(this).find("ul").height(); //find the height
   jQuery(this).find("ul").css("height", h);
                  //set the css height value to this fixed value
   /***********************************************************/

   jQuery(this).find("ul").stop(false, true).slideDown("500");
 },
 function(){ // i.e. onmouseout function
   jQuery(this).find("ul").stop(false, true).slideUp("500");
 });
});

NB the stop(false,true) makes sure that if the user is playing with the controls the animations will continue smoothly but won't stack up to cause an issue.

Welcome

Quick post to mark the beginning of the Kimgeekery blog. I don't pretend to be an expert at anything but I do have eureka moments - I hope to document them and help others onto those same lightbulbs.