Jon Fox

Automattic Acquires IntenseDebate

Posted by Jon on Sep 23, 2008

I’m very excited to announce the acquisition of IntenseDebate by Automattic. IntenseDebate has been my entire life for the last 1.5 years (and a good chunk of it the 3-6 months before that). If you don’t believe me just ask my girlfriend who had to put up with barely seeing me during this time.

This company has had a hugely significant impact on my life. When I look back to how things were when this project got started it is amazing to think how much has happened in a relatively short time. I’ve learned a lot from this experience (expect to see a series of blog posts elaborating on this), and I consider it a real blessing that it’s worked as well as it has.

I owe a big thanks to David and Brad of TechStars for believing in me (and the rest of the team) and giving us a huge jump start (as well as plenty of advice/help along the way). I also have to thank Josh who helped get this whole thing off the ground and pushed for us to apply to TechStars in the first place. And of course the rest of the current team: Isaac, Michael, Tom, and Austin who all played an integral role in getting us to where we are today.

So now that I’ve made the blog post equivalent of an acceptance speech, let me wrap this up by just restating how great this opportunity has been. I’ve learned a ton (which is really all I wanted out of this company/experience anyways…the rest has been a bonus) and hope to be able to share that with those around me so that someone else can learn the easy way.

This is not an ending, but rather a new begining…and I can’t wait to see where this path takes me.

Ubiquity: PHP function lookup

Posted by Jon on Sep 22, 2008

So I guess I’m getting into this Ubiquity thing a bit. I’ve created another one to lookup php functions on php.net. Simply subscribe to the command here to add it to your command list.

Once you’ve got the command installed you can lookup PHP functions by simply opening Ubiquity (CTRL+SPACE) and typing “php [function]“. This one was pretty simple to do, but very useful already. I look up syntax for PHP functions several times a day and saving my “Google step” is really nice.

Let me know what you think.

Front End Optimization - Part 2

Posted by Jon on Sep 21, 2008

One fairly common thing in javascript programming is the need to add/edit the html contents of an element on the page. It turns out that there’s actually a pretty significant performance impact on how quickly this update renders depending on how you do the actual edit. The main 5 ways to add/edit html via javascript are the following:

• Document.write() method
• element.innerHTML (before element is in the DOM)
• element.innerHTML (after element is in the DOM)
• DOM manipulations on the element (before element is in the DOM)
• DOM manipulations on the element (after the element is in the DOM)

So the first thing to note is that whenever you’re faced with the question of adding/editing html before or after adding it to the DOM you should always make any changes BEFORE adding it to the DOM. The performance difference of this is pretty significant as if the element is in the DOM the browser must immediately render the changes as the edits are taking place. If you modify the html before attaching the element to the DOM, however, the updates stay only in memory and don’t get rendered until the edits are in place.

This is the single most important factor for performance in this task. In fact, the difference is often so drastic (particularly in IE browsers) that in many cases it’s actually better to remove the element from the DOM, edit the contents, and re-attach it instead of editing it directly. This also allows you to sidestep odd inconsistencies in IE with the innerHTML method (in some cases editing the innerHTML attribut7e of an object can cause a browser cache in IE - in particular when the element is a child of a table element).

Now that we know to edit contents before attaching elements to the DOM, which method should we use? In general, the order of speeds of the methods is as follows:

1. document.write() method
2. element.innerHTML attribute
3. DOM manipulations

Document.write is consistently the fastest across browsers and is often the best method to use when it’s possible. The main drawback of this method, however, is that it can only be used during initial browser load/rendering. If the method is used after the page has been initially rendered it will have the undesirable effect of either crashing the browser or clearing the current page and replacing the entire page contents with the write statement instead. This makes it unusable for adding elements after initial page load or editing the contents of an element after page load, but the pure speed/flexibility (it basically allows you to write any html to the page including inline css and javascript - though javascript tags must be written as a combined string instead a standard script tag [for example "<scr"+"ipt>"]) make it an option worth using when possible.

The next fastest method is the element.innerHTML method. This method is very readable and easy to construct quickly in general. One other suggestion is when concatenating strings to form the innerHTML use a temporary variable and apply it to the element only once. For example:
var innerHTML = "<div>";
innerHTML += “Inner Contents”;
innerHTML += “</div>”;
element.innerHTML = innerHTML;

This speeds up rendering (since it only has to update the DOM/render the change once) and prevents some inconsistencies when using the concatenation/assignment operators in certain browsers.

The last, and by far the slowest, method is to do direct DOM manipulations. This is a broad categorization of using methods like the following:
var element = document.createElement('DIV');
var element2 = document.createElement(’DIV’);
element.appendChild(element2);
This technique has many disadvantages. It renders slowly as each element is added and styled as it is appended to the DOM. Although you can improve this drastically by waiting to attach the top level element to the DOM until all the inner elements are completed, it still doesn’t compare with the previous methods described above. This code is also much harder to read (in general) than the above methods as each style, class, and attribute of the element must be assigned individually. This also leads to much larger code than the previous methods which adds to download time and parsing time. This method is really only suitable when you’re editing specific attributes or doing very minor manipulations.

And that wraps up the 5 different methods. Hopefully someone out there finds this helpful.

Ubiquity: Password Generator

Posted by Jon on Sep 11, 2008

I recently made a stab at another Ubiquity command. This one is a password generator to generate site-specific passwords. Simply subscribe to the command here to get started. I’d suggest manually changing the “mypass” value to some unique string rather than use the default, but this is not technically required.

Once you’ve got the initial command setup you can generate a password by simply opening Ubiquity (CTRL+SPACE) and typing “password”. You can specify the site by adding it as a parameter after “password” or the command will use the current window’s location href as the default. Passwords are an 8 character hash based on the site and the “mypass” key set at install. The password will then be pasted at the current cursor location for your convenience.

Let me know what you think.

Front End Optimization

Posted by Jon on Sep 10, 2008

Over the last year and a half or so I’ve spent a lot of time dealing with javascript widgets on web pages. One thing that I learned very early on is that people don’t have a lot of patience for slow widgets on their blog/website. As a result I’ve spent a fair amount of time trying to hunt down various tips/tricks to speed up load time. Some of these optimizations take place on the backend (actually serving up the javascript), but a surprising amount of optimization can be done on the frontend that many don’t even consider. In order to do my little part to spread the word, I’ve decided to do a series of posts with some helpful techniques to optimize your front end load time on web sites. This will be my first series on the blog, but it seems like a popular enough thing these days that I’ve decided to give it a try.

So first off, why do we care about front end optimization? Take a look at the breakdown for Amazon.com as an example (click the image for a larger view):

The red bar represents the time it took to serve and download the core page from the server (920ms in this case). The rest of the 6.34s is spent downloading images, css, js, and rendering/executing it all. Clearly there is plenty of room for optimization on the front end. (Note: many of the requests have been stripped from the screen shot - limited only to HTML requests - for brevity.) This is just for Amazon - many other sites are even worse ratios for front end vs. back end load time.

Now that it’s clear that there is optimization to be done, how does one get started? I’d recommend getting started with a couple basic tools right off the bat. Here’s my short list:

• Firebug - great addon for Firefox with tons of features helpful for front end optimizing (among other things)
• YSlow - an addon to an addon, YSlow extends Firebug to give it a new tab with a bunch of handy features. It also has some tips built right in and will tell you which you’re doing and which you’re not
• HttpWatch - an HTTP traffic sniffer for IE.

In my next post I’ll start covering some basic techniques to improve performance. Got a tip of your own? Let me know in the comments.

Ubiquity

Posted by Jon on Sep 9, 2008

For those of you that don’t already know, Mozilla Labs recently released an early version of Ubiquity. Ubiquity is a command line interface that opens up new options to interface with your browser and integrate your web apps. Check out the video for more info.

Overall I think this project is very interesting. For the techies/power users out there it provides a much more efficient way to do complex tasks. This type of UI lends itself well to the repetitive tasks that you face on a daily basis (in particular the email commands in Ubiquity are a great example of this). The real power of Ubiquity comes from its expandability though. New commands can be added by adding simple javascript functions to the addon. These additional commands can then be shared with a special link tag in a document and can even be automatically updated (if the user has given permissions for this).

I’ve taken a stab at my first Ubiquity command. You can get it here. It adds a command to add RSS feeds to Newsgator (my RSS reader of choice). Just hit CTRL+SPACE (to open Ubiquity) then execute the command “add-to-newsgator” and it’ll search the current page for an RSS feed and add it to your Newsgator account.

What do you think of Ubiquity?