Don Havey

Curiobot is in the middle of a structural makeover and this morning I decided that the code needed a little condensing. Most popular Javascript applications simplify function and variable names to just a few letters, and some CSS-heavy pages use a similar unique identifier to cut down on bandwidth. This technique also obfuscates your code, if you’re worried about people stealing it and using it for their own (evil) intentions.

In a big old “Web 2.0″ (*gag*) application, condensing your code can reduce your page load times by a serious percentage. I think it’s especially important if you’re offering content for mobile users, where every kilobyte counts. Replacing 300 occurrences of 12-character variable names with 2-character names can save you 10*300 bytes = 3kb per download. That’s probably 5%, maybe 10% of your total script/CSS/HTML weight… so it adds up on high-traffic applications. Of course, as most web developers are quick to point out, I pity the poor bastard who has to try to understand and/or modify a function called “zx()”. Ever taken a look at Google’s scripts? Totally incomprehensible for that reason.

Technically, you could name up to 676 (26×26) functions, variables, or classes using a two-letter pair, but the problem you run into is that when your content is not perfectly isolated from your page’s structure, you can’t simply search-and-replace the page to find every occurrence of the classname “ea” without running into it in a sentence somewhere (”I went to the beach” or “Welcome to my neat-o website”).

For the minimum amount of content-structure collisions, I want to favor the two-letter combinations that are used least frequently in my content. So I wrote a quick Processing app to examine any given text and return an ordered set of letter pairs, sorted according to their frequency. Here are the results for a few sample texts:

• The first two chapters of War and Peace
• The front page of Boing Boing (including html)
• The first five chapters of The Little Prince (English version)

The pairs that are not in bold were not found at all in the sample text (use them for function/class/variable name replacements). Those that were found are displayed by frequency.

Here’s the code. Try inputting text that corresponds to your particular usage for better results.

So the next time you’re thinking of renaming “load_excellent_content()” to “le()”… don’t. Try “vq()”.

I was digging through some Google Maps source code looking for a way to - ahem - repurpose the colors in the map images (cool project coming soon), when I came across this:
<div style="position: absolute; left: 0px; top: 0px; z-index: 107; cursor: default;">
  <div style="position: absolute; left: 143px; top: 29px; z-index: -4364995; display: none;" class="gmnoprint">
    <div style="overflow: hidden; width: 25px; height: 25px; z-index: 1; position: absolute; left: 0px; top: 0px;">
      <img style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 690px; height: 786px; -moz-user-select: none;" src="/intl/en_us/mapfiles/iw2.png">
    </div>
    <div style="overflow: hidden; width: 25px; height: 25px; z-index: 1; position: absolute; left: 224px; top: 0px;">
      <img style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -665px; top: 0px; width: 690px; height: 786px; -moz-user-select: none;" src="/intl/en_us/mapfiles/iw2.png">
    </div>
    <div style="overflow: hidden; width: 98px; height: 96px; z-index: 1; position: absolute; left: 76px; top: 101px;">
      <img style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: -690px; width: 690px; height: 786px; -moz-user-select: none;" src="/intl/en_us/mapfiles/iw2.png">
    </div>
    [...]

Anyone else get what’s happening there? They’re using only one image to create that little call-out marker bubble. It’s really quite brilliant. Just one large (but light) png file is repeatedly repositioned to create all of the borders and corners of the bubble, allowing for dynamic sizing without image stretching.

I felt like an archaeologist when I unearthed it… and of course, my first thought was “why didn’t I think of that?”