Alexey Smirnov's blog

It is been a while since I blogged last time. The reason are the wildfires that are going on in Russia nowadays. Lots of villages have been burned, thousands of people lost their homes, and there is still lots of smoke in the air days after most severe fires were dealt with. Because of that I decided to join my parents who were spending their holidays in countryside even though originally I planned to stay at home working on my computer and possibly writing more blog posts. I will describe the enormous scale of the disaster in another post.

Here I would like to discuss the work that I was doing before the disaster began, in particular the re-designing of my website that I have started in July. I have lots of information of various types on my web site including recent projects, academia stuff, as well as more personal things such as sports exercises that I am doing and collection of live recordings of organ music.

So I decided to put the content in the middle of the screen and surround it with various levels of navigation menus. There is the top-level menu which has few broad categories and context menu attached to the side of the page. I decided to make sure that things are coupled tightly visually, that is that there are no holes between content and menus.

Of course, I considered issues of performance. In particular, I would like to put a number of widgets to my pages, that is small areas whose content is generated dynamically. However, loading them along with the page would increase the start up time dramatically. One solution is to use iframes. However, there are interaction issues associated with using iframes, for example you have to make sure that the height of the page you are loading is the same as the height of iframe if you want to avoid scrollbars.

Another solution is to generate script tags dynamically using onload event. This works just fine: the page loads quickly, and then additional content appears after a while.

I have extended books section on my web site. Earlier it included only list of books in our home library. Now it includes books that are available online and that are interesting to me, mostly programming books. For each book I needed its image, title, authors, etc. How do I get this information? One obvious thought is to use Amazon API. However, Amazon provides no such API, surprisingly. Fortunately, Google does. I was very impressed with its large-scale books service – books.google.com. The full content of many books is avaiable online. Earlier I was subscribed to an online library but I don’t need it anymore because of Google Books. In addition, it is possible to fetch information on any book through an easy to use API – you only need to send its ISBN to Google and it will give you all the necessary information in an XML response. It turns out that this nice feature is hidden deep inside the description of other Google APIs, it is located in Client libraries and demos section, here is the link to the live application.

One might wonder why am not I using one of the numerous frameworks out there: jQuery, Yahoo web toolkit, etc. There are a number of reasons of doing so. To me the frameworks offer convenient tools to put up a web site quickly, content management systems such as Drupal are doing this even better. However, the site would look too standard, formal if you wish. I would like to have a site with a customized look. On the other hand, coding your web site from scratch would require too much effort. This is why I am using the third approach: read lots of web design books and pick techniques that you like. Then the web site would get a decent look and it will differ from web sites built with standard toolkits.

The next improvements that I would like to implement/borrow from books: animation of menus, and additional widgets such as tooltips, popups, buttons, etc. I only need to decide what is more important: generating content for the web site or improving look and feel of what is already there.

While working on Timeline Builder I noticed that loading a timeline takes a while. This is because Timeline is implemented as lots and lots of Javascript and even though it is minified and all files are concatenated into one the result is still quite big.

One low-hanging fruit is to use compression when delivering the files from your web site. Quite surprisingly, this feature is not available by default if you host your web site on popular hosting service such as GoDaddy. But searching on the Internet allows one find out how to do it. OpensourceTutor is a blog with lots of interesting content.

This post describes how to use Apache for our purposes. Basically, it depends on the version of Apache. For 2.x version you have to implement the following .htaccess:


<ifmodule mod_deflate.c>
SetOutputFilter DEFLATE
</ifmodule>


This approach works with hosting provider Logol where I have one of my test sites. However, GoDaddy uses a different version of Apache and another approach is needed. I have tried replacing mod_deflate with mod_gzip but this did not work out.

The approach suggested at OpensourceTutor is to use the Apache rewrite engine. When an HTTP request arrives Apache will check whether a file with the same name but with a postfix .gz exists and if yes then it will serve the compressed file. Therefore, the web developer needs to upload the compressed version of each file that he wants to optimize. The .htaccess code looks as follows:


RewriteEngine on
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+) $1.gz [QSA,L]


There is a third approach explained here in detail. It works for pages written in PHP. The basic idea is to prepend <? ob_start("ob_gzhandler"); ?> to your pages and that will turn on compression.

These are only few ideas on how to improve your web pages. There are automatic tools that analyze your web pages and make suggestions, most notably YSlow from Yahoo and Page Speed from Google. After reading their reports I learned that there are lots of ways in which I can improve my web site, including

• Adding expires headers
• Using entity tags
• Minifying CSS and Javascript

These ideas mean that I need to maintain two versions of my web site – one which is publicly visible and optimized with compressed and minified scripts and another with uncompressed content which is convenient for development. Then I will need a script that converts the development version into production version. Even though such development configuration seems natural I have not found any tools that facilitate its implementation on popular hosting sites.

Page Speed can generate nice graphs as the one shown above. Each track represents one HTTP request. After I added compression the length of the tracks has been reduced, therefore the results of your efforts are easily measurable.

These two extensions demonstrate the flexibility of Firefox. I have noticed that people achieve glory these days not through a large software development effort such as an operating system or a word processor but through a little application such as a plugin. Typically, plugin runs on a bigger platform along with thousands of other plugins. I have read in Economist that last fall a pizza-tycoon kind of game running on Facebook has attracted several million gamers in a couple of month – an unimaginable rate for the gaming industry alone. But social network makes it possible.

Anyway, there are plugins that are so successful that people build their plugins on top of them. PageSpeed and YSlow are examples of this type of plugin because they are built on top of another Firefox plugin Firebug. Another example of plugin used to develop other plugins is Greasemonkey.

I have become interested in adding features to the original implementation of SIMILE Timeline. I have a feeling that it has great potential but despite the years it is been available it did not become widely accepted. In fact, it appeared on a number of cool websites including those of educational institutions, government, etc. However, these are more like showcases of a cool technology whereas I think timeline is something that everybody could use on a daily basis. Given the amount of adoption of social networks one could try to put a timeline there to display your friends activity. In fact, Timeline is available as a plugin for WordPress and I should say it is a very cool thing with lots of bells and whistles but for example there is no such thing as Timeline Google gadget.

One reason of the lack of adoption is the difficulty of sharing. The original implementation of Timeline provides a JavaScript API. In order to use Timeline on your website you have to write approximately 100 lines of JavaScript code which is an unacceptable barrier in many cases. Even if this code is generated automatically and you offer it as copy-and-paste to a user, the code snippet which is 100 lines long is just too much. What is needed is a short solution in a form <script>bla-bla-bla</script> and this is one of the features that I have added.

But there is another, more difficult problem. If you want to visualize RSS feeds that do not belong to your website then you’d run into Ajax same domain policy issue. In fact, I have been running into this problem earlier but then the solution was to implement a PHP proxy that would read the desired RSS feed from another web site and forward it to you. This approach worked fine as long as Timeline stayed exclusively on my site but now we need to share it. Therefore, if a user puts Javascript code on his/her website and this code tries to access an RSS feed through Ajax then it would also need to use a PHP proxy. But PHP is a server-side technology. It is not possible to upload a PHP file to a social network or your iGoogle home page. Therefore, another solution is needed.

I have searched Internet and found a few interesting approaches to the same domain policy problem. One of them is to use AJAX through Flash because apparently Flash is less restrictive. But I was unable to get this approach to work, obviously due to security issues. It looks like the destination site of your AJAX request needs some sort of modifications whereas in my case the location of RSS feed that I want to fetch is totally arbitrary.

This problem looks totally intractable. But the power of Javascript always amazed me. This time <script> tag came to rescue. Typically, when you specify the URL of the script it is ending with .js, for example <script src="myscript.js"></script> but the funny thing is that you don’t have to! In the src attribute you can specify anything, for example a PHP script that outputs Javascript like this

<script src="myscript.php"></script>

Just make sure that your PHP script outputs Javascript code. The rest is fairly simple: think of the PHP proxy that reads an arbitrary RSS feed and wraps it into Javascript. The PHP script should output a Javascript variable assignment with the RSS feed at the right-hand side of the assignment expression. Then we can use another extremely useful feature of Javascript which is its built-in XML parser:


var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load(myrss);


The details of this approach are descried in this OReilly article.

With this technique taken into use it is possible to share a Timeline with arbitrary RSS feeds! The next step is to build a number of plugins, widgets, and gadgets for all kinds of social web sites! Such a bright prospective for the Timeline!

Only hours before the New Year 2010 I decided to describe the project that I have been working on this year. In fact, I wanted to summarize my efforts during the whole decade as I started my career in computer industry in year 2000 but I would rather do it later. Now I will present Timeline builder, the project that I have been working on for almost a year.

I started implementing Timeline builder in the beginning of this year. The idea was to allow to display an RSS feed on a Simile timeline. Surprisingly, original implementation of Timeline does not allow to use RSS directly as the event source, either JSON or XML. In order to implement this idea I have written a converter from RSS to JSON using PHP. Then I was using a database to store the URIs of the feeds that a user wanted to display on a timeline. That is, mixing RSS feeds was a required feature from the beginning. That initial version of Timeline builder completed in June was working.

However, after I read a few books on JavaScript I reazlied that it was possible to improve the implementation because RSS is supported natively in JavaScript. Since Timeline is written in JavaScript it was very easy to use RSS as an event source. Indeed, after loading the feed using Ajax it became available as a JavaScript object. This object even has a special field responseXML and because RSS is a subset of XML it is returned in this field as a result of Ajax request. Thus, it was actually very easy to add support of RSS in Timeline.

Because of that, I have extended my Timeline builder with a number of features including:

• Vertical timelines
• Icons of arbitrary size. The traditional timeline supports only 20×20 icons which are too small.
• Labels of arbitrary width and height

After implementing the support of RSS as a JavaScript object I was able to get rid of database. I realized that it is possible to store the data as either JavaScript or in JSON format. These features allow to implement next-level databases, the web databases. I have read an article in CACM that was saying that traditional relational model is not acceptible in many cases for a number of reasons. Thus, using a web database in JSON format is a step forward. I am thinking now that I should implement a web service based on the timeline which would make my web site Web 2.0 compatible.

Timeline builder is still under construction. But I have already added a timeline showing my blog posts to the front page of my website!