A Typo? On this site?

Well, their are no doubt lots of typo’s on this site but I’m referring to the Ruby on Rails blogging application Typo (currently version 2.5.5)

So far I have to say it’s quite nice. I’m only playing at the moment – the site you are currently reading (for those of you actually on the site, and not reading the feed) is a product of my PHP skills. Some of it I like (ie. the bits I wanted to write), others I’m not too sure about and well, it doesn’t do anything I cant be bothered to write. Which up until not hasn’t been a problem. But I’d still quite like live searching, categories and tags and all that malarkey.

Browsing the usual supect sites the choice between using a bespoke system and an existing solution seems fairly split. John Hicks is always raving about TextPattern and saying nice things. You see lots of MovableType fans and WordPress fans but non to be fair I never really liked them. Maybe that was just me?

It might be that all, especially WordPress and MovableType are pretty mature solutions and that I like something to hack on? So a custom self built solution seems the way to go? Or does it? With everything providing very similar featuresets – and differing only in a few important areas building something bespoke means 95% redesigning and rebuilding the wheel and maybe 5% innovation. Which is cool as a learning experience but I’m now in more of a get stuff done mood of late.

I haven’t decided as yet one way or the other but Typo might just be the anwser. Small enough to hack, an excuse to learn Rails and featureful to boot.

Nice URLs and PHP

I all one for nice url’s, that is removing all the gumf involving question marks and ampersands and the like for something that is both shorter, more human readable and more search engine friendly.

Doing it in PHP is actually pretty straightforward once you get the hang of it and can be pretty powerful – so here goes with a short tutorial of sorts. It’s will probably be brief and make too many assumptions of the reader – any questions just let me know and I may even try and write it up properly.

The basic principle is to stop using the GET array (accessible from $\_SERVER\[‘GET’\]) to make descisions with. The question then becomes what to replace it with. A simple class borrowed from the Sitepoint PHP Anthology book written by Harry Fuecks is at least my answer. The PathVars class does pretty much what is says in the name, specifically providing access to the path contents in the form of an array. I’ll provide a link to a code archive for this article rather than just copy and paste whole classes – download it now if you are interested in the behind the scenes bits.

So we now create a new PathVars instance like so:

/* Pathvars object */ $pathvars = new PathVars($_SERVER['SCRIPT_NAME']);

And we can now magically get access to each element of the path (separated by a /) from the instance variable pathvars:

$params = $pathvars->pathVars;

Or more correctly by using the method provided:


Where the fetchByIndex parameter is the element you want from the array.

Ok, so so far I’m really just repeating the work of others, if you like this sort of thing I’d really recommend the book. The next step on top of this is however is to decide what to do with the information when you have it. The following shows a very simple example – potentially for use in a simple blog or news site:

switch ($pathvars->fetchByIndex(0)) { case "article": include(views/article.view.php); case "page": include(views/page.view.php); default: include('views/home.view.php'); }

In this example where we have www.example.com/article or www.example.com/article/a\_sample\_article\_name the article view include file is used.

What these include files then do is up to you, in my case each of them passes different parameters to a simple templating system which then outputs the page. Again, have a look at the code samples to see that in action.

Let me know if anyone found this interesting, useful or informative and I might post other titbits, otherwise it’s probably back to inane ramblings and misplaced conjecture.

the greatness of online tutorials

A somewhat grandiouse title but hey, dont you just love it when things just work? A slow evening lead to following two tutorials at once, the outcome I now have andy budd’s fab iTunes playlists set up and I have rails running on my host. Woo Hoo.

I love working things out and generally dont mind things ending up not working even but sometimes it’s nice when everything takes only a small amount of time and effort and then works. A sense of acomplishment, and admiration, if you will.

Oh, proof of the rails pudding: morethanseven.net:3000/ WEBrick at the moment, FastCGI is for another day, hopefully soon. And before you ask, I didn’t just copy the source from a local install. Really.

The tutorial I followed for that I grabbed from xmlareas.com/ruby-rails-howto.html which might be of use on a range of reasonable shared hosting environments – though remember to remomve the temp directory as it will contain LOTS of files that may flag some hosting file limits.

Makes me want to write some sort of how to articles on some subject or other. Question on a post card is what?

So a big thanks for Andy’s rather geeky approach to cataloging music (my librarian housemate is going to love that) and to goldenratio (probably not a real name?) for the Rails article. Long live the Internet and all that.

The State of Newcastle

I’ve been a practicing web designer/developer/whatever in Newcastle for over three years now and about a year ago I set up a mailing list to try and act as a useful resource, shamelessly stealing from brightonnewmedia.org

So was born newcastlenewmedia.org.

The grand plan was to find other people like me with an interest. Anyone I could learn new bits from and hopefully the utopian dream of everyone getting something out of particupating in a community. It’s been, I guess, something of a partialy something. Traffic goes up and down depending on, well I dont really know. Hopefully it’s been useful on occasion.

One issue was I never really promoted it. So, with a little time on my hands rather than redesigning this site (again) I did a little work freshening up the website, adding a showcase of local designers personal sites in the process and the plan is to promote it a little. Hopefully get some more people on their and in particular some students from the local Uni’s – quite a few of which teach something along the lines of web design but approach it in wildly different ways – something I might write about next.

Anyway, I guess the main aim is to get a snap shot of the industry and in particularly the people who make up the industry, in and around the North East. Are their people in their bedrooms going crazy CSS zen Garden designs? Are their any DOM Scripting leviathans? British web designers seem to be the cream of the crop, or at least make up a decent percentage of the cream (why do Standards based design analogies always end up being cake related?), but where are the Northern designers, never mind the North East.

Anyone else think differently? Let me know. Send me sites of designers and developers in and around the North East and I’ll post them into the newcastlenewmedia.org site and we shall see.

unobtrusive javascript

Lots of talk around at the moment about unobtrusive javascript on the usual websites and discussion lists. However alot of people, maybe outside the inner circles, are still finding old school examples of inline code on out of date pages.

So here’s my tuppence. I guess the more websites that post new, up to date, examples and reasoning the better?

The premise is pretty simple. In the same way as controlling formating with tables and having everything being mixed up in one .htm file is frowned upon as simply being too much work – dealing with lots of inline snippets of javascript raises the same problems. Namely being time consuming to update and maintain.

The solution is to keep ALL your javascript in separate .js files, and that includes removing things like href="javascript:" or onclick=. The first question is therefor how – when I started looking down this route I found a simple answer hard to come by, having to look at more complex examples and reverse engineer them.

The following is the method I’m using at the moment. It may have issues I’m unaware – if your a javascript guru let me know. The examples are from the fluidflash page on this site, see it in action at www.morethanseven.net/fluidflash

We first I set up an initialisation function:

function init() { if (!document.getElementById) return false; liquid = document.getElementById("iNavLiquid"); liquid.onclick = liquidChangeClass; }

This sets the onclick event on the element with the id iNavLiquid that will trigger the function liquidChangeClass. Next we define that function:

function changeClass( targetId, newClass ) { if (document.getElementById){ target = document.getElementById( targetId ); target.className = newClass; } } function liquidChangeClass() { changeClass("iBody","liquid"); }

The specifics aren’t too important to this example but you can see the liquidChangeClass function which is triggered by the onclick event handler.

And finally we need to trigger the init function when the page loads. Their are lots of ways of doing this which is probably a conversation for another time – I used a schedule function from themaninblue.com which you can find below:

function schedule(objectID, functionCall, iteration) { if (iteration == null){ iteration = 0; } if (objectID == "window") { var oldonload = window.onload; if (typeof window.onload != "function") { window.onload = functionCall; } else { window.onload = function() { oldonload(); functionCall(); } } } else if (document.getElementById(objectID)) { functionCall(); } else if (iteration < 300) { setTimeout(function(){schedule(objectID, functionCall, iteration + 1)}, 10); } return true; } schedule("window", init);

So their we have it, hopefully a simple enough example of how to move to unobtrusive javascript. As most of this is generic and used all the time it’s far simpler that it first appears.

How i came to love visio

I’m doing a lot more IA stuff of late and being in a Microsoft shop that meant getting to play with Visio. And I have to say it’s a great tool. It’s pretty simple to pick up, powerful, lots of options and customisations and even better – simple to get to grips with.

Quite a bit of work I’ve been doing has been around process and specification. I’d read The Elements of User Experience a while back but have been getting more into it recently, and the visual vocabulary stuff is excellent. Have a look on www.jjg.net/ia/visvocab/ if your into this kind of planning. You can download Visio Shapes as well and then it’s just a matter of dragging, dropping and drawing arrows.

Another good resourse has been boxesandarrows.com, a site I’ve read on occasion but found both more useful and more time to read recently. Documentation seems pretty key to getting projects working efficiently within team environments – and pictures say a thousand words (or something).

fluid flash v0.1

Their is nothing wrong with a nice header graphic. Clients, designers and customers alike love them. But I often see them used as an excuse for fixed width designs. Well no more I say (unless, of course you have a perfectly good reason for a fixed width design in which case you dont really need this technique.)

The plan was simple. Find a way of incorporating flash headers into sites using liquid or elastic designs in much the same way you might use lots of sliding doors background-image goodness.

A quick actionscript solution, courtesy of Mike Ord combined with some CSS and Javascript is presented for perusal on www.morethanseven.net/fluidflash .

This is a simple example, the header at the top is flash and writes to screen it’s current dimensions. Try resizing the screen (liquid layout) or text (elastic layout) and see for yourself.

I need a nice attractive flash movie to really show this off so anyone who wants to send something let me know – I’ll make sure to provide credit.

new designs with added width

Any previous visitors will notice something of a redesign which is pretty much finished – although no doubt their will be a few tweaks over the coming weeks as time permits.

The main reason was to bring in a liquid design that will allow more space – something I’m quite fond of as an idea.

The default for web pages, before we add any styles, is a liquid layout – where the site content fills the window whatever the width. This should be ideal for everyone, whatever resolution or monitor (or device) screen size. Why then do a great deal of sites use a fixed width design, my previous design included?

Design expediancy seems to me to be the main culprit in my view. Not always I’ll admit – lots of blog style sites use a fixed width centered column in order to get a readable number of words per line (whether they know it or not), which was my original excuse I’ll admit. For most designers, and most people, it’s simply easier to think in terms of thinks that dont change. Using percentages (in a liquid layout) or em’s (in a elastic layout) simply takes a bit of getting your head round.

It’s the web, not print, and that is something that from my experience (second hand I’ll admit) is something that isn’t drilled home on the majority of university or college courses.

Attractive header graphics is something that lots of sites, in particular commercial sites, employ – and with good reasons. It’s a great way of getting across a brand ethos in an attractive and eye catching manner. It’s also sometimes used as an excuse to use a fixed width design – the question is why? Try resizing windows and text on www.vivabit.com, www.thebgroup.co.uk or www.capgemini.com .

One outstanding issue I see is using Flash in a similar way. With broadband usage, especially amongst companies, on the up and up, using Flash (and video) in a similar way becomes increasingly more attractive. So something I’m going to have a look at is how Flash and either unobtrusive javascript or sliding doors techniques can be used to get the cake (attractive, flexible layouts which use Flash – without breaking the layout) and eat it. More soon.

Mobile Edition (sort of)

I’m something of a fan of mobile devices and really should do more mobile web stuff but hey, the support for mobile CSS is shody at best. Enter this article.

The idea is really pretty simple. All you really want when your paying for bandwidth on your phone (or you PDA connected to your phone via bluetooth) is the content. So lets get rid of everything (and we mean everything) else. The solution is fairly devious – using some PHP jiggery pokery, a sub domain and some text parsing.

Have a look at mobile.morethanseven.net for an example on this site.

In reality it’s a non ideal solution, but considerng it really does take two minutes I dont see that as a problem, and I think that was what the author of the article was getting at. We want to use mobile CSS but some browsers ignore it while others pretend they are grown up browsers and try and render the whole site CSS file.

I’m hopefully going to alter this a little, rather than removing all stylesheets leaving any mobile media sheets intact. Assign these to the main site and we have an interim solution. Fancy devices that make use of the correct style sheets can use the main domain fine, others can get the same design by visiting the mobile sub domain.

Musical Baton

For those like me behind the times, I was quite impressed to get passed the batton (thanks phil)

Total volume of music on my computer 19.51Gb Last CD I bought Foo Fighters – In Your Honor Song playing right now? Well the last song I listened to was The English Motorway System by Black Box Recorder

5 songs that I listen to a lot or mean something to me?

  1. Ash – Dancing on the Moon, Jesus Says B-side
  2. Johnny Cash – Hurt
  3. Easyworld – Goodnight
  4. Jimmy Eat World – The World You Love
  5. R.E.M. Strange Currencies

Note that that list probably changes every day but hey, that’s for today. I quite like Simon’s music monthlies idea but dont know whether I could ever really get round to it. Oh well.