Ship Some Code

CloudFlare is a website performance and security product that launched publicly at TechCrunch Disrupt in September 2010. It’s a reverse proxy, firewall, and global content delivery network that requires very minimal setup. Their main product is free, but they also offer a pro version that provides a few extra optimisations and features available for $20 a month.

To use CloudFlare, you simply change the DNS name servers for your domain to point to CloudFlare and then they configure your A record to point at their servers. All traffic to your website is then routed through CloudFlare. They act as a content delivery network for your images, Javascript and CSS files which means they serve these assets from a server closer to you and reduce the load on your server. It’s worth noting that they do not cache the actual html of your website - these requests are still forwarded onto your web server.

As well as acting as a CDN, CloudFlare offers a number of other features as well. They will minify your JS/HTML/CSS for you, automatically obfuscate email addresses and can also preload static resources using Javascript in the background. CloudFlare will also in theory improve the security of your site by preventing attacks such as SQL injection, XSS Javascript injections and stop known bad IP addresses from accessing your site.

Other than email address obfuscation, I was not interested in the security features CloudFlare offered, one of the reasons being that if CloudFlare detects what it thinks is a suspicious user it will prevent them from accessing your site, display a CloudFlare branded page and make them enter a captcha to continue. I hate the idea of this - a false positive that triggers this will make your site look horribly broken and I also don’t want the user to ever see CloudFlare branding or anything on my site that I didn’t design myself.

I think this is one of the things CloudFlare gets very wrong about their whole offering, they should be aiming to be completely transparent no matter what happens. I don’t ever want to see their logo on my site or hear about how many ‘threats’ they prevented. That stuff needs to happen right out of my customers sight.

If your web server goes down and they are able to serve up a static version, at the top of the page they inject a ‘This page is offline, but here’s our cached version’ thing, along with the CloudFlare logo. I might be less annoyed about this if I hadn’t already shelled out $20/mo for the pro version of CloudFlare but they are essentially using the fact that my server is down as an opportunity to do some free marketing for themselves, despite the fact that I already pay them money. I don’t like this either.

Anyway, I switched off all of the security features with the goal of using CloudFlare purely to improve the performance of my site. Some of the features CloudFlare offer are still in beta. To begin with I left all beta features disabled except for JS/HTML/CSS minification.

The site I was trying to improve the performance of - http://frenzyapp.com is pretty simple and made up of just a few images and static html pages.
Things seemed to work quite well for a while, but sometimes I noticed my site was taking longer than usual (>3seconds) to load now that CloudFlare was in the picture.

I started doing some tests using the site performance testing tool at http://www.webpagetest.org which allowed me to test the page load times from multiple locations around the globe. WebPagetest showed that a single file - jquery.fancybox-1.3.4.css was taking over 3 seconds to load from certain locations and also showed some other issues with requests being cancelled. This was causing the whole site not to be fully loaded for over 6 seconds. Not good at all.

I ran a lot more tests and found I couldn’t get the problem to occur consistently from all locations but it would always happen when loaded from New York. I opened a support ticket with CloudFlare describing the problem and attached screenshots of a number of tests. They responded quickly and told me to try disabling the JS/HTML/CSS minification feature (which was after all, in beta) and see if that improved things. I did this and re-ran the tests 10 times from New York, again using WebPagetest to see if the problem persisted, unfortunately it did. Loading this file was taking over 3 seconds to load bringing the overall page load time to around 6 seconds. Still no good.

I tried disabling some of the other CloudFlare features such as the website preloader and ran more tests. Still the problem continued. I updated the support ticket with my findings and then waited patiently for 3 days. This time CloudFlare did not respond. I posted to their support system again to ask if a resolution was coming and tweeted them:

Almost immediately, I got a tweet back from Matthew Prince, the CEO and co-founder of CloudFlare. He suggested that I try completely deactivating CloudFlare and re-testing. We had a rather lengthy, friendly exchange which ended with this tweet from him:

This is encouraging. I am hopeful that the problem will now be resolved or that I’ll at least get an update soon now that I have a promise from the CEO.

I also took his advice and tried fully deactivating CloudFlare from the control panel, this makes the DNS A record to point directly at my server, taking CloudFlare out of the loop. I then re-ran WebPagetest 10 times from New York and found the problem had disappeared. The page is now fully loading in an average of 3 seconds or less compared with the 6 seconds taken with CloudFlare enabled. This provides further evidence that CloudFlare is causing the issue and not my server configuration. I update the support ticket with my findings and wait patiently for another 4 days.

I don’t hear a thing from CloudFlare, no more tweets, no update to the support ticket, nothing. I guess they must have changed their mind about resolving my issue ‘in a few hours’

I decide to re-test everything anyway, and also run tests from other locations to get an overall indication of the performance of my site with CloudFlare enabled versus CloudFlare disabled.

My findings are displayed below:

The times given are seconds to fully loaded. In New York - the problem location where the CSS file is taking greater than 3 seconds the total load time is, on average, 2.7 seconds greater with CloudFlare activated.

The site actually loads faster when direct from my server in every tested location except for two.

On average, across all tested locations, the site is loading 0.8 seconds faster with CloudFlare deactivated. This certainly isn’t what I would have expected from a product that is supposed to ’supercharge’ your website.

One factor to consider is that these tests were done while my site was under almost zero load. If my server became overwhelmed then it would slow right down in which case CloudFlare may actually be faster. It also remains to be seen whether other sites using CloudFlare exhibit similar load times or if my site is particularly troublesome for some reason. Much more data would have to be collected to conclusively prove anything. I have uploaded a zip archive that contains screenshots of all the WebPagetest results with more information on each test in case you are interested or want to see the original source for those numbers.

Personally, I’ve decided to move on from CloudFlare. Despite what seems to be a promising service, right now they are not providing me with a faster website. They also don’t seem to be fixing my problems or keeping me informed. It’s a shame because I really think they are onto something, there’s so much that goes into keeping a website speedy and available these days. If I can change two name servers and have everything taken care of for me, it leaves me more time to put into building great products.

I do think CloudFlare will iron out these issues eventually. At the moment the company still seems to be in early/beta stages. They may be worth another look at some point in the future. They also need to do some work on improving their customer service and make sure they follow up with customers who have problems.

After 4 months in beta, Frenzy 1.0 is finally released.

I’d like to to talk a little about the motivation behind Frenzy and show off a few tricks that haven’t been discussed elsewhere.

When Dropbox came out, it made sharing files and folders with your friends effortless. You can just put stuff in a folder and then you know that at some point the same stuff will turn up in your friends folder. It’s also private, so no one but the people you choose are able to see the contents of that folder.

The problem is, Dropbox lacks some of the more social aspects to sharing with each other. In a lot of cases, sending someone a file also needs an explanation to go along with it, and it would also be nice if the recipient could reply directly about what was shared. Of course you could do this bit by email, but it would be much nicer to be able to write a message to go right along with the thing you shared.

Frenzy lets you do just this. You simply drag a file or folder onto the menu item and Frenzy pops up and asks you which groups of people you want to share with.

Lets see a real world example of this:

Say I have some design sketches I want to get feedback on. First I drag the folder onto the Frenzy menu item:

The main Frenzy window pops up and asks which groups I want to share it with. Groups are simply the Dropbox shared folders that I have setup. You can invite new people to a shared folder or remove someone via the Dropbox web interface.

You can have multiple people in each group, or just one person as in my ‘Jason’ group. In this case, I select the Design group. I press enter or click share and the folder is copied to the Dropbox folder for syncing and my item is added to the feed:

My friends will now see the item I shared in their feeds.

When I receive replies, the number of new messages will be shown in red on the Frenzy menu item:

But Frenzy isn’t just for sharing and discussing files and folders. You can also share links with Frenzy.

To share a link, goto a site in your favorite browser and then use the Frenzy keyboard shortcut. The default is Control+Option+S. You can customize this shortcut in the Frenzy preferences.

You can also use the keyboard shortcut to reply to links already shared in the timeline.

For example, if Karen shares a link with me, I can click on the link and it opens in my browser. Now I can use the keyboard shortcut and Frenzy detects this item has already been shared so it will treat this as a reply:

Alternatively, I can click in the area indicated above to re-share this link with a different group. If I want to re-share this link with the family group for example:

Frenzy is available for download now from http://frenzyapp.com as a full featured 15 day trial. For a limited time it is $10USD to buy. Watch the screencast and give it a try.

There is also a getting started guide here to help you get setup.

The first 100 Frenzy customers get 20% off. Use the coupon code FIRST100 when checking out.

Many app updates are coming, in the meantime if you have questions let me know in the comments or email support@aptonic.com

Frenzy has been progressing, not as fast as I would have liked but it’s getting there. I personally use the app with my friends like crazy and love it which is a good sign.

I contracted the mad design skills of Adrian Kenny to do this gorgeous looking icon for the app.

It’s not totally finished yet but here is a preview:

I am still uncertain about what the Avatars should be saying.

The current banter is really just a placeholder until I think of something better - Ideally the length of the text for each Avatar would be similar and contain the perfect amount of wit.

Please let me know if you have ideas.

Oh Gee. It has been forever since I blogged on here. Is anyone still listening?

First thing:

Someone emailed me recently to ask how Dropzone tracks the dock icon and how can they do something similar with their own Cocoa app.

My reply is below:

You can poll the accessibility API to query the position of the dock element and then set the window frame to this frame.

This app is invaluable for figuring out the correct accessibility element.

This class will help with the accessibility stuff.

I warn you though, once you start down the road of doing horrible hacks like this there is no turning back and you will need 100s more hacks to maintain the initial hack. It took me months of hard work to make the dock tracking system work well and it still has to use a separate process and constantly takes up CPU to poll the API as there is no notification for when the dock tile size changes.

I STRONGLY urge you to find another way to do whatever you are trying to do that does not require a window over the dock icon.

It got me thinking how clever I thought I was when got the dock tracking system Dropzone uses working. It’s a horribly complicated system involving all kinds of hacks and workarounds, all to give me dragging notifications on the dock icon so I could show the grid of actions. This is something Apple never intended apps in the dock to be able to do.

One example of the kinds of extra hacks it leads to is that if you hit F11 it shifts the hidden window off screen, and dock dragging no longer works. This is annoying for a user if they want to expose the desktop and then drag something onto Dropzone. I can get around this by recreating the window when a show desktop is detected, but then I need a way to detect show desktop activation and there is no API for this either…

If you’re thinking of making an app that does hacks like Dropzone, change your mind and don’t. It leads to inflexible and unmaintainable code that is subject to break at any moment.

Compare Dropzone with more standard, single windowed apps like Things and NetNewsWire. I don’t think they have an easy job either, but at least they aren’t trying to interface with integral parts of OS X like the dock where there is no API and things are liable to break next OS update. It’s fun and novel to break all the rules, but in the end, you won’t feel so great about your app. Trust me. Been there.

Second thing:

People have been asking me if I’ve given up on Dropzone. No I haven’t give up and I’m still selling a few licenses a day which I’m really thrilled about. Thank you all.

Part of the reason I haven’t updated Dropzone in a while is that it’s already doing everything I need.

The other reason is that I’m hard at work developing a new app! This will be a slightly more conventional app than Dropzone - It’s a private social network for sharing links, messages and files using Dropbox as the backend. It’s in still in alpha at the moment, but it’s coming along well and I’m hoping to do a big open beta in month or so to get feedback from a wider audience.

The new app is called Frenzy and its hosted at frenzyapp.com. I have posted a screenshot of the app there. Check it out.

Third thing:

An awesome song and video by a great New Zealand artist. Also… Broken Machine… get it?

Have you tried the Google Chrome for Mac developer release? It’s missing just about every major feature you might expect in a browser (bookmarking, printing and Flash to name a few) but is still plenty awesome, and mostly on account of its incredible speed. It feels even snappier than Safari 4 which is also pretty quick.

As well as being fast at rendering pages, it also appears to start very quickly. When you first launch it, you’ll see what I mean. Many people have commented that the dock icon doesn’t even bounce once during launch. Here’s Kevin Rose and Leo Laporte discussing this unusual behavior on last weeks TWiT episode:

This behavior of zero dock icon bounces intrigued me as well, so I did some digging, and Kevin’s right, they did a hack. If we look in Chromes Info.plist we find the following:

The key I’ve highlighted tells OS X that Chrome is an agent application, that is, a background application that should not appear in the Dock or Force Quit window. That seems strange, as we know Chrome does appear in both.

Some more digging led me to this patch which tells us exactly what’s going on here.

So. Chrome is initially launched as a background app and then transformed into a foreground app using the Carbon API call TransformProcessType. This means that when Chrome starts, the dock icon doesn’t bounce because OS X doesn’t think it should have a dock icon. When TransformProcessType is called to give it back its dock icon Chrome is already fully loaded, the net result being that we never see the dock icon bounce.

What’s interesting is that the Chrome developers are actually doing this to workaround a completely unrelated issue involving the WebKit UI and it has even been filed as a bug. And to think we all thought they had done it deliberately to give the impression of a faster launch. Shame on us all.

Anyhow, I was interested in adding this behavior to Dropzone, as the Dropzone dock icon should ideally not bounce either as this is more in line with the behavior of the built in dock grids that Dropzone tries to mimic, also, the dock icon bounces would occasionally interfere with the positioning and display of the grid directly above it. Therefore, I have added this same code to Dropzone and made another improvement - if you click on the Dropzone dock icon when it’s closed, the grid is displayed immediately after launch. There is also another neat feature in Dropzone that you may not be aware of - if you drag something onto the dock icon when Dropzone is closed, it automatically launches and opens the grid. I have done a quick screencast that demos both of these behaviors:

As you can see, Dropzone launches so quickly you barely even notice that it was closed to begin with. Without this code, the Dropzone dock icon would always bounce once even though before it finished its first bounce, Dropzone was already launched.

So, while I’m certainly not recommending people start adding this code to their apps to provide the illusion of a faster launch, in the special case of Dropzone this is a nice touch.

It will also be interesting to see whether Google ends up sticking with this behavior in future releases of Chrome. I think since Chrome launches so quickly anyway they are best just to leave it as is. Also, I bet people will complain it now seems to start ’slower’ if they make it start bouncing again. Perception is everything.

I just released Dropzone over at Aptonic.

Go download it if you haven’t already, and if you like it, support the project by buying a copy - As promised, it’s only $10.

I’m really very proud of it, and have come to depend on it in my day to day work. Although it can take a while before it feels a natural part of your OS X workflow, once you ‘get it’ it becomes an indispensable utility, a lot like Quicksilver or TextExpander.

I see this as just a beginning, and I hope you’ll help me build on it using the Dropzone scripting API. Some pretty neat stuff has already been built. I also need your feedback on how to evolve the API to make it even more useful.

There are many more features I am working on for future releases, such as SFTP, WebDAV and MobileMe support. So if you need these, rest assured they are coming soon.

Meanwhile, I hope you enjoy using the app and let me know what you think of it!

A friend of a friend on twitter did this gorgeous new application icon. What’s really cool is that the icon has two different states, one for when the portal is inactive and another ON state for when you’re teleporting things.

Let me know what you think in the comments or on twitter. And then cake will be served.

Its been a while since I’ve said anything about Dropzone progress.

Rest assured, the app is coming along extremely well and will now launch in late May.
The feedback I’ve had from the beta testers has been overwhelmingly positive, and I’ve been working through their bugs.

As so often happens with software, the scope of the project has expanded somewhat.

As well as being the ’swiss army knife of drag & drop for the Mac’ as one beta tester dubbed the app, I’m also adding the ability to use the grid as a launcher for your scripts or applications.

I’ve posted a screencast over at http://aptonic.com/ to demo some of the uses for the app. Check it out.

Update: Thanks to TUAW I now have enough beta testers to invade a small country with. Thanks everyone. Looking forward to getting some more feedback!

It’s finally here. This version features:

• A much nicer icon
• Sparkle automatic updating
• A dock menu with the 10 most recently uploaded items so you can re-copy URLS to the clipboard
• Auto-close after an upload finishes, so Dockdrop is only open when it’s actually doing something
• Hot key uploading - this lets you choose a shortcut to use to trigger an upload of the selected item from the Finder, iTunes or iPhoto
• SCP public key support
• The upload progress window can now be moved anywhere on the screen and its position is saved
• Various other bug fixes and improvements

You can download a copy here or from the Dockdrop website

Enjoy the new release and let me know how you like it in the comments.

I am so sick of GrowlTunes. When it tries to find album art for a song that doesn’t have an ‘Album’ tag set it goes ahead and queries Amazon for the album art anyway, this results in a terribly ugly looking ‘Unter Null’ picture displaying in the Growl notification, presumably because it is querying Amazon for ‘Null’.

I tried downloading a fresh version from the Growl site and the version available currently (1.1.2) doesn’t seem to suffer the ugliness and instead displays a much more sensible iTunes icon.

Great, I thought. That’s the end of my troubles with GrowlTunes.

Not so.

It seems that this version has a new problem - if a song is played that has no ‘Track Number’ field set then GrowlTunes displays an ugly (null). where the track name should appear.

At this point I’m more than a little peeved. Would it really have killed them to add a simple check to see if the Track Number is null and if so, don’t try and display it. This is an application used by hundreds of thousands of people, I just can’t understand it. Mac software is meant to be built better than this.

A quick Google search shows I am not the only one complaining about this problem and the standard reply seems to be that a replacement version of GrowlTunes is currently being developed and we are meant to wait for that to fix the stupidness.

Since the source for GrowlTunes is freely available I figured I’d download it and fix it. It only took me 10 minutes and 2 lines of code to make it only try and display the track number if a track number is actually set. You can download the version I have fixed here.

Close your current version of GrowlTunes, unzip my one, drag it to your applications folder and replace the existing version. From now on GrowlTunes will only try and display a track number if there is one available to display.