Worlds Smallest toJson Function

While a google search of "toJSON javascript" revealed a few functions to convert javascript objects into strings, I was sadly dissappointed to see that most of them prototyped object its self (which you will recall every javascript object is prototyped from) The general opinion of those javascript developers that I respect is that tampering with Object.prototype is verboten. Once you mess with Object.prototype, you have to do the following in all of your for-in loops:

for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
// Do Something
}
}

Adding two lines isn't a huge deal, but again, seems like unnecessary overhead to me, especially since Object is rarely what I need to prototype, and prototyping Array and String still lets you use Object as a hash.

So back to toJSON. I decided since I couldn't find a json parser that didn't prototype Object, I would write my own. This one is pretty basic, but here goes:

function toJson(obj) {
 switch (typeof obj) {
  case 'object':
   if (obj) {
    var list = [];
    if (obj instanceof Array) {
     for (var i=0;i < obj.length;i++) {
      list.push(toJson(obj[i]));
     }
     return '[' + list.join(',') + ']';
    } else {
     for (var prop in obj) {
      list.push('"' + prop + '":' + toJson(obj[prop]));
     }
     return '{' + list.join(',') + '}';
    }
   } else {
    return 'null';
   }
  case 'string':
   return '"' + obj.replace(/(["'])/g, '\\$1') + '"';
  case 'number':
  case 'boolean':
   return new String(obj);
 }
}

At least its short, all of the other parsers were much larger. Also note that my escaping and such is pretty basic, and probably needs some improvement, but this served my purpose, and again was small.

Something I can't understand...

Why is this happening? How is it possible that twitter is getting popular? Perhaps there is more to this site than I am seeing, but from the looks of it, it is just a site where you update your status message, yet everyone wants to be "the next twitter". I guess this just reassures my theory that all that really matters is if you can get hype. My new plan is to build something really simple and then promote it like none other.

Getting a real shell

At my work I have been making a bunch of textmate commands to automate some of the build process, and specifically launching the currently open file. To do this, I run a command kind of like this:

ssh root@.... "copytobeta $TM_FILENAME"

(note: this is a bit simplified, and I have my computer setup with shared keys, so I don't have to login :-)

cpBeta is a command we have on our servers. However, when I try this I get that the command cpBeta can not be found. Clearly the problem here is that the environment variables are not getting passed correctly, so next I tried running everything in the sh command

ssh root@.... "sh -c \"copytobeta $TM_FILENAME\""

still no luck. I tried all kinds of things, first running /root/.bash_profile, then /root/.bashrc... nothin..

So finally one of my co-workers pointed me to the --login option of sh (or bash) The solution looks something like this.

ssh root@.... "sh --login -c \"copytobeta $TM_FILENAME\""

Specificity (And why css does what it does)

So my friends and I at my work (http://www.freewebs.com) were trying to figure out the browsers algorithm for determining which css rules take precedence.

Here's an example. The following produces a blue h2

<style>
div h2 {
color: red;
}
#myH2 {
color: blue;
}
</style>

<div id="myDiv">
<h2 id="myH2">My Heading</h2>
</div>

So we concluded that obviously id's take precedence over tags.

However, in this situation we end up with a red h2

<style>
#myDiv h2 {
color: red;
}
#myH2 {
color: blue;
}
</style>

<div id="myDiv">
<h2 id="myH2">My Heading</h2>
</div>

It turns out after a bit of searching that the algorithm is pretty simple. Here's what the w3c had to say:

A selector's specificity is calculated as follows:

• count the number of ID attributes in the selector (= a)
• count the number of other attributes and pseudo-classes in the selector (= b)
• count the number of element names in the selector (= c)
• ignore pseudo-elements.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

I'm speaking at Ajax World Conference in NY

So, if anyone is in new york in march and board, I'll be presenting on "Workarounds ever javascript developer should know" at Ajax World Conference. It should hopefully be a good presentation. At the moment I have been having fun playing with keynote for mac and trying to find make some simple sample code. With any luck, it should help people figure out how to get a better end user experience and maybe make a few of the problems they run into a little easier to solve. I think I am also going to focus on performance a lot, but who knows how it will end up.

So cool

While the JVM is a beast when it comes to load time and applets are on the verge of death, this is cool.

Height of the Page, no questions asked

When creating a popover for a web app I was writing, I needed to get the internal height of the page, so I could set the popover to the pages height. There are other techniques to achieve this such as setting


html {
overflow: hidden;
}

body {
overflow: auto;
}


then absolutely positioning the div, but this can result in rendering bugs in IE anytime you try to relatively position an element. (usually the element doesn't move when you scroll the page)
So the simple solution is to use javascript to get the pages height when the popover is supposed to be show. For the popover I was working on, I did not want to change the underlying page's doctype (or lack there of) The problem was that document.documentElement.clientHeight only works with a doctype. To make a long story short, I came up with this line of code that should return the pages complete height no matter what.


Math.max((window.innerHeight || 0), document.body.clientHeight, document.documentElement.clientHeight, document.body.scrollHeight)


Simple, parts might be repetitive, but it works