Thursday, 23 September 2010

Facebook Is Down: What Do I Do?

So Facebook's down.  What to do, WHAT TO DO?

Well, blog about it, obviously.  And keep clicking to see if it's back yet.  Even if that makes the servers fall over, when 500 million people all try to log in at once.  And think about it a bit.  And think about your farm which will have dead crops because it can't be harvested.  And think about doing some work instead.  And then click it a bit more in case it comes back.  And try it on your iPhone/iPod/mobile device.  And then type 'Facebook is down' into Google, to make sure it's down for everyone else.  Go onto to check that it's really down, and crash that as well.  And then click some more.

And breathe.

Friday, 17 September 2010

On The Pope's Visit So Far

The thing about the Pope's visit is that it always had the potential to be like your first weekend back home after starting university, when you bring your cool new friend home to meet your parents.  The two of you are sitting on the bus (do students get buses nowadays?  Or are they above all that, with their laptops and iPads and crippling debts?), and you're all excited about her meeting your parents and them seeing what awesome, progressive, out-of-this-world person you've managed to chum up with, because this friend is, like, the most brilliant person ever, and is soooo funny, and can juggle 4 oranges, and knows all the cords for Bohemian Rhapsody, and there was that night that you were sitting in the common room playing pool and then these guys came in and it was, like, sooooo funny, and you were all up till midnight and had this great chat about Plato and Aristotle; and then, in a flash of doom, you realise that none of that is going to make up for the fact that she's going to leave wet towels on the bed.

You suddenly realise that this new friend is so unexpectedly cool because she is precisely the kind of person your parents have spent 18 years steering you away from (although my parents never did this, on the basis that weird/bad/scary friends were better than no friends at all (no offense intended to those I was friends with at school (or at least, most of you.  Others of you, my parents were right about))).  You realise, in short, that your parents are going to hate your new friend, and she is going to hate your parents, and they are going to think you're wasting your time at university, and be A Bit Disappointed, and that makes you sad.

So anyway, the Pope's visit could have gone that way.  It was all well and good inviting him over (it's about time we had a bit of pomp and style, it'll fill up the tv schedules, and the souvenir sales will boost the economy); but I think in all honesty the organisers have spent the past couple of weeks in a state of dread, what with the creeping realisation that quite a lot of people are still a bit out of sorts with that whole child abuse thing, and the gay thing, and the women thing, and that maybe this could all go hideously wrong and the Queen would get cross and ban him from the country, or Richard Dawkins would get to be on TV some more.

Thus far, however, things appear to be going according to plan, with Benny receiving a reasonable welcome in Scotland (having been greeted by Her Majesticness with the words "It was a very small car you arrived in, wasn't it? Very tight squeeze?"  If only she had added "When you go down to London, we'll get Philip to drive us in the Rolls", my week would have been made), and a reasonable amount of protesting and so on.

My particular favourite comment so far was made by the head of the Catholic Church in Scotland, who, musing on Ian Paisley's contribution to the occasion, commented that "Bascially, if Ian Paisley didn't come, I wouldn't have thought the visit was worthwhile."

Other commentators have chipped in with their tuppenceworth, including our good friends, the Scottish Falsetto Sock Puppet Theatre:

and the esteemed Professor Billy McWilliams, who, much like myself, was in 2 minds as to whether to protest*, and then decided not to.

* Technically, I never had any intention of protesting, because that would have involved going to Scotland, and protesting, and also being interested enough to be Against the whole thing, and also choosing to be on the side of Richard Dawkins.

Friday, 10 September 2010

In Which We Decide Whether We Are Fans Of The Pope's Visit, Or Not

So the Pope is coming in a few days time, and the nation is split in 3 - the 'fors', the 'againsts', and the 'mehs', the latter being by far the largest group.  The Masses are organised, the list of Things You May Bring To The Mass compiled, the shelves stocked with tat (won't someone please buy me a popener?), and the Saints-to-be are waiting expectantly in their graves.  Or Purgatory, if that turns out to be true.

It only remains for WhyNotSmile to decide which camp to join, and to set the tone for any coverage which may or may not happen here on the blog.

Clearly we're not going to decide to be 'meh'.  We will plump for one side or the other, perhaps at random, but vociferously and enthusiastically.  To remove some of the randomness, we will attempt a cost-benefit analysis of the visit, and use this to determine whether we're big fans of the 'Vicar of Christ', 'Servant of the Servants of God' and 'Patriarch of the West' (those are all titles for the Pope, by the way; we haven't suddenly changed topics), or strongly opposed to the arrival of 'The Antichrist'.

Apparently this whole thing is costing British taxpayers somewhere between £8 million and £12 million (between them all, obviously, not each, although based on some of the reactions, you'd wonder).  It's quite hard to get an actual figure, but as far as I can tell, it works out at about 50p each.  It amounts, in other words, to a couple of Curly Wurlys.
Now, for the purposes of this analysis, we are going to assume that WhyNotSmile is a taxpayer (ha), so the question becomes, do the benefits of the Papal visit outweigh the joy of 2 Curly Wurlys?  Because Curly Wurlys are extremely nice, and I don't want to deprive myself without good cause.

So what do I get for my Curly Wurlys?

1. Some waving from the popemobile.  Probably quite a lot of waving, although not waving at me.
2. The joy of new tat.  We have previously discussed the vast contribution made by the Catholic Church to the global supply of religious tat, and the visit of the Pope does not disappoint in this respect.  If you did not check out the link above, please do so now.  It's ok.  We'll wait.
3. It really, really fecks off Richard Dawkins.  It's not hard to feck off Dicky D., of course, but the Pope's visit is a source of particularly pleasing shows of frenzy, and for this we are truly thankful.  This point alone is worth at least one and a half of the Curly Wurlys.
4. Something on TV that isn't Friends.  Because, believe it or not, we're still watching Friends, here at Smile Towers.  Even though we have the box set, and we can watch that without adverts, we are still paying £140 per year to watch it on tv, with adverts.  But next week we can watch the Pope instead.  Not that we will, I'm guessing.

So I think, on balance, that we are going to opt for being Big Fans of the Pope's visit, and we will discuss it further as events unfold.

Thursday, 9 September 2010

How To Create A Website With Changing & Fading Background Images

So a client asked me to create a website which used changing & fading background images, and I said that sounded fine and I would check out how it worked, and then I looked it up on t'internet, and no one seemed to know how to do it.  Which surprised me because I'm sure I've seen it done, but maybe they used Flash or something.

So, not be be defeated (even when I read a thing that said it can't be done), I set myself to it, and now it works, which is rather marvellous.  I gave myself a small round of applause.  Then I figured that I should share it, because some people might want to do it but then give up when they read that it's awkward to do.

And so I present:

How To Create A Website With Changing & Fading Background Images
As ever, I deny all responsibility for this going wrong, if you try it and it does.

What we are trying to do:  the website should have a background image which fills the screen.  When the user scrolls, the background should remain fixed in place and the page content should scroll.  Every now and then, the background image should fade into another one.  This is to be achieved using HTML, CSS, Javascript and PHP, as required.

Caveats: this is basically not going to work on IE6, because it just doesn't like these things.  For IE6, just use a fixed background.  The fading effect will be ignored.  Anything below IE6, you probably have no chance.

The problems: having a rotating background image is not hard.  It just involves some css and javascript.  Fixing it in place is also fine.  The problem arises when you want to fade the background, because you can't do that without fading all the child elements... in other words, your page content will fade too.  So, we have to have 2 layers, one with the fading background, and one with the content.  But also, you can't fade one image into another if they're both in the background.  And also as well, sometimes the extra layer gets in the way and all your content moves to after the image.

But do not despair, for it can all be fixed, and here's how:

Step 1: The HTML
The basic idea is that we set 3 layers.  The top one is the page content, which moves when we scroll.  The middle one is the background image.  The lowest layer is the new image, which we fade to.  When the fade is complete, the middle layer gets this new image as well, and the background then gets the next one.  And so on.
Thus we have (I've done the opening pointy brackets the wrong way round, otherwise your browser won't show it):

    >div id="opacity-background">
       >div id="opacity-layer">
    >div id="mainBody"> Your main page content (header, navigation etc.) goes here

'opacity-background' and 'opacity-layer' will handle the images.  If you have an existing site, you can just put a 'mainBody' wrapper round the current content, and then add these 2 divs above it.

Step 2: The CSS
Your CSS should contain the following:

body {
 margin: 0;
 padding: 0;
 position: relative;
#opacity-background {
  margin-top: 0;
  width: 1700px;
  height: 1100px;
  z-index: 0;
  position: fixed;
  background-image: url(../img/backgrounds/background1.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
#opacity-layer {
  margin-top: 0;
  width: 1700px;
  height: 1100px;
  z-index: 0;
  position: fixed;
  background-image: url(../img/backgrounds/background1.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
#mainBody {
  position: absolute;
  margin-top: 0;
  z-index: 1;

Obviously the width and height of the image should be set to whatever size your image is.  And also the background-image url for opacity-background should be set to your own value.  Put this somewhere in your CSS file.

The Javascript
And finally, the javascript.  I used mootools for the fading effect, but you could code it yourself.  I considered this, because I was scared that I wouldn't understand mootools, but actually it's very very easy.  You just get the code (we will come to this presently) and then put it in a file and link to it.

So, let's assume you have a folder called 'scripts', which your javascript files (if you have any) are in.  So you go get mootools, which will give you a file called mootools.js, and you put it in 'scripts', and the in the head section of your page you put (again, I have swapped the pointy opening brackets so that this shows up in your browser):

>script language="javascript" src="./scripts/scmootools.js"> >/script>

so that's it all linked in and everything.  You don't have to have a folder called scripts.  You can just put it in the same place as your head file.

Now you need to add your own bit of javascript. I guess you could put this in an external file as well, but I didn't (I apologise that this is all jumbled up - the line breaks have not, as we say, propagated).

  >script type="text/javascript">
   var bgImages = new Array();
   bgImages[0] = '../img/backgrounds/background1.jpg';
   bgImages[1] = '../img/backgrounds/background2.jpg';
   bgImages[2] = '../img/backgrounds/background3.jpg';
   bgImages[3] = '../img/backgrounds/background4.jpg';
   var inc=-1;
   function backgroundChange() {
    if (inc==4) inc=0;
    // Set background to new image
    var bgDiv = $('opacity-background');
    bgDiv.setStyle('background-image','url(' + bgImages[inc] + ')');
    // Set up fade
    var m = $('opacity-layer');
    var fx = new Fx.Tween(m,{
        duration: 1500,
        onComplete: function(){
                // After fade, show new image on this layer
                m.setStyle('background-image','url(' + bgImages[inc] + ')');
    // Fade out current background
   // Navigation sliders and fade effects
   window.addEvent('domready', function(){
    // Add fade effect to all items in navigation menu
    var menuLinks = $$('a').filter(
                           function(item, index){
                            if(item.className == 'toplevelLink') return true; // Top level links
                            if(item.className == 'loneLink') return true; // Top level links
                            if(item.className == 'menu_sub') return true; // Submenu links
                            return false;
      // Set up morph
      var original = el.getStyle('color');
      var morph = new Fx.Morph(el, { 'duration':'500', link:'cancel'});
      // Attach event handlers
        'mouseenter' : function() { morph.start({'color':'#999999'})},
        'mouseleave' : function() { morph.start({'color':original})}
    // Get top level menus; hide submenus
      // Sliding menus
      var submenu = el.parentNode.getElementsByTagName('ul')[0]; // get sub menu
      var submenuSlide = new Fx.Slide(submenu); // turn submenu into slider
      if(submenu.className != 'this') { // hide submenu for now, unless a page from it is currently shown
      // Attach event handlers
       {'click': function(e){
                     var submenu = el.parentNode.getElementsByTagName('ul')[0]; // get sub menu
                     var submenuSlide = new Fx.Slide(submenu); // turn submenu into slider
                     var thisid =;
                     // Close all other submenus
                     var otherMenus = $$('a').filter(
                           function(item, index){
                            if(item.className != 'toplevelLink') return false;
                            if( != thisid) return true; // Other menus
                            return false;
                               // Set up slide on submenu
                               var slide = new Fx.Slide(el.parentNode.getElementsByTagName('ul')[0]);
                     // Show or hide this menu, as appropriate
   window.addEvent('load', function(){
    var pic = new Array();
    for(var ii=0; ii
     pic[ii]= new Image(100,25);
    setInterval('backgroundChange()', 5000);

So in the head section of your page, after the bit where you put the link to mootools, put the following:

You can play around with this a bit.  Make sure the paths to the images are right.

Basically that's all there is to it.

Appendix: How to get Mootools
I'm always scared of new things, because I'm always certain they won't work, but mooTools is very easy and lets you add lots of nice effects to your site.  It doesn't come with a lot in the way of examples, but it's not hard to figure out.

To get mooTools (it's free, by the way), go to and click one of the links in the first section (I went for the uncompressed one, but as long as you can uncompress them, the others are fine).  That gets you mootools.js.

Saturday, 4 September 2010

The WhyNotSmile Guide To Spelling, Punctuation and Grammar On The Internet

I don't want to come over all Lynne Truss on you all, but it has become clear of late that the quality of writing on the internet has slipped alarmingly in recent times, and if I don't take it in hand, frankly, who will?  With this in mind, I set to thinking, and it is thus with great pleasure that I present:

The WhyNotSmile Guide To Spelling, Punctuation and Grammar On The Internet

The rules of spelling, punctuation and grammar on the internet (SPAGOTI) are generally more relaxed than those in real life, and it pays little to get worked up over simple typing mistakes (hte, adn etc.). Indeed, the internet (and other modern technology) has birthed new language of its own, from the smilie, which we like, LOLspeak, which we like in its own domain (we shall return to this presently), and abbreviations like 'ur l8' ('You appear to be running behind schedule') which is ok (but not necessarily to be encouraged) on a mobile phone, but is intensely irritating anywhere else.

In general, it is fair to say that the internet is a fast-moving medium, and to this end, one does not wish to be pedantic about those instances when the spellchecker was an unnecessary hinderance; it is, however, reasonable to expect that communication be understandable and that it show signs that the communicator has put in some effort. With this in mind, we now consider the various elements of the Rules of SPAGOTI.

1. Bad typing. As stated above, there is a difference between bad spelling and bad typing, and this should be respected. We all miss a letter from time to time, and sometimes we mix letters up because one finger paused for thought and another overtook. This is acceptable, and, unless it is excessive, it does not do to be churlish about it.

2. You're, your and ur; there, their, ther and they're etc. The following is a comprehensive guide; please memorise it:
  • You're = You are. The apostrophe indicates that a letter has been omitted, as in 'phone for telephone, wasn't for was not, and 'ee by gum, which has omitted both some letters and any semblance of meaning. Example: You're learning fast
  • Your indicates 'belonging to you'. Like 'our', but it's yours. Example: 'Your toothbrush'.
  • Ur is text speak, and can be used IN TEXT MESSAGES ONLY to replace either of the above. This is an inappropriate place to give an example, as this is not a text message.
  • Use = put into service, as in 'I would like to use your bicycle tomorrow'.  It is not the plural of 'you'.  Neither is 'youse'. Also, you write 'youse', I think 'louse'.
  • There = in that place. Like 'where' and 'here'. It specifies a location. Example: The book is over there.
  • Their indicates 'belonging to them'. Like 'your', but theirs. Example: Their spelling is excellent.
  • They're = They are. Again, the apostrophe indicates that a letter has been omitted. It's really not that complicated. Example: They're starting to get the hang of this.
  • Ther is not a word.
  • It's = It is.  It's the apostrophe = missing letter thing again.
  • Its = belonging to it.  Like his or hers.
  • Its' is not a word
3. LOLspeak. It is possible that you have come across something which appeared to be badly spelt, but which you were able to understand when you said it out loud. If so, it is likely that this was either Ulster-Scots, or LOLspeak. LOLspeak is the language used on the Lolcats/Cheezburger sites. For those who have not come across this site before, it is essentially a worldwide, ongoing caption competition (with no prizes), in which anyone ('hoomans') can submit a humourous ('funneh') (or, indeed, non-humourous ('non-funneh')) caption ('capshun') to accompany a picture ('pictur') of a cat ('kitteh'). In many cases the humour is derived from the juxtaposition of the cat's seriousness with the incorrect spelling which goes along with it.
This is fine as far as it goes; the difficulty arises when the langauge of LOLcats is taken outside of its natural habitat and smattered disregardingly across the rest of the internet, or even (horror of horrors) onto actual, physical paper. At this point, a boundary has been crossed, and not for the better.

4. Abbreviations. It is perfectly acceptable to shorten 'later' to 'l8r' in a text message.  It is not acceptable to do this in an email, particularly if you are trying to convey a serious point.  On the other hand, there is no sense in doing everything in longhand; for instance, do not feel you must refer to 'Compact Discs', 'Personal Computers' or 'Automated Teller Machines'.
As a rough guide, if your father would understand it, then it's fine.  Your mother should not be used as a guide, as they are ferocious for picking up abbreviations and using them like crazy.

5. Please learn to differentiate the following words:
  • chose = past tense (Last week, I chose strawberry ice cream).  choose = present tense (I choose tea, in general).
  • lose = become unable to find (where did you lose it?).  loose = not tight

Contrary to what appears to be an alarmingly popular opinion, punctuation is as important on the internet as it is anywhere else.  'Punctuation' is all those little dots, dashes and wavy lines that are used to create smilies.  It appears to be unknown to some, but these all have value in their own right, as we shall now consider:

1.The 'Full Stop', or 'Period'.  That's the little dot which you may have noted at the end of all my sentences.  The full stop virtually exists to end sentences.  Because sometimes, no matter how important your point is, you have to stop talking.  At that point, you should enter a full stop.  For instance, the following are correct uses for full stops:
  • The cat sat on the mat.
  • I ran a marathon today.
  • He went to the shop; I do not know when he will return.
The following are incorrect:
  • The cat sat on the mat then he ate lunch then it went outside lol
  • He laughed. at me because I can't spell
From time to time it is acceptable to omit the full stop; for instance, in headings, or when the sentence ends with a question.
The other main use of a full stop is to denote an abbreviation.  E.g., e.g., i.e., etc., ibid. and so on; while there are rules about this on paper, I think we can safely say that in the online world one need not be too concerned.  Some abbreviations, such as Dr, NATO and CD do not require full stops, although I am not sure why.

2. The Comma.  The comma may well be the most abused punctuation mark in existence.  Partly this is because insertion of a comma is often a matter of personal preference, and partly it is because the comma has begun to be some sort of catch-all punctuation mark which is used by the uninformed as a short-cut.
Theoretically, it is possible to construct reasonably intelligible sentences without the use of a single comma, particularly in text messages and Facebook stati, and in many cases of uncertainty this is the best course of action.  Of course, one must take care to avoid such situations as the now well-known "Let's eat Harry!" in place of "Let's eat, Harry!", but in general one can get away with leaving a comma out.
One trend which has troubled me of late is the tendency to use commas in place of apostrophes, leading to sentences like "The man,s tie had become worn".  This makes no sense.  Please don't do it.
An even more disturbing trend is the multiple comma, particularly when it is used in place of a full stop.  On more than one occassion in the recent past, I have seen my Facebook feed littered with things like the following: "Just watchd the footie,,, Can't believe it [player name] was sent off!!!, , , lol whydo they do dat av nevr seen a ref so bad,", which, frankly, I do not believe I should be forced to read.

3. Brackets.  I don't have a lot to say about brackets, except that, for every open bracket, there should be a matching close bracket.  Brackets are for sidelines, extra information, and tangents; one should be able to remove them and still understand the sentence.  For instance: "The unicorn (which was white, with a golden mane) chewed the grass thoughtfully for some time".  It still makes sense if you remove the bit in brackets.  The difficulty here is that some of us make a mental note that we have entered a bracket, and take our thought volume down a notch every time we do.  We then ratchet it back up when the closing bracket is found; if it does not appear, we end up in silence, and confused.

4. The Colon.  Essentially, this should be used to introduce lists, viz: "I bought three things: a basket, a ball of wool, and a pair of scissors".  On the internet, if you're not sure, do not use it outside this context.

5. The Semicolon.  Like the colon, should only be wielded by those who know what they're doing.  With the more casual approach to punctuation allowed online, if you're not sure whether to use a semi-colon, it is best to use a comma instead.

6. The Question Mark.  This indicates that you asked a question.  It ought, in many ways, to be the simplest form of punctuation to master, but it appears that the internet is no friend of the simple, and far too many times have I seen questions without question marks, and question marks without questions.  The pairing should be as natural as yin and yang, Torville and Dean, or strawberries and cream (and just as pleasant), but (sadly), too often the two are torn asunder, and the rent halves are left alone, bereft.

7. Quotation Marks.  These are the vertical double dash thingies, not the vertical single dash, although the latter can also be used for quotations. They indicate that someone has said something.  For example: 'Right in the middle of the room, she stood up and said "Well, I have never heard the like!"'.  They can often be omitted in text messages.  The important thing to understand, however, is that they can be used to imply that someone has said something which isn't true; they are frequently employed by journalists to quote sources and indicate that some truth is being concealed.  So, one could say 'She told me she was "going to bed"', to imply that perhaps she was doing something other than sleeping.
Now the point here is that, if you put a word or phrase in quotation marks, particularly if you are trying to promote something, you end up making it look untrue.  For instance, 'Shop here!  We have the "best" prices in town!' may be intended as an advertisement, but what it means to the grammarian is that someone once said the prices were the best, but probably that was the owner's mother.

Grammar is (and I quote Wikipedia) the set of structural rules that govern the composition of sentences, phrases, and words in any given natural language.  In other words, it tells you how to put words together so that sentences make sense.
Now, I have a number of bugbears here (as you might expect).  Most of these apply to real life as well as the internet; but whereas in real life you can generally disguise them with a bit of an accent, their use online is inappropriate.

1. 'I saw' and 'I have seen'.  Not 'I seen', and not 'I have saw'.  Yes, it matters.  Other examples include:
'I went' and 'I have gone'; 'I did' and 'I have done'.  It's all to do with past participles; you do not need to be familiar with the technicalities (although it's worth it for the sheer joy of knowing), but please take a few moments to memorise the rules.

2. 'I would have', not 'I would of'.  It's an accent thing.  People sound like they're saying 'of', but really, it's 'have'.  Trust me.  You get away with more in conversation.  You could say "I carried on disregardless" and the other person will think "disregardless?", but you will have moved on disregardless and it will all blow over.

3. Text messaging is a special case; email and Facebook stati are not.  In texting, you don't always have the time and space for the full 'subject-verb-object', and it is sometimes acceptable to omit one or more elements.  For instance 'I have your pen and I will bring it round to you later' can justifiably be texted as 'Have ur pen, will bring 2u l8r' (although if you have a pen, the preference would, naturally, be to write a letter).  Likewise 'I will be there in 10 minutes' can be shortened to 'Wiv u in 10'.  These are fine.
However, in emails, please use full sentences (possible exceptions can be made for emails sent from mobiles, as one can only type on those wee keypads for a short time before one gets Carpal Issues).

I trust the above guide has clarified some things for you all.  As we said at the beginning, the aim is not to start getting sniffy over every typing error and omitted article, but it is to be hoped that communication can be made increasingly clear (note: not increasingly clearer, which is a second order derivative and does little to add meaning, and much to make the user look a bit dense, or pompous).