Dear old IE, however, doesn’t allow you to use the new tags, such as <article>, <nav> etc in your CSS.

There is the popular ‘HTML5Shiv’ which basically does the following in JavaScript:

document.createElement("article");
document.createElement("nav");

But what if you have to make your sites work 100% in IE without JavaScript? Well, you can do the following using conditional comments:

Obviously then, you need to use the classnames, not the elements themselves in your CSS.

Ugly? Yes. But it works!

One of the things that I really wanted to change is the way we deal with embedding videos. I was looking to get rid of the dependency on JavaScript (SwfObject). But in order to do that I’d have to solve two problems first.

The three reasons we started using SwfObject at work in the first place were:

• You used to have to ‘click to activate’ Flash videos in our good friend IE. Luckily this is no longer an issue.
• It allowed you to pass w3c validation. Now, I do not care if a page does not validate because of an embedded YouTube video, but our clients do, and they pay the bills.
• We wanted to be able to size the embedded content to fit the page layout. We could use JavaScript to calculate the dimensions before we injected it into the document.

Embedding without <embed>

So the first thing we’d need is the HTML to embed a video without the <embed> tag, which is what breaks validation.

Nice! That was easy! I’ve tested this in all browsers on XP, Vista, Windows 7, and OSX – no problems!

Sizing video elements with just CSS

This one is a little bit trickier. First off we’re going to need a box that wraps the video element that maintains an aspect ratio; that is, one where the height adjusts to the width.

To do this, we’ll use a handy trick – using padding. Padding is cool. If you set the width of an element to 100%, then the padding top / bottom can be expressed as a percentage of this width. So for instance, if you had a column that is 400px wide, and you give an element inside it a width of 100% and a padding-top of 25%, it would get padding-top of 100px.

Here’s an example of this in action. Resize the browser window, and you can see the height will always stay 25% of the width.

So now we have a way to create a placeholder for our video. We’ll position our video inside using absolute positioning. A couple more things:

• An extra sleeve element is required for our dear friend IE
• The padding bottom to use is 56.25% for the ratio (it’s a 16:9 video, so it’s 9 / 6 = 0.5625), for 3:4 ratio videos you’d use 75%
• The padding top is for the player’s controls (25px in this case)
• You have to set the percentage on the padding-bottom, again, for IE

Here’s the finished code. You can open it up in jsFiddle and resize the browser window to see it automatically resizing to the content.

So…what do you think? Do you know of any problems with this approach? Let me know in the comments!

The result was equally interesting. A ‘hung’ parliament; no one party won a majority. The result of days of discussion is a coalition Government, with Conservatives and Liberals sharing power. I’m pleased with this result, and I thought I’d explain why, given that so many of my friends seem to be so aghast at the concept of the Tories being in power.

I’ll start by raising my concerns, and I think I share the same thoughts as a lot of my friends. A Conservative Government means the following is almost inevitable:

• Massive cuts in public spending. There will be less benefits available. The unemployed will get less money. The sick will get less money. Poor families will get less money.
• Tax rises. Quite big ones.
• An increased divide between the rich and the poor.

The above makes for grim reading. So why, given that I understand the above is inevitable, could I possibly be pleased?

Immigration

My first reason is one that people tend to feel strongly about, and that is immigration. Under a Conservative Government, it will drop. Sharply. This is an unfortunate necessity, in my opinion, of the situation Britain finds itself in. And, ultimately, a positive thing.

I am privileged to live in such a multi-cultural city as London, and no doubt the plethora of nationalities and cultures is a positive thing. Some of my best friends and most esteemed colleagues are from abroad. However, it is clear that there is a rise in the number of people who are not so willing to embrace being ‘British’, and contributing back through their skills, hard work and culture.

They are more interested in our liberal distribution of wealth by means of easy-to-acquire benefits. Our welfare state is all they are interested in, not our culture. In fact, they are determined to retain their culture, and wave the flag of political incorrectness and xenophobia at us if we so much as dare to point out that maybe completely covering your face with a veil may not be polite. We’re not a religious country either and people living here need to appreciate and accept this, and not claim we are xenophobic if we, as a nation, are not so up for following a faith and making it as much a part of our lives as would be normal in other countries.

A multi-cultural Britain is a good thing. A loss of national identity is not.

Benefits and taxes

Again, I am delighted that we live in a country where we have a welfare state. I was shocked to hear some of my American friends opinions on free healthcare reform recently – it just does not compute to me, that you should not be entitled to healthcare if you are sick. It’s one of the things that makes this country so great.

A few years ago I was running a startup company with my good friend Pete. I was earning a pittance, working 60, 70, 80 hours a week. I paid my rent, my council tax, my income tax, the business tax, the tax tax, the tax tax tax….you get the idea. I would have been much better off (financially) to have gone and worked at a supermarket, earning the minimum wage; an income of around £12k a year. Or, equally, just stay unemployed; claim housing benefit, tax credits, not paid council tax etc etc. Same amount of disposable income, just less work.

Maybe it was just my unique, personal experience, but this for me was a common trait of the Labour Government.  My strive to succeed, to start my own business, to move up the social rung to the next level of income; there were so many barriers to it. The extra work simply did not equate to extra income. The jump from ~£10k to ~£20k income was painful, to the point where I very nearly gave up.

If you’ve owned and run a small business during the last 5 years, you’ll likely agree with me. Labour didn’t tax the poor as much as tax the aspiring poor. Stay lower class, stay doing ‘alright’, after all, that’s their base of support, so they want to encourage that slice of society.

If you’re happy in your job at a supermarket, bar, high street chain, and you don’t aspire to anything more, a Conservative Government will not help you. If you feel you want to do something more, want to go from doing ok to doing well, then with the current Government, this will be a lot easier. I welcome this.

It is unacceptable to not give aid and benefits to the needy, but those with skills or drive should not be discouraged from bettering themselves, and subsequently, bettering the country as a whole.

The National Debt

I hope, one day, to settle down, to start a family. I want my children to be able to enjoy a prosperous Britain.

Our current debt, as a nation, nay, as a world, is out of control. The proposed cuts by the Conservatives, whilst harsh are, in my opinion, necessary. I did not agree with Labour’s approach to spend their way out of recession.

The current coalition, happily, includes members of the Liberal Democrats. They’re raising the threshold for tax-free income to £10k – this is fantastic news. Those on the minimum wage, earning around £12k, working a 37.5 hour week at their local high street store will benefit from this new Government.

My tax bill, however, is going to increase, probably dramatically. And you know what? I’m not unhappy about it at all. I would rather pay now, while I’m young, able, and working; in 5 years time, this period of extreme taxation, harsh truths, spending cuts; when I do eventually settle down, and my children grow up, the country will be in a much better state.

We’re fucked, financially, as a country. You can be selfish – no-one wants to pay more taxes – or, you can accept it’s something that unfortunately we need. ‘Blaming’ Labour is easy – I don’t think it’s their fault, per say; but we, as a country, cannot afford a Labour administration. And ‘blaming’ a Conservative Government for tax increases is not their fault either. It’s a necessity.

The ‘now’ is fucked regardless of who is in power. The future is what we should look to, and I believe a Conservative Government is best for our country’s future.

Benefiting the rich and why it’s kind of a good thing

Given my above point, this is one of the reasons why I actually don’t mind the Conservative’s perceived agenda of benefitting the rich, at the expense of the poor.

Sure, some of the rich will sit in their castles, counting their money.

But some of them will invest; some of them will take advantage of the current markets and expand their businesses; the super-rich are the people that go into other countries, buy up their industries, and relocate them back to their native country. We need super-rich British people to go to countries in trouble, buy their assets, buy their companies, and ultimately be providers of jobs, for the working class.

We need to encourage the rich to come (or stay) in our country. Need it. For our future.

Gordon Brown

I don’t need to elaborate any more than to say I didn’t vote for him, I didn’t like him, and I’m glad to see him go. I didn’t vote Labour (no shit sherlock) but I did vote against Gordon Brown. If Labour had appointed a new leader prior to the election, my vote may have been very different.

The ‘best loser’ won, and we have Liberals with power

Regardless of the media bullshit, the disaffection with Labour and Gordon Brown and everything in between; The Conservatives ‘won’. They had a larger slice of the vote. We live in a democracy and regardless of whether you agree, more people voted Conservative than any other party. For the two losers to take power would have been a travesty of justice. Are the rules wrong? Possibly, and I expect a change in one form or another. But by the rules, which we all knew, Conservatives ‘won’, and, in the British spirit, we should respect that.

We don’t have an exclusive Conservative Government. We have a coalition. Nick Clegg and Vince Cable will keep the Conservatives honest; David Cameron can’t be seen to ignore or discount their opinions; we’ll have 5 years of Conservatism (the clue to why that’s good is in the name) and the Liberal votes will ensure that Thatcher-style long-term damage is not caused. After their term in Government, we’ll get the chance to make a choice again.

By the way, I voted for the Liberal Democrats.

I’ve spent the last week working on some initial ideas on and off and you can see the fruits of my labour at http://fakedarren.github.com (preferably on an iPhone, and definitely in a webkit browser).

I’ve got some basic styles down, with not one image in sight so far (CSS3 is amazing), and the most interesting thing so far is extending my friend’s existing Touch class with Gesture support. I can now add events to elements such as ’swipe left’ and ‘pinch’ – pretty damn cool. I want to make this very important part of the toolkit rock-solid and a joy to use, so how far it has come in such a short time is really encouraging.

Over the coming weeks I’ll be completing the HTML templates – forms need a lot of work, for instance – and I want to get a really solid set of templates and easy-to-manage CSS so theming is a cinch.

Once that is done, I’ll push on into getting animations between pages done; sliding, flipping, rotating, fading etc. That’ll keep me busy for the foreseeable future but there are a lot of other things I want to be able to support in the final version.

Check it out on your iPhones or fork it on github and let me know what features you’d like to see!

This will be incredibly useful. As we add more and more JavaScript and rich media to web pages, performance is affected. One easy way we can mitigate the effect this has is to leverage the power of CSS to reduce the number of background images we use; for instance for rounded corners and gradients. Border-radius is still not implemented in IE (rumoured to be included in IE12 when it’s out in 2043) but gradients are, and we should all start using them now.

Example

Here’s a real-life example. This is just a link; this style can be applied to any element; <button>, <input type=”submit”>. <a>, whatever.

I’m a button

Dependent on what browser you are using, it will look different.

How it looks cross-browser

Firefox 3.5

Firefox 3.6

Internet Explorer

Safari and Chrome

The CSS

.sexybutton {
  background: #DEDEDE;
  background: -moz-linear-gradient(top, #FFF, #888);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#888));
  border: 1px solid #D6D6D6;
  color: #666;
  display: inline-block;
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#888888');
  font: bold 1.3em/22px Helvetica, Arial, sans-serif;
  height: 22px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: 0 1px 0 #FFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.sexybutton:HOVER {
  background: #BEBEBE;
  background: -moz-linear-gradient(top, #DDD, #666);
  background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#666));
  border: 1px solid #B6B6B6;
  color: #444;
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#DDDDDD', EndColorStr='#666666');
  text-shadow: 0 1px 0 #DDD;
}

Summary

I’m absolutely convinced that using CSS gradients is now viable. Gradients do make a difference, when used well, to the aesthetic of a webpage – more so, in my opinion, than a few pixels of rounded corner.

I’m also convinced that as we put more and more JavaScript onto our pages the performance hit of making a design work perfectly in all browsers gets less and less preference. We need to start leveraging CSS effects wherever possible; it is not fair to a user to have to wait for 100k of gradient images (and the extra HTML required) for something that can be represented by much less CSS.

I love this way of rendering gradients and will definitely be using it in my future work.

Some links

• Safari gradients
• Firefox gradients
• Internet Explorer gradients

Setting up the Virtual Machine

The first thing to do is go ahead and set up Windows in a Virtual Machine exactly as you would normally. I would recommend installing XP over Windows 7 because it will have a smaller footprint, and you don’t really need to ‘use’ it, just run it in the background.

If you’re tempted by IIS7’s ability to run multiple sites (something you cannot do with XP by default), I recommend IISAdmin.NET; this handy utility allows you to switch between multiple sites with IIS5.

There is one required setting, and that is that the Virtual Machine’s network connection is bridged, not using NAT. This will allow us to assign the Virtual Machine a static IP, which is vital if we’re to make working in OSX painless.

Sharing files between the two

The other choice you have to make is whether or not you want to share your OSX files. I’ve not bothered because I’m going to share the other way round – writing to the VM’s hard disk, instead of reading them from the Mac in Windows. Mac shares are seen by Windows as a network drive and IIS has some serious issues with these.

I have multiple sites running, and I stick them all in C:\Projects. If you’re just running with defaults and a single site, they’ll be in C:\Inetpub\wwwroot. Navigate to these folders in Windows Explorer and right-click. Choose ’sharing and security’ and set this folder to be shared and allow other users to edit these files. Give the share a sensible name like ‘Server‘ or ‘Projects‘.

Check your VM is all set up

You should now be able to

• Access the Internet in the VM
• Run your site in the VM as localhost
• Ping your VM’s IP from terminal (type ping x.x.x.x in Terminal, where x.x.x.x is the static IP assigned to the VM)
• The folder you store your site files in should be shared (depicted by a hand holding the folder icon)

As your VM has a static IP, it is connected to the internet; so I wouldn’t recommend completely disabling any firewall. You will need to configure your firewall to allow you to be able to access your VM from the Mac, but as there are so many different possibilities I can’t go into details here.

Viewing your ‘local’ site in OSX

You should now be able to access your site running under IIS in the virtual machine in OSX. Open a browser and go to the IP address you assigned the the VM. You should see the .NET site running.

Now we’ll map this IP address to a nice name; so I can access this site as http://dev/ or similar. Open your text editor of choice and go to the ‘Open’ dialogue (⌘-O) and then type ⌘-shift-G to open the ‘Go to folder’ dialogue. Type ‘/etc/‘ and open the ‘hosts’ file. Add your ‘nice’ name and the IP you assigned, save, close.

Viewing your ‘local’ site files in OSX

Open finder and hit ⌘-K. This brings up the ‘Connect to Server‘ dialogue. I mapped the host name ‘mvc‘ to my VM’s IP address, and shared my files as ‘Projects‘; so I will connect to ‘smb://mvc/Projects‘.

The username and password you connect as should have not affect anything; you can connect as a guest if you so wish. Anyway, you should now be able to view and edit your .NET site in OSX!

I’m loving it

I’ve only had a few weeks with this setup but I can confirm I am nothing short of delighted with it. I currently am in love with Coda and TextMate. Coda seems to have the best ‘out of the box’ syntax highlighting for .NET / C# code, and that’s why I use it.

I’m also going to look into auto-mounting the shares but because I use my job for three ‘jobs’ (Abacus, GigJunkie and MooTools) this isn’t really practical. I also foresee some potential problems with source control and permissions; but I’ll tackle these issues as and when they come around.

Hopefully this post was of vague interest and help to some of you looking to achieve the same. It works well for me and I hope it works well for you too.

I’ve recently been working on the upgrade layer for MooTools, that allows users of MooTools 1.1 to easily upgrade to the latest version of our favourite framework. If you have a complex site, the following may not be relevant, but hopefully following the steps below will help the majority of users to update their code.

This isn’t a complete guide – but these are the steps I would take. Make sure you read through the readme first; there are a few breaking changes and subtle API differences. But for simple sites, the following should work.

Element getters and setters

One frequently used part of the API from 1.1 was Element setters and getters. Previously, you had methods such as $(el).getValue(val) and $(el).setText(text). These changed to $(el).set(’value’, val) and $(el).set(’text’, text). This is a quite simple change and a good one to start with. The complete list of methods that need to change:

• getText() and setText()
• getHTML() and setHTML()
• getTag()
• getValue()
• setOpacity()

Simple Fx

This is another relatively simple change to make, and again, commonly used. To upgrade is a case of:

• Fx.Base becomes Fx
• Fx.Style becomes Fx.Tween (with some differences, see readme)
• Fx.Styles becomes Fx.Morph
• el.effect() becomes el.tween(), and el.effects() becomes el.morph() (again some subtle differences, see readme)

Selectors

Next up is replacing $E and $ES.

• $E(selector) becomes document.getElement(selector)
• $ES(selector) becomes document.getElements(selector)

There was also a second optional parameter you could pass in that defined what element you wanted to search in. An example:

• $E(selector, ‘.myDivs’) would become $$(’.myDivs’).getElement(selector) or
• $E(selector, ‘#myOtherDiv’) would become $(’myOtherDiv).getElement(selector)

Ajax requests

Last of the common changes to be made is to the MooTools 1.1 Ajax and XHR classes. These need to be replaced with Request. Have a look at the readme for exact changes.

Fx methods

We updated a few Fx methods earlier, now let’s just finish the job. The following changes should be made:

• myFx.custom() has been changed to myFx.start()
• myFx.clearTimer() and myFx.stop() can both now be written as myFx.cancel()

If you follow the above steps most of your code should be good to go. If you need any further help just jump on IRC and someone should be there to help. Also, please check the docs for 1.1 and 1.2 to check you are passing the correct arguments.

We will also be working closely with the Joomla! dev team to convert the most popular plugins for you. Once these are done, we’ll be putting them in the Forge. You can request conversions in the MooTools Google Group but we can’t convert everything -so please don’t be offended if we don’t convert your favourite plugin.

Please read the original post on the MooTools blog for more details – and have fun upgrading!

My home setup

My work setup

I think it’s frikkin’ cool!

We had something similar in San Francisco a couple of months ago which I also had the pleasure of attending. I mentioned that the guys from Europe should have one, suggested London as a venue and now here we are. The awesome company I’m working for at the moment have let us use their Regent Street office for the event and I cannot express how grateful I am about that.

We’re going to have quite a high turnout – about 15 of us I think – and for a lot of us it’s going to be the first time we’ve all met up. The San Francisco one and this one have and will really help the MooTools dev team get closer. Working with people in your spare time in different countries can sometimes be difficult and I think everyone meeting face to face is going to really have a positive impact on how we work together.

Follow the @MooTools Twitter feed for regular updates on what’s going on; we’ll have live video chat if people want to chip in and give us a hand with what we’re working on. I can’t promise (we may be busy coding!) but hopefully we’ll get a chance to go out for a drink or two and if any MooTools users are around in London you can come and meet the devs. We’ll tweet the details if that happens.

Also early next year, I hope to organise a more public event, for users as well as devs; we’ll be discussing this over the weekend. I’m hoping to get a sponsored bar and a couple of the devs over to do a couple of talks about our favourite JavaScript framework.

Totally looking forward to it. It’s going to be amazing