Matt Pass

So, I’m at the airport checking in and my phone starts ringing, but I don’t answer it as we’re right in the middle of getting our tickets. With that done, we head to the bar, order food & drink and I check my phone. It’s my mum, so I call back. After a very brief chat she asks if I forgotten it’s my dads birthday on Monday. Time stops and my heart sinks as I realise I’ve been too busy recently to remember. Dammit! Then she puts him on the phone and I just feel awful as I apologise. I’ve never forgotten his birthday before and while he says it’s fine and makes a joke of it, to me it’s not fine. But, what can I do, I’m miles away from home and about to catch a plane?

Then it strikes me – I can get him things online, maybe an event and a couple of nice gifts too. But, how can I get that over to him by tomorrow? Mmmm. Then, I hit the jackpot idea – use ICEcoder!! I’ve spent around 7 months building this web IDE and while it’s only 70% done, it’s perfectly usable and I can certainly put together a simple webpage to show the presents to him under a URL!

So we head back to the hotel, just 5 mins walk from the airport and I boot up ICEcoder on one of the free web access computers. I create a new folder and then HTML file and for the next couple of hours manically set about researching presents and putting together a page detailing my purchases. After buying tickets for the Eden project I start dropping info and images into the page. Next, I put the Invitation Book in as a present and the page starts filling out.

Next up I use Google images to get an image of a steak dinner and that’s present no 3, an evening at a steakhouse. Finally I use Google shopping to find the best price on a fishing DVD, my selection of presents is complete and I begin finishing the page.

Because ICEcoder is so efficient in how it works I’m putting together the page at furious speed and with no hassles. Even my wife is impressed and for the first time fully understands how to put together a webpage as she watches me work. All of a sudden I realise not only is ICEcoder working well, but this thing I’ve been building since last summer is actually going to save my bacon.

So, the page gets finished, I get the link across to my dad by email and it’s job done. Disaster averted.

Today spoke to him and he was really pleased with his presents and I think pleased that I actually took the time to put together a webpage for him.

I was able to get on my flight knowing the net, and especially ICEcoder, had my back. As of now they weren’t just something I used for building client websites and apps, they were tools I could use to my advantage that average Joe didn’t have. As a geek, I had the skills to get myself out of this mess.

Nerd done well.

You can see the page I made here:

http://mattpass.com/happy-birthday-dad/

Github repo here:

http://github.com/mattpass/ICEcoder

I read this in a Robert Rankin book a while back and can’t stop thinking about it. Basically it’s how abolishing income tax would solve todays economic problems:

***

‘And so,’ continued the Doveston, ‘I have drawn up a couple of radical proposals which I feel will sort everything out. Firstly I propose that income tax be abolished.’
    A gasp went up around the table.
    ‘I’ll give that the thumbs up,’ said Norman.
    ‘Please calm down,’ said the Doveston, ‘and allow me to explain.’
    ‘I am calm,’ said Norman.
    ‘He wasn’t talking to you.’
    ‘As we all know,’ the Doveston said, ‘no matter how much money you earn, the inland revenue will eventually get all of it. It is damn near impossible to buy anything that does not have a tax on it somewhere. Allow me to advance this argument. Say I have one hundred pounds. I go into an off-licence and buy ten bottles of whisky at ten pounds a bottle. The actual whisky only costs two pounds a bottle, all the rest is tax. So the man in the off-licence now has the difference, twenty pounds. He uses that to fill his car up with petrol. Tax on petrol represents seventy-five per cent of its market price. So now there’s only five pounds left out of my one hundred pounds. The chap at the petrol station spends this on five packets of cigarettes. And we all know how much tax there is on fags. Out of my original one hundred pounds, the government now have all but one. And whatever the man in the fag shop spends that one pound on will have a tax on it somewhere.’

‘Yes yes yes,; said old silly-bollocks. ‘We all know this, although we wouldn’t want the man in the street to know it.’
    ‘Precisely,’ said the Doveston. ‘And we’re not going to tell him. Now this same man in the street is taxed roughly one-third of his weekly earnings in direct taxation. What would happen if he wasn’t?’
    ‘He’d have a third more of his money to spend every week,’ said old silly-bollocks.
    ‘And what would he spend it on?’
    ‘Things, I suppose.’
    ‘Precisely. Things with tax on.’
    ‘Er, excuse me,’ said what’s-his-face, the Foreign Secretary. ‘But if everybody in the country has a third of their money in their pockets to spend and they did spend it, surely the shops would run out of things to sell?’
    ‘Precisely. And so factories would have to manufacture more things and to do so they would have to take on more staff and so you would cut unemplyment at a stroke. And you wouldn’t have to increase anybody’s wages, because they’s all be getting a third more in their pay packets anyway. You’d have full employment and a happy workforce. Hardly the recipe for revolution, is it?’
    ‘There has to be a flaw in this logic,’ I said to Norman.
    ‘There has to be a flaw in this logic,’ said old silly-bollocks. ‘But for the life of me, I can’t see what it is.’
    ‘There is no flaw,’ said the Doveston. ‘And if you increase the purchase tax on all goods by a penny in the pound – which no one will complain about, because they’ll have so much more money to spend – you’ll be able to grab that final pound out of my original one hundred. You”l get the lot.’

***

Try as I might, I can’t find a flaw in this logic either, can you?

Yesterday I uploaded ImageGuard, a component that I wrote for a freelance photographer friend of mine, onto Github as an open source project. The component essentially helps protect images from being taken from the website by the average user. It’s not a bulletproof solution by any means and certainly won’t fool the more technically minded, but the vast majority will have a ‘look but can’t take’ experience, helping retain ownership by the creator.

Why did I write this? Do I hate freedom and the open internet or something? No, not at all! I’m all for it and think if you put something out in the public domain, it’s there to be viewed and used by anyone. If you don’t want people to have it, don’t make it available. Simple. That said, I do believe there may be odd cases where owners of images, media, or data in general may need to make them available to view, but not take – yet the web, as far as it’s evolved, still doesn’t allow for this. But that’s a good thing, right?

It seems to be an all or nothing scenario that hasn’t changed since the humble beginnings of the web. The only middleground option you ever seem to have with images is to spoil them in some way. You’ve seen these spoilt images before – the low quality, watermarked or tiny offerings that impede your viewing of the real thing. These solutions were really no good for my friend, who wanted to show the high quality of his photography in an unspoilt way and so he asked me if a solution was at all feasible.

Curious, I decided to look into possibilities. Guessing that not every method could be covered, I started with the basics and quickly disabled right clicking by setting returning false on content menus. In case you wanted to keep the contect menu I also overlaid a transparent GIF ontop with the original filename. Next, I considered the source code and decided files could be  loaded in an obscure way using JavaScript and Flash as a container to not reveal filenames. That done I wrote some CSS to stop you printing them. Finally, and as a last resort, I shredded the image into slices with random filenames in case you want to root through temporary browser files, which are stitched back together by Flash. At least if the user was smart enough, it would be very time consuming to put the pieces back together and probably make them give up.

The only thing I couldn’t cover was the Print Screen button. It seemed that because this is a BIOS level system opeartion that cannot be intercepted or disabled, you cannot stop a screenshot from happening. I spent quite some time coming up with all sorts of ingenious methods to detect if it was pressed and blank the image out, or similar, as a next best option. No luck, it will take a screenshot and nothing is going to change that. Conceding defeat here, I realised this solution would end up more of a deterrant than a bulletproof solution and considered it finished.

You can see the results and a full visual explanation here – ImageGuard

So as I said, I decided to put it onto Github as an open source project and let people know about it on Twitter. What a mixed reaction I got! Some people were really quite against it, saying I shouldn’t have produced something like this, such solutions harm the web more than watermarks do and really the problem lies with the 1% who want to protect their property, not the 99% that want to have the freedom to use as they wish. Some people really backed the solution however, saying having images stolen is killer for some websites and very common, really losing them money and stopping them offering services too. Personally I can see both sides of the argument and the pros and cons of each.

Where do I sit with this? Well, I’ve had my work stolen many times, sometimes pleased that someone liked it enough to take it and other times I was angry that I spent so much time and effort, for someone to just take it without asking. I’ve taken my fair share of images from websites and used for my own purposes too, so I’m no saint. For me, having things taken is a part of owning a website – if I really didn’t want it taken, I shouldn’t leave it in public and any kind of technology or law blocking this is harming the web. What about the odd cases where you feel you can’t showcase your work in it’s ideal form or deciding not to make it available at all because it will just be stolen? Isn’t that harming the web too?

I don’t think I have an answer on what’s right or wrong here. For me, the bigger issue is that we’re still stuck in the past by displaying low quality or watermark spoilt images just to retain ownership. Many images are ruined in a case of putting the owner before the user. Then again, I appreciate that it’s not just large corporations who are losing out, but plenty of SMEs and freelancers too, who feel this is necessary. Perhaps a solution such as mine actually gives both the user and the owner a positive step forward, as users can view the image in high quality without being spoilt and also offers more protection than none for the owner too. Or is a look but don’t touch scenario a step too far? Agggghh, I’m just going round in circles here!!

What do you think? Should publically available content in webpages ever be view only, or is the web truly everyones property and there for the taking?

It’s been quite a crazy week, with setting up a new dedicated server, transferring domains, websites & web apps – plus we took on a new junior too, due to the sheer amount of work that’s going through the studio. While its fantastic he’s here and helping me plough through the projects, obviously there has been a little time involved in getting him set up and part of that has been his computer, which got me to thinking – ‘just what does a web dev need on a new computer?’

I scratched my head & decided the best place to start was looking at my own computer, writing a list as I went, plus deciding to make a couple of improvements here and there for a up to date setup, I finally came up a list of things I’d consider any decent web dev would need. I’m not talking about fads or used once ages ago, but core things which are crucial to most project builds. Of course, while each web dev has a different setup to the next and there is no one size fits all list, I thought I’d make a blog post on the list I drew up and maybe hear about different dev’s setups and discover a new piece of code, software, hardware or working practise to improve working setups.

So, here we go – here’s my setup…

Hardware

Intel i5 Quad Core 3.3Ghz, 4GB RAM with dual 22″ widescreen monitors.

Software & coding

Windows 7 Pro 64Bit is my OS, sorry Mac (or other OS) people, I do think it’s best for tech stuff. I regularly use a great deal of things provided by Windows, but web dev related programs I’ve installed ontop are mostly only those I consider crucial, in order to avoid bloating & bogging down my system, so it’s actually super-lite and runs really well. So what are those extras?

Well, I use Photoshop for everything to do with image and graphics editing. Sublime is my local code editor of choice, but online I use ICE Coder (my own web based IDE) for site builds directly in the browser. WinMerge is used to view quick differences in code, but I mostly use Github for my code repos & version control. Dropbox for cloud based storage of my whole projects directory, so I can work from anywhere. Cute FTP for website file transfers.

Netsparker Community Edition is a great tool to cover the most comon web security vulnerabilities. On PC security is McAfee Internet Security Suite to handle anti-virus & firewall bits. Now, browsers – my main browser for producing work is Internet Explorer because it’s still just about the most commonly used browser. Yeah, I know, that sucks. At various stages of the build I will x-browser check under Chrome & Firefox, though personally my browser of choice is Chrome, by a long way. I have VM images for IE8, IE7 and IE6 for legacy testing of IE.

Thunderbird is my mail handling program of choice. Simple.

Just about everything I create is using HTML, CSS, JavaScript, PHP with MySQL databases and I rarely stray from this. Adminer is my preferred method of managing DB’s due to it’s briliantly slick & speedy UX. Modernizr and various polyfills such as CSS3PIE are great for feature detection and covering border-radius & drop shadows which I use often. I don’t use an off the shelf boilerplate such as HTML5BP and have my own built up from things I like as a starting point. Part of this is Eric Meyers CSS Reset, which still works a treat and for me, because it’s super-lite is preffered to the more modern efforts. Money.js is great for currency conversi0n and I use the brilliant HighCharts for generating JavaScript based charts & reports.

…I think thats just about it.

What about you, what do you have in your core setup thats different to the above and want to share with people?

Whats the point? Get it? There’s a point in ver…, oh, never mind.

It struck me recently that version numbers have become pretty meaningless. OK, they’re not completely meaningless – what I mean is that it’s now become quite common for released scripts to ignore releasing conventions, instead just ‘putting it out there’ half baked.

Thats not to say that’s a bad thing, in fact, it’s a great thing. It allows you to gauge public interest in your script, plus get feedback on issues, bugs and improvements which help you work towards a more stable v1. I’ve done it myself, ICE coders first public release was at v0.4.7. It was buggy and a much simpler version of what it is now (v0.5.2), which again, be a more buggy version of future releases, because they’re all publically available for the world to pick at. Node.js, is another example, currently at v0.6.1 and yet has a huge dev following, yet has been available for years and is accoring to the version number is only around half finished. It’s it’s been in the wild for a long time, has gained a lot of feedback and as a result come a long way because it released prior to a first official version.

So, what ever happened to the first public release being v1.0.0? I think the days of that are well behind us, as open source coders more and more want to gauge public intetest and figure out improvements and bug fixes before the first official release. Web apps and scripts in particular, seem to only need enough to get the rough idea across and the rest is figured out later. This may isn’t true for everyone of course. Large corporations, for example, who want to uphold a public image, tend to stick to the conventions and rightly so. Those however, like myself, who write open source scripts, tend to ignore the rulebook, release early, release fast, then patch & improve later. I believe this also leads to greater stability, innovation and experimentation, which the author may not have had otherwise.

On the other end of the scale to never seeming to release a v1, some version numbers are simply running away for no good reason. Google Chrome is a great example, what are we on now – version 10, 11, 12? Do you even care? Each version is certainly better than the last, but I’d hardly say they’re major rewrites deserving of such high numbers. It seems no one can agree on what to do with version numbers.

So, whats the solution? I don’t think there ever will be a one that everyone agrees upon, simply because every project, and author, is different. I think it could be time for a more informative type of version number though and such a solution could include a date, to let you know when it was last updated, perhaps even followed by the number of minor revisions it’s been through. In the case of ICE coder, it would be 04.02.2012:52 to indicate how many point releases there were and the date it was released. Not so pretty, but informative! (Of course, I could choose a catchy version name such as ICE coder Extreme, ICE coder Ultimate etc for each release if I so choose as tack the version number somewhere small but accessable). This tells me so much more than just v0.5.2 – as you’ve no idea how long ago that was released. ie, is this this new software or old? Something that matters a lot with the fast changing pace of the web.

But I doubt that will take off and people will just keep making up their own rules about version numbers, when they release and when the first official release happens. Besides, with so much standardisation and logic in what we do, we have to have something which makes little sense, right?

I say – long live half finished projects, rolling releases and public testing, whatever your version number – as no one cares!

What do you think? Do version numbers matter anymore?

I seem to be creating mostly database driven websites these days. Even the small, simple websites I now create have CMS as a basic requirement, so as you can imagine I spend some time working on the database setup. Traditionally I’ve done this through phpMyAdmin and while it has always does the job, there has been a fair bit of frustration too, that has very occassionally ended up in a little swearing. OK, there has been a fair bit of swearing too.

So when I came across Adminer http://www.adminer.org and its bold claims of being a way better, PHP driven method for working with databases, I smiled a little, hoping it was the better solution it claimed. After downloading a PHP file a little over 150k (MySQL, English only version), I uploaded to a website, plugged in database access credentials and it worked immediately. I smiled again, bigger this time as this meant I no longer had to go through webhost control panels. Awesome!

After a couple of quick tests with security, I realised it would keep you permnantly logged in via a cookie, oh well, not perfect, but not bad. Now, it meant by visiting a URL I alone could get instant access to carry out my DB management work. This was a big plus for me as speed is crucial.

Being impressed and wanting to know what it did better than the standard issue phpMyAdmin, I checked over its UI and functions. First thing I picked up was its simplicity, it didn’t seem to always have options you wanted a screen or two away, it was all right there where it was needed. It also didn’t seem to have many of the frustrating issues phpMyAdmin had, particularly with magically wiping SQL commands you spent ages writing. Looking good I decided to begin some project work and took to its usefulness and speed like a duck to water.

Working with it problem free for over an hour, I then decided to check out it’s advantages over phpMyAdmin and came across an impressive comparison list at http://www.adminer.org/en/phpmyadmin/ with not much at all going in favour of the standard. After then checking out the feature list, trying CSS styles and then plugins on the site I was sold. They claim their main focuses are security, user experience, performance, feature set & size and really, I can’t argue against it doing all those things superbly.

Well, maybe the sparkle will dull in time I thought. I’ve been using it for a month now and my impressions are still very high, without next to nothing to complain about really. I also now find myself dreading having to go the control control panel route to get to use the cumbersome & awkward phpMyAdmin now, usually doing so with a frustrated sigh.

The only thing it doesn’t do is write my SQL commands for me. But then, you can’t have everything, right?

If you haven’t tried it yet, I’d definetely recommend giving it a go! Totally free for any use under Apache or GPL2 licenses and works with MySQL, PostgreSQL, SQLite, MS SQL, Oracle and PHP 4.3 upwards.

Wow. What a year! So much has happened on the net during 2011, from HTML5 really taking off, CSS3 gaining more traction with browsers, Steve Jobs passing away, rapid releases from browser vendors, SOPA legislation, patent wars, mobile fast heading to overtake desktop, Flash dying out, Silverlight looking to be on shaky ground plus just so many other things, good, bad and surprising it’s again been tough keeping up.

If I had to sum it up in a word I’d say it’s been a ‘successful’ year for the internet as a whole and as things feel to be heading increasingly in the right direction, I’m looking forward to the future more than ever. It’s certainly a good time to build cool things for the web.

So what do I expect 2012 to bring for the web? I believe Flash will drop off quite drastically and HTML5, CSS3 and JavaScript to be pushed into the forefront and some really cool things springing up. JavaScript in particular will become more and more important to businesses & web devs to cover for Flash.

Mobile will really begin to be recognised as a crucial medium and more businesses will begin to realise they need a mobile presence as well as desktop solution. This I think will push NFC and some innovative things beyond making payments (which will be great when it really takes off anyway!). UX will take centre stage as web devs & designers aim to make the mobile experience as slick, stylish, useful & pleasing as possible. The need for a great UX and availability of NFC I believe will kickstart a mini revolution to rethink & overhaul the painfully cumbersome login scenario, making way for something way better.

The last year has brought many changes for myself. I’ve pretty much evolved from a web designer into a web developer with my new role as Digital Director. It’s presented me with many new opportunities for learning something new and improving some skillsets. Personally I want to pick up some more advanced SQL, PHP and JavaScript skills and really take these things more seriously, boosting what I create, to a new, highly professional level.

On the security & OS/platform level, I want to know more about preventing against XSS, hardening systems, code fuzzing and penetration testing. I want to also gain an excellent understanding of what’s happening at CPU, GPU and RAM level in order to bug fix issues and tweak processes to an optimum level for the masses.

New territory I want to cover includes Ruby on Rails, CoffeeScript, Android dev (just for fun) and JSON (something I’m still ashamed to have as a blank in my skillset). I’m also aiming to contribute more to the web to pay back in some way for all the amazing things I’ve picked up from people. On this note, I’m also half tempted to write a couple of free mini ebooks to cover a couple of subjects that I would have liked to have read to save me going down the wrong path occassionally over the years.

Overall I’m feeling very excited and positive about this year on the web and my own goals. If I achieve only half of this I’ll be chuffed.

What about you, do you agree with my thinking and what are your predictions & goals for the year?

I recently came across a JavaScript function to shuffle an array and tweeted as I was reasonably impressed:

function(o) {for(var j,x,i=o.length; i; j=parseInt(Math.random()*i), x=o[--i], o[i]=o[j], o[j]=x);return o;};

I quickyl got a tweet back from @maettig, with a shorter version, followed by another which shortened it even further…

function(a,b,c){for(b=a.length;b;c=0|b*Math.random(),a[c]=[a[--b],a[b]=a[c]][0]);}

…along with his thoughts that you can ‘always’ make it shorter. That got me thinking, how short can we make this? So, as it is nearing Christmas I decided to put forward a challenge, whoever can golf this the most by Christmas will be declared the winner and I’ll donate to a charity of their choice at €3/char lost. (It was actually €1/char to start with, but@maettig drives a hard bargain).

This seemed to draw attention and a few people had a bash, some working fine, some not as seen on this Gist:
https://gist.github.com/985755.

Soooo, who has the shortest code so far?

Current shortest: by @p01

function(a){a.sort(function(){return.5-Math.random()})}

Thats just 55 characters! (27 chars less x €3 = €81 I’d donate). Amazing effort!

Question is, can you make it any shorter? If you can, post your effort at https://gist.github.com/985755 or @mattpass

Winner announced Christmas Eve.

Rules:

1. Must be self contained
2. Must shuffle any given array (ie, alphanum arrays, arrays of arrays, binary arrays etc)
3. Should work with an array of any length
4. Winner will be the one with shortest code by 12 midday GMT Christmas Eve
5. I’ll donate to the winners choice online that day and provide proof of donation
6. Should 2 or more people have the same code length, I’ll split the donation amount
7. Try to avoid hijacking someone elses code! Be original!
8. In the spirit of Christmas be – cool, not nasty …remember, this is fun and for charity
9. I reserve the right to change these rules & decide on winner(s)

GOOD LUCK!

Something I use everyday, yet always take for granted, is the brilliantly useful ‘Find & Replace’ function. This little gem appears just about everywhere text editing is present and its simple interface, ease of use and reliably are key factors on why it hasn’t changed much over the years. So, whats the problem and why would I even consider reinventing it?

Well, for all it’s usefulness in a code writing context, I feel it could it be improved as it simply doesn’t solve all of my finding & replacing needs, only a fraction of them. For instance, it won’t cover files in my project unless I’ve opened them first. It doesn’t cover folder or filenames. What about regular expressions or dynamic queries? Nope, they’re not covered either. Come to think of it, it doesn’t do much more than highlighting the next instance and simple string replacement!

Plus, even though I feel the UI is generally just fine, it often displays in a fiddly little window which obscures your document, so you need to moving it about to see what it’ll find/replace next. Yet we put up with all of this because that’s ‘just the way it works’. Well, time for a change!

Those that keep up with what I’m developing know I’m currently building a web based IDE called ICE coder and next week I’m going to integrate a find & replace function. So, why should I just go with the usual conventional find & replace when it clearly doesn’t cut the mustard? As I’m coding one from scratch, why not take the opportunity to expand it to cover the other finding & replacing tasks I regularly need and feel are missing?

So, with all this in mind, he’s my reinvented find & replace function:

Find [      ]'s (in)  {Replace with [      ] in} (This Document)              >> GO
		(and)                            (Open Documents)
                                                 ({Selected}{All} Filenames)
                                                 ({Selected}{All} Files)

Key: [ ] are text inputs, ( ) are drop down options and { } are dynamic elements.

The dynamic nature here means that you can create actionable sentences, such as Find [xyz] (in) (This Document)…or perhaps Find [xyz] (and) {Replace with [abc] in} ({All} Filenames). It’s a little like SQL in some ways I guess, where there is a structure to the sentence and it reads as per the action you want to take. This would cover all my needs and take the ever popular find & replace function to a new level, making it powerful & dynamic – perfect for my dev needs.

To further improve things, if you find/find & replace in the current document, it simply performs the action as you’d expect. However, because I’ve expanded the use of it, dealing with anything other than a current document scenario means multiple results are created, so a results screen is quite crucial. This however allows for further improvements – as it’d show all the instances it has found and so allows you to visually scan over & individually choose the ones you want to replace.

And as for the fiddly window? I’m not doing that, it’s in a strip above the document.

What do you think? Good improvements or overcooked nonsense?

UPDATE: You can see a working version of this now at: http://www.mattpass.com/lab/_coder/

Wow, been a few weeks since I wrote anything, just soooo busy right now. Anyway, today I saw a blog from Chris Coyierabout trying to center an element both horizontally & vertically when no width or height is known. This has always been a pain to achieve and doing it the right thing by not using tables (which would be easy, but not semantic – as tables are for data really, not structure!) makes this task seem frustratingly impossible.

…Or is it?

I found a solution about 4/5 months ago, which I can’t claim to be my own – but as I don’t know it’s source I can’t credit the author either. Of course there are other crazy hacks out there involving JavaScript, pseudos or future techniques such as CSS3 flexboxes, most of these are complex or simply not x-browser or version compatible, so a bit uselss really. For those still stuck, here’s the solution I use regularly;

Demo:
http://www.mattpass.com/lab/hCenterVCenter/

This solution works on all major browsers and versions in the last 10 years (so, Chrome, Firefox, Opera & IE (6 through 9, and I assume 10).

Here’s the CSS:

.mainContainer {
	position: absolute;
	display: table;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-align: center;
}
.mainContainer .vCenter {
	#position: absolute;
	display: table-cell;
	#top: 50%;
	vertical-align: middle;
	text-align: center;
}
.vCenter .heyImCentered {
	#position: relative;
	#top: -50%;
	text-align: center;
	display: inline;
	background-color: red;
	color: white;
}

So how & why does this work?
The ‘mainContainer’ class is just a box that will take up 100% of the width & height available. We’re setting it to display like a table and any content inside is set to align centrally (on the horizontal axis). ‘vCenter’ is a child of this container and will display like it’s a table-cell, again aligning text centrally and also vertcially. However, IE historically isn’t great with its CSS handling and so we set #position and #top properties (note the # at the beginning to target IE only). This will set this child to be 50% down on the vertical axis, according to the absolute position, for IE only. The 2nd child – the ‘heyImCentered’ class, will also have the same CSS hacks to cover IE, though this time though we’re setting top to be -50% of the childs height, adjusting it so the element is perfectly centered.

(This means if your browser area is 800px high, the 1st child will be 400px down from the top and if the 2nd child is say 32px high, it will shift back up by 16px, meaning the top of the 2nd child compensates for it’s own height and display it bang in the center).

Soooo, all modern browsers covered, no horrible solutions used and it even displays in IE6 just fine.

Good stuff huh?