Now, of course all your emails should look great when images are turned off, but what Pizza Express has been doing is extra special and using table cells to create pixelated versions of images when they’re turned off.

Our Christmas email at work used pixelated artwork which provided a great use for this technique. By using table cells to create the images they’re visible whether or not images are turned on.

I used the table method sparingly to keep the HTML to content ratio as low as possible and avoid tripping the spam alarms, so there are still images in the emailer, but I think the effect that you can get is very effective and definitely something more people should be trying!

What I especially like about this technique is that there’s no new technology involved and it won’t only be viewed by people with the latest browsers. It’s just a great idea using existing methods!

It’s been great though, and aside from the job itself the people are all right too! Oh, apart from one thing: they don’t drink nearly enough tea! Or make it for that matter (yes I’m talking about you Chris)!

I’m sure I’ll keep posting about development, I may be a project manager by trade now but in my heart I’ll always be a developer! Who knows though, there might even be a few project management posts coming too!

If you’ve been living under a rock, QR stands for ‘Quick Response’. QR codes can be scanned by smartphones and can contain links, vCards, text, etc. They can even initiate phone calls and text messages. They’re basically a great way for people on the move to grab a chunk of information quickly, saving them the hassle of typing a URL or contact into their phone.

There are loads of examples of beautiful and creative QR codes out there, including some great creative QR code business cards. These are all great, but I’m a mere mortal, not some QR code designing genius. How easy will it be for me to create some funky QR codes?

The answer it seems, is really quite easy! Start off by generating a QR code, there are many online services available that do this for free. I’m using the QR Code Platform by Good Survey, mainly because it looks dead good, but also because it’s got a lot of advanced customisation features for creating codes with images in.

I’m just encoding a URL, so I enter that and then click ‘Show advanced options’. Here I’m going to change the Version (density) to 5, which gives me more pixels to play with. I’m also changing the error correction to H, which should give me a larger area to plop my picture in. The last thing I do is check the ‘Add Logo image box’.

After you press ‘Continue’ you’ll see your QR code, you can then browse for an image to stick in it. I’m using this as a placeholder, so that I can create the actual image I want in Photoshop. If you use a transparent PNG then the QR code will fit around the image nicely. You can shift the position of the image around, and you’ll see at the top of the QR code can be read or not.

Once I’ve saved off the QR code that’s been generated, I take it into Photoshop. I take out the placeholder image I added and add my own in. I want a pixelated style, but you can stick whatever you like in there!

So this is my first attempt at a custom QR code, it’s a pixelated version of a logo. I could have just stuck the real logo in there, but I was trying to replicate the style of the BBC QR code.

Top Tip: Obviously if you’re using your QR codes on screen you’ll want them nice and crisp. So when you save for web, make sure you change the ‘Quality’ setting from ‘Bicubic’ to ‘Nearest Neighbour’. You might have to do a quick calculation to get everything looking square.

Just for fun, here’s a slightly more elaborate example, with a Chunk monster in there! Again, it’s pixelated but you can put anything of any shape in a QR code. As long as there’s enough code to be scanned then you’re fine.

I’m no designer, so these aren’t works of art, but they do show that practically anyone can spice up their QR codes with no trouble at all!

The reason I switched was after leaving my Mac with Apple to be fixed and then having to give them my password because I forgot to take it off, but I wish I’d have done it years ago. How many times have you registered on a site and got an email confirming your password or when you’ve forgotten it they just send it to you? I’m shuddering at the thought of them storing my password in plain text for anyone to see or steal.

I’m sure a great many of us are guilty of doing it. I’ve worked on content management systems which allow the admins to see people’s passwords, passwords that they obviously use everywhere. It’s criminal! Whenever I build a content management system, or any system that stores passwords, I make sure I hash and salt them. Users have to reset rather than be sent their new password, but it makes it harder for hackers to get hold of users’s passwords.

Most people probably aren’t aware of how websites are storing their passwords, or even why it matters. Even with high profile hacks like those on Sony’s PlayStation Network, people are still using one password across all of their accounts, usually with the same email address or username. Why? Because it’s easy. Who can be bother remembering umpteen passwords when you can just use one?

This is what hackers pray on. They have your username or email and your password, which they can then try on all the usual sites. They could access your email, your Facebook, Twitter, etc. From there who knows where they could go, or what they could get into. You might as well kiss your identity and your bank account goodbye! You could very easily blame the website storing your data if it falls into the wrong hands, but if you’re only using one password for everything you’re really not doing yourself any favours, especially when there are services like LastPass and 1Password making it easier than ever to use secure passwords.

Unfortunately, we don’t have much control over how the websites we use store our passwords. What we do have control over though, are the passwords we give them. How secure are your passwords?

The image above is a comparison of the PSD (top) and the HTML (bottom). The only images I used are the thumbnails. All of the corners, shadows, bevels and borders are done in CSS. I could have very easily accomplished all of this with a couple of images, but I wanted to see how faithfully I could recreate the design without them.

It was a really nice experiment and I learned a few things that are obvious when you think about them, but not things you might think about! Pseudo-elements can’t be modified by JavaScript, as they’re not part of the DOM and CSS gradients are background images, so if you set background as a gradient and then set background-image to none, your gradient will disappear. A couple of “duh!” moments there!

I did use jQuery to set some background images, which I could have done using hardcoded styles, but you would never want to have a style for each gallery image. If users have JavaScript turned off, it degrades nicely enough and still works, although doesn’t look as nice.

You can view the demo or get the source from my Bitbucket repository. As it’s just an experiment of what can be done in CSS3 I’ve only tested and got it working in the latest versions of Internet Explorer, Firefox, Chrome, Safari and Opera. The gallery isn’t actually functional, in terms of loading in images when clicking on thumbnails either.

If anyone has any suggestions or questions then please feel fee to drop me a comment! :D

I’m starting with the most recent freebie which is an image gallery design.I’m also getting started with Mercurial, so I’m hosting this little test on Bitbucket. I’ve done my first commit, and got it to a stage where I have the thumbnail grid done, complete with rollovers. Everything except the actual thumbnail image is CSS.

My next step is to get the main image in, and then start making it compatible with more browsers than just Mozilla and Webkit. I’m quite pleased with it (and myself!) so far though, and it’s been good to see how far I can push CSS3 into doing what I want.

You can download the source, and do lots of Mercuial type stuff over at the Bitbucket repository, or you can view the demo.

I’m not a fan of the way Subversion keeps track of changes, using the hidden directories in every directory you have. I’d much rather have it all in one place so that I don’t have to export everything, or worry when copying or moving folders.

Subversion doesn’t handle merges very well at all, and as a result I don’t create branches very often because I can’t be arsed with the headache I’m going to have later trying to merge it all back together.

Sometimes I’m not connected to the internet, and my repositories which are hosted on my domain, or at work can’t be accessed. This effectively means I can’t commit, which kinda leaves me stumped. :/

OK, so those are my main issues with Subversion, and it seems I’m not alone! I’m definitely moving towards a Distributed Version Control System for future projects. The problem I’m having is getting over the distributed part, there’s no master copy! I’m a bit of a control freak, so I like to know that there is one copy that’s right.

What I need to do is change the way I think about the process. In Subversion committing is like publishing, people can then see and check-out your changes. With DVCS you can have you own private copy of the repository and then you can merge in your changes to the ‘master’ one later. Because the repository is on your machine, you don’t need to be connected to the network or internet to do it.

I’m looking at the two big boys of DVCS: Git and Mercurial. Obviously I need to have an in-depth look at the pros and cons, and then a play with each before I decide. I’ll keep you posted!

It’s actually amazing what you can do with :before and :after pseudo-elements and a dash of Css3. I could make a really geeky joke about #infinity:after, but I’m not going to. Oh, wait.

Anyway! Check out this great article about CSS shapes.

I started by taking a vector drawing of a butterfly (I simplified it by removing some points) and saving as a SVG so I could easily extract the points. I can then draw the butterfly onto the canvas. To create animation the canvas is redrawn on whatever interval you set, I’ve gone for 20 times a second. To simulate the butterfly’s wings flapping I’ve simply adjusted the horizontal scaling.

To add the butterflies onto the canvas I start by using context.save(), which keeps a record of the current state of the canvas (scale, rotation etc). I can then use context.translate(x,y) to shift the insertion point of the canvas before I add the butterfly, I aslo use context.rotate(r) to move the butterfly around in a circle. I can then use context.restore() to reset the canvas to the state it was in before placing the butterfly.

Obviously a butterfly going round in circles isn’t a great example of animation, but you could quite easily make it go in random directions or along a path with a few changes to the code. In the end I decided not to use canvas animation, as I wanted hundres of butterflies, which ends up killing the browser.

You can view the demo, and look at the source to see how I did it all.