If you are using @font-face for your main site, and for your iframe, then you may find that the font-face is removed and replaced with arial or helvetica when the iframe is removed from the page. This is a common effect of modal iframe lightbox systems, like shadowbox or thickbox.

My assumption is that the iframe is ’stealing’ the font-face EOT file, and killing references to it when the iframe is removed. This affects the main page.

In tests, I’ve found that this effect depends on both the cache and the element with focus when the iframe is removed. This dependance (especially on the cache) makes this effect quite hard to reliably reproduce.

Interestingly, the effect does not cause a repaint of the page. You need to scroll or move a window over the top to cause a repaint, revealing the unstyled text. Note also that it is the font rendering that has changed, but not the letter positioning – causing our ‘unstyled’ font to look even worse than plain text.

As promised, a demo:
You’ll need IE8. You want this page to be cached (try refresh, but not ctrl-refresh, with cache status as automatic). Note that the ‘kill frame’ link below does not return false.

Click this link to kill the iframe.
Now resize the window to try and trigger a repaint.
(This effect is quite unreliable, so you may need to refresh and kill a few times to see it happen. If you just can’t Click here for a screenshot)

My workaround solution is to reload the main page stylesheet after the box is closed.
Hardly pretty, but it should work. I’ll leave it to the hardcore CSS/JS fraternity to try and reload the font-face lines themselves.

Add an ID to your stylesheet tag:

<link id="main-css" rel="stylesheet" type="text/css" href="/css/styles.css" />

Then, after your box closes, reload it:

document.getElementById('main-css').href=document.getElementById('main-css').href;
//or in jQuery
$('#main-css')[0].href=$('#main-css')[0].href;

Additional:
Make sure your iframe doctype matches the container. It’s possible that if they don’t match, then only one will show the fonts.

One day, his watch breaks and starts running fast. It takes twice as long, according to the watch. Completing the same distance took twenty minutes. He buys a new watch.

The following week, some wanker at the council moves his tube station 400 yards further away. According to his new watch, the journey again takes twice as long as usual: twenty minutes. The man blames cheap foreign imports, and buys a new watch.

I have a grid in three dimensions. It’s held together with wires, will balls at the joints. Each wire is 10cm long.

The next day, I measure my grid with a ruler. Each wire is now 20cms long. But none of the balls look any further apart. I buy a new ruler.

I throw away my grid and buy a new one. It’s bigger.

A lot bigger.

My grid has balls one light-year apart. Each ball is held in a rigid cubic system as before. My grid extends to infinity in all six directions: up, down, to the left, to the right, in front, and behind. Infinitely.

I know what you’re thinking: “You must have huge balls”. But I don’t like to brag.

I measure the distance along the wires between the balls, not with a ruler, but with light and a stopwatch. A ball sends out light, and I time exactly one year before the light reaches the next ball. That’s one light-year.

All over the grid, it always takes one year for light to reach the next ball.

The next day, a fine summer’s day in 1665, Newton invents gravity. This does not go unnoticed.

Each one of my balls has a large mass, and so a strong gravitational pull. Each ball attracts every other ball around it, not just the nearest, but all of them. It’s quite a shock to my grid, but my grid still hangs together. I rush out and measure my wires again. To my relief, each wire, measured by pulses of light, is exactly one light-year long.

All is well and good, and my grid holds steady. Of course, it does not collapse in on itself, because it extends infinitely in every direction. As each ball pulls those around it, they are equally pulled away by those more distant. Each ball has an equal pull on its left and its right.

For 250-odd years, my grid hangs together, perfectly happily. Occasionally I step outside to admire my balls (steady), by the light of the moon.

In 1915, some bloke called Einstein completes his General Theory of Relativity. In it, he invents several fundamental principles. Mass-energy equivalence, for example, as shown by the famous equation e=mc^2. Woo.
Something else he does is change gravitational theory. Newton is now proved wrong, for gravity is not a force, it is a distortion of space and time caused by masses.

I have to admit, this funny-looking bloke has me scared. I rush out to check on my beautiful, infinite, gleaming grid and see whether it has been affected. And I find some disturbing results.

Near each of my massive balls (by which I mean, my balls with mass), there are some weird effects happening. Close to the surface of each mass, I find that time is running more slowly.

I dig out my trusty stopwatch and wait for the light. A ball emits light, and the light travels more slowly than usual near the ball. Further from the ball it picks up speed as it moves along the wire away from the ball, but then slows again as it gets near the other ball. In total, my stopwatch shows that two years have passed.

Shit. The bastard’s only gone and ruined my grid. I go back inside to sit down and have a calming cup of tea.

Edwin Hubble catches my attention in 1929. He’s spent ten years looking closely at my grid, and he’s found something more peculiar still. He watches as many balls as he can, from the one ball he’s sat on. He’s been looking at the light beams all over my grid and he’s worked out that my grid is expanding.

I’m incredulous. “Where would it expand to?” I ask, “It’s infinite, FFS.” But the arrogant fool is insistent. Look at the evidence, he says.

The distances, as measured by light, between each ball, are getting further apart. Ipso facto, the grid is getting bigger. I have a quick check, and he’s right. A beam of light now takes 3 years to get from one ball to another.

But if I’m honest, those balls look a bit smaller. They’ve taken some of the mass that was hanging between the balls, and they’ve pulled it in. They’ve squeezed themslves together. Effectively, they’ve become bigger and denser masses, I wasn’t expecting that. With tighter, more compact masses, the light travel time is more affected by the gravity, and so it takes longer to get between the balls.

But my grid is still the same size. Or is it?

Did my watch break, or did someone move the tube station?

The script requires you to set a variable in your jsonp response. The script checks whether that variable is true after the jsonp loads. If true, your json has loaded. If not, something has gone wrong.

So, if your jsonp looks like this:
callback({blah:”blah”});
You’ll need to revise it to this:
callback({blah:”blah”});ScriptCommunicator.callback_called = true;

On the jQuery forums, John Resig said he isn’t enamoured with this approach since it means adapting the jsonp response, and if you’re using jsonp then you’re probably not in control of the feed. It’s a fair point, but you could simply add the callback_called variable into the callback function instead.

Plus, if you’re running Comet long-polling, it’s better to use a different domain for your comet feed, to prevent tying up threads in the browser. So jsonp is needed.

The “difficult” part of the process is knowing when to run the second script, that checks the callback_called value. Amix uses a variety of methods for different browsers to achieve this.

In Firefox (default case) -> create two script tags using document.createElement, and attach them to the body.

In IE -> use the onreadystatechange event to call onSuccess, and then detect errors there, based on the readyState (somewhat illogical).

In Safari/Chrome -> write two script tags out with document.writeln. Presumably, this is intended for use with an iframe, though that’s not clear. OOTB, no webkit browsers receive data.

Having tried to hack the script to make the Safari browsers use the same method as Firefox, I’ve found that Safari’s caching kicked in and failed to load new scripts from the server (though this could be my fault for not changing the script name each time).

Looking back at Plurk, the comet scripts are indeed in an iframe, so I think this script probably needs some more input before it’s going to work for anyone else. Hopefully, Amix (or someone) will put together a demo page and make any necessary fixes to the script when making that work.

It’s a very useful function/tool/script. Thanks Amix.

Before the mouse wheel we worried about page folds. Would the naive mums trying Netscape 4 for the first time understand that there was more information there, just out of sight? Jakob Nielsen and his army of acolytes made you employ a usability expert to blow your budget stressing over the issue.

Scrolling is a non-issue now. Vertically, I mean. Horizontal scrolling is right out. It’s a no-go, confined to designers’ CVs to show just how radical and out-of-the-box they can imagine.

Paging is another issue. Frankly it’s a bitch. Why should I wait for a page reload, when I can flicky-scroll? Newspapers do it to make sure you’re seeing enough adverts. Tutorials do it to make sure you’re not overwhelmed by learning more than one thing at once. And we hate it. It sucks.

But now the iPad is on the scene. That changes things a bit.

The iPad has a fixed screen resolution for us. And the screen is sufficiently bigger than the iPod for us to start thinking that columns might be necessary. The New York Times has their application on there. Columns and pages.

Columns are useless without paging. Who wants to read all the way down (scroll, scroll, scroll), then have to go all the way back tot he top to continue reading? Paging and columns go hand-in-hand.

A horizontal scroll is still nasty, but maybe there’s a place for paging now. Not page-reloading. But nice, simple paging. Flicking through a paperback is still the best search function. If the iPad Safari lets us have the nice paging function that other apps use, our web apps will be awesomely integrated*.

So how about it? A spot of new CSS and a old-school page transition, for the new world of iPad.

CSS3 has columns, but no paging. We need both, and we need it soon. It could be the new flicky-scroll.

Until then of course, you can just play with my new js-columns newspaper columns plugin.

* One could argue that in fact Apple intentionally do not encourage web apps, because they’d rather lock developers into their app environment. Why else would the accelerometer still be inaccessible from JavaScript? Why else wouldn’t bookmarks appear in your home screens? Not being cynical. Just saying.

People will buy the iPad instead of a MacBook because the iPad has Applications.

My initial reaction was “how daft”. A laptop running MacOSX, or Windows, has access to billions of application, built through the ages. It’s ridiculous to think that there could be more applications available to a souped-up mobile phone.

But it immediately struck me that he had a point. Shareware died in the land of sophisticated web browsers, and the proliferation of viruses and spamware. Thinking back, they were awful. “Proper” software, like Office or Photoshop is priced beyond the realm of individuals.

Really, I can’t believe that we missed it for so long. What people wanted was a safe, reliable, place where they could spend pocket money on little apps that were beautifully built. They found it in the App store. And you know what? I think Apple underestimated it too. Otherwise there would be an App Store for MacBooks.

• So there’s a review process, hated by developers. But equally, there’s no spamware.
• There’s no multi-tasking. But equally, there’s no battery intensive, memory-hogging, background-running daemons.
• Apps costs money. But Apple already has your card details from signing you up to iTunes. They had a micro-payments model, beating Facebook and Paypal (whose customers have been begging for one) by miles. £1.50? That’s only half a pint these days. No problem.

In the land of the laptop, the only competitor (excluding webapps and shareware), is the widgets. We have widgets for weather, clocks, telling the time, calendars, weather forecasts, clocks, and the weather. Handy.

It’s here that I’d like to see the App Store. Why can’t I drop an iPhone app onto my dashboard (or sidebar)?

The iWork for iPad apps are $10 each and will be available at the iTunes App Store.

I’d just like to mention Typekit because it’s not what I thought it was, and I’m quite impressed with what it is.

I’d assumed Typekit was a solution to the technological problem of including new fonts on webpages.  Along similar lines to Cufon and sIFR.

For those who don’t know, including fonts is a problem because modern browsers haven’t agreed on a way to distribute fonts with web pages.  IE, oddly, had this solved ages ago, but since MS is so unfashionable at present, it has been largely ignored.

Cufon lets you use a new font by replacing text with little <canvas> image elements.  Ingenious, but quite silly as you have to create loads of these little elements on the fly.  SIFR does the same thing, but using Flash.  Indeed, we once used sIFR for the Cannes Film Festival website.  I remember a very long page-render time…

I’d assumed Typekit was going to be similar. Basically, I’m wrong.

Typekit is a solution for font licensing. It’s always been a pain to get the right licenses for fonts. Often the licenses you buy are both extortionately priced and not licensed to web distribution. (This is because the way you provide a font to a web page is easily hijacked, and the font can be stolen).

Typekit provides access to their sensibly-sized library of fonts on a variety of subscription schemes. Once signed up, including the fonts is a simple matter of a few lines of JavaScript.

Technically, Typekit uses the @font-face download rules. This means it supports a limited number of browsers. But it also supports IE, using the EOT font format (IE’s system attempts to prevent hijacking of fonts too). So it’s not bad.

Downsides are that the iPhone is not supported, as mobile Safari doesn’t seem to support @font-face. Of course, the non-JavaScript browsers out there don’t see the new fonts (but they’ve asked for a lesser experience, so who cares). Also, there can be a FOUC (Flash of Unstyled Content) as the page loads the first time.

Once request I’d make to the Typekit team is the ability to support two sites on the Tester pack. One for my simple blog, one for active development. I know you want me to pay, but my commitment to fonts for personal use is not so great, and since you add your logo, it’s only an advert for yourselves anyway isn’t it.

In summary, I think it’s a great idea. I see Typekit as the Spotify of fonts.

2) I expect you to allow me to deauthorize a computer remotely. For example, I’ve just lost my hard disc. How do I deauthorize it? You tell me I’ve got 5 out of my 5 computers authorized. Ok, which ones? Unlike 1975, five is not a big number of computers. How about automatically deauthorizing a computer after 12 months?

3) I expect you to tell me that I can’t play HD films on a non-approved TV BEFORE I buy it. Or, to be honest, never. I’ve never heard of such ridiculous bullshit. I’m not about to go and buy a new TV, just because it doesn’t have your DRM built in.
The discussion here has 8 pages, and the last one says “Apple Support has no idea this problem exists.”
http://discussions.apple.com/thread.jspa?messageID=8472731

4) If I tell you I own an MP3 I expect you to trust me. Allow me to copy and transfer it like any other file.

We like our iPods, we love our iPhones, and when our wives aren’t looking, we might secretly give our MacBooks a cuddle. But no-one likes iTunes. And not because it’s a bad idea. It’s just clunky and unusable.

If I were the EU, I would consider Apple bundling iTunes in the same light as Windows bundling Internet Explorer. Let’s start the fine running at €1m/day and start talking openness.

Here, I’ve worked on websites for Hewlett Packard, the Cannes Film Festival, Persil, Nicquitin, General Motors, Opel, Vauxhall, Sega’s TotalWar, Nakheel and the Palm Jumeirah, Bayer’s Xarelto, MSD’s Propecia, Procter & Gamble, Eukanuba, Digitas of course, and a few sites so cool, I still can’t tell you about them.
That’s not a bad record.
Estimates suggest that on average*, I have been involved with more than seventeen percent of your household purchases , and although I have a three-percent chance of killing you with a car, there’s an extra four percent chance of saving your life after an operation.

Somehow I’ve been sent to Brussels, Warsaw, Geneva, Minsk, Basle, Kiev, Zurich, Paris and Bangalore.

Ninety-two of my facebook friends, I met through Digitas. That’s sixty-one percent.

Since I joined Digitas, I’ve started and finished a three-year degree in Physical Science, with a two:one. I’ve got married, and twenty-five percent of my guests were from Digitas. I’ve run twenty-six point one miles in the London marathon, and they helped me raise three-hundred pounds for the NSPCC.

I loved working here.
I wish them all a great 2010.

Kenneth

* some estimates may be approximate to the point of complete fiction.

Actually, it’s really only annoying because it was expensive.

What happened was this: I moved a sizeable set of sites over from my previous standard hosting to the Amazon EC2 set. It was LAMP based, but I’m not going to tell you which site, because it was built a long time ago and hasn’t had enough TLC recently.

The site was suffering from some pretty terrible response times. Using a top to find the slow process seemed to give me no clues at all, and yet the cloudwatch service was showing consistently high CPU usage.

The site is database driven, and that work is quite intensive. Each page on the site executes several queries, and there is a chatroom which drums the database on a regular basis. But the site doesn’t do much else. And so my culprit was obvious: the database.

I’d read about Amazon RDS and it seemed the perfect solution. There’s no denying that my database is relational, it’s almost the textbook relational example, and so RDS beat Simple DB any day of the week. It was cool to have my own EC2 instance running MySQL, but really, Amazon can be a bit complicated with backups and storage. The thought of carefree backups, and a consistent long-running database as I toggled between application servers definitely appealed. I have a new site to roll out? Easy. I run a new server in parallel, and switch the IP across when it’s tested. Dream scenario, right?

And so it seemed. The cost seemed a little high, but I had high hopes for the performance, and it was still less than our (3 year old) prior hosting. I followed the Amazon online setup guide together with someone’s step-by-step tutorial (since sadly the console did not support RDS yet).

Except that it wasn’t much faster. “Shit”, I thought. That was a waste of time. But that’s ok – I now can toggle between different instances of application server, and figure out the problem there without worrying about the database at all. The site was fast enough to leave it running for a week to “bed in”.

One week later, a spring in my step, time to get working on the application. This is working out well. Database still intact, Cloudwatch says CPU load still high, so the blame must be with the PHP not the MySQL. Ok, fair enough. And a quick check of the running costs, gives me $400, not bad for the …

No, wait, go back to that bit again.

Four hundred dollars? A WEEK?

WHAT. THE. DUCK.

That’s over twenty grand a year. Sucre.
My fingers have rarely moved as fast as they did to get that server switched back.

So what happened?
It turned out that I’d been charged for the bandwidth between the app server and the database. And in that week, I’d racked up a terabyte of data. That sounds like a lot, but like I say, this was a DB-heavy site. And actually, you never really look at the bandwidth to your DB do you? It’s not what I would consider “external bandwidth”, which is what Amazon charge for.

After a very stressful couple of hours, I had a medium size instance (high cpu) running, with a clean Ubuntu install and Apache PHP MySQL on top. Performance was back to proper levels (so the PHP just needed another processor), and the costs were back down.

I sent a message to Amazon asking what had happened, and whether I could have my money back. Answer: not on your nelly. You used the bandwidth, you pay the price.

I protest. “Come on”, I say, “I’m not sure what happened here”. I’m a loyal customer and they could at least be generous on this. A bit of faith in the newly-subscribed. Better than that, I paid up and reserved an instance to demostrate my commitment. Just drop the week’s charges, I asked.

My question was passed to management. Not on your nelly, they said. You used the bandwidth, you pay the price. Your bandwidth was cross continent, they say.

AHHHHHHHHH.

Now I get it. My servers were naturally in Europe. Obviously I’d omitted the step of putting my RDS instance in Europe too, and it had defaulted to the US. Bollocks. I moved 1TB of data across the ocean because of a silly oversight.

Of course, it would’ve been nice if the setup commands had mentioned this.
It would’ve been nice if they had added RDS to the console, so I could see this (seriously, they can develop a distributed database system, but haven’t got the time for a bit of HTML?)
It would’ve been much better if they’d alerted me as I switched from a $1,000 setup to a $20,000 setup.
Not much to ask.

And really, it’s not much to ask for my $400 back. Ok, so I got it wrong. But where’s the love?

• Got married!!!
• Been to Hawaii on Honeymoon
• Flown over an active volcano in a helicopter
• Been to my brother’s wedding in a barn
• Been to my friend’s wedding in a hotel
• Graduated from a second BSc (in silly robes)
• Submitted a Chrome Experiment (fireworks)
• Rebuilt the company’s website
• Left my job for bigger and better things
• Painted the bathroom (no more green!)
• Been assaulted and robbed
• Given my auntie a cool new website and POS system
• Gone to Wales, Hawaii, Holland, Minsk and Brussels
• Run a successful hack day
• Sold dog food, credit cards, hair-loss cures, cars, banners, and clever things I can’t talk about.
• Won an award for last year’s work.

Next year I’m planning to:

• Learn Polish (at last!)
• Pass my driving test
• Have a lot more fun coding

Compare to last year’s effort here:
http://kenneth.kufluk.com/blog/2008/12/this-year-i-have/

How was your 2009?  And what do you have planned for 2010?