ryan.sh

Which loads faster?

2010-07-07T14:58:00-04:00

I’m pleased as punch to announce whichloadsfaster.com, an open-source web performance tool where pages compete head-to-head in your browser to see who’s fastest!

It started as an off-hand remark by my buddy, Ricardo: “You should make a tool that can load two web pages side by side so you can see which one loads faster.” I backpedaled a little at first, the way an overworked programmer does when someone suggests sticking another iron in the fire: “Um, I don’t know if that would really work out without writing a browser plugin.” This, of course, meant something more like, “Dude, I’m lazy, and that sounds like a lot of work just to make another toy for our sales and marketing guys.”

Ricardo had me though, it would be cool to load two pages side-by-side and see the differences in real time. Dan, one of the aforementioned sales and marketing guys, was grinning next to us, enthused in an infectious way we hadn’t seen nearly enough of since the arrival of his newborn. “Ok guys,” I entreated, “maybe we can do it with iframes. I’ve been having a lot of fun with jQuery lately, so let me play around with it and see what I come up with.”

It was a lot of fun to see two pages race against each other! Performance testing can be rather bland—staring at waterfalls, repeating tests—but watching a competition seems to be one of those things that humans are hard-wired to enjoy, and it tickled me like Elmo to think that I could take something I’m passionate about—web performance—and make it a bit more appealing!

Don’t get me wrong, there are many good tools for web performance testing (notably, the open source webpagetest.org and showslow.com, which I will be working to integrate), but there are a few areas where I think whichloadsfaster adds some wicked weapons to the web performance warchest:

Competition. Since it’s easy to pit pages against each other, it becomes natural to check the performance of your most (and least) favorite sites, adding to the argument that speed is a competitive advantage.
Testing in real time, while you watch. This has a big impact factor because a “real” test holds your attention.
Support for many browsers (IE 8/7/6, Firefox 3.0+, Chrome, Safari, most of mobile WebKit). Because of the detailed and invasive nature of performance testing, most performance tools are browser-specific. We make the tradeoff of collecting fewer events for the convenience of running the tool in every browser with no install.
Finally, there is a sharing link that developers can send out to run on their friends’ browsers. This feature is something I hope to develop further by adding a beacon API to automatically retrieve the results (see below).

Moving forward, I would like to improve whichloadsfaster in three major areas:

Automation of test results. The plan is to make a beacon API and a couple of example servers to collect the data (php, rails, django). This way, developers can just send out the link and sit back and see their performance results roll in across different locations and browsers. Fully automated testing would be as simple as causing a remote test machine to load the URL you want with your desired browser. This could be done with selenium or a similar library, or possibly even built into whichloadsfaster (have to work around caching issues).
User perception testing. Since we’re right in front of the user, we can ask them which page appeared to load faster and get a better handle on that ephemeral but most important metric, time to first interaction. I’m really excited about this one!
Integration with other tools. I plan to add a link to compare your pages on webpagetest.org using the video film strip feature, and also to test the individual pages in the waterfall tool. Since this project is about spreading the web performance gospel, I’m open to linking to any useful performance tool.

A call for help

The one problem that really bugs me is that whichloadsfaster doesn’t play well with sites that try to break out of the iframe. This includes major sites that users want to compare, like myspace, twitter and nytimes.com. It’s a terrible user experience to type in one of these and watch it unexpectedly take over the screen. I’m completely sympathetic with using framebusting to avoid clickjacking attacks, but I truly think this project is a legitimate reason to frame a site, and I want to create an excellent user experience (I mean, have you noticed the keyboard shortcuts?).

I’ve successfully tested a framebuster-buster that prevents sites from breaking out, but one of the side effects is that it also prevents outgoing links. In the end, the users should at least know what is going on and why the site can’t be compared. I’ll continue to work on this, but if you or a developer you know has expertise in this area, I would love suggestions and advice via email or the github issue.

Thanks for your feedback and involvement. Here’s to making the web just work for everybody on the planet!

Homemade iPad Case

2010-05-12T00:11:21-04:00

A few days ago I popped into the Pasadena Apple Store to look at iPad cases. I had thought that my requirements were fairly simple: a landscape slipcase with easy iPad insertion/removal that can itself be easily moved in and out of my bag. Everything at the store, however, seemed bulky, expensive and inelegant.

His spidey sense tingling at my obvious indecision (or perhaps just tickled by his curly beard), an impetuously precocious Apple employee approached. His admonition, however, was not one I expected: “now, nobody from Apple is telling you this, but if I were you, I’d go to etsy and buy a handmade case instead.” Cue my white liberal guilt.¹ Being thus rendered unable to feel good about buying yet another petroleum-derived consumer product made by underpaid workers in the third world, I decided to make my own case.

To be fair, the case is made from vegetarian leather, which is still petroleum-derived², but I rescued the material from a doomed college project ³ so I think it technically constitutes recycling.

The inside of the case is made from car headliner fabric. You know, the kind that you used to get yelled at for picking off the roof of your parents’ Plymouth Volare? No? Was that just me?

The entire case is made from two pieces of fabric, folded onto itself in various ways. All edges had to be folded over twice because the veggie leather is backed with fuzzy white stuff which doesn’t look good when it’s exposed. The exact dimensions are a closely guarded secret ⁴.

Seams were sewn on a Singer 301a that belonged to my late grandmother. I’m afraid I have a long way to go in learning how to use it properly, but I hope my attempt would have made her proud.

Using scotch tape along the seams really helped the machine glide along without bunching the material. The tape can be removed afterward by carefully pulling perpendicular to the seam, otherwise you end up with a bunch of small tape pieces that must be pulled out from under the thread by hand.

The finished case works nicely for propping the iPad up while typing on the train.

I enjoyed this project immensely. It was a real kick to make something I’ve never attempted before from materials that were lying around. Hope you enjoyed it too!

More pictures and comments can be found at this project’s flickr set →.

Oh, and to my bearded muse in the bright turquoise t-shirt, if you’re reading this and still haven’t made up your mind about your own case, I’ll totally make you one of these.

Steam Cars

2010-05-02T19:26:00-04:00

A couple Saturdays ago, @kriskowal and I found ourselves at a meeting of the Southern California chapter of the Steam Automobile Club of America of which Kris’s father is president. It’s been a long while since I’ve seen these steam cars in action. Getting to ride on these gentle and majestic contraptions was a real treat:

Kris’s father brought the Dampf ‘Bil, a wood-burning, steam powered go-kart of sorts:

Kris explains more about how it works:

It’s a really simple car, a model of the minimal steam powered automobile, built on the chassis of a wood trash-cart. The steam generator is a Dixon Boilerworks “fire tube” boiler; it burns wood under a five gallon reservoir with tubes that allow the heated air to exchange with the water. It operates between 40 and 75 PSI. The steam drives two 5” tall double-acting steam engines, offset by 90 degrees, attached directly to the rear-right wheel with a bike chain (no derailleur). The boiler is fed by a highly ineffective hydraulic landing gear pump from a 2 gallon antifreeze container repurposed for water. The boiler also has a garden hose attachment which we use to fill the boiler when cold, and to “blow down”: use the boiler’s remaining pressure to empty the boiler.

Look at it go! (that’s me riding.)

The only problem is that one tends to get covered in soot while driving it (that’s Kris):

As you can see, fun was had by all. :)

Easter Dinner

2010-04-08T01:01:00-04:00

Lamb by yours truly. Potatoes by @ErikDreyer and Diana. Salad by @jasonyo and SJ. Asparagus by steam pot.

The salad contained spinach, pears, medium-boiled eggs and from-scratch candied walnuts! It was quite a hit. The potatoes had tons of garlic, and complimented the lamb very nicely.

The lamb is from an epicurious recipie that I followed pretty closely. We started with two lamb legs from Costco totaling about 8 pounds of meat after trimming the excess fat. I tucked substantially more garlic into the meat than recommended—approximately 8 cloves cut into about 32 slices—and let the prepared meat marinate overnight.

Cooking was done on the propane grill, and turned out to be the biggest disappointment of the meal (at least to me) because although the flavor was great, the smaller pieces of lamb were overcooked. I had the thermometer in one of the larger pieces and cut the heat when the middle of the largest one reached 145°F. In hindsight, I should have measured each piece and pulled it from the heat when it reached 130°F, as recommended by the recipe. Oh well, one of the main reasons to write this down is so I can remember what I did wrong. Aren’t you glad we live in a world where we can google our past misteaks?

…

You may have noticed the topic of my site inching insidiously toward food. To tell you the truth, I’m just as surprised as you are. I mean, I’m supposed to be writing about programming, poetry and bad puns, but I end up taking pictures of dinner instead.

Well, them’s tough beans (fava maybe? Haven’t attempted those yet). The food posts will likely continue as I have no plans to imperil my excellent relationship with eaten things anytime soon.

Stay tuned for a large flickr set of food-themed photos! Also expect some posts about my new espresso machine as I continue my relentless pursuit of the god shot.

The Cylon Among Us

2008-11-28T04:42:44-05:00

In a shocking confirmation that all this has happened before, and will happen again, Earth scientists have discovered hitherto unnoticed monuments from the ancient Cylon race, hiding in plain sight in the Los Angeles freeway system.

The monuments are all located in Garden Grove, along California State Route 22, and appear to have been integrated into the freeway’s sound wall. Mysteriously, no-one, not even Garden Grove residents, seem to have noticed the monuments until now. Construction plans for the sound wall show openings for the monuments, but make no explicit mention of them. Neither Caltrans nor the OCTA would comment on the construction plans.

Resident Nicki Clyne, a flight mechanic and a regular on the 22, is credited with first noticing the structures. “It’s strange to drive past something every day and never see it. When my daughter was born, I was really distracted, but as she got older, I began to notice things that I used to miss. Discovering that something so close was of Cylon origin really threw me for a loop.”

We approached several experts in the field of speculative Cylon anthropology who independently verified that the monuments are indeed of Cylon construction. “It was the eye mosaic that pushed the monument origin into the realm of statistical certainty”, said Dr. James Callis, Senior Fellow at the Forensic [cylon] Research Advancement Centre (FRAC). “Throughout our conception of Cylon history, the ‘scanning eye’ has been an iconic design centerpiece for the more mechanical models. Through the process of elimination, we’ve concluded that the only explanation is that the monuments must have been erected by the ancient Cylon.”

Researchers from FRAC have put forward the theory that the placement of the monuments influenced the 22 freeway’s route from the very beginning. Caltrans and OCTA refused to comment on this theory, but city officials have welcomed the new additions as part of the rich cultural heritage of Garden Grove, and are in the process of planning a 3 day festival to commemorate the discovery.

Photo Credit: Vi Tran

Django Login Required Middleware

2008-11-10T19:58:00-05:00

I’ve been doing a lot programming in the Django web framework lately and thought this code snippet that forces a user to login to your site before viewing any pages might come in handy. If you’re already a djangoperson, skip ahead to the code, otherwise, I’ll give a bit of background.

In Django, your code that responds to each incoming request is organized into functions called views which take your HTTP request and turn it into a page that the user can view. It’s a common practice in Django to augment your views using a python construct called a decorator. This allows you add additional functionality without having to write a bunch of code. For example, Django provides a decorator called login_required that takes one of your views and prevents a user from seeing it unless they are logged in:

@login_required      # This is the decorator! One line... simple.
def my_view(request):
    # Do something here to turn the request into an HTML page.
    # ...

Sometimes it’s a real pain to use the login_required decorator all over the views of your complicated site. What if you forget to add it to view that contains sensitive information? Fortunately, Django allows you to write middleware that gets access to each request so you can add functionality that can be applied to your whole site. My middleware simply intercepts each request and redirects users to the site login page if they haven’t logged in. It also allows you to give of exceptions (in the form of regular expressions), i.e. pages that can be viewed without logging in:

from django.http import HttpResponseRedirect
from django.conf import settings
from re import compile

EXEMPT_URLS = [compile(settings.LOGIN_URL.lstrip('/'))]
if hasattr(settings, 'LOGIN_EXEMPT_URLS'):
    EXEMPT_URLS += [compile(expr) for expr in settings.LOGIN_EXEMPT_URLS]

class LoginRequiredMiddleware:
    """
    Middleware that requires a user to be authenticated to view any page other
    than LOGIN_URL. Exemptions to this requirement can optionally be specified
    in settings via a list of regular expressions in LOGIN_EXEMPT_URLS (which
    you can copy from your urls.py).

    Requires authentication middleware and template context processors to be
    loaded. You'll get an error if they aren't.
    """
    def process_request(self, request):
        assert hasattr(request, 'user'), "The Login Required middleware\
 requires authentication middleware to be installed. Edit your\
 MIDDLEWARE_CLASSES setting to insert\
 'django.contrib.auth.middlware.AuthenticationMiddleware'. If that doesn't\
 work, ensure your TEMPLATE_CONTEXT_PROCESSORS setting includes\
 'django.core.context_processors.auth'."
        if not request.user.is_authenticated():
            path = request.path_info.lstrip('/')
            if not any(m.match(path) for m in EXEMPT_URLS):
                return HttpResponseRedirect(settings.LOGIN_URL)

Example:

# settings.py

LOGIN_URL = '/login/'

LOGIN_EXEMPT_URLS = (
 r'^about\.html$',
 r'^legal/', # allow any URL under /legal/*
)

MIDDLEWARE_CLASSES = (
    # ...
    'python.path.to.LoginRequiredMiddleware',
)

While writing this, I found similar solutions by davyd and a discussion on the django-users list, but neither had the flexibility of using regular expressions.

Please let me know if this was useful to you, or if you find any problems!

¹	While I am white, I’m not as that liberal and harbor virtually no guilt. ↩
²	Which means it’s made from animals that died naturally a long time ago, rather than recently by human hands. ↩
³	I was trying to make a folding poker table with a nice felt surface and leather border. Then someone stole all the wood pieces I had cut along with the brass hardware. Sad face. ↩
⁴	Meaning they were pulled directly from my posterior region and I might not be able to reproduce them if I wanted to. ↩