Never heard of The Rubberbandits before, but their video, Horse Outside, is an absolute classic! Want to get a better idea of these guys then you need to see them on The Late Late Show.

It’s a little slow to start with but once it’s going you’ll be impressed. BTW, the guy on the far right… epic!

2011

This is was a pretty big year in regards to my life in general in a positive way; the first and formost was I got married to The Girlie on the 2^nd of September, which was nice and pleasant. Thanks to that I spent my first holiday in a different country not leaving the hotel; typically that would que some joke with suggestive innuendo but alas it was more the whole planning of a wedding takes it out of you! If you’ve not planned a wedding you have no idea what it’s like, and if you are about to then I suggest you watch this video to better explain it all.

The next big thing was leaving my previous company of 4 years, Infoactive Media, to pursue my carrer further with Fubra. I’ve mentioned previously that it was sad to leave the old company, but it was a move I needed to take and thus has done me wonders, but I do keep in contact with them, which is pretty awesome.

I’ve taken a step back from photography a bit while other parts of the year take president, but that’s not to say I’ve given up with it, just on hiatus. I was also planning on getting fitter this year; that didn’t happen!

On the gaming front, I’ve gain more games that I’ve played but this has causes me to change my look on things that I’ll explain in a moment.

2012

So with the massive distraction of a wedding out of the way, The Girlie and I can focus on our next goal; moving to Bennie Hill’s home town, Eastleigh. Well, it’s in fact my hometown, but I moved away to live with The Girlie, but we made the choice that thanks to Eastleigh having something that sucks you in (akin to that feeling those people keep going to Silent Hill or the creepy cabin all those cheerleaders where murdered). I think people don’t realise what Eastleigh is like until they move away, then they miss it; I say that as some people might read this going “Why do you want to move back” but those who have moved away will understand what I mean.

Work-wise I’m going to be focusing now on developing my user experience knowledge, understanding the human-psyche when it comes to viewing a web page. It’s something that has always interest me and now I’m able to start doing research on it and focus more on it for work. I’ll also be developing more plugins this year for WordPress and hopefully attending a few more conferences on web development.

I’m planning on taking a photography course this year that will hopefully help with learning more on photography and developing skills. I did seriously forgot about my camera last year, but that’s going to change now!

Fitness might not be such an issue this year and I do plan on making use of the gym at my work, I normally got some free time once I’ve finished work so I haven’t got an excuse not to go other than “I just need to get this form perfectly lined up to this circular image”.

So with games I’ve decided to take a step back and somewhat ignore the AAA titles and focus more on the lesser ones and also spend less time on multiplayer stuff, which is why I haven’t got Modern Warfare 3 yet. I’ve already lined myself some JRPGs to play such as Xenoblade Chronicles, Star Ocean games, Final Fantasy’s I’ve not yet completed and also The Last Story when it comes out later this year. I’m also going to take a lot more notice of the Wii as a console due to the number of pretty cool games that get lost in the hype of the more powerful consoles; I still got No More Heroes 2 to play that I got in 2010.

I think that pretty much sums it all up!

This video is really impressive, I must say! These guys have seriously worked hard on making some that could be a viable full blow project. I’ve not read anything into it, but it looks like it’s just a mod project rather than something built ground up using the Unreal Engine (say games like Gears of War and the Batman Arkham games), which makes it something even more special that they pulled this one out of the hat.

Unfortunately, I doubt it could ever be released due to that thing called copyright. But it’s amazing that a little fan perseverance that they have gone and done this. Would love to see them make it into a working title.

That line “this is how I want this styled” alarmed me somewhat, which followed my response of:

I stand by that but feel it needs to be elaborated a bit more and especially explain the “in a perfect world” comment.

“I want this element to”

The way I see things like .clearfix in the same way that people used <font> in the old days. It’s telling the element what it is and how to act. Granted that with CSS you don’t have to add such inline-styles to that element, but you are adding something that’s not semantic to the markup and thus bloating your code but also restricting the markup to a particular style somewhat. It doesn’t tell a human anything useful nor does it tell a machine reader anything useful, it’s only good for the specific CSS that uses .clearfix. It’s the same as <font> in some respect in that you are defining what something is doing without any real context; <font> tells the text to look a particular way and .clearfix tells it to look a particular way. I see very little differences in these two naming conventions except that at least .clearfix doesn’t force the content to do something unless defined in the CSS where <font> clearly does; but it’s still treating them the same.

The way to see CSS and HTML is simple; CSS is your style and design, HTML is your content and document. We want to separate that style as much as possible from our document hence why <b> and <i> tags became redundant; as much as they where apart from the documents formatting like <p>, they had very little meaning where <strong> and <em> had that meaning that we could also add a separate style too (though the HTML5 spec does try to bring a some semantics to them).

What About HTML Frameworks?

You may ask what I think about frameworks that use less semantic element for more design-based names such as the excellent 960.gs?

It does in fact break that rule of separating content and style by adding classes such as .grid_4 to define the how the document should look. I cannot see any semantic value in giving a <div> such a class so it’s broken for me.

Though I should say that it should stray people away from using such frameworks as if you aren’t worried about semantics then they are perfect and do the job really well; just that I feel they are semantically broken.

“this element is a”

Keeping in with my belief of content and style separation I believe that markup shouldn’t have unnecessary classes or IDs; they should have purpose and meaning so that a user can understand what it is, and that’s the key term here. When I write markup I want to say what items are if I need to such as <div id="main">, straight away somebody can look at that and say “Ah that’s the main part of the site”. There’s a number of these that often have to be commonly used such as;

• comment(s)
• post(s)
• gallery
• email

Just a few possible examples but all these are explaining what an element is. I can refer to these easily in the CSS to add a style suited to their needs. It’s a general name to a specific element; I’m telling the CSS what an element is and not telling the element what to do. As with any good markup, it should allow the person to write a new CSS file that will work with the markup without any changes to that markup (in a perfect world).

It Has a Flow

There’s an idea on a work flow appearing here that I know many front-end developers (who are all about the semantics at least) follow; content first, style later.

So what we will do here is develop our HTML first and put in all the content we want and then assign that content a value of what it is (if you’ve ever worked with XML, JSON or arrays and objects then you’ll understand what we are achieving here). So once you made your HTML doc with all the classes and/or IDs that define what certain tags are containing, you’ll then freeze that file and start working purely on the CSS; no changes to the HTML should be made once CSS work has started. I believe there are some companies that have people who are only allowed to work on CSS and not the HTML thus making a strong need of semantics in a doc.

Is it a Perfect World Though?

Unfortunately not; there are times when we need to add those none-semantic classes to make certain markup usable. The most popular culprits are .pad and/or .wrapper.

These little classes are typically used add a respective padding or a wrapper to get elements to act so. They do have a certain amount of semantics in that there name doesn’t suggest any strict styling elements, but at the end of the day they are used purely for style reasons (I wouldn’t have it if I could). It’s a nessary evil at times that I’ve not seen any push for a fix within CSS, but would be nice if there was one that didn’t involve some horrible workarounds; I’ve tried developing some and I still rather have none-semantic markup as they are messy and aren’t really bullet-proof.

Basically, it can all be summed up like so: tell your CSS what something is and not what you want something todo.

Update – 14/11/11 @ 1730
It appears that shortly after writing this blog post an opinion article was written on Smashing Magazine about the pointless pursuit of semantics. Now while I do talk more about the use of classes and IDs in this post rather than the document as a whole, I stand by the point that any semantics isn’t a pointless pursuit and thus wrote a comment in response to the Smashing Magazine article that can be found here.

Need more ads like this… and Kevin Butler.

After much thought I went through all the Apple range of machines before I decided finally. First it was the MacBook Pro, but I was getting annoyed having not “fixed” machine at the moment and also the whole thing about plugging in and out a machine all the time didn’t appeal; plus the MacBook isn’t dead yet. So what about an iMac? I stuck with this idea for a long time, but it was a case of having to get the money together (had to get a decent 27” after all) and then I got thinking about the cost-benefit of it all.

My preference working is across two screens, but after working in a job on a Windows terminal I gotten very used to the idea of having two the exact same; just feels right. So now when working on an iMac with a completely different screen it’s somewhat disjointed experience for me.

Last week I then made a stark change of plan that suited me all round; get a Mac mini! It’s perfect; more power for my buck, easy to update the RAM and the HDD is easier to replace than it is on an iMac (I refuse to pay the prices Apple charges for support) and it allows me to run two screen of my choice! I had all the stuff to get a headless box – the monitor, keyboard and mouse – so it seemed silly not to, but the price point meant that I could get it now!

So here I am on my new Mac mini that is super quiet and doesn’t output much heat at all (good with a Chinchilla in the office).

But why am I dedicating a whole blog post to the Mac mini? Mainly because I think it’s a highly underrated machine that is often passed by in favor for the MacBook Pros or iMacs. I’m pretty chuffed with mine, the only downside to it all are the built in speaker are a bit cack, but they aren’t meant to be much any way. I say, if you got all the kit already, just need a new machine, then take a serious look at the Mac mini.

So I do web development across three different machines, all Macs of different grades but only one I can really run VM Ware on. When it comes to testing sites on IE, it’s quite a struggle at the best of times; normally have to borrow of hack together some for of Windows machine, and then the best I can do is run IEtester. Not the best environment for testing I can assure you.

Bring in the Stack

When I heard of BrowserStack I was thinking it would be another “snapshot” type affair where you give it a URL and it will give you an image of the site in those browsers. This is a shockingly shit way of doing things as it doesn’t provide you 75% of the feed back you require when testing sites. BrowserStack is different in that it basically give you a virtual machine in the “cloud” that feeds a video back to you of the site as you interact with it. This means that I don’t need to install anything (other than a browser and Flash) and can fully test a site on a real version of IE6/7/8/9 without any dodgy emulation going on.

You might be thinking this is all well and good, but does require to do testing on a live/staging server rather than locally; you are wrong, so very wrong. One of the touted features of BrowserStack is the ability to do local testing via Tunneling. It’s really simply to setup, you just need to allow BrowserStack‘s Java Applet to access your machine and then point at the hostname you want (most will have localhost) and the port (typically 80). The cool thing also, that I didn’t think it would be able to do, is to access any of your hostnames on your machine; I have a load setup on all mine and BrowserStack can access them all (be it one-by-one, but still).

There’s a Catch

The only thing with BrowserStack is that it’s not free; you get 60 minutes free when you first join, but then you need to pay. If you’re a single developer then it won’t cost you any more than $19.99 a month for unlimited testing time, but if there are more of you in a team then probably best getting one of the higher end packages. I’ve not purchased a package yet but I very well might do soon as it’s a damn sight easier to have a browser in the cloud than it does managing multiple VMs on multiple machines that may not be able to cope with it.

I’m not sure how well it will cope when it comes down to intensive testing such as Javascript but they have included IE Debug Tools within the each install, a major plus in it’s self.

Give it a go and see what you think any way, I’m really impressed!

One thing annoyed me a bit and that is the Markdown documentation; don’t get me wrong, Markdown is pretty cool, but I didn’t have an easy way to make sure it’s formatted properly and thus caused me to upload multiple revisions of my README.md files. So a quick search on the interwebs found me on this handy little script: PHP Markdown by Michel Fortin.

This script takes on the rules set out in John Gruber’s orignal Markdown project and puts a PHP processor on it allowing PHP devs to use Markdown in their projects.

It’s pretty cool, but I wanted something that allowed me to view what the hell I was doing quickly, so I quickly made a wrapper for the PHP script that allows a Markdown writer to see what the hell they are doing. And thus, Markdown Viewer for PHP is it!

Get Markdown Viewer for PHP on Github
git clone https://WolfieZero@github.com/WolfieZero/Markdown-Viewer-PHP.git

Hopefully it’s pretty simple to use. Just place the files into a directory on your local or remote server, access it via the URL you assigned that location to and then add ?src=LOCATION/FILE to the end of that URL to begin using it. So in my environment I set it up locally using the host name markdown.view and thus can access any file on my local machine by going http://markdown.view/?src=/Sites/this/project/README.md and it will output the formatting given in the file.

The only issue I believe may happen is trying to access local files where the Markdown Viewer is on a remote machine; I haven’t tested that yet, but I’m 99.9% sure it won’t work.

I know there are other options out there that allow you to do pretty much the same thing and probably better, but they either cost money, don’t work on your system or you don’t use that particular tool set. Hopefully, PHP is something that everybody should be able to use on their machine so, for me, it’s pretty universal.

Let me know what you think of it and if you have any suggestion then please let me know in the comments!