Ajaxlights: In-Browser Javascript Caching, Sounds, and Cross Domain Brawls

July 8th, 2008

Inventive front end developers keep finding ways to push the capabilities of the browser. A recent favorite of mine, quipt, allows you to dynamically load javascript files and automatically cache them - get this - in the window.name attribute.

Some websites abuse sound, but this does not take away the fact that sounds can be an extremely useful UI component that is certainly under-utilized on the web. If you have a good use case, then let SoundManager2 take care of the heavy tech-lifting.

Follow-up on last week’s mention of “TCP sockets” in the browser: HTML 5 WebSockets.

Ajaxian report and comment roll on Microsoft’s paper about cross domain request insecurities.

If you ever need to sanitize HTML for href="javascript: ... ", don’t do it by blacklisting javascript: ! The Javascript Protocol Fuzzer is a good reason why. Check it out.

Ever wished your favorite webapp could be native to your OS? Do you use OS X? You’re in luck - check out Fluid. Freakin’ awesome.

Not Ajax related, but totally cool: a visualization of the birth and growth of Python over time.

Ajaxlights: TCP, bindings, jQ file tree, on-demand js

July 3rd, 2008

“TCP sockets” in the browser:

  1. var conn = new TCPSocket(hostname, port)

  2. conn.onopen = function() { alert(‘connection opened!’) }
  3. conn.onread = function(data) { alert(‘RECEIVE: ‘ + data) }
  4. conn.onclose = function(data) { alert(‘connection closed!’) }

  5. conn.send(‘Hello World’);

If you like Cocoa bindings, keep an eye out for the opening of http://objective-j.org/. Check out the demo app, 280 Slides.

jQuery UI is looking more and more promising. A recent file tree component looks great.

Resource/packet management is still a bit of a drag in javascript. Here are two great candidates: module.js and ensure. Alex Russel used similar techniques to push initial dojo load size down to 6k!

Javascript is on the verge of being typed. Ecmascript 4 can now be converted into 1.2 javascript with Mascara. On a related note, here’s a nice writeup/example on the potential usefulness of typed js.

Oh, and on an unrelated note: if you haven’t checked it out yet, go get jott.com. I now twitter only by talking :P

Got myself some Wheels - Meet my 250 Comet

June 25th, 2008

I woke up this morning with a DMV appointment at 10:30. I have to admit it - while I passed the MC exam straight off I failed the regular drivers license test two times before I hit it on the third and last chance.

After a celebratory Jamba Juice, I’ve got the MC fever and ask Lauren if we can’t go to check out some bikes. You know, just for kicks. So we end up at a bunch of Harley Davidson type of places, with big choppers and lots of chrome. Not my scene. After a quick visit with a fat dealer in an Oakland motor vehicles dealership who greated my suggestion of a Kawasaki 250 with “Bigger is Better son! You wouldn’t want your dad to see you on that now, wouldya?” Wrong audience big guy.

So we head to the city where I’d earlier found this great bike shop without anyone trying to sell you something you didn’t ask for in the first place. I go over all my reasoning, double check prices and options, and make the big leap. And there it is - my bike

And a video teaser (though you know I won’t be doing this)

Info page from the maker, Hyosung: http://tinyurl.com/58sfnd

I left the bike in their hands while I take the safety course. However, I will need my own helmet and gloves either way so I got myself a few souvernies to play with in the meantime.

Lauren also got herself a pair of gloves, as she took the test with me and will also be taking the safety course to get her license in the weeks coming up.

An eventful day to say the least!

Jot.com - Blogging by Speaking!

June 23rd, 2008

I am currently writing this blog post from my cellphone - not by writing, but by speaking. This will be transcribed by Jott.com, and automatically posted on my WordPress blog at blog.narcvs.com. Very impressive. Incredible work done by Jott.com.

listen

Powered by Jott

Update: As I’m not yet used to blogging oraly, I’ve done some grammatical edits.

My talk at Google

May 22nd, 2008

That’s right - I got to give a lightning talk at the downtown Chicago offices tonight! 

My flash talk on gRavix at Google offices downtown Chicago

It was a flash 9 minute talk on my Google Summer of Code project gRavix with the Globus Alliance.

Thanks a bunch to Borja, Karl and Cord for organizing the event, as well as (of course) google.

How many answers are there to a yes/no question?

May 21st, 2008

8.

How many answers are there to a yes/no question?

Along with an additional option, in case you just happen to know that you’ll be answering the exact same thing forever (which, assuming a uniform distribution of probability, will happen with a likelihood of 1 in about 90 billion…)

Thanks Signal vs Noise for the entertainment (not their design, only their picture).

Javascript optimization guidelines

May 19th, 2008

The Opera dev guys have put together a great list of JS optimization primers. Most of them I already follow, but a few of them were pleasant surprises.

The ones I already follow and which require little or no explanation or justification are:

  • Avoid using global variables
  • Avoid for-in in performance-critical functions
  • Pass functions, not strings, to setTimeout() and setInterval()
  • Isolate uses of eval and with
  • Don’t use try-catch-finally inside performance-critical functions
  • Avoid using with
  • Avoid using eval or the Function constructor
But these were the gems:
String Value to Object conversion when calling methods
The difference between 

var s1 = '0123456789';

and

var s2 = new String('0123456789');

is that s2 is an object with a bunch of associated methods, e.g. charAt and split, while s1 is just a value without these methods. When you call a string method on a string value, e.g. s1, the runtime engine has to convert that value into a temporary string object, call that method, return the value, and then discard the temporary object.
Who would have thought?
String concatenation
Similarly, the difference between

a1 += 'x' + 'y';

and

a2 += 'x';
a2 += 'y';

is that the concatenation of a1 requires a temporary variable to store ‘xy’ in before this gets appended to a1. That extra memory and garbage collection cycles is saved in the creation of a2.
Primitive operators can be faster than method calls
If you really need the very last ounce of performance, instead of writing

var min = Math.min(a,b);
A.push(v);

use the slightly less convenient but faster

var min = a < b ? a : b;
A[A.length] = v;

This one certainly makes sense - but as always: first get it right by using whatever means you feel most comfortable with. Then if you really need it, get primitive.

Google’s Treasure Hunt Hint Hint

May 18th, 2008

Google is hosting another great treasurehunt at http://treasurehunt.appspot.com/. A good friend (and awesome upcoming coder) Lauren and I are working at the library together and we just had a go at it. It turns out there’s a beautiful connection between the answer for any given n*m grid and Pascal’s triangle. Keep your eyes open for those numbers!

Kudos to Lauren for spotting the connection: “Wait isn’t this those, whaddumacallit, triangle numbers?”

                             1
                         1       2
                     1       4       4
                 1       6       12      8
             1       8       24      32      16
         1       10      40      80      80       32
     1       12      60      160     240     192       64
 1       14      84      280     560     672      448       128

Update: After a few premature victory celebrations, we finally got the answer in the form of a short Ruby script. With the following methods…

class Fixnum
  def factorial
    if self <= 0
      return 1
    else
      return self * (self-1).factorial
    end
  end

  def choose n
    ((self.factorial)/(n.factorial*(self-n).factorial))
  end
end

The solution is a simple one-liner.

Facebook Stalker List Mystery - My Guess

May 13th, 2008

What?
My guess on what’s behind the mystery Facebook Stalker list that shows up when you hit “.” (period) in the friend search box. (see http://gawker.com/390004/a-facebook-oddity).

How?
The search box detects key strokes in order to give you a list of friends you might be looking for. There are two ingredients that goes into making that list:

  1. The letters you’ve typed
  2. A facebook preference algorithm that determines who you’re most likely to be looking for

Why?
The search box responds not only to periods, but also hyphens and quotes (-, and ). When you type one of these characters, the search box tries to determine who you are looking for, but has only the second ingredient to go on. Thus it simply picks a selection of 5 people that you are highly connected with, by whatever metrics Facebook use to determine connectedness.

I’ve Got Code Running on Google

May 12th, 2008

Google App Engine is awesome.

Repeat. Google App Engine is awesome.

A quick tutorial video, 30 minutes of tinkering and playing around, and I’ve got database code running on Google’s BigTable(!). Go check it out - leave a shout.

Oh, and it turns out - Ruby to Python isn’t that bad after all.