befog, befuddle, bemuse

We can see that there are three main models: user, photoset, and photo. The models are interlinked with the following possibilities:

• photoset can link to { photo, user }
• photo can link to { photoset, user }
• user can link to { photoset, photo, user }
  

A more detailed description of these linkages are:

• photoset links to
  
• users (as commenters)
• photos (as children)
• user (as owner)
• photo links to
  
• photosets (as parents)
• users (as favoriters)
• users (as commenters)
• users (as noters)
  
• users (as taggers)
• user links to
  
• photosets (as children)
  
• photos (as children)
  
• users (as contacts)
  
• photos (as favorites)
  

With the three main "concepts" linking to each other, i.e. users, photosets, and photos, we face a problem of how deep to traverse the linkages. One approach is to impose some kind of degree or hop count. Here, we can define a limit of degree k to mean that the traversal will stop going deeper if it reaches any model for the kth time.

Thus, for k = 2 and since our starting point is always a photoset, we have:

• photoset -> user -> photoset, i.e. photosets owned by the user(s) who (commented|owned) the photoset
• photoset -> user -> user, i.e. users who are contacts of the user who (commented|owned) the photoset
• photoset -> user -> photo -> user, i.e. users who (favorited|commented|noted|tagged) photos (belonging to|favorited by) user(s) who (commented|owned) the photoset
• photoset -> user -> photo -> photoset,  i.e. photosets that contain the photos (belonging to|favorited by) user(s) who (commented|owned) the photoset
• photoset -> photo -> photoset, i.e. other photosets that contain the same photos as the photoset
• photoset -> photo -> user -> user, i.e. users who are contacts of the user who (favorited|commented|noted|tagged) photos belonging to the photoset
• photoset -> photo -> user -> photo, i.e. photos (belonging to|favorited by) users who (favorited|commented|noted|tagged) photos belonging to the photoset
• photoset -> photo -> user -> photoset, i.e. photosets belonging to users who (favorited|commented|noted|tagged) photos belonging to the photoset

So Ive basically done the following for the past few days (since Wednesday):

1. Enumerate all functions in flickr as a table. The webpages they provided was not useful for inter-function comparisons
2. Trimmed down the api to just the functions I need / can use (most require user authentication and was not usable)
3. And analyzed the responses from those functions
   
4. Designed a schema for storing the data
5. Designed the program flow that fetches the data

Next is to actually write the program. I've decided to script it with ruby and have the data stored as flat files, i.e. there will be one file for each table. The files will probably be CSV or TSV with the first line listing the attribute names. Since field values can also be data structures and not mere strings, e.g. Hashes, Arrays, etc, I will encode all field values into JSON. As for the photo files, they will be stored as a set of photoset folders. The filenames will be the photo_id. The folder name will be the photoset_id.

So Im working on this other project now and I am faced with the following situation:

• A server script renders an element's onclick handler as calling a function with an array as its parameter, e.g.
  <div onclick="some_function(this, new Array('1','2','3'));">Some content</div>
• Everytime some_function() is called, it needs to create another div after it but with the array altered, i.e.
  <div onclick="some_function(this, new Array('1','2','3'));">Some content</div>
  <div onclick="some_function(this, new Array('2','3'));">Content generated by some_function()</div>
  
• Eventually, the array has no elements left and what I want left is:
  <div onclick="some_function(this, new Array('1','2','3'));">Some content</div>
  <div onclick="some_function(this, new Array('2','3'));">Content generated by some_function()</div>
  <div onclick="some_function(this, new Array('3'));">Second content generated by some_function()</div>
  <div>Last content generated by some_function()</div>
  
• What does some_function() look like?

The situation is non trivial because of the following:

• "onclick" is not a DOM attribute, so you can't assign it a string like:
  divElement.setAttribute("onclick", some_function_string);
  Actually this does work in Firefox 2 but it may not work in other browsers (and thats the way it should be).
  
• To assign an onclick handler, you specify a function not a string, i.e.
  divElement.onclick = function() { some_function(this, new Array('1','2','3')); };
  

So the roundabout solution of doing this (which works but Im not sure of anything that can be wrong or stupid about it) is:

• Convert the function into a string, i.e. (in this case the function I'm interested in is the onclick handler of the divElement)
  var onclick_string = divElement.onclick.toString;
  
• Modify the string via string functions and regex (in this case I want to change the array being passed to some_function()):
  // Set value to "1", "2", or "3" depending on which one we want to remove
  var re_value = new RegExp("[\"']"+value+"[\"'][,]*");
  onclick_string = onclick_string.replace(re_value, "");
  
• Modify the string to exclude everything but the function body:
  onclick_text = onclick_text.replace(/[^{]*?{/, ""); // delete everything before and including first "{"
  onclick_text = onclick_text.replace(/}[^}]*$/, ""); // delete everything after and including last "}"
  
• Create a new Function object with the string as its body:
  var new_onclick = new Function(onclick_text);
  
• Now we have a modified function ready to be used!!
  newDivElement.onclick = new_onclick;

The above method can be used to dynamically write your javascript functions. I guess there is no real trick here. Just three things:

• Convert the function to a string
• Do string manipulation to edit the function
  
• Convert the string back to a function

Actually its not fixed yet. What i mean to say is:

1. My entire system is a single page layout and hence the logical way of designing this is to layout my elements with position: fixed, i.e. fixed to the points on the screen and not the containing element (position: absolute).
2. Actually *hehe* I set them to be position: absolute at first, but thats only because positioning them relative to the containing element gives the same effect as positioning relative to the screen.
3. Alright, so turns out that IE7 behaves wierd when I use position: absolute (I can no longer remember why or how), so I changed them to position: fixed.
4. But hohoho IE6 doesnt support position: fixed. So I had to change them to position: absolute. This is where the fun begins: In setting position:absolute, you cant set all four top, left, right, and bottom corner offsets. Only a pair (e.g. top, left) is allowed and then you have to set height and width.
5. So now for IE6, I have to hack my way to make them display correctly with a combination of unmentionable paddings, margins, and my most poweful tool: position: relative (which can offset from top, left, right and bottom -- but its presence affects sibling elements unlike position: absolute  or position: fixed)

I think Im about 80% done. But I cant really say. Im not even sure if I can emulate the proper layout with such restrictions. Why cant everyone just ugrade their browsers. Its free you know?

Arrggh... Ive spent the past four hours fixing my standards-compliant layout to fit to IE6's needs. And from this ridiculous layout:

All I have now is just:

In other words, the top part is done. Im fixing the CSS by setting display: none to all major containers and then work my way down the DOM tree; slowly fixing each <div> one at a time.

Onwards!

So ive been trying to get hold of some working IE 5.5+ to test my system but lo and behold, despite many web statistics out there, everyone i know seems to be using IE 7. I can get access to IE6, but I will have to travel to the school library for that: work there, debug there, etc.

Anyway, I scoured the net for some way to run both side-by-side and found an msn article (can't remember where) that says that the best way is to run Ms Virtual PC 2007. So I did. Managed to install the free program, and ho ho ho. I have no idea why I assumed it came with Windows inside it. Anyway, so I had to reinstall windows XP SP2. That took ages to do. And then even after it started running, my installation ran like steamed rice (not engine). It took an hour or two just to load windows. And dunn get me started on trying to run IE. I even had to activate windows and that took very long as well. Not sure what I did wrong. Im running it on my Dell Inspiron 6000, so it shouldnt be that much of a problem. I noticed that Virtual PC 2007 didnt take that much memory, but the hd accesses are a lot and my CPU is always stuck at 90% to 100%.

Thats when I descovered Multiple IE *yay*

It installs fast, works almost great (I think). I ran IE6 and it opens the msn start page and shows some errors on the page. That can't be right, can it?

A very good place to start if you want to capture keyboard events with JavaScript: http://www.quirksmode.org/js/keys.html

Rule of thumb (i guess) is:

1. Use keyDown or keyUp, not keyPress
2. Use keyCode instead of charCode
3. Use the link above and scroll to the bottom to check the keyCodes of various keys :)

And with this, the system now correctly handles keyboard event (up, down, tab, and enter) on Safari 3, IE 7, and Firefox 2.

So Im trying to make my system (that works perfectly in Firefox and is almost perfect in Safari) to work for Internet Explorer (7 first and then Im going to tackle version 6).

And im facing with this wierd shrinking problem. I have some divs that are positioned absolute and restricted only by a top, left, right, bottom and min-width CSS properties. The thing is, sometimes, e.g. when I change the display/visibility property of some other div, the other divs decide to shrink to min-width. Huh???

So Im preparing my arsenal of books to refer to. The internet hasnt been very helpful cuz I probably cant really pinpoint the exact problem. I tried isolating just an absolute div and another that I hide/show and the problem is not reproduced.

Alright, one from my arsenal of CSS resources should have the answer:

I hope.

Found a little neat setting for my .bashrc to do inline-autocompletion here:

# make bash autocomplete with up arrow
bind '"\e[A":history-search-backward'
bind '"\e[B":history-search-forward'

# make tab cycle through commands instead of listing
bind '"\t":menu-complete'

I like the up arrow history search best. I use vim to edit a lot of stuff and my working directory is also not my home directory so I often have to type in a whole long sequence of /dir/dir/dir/dir/dir/ before I can actually start working. But lo and behold. All I need to do now is type: cd <up> and it will cycle through (inline -- no more long lists) the directories i have run cd before.

The only caveat is, i suppose, not being able to list commands as a list. Having files cycle through inline is good because you "know" which file you are refering to and you "want" <tab> to auto-complete. So inline auto-completion can easily cycle your way to the file name you want. But for commands, at least for me, I only press tab if Im not sure what the command is. So a list is better. I wonder if I can have the tab auto-completion behave differenty depending on whether its a command or a file/folder.

Honestly, I think the next time I do anything in javascript, ill start by writing a class. Scoping is very important. Since goodness knows when, Ive always started writing programs in javascript as functions and them any variable is defined outside of it. And thats how it was for my mockup. So one year of that, and what I have is 4000 lines of hacking and global variables. Im actually quite surprised how I managed to make things still work. Lucky? Probably not. Maybe Im reallly careful in using my variables. Then again, I owe many things to the great debugging tools that i have (for Firefox).

Anyway, lesson of the day: to declare a local variable in a function in javascript, don't forget to precede the variable name with: var

Update: Apparently, Internet Explorer not only bugs out, it actually throws a seemingly unrelated runtime error saying that the Object doesn't support this property or method whenever I forget to include the 'var' keyword, e.g.:

tabs = document.getElementById('tabs').getElementsByTagName("li");

Obviously, I thought the error meant that my object (node) doesn't support the getElementsByTagName method, which is ridiculous. I have no idea how I managed to think to see what happens if I added the 'var' keyword. Maybe I'm missing something here...