IOS 7

Seems that iOS 7 has had a bit of a mixed review since its launch less than a week ago, but today I came across an issue which will bring your site down for iOS 7 users in certain circumstances.

Select Boxes now ignore onBlur

The site we had the problem with is a car warranty specialist site. During the quote process, we use AJAX and onChange events to load up data directly into select boxes. For example, a user chooses their car make (‘Ford’), which then populates the range field (‘C-Max’,’Cougar’…’StreetKa’,’Tourneo’).

With the previous OS, we had to attach an onChange listener to the select box in order to blur the user’s focus. If we didn’t do this, the user could click the ‘next’ button on their keyword and focus on the range field. The browser would then receive the data, but would be unable to amend the DOM as the select box was being viewed. Essentially what we were doing was preventing the user from using the next button on certain fields.

iOS 7, however, prevents the developer from doing this. Now the select box ignores the blur function, which leaves the user with an empty select box node.

Luckily, this is relatively easy to get around:

Old Code:

1
2
3
4
5
6
// get range data after a manufacturer is selected
$("#make").blur(function(){
getmake();
}).change(function(){
$(this).blur();
});

So, in line 1, we are adding a blur listener to the select box with the id ‘make‘. When ‘make‘ is blurred (ie it loses focus; the user clicks off it, somewhere else on the screen), we run a function called ‘getmake()’. We then chain another listener, an onChange event, to the same select box and tell it to blur whenever the value changes (ie when someone chooses a different option).

Essentially we are saying that if the user clicks the ‘done’ button on their keyboard (which counts as losing focus from our ‘make‘ element), we should run the ‘getmake()‘ function. If the user clicks the ‘next‘ button on their keyboard, it triggers the onChange listener and we then tell the browser to lose focus from the ‘make‘ element. This, in turn, will fire the blur function in line 1.

New Code:

1
2
3
4
5
6
7
8
9
10
 // get range data after a manufacturer is selected
$("#make").blur(function(){
getmake();
}).change(function(){
$(this).blur();
}).focus(function(){
if($(this).children().length==1 && $(this).children().first().attr('value')=='error'){
$(this).blur();
}
});

So now we add an onFocus listener. What this does is check to see if the select element has one child and if so, it checks that the child has a value of ‘error‘. If both conditions are true, it then runs the blur function – ie tells the browser to lose focus.

We then make sure our select boxes have one child (before DOM manipulation), like so:

1
<option value="error">Please wait...</option>

Why does this solution work? 

It seems that Safari in iOS7 will skip the blur listeners if they happen synchronously. So, the next button/link in iOS7 will essentially pause slightly before running the focus, probably to render the blurry soft focus effect. Therefore, our onChange event does still happen, but the browser then runs a focus event a little while after.

By adding a focus listener with conditions, we are restoring the balance of how we want the site to work for the user.

Mixing onChange and alerts freezes Safari in iOS7

But as these things tend to go, once you find one error another soon surfaces and the next one was massive. It elicited this response from one annoyed customer: “Will you tell the clowns who set up the page to fix the frigging the website so I can leave it”.

So what could have gone so badly wrong?

On the same site, we don’t allow customers will older cars purchase a warranty. The customers choose a registration date from two select boxes. If the month and the year values when chosen mean that the car is over 12 years old, we show an alert box and disable the form.

These were triggered by an onChange listener that would run a function called ‘checkcardate‘:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function checkcardate(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
var regyear = $('#regyear').val();
var regmonth = $('#regmonth').val();
if((regyear &lt; year-12)||((regyear == (year-12))&amp;&amp;(regmonth&lt;(month+1))))
{
alert("As your vehicle is over 12 years old we are unable to provide a warranty quote");
window.document.quoteform.action='index.html';
$('#submit').hide();
return false;
} else {
$('#submit').show();
window.document.quoteform.action='';
return true;
}
}

But when customers on iOS 7 chose an option that triggered the listener function, they would get the following screen:

photo

And they could not escape from the screen. All elements in Safari became unresponsive. The only way to exit was to hit the home button, switch to multi tasking and swipe Safari out of the list.

We first tried blurring the browser focus as we did on the first problem, but that proved ineffective. The only solution was to introduce a slight delay in the alert box call.

Instead of <select onChange=”checkcardate()”… we used <select onChange=”ios7checkcardate()”… and created a new function like so:

1
2
3
4
var ios7timer = null;
function ios7checkcardate(){
ios7timer = setTimeout('checkcardate()',500);
}

That half a second delay was enough for Safari to draw whatever it needed to before displaying the alert. Before we introduced this, it looked as though Safari had the user’s focus trapped somewhere on the page, and then set a modal layer on top of everything that required a response. Until the user taps OK on the alert box, the page will remain unresponsive, but as the focus is underneath this layer, the user is trapped forever.

Conclusion

Please check your sites for onChange / onBlur listeners when used in conjunction with alert functions or DOM manipulation.

Apple being Apple, they’re bound to fix this sooner or later, but you don’t want to be picking up emails at 11pm entitled “Your pathetic website” when it has nothing to do with your code and everything to do with Apple’s.

I was wondering how Google indexed The Sun’s content but managed to get through the paywall the other day and thought I’d visit the site as GoogleBot, doubting really that my childish ruse would work.

It seems, however, that The Sun’s paywall really needs a bit of love and attention to stop people circumventing it.

Using default User Agent:

Behind The Paywall

 

 

When using the site as GoogleBot:

paywall-free

How to spoof your User-Agent:

I use chrome, so I just downloaded User-Agent Switcher, selected GoogleBot and then refreshed the page.

Make it go away!

Make it go away!

This post is for anyone who has struggled to get rid of the Mountain Lion Mac software update notification.

All other notification badges have a ‘Cancel’ button, but software update only has ‘More Details’ and ‘Update’.

Sometimes I’ve left that notification sitting on my desktop for weeks. Sounds stupid, right?

Well, yes, it’s pretty stupid and more stupid that I didn’t figure there must be a way around this and today I found out by accident how to get rid of the message.

The Solution

Just drag it to the right – off screen – and it disappears.

Now I feel like a chump, but if you’re reading this page, you’re likely to have been pulling your hair out over the same thing.

I’m posting this merely as an aide memoire to myself and also in case it helps anyone tearing their hair out regarding a reCaptcha form that was refusing to pass variables over.

I had a form on an old site using tables. On one page the recaptcha form worked well. On another, the reCaptcha was failing due to invalid-request-cookie. On further investigation, it turns out that reCaptcha form wasn’t passing any form variables to the next page, even though the rendered HTML on the page had the form input fields in the correct place.

To cut a long story short (too late), I noticed that the form declaration was inside a table  – ie <table><form name=”form-with-recaptcha-in-it”…..</form></table> which isn’t valid HTML.

Swapping the form to be positioned outside the table worked first time.

A match made in heaven? Or 7th circle of hell?

A match made in heaven? Or 7th circle of hell?

 

iTunes match doesn’t seem to be working on iOS6 for a lot of people.

Every device of mine was fine until iOS6 and the iPhone5. When I went to play a song, the phone waited for a second or so, and then went crazy. It skipped to the next song and the next song and the one after that. Looking at it in the iTunes app, it was attempting to download each song for ¼ of a second and then going on to the next.

Even if I turned my phone to another app and had the music on pause, it would skim through until it found one in my downloads. We often got to #538.

I went to the apple site and got the usual unhelpful gubbins.

I tried the turning it off and on, disabling network data, resetting music device, resetting settings, resetting phone, but it wasn’t coming back.

Finally, I was on iTunes proper on my mac buying a song when it appeared that iTunes Ts&Cs had changed, meaning that I couldn’t buy.

Once I had updated my Ts&Cs iTunes Match was back on my iPhone. Problem solved.

It strikes me as pretty poor that Apple doesn’t give a correct error screen when on the music app or the iTunes app when using iTunes Match. It’s up to you to work out the problem yourselves.

Why are Apple making developing websites with Safari a pain? It used to be my favourite tool, but recent changes in Mountain Lion will make Safari my least-favoured browser.

No RSS

You can see the argument for deprecating RSS feeds. They’re a bit like cassette tapes: cherished by a dwindling minority and ignored by the majority. But here’s where Apple have made a totally inexplicable decision: When you load up an RSS feed, the page refuses to show you a damn thing.

No RSS feed for you, sucker

OK, but you’re going to show me the XML, right?

No. Safari has received the XML, interpreted it as RSS, then decided not to show you anything. No view source code or view source XML, nothing.

Who at Apple took this decision? Why did they think that developers would not like to be able to see the XML that they’ve created? What kind of madness is this?

View Source is no longer that

This one blew me away just now. Absolutely shocked me to the core. When I view source now, it’s not the source of the loaded page at all, but the source of the rendered DOM, once all JS has been executed.

If I had wanted sautéed potatoes, I would have ordered sautéed potatoes. I ordered fries, so give me my goddam fries.

I want to see the code of my pages before the DOM gets manipulated, then use web inspector to check that the JavaScript has done its job properly.

Safari was the only browser doing view source properly before now and now they’ve killed it. Firefox and Chrome used to load in the source as a separate request, which didn’t work either.

Activity Monitor

Out and out the most used feature on Safari by me was the activity monitor.

What element on the page is holding up page load? Find out with activity monitor.
How many calls are my adserving partner making? Find out with activity monitor.
Is that an official Twitter feed? Find out with activity monitor.
What’s the filesize of that image? Find out with activity monitor.
How many different  hosts does this page? Find out with activity monitor.
How many elements are on this page? Find out with activity monitor.
Of these, how many come from 3rd parties? Find out with activity monitor.

I could go on, but you see where I’m coming from.

Why does Apple see fit to remove these things and not give you an inkling as to where the information now resides?

iCloud Tabs

This was awesome. See what tabs your other devices have open. Great, let me have a look.

But wait, what? Although the tab sits on Safari now, the iOS devices won’t be able to fill this space until iOS6 comes out in 2 months time?

THEN WHY PUT IT IN NOW?

Conclusion

To most users, the Safari 6.0 will be great – faster browsing, tab view, err, Chinese stuff – but for developers Safari sucks big time. Hopefully this is just Apple’s customary slap on the wrists for early adopters and this will get fixed, but then again it could be a symptom of the direction of Apple in the future..

Ev Williams and Biz Stone launched Branch this week and as you might expect, not much attention has been paid to older browsers, but exactly how little is a surprise to me.

Last year I took a look at how the shop window of the web was changing so that not every user gets the same experience. Specifically, we were seeing a lot of sites not giving flourish and flair to users on older browsers: things such as rounded corners, drop shadow and so on.

So it is interesting to see the founders of Twitter launching a site that doesn’t cater for IE6, IE7 or IE8. At all.

Branch in IE6 & IE7

Branch in IE6 & IE7

As you can see, IE6 almost looks better than IE7, and IE8 was a black screen for me (although this could be teething problems). Viewing with IE9 shows the full site, with a warning for the user to upgrade their browser.

It’s an interesting move by Branch, but not one I would emulate for my projects. I suspect this is more down to intended audiences: Branch wants to make the site look yummy and interesting for people who work in the tech industry, in the media, and probably not people who work in accounts departments of biscuit factories (who else uses IE6?…).

UPDATE

One of the developers at Branch has been kind enough to point out that it’s not quite as audacious a move as I had thought. Looks like Adobe Browser couldn’t fetch all 3 CSS files, leading to the completely borked screenshot.

He sent this one and I have taken another shot from BrowserLab below:

Still a little borked

Every now and again, you come across an unGoogleable problem. This particular one drove me nuts…

Thought you had problem with forks? Yowzers

Thought you had problem with forks? Yowzers

The Problem

I have a new SVN project on an Ubuntu box. I copy files from my Mac desktop to this project via AFP (dragging and dropping with the Ubuntu box mounted as a /Volume) and clean up any resource fork files (those beginning with ._ ) that I can see (I use TinkerTool for this)

Problem is, that I then drag across tiny_mce which has hundreds of the buggers nested deep within the file structure.

But I didn’t notice, and clicked the ‘Add’ button to the parent directories in Versions and then commit.

After the commit, I get a few error messages, including things like:

 Can’t open file ‘/Path/To/MyDirectory/app/Plugin/Admin/Model/.svn/tmp/text-base/._AdminAppModel.php.svn-base’: No such file or directory

And now, I’m stuck. I can’t commit files, update anything, nothing works. So I try to checkout a new version to a different directory on the same Ubuntu box and get an error telling me I can’t.

The cause

So, I root around a little and work out that the repository has a copy of the resource fork files. All of them. The problem is that Versions hasn’t created a text-base version in the .svn directories. Any of them. But it has passed on the actual files and their contents, which leaves you in a right pickle.

The solution

I created a new project, exported my old content there, recreating where necessary and then (this is the important bit), I ran this command in Terminal

dot_clean -m /Volumes/path/to/my/new/working/copy/

Which recursively deletes all resource fork files – the -m deletes the files, rather than merge them. As I don’t need the files, I want them gone, but you may want them, so please read the dot_clean man page if you plan to do this.

Then, I add the files in Versions and commit – job’s a good’un

A better solution

A better solution would be for Versions to support resource files properly – either add the files to the repo and the text-base or don’t add them to either, don’t do one and not the other – madness.

Or, if you only have a few resource fork files that have borked up your SVN project, you may want to use a different SVN GUI app, or command line, and delete (SVN delete, not Mac delete) the files, then return to Versions after this

It’s been over a year since Apple announced that they were going to kill off MobileMe galleries but I think I have just found a decent replacement.

Zing Zang is a completely free alternative to MobileMe that doesn’t clog up your hard drive, as DropBox would, and that has no ads whatsoever. The interface uses a lot of AJAX. It’s slick and user friendly. It can connect to your old MobileMe galleries and download all the content for you, creating new ZingZang galleries.

Initially each user receives 2Gb of space, which can be bumped up to 10Gb if you get friends to join on your unique link – mine is http://zan.gy/MvuZ08 – you get 250Mb for each friend that signs up.

From next month, ZingZang is going to charge for extra storage up to a maximum of 108Gb for $20 a month.

 UPDATE

A little while after this post, ZangZing closed their site for business. There has been no official word as to why this was, but my guess is one of the following:

  1. The demand for mobileMe replacement didn’t hit expectations
  2. The demand for mobileMe replacement exceeded expectations and they ran out of money too quickly
  3. ZangZing heard about a big app killer (Apple or Google spring to mind) that would make their offering unprofitable
Sad to see ZangZing go. It was a really slick UI, underpinned by seemingly quick backend. Shame.
For now, I’ve plumped for ThisLife, which, although not quite as slick as ZZ, is pretty and relatively feature rich. They limit free accounts to 1,000 images, which seems a bit odd, and the starter account (20,000 images) is almost $80 p.a., which is more than mobileMe was.

 

There’s a saying that even in a recession, the undertaker’s is the only business that is unaffected. It seems that in a digital age, this applies also to domain name vultures.

As a rule of thumb, domain names are leased for fixed length periods from a registry such as Nominet or ICANN. The domain name ‘owner’ will generally do this through a third party, such as Go Daddy. When the fixed term is up, they chose to renew the domain name, or they let it slide. If they choose to let the domain name go it is then released on the open market again.

Companies exist whose sole business model is to pick up lapsed domain names and then sell them on to either the same punter or different ones. A bit like a digital rag and bone man.

One such example was my father-in-law, who mistakenly let his domain go – chalidze.com – and it was picked up by some such company who have now held onto it for 3 years. There can’t be many people who want this domain name (it’s his surname. Georgian surname), and it has cost this company somewhere in the region of £50 to renew it for 3 years. More fool them, I thought. And then it happened to me…

I have a site that helps you keep track of your finances with graphs and so on called Pimp My Statement. Now when I first set the site up, I bought both the .com and the .co.uk TLDs. But this being a recession and the site not performing that well, I decided to keep the .co.uk and dump the .com.

A few days after the expiry I received this:

Hi,

I’m currently considering selling the domain name pimpmystatement.com. As you own a very similar domain I was wondering whether you’d like to submit a bid or offer for pimpmystatement.com. (Price range $2500 to $5000)

Warm regards,

Martha

And it was early in the morning. And I hadn’t had a cup of tea yet. And this made me grumpy, so…

don’t be so silly

I owned the domain pimpmystatment.com until the 18th March this year, when I decided it wasn’t worth the $19 fee.

You then picked it up for $19 and now, a few days later, you are only ‘considering’ selling it? Pull the other one. This schtick may work, and evidently keeps your business afloat, but the domain name isn’t worth $5 to me, let alone $5,000.

Good luck with selling it to some schmuck, but I think you’ve just wasted your $19

Good day

TC

Result? That person relinquished the domain name a day after I sent this email. Could be a good tactic for getting your domain name back from the vultures

top