He mentions three staples that Ethan Marcotte (the guy who coined the term "responsive design") wrote about in his book, coincidentally titled "Responsive Web Design" (ingenuitive, huh?). Of those three, one is media queries - the @media directive that's been around in CSS2, but has only now been started to touted as "CSS3" in recent years, with improved browser support for window size detection.

Now, I find @media queries useful and great when you're building CSS to target multiple devices - it allows you to set out base styles that enforce brand consistency across your design, and then simply adjust positioning for various devices - I get the concept, and I think it's a great idea. However, there's a big caveat about @media queries which gives me a particularly large cause for concern.

I run a business which deals with a lot of small customers - and having patched Umbraco to work in cheap hosting, I recognise the commercial aspects of people being on a very tight budget - I was there, after all, it's what prompted my patches.
However, throughout the design and build process of a website, there needs to be consideration for this very simple fact - bandwidth is fast becoming expensive and a limited resource.

I recently quit Vodafone because they removed my 5GB data bolt-on without telling me, and then all they offered as a replacement was a 2GB one (3GB if you have an iPad). Most domestic broadband providers cap usage, or have a "fair use" policy which constrains to an average of 40GB - when I Google'd, only four companies had truly "unlimited" packages (and some of these are also documented to use traffic filtering at peak periods - Virgin's XXL Package, for example). The average page size of Alexa's top 500, as of May '11, is fast approaching 700kb, and the one bit that people who tout @media as the answer to everything don't tell you is: your entire stylesheet, with resources, images, the works - for all viewports - is loaded, before the @media stuff is parsed by the browser.

Yes, you read correctly - everything gets loaded, regardless of the device you're looking at a page on, prior to @media being parsed by the browser. This means if you're on a mobile device which should be served up maybe 50kb of page and image, you'll get all 700kb of the desktop page too. Conversely, if you're on a desktop, you'll get 50kb of unnecessary mobile stuff downloaded for no good reason. Let's quickly work out how this breaks down:

1. Mobile with 2GB data bolt-on - means you can browse approximately 2000 ~700kb pages before you cap out at your limit. That's less than ten a day for a month. Add in the fact that if you own a Smartphone, you can kiss goodbye to several MB a day if you have Twitter, Facebook, Foursquare, etc. all hooked up and running in the background.
2. Home broadband package with 40GB allowance (which is the top end of most broadband companies, with exceptions already noted): you can browse ~60,000 pages a month, or ~200 a day. It is a drastic improvement by 20-fold, but homes now normally have more than one PC, and if your kids are Youtubing, or you're using something like BBC iPlayer/ITV Player/4OD, then you're going to cut into that limit pretty quickly.

These figures don't take into account caching, which the link above notes cuts back on average response sizes of the top 500 home pages from >500kb to <100kb - an 80+% saving. However, cellphone and portable devices, whilst improving, are notorious for having pretty crappy memory capabilities, and caching takes time to implement in a robust policy (since I build on Umbraco, I of course am biased to recommend using the included ClientDependency library, originally built by Aaron Powell at Redify and Shannon Deminick at Umbraco HQ, both formerly of TheFARM Digital in Oz).

The main issue here is that on your mobile, if you're browsing a site that uses responsive desgn to handle multiple devices, you're wasting in excess of 80%, maybe even 90% of your visitor's bandwidth just for them to view your site. For desktop viewers, it's more like 10% - but still nothing short of bad practice. Bandwidth is money - both for your customer, and for whoever's hosting the site.

I personally built the new Kingsmill Bread website before Christmas for CMW London, with two sites - one for full desktop and iPads, and one specifically for cellphones (if you're on a cellphone, tough luck, we do user-agent checking to redirect you to the mobile one automatically. Sorry!). If they want to expand that out in future to support TVs, tablets and netbooks specifically, great - we know that the site is fully performance-optimised for each platform already to save them and their visitors money on bandwidth.

Responsive design has a place, but it's by no means a one-size-fits-all solution. Remember that in an ever-increasingly-connected world, bytes are money, and it's your responsibility to save them to deliver value-for-money in your solutions.

People think that becoming a developer is all about code, and in some cases, that's true. I think, though, that being a developer means solving the problem at hand - whatever the technology, language, or platform. A lot of us are purely focused on our specialism - be that .NET, webforms/MVC, front-end HTML5/CSS3/jQuery, etc. What about the metal behind it? All that code that makes what you write, possible - the operating system, web server, network protocols, and stuff that just makes your brain crackel with excitement? OK, maybe that's just me...

Anyway. Developers hate repaving machines. Some of you probably have IT departments for doing that kind of stuff, but for the lone freelancer, one dead hard-disk (as happened to mine earlier this week) means re-installing everything afresh on a new disk. And there are ways of making this stuff quicker, if it happens to you regularly (disclaimer: I'm on laptop number 7 since March 2008, but six of those have been in the last 2 years...).

Planning for failure is something every developer should do, and that includes your hardware failing too. Here's a quick step-by-step plan on how to make sure you can minimize that downtime.

1. Source control. If you don't know what it is, find a shotgun and a mirror... wait, I'm kidding.
   
   Seriously though, if you're writing code without source control, it's like sleeping with your girlfriend, without contraception, a week before her period, drunk and blindfolded. One slip, and something goes wrong, and you don't remember how the hell it happened, or how you can fix it. And man, your head hurts.
   
   Get source control. Anything except Visual SourceSafe will do, as long as you can commit changes to a remote server via HTTP/S. I personally use Subversion, but I'm starting to lean towards using Git, as my hosted project provider has support for both. This way, anything goes wrong, not a big deal, you have the entire history of everything you changed and you can re-download it on demand. Assembla (my old provider) offers free private spaces up to 1GB in size. If you're doing it professionally, pay for pro tools - I use CodeSpaces' $29.99/mo plan, for up to 10 users & unlimited projects, and I pay for it every 6 months in bulk. I get project, task, user, time and code management - it's the best hosted provider I've used by far (with the exception of their API, but that's for another post).
2. Get an external hard disk, and back up to it weekly.
3. Image your hard disk with all your apps pre-installed. This is a tricky one, and the main meat of this blog post. I'm also using Windows 7, so YMMV with different operating systems.

Here's a really sweet video walkthrough on how to generalise, and then capture, a full system image, including installed applications (basically, go nuts with installing your copies of Visual Studio, SQL Server, Office, etc. etc.), and store this in a .WIM file, which can then be used to either re-deploy to other systems (IT admins, this one's for every time you hire a new dev team member), or used to re-image your own system (i.e. your hard disk just died, like mine did last week).

If you just arrived here because your hard disk frazzled at 2am last night, then my next post is a step-by-step walkthrough on how to restore the image that (hopefully) you created from watching the above video.

Watch this space!

As a developer by trade, I was excited as heck by the keynote, and I'm frustrated as anything that I can't be there in person, to get my hands on the Windows 8 tablets they're (allegedly) handing out to attendees.
However, compared to keynotes by Google, Apple and all the other giant multi-billion tech conglomerates, I was disappointed by the lack of consumer focus. Microsoft wants people to upgrade to Windows 8, they still have to sell to consumers. I appreciate their value and their money is in pitching to developers who can add value to the platform, but Apple comes out with devices "that just work". I want to see more of that "it just works" stuff - I want to see someone doing music playback, watching movies, writing school essays, business reports, connecting to Wifi - all the stuff a normal domestic user does.

Now that my big gripe is out of the way - WOWZERS. Windows 8 strikes me as a developer's dream. Here's a small selection of the (pretty awesome) feature list from the first hour of the keynote:

• Everything from Windows 7, runs on Windows 8;
• Visual Studio 11 for writing Windows 8 apps, can handle both native HTML5/JS apps, Silverlight, and Winforms/WPF - and pass code back and forth between it and Expression Blend for making your apps both beautiful and functional;
• 30% lower memory footprint than Windows 7 out-of-the-box (404MB compared to 280~ish MB in the demo);
• Windows APIs now support pushing services from apps back into the native APIs for consuming from other apps;
• Support for 256TB hard disks... (that's about a quarter of Google's index size);
• A new Windows 8 App Store, which is optional for developers to use - no more Apple- or Google-style monopolistic control of the marketplace;
• 3 lines of code to hook up to device-centric sensors (accelerometers, webcams, and so on).

So what does this actually mean for developers?

Well... I can write an HTML5/JS app, and it'll run natively on the desktop, be consumed by the desktop's other apps, but can also run standalone on my mobile phone, my tablet, my Linux PC, my Mac PC (if you're so inclined... boo hiss). I can write a Silverlight app and take full advantage of XNA on the desktop, XBox and Windows Phone.

Windows has finally recognised that interoperability between hardware platforms and applications is a must to stay ahead. This is the most cohesive effort I've seen from them, Apple or Google to unify the entire platform offering, giving developers (and their employers) maximum freedom to experiment, innovate, and inspire.

The Windows 8 developer preview will be available at 8pm PST. I'm tempted to go to bed early and get up at 4am local time just to download it.

The keynote's still going on at the time of posting, so I might be back to update it with more cool stuff later as it's announced.

Benjamin

Fortunately, there's a great answer to that - <xsl:key />.

Why would you want to use it? Well, I've been working on Blog4Umbraco a lot lately, and I've implemented custom datefoldering strategies. Now, that's great for flexibility on SEO and human-readable URLs, but if I don't have date folders set up, then the Blog Archive and Full Archive macros break, cause they rely on the unique nature of datefoldering to work - by iterating over the year folder in yyyy format, then month in mm format, then date in dd format, then the posts themselves - four levels of nested for-each's.
I would be using the Exslt.ExsltSets:distinct function to retrieve all postDate values of all grandchildren, were it not broken with a nice YSOD stacktrace in Umbraco 4.5.2.

So the question is: how do we retrieve every post, and then tell XSLT only to iterate over the *unique* values, without resorting to .NET? Answer: <xsl:key />.

The <xsl:key /> element is designed to generate unique IDs in-memory for matching nodes based on their properties.
In this instance I used:

(P.S. main reason for using (@isDoc or name()='node') is compatibility between Umbraco < 4.0 and 4.5+ schemas - it'll work with both!)

So now I have a key called "ym", which will be created for every Umbraco content node, where the key's value for that node will be calculated from the use attribute.

This now means that I can do:

This does a few things:

1. Calls generate-id() for the given node, which creates an ID;
2. Calls generate-id() for any node where the "ym" key matches the given expression - in this case, passing in the current node's postDate for evaluation;
3. Returns true if the two IDs match.

If it matches, great, we render results.

Hope this is useful!

One of the things that has bugged me is that Akismet, the included comment spam protection service, is only licensed for non-commercial usage, and if you want to run a "commercial" blog (however you want to define that), then you have to pay them some money. Now, that's all well and good, but as a true Socialist (I vote Lib Dem, for anyone who wants to know) I believe that certain basics in life should either be free or be at substantially reduced cost - healthcare, education, anti-virus software, operating systems, CMS software... OK mostly software. I think spam-fighting kit, with 87% of the Internet's traffic being made up of spam in one form or another, is now a basic essential, and the right of every good Internet citizen to possess at the very least basic security to guard against it.
Anyway, I've found Akismet's "commercial" clause a little wooly in the past, as a site that isn't e-commerce, nor has adverts, may still be run by a company (hey, we're putting a blog on the new Code Gecko site), and therefore is techncially "commercial" in nature. Where does one draw the line? Answer: by making it free - as in both free speech and free beer.

So on this note, I decided to hunt out some free blog comment spam systems that would gladly allow commercial use, and found two of particular note:

• BlogSpam.net - a nice open-source option, with a hosted service for those who don't want to run their own service, written by Steve Kemp. I reckon this'd be ideal for high-traffic sites, cause it gives you the option of running your own, which you can then performance-tweak as and when you want.
  • Pros - no API keys;
  • Cons - few .NET wrappers (see below).
• TypePad AntiSpam by the guys from Six Apart. These are the same guys that introduced the concept of TrackBacks, letting bloggers "ping" each other instead of just pinging blog aggregate services - an implementation of this is coming in Blog4Umbraco v3. Their implementation is great cause it's the identical API to Akismet, but with the "commercial use allowed" clause - great.
  • Pros - Can use Joel.Net's Akismet API library with a simple modification;
  • Cons - said library requires recompilation, it's a hosted service, and requires API keys.

Now, both of these are lovely, but there's no .NET wrappers for either of them. And as Scott Hanselman and Linus Torvalds say, "talk is cheap, show me the code".

BlogSpam.net API wrapper

Joel.Net's Akismet wrapper for TypePad AntiSpam

The BlogSpam.net API wrapper is MIT-licensed, as is pretty much all my open-source stuff.
Joel.Net's Akismet wrapper is 3-clause-BSD-licensed, so I can't take credit for anything except one line of code which changes the API URL from api.akismet.com to api.antispam.typepad.com - look Ma, no hands.

I gladly released this on March 14th - aka International Pi Day (3/14... *groan*), and the birthday of Albert Einstein (14/3/1879, 132nd anniversary), Quincy Jones Jr. and Sir Michael Caine (both 14/3/1933, aged 78), Jerry Greenfield of Ben & Jerry's (14/3/1951, aged 60), and yours truly (14/3/1987, aged 24).

Happy birthday to me, and enjoy!

After reading Njål Gjermundshaug's post on his attempts, I came across a few more SQL errors. So, in an attempt to finally fix it, once and for all, I came up with a SQL cursor.

For those of you that aren't familiar with SQL cursors, they're basically "for-each" loops in SQL. Really nifty, but can be a pain to get right when they get more complex than single-statement commands.

As the greats (well, Hanselman, Torvalds and Key at any rate) say - talk is cheap, show me the code:

So there you have it. You can also change the "WHERE trashed = 1" to "WHERE contentType = whateveryourdoctypeidishere" (replace whateveryourdoctypeidishere with an integer value) to delete all content of a specific type - say, blogposts - oh wait, crap, wasn't meant to do that.

Umbraco has two really useful little fields - "Publish at" and "Unpublish at" - that are properties for every node. They're used for automatically pushing content into (or out of, respectively) Umbraco's XML cache, in /App_Data/umbraco.config.

However, these properties, unlike a node's created and last-updated dates (/<node>/@createDate and /<node>/@updateDate with XSLT), are not stored in the XML cache itself. So if you want to leverage it with XSLT, you have to resort to writing two very simple helper methods like so:

The publish and unpublish dates will automatically clear themselves after the publish/unpublish event is raised accordingly. So this could be useful for a countdown, say, "x days until competition opens/closes" or whatever, but not advised for general usage.

Hope it helps!

Firstly, Happy New Year if you're reading this!

Secondly, my laptop, HD videocam, and portable hard disk got stolen in June 09, shortly after the Umbraco CodeGarden10 conference. The thieves, fortunately, didn't know that both the laptop BIOS and Windows have got passwords... suckers.

Thirdly, I'll videoblog again soon thanks to my wonderful new Sony Ericsson X1 with HD videocam (thanks Android 2.1!).

Oh, and finally, I've just written an ASP.NET control called Social Controls which I'd love feedback on.
It stemmed from wanting to implement social sharing in Blog4Umbraco, with server-side controls that could be configured through the Umbraco dashboard (more on that later).

Reading through Javascript APIs sucked bigtime - I even wrote to ShareThis after reading through their actual Javascript implementation (80k of Javascript = 5k+ lines... *shudder*) cause it's so horrendous.
Furthermore, ShareThis' documentation is spread over several pages and it doesn't give you details on which settings are mutually exclusive and so on. I'm working on my own documentation to detail this in due course. Lastly, to add insult to injury, not only are their configuration settings poorly set up, but their implementation isn't X/HTML-compliant, making use of custom HTML attributes.

So, to fix this, I wrote ASP.NET Social Controls, with:

• unobtrusive Javascript to fix ShareThis' faux-pas, without relying on any third-party Javascript frameworks such as jQuery or Prototype;
• (currently draft) implementation for ConfigurationSections to store site-wide sharing configurations in web.config (such as publisher keys, but also for UI settings too);
• cascading properties (so global settings can be over-riden per control instance).

Currently the ShareThis control is pre-release/"alpha" status, and I would appreciate any feedback via Codeplex.

Happy new year!

1. Having to uninstall Active Directory from your network and then piece-meal it back together workstation by workstation;
2. Having to do system state backup/restores which won't restore all your other server applications (Exchange, SQL Server etc.).

I'm only running one physical server here - which was Windows Server 2008 32-bit, and then I realised about 2 hours after finishing installing, that my CPU was x64 (Intel Xeon 3.06GHz). Damn.

So to get all the 64-bit shinyness and still preserve my Active Directory, I figured out the following:

1. Set up a new virtual server ("Bohr") on my laptop.
2. Clone the existing physical server ("Einstein") hard disk and mount it on Bohr.
3. Configure Bohr as an additional domain controller (DC) and global catalog server (GC).
4. All my users, computers and settings get replicated from Einstein to Bohr.
5. Test all applications, databases and websites are working on Bohr.
6. Demote Einstein and remove it from the domain, wipe the hard disk with Eraser, format, and clean-install Windows Server 2008 x64, with new name "Brunel".
7. Install Active Directory on Brunel as an additional domain controller again, and watch the settings replicate back across.
8. Move databases and applications back.
9. Remove virtual server Bohr.

It appears a bit long-winded but this is the first time I've had to think about these kinds of migrations so if anyone can suggest better alternatives then please do so in the comments.

Tools I used:

• Disk2VHD by Microsoft's Sysinternals team;
• WinImage (free 30-day trial);
• VMware Server (called ESX4 I think, but their product family names are a little confusing);

I looked at Virtual PC as I've used it before for virtualising operating systems and servers whilst working for clients, and I discovered that Windows 7 (which is what my laptop runs) has Windows Virtual PC already installed, with an image of Windows XP Pro for application backward-compatibility.
At this point I cloned Einstein's hard disk to a VHD file and went to VPC to create a new machine and mount the VHD as the hard disk.
First brick wall - VPC will only let you run XP, Vista, or Windows 7 inside VPC. So I couldn't create a virtual machine running my cloned Server 2008 (as demonstrated by the lovely error message you see here). Damn.

So I'm driven to the arms of VMware, and after a bit of reading, I download and install VMware Server. With a bit of configuration, I soon have my virtual machine.

Next brick wall - VHD is a Microsoft format, VMware won't read it. Damn.
WinImage to the rescue, which performs conversion from VHD (Virtual Hard Disk - Microsoft's hard disk virtualisation format) to VMDK (VMware DisK - their format - gotta love competition for different "standards", haven't you...) - my 20GB of data takes 36 minutes to convert, apparently.

Once I have my VMDK hard disk image, I mount it to the VM (Bohr) I've created in VMware Server.

Here comes the fun bit where stuff actually gets moved around and I feel like I'm making progress instead of just clogging up my hard disk further by downloading and installing yet more software to achieve the task at hand.

I configure Bohr with a static IP address so it'll sit on my wireless network and interact with my server, laptop and router as if it were just another physical box. My laptop is close to death at this stage cause it only has 2GB of RAM (ouch) and I've allocated 1GB of it to Bohr (yes, I'm planning on an upgrade as a Christmas present to myself, along with a very nice Hugo Boss winter coat I've seen. Donations and Christmas cards accepted, preferably together :-D).

Once I'd powered on Bohr, I remoted in using VMware's Firefox browser plugin (RDP was very flaky for some reason and Bohr's network connection kept bombing) and renamed it using netdom and a little help.
Once this was done I uninstall Active Directory Domain Services entirely - Bohr can't see Einstein's domain services and so thinks it's still the only DC on the domain. A reboot later, I reinstall Active Directory as a new domain controller for the existing forest, and hey presto, my user and computer accounts and DNS settings replicate across! Shiny.

To summarise at this stage - I have two DC's on the network, one physical "Einstein" and one virtual "Bohr", which is just a clone of Einstein's hard disk, but reconfigured as an additional DC on the whole domain rather than a primary domain controller.
I've also just run a quick test on Bohr and my websites and SQL Server are functioning perfectly, including connecting via Management Studio using Windows Authentication.
Lastly, I right-click on the domain in Active Directory Users & Computers and hit "Properties", then change all domain control services from Einstein to Bohr, before uninstalling Active Directory from Einstein.

Further steps to follow, but this is most of the headache-inducing legwork done!

P.S. Please submit other interesting server names using the comments box below!

Update: it's 0237 GMT and I'm installing Server 2008 x64 onto "Brunel" now. W00t. Man I need a smoke. And some sleep. Or maybe coffee.
Another update: it's now 0318 GMT and "Brunel" is installed. Definitely time for sleep.

• New Joomla project launched!
  Having been commissioned to do some "fixes" for a Joomla site, handover was finally successfully achieved and the site launched last Wednesday (19th August).
  Unfortunately the site makes use of VirtueMart - a Joomla e-commerce add-on with not the greatest of admin systems I've ever seen. and I have another Joomla/VirtueMart project starting this week! All the fun of the fair, as they say.
• New e-commerce site launched!
  Resolution Records' site finally went live on the 30th of June after several weeks of design and re-architecture. With a solid online marketing campaign, a new and fresh design by award-winning designer Matt Needle, fully integrated stock management and online credit-card processing, and a great Flash carousel on the homepage (supplied by another "code gecko"), Mark's business is flourishing! Check out the portfolio to see the site in action.

Other news - I'm going to be buying my first ever MacBook soon, because they can now run Windows thanks to the Intel chipset, which means I get to run a triple-boot PC (Mac, Windows and Linux) for all my development needs.

I'm also expanding my skill set into PHP and beginning to look at WPF, WCF, Flash and Silverlight in more detail.

Migration to Umbraco is slow but steady - I intend to get my portfolio of DotNetNuke sites onto Umbraco by Christmas with any luck. If you haven't checked it out already I highly recommend it due to it's powerful (and insanely fast) XSLT-based template engine.

Watch this space!