wheresrhys

A friend of mine (whom I’ll be doing a website for shortly) mentioned last night that  she was impressed that I was able to learn all I know about web development from the internet (more or less)… and, come to think of it, so am I. There can’t be many careers where the internet enables you to become fully trained and, arguably, more informed than people who learn their craft just from courses and books.

But it got me thinking about how gradual a process it’s been, picking up all these skills. Starting with html, then on to CSS, then a little functional php and javascript, a slight detour into google maps, then on to fully OOP programming using jQuery and Zend framework. And I came to realise that for many of these, especially the early ones, the reason I’d started to look into them was because I worked with an idiot that didn’t understand what they were doing.

Indeed, there’s nothing like incompetence in somebody who should know what they’re doing to spur you on to learn how to do it yourself. If you’re dealing with an expert there’s very little chance your embryonic efforts will outshine theirs, and you’ll probably have little reason to want to bypass them anyway. But if you’re stuck with an idiot that constantly frustrates you with their incompetence and inability to do the simplest things, then it’s easy to convince yourself that you could do better, so you start to learn the basics, pretty confident in the knowledge that if you master these you’ll already be light years ahead of your resident idiot. Maybe all companies should have an official idiot hiring quota as part of their professional development strategy.

So here’s to you, idiots, for leading me, and probably many others, to a decent career.

One of the problems I had to solve when writing my new jQuery listSplitter plugin was sorting an array of arrays/multidimensional array by one given column, eg

testArray = [[a, b], [b, a]];

How would you sort by the second column of the array?

I’m not sure if mine is the best solution, but here it is (it also works for an array of objects as well as an array of arrays):

/**
* sorts an array of arrays or objects using a specified column/property
*
* @param column (str/int) - the name/index of the column to use for sorting
* @param sortFunction (func) - the sort function to use for sorting (sort functions
*                             that can be used by array.sort() will also work here)
* @return array
*/
Array.prototype.sortByColumn = function(column, sortFunction) {
  return this.sort(function(a,b) {
    var testArray = [a[column], b[column]];
    testArray = (sortFunction) ? testArray.sort(sortFunction) : testArray.sort();
    return (testArray[0] == a[column]) ? -1 : 1;
  });
}

And to apply it to an array use it similarly to the array.sort() method, eg

myArray.sortByColumn(5);//sort alphabetically by column 5 of the array
myArray.sortByColumn('title', sortByLength); //sort by length of title attribute
function sortByLength(a,b) {
   return a.length - b.length;
}
myArray.sortByColumn('price',function(a,b){return a - b}); // sort by price

How it works

It runs the normal array.sort() method, but uses as its sort function a clever little function which picks out the values to be sorted by, creates a new test array out of these values and sorts it. Using the ternary operator, it checks if the test array is unchanged after this sort. If it is unchanged it means that the items in the original array are already in the right order so no change is made, otherwise they are swapped in the original array too.

One of the perks of working from home is that if for whatever reason (and, let’s face it, if you’re in a procrastinative mood, any reason is good enough) you feel like a break you can take one. I don’t mean playing facebook scrabble, or checking the definition of a drupe on wikipedia, all the while trying to look busy and keeping a watchful eye out for your manager; I mean a proper break, maybe away from your desk or doing something not usually allowed in an office.

I’ve recently turned to the latter. Long-term readers (all 8 of you) will know that I have been accompanying an Irish fiddler on the guitar for about a year. Just before Christmas I got the urge to have a go at an instrument more traditionally associated with carrying the melody, so I got a tin whistle.

I can’t stress enough how important it is for every parent to campaign for their schools to teach the tin whistle instead of the recorder.

1. It has a much nicer sound, particularly when placed in unskilled sounds
2. It’s got a much more fun, unstuffy repertoire
3. Last, but definitely not least, a tin whistle has no wrong notes on it! It has all the notes of the D or C scale on it (typically) and though you still have to hit the right ones to play a tune it’s much harder to sound as disastrously wrong as you can on a chromatic instrument.

But back to the point. My current preferred displacement activity from work is playing the tin whistle, and I reccommend any home-workers who read this to try it out. Just get yourself a whistle for a tenner or so, read brother steve’s website to understand tin whistle technique, listen to some tunes on youtube (Planxty are a good place to start as a lot of the pipe songs are in the same key as a standard whistle and not too fast to hear the notes), and try and copy them (or if you read music find the score on the session).

As a warning though, it does become addictive. For instance, during the writing of this post I’ve played two reels and a hornpipe.

And I’m about to have a crack at a jig.

A very short post to announce my third  jQuery plugin: listSplitter, which takes a long list of categorised items (where the categories can overlap) and creates a tabbed interface to show only one category at once. I haven’t done a demo yet (well, I have, buthaving teh same old problem transferring to the server as the server runs on UNIX while my laptop is Windows. I recently found out why this causes a problem, but no easy fix has presented itself) so you’ll just half to take my word for it, though before too many months have gone by I will use it as the basis for a new portfolio.

*edit: Here is a demo

And it can be used with jQuery themeroller, i.e. use the tool at jqueryui.com/themeroller, to design how it shoudl look, then after clicking “download theme” make sure you have ‘tabs’ ticked underneath widgets.

This blog is meant to do two things:

1. Let the world know that I’m a decent front-end web developer
2. Be the focus for a new doomsday cult

Number two is progressing nicely as no-one has gotten wise to my subliminal messages yet, but what of number one?

Let’s evaluate:

• Design – it’s not finished yet (and never will be as I will hopefully do a redesign next month when I have a bit more time), which doesn’t look so good
• Javascript, CSS, HTML – apart from mentioning the odd bug/annoyance there’s very little to show what I can do with these… aside from my jQuery plugins which hardly have pride of place either

Over the last few months I’ve come across a few blogs which, unlike mine, really cut the mustard when it comes to being an extended portfolio, putting mine to shame.

jasonsantamaria.com and dustincurtis.com are a little bit twitter generation for my liking, but one can’t deny that their blogs, where every article has a different design, are great examples of showing off on your blog.

But my favourite, which I came across today, has got to be www.romancortes.com. Most of his most recent posts feature him achieving visual effects which simply have to involve Flash… only they don’t, and in many cases achieve quite striking results without even using javascript; just pure CSS/HTML. As he himself admits, most of the demos aren’t much use in a practical website, but they’re still pretty impressive in showing what surprising visual effects can be achieved, and figuring out how he did them is quite a good test of your understanding of CSS. My favourites are the coke can and the old master.

Obviously, when you see that someone has managed to animate a rolling coke can using just one static image of a coke can label and some CSS, and after the initial wow has subsided, a Peep Show quote springs to mind:

Super Hans: I think this is probably the best example of the sort of stuff we’d do we’ve ever had.
Jez: Oh yeah. ’cause sometimes it’s really hard actually to do your own ideas

Do I have it in me to produce a more stunning showcase of what I can do? Who knows, but having just learned The Mason’s Apron on guitar I feel invincible!!!

I just solved  a bug which stemmed from the fact I forgot that javascript is a referential language, i.e. if you have a variable and you set another variable equal to it then it doesn’t in general clone the original variable, but merely just points both variables towards the same underlying object. This only applies to Arrays and Objects though, and to prove it here is a little demo (it turns out you can embed javascript straight into wordpress posts now!)

Irritatingly, if you have a bug which is caused by forgetting this principle then this will also make it hard to debug because it also affects how firebug reports information to you. When you console.log() an object or an array, firebug does the same as javascript – it creates a reference to an underlying object in the DOM. So, if you’ve been logging an object repeatedly in order to pinpoint when a rogue change takes place firebug will consistently provide you with references to the object as it is after your script’s finished running – not much use.

However, there is an easy way out*. console has methods other than .log(), and possibly the most useful is console.dir(). console.dir() takes a snapshot of any object or array, printing out each of its properties without maintaining a reference to the underlying object, and therefore giving a you a snapshot of an object as it is at the time.

*And a hard way (console.log() the properties of an object individually), which is how I resolved my bug, before  looked into what other methods console had

My attitude to Facebook has always been that it is a useful address book of sorts (with built in slideshows), and that all these scandals where people get fired from their jobs for posting on facebook pictures of themselves disfiguring a company business card with a nail file are their own fault for showing a lack of discretion.

That said, though, Facebook do have a reputation (fairly well-earned if you ask me) for not making it clear to people who they will share things with, but now they’re putting it right as when you login you are nagged to confirm you old privacy settings or change them to new ones, just so everybody’s clear what to expect.

Heres’ the form you fill in, which looks pretty simple – radio buttons to indicate yes or no… or so you would think. But regretably facebook have ballsed up their privacy issues again.

For each element of facebook you can set it’s visibility level to either what you’ve already got it set to, or one of Everyone, Friends of friends or Friends… but for each bit of Facebook you don’t get to choose from that list; you are presented with one of them as an alternative to your current settings (picture).  Now, that’s a pretty confusing start, because

1. It makes the layout of the form all weird: the radio box in the first column doesn’t always mean the same thing, which users come to expect from columns of radio buttons.
2. Some elements have “Old settings” checked, and others have the other radio button checked, which confuses the whole idea of you changing your own settings
3. When you arrive at the page there is nothing to tell you what your old settings are. I’m sure many users will go straight from here to check in their account what their settings are.

But on hovering over an old settings checkbox it displays a tooltip to tell you what those settings are, which si helpful , yes, but nowhere near as helpful as just including it in the original page’s text. Horrible overuse of technology.

So does the confusion end there?

Of course not.

Below are three examples where it doesn’t allow you to do what you want, or just gets more confusing

1. I can choose to allow everyone to read About me or just friends. It doesn’t allow me to let Friends of friends see this
2. At the moment ‘Only Friends; Except: Limited Profile” can see photos and videos of me, but it’s taken me a while to remember what “Limited Profile” means, and now that I do remember, why is this not an option for …
3. … sharing my email address, which I’m more likely to be cagey about. And it would also be nice to have radio buttons which allow me a wider choice than sharing my email address with “Friends” or “Only Friends”

It amazes me how sloppy supposed beacons of the internet can be sometimes.

As I think I may have mentioned, the latest project I worked on I’ve been using the Zend Framework for all the server-side development. Over the last few months I’ve developed a love hate relationship with it. On the plus side it does pretty much everything I need without needing too much customisation, a few of the negatives though are:

• The quickstart in the documentation assumes way too much background information about configuration of a php app and data sources etc. They don’t seem to have considered that a reason many programmers use zend is because they don’t know too much about back-end development and want something to take care of the tricky bits for them. It took ages to get past this stumbling block, with the help of this tutorial (WARNING: The bit on connecting to the database either uses quotes when it shouldn’t or vice versa) and this website with tutorials on various zend components.
• Having said it does everything, there are lots of gaps. I’m sure a lot of thought goes into deciding what gets included and they must get all sorts of requests, but some simple standard things are missing, eg a validator to check a confirm password field. Nevertheless it is fairly easy to write extensions, but the zend documentation site should have a lot more and clearer information on this. Linked to this, there seems to have been very little thought put into building some sort of community to share plugins, unlike jQuery, for example.
• You may have sensed that I don’t have a great deal of respect for the documentation. It’s very sloppy to be frank. There are so few cross-links to different sections, and a lot of the classes contain examples which I found fairly irrelevant, covering a way of doing things unlikely to be used in a real website (eg the examples for querying your database don’t really use the Model-View-Controller structure you’re supposed to use). And, in my view, it’s way too wordy, and much of the text is just waffley clutter; far more so than better examples of documentation, such as php and google maps. The website is also very difficult to navigate.

To fix the final gripe I’ve written a greasemonkey script (my first ever one) to replace the existing documentation layout with one a little easier to negotiate.

Before greasemonkey

After greasemonkey

Not a LOL cat

My laptop (now on its very last legs) has a fairly dinky screen. It’s wide enough to not be a problem, but the height is always a pain, especially that now (unlike when I bought the laptop all of 4 years ago) I am a web developer and routinely have firebug and the web developer toolbar open, which sucks up about two fifths of the height of my screen.

Enough is enough, and I’ve decided to get tough on undesirable widescreen, tough on the causes of undesirable widescreen.

First off, although I don’t like Google Chrome’s tabs at the top interface, I do like the fact that they’ve squeezed something useful onto the otherwise desolate windows title bar, i.e the bar at the top of the screen that tells you which program you’re using and, in firefox, the webpage’s title. As I have no need for firefox to tell me anywhere other than on the tab which web page I’m on, this bar is pretty much useless. And, luckily for me, there is a new firefox extension to get rid of it: Hide Caption. It shifts the close, maximise and minimise buttons down to near the search bar and gives me an extra cm of space. It warns that it may not be compatible with tab-mix plus, though I haven’t had any problems, and I use loads of other extensions too with no clash. Although I did uninstall another plug-in called Hide Navigation Bar as this didn’t work, but it may have been a clash.

A few of other things I’ve done to save space and decrease clutter is decrease the text size in firebug, change my windows taskbar to a single row rather than two, use the personal menu extension to hide the menu bar, and got rid of my bookmarks toolbar (although not sure how long that will last). It would be really handy if firebug could have an option to place it to the side of the screen rather than the bottom. Most of the time the lines don’t span the width of the console, so it’d be a great space saver to stack them vertically down a narrow strip at the side of the page.

Incidentally, one of the few add-ons that has remained a constant for me over the years is the qute theme. It’s really nicely designed with light colours and small icons and makes the screen seem a lot less cluttered. There’s two versions available at the moment; the authentic new version for firefox 3.5, and the retro version based on the original icon designs from years ago, which is the one I plump for. Aside from being aesthetically more pleasing it also has the advantage of not having a heart as the icon for bookmarks, which always took me a second to work out what it meant.

Anyway, here is my current, much cleaner looking, firefox appearance now (I would do a before and after, but it’s way too much hassle to go back and disable all the things I’ve changed):

Colouring in

If there’s one thing I know when it comes to web development, it’s CSS. I don’t always write it in the most organised fashion (though I like to think I do when I’m given a finished design to work from), but for over a year now I’ve felt that my knowledge about the bits of CSS that I use daily is pretty complete*. And for the bits I don’t have to use very often I an always find what I need on the internet.

So imagine my surprise today when I realised that there’s one area of CSS that I use everyday with a fetaure I was completely unaware of. I’d always thought that

p{color:red}

meant “Make the text in the paragraph red”, but it turns out that that’s not the full story.

In all browsers, it seems, if border-width and border-style are defined for an element, but no border-color, then color also defines the border colour. But then if you define a value for border-color then color gets ignored when calculating the border colour. Even if you use another selector of higher specicifity to set a new value for color this still has no effect on the border colour. Here is a demo page.

But is it of any use?

Well, yes – it turns out it is.

Let’s say you want to define a generic button item as follows

.button {display:inline-block;border-width:2px;border-style:solid}

Then you can coordinate the text and border colour of the buttons by just using, eg

.cancel {color:red}

And this technique could be used for all sorts of generic elements where text colour and border colour are normally same. To use a different colour for the border it’s an easy thing to over-ride too.

Has anyone ever included both the British an d American spellings of colour this much in one article before?

* excluding newly emerging vendor-specific styles, eg -webkit-make-it-look-cool {}