Web Programming and Design

Worlds Smallest toJson Function

2007-09-09T18:25:00.000-07:00

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...

2007-05-02T19:27:00.000-07:00

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

2007-05-02T12:05:00.000-07:00

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)

2007-01-19T16:06:00.000-08:00

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

2007-01-18T17:28:00.000-08:00

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

2006-12-13T07:52:00.000-08:00

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

2006-11-17T11:52:00.000-08:00

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

WWW::Mechanize get current page

2006-11-12T15:34:00.000-08:00

So I have always done a lot of screen scraping, and typically whatever language I was working with I would build a framework to get the job done. I built one for java, which was a nightmare. Next I created one in php. It was a lot simpler, but just took to much time to really do right. When I moved to ruby I was supprised to find the WWW::Mechanize library. It did everything I had been building into these other frameworks. The nice thing about mechanize is that it takes care of following redirects, and parsing the html into an easy to follow structure. Something I would always build into my frameworks was the ability to psuedo-submit forms on the page. Typically in the form of (php example):

$cForm = $page=>forms[2]
$cForm=>login = 'bob';
$cForm=>password = 'testpass';
$cForm.submit();

You can do very similiar things in mechanize, but the thing that stumped me for to long was how you got the current url of the page. Turns out it isn't that hard, but it is poorly documented.

(ruby example)

agent = WWW::Mechanize.new
agent.user_agent = 'Mozilla/4.0 (compatible; MSIE 7.0b; Windows NT 5.1)'
form = browse.forms[1]
form.fields.find {|f| f.name == 'location'}.value = 'MT'
page1 = @agent.submit(form, form.buttons.first)
agent.page.uri.to_s

Note the last line. This should always return the page that the agent is "at" in the browser paradigm, even after multiple redirects

acts_as_ferret - Sort by something other than rank

2006-10-22T11:08:00.000-07:00

The Old

While rebuilding audiri.com I decided that I need to revamp the old search system. The site currently lets you search for artists by name (useless, since you probably don't know the name of the band that you are looking for) and also by artists who sound similar to an artist you already know. So if you entered in rage against the machine it would return all of the bands who had put rage against the machine into their "similar artists" field. Previously the search was as simple as that. I used a mysql full-text index and matched the query to the fields.

The New
I decided acts_as_ferret was an easy way to get a powerful full text index. To make a model searchable, simple specify:

acts_as_ferret

in the model.

You can also specify which fields as follows:

acts_as_ferret :fields => {
 'artist_name' => {:boost => 5},
 'similar_artists' => {:boost => 2},
 'influences' => {},
 'description' => {},
 'short_description' => {},
 'style' => {:boost => 0.5},
 'history' => {:boost => 0.5},
 'genre_tags' => {},
 :comments => {:boost => 3},
 'total_plays' => {:index => :yes, :store => :no},
 'total_plays_today' => {:index => :yes, :store => :no},
 'plays_this_day' => {:index => :yes, :store => :no},
 'plays_this_week' => {:index => :yes, :store => :no},
 'plays_this_month' => {:index => :yes, :store => :no},
 'plays_ever' => {:index => :yes, :store => :no},
 'hidden' => {:index => :yes, :store => :no}
}

One thing that I thought would be useful would be searching all of the comments people left on the artists page. It turns out this wasn't to hard, to do a has_many relationship with acts_as_ferret, you bascially just include a function that returns a dump of the text for each artist.


def comments
 artist_comments.map {|ac| ac.body}.join(' ')
end

Then in the fields area say:


:comments => {},

The fact that it's a symbol tells acts_as_ferret that it's a function.

This all worked out great. I could quickly query acts_as_ferret using:


Artist.find_by_contents("query")

and get back some pretty good results.

So the next question I had was how do I sort the results by something other than just relevence. Normally on audiri we give people the option to sort by things like total_plays and the like. To do this really required pulling away at the acts_as_ferret model and delving under it to ferret it's self. Fortunately for us, any model made with acts_as_ferret gives us the .ferret_index structure. This lets us make method calls on the actual ferret index. Another issue I was trying to tackle was pagination natively in ferret. A lot of solutions suggest pulling out all of the ferret results, then sorting and paging with sql or by hand. This was not my idea solution.

Borrowing code from various sources , I was able to make a function in the model which let me query the index how I wanted.

    1   def self.full_text_search(q, options = {})
    2     return nil if q.nil? or q==""
    3     default_options = {:limit => 10, :page => 1, :sort => ''}
    4     options = default_options.merge options
    5     options[:offset] = options[:limit] * (options[:page].to_i-1)
    6     results = []
    7   
    8
    9     
   10   
   11
   12     if q == ''
   13       search_map = self.ferret_index.search('*:('+q+') ', {:limit => options[:limit], :offset => options[:offset]})
   14     else
   15       search_map = self.ferret_index.search('*:('+q+') ', {:limit => options[:limit], :offset => options[:offset], :sort => options[:sort]})
   16     end
   17
   18     # loop through each
   19     search_map.hits.each { |t|
   20       results << self.find(self.ferret_index[t.doc]["id"])
   21     }
   22       
   23     num = search_map.total_hits
   24     
   25     return [num, results]
   26   end

The getOrder is a helper funciton that returns things like:


total_plays DESC

Note that in lucene's query language, ASC is not used, only DESC.

Hope this helps people get started

How can you be a developer and not have a blog

2006-09-08T11:21:00.000-07:00

The question of the day I guess. Truth be told, I don't have a lot of things that a developer should have. I just recently got a cell phone. So why if I hold out on all of these other things should I start a blog. Let me clear the air, I have no illusions of grandure. I am well aware that the average blog has .5 readers. (Including the authors) I however feel that this servers as a good place to give people an idea of what I do an maybe save people a little bit of code or searching in cases. So without further ado, here's my first blog post.