Craig Andrews

I'm a Senior Software Engineer. I work on quite a few cool projects (I'm especially fond of Java, Web 2.0, and things that are new to me). I'm also very much a Free Software enthusiast.

XMPP/Jabber: candrews@integralblue.com

AIM: molecularcraig

Posts written by Craig Andrews

August 7

oEmbed

oEmbed is a relatively simple concept, which can be basically thought of as hyperlinking to the next level. According to oembed.com: “oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.”

Today, if I want to embed this Youtube video into a Wordpress blog (such as this one), I need to complete these steps:

  1. Start typing my new blog post
  2. Switch browser windows, and go the Youtube video’s page
  3. Copy the “embed” code, which is kind of crazy looking:
    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Pube5Aynsls&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Pube5Aynsls&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
  4. Switch back to the Wordpress window, and paste the embed code (as HTML) into my Wordpress post

Clearly, that’s not ideal. Figuring out where the embed code is, and how to copy and paste it as HTML into Wordpress is not very easy, or intuitive. Now consider a future where Wordpress is an oEmbed consumer, and Youtube is an oEmbed provider. To do the same thing, these are the steps:

  1. Start typing my new blog post
  2. Click the “embed” button in Wordpress
  3. Enter the regular web browser link to the Youtube video in the box
  4. Click “OK.” Wordpress will automagically figure out how to embed the video, and do it for you.

No copy and paste, no tabbing between pages, and best of all, no code. The user doesn’t need to know what oEmbed is, or how it works.

oEmbed can be used in more creative ways, too. For example, if you link to a Youtube video on the microblogging site identi.ca, the link will get a little paper clip next to it, and when clicked on, the video player will open in a lightbox. For example, take a look at this notice.

At this early stage of oEmbed’s lifetime, there are not many providers or consumers. To jumpstart the process, Deepak Sarda created oohembed, a service that acts as a provider for many sites that don’t yet support oEmbed themselves (since Youtube isn’t an oEmbed provider, identi.ca uses oohembed, and that’s how the video embedding notice example works). oohembed supports a number of popular sites, such as Youtube, Vimeo, Hulu, Wikipedia, and Wordpress.com.

Hopefully, we’ll see more and more sites and pieces of software support oEmbed as both providers and consumers to improve their user experience. Wordpress 2.9 will likely be an oEmbed consumer (so the theoretical process I gave above may soon become a reality), and I’ve created a plugin that makes Wordpress an oEmbed provider. Here’s to an easier (to embed, at least) future!

This post was originally published on my blog at http://candrews.integralblue.com/2009/08/oembed/ – please comment and discuss this post at that location. Thanks!

May 29

Compression (deflate) and HTML, CSS, JS Minification in ASP.NET

As I’ve already demonstrated, I like performance. So I cache and compress a lot. When I was put onto an ASP.NET project at work, I obviously wanted to optimize the site, so here’s what I did.

Taking some hints from Y! Slow, I decided I wanted to:

  • Get rid of all the MS AJAX/toolkit javascript, as we used jQuery instead
  • Combine all the javascript into one request
  • Combine all the CSS into one request
  • Minify the CSS
  • Minify the javascript
  • Minify the HTML
  • Deflate everything (gzip is slightly larger, and all modern browsers support deflate, so I just ignored gzip)

I followed the directions outlined at this site to override the ScriptManager and prevent it from including the Microsoft AJAX javascript. Removing uunsed code is always a good thing.

Combining the javascript was easy. Starting in ASP.NET 3.5 SP1, ASP.NET’s ScriptManager supports the CombineScript tag inside of it. That was easy.

Combining the CSS was not so easy, as there’s no such thing in ASP.NET as a “ScriptManager.” I had two options: make a CSS manager (and use it everywhere), or figure out another way. Never taking the easy route when there’s a more interesting (and more front end developer transparent) way, I decided to make a filter (implementer of IHttpModule) to find all the “<link>” tags in the page header and replace them with one “<link>” to a combined CSS handler (which I called “CssResource.axd” to parallel ScriptManager’s “ScriptResource.axd”). Then, in my IHttpHandler implementation which handles CssResource.axd, I read the querystring, grab the requested CSS files from the file system, combine them into one string, and return them. CSS combining done.

For minifying the CSS and Javascript, I used the C# version of YUI Compressor. I used the original (Java) YUI Compressor before, and had a great experience, so picking this version was a no-brainer. In my aforementioned filter, I intercept requests for “ScriptResource.axd” and “CssResource.axd,” apply YUI Compressor to the response content, cache the result (so I don’t need to minify every single request), then return.

I also minify inline (as in, mixed with HTML) CSS and Javascript. Also in my filter, if the return type is HTML, I scan for “<script src” and “<link rel=’stylesheet’ src=” and minify their contents. This minification does have to happen for every request to that page, unless that whole page is cached.

Finally, the last thing the filter does is check if the browser accepts deflate compression. If it does, the filter compresses the stream. In the case of “ScriptResource.axd” and “CssResource.axd” requests, the deflating is done before the response is cached, so requests for those resources don’t need to be re-deflated for every request (their content is static, unlike regular html requests, so caching the whole response is okay).

The initial (cache empty) page load was 780k before I started. When I had finished, the page load was only 234k – a 70% decrease.

You can download the code from this site. To use it, you need to modify your web.config.

<system.web>
<httpModules>
<add type="CompressionModule" name="CompressionModule" /><!--This must be the last entry in the httpHandlers list-->
</httpModules>
<httpHandlers>
<add verb="GET,HEAD" path="CssResource.axd" validate="false" type="CssResourceHandler"/>
</httpHandlers>
</system.web>

I cannot claim 100% credit for all of this work. I got many ideas from just browsing web search results, trying things out, and combining ideas from various sources. If I have not credited you, and I should have – I apologize, and will be happy to do. But I can say, that I did not just “copy and paste” this from anywhere – I’m confident that this work cannot be classified as a derived work of anything else. With that in mind, I release it into the public domain.

This post was originally published on my blog at http://candrews.integralblue.com/2009/05/compression-deflate-and-html-css-js-minification-in-asp-net/ – please comment and discuss this post at that location. Thanks!

August 11

Shuttleworth on Project Management

Mark Shuttleworth, of Thawte fortune and Ubuntu fame, has some (IMHO) neat ideas on how to manage software development efforts that may be interesting to spend a few human processing cycles considering.

http://lwn.net/Articles/292031

Despite the article being written for Free Software and Linux, I think it’s incredibly relevant to all development efforts – read it as if he’s talking about Molecular projects, and not Linux distributions.

Here are two key paragraphs:

One of the key requirements that Shuttleworth sees is the need to “keep the trunk pristine”, by doing integration on the trunk and feature development on branches. Along with this is the need for more and better tests. While not necessarily believing in test-driven development, he certainly leans that way. In any case, all the tests should pass before committing to the trunk.

Many projects do not yet have an extensive test suite, but this needs to change. He quoted a Chinese proverb that “the best time to plant a tree is 20 years ago, the second best time is today”. He mentioned that he is working on a robot that controls the trunk of a development tree. Developers will request it to merge from a branch, so the robot merges the branch and runs all the tests. If the tests pass, it commits, otherwise it gets kicked back to the developer.

This approach sounds pretty good to me.

July 28

Distributed services – the past, present, and future of the Internet

The Internet started as a distributed network – ARPANET. Its protocol, TCP/IP, was designed so that hosts anyone could communicate without relying on a central authority, and if any one host went down, it didn’t affect the other others’ ability to work. Gradually, as ARPANET evolved into the Internet, that distributed architecture became more important. Today, the Internet is pretty much everywhere, from nanny cams, to laptops, pda’s, servers, data centers, and telephones. And that redundancy and distribution is critical for the whole thing to work.

Great… so I’ve just wasted a paragraph telling you what you already know, right? The interesting part is that business doesn’t like distributed services, and has been trying since the beginning to stop them. For example, the World Wide Web is distributed. Anyone can set up a web server, and then anyone else can view pages on it. I can set up a web server on my PC and someone in China can take a look around. No reliance on Google, or Microsoft, or anyone else. But then, how do businesses such as Google and Microsoft make you rely on them, so they can charge you for their services, or force you to view advertisements, so they make money?

We have this constant struggle of the technology pushing towards decentralization, and the business interests pushing towards centralization. Let’s take Amazon S3 as an example. S3 is a very cool distributed computing technology. The basic idea is that one can write software specifically against S3’s API and then upload it to S3, and the service will dynamically provide more or less resources depending upon the site’s specific needs at any given time. If the site is hit by digg or slashdot – that’s fine, S3 will allocate more processing power. When the surge ends, the power is scaled back, and the payer of the S3 bill saves money.

So far so good, right? But now there is a situation where a vast number of sites have a single point of failure. They also have no portability to other providers. What if S3 goes down? All the sites relying on it go down. What if S3 raises their prices? The sites can’t change providers; they have no choice but to pay.

S3 is relatively new, so the technologists haven’t yet come up with a complete alternative, but some are in the works. But, consider Twitter. Twitter is a microblogging service that allows one to write 140 characters of one’s thoughts. It’s tremendously popular, having over a million users worldwide. But what if Twitter became unreliable? What if they stopped introducing new features, or broke existing capabilities? What if their terms of service weren’t to your liking? The answer to all these questions used to be “deal with it” or switch to another site just like Twitter, that inevitably evolved the same problems. Twitter isn’t distributed – you can’t just make your own Twitter and still communicate via your new site with your friends on Twitter (like how an GMail user can email a Molecular address), nor can you contribute the Twitter software. Your complaints fall on deaf ears.

It took a while, but the technologists responded with Identi.ca. Identi.ca lets anyone download the software the site runs (called laconi.ca), make changes, and run their own server. If identi.ca becomes unstable, the owner starts behaving badly, or anything else disagreeable happens – the users can simply leave. Their data comes with them, and they can still communicate with others on the OpenMicoBlogging network. Imagine that… if you don’t like the service, you can leave.

There are many examples of services changing from locked down to distributed, too. Instant messaging is one: there used to be many many protocols and clients people had to run, such as AIM, Y!, MSN, etc. Then XMPP (aka Jabber) came along. With XMPP, one provider going down only affects those users and not the whole network. For example, when AIM has trouble, every single user of AIM has trouble. When GTalk goes down, I only lose communication with those people on GTalk, I can still talk to my friends on other XMPP servers (for example, when the aol.com email server goes down, it doesn’t affect my ability to send email to gmail.com users from my Molecular address). The damage is limited, and people have choice. Those users of GTalk, who are now seriously annoyed with the service for going down, leave to another XMPP service, and they can still talk to all their friends, just the same.

Microsoft Passport failed for the same reason. People didn’t want to rely on Microsoft alone for their ability to log in to disparate services. Instead, OpenID came along, which allows users to pick, and even change later, who their identity provider is. And now bigger players are supporting OpenID.

These distributed services provide a huge incentive for service providers to keep providing quality services, that are stable, work well, and continue improving. With the constant threat of users simply leaving, these services must always be on the look out for improvements, and they can’t simply add tons of advertisements, or paid registration, when looking for money.

In the short term, the Twitters and AIMs of the world will continue to have huge user bases. But over time, they can’t keep up with the freedom and higher quality of the distributed alternatives. Look around – is the centralized Prodigy still around? How’s Delphi doing? For that matter, isn’t the walled garden of AOL in trouble? Yet the World Wide Web and the email system keep going.

May 12

Resig’s Processing.js

John Resig (of jQuery fame) released processing.js on Thursday. If you haven’t checked it out, you should! It is really impressive. On the newest versions of some browsers, and on the next version of others, it’s possible to pretty much duplicate the capabilities of Flash, but entirely using markup and Javascript.

The real excitement comes as this could be a blow to Flash, Silverlight, and company. Christopher Blizzard makes the points why this is so exciting on his blog:

Just imagine for a second if those sites let people share and display neat little graphical widgets with source where people can try out different objects and learn from each other’s source code. Easy to drop in graphical interactive elements into other sites with the same transparency and zero-barrier to learning we’ve seen from the rest of the web. Think about how fast that stuff might spread on the web, how we might end up with people sharing and learning together and how much better the experience on the web might be in the end. That iterative process is one that needs starting points and what John has done is give us a great starting point.

I think this is where it gets interesting. You can only go so far when you build a project, then when it’s completed, forget it, and never share it. 99% of our projects are this way. But the kind of thing that processing represents is real Web 2.0 – truly collaborative, exciting stuff! Unlike Flash or Silverlight, others will read the code, use it, share it, and probably credit us – spreading not only Molecular’s image as forward thinkers and great developers, but also the image and brands of our clients. What would happen if, throughout the years of all the projects we had done, other developers we never met could grab our work, and combine it in ways we couldn’t imagine? What if we could do it to our projects? What if we could leverage the work of others more effectively?

Technorati Profile

Browse posts by month

Browse by author

We're always looking for rockstars

Come take a look at careers with Molecular