Henrik Carlsson's Blog

HTML AppCache and WordPress

In issue #350 of A List Apart Jake Archibald writes a great article about the HTML AppCache. Yes, the article is long. Your reptile brain will scream


but don’t listen to it. If you do any kind of web development, you should read the article. AppCache can really be great for certain things bit, as Jake will show you, it’s so full of caveats and weird behavior that you might be discouraged from using it.

The ApplicationCache spec is like an onion: it has many many layers, and as you peel through them you’ll be reduced to tears.1

For an older version of this blog’s theme, I tried to use AppCache to increase download speed of a few assets, fonts in particular. It turns out, ”the road to hell is paved with good intentions”. The end result was a whole lot of pain when I updated the theme and a giant bag of hurt when I tried to switch it to the one currently in use. On my computer it looked fine, but on my iPad a broken version of the old theme was still in use and no matter how many times I’d hit the ”update” button in the browser, nothing would happen.

Ever since I finally figured what caused all the pain I’ve been meaning to write a blog post about it, but I’ve kept pushing it in front of me. Archibald’s article made me sick of my own postponement, so here is the short version of why AppCache together with WordPress makes for a giant pile of hurt.2

The problem of using AppCache with WordPress

Remember Gotcha #1: When the user visits a page a second time they’ll get the ApplicationCached version. If you’ve changed the url to the manifest, bad luck, the user’s cached version still points at the old manifest, which is obviously byte-for-byte the same so nothing updates, ever.3

When you (in this case me) develop a WordPress theme, you usually put all its files in wp-content/themes/[theme_name]. Logically, this is also where you’d put the AppCache Manifest file.


Sorry, I didn’t mean to scream at you, it’s just all the frustration built up inside of me from actually making this mistake.

If you put an AppCache Manifest in your regular theme folder, this is what will happen.

  1. A user will visit your site. Her/his browser will see the cache manifest, download it and cache everything according to it.
  2. The user makes another visit some other day. Unless the manifest file itself has changed or been deleted, nothing will happen. If it has changed or been deleted, new assets will be downloaded according to it, but they will not be displayed until the next time the user visits.

So far nothing seems problematic. However, some day you will decide to switch theme. You’re assumption will be (at least mine was) that the user will once again visit you, her/his browser will download the new theme in the background and on the next visit the new theme will be showed in all its glory. There is just on problem…

The manifest file is still present in its old location, and remains unchanged.

This means that regardless of how many times you, or the visitor, hits update in the browser, the old cached version of the blog will show up. The best solution is to delete the old theme, or at least the old themes cache manifest. That way, things will go as you originally planned; the visitors browser will stop showing the old theme on the next visit.

So as you can see, things can quickly get out of hand with AppCache. Don’t use it in your WordPress themes without thorough testing. And read the A List Apart Article.

  1. A List Apart: Application Cache is a Douchebag 
  2. My blog also uses WP Super Cache to statically cache all its pages and posts. For a while I suspected that this somehow made the caching problem worse. Let me just clarify that this was not the case. 
  3. Still the A List Apart article, my emphasize. 

Posted by Henrik on

Inga kommentarer

with permalink

The purpose of a critic

I believe a good critic is a teacher. He doesn’t have the answers, but he can be an example of the process of finding your own answers. He can notice things, explain them, place them in any number of contexts, ponder why some "work" and others never could.1

This quote is from film critic Roger Ebert and to me it perfectly explains what a critic should strive to be, and why.

I found the quote via The Ihnatko Almanac, another one of the many great shows on the 5by5 podcast network. It is hosted by Andy Ihnatko, who I’d managed to never heard of before Ihnatko Almanac launched. If you haven’t either, head over to Andy Ihnatko’s Celestial Waste of Bandwidth, or start listing to the podcast to get to know him.

Ihnatko is an interesting part of the 5by5 Network because he tends to be very humble, in a way that my other favorite hosts (John Siracusa and Marco Arment) are not. He seems more thoughtful, less focused on being right and more open-minded. Siracusa’s show Hypercritical is still my favorite podcast, but Ihnatko Almanac is a welcome contrast.

Posted by Henrik on

with permalink

Happy Birthday WordPress

Happy Birthday WordPress

Posted by Henrik on

with permalink

YouTube, H.264, WebM and Flash

(Or, how YouTube managed to turn my MacBook Pro into a vacuum cleaner.)

So apparently Safari without flash misses the old vacuum cleaner mode so much that it now randomly does it for mp3 and mp4 content. 🙁 1

That quote is from my, via twitter, a few weeks ago. I had started noticing that videos got my computer to spin up all its fans and peg the CPU. This kind of behavior was common before I uninstalled Flash2 but I thought those days where long gone. I even checked to see if Flash really was uninstalled, which it was.

This problem drove me nuts, but apart from whining about it on twitter, I didn’t do anything. Some time later I realized that it was not just any video content, it was specifically Youtube videos that made Safari go bananas. Hence, I started Googling and came up with an answer.

Turns out, when Perian is installed, YouTube prefers WEBM codec over H.264. It seems that WEBM video plays without any hardware acceleration — Activity Monitor shows CPU usage of ‘QTKitServer-(1836) Safari Web Content’ exceeding 100%.3

So Perian, the wonderful ”swiss-army knife of QuickTime components”, was causing the problem. Using Perian, Safari suddenly had the ability to playback WebM video, but without hardware acceleration. It turns out that Youtube does a feature test to see what video formats your device can playback and then choses from the available options. And since Google has previously stated its intentions to stop supporting H.264 video, naturally they prefer to deliver WebM video.

If that is the problem, then what is the solution? The simplest one would be to uninstall Perian, but then I would lose the ability to decode a lot of audio and video formats. However, I found a more complex but better working one.


  1. Go to http://youtube.com/html5. At the bottom of the page you see whether you are using the ”HTML5” video player or not. (If you don’t, you will defiantly not have this problem.) Disable the HTML5 video player.
  2. Head over to Vertical Forest and download the Safari extension Youtube5. This will replace the default Youtube video player with a lean, simple, HTML5 <video>-tag based one that uses the H.264 versions of the videos. That means you get video without Flash, without stuttering.

This way Youtube will try to deliver videos to you as Flash applications and Youtube5 will replace them with H.264 video.

I implemented this solution about two weeks ago on both my and my girlfriends computers and so far it has worked great. No stuttering and no unavailable videos due to missing Flash. ”It just works.”4

  1. http://twitter.com/synvila/status/189746957336580097 
  2. I still use Chrome to ”cheat”. Read more about going flash-free on Daring Fireball 
  3. YouTube HTML5 videos play poorly after installing Perian 
  4. This problem, and its solution, certainly makes you ask the question about what is best; an open standard, or an actual working one? 

Posted by Henrik on

Inga kommentarer

with permalink

How does different browsers handle media queries and assets downloading?

Tim Kadlec has compiled the result of his research into Media Queries and assets handling. My only question is, why doesn’t he use the ”Mobile First” approach that seems to be the preferred way these days?

Posted by Henrik on

with permalink

Bye bye Draw Something

Until recently, the Pictionary-like game had only run spammy banner ads in its free mobile app that, including the paid no-ads version, has amassed a staggering 50 million downloads in five months. Now, with a direct-sales force that’s been on the ground for a whole eight weeks, Draw Something is inserting advertisers’ paid terms into the game for players to literally draw brands.

Here’s how the game works: Pick a word from a list of three, then create a drawing so a Facebook friend can guess that word and you can win points. For the ad product, imagine inserting words like "Doritos" or "Coca-Cola" in among "golfer," "bikini" or "fireworks."1

I played Draw Something quite intensely for a few days some time ago, but it’s been lying dormant on the springboard since then. Now this news definitely makes me feel that me and Draw Something is not a suitable match.

The only question is whether I should just delete the app or launch it one last time to attempt to remove my account.

Posted by Henrik on

with permalink

Macworld demonstrates some workflows with Launchbar

Coincidentally, Macworld published two screencasts titled ”Be More Productive with LaunchBar” while I was writing my post on what Alfred is and why you should use it. So if my post got your attention, but you want to check out alternatives to Alfred. you should definitely spend a couple of minutes watching these.

Posted by Henrik on

with permalink

Alfred – what it is, why you should use it and a useful php development workflow

For a long time I questioned the purpose and need of dedicated application launchers1 in Mac OS X. ”The dock is fine”, I always thought. Especially after the release of Leopard which allowed me to put folders in the dock. Using this technique I put the entire Applications Folder in the dock and used it to launch all my applications.

However, some time ago I actually started using an application launcher. I think it was Lion and ”Launchpad” that brought it on. Launchpad seemed like such a great idea, but I quickly realized that as part of my workflow, it simple sucked. The fact that I have way to many applications, combined with me sometimes using my laptop as a stand alone machine, sometimes connected to a 1920×1080 display and sometimes to a slightly less high res display made it impossible to actually launch things without getting super frustrated.


The good thing about Launchpad was that it made question whether the dock was good enough or not. The bad was that Launchpad itself was no better than the dock.

So I tried out Alfred. I’m not quite sure how I ended up on Running With Crayons website, but I really liked the look of Alfred so I gave it a shot. I replaced the default key binding with Alt (Option) + ESC, disabled it from searching for anything but applications and forced myself to use it for a while. After just a couple of days I realized that I’d never turn back to using the dock as my app launcher.

That sounds great and all, but what is an application launcher?

That’s a very valid question. An application launcher is in itself an app, but its sole purpose is to launch other applications in an as frictionless way as possible.

The dock works fairly okay for this task if you have five to ten apps that you use. If the number grows you’ll quickly start losing control of where to find the various apps and you will spend a lot of time looking for them, instead of doing the task that you actually wanted to do. Another disadvantage of the dock is that it’s a mouse/trackpad driven utility. You need to take one hand of the keyboard to use it.

Dedicated application launchers helps you launch your apps without having to look through this long horizontal list that is cluttered by open and non-open apps. Let’s take Alfred for example:

It may not seem like much, in fact I thought it seemed really unnecessary the first time I saw an application launcher, but give it a try. Chances are you’ll love it!

For me, using a launcher has changed my workflow quite a lot. It enables me to keep my fingers on the keyboard more, instead of reaching for a mouse or trackpad. It also means I don’t have to keep re-organizing my dock to keep the most relevant apps easily accessible. As a matter of fact, I’ve completely emptied the dock of programs. The only visible app icons in my dock is the ones currently launched and in use.

The Dock
My clutter free Dock

That sounds great, now how about that workflow?

The web is full of places to learn more about coding and improving your skills. Among all these great places, the one site that has meant the most for my coding lately – and maybe for the developing community as a whole – is StackOverflow. When I code I search StackOverflow very frequently to learn more about all sorts of things and since my main programming language is php2 I constantly search php.net to remind myself of correct argument order for functions, function names etc.

These to things, StackOverflow and php.net, both means Google searches. The other day when I checked out the preferences of Alfred I realized that its ”Custom Searches” function can be used to streamline my programming workflow. By creating a new custom search and using the following query:

I was able to create quick way to search StackOverflow. Now I just hit my hotkeys and write ”so my search query”3 and hit return. The next thing I now, I’m in my browser seeing search results from Google for a StackOverflow search. This technique can then be easily adapted to search php.net be changing the query string to

So far I haven’t had the time to use these shortcuts so much, but I’m pretty sure they will increase my programming productivity quite a lot.


If you are a frequent user of a computer and use more than five applications, I defiantly think that you should try a launcher. It may seem silly and unnecessary, but give it a try. Both Alfred and Quicksilver is free and Alfred can be obtained from its website as well as from the Mac App Store.

Once you have a launcher installed, try to make some sort of custom search settings for websites that you search frequently. If you choose Alfred, feel free to use my custom searching. Simply click the links after you’ve installed Alfred.

  1. For instance Quicksilver, Alfred and Launch Bar
  2. Yes, because php is a crappy language
  3. ”so” is just the keyword that I chose for this. You can use whatever you want. 

Posted by Henrik on

En kommentar

with permalink

Make iOS apps using Ruby

Unlock the power of Ruby for iOS

RubyMotion is a revolutionary toolchain for iOS. It lets you quickly develop and test native iOS applications for iPhone or iPad, all using the awesome Ruby language you know and love.1

This seems really interesting. The idea of learning Ruby suddenly became a whole lot more appealing.2

Posted by Henrik on

with permalink