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.

As I am trying educate myself in the area of web technology I have read a book called Adding Ajax which title is self-explanatory. It is interesting that this book has only 4 reviews on Amazon, that’s the total number of reviews people have written, not book’s rating. This means that this book did not receive proper attention. However, I think it is a very interesting book even nowadays despite the fact that it was written in 2007.

Its author Shelly Powers is an active contributor to HTML5 standard, her blog is here. The book describes a number of ways in which Ajax changes the traditional state of the web. However, to start with the author describes what you need to do to prepare yourself for Ajax. I especially like the Start Clean section in which Shelly claims that the default CSS values are not necessarily good. For example, link underlining in a-tag is not always a good idea. I have heard this concept of starting from a clean sheet a number of times, so it is probably a good idea to zero out the default CSS values which I never did.

Also in the first chapter the author introduces the notion of Progressive enhancement, a web development methodology. Basically it says that the web site should work in various environments, even in the simplest. The idea is to make sure that your web site is still accessible on various devices after adding new features to it. The author stresses the concept of accessibility throughout the book. Indeed, web is an open platform for everybody – people in developing world, people with disabilities, etc.

Then there is a chapter on various web frameworks. The author explains the tradeoffs associated with using them. Obviously, a web framework often includes features you don’t need and that increases the loading time of your page, an important issue for people with slower connections. Among the frameworks, Prototype offers the best value. Its goal is to provide a cross-browser layer while staying quite minimal in size.

In Chapter 4 the book describes interactive effects that Ajax allows to add, for example instant previews, fade ins and outs, etc. Then it describes the widgets that Ajax allows one to use: accordion, tabs, overlays. After that, the book deals with more complex issues such as in-place editing and live validation which requires interacting with a server. Besides home-grown solutions that book mentions a variety of web frameworks and tools, for example JotForm – a nice framework for building forms and putting them on your web site. This is the kind of tool I need. I want to place a feedback form on my web site to make it possible for the visitors to drop me a line without having to write me an e-mail but this was always a low priority task and I never made it happen. JotForm will make my life a lot easier.

A special chapter is dedicated to advanced effects such as using Ajax with SVG. Finally, the author explains how to build mashups using web APIs. In this chapter the author explains the tradeoffs of using client-side and server-side mashups and explains how to implement a mashup in a non-scripting environment. Despite the fact that this is a book on Ajax the case in which Javascript is disabled is also dealt with. The reason is that many people prefer to browse unfamiliar sites without Javascript, the author claims.

Despite all its gorgeous content the book has drawbacks. The main disadvantage is that it is a bit hackish in nature. For example, there are well defined Javascript design patterns which the book does not mention. Instead, it offers its solutions as functions or snippets of code that the web developers are supposed to paste wherever appropriate. If next editions of the book are to appear it needs to take an object-oriented approach to all the beauty that it has developed.

Last but not least, this is the post number 300 in my blog! An important milestone has been reached! This is the day I have been thinking of for a long time, I was trying to imagine what would I write as a post number 300. I guess a review of a book on web design is a topic worth discussing in such an important post, it conveys a symbolic meaning! Joke.

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!

I have read very useful book on design patters: Ross Harmes; Dustin Diaz Pro JavaScript™ Design Patterns. During daily life programmers use pattern very often without realizing this. But taking a systematic approach toward design patterns definitely helps organize your knowledge.

The book starts with an overview of JavaScript. Even though it is an object-oriented language with many useful features it is quite different from a traditional object-oriented language such as C++. For example there are no built-in mechanisms of inheritance or interfacing, thus for the sake of convenience one needs to emulate those. The book describes several types of Javascript inheritance, in particular the traditional and prototypical inheritance. The former type is most similar to traditional C++ inheritance. However, the programmer has to invoke the constructor of the superclass manually in the derived class. In the latter type of inheritance the programmers define the prototype member variable of a class which is a structure describing the functions and variables the class has. When the class is instantitated the prototype of the superclass is assigned to its prototype, thus the derived class obtains all the features of the superclass.

There is no built-in mechanism of private variables in JavaScript. However, it is possible to emulate it using closures. The introduction is concluded with a brief overview of chaining, a mechanism that allows to modify properties of many DOM elements simultaneously. This notaion is used in popular libraries, for example in jQuery.

After this brief introduction the book explains many design patters in a unified fashion. Each subsequent chapter consists of a description of a pattern, one or many real life examples, and discussion of its benefits and drawbacks. The following patterns are described:

• Singleton - this pattern is used when only one instance of object is necessary, for example in case of page-specific code. Another example is branching to support incompatible browsers. A real life example is creating XHR object.
• Factory is used to implement various kinds of managers. Imagine a complex object that consists of a number of other objects. This pattern is useful if the type of each component is known only at run-time, it makes it easy to replace the parts.
• Bridge - decouples abstraction from its implementation so that they may vary independently.
• Composite - implements a tree-like data structure.
• Facade. This is a convenience method. One usage example is a class that accounts for differences among various browsers.
• Adapter - wrap an existing interface into a new one.
• Decorator - it is possible to use it as class decorator to extend exisitng functionality as well as function decorator, for example to implement a profiler.
• Flyweight allows one to optimize the memory consumption of a class. The idea is to separate the class into intrinsic and extrinsic states. An example is implementation of a tooltip.
• Proxy - two types of proxies exist: remote proxy facilitates access to a remote object, whereas virtual proxy allows to delay the instantiation of a complex object. This gives an impression of big speedup.
• Observer - publish/subscribe architecture. Example implementation: animation.
• Command implements an action which is separated from the object that invokes it. It is possible to use the action with a button or with a menu item.
• Chain of responsibility – allows to implement requests that are passed down a chain of hierachical objects.