After figuring out Javascript I felt the urge to take another step. Usually when I tried to program stuff I was filled with resentment afterwards because certain things didn’t work as I had envisioned them and usually it was more like fighting than playing with the languages I chose. With Javascript is was the other way around, it was actually a lot of fun but still I was missing something since it is more like a front end / interface language than a language for writing the back end logic. In my favicon example I was using Perl for the database queries and the http checks on the submitted URLs but that was only because I didn’t know any other programming language for these kind of tasks. Ever since I swore to myself to stay away from PHP. Although PHP is not necessarily insecure I didn’t like it the minute I saw it. That left a big question mark in my head until ruby on rails appeared out of nothing in July 2004. The first videos that showed the features of rails could be found everywhere in the web. Everyone was curious, including myself. I played around with the early rails but my programming skills were a lot worse than they are now so I didn’t really know what I was doing and stopped doing it shortly after.

A couple of days ago I asked myself which language I would choose to be able to program my own back ends. I had the answer already in my mind, I knew that rails was really the only choice for me. I’m not a very good programmer, in fact I’m a design student but I’m driven by the thought to learn as much as I can until I get too old for this.

When I made websites I used dreamweaver first, later I wrote the HTML myself because dreamweaver wouldn’t fit my quality and feature requirements. Now sometimes customers want to be able to manage their own content, so I’m giving them a Content Management System. But it is the same thing, all of the CMS systems have a lot of features but in most of the cases they are just not the right ones for the current case. So I thought a lot of times »One of these days, I’m gonna write my own CMS«. I also thought that I would do it with rails, simply because there wasn’t any other webframework out there which promised the easy and elegance of rails. I even considered JSP and PHP for a moment but when I took a closer look on Ruby and Ruby on Rails the decision was easy.

The only thing that bugged my was rubys syntax which is quite different to Javascript, Perl, Python, PHP and a couple of more. It was hard to get used to it but after swallowing down the ruby book in two days it was much more familiar and I even started to like it. I started to read the rails book and some tutorials right afterwards. Then I tried to think of a real life project which I would try to realize with rails. It is a web application for documenting the projects of my art school in a web 2006 way. I started the project three days ago and right now I know for sure that I made the right decision with rails. It is so easy, so light, so elegant. I think I will end up writing more XHTML and CSS than ruby. Well that is probably a little too optimistic but I was amazed to see how fast you can get things rolling. You suddenly have a lot of time to think of content and structure rather than about technical problems or difficulties. Pandur helped me out getting started and I will need his help a couple of more times but once we glued together the first things I could take over the steering wheel. It is fun!

Right now the project runs on localhost only because I was lazy and downloaded Locomotive for Mac OS X which gave me everything I needed. But since I’m also using SVN now I will check out the project on my server too. I let you know so you can follow its progress. So the next posts will be about my trip on rails. Meanwhile I will also post about my current project at UdK but I guess it will get its own website anyway.

Technorati Tags:
web, cms, web 2.0, ruby, ruby on rails

A couple of weeks ago, when I was trying to redesign my site, I was trying to get some colors on my webpages since they always have been very minimalist and uncolored. But when it comes to my personal taste it is almost impossible to find colors that I really like. So I was googling around for help and I found colr.org. Although I despise the writing because of its flickrness the website itself is useful and fun to play with. You upload a picture (maybe thats why its so flickry) and the website, well in fact the javascript, generates color schemes out of you pictures. You can let it randomly pick colors from the image or you can pick them by yourself. You can compose whole color schemes and save them with catchy tags like »fresh«, »ocean« or »vagina«. If you search for »fiat« you will find my scheme which I generated from a friends photo which showed an old Fiat at night. There are a lot more sites out there which provide help with your color schemes but non of them worked like colr.org for me.

http://colr.org/

Technorati Tags:
web, web 2.0, javascript, webdesign, color

I just had to post this because I was trying for ten days to find this article again. You know what I mean, right? You know you found a webpage a week or two ago, you didn’t bookmark it, you’re not even sure if you browsed it with your newsreader, Firefox or something else. You don’t know how you found it and why. Somehow two weeks later you need this webpage again and you have no idea how to get it back. It is not in your browsers history anymore, its not in your delicous account and your search words for google are as general as »web, web 2.0, ajax, javascript, frameworks, browser, compatibility«. Through different combinations google threw finally the right URL on my screen – I had to search for »browser ajax framework compatibility«. Wasn’t too hard in the end but different combinations gave different results. I wasn’t even sure that I found it in the web. Therefore it deserves a trackback – just because I was so exited to find the link again. Maybe I should add it to delicious as well – just in case …

http://www.musingsfrommars.org/

When I start learning a programming language, which is not very often, it always helps me to play around with stuff the minute I learned it. Sometimes reading and playing happens at the same time. Understanding the basic concepts is one part but the other one is using them. When I learned Perl I started to program a small address book application , when I learned Actionscript I started to program animations rather than animating them the Flash way. Now with Javascript I programmed something useless – useless for all of you guys but it helped me a lot learning the features of the language. Since I wanted to find out how all this Web 2.0 madness works I tried to play with every aspect of Javascript. My simple project is located here. What is it about? Well on the surface its an input field where you can enter an URL to a favicon.ico file. Once you entered the URL and pressed Return, the favicon of your choice appears in the 20 x 20 matrix below. But of course it is not that simple. When you enter the URL and press Return, the Javascript fires an asynchronous post request to a perl cgi which is checking if the favicon really exists. It is not possible to do that directly in Javascript because of a very useful security policy which says that Javascript is not allowed to connect to foreign domains unless you sign your Javascript file with a Root CA. Javascript can fire post and get requests but when you try that on a foreign domain you’ll get a »permission denied«. Firefox handles this one pretty strict, IE forbids it with the right security setting, Safari however ignores this policy completely. I haven’t checked Opera but from what I read it should give you some sort of warning as well. This one was very confusing since Safari allowed me to fire Get and Post requests to foreign domains. I should probably tell the webkit guys. Anyway, the cgi script is an open proxy which gets an URL and checks if it gets back a 200 HTTP Header. It doesn’t fetch the favicon, it is just looking if everything is fine. After that the cgi connects to a mysql database to look if the URL is already in it, if not it inserts the URL. The cgi gives back different error messages to the Javascript which are taken care of in the XMLHttpRequest callback function. This way the user gets feedback either if the URL is already existing or if it isn’t valid. This all happens in the background without any reloading which is the point of this whole AJAX mambojambo and it works great.

When you load the page there is a timeout of one second before the window.onload event fires a function which calls another cgi to request all existing URLs in the database. The query.pl queries the database and sends back a list to the XMLHttpRequest callback function. The function is splitting up the list of URLs and generates new IMG tags for each URL. This is what it does, but how does it really work?

All the favicons are objects. When the callback function of the initial database query gets back all the URLs and splits them up it creates a new Javascript object for every URL. The list also provides the database ID of the URL so every object has an ID, an URL, and a FaviconURL. The favicon objects also get a prototype function called “show”. This prototype function takes care of the HTML representation of the favicon object. It creates an a element which links to the Object.URL, within the a tag it creates an img tag which has the attribute »src« which links to the Object.FaviconURL, it also sets the id of the img tag to the Object.ID and in the end it attaches a couple of event handlers. The prototype function, in fact, looks like this:

Favicon.prototype.show = function() {
  var faviconContainer = document.createElement("a");
  faviconContainer.setAttribute("href", this.url);

  var favicon = document.createElement("img");
  favicon.setAttribute("id", this.id)
  favicon.setAttribute("src", this.faviconLink);
  favicon.setAttribute("class", "favs");

  favicon.onmouseover = function(oEvent) {
    Tooltip.create(this.id, FaviconObjects[this.id].url, oEvent);
  }

  favicon.onmousemove = function(oEvent) {
    Tooltip.move(oEvent);
  }

  favicon.onmouseout = function() {
    Tooltip.hide();
  }
  faviconContainer.appendChild(favicon);
  document.getElementById("wrapper").appendChild(faviconContainer);
}

The huge advantage is that you don’t have to take care of getting the right element references all the time. Especially when I attach the event handlers for the tooltip this comes in handy. Before I discovered prototype functions I told the tooltip to get the id via DOM from the HTML element which was terribly slow compared to this. And it was much more complicated as well.

Another nice thing is the FaviconObjects object. Here I used this object as an associative array to hold the references between the HTML objects and the Javascript objects. So with the id which is the same of the HTML and the Javascript world I can get instant access to either one of those. The callback function looks like this:

/*Callback Funtion for initial Pageload /getExistingIcons()/ */
function queryCallBack(sData) {
  var splitArray = new Array;
  var existingURLs = sData.split("\n");
  urlCounter = existingURLs.length-1;
  for (p=0; p<existingURLs.length-1; p++) {
    splitArray = existingURLs[p].split("_");
    FaviconObjects[splitArray[0]] = new Favicon(splitArray[0],
    splitArray[1]);
    FaviconObjects[splitArray[0]].show();
  }
}

So if you’re still there you can look at the entire javascript by clicking here. I commented all the functions so you should understand it pretty easily. I rewrote it after I finished all the all the small components to make it as readable and efficient as possible. If you have any annotations to it – let me know.

I learned to love objects, literals and anonymous functions as well as prototyping. This is why I fell in love with Javascript. Well and because most of the perl regexps work too.

Now I’d like you guys to fill the 20 x 20 Matrix with more favicons – during debugging I ended up adding already 124 favicons and in the end it was hard for me to come up with any more. When the matrix is filled I want to implement drag and drop and position coordinates which are also saved in the database. It would be nice to parse standard compliant favicons as well but I haven’t had enough time recently to get that working too. I guess I would have to do that in a cgi as well so this is more a question of Perl coding than Javascript voodoo.

As I said, I would be glad if more experienced Javascript coders would give comments on my code. So long.

// Not everything is escaped properly like backslash n so for the real Javascript check the linked file.

Technorati Tags:
web, ajax, web 2.0, javascript