Firstly a bit of background, the company I am working for at the moment recently released a real-time CSS editor (of sorts) which I built that allows customers to style their sites using nothing more than uploaded images and some UI controls – for more details on that you can see a video of it in action on this blog post and some of the amazing results that customers have been able to achieve with it.

Yesterday one customer reported an issue where a large background image (1800×2520) was being shrunk on the iPhone. I did quite a lot of investigation and to cut a long-ish story short I discovered that there is a tipping point where the total pixel-area of an image causes mobile Safari to resize the image. This tipping point appears to be at 2,000,001 pixels.

Read on for a bit more of a breakdown of my experiment results.

To debug this issue I looked at the pixel size of some of our larger background images that were working fine on the iPhone and then tried various sizes to see what the results were. My experiments are shown in the table below (in the order I performed them).

There were further tests in between but I won’t list them all for your sanity but my tests seems to say that it didn’t matter on the width or the height of the image just the total pixel area. E.g. a very wide image < 2,000,001 works just as a very high image does. At 2,000,001 pixels or larger they get shrunk. Note I didn't get it right down to 2,000,001 pixels and this is just an educated guess that it is the actual tipping point.

I’m going to submit this as a bug to Apple I’m not sure what is causing this but another guess of mine is that 2,000,000 is the maximum area that the renderer will handle/cache (you can see this in effect when you scroll around on mobile Safari how it re-draws the page) and so is getting enforced on the background image some how.

Update: 22nd Feb 2010
It seems I should have RTFMed. Apple got back to me with regards to the bug and pointed me at the Known iPhone OS Resource Limits in the Safari Web Content Guide which says:

• The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels.

  That is, ensure that width * height ≤ 3 * 1024 * 1024. Note that the decoded size is far larger than the encoded size of an image.

• The maximum decoded image size for JPEG is 32 megapixels using subsampling.

  JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.

Emphasis added.

If Microsoft Insist On Making It Nigh-on Impossible For Us To Test IE Effectively Then Why Do They Think We Should Bother Supporting It?

But I decided that was a bit too long, so I took inspiration from the soup kitchen chef instead, it’s more to the point.

Anyway the reason I’m back writing about adventures in IE testing land is I have a week of some horrid IE browser testing of my current, JavaScript heavy, project coming up if the first quick check through all versions of IE is anything to go by. Yes I know I should have been testing as I went along, but having to refresh 9 browsers with every change really kills my buzz (especially when 3 of those are IE).

So I did some initial browser testing last week and got zero issues in 6 browsers, but each version of IE threw up massive amounts of JavaScript errors — absolutely all over the place — and we all know how annoying debugging JS is in IE. This combined with my aging (and decidedly creaky) Windows XP Virtual Machine (running in Parallels on a Mac Pro with more than enough grunt to run multiple VM’s all at once) meant that tonight I decided to look for new alternatives (as multiple versions of IE on a single VM have never been great anyway).

So single VM images (as light and quick as possible) was my plan and I started to do some research, and found the following:

• Microsoft handily supply a bevvy of Internet Explorer Application Compatibility VPC Image’s exactly for this situation. Score 1 Microsoft!
• These are Virtual PC images, which is only available for Windows… but I found these instructions for converting them to run with either VMWare Fusion or VirtualBox. Score 1 Mac and the sweet, sweet people on the Internet

So I’m all set right? The steps aren’t that difficult and I choose to try VirtualBox as

1. I’ve tried VMWare Fusion before and wasn’t that keen.
2. I know that VMWare won’t run at the same time as parallels. A big minus there.
3. I’ve wanted to try VirtualBox for a while.

I do a few downloads, the conversion stuff and within the hour I have VirtualBox booting the image. It boots quickly and it’s nippy, I assume they’ve stripped Windows down to the bare bones with just enough to run IE properly – which is what I was going to try and do anyway. Windows says something about having to re-activate so I try, that fails but says I have 3 days so I figure that has to be due to the last step I haven’t completed, which I then do and reboot. Only to get the following:

1. WGA prompt
2. Follow instructions
3. Fail
4. Repeat steps 1 to 3 a couple more times
5. Search Google and find out that they’ve gone and restricted it to running in Virtual PC only. Microsoft FAIL. It’s in the EULA so I should have noticed it… Like I’m going to read every EULA put in front of my face.

Peter L who is the “Product Manager, Internet Explorer, Developer Division” has the following month and a half old update:

I’ve spent some time investigating this issue, and now understand that the VPC images used to work on other hosting environments, but with the latest release, don’t any more. We have a better understanding of the issue now, and while we’re looking for a solution, we don’t have one right now. If you’re using the VPC’s, and they don’t work any more, I encourage you to email me, with your name, how you’re using them and the hosting environment that you’re using.

I’ll drop him an email but I don’t expect to get a resolution any time soon.

So a couple of hours of work and I’m back to square one, the only positive thing I can take from this is VirtualBox seems quite fast and neither it nor Parallels have complained about the other. So I might try converting my Dev VM’s and setting up a new Multi-IE Windows VM on there.

But the big thing I take from this is that Microsoft don’t want you to play with them if you don’t own a Microsoft football. I quite honestly would be quite happy to do that, to never have to open IE again would suit me fine.

Unfortunately that would also mean commercial suicide for a web developer who works on public facing sites.

However it is still going strong and a couple of things prompted me to release this update to bring it to v1.2.1.

The first thing was Tom Hirashima (sorry Tom, wasn’t sure if you have a site you want me to link to) sent me an email last week with an update to the code to allow it to work with the latest versions of Prototype & script.aculo.us out of the box (1.6.1.0 & 1.8.2 respectively). Although the last time I tried the cropper with the latest versions of them both it worked fine, you just had to change the bundles that script.aculo.us included, Tom has made some further changes. This is a good thing as for the past couple of years I’ve pretty much been out of the prototype & script.aculo.us loop having moved to MooTools and now jQuery (which I hated at first, but that’s another story).

The second thing was that the cropper was mentioned (and my how old does this site design look to me now) in the latest (and as usual excellent) Railscast, Cropping Images.

As a part of integrating Tom’s changes I decided to tackle a load of bugs from the bug list to try and reduce the list so I can keep on top of it better going forward (a long list of open bugs is never conducive to getting any of them fixed).

Here’s a full list of the changes:

• Added support for latest versions of Prototype & script.aculo.us (1.6.1.0 & 1.8.2 respectively). Changes provided by Tom Hirashima.
• No-longer package prototype & script.aculo.us with the release
• Changed tests to use google ajax libraries API to load prototype & script.aculo.us
• Added option to not auto include the cropper CSS file
• #00008 – Fixed bug: Dynamic include of cropper CSS expected cropper.js and failed when using cropper.uncompressed.js
• #00028 – Fixed bug: Doesn’t work with latest script.aculo.us – Fix by Tom Hirashima
• #00030 – Fixed bug: Doesn’t work in Firefox 3.5 (CSS include issue)
• #00007 – Fixed bug: onEndCrop isn’t called when moving with keys
• #00011 – Fixed bug: The image that is to be cropped does not show in IE6.0 — included CSS fix
• Tidied up source code & fixed issues that jslint found so it will compress better

Finally as usual, please use the bug reporting link or discussion list mentioned on JavaScript Image Cropper UI code page rather than leaving comments to report bugs.

Head over to the JavaScript Image Cropper UI code page for download and documentation.

Advertisement: JavaScript Image Cropper UI Download my feature-rich JavaScript Image Cropper.

The elevator pitch for Where to Start With goes like this:

Where to Start With helps you when you’re trying out new bands and artists by providing community-powered recommendations written by die hard fans.

If that new band you want to try has 10 CD’s out, then Where to Start With will give you… well, where to start with them!

The whole idea behind this site came from a need me and my friend found ourselves having; many times we would hear a song or read about a band that sounded interesting but then when we did go to try that band we would find they had a handful of releases out already. Where is the best place to start with them? Traditionally unless you got a specific recommendation for an album you would just try the lucky dip approach and hope you found a winner. If you got lucky you might have just found your new favourite band, however if you picked a rotten egg you may dismiss your potential new favourite band based on your opinion of one of their poorer releases.

A personal example was when I was recommended to listen to Porcupine Tree and given one song to try. That song was awesome, however Porcupine Tree have a massive back-catalogue (9 albums, 6 live/compilation albums and 4 EPs) and from trying a few releases out I found that they are very diverse and I still haven’t managed to get into them, although from that initial song I really wish I could. What I really needed was a guide to tell me where to actually start with Porcupine Tree, for example something that said "for starting out with Porcupine Tree what you really need to buy first is their album X".

This is how Where to Start With was born and also basically how it works — each band or artist will have an article about them which gives a short history/description of the band and each of their main releases (e.g. Albums & E.P.’s) with a little description. Any user can add these articles and each article is in the wiki-style, e.g. anyone can edit the descriptions to add new information and fix mistakes etc.

The real core of the site comes into play when people start adding their opinions on artists, once again anyone can do this, but it is better for people who are currently fans of the artist to add their opinion. Each opinion includes a rating, a recommendation (more on those later) and a personal comment on each of the albums for the artist. We then take these opinions and produce an article that gives you recommendations on where to start with the artist, what to try after that and even sometimes what to avoid.

What makes this different to other sites?

Well, whereas other sites, software and services may give you reviews, the most popular or most listened to albums those may not necessarily be the best releases to start off with a new artist.

For instance Reefs debut album "Replenish" is absolutely amazing and one of my all time favourite albums, however pretty much anyone interested in starting with Reef would be best advised to start with their second album "Glow", which is much more accessible in general. Another clear example would be Nirvana, I personally hardly ever listen to Nirvana’s "Nevermind" album any more (as I know all of Nirvana’s albums inside and out, every cough and guitar string noise included) and I would rate "In Utero" as my favourite album however "Nevermind" obviously would be the album I would recommend anyone new to Nirvana should start out with.

But going further than that after you have tried the "essential" release Where to Start With helps you with which release to follow the essential release with, a wildcard album and even sometimes what to avoid – these can be really difficult to determine from the other methods.

About the recommendations.

Each Where to Start With article can have the following recommendations for each release to help guide you:

• Essential: The the first release to try, the best introduction to the artist.
• Follow with: The next release to try after the essential release.
• Also recommended: Another good release to try.
• Wildcard: A release that may not be "the norm" for the artist but still could be interesting. If you try the essential release and weren’t so keen this should be different enough to be worth a try.
• Avoid: Yes, some users will also tell you what to avoid.

The votes of each person on each release are added up to ensure that each article has one of each of the above recommendations (where applicable) and the more opinions that are added the better the recommendations become. You also have access to personal comments of each person who gave their opinion to give you a better insight into why they voted how they voted. And finally, just in case there is a close call between releases you can also see the breakdown of the votes for each release.

Sounds great, how do I get started?

Well we’re currently in private beta and have been running with a small handful of users for the past couple of weeks but are accepting applications to the beta and adding new users on a daily basis. The reason we’re currently in private beta is to ensure that the platform is solid and discover any issues, we’re not sure how long this will take but we obviously want to be out of beta as soon as possible. We also have setup a dedicated blog for Where to Start With which you can follow if you want to be kept up to date with progress of the beta and other new things (as we’re not finished adding features yet).

It’s working for me already!

Even with the small handful of users in the initial phase of the private beta I’ve already found one new band who I would have probably a) never heard of and b) not known where to start with without the site. There is more on this in the post It’s working for us on our blog.

So give it a whirl, and do get in touch to give us your thoughts etc.

While that is working perfectly adequately for my current setup it does have one downside, when I setup a new server I will have to setup the crontab file too. With this method when I deploy my app my scheduled tasks would get deployed and be running out of the box. Nice.

I also tried on different browsers and get the same issues – is anyone else getting this? Either way it’s a little disconcerting that a bug like this can find its way into Google, but also in its own way a little reassuring that everyone has bugs.

Update: Yep it appears to be everywhere, this TechCrunch story covers it.

Update: The BBC have a bit more detail, seems an import of data from Stopbadware.org flagged everything as dangerous – do you think someone updated the query recently and missed out the WHERE id = [id] part, I know I’ve done that on in dev more than once. :)

The solution we came up with was not too dissimilar to the one discussed in this months A List Apart article Progressive Enhancement with CSS and that article is well worth a read. But I also thought I’d write a little about the setup that we came up with and how it worked out for us.

The basic setup was as follows:

• Split the styles into their three components of the CSS make-up: layout, typography, skin (with the skin file containing the colour and graphics). As this kept things nicely compartmentalised and meant that we could re-use some styles from one site (e.g. the layout generally was the same for most content across all the sites) while applying extra changes specific to that site.
• The stylesheets were organised into directories based on the section (or sometimes specific page) of the application. So for example home/layout.css, home/skin.css, news/layout.css and news/skin.css etc.
• We could then also import specific stylesheets for each of our sites on top of these (both at a global and section level) which usually just overrode a few style declarations to keep these site-specific style rules to a minimum.
• All of this was managed server side using a configuration schema which knew where to look for the stylesheets for a given section of the application (as well as the global ones) and include them as appropriate for the given site.

We also had common comment styling for breaking the larger stylesheets into sections (which makes it easier to find things) and tried to alphabetise our properties within each style rule (although it’s not something that I personally could always stick to).

This was quite a good system, it may have looked complex based on the number of stylesheets that were imported for any given page but it worked out really well and we never really had any problems with our CSS system.

I’ve even used it on a few of my own larger side projects with minor tweaking to the system (e.g. dropping the configuration schema and following a Rails-like "Convention over Configuration" setup), and as I say it is very similar to the one described in the A List Apart article Progressive Enhancement with CSS — that has a really good idea for handling the different media types, which we handled via our schema.

It’s quite a nice idea and really well executed. What I really liked is the fact that they’ve obviously spent a little time designing this thing (both from a UI and functionality point of view). It’s really quite refreshing to see something like this appear in an era when most simple ideas I see like this end up running on a blog or a wiki platform.

So if you’ve got an iPhone head over there and vote, if you haven’t head over and take a look at the design.

M: I was thinking about the event.setArg() method, and thought it would be nice if you could have it set the variable to session or cookies within the same call, e.g. event.setArg(‘name’,'value’,true,true), what do you think?

Me: I see what you’re thinking, but I don’t like it. I think that your code should be clear to you and others what it is doing and those true arguments don’t give you much insight into what they’re doing.

You’ve got to think about someone else coming to maintain your code, would they be able to see what it was doing without digging through to find the definition of event.setArg()?

Also how many times will you use it, and if not many, will you have to check the definition yourself to remind you which one is setting the cookie and which the session next time you see it?

So in the end I proposed 3 methods, the original setArg() method and two for setting cookie values & session values, basically a couple of cookie and session façades, and I think that’s what he went for in the end.

In my view the few times you’d want to set the same value to cookie and or session is very rare and the following example shows the worst case scenario where you want the value in all 3 places:

event.setArg( ‘myArg’, myVal );
cookie.set( ‘myArg’, myVal );
session.set( ‘myArg’, myVal );

It’s not the driest piece of code, but in my opinion much better than being presented with event.setArg(‘myArg’, myVal, false, true).

So that brings me to the title of this post, “Coding Clarity Over Cleverness”, the example with the extra façades for the session & cookie can’t really be any clearer in my opinion, it’s not the cleverest or driest solution but as far as readability and future maintenance in my opinion it’s much better. Presented with that code you probably wouldn’t even dig into the documentation or code to see what cookie.set() and session.set() are doing as it’s pretty clear.

The clarity over cleverness argument goes for any coding situation, you might hide some really clever code behind a method or function, but it’s name and signature should clearly show what it’s doing.

So the next time you come up with a clever solution, ask yourself if it’s clear what the code is doing if not then re-factor it so that it is.