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.

It is well known that Google spends a lot of effort on various cool things. Its advances in technology make it possible for people to do things they could not do before. I always wanted to express myself in art but when I was in school I never managed to draw a decent painting. But with Google Sketchup and Building Maker I can build models of everything with the assistance of computer and the web. A great combination of a number of technologies: satellite imaging, graphics, web programming, user interfaces.

Google Earth is a program that many people have spent hours playing with. But those attractive 3D models of buildings were a privilege of qualified engineers and designers until recently. Given the ambicious goal of modeling every city on Earth Google had to ask for help of the community. Because not everybody is a gifted designer, Google has created Building Maker, a tool that presents an image of a building to a user and asks to find a shape that matches its best.

A few basic shapes are available: box, prism, etc. A box is used to model the body of the house whereas a prism is used to model the roof. It is possible to define relationships between elements, that is to specify that one is situated next to another.

Once the user has aligned all visible points on one image she can move on to the next one. After aligning the model you can submit it for review. Once it gets accepted to the buildings layer you can see it using Google Earth and also everybody else will see it. All this beauty (including Google Earth) lives within a window of your browser. I wonder which language it was written in. Obviously, browser applications are matching desktop applications in their capabilities and functionality.

But this cool technology relies on so-cold bird-eye views of cities which are not available everywhere. Another limitation of this technology is the basic set of shapes that building maker has. This is why if you want to model more complex buildings you have to use Sketchup, a 3D drawing program.

Of course, Sketchup facilitates the process through image-matching technology. You can load a photo into Sketchup, align axes and use the image essentially in the same way as in Building Maker. However, a lot more shapes are available: circles, arcs, as well as tools to manipulate them. After constructing the first version of your model you can use additional photographs as textures of its faces. As with Building Maker, it is possible to get the model added to the buildings layer of Google Earth after review.

I have created models with both tools. Obviously, using photo matching in Sketchup takes longer because you have to apply textures to each face of the model manually. I have spent several days creating a model of a school next to our house. The model consists of several boxes. The main problem was connecting the boxes to make sure that there were no holes in the model. At one point I had a seemingly good model except that when I tried to build the roof it was breaking up into pieces. It turned out that the problem was in one wall which height was slightly less than heights of other walls, and therefore, there was a crack between the roof and that wall. Once you get used to measuring heights and widths of everything constructing becomes a lot easier. I would estimate the learning time of Sketchup as one week. But I have not started working with circular shapes yet! That’s the next level of skill!

These are the models that I have built so far. Click on the image to see 3D model.

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.

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.

I have read book titled CSS Cookbook which was published in 2006. Even though it is not the neweset book on web technology it is still a very valuable resource. After reading the book I realized that CSS is simple but powerful technology.

Many HTML elements have properties associated with them, for example color, font size, alignment, etc. And so what? It turns out that changing the default values of these properties in a creative fashion allows one to achieve amazing results.

The book is not just a list of those properties but also a degisner’s guide. For example, when describing lists the book explains how to build HTML menus using them. It is possible to use the list in a horizontal orientation, not just vertical. You can see this menu on top of this page. I realized that it is possible to make your web site beautiful with recepies from this book and that it is very simple.

There are many advanved technologies that professional web designers are using, for example Flash. You need to spend lots of time and buy software if you want to develop with Flash. However, I think that CSS can also give interesting results but you can use it just in a text editor. Therefore, CSS gives you better ROI for the time you spend learning this technology.

I was always trying to answer the following question: is it worth spending your time on adding style to your website or plain HTML is just fine? In other words, does improved look and feel attract additional visitors to your web site or please you in any other way? Why do we need to spend time decorating tables and lists when we can spend time in other ways, for example improving search visibility of your web site?

Once I saw a TV program when a menu of a dinner in an exclusive club of 19th century was compared to those dinners in modern exclusive clubs. The results were that a couple of centuries ago people had many more dishes and the dinner was decorated in many other ways. Nowdays peolpe just want to have a quick lunch even at the most exclusive clubs.

Therefore, I think that adding style to your website is like going to gorgeous 19th century when people were spending lots of time on decorating their buildings, their cloths, etc. It is obvious that nowdays people tend to build similar houses all over the planet, whereas earlier each house was a piece of art.

Another comparison is possible. In earlier days Internet was quite an empty place. But the beautiful technology such as CSS is like renaissance in art. We are still admiring its unmatched legacy – the works of Leonardo da Vinci and other great painters.

As a part of ACM Professional Membership I subscribed to Safari Library with full access to any number of books at a time, as well as roughcuts and videos. When I was a student at SUNY I was subscribed to a starters edition that gave access to any 10 books in a month. In other words, when you added a book to your bookshelf it had to stay there for at least a month.

Now with a more advanced subscription I was able to look at any book of my choice. I was surprised to find out how many books were added to Safari – around 100 during one month.

Here is a list of books that I already added to my bookshelf. Of course, I only glanced trough most of them, but these are the books that I have read, almost:

• 
  Web 2.0 Architectures, 1st Edition
  By Duane Nickull; Dion Hinchcliffe; James Governor
• 
  The Google Way, 1st Edition
  By Bernard Girard

The cost saving opportunity is amazing. Given that a book costs approximately 25 USD the 30 books that I have added would cost 750 USD. But the yearly subscription with full access was only 300 USD thanks to my ACM Professional membership.

Google is the most intriguing company ever. This book sheds light on the reasons behind its unprecedented success and describes lessons that we can learn from it.

Even though I use Google on a daily basis and think that I know this company, my perception of it changed a lot after reading the book. For example, some time ago Google released a product that had a glitch. I got disappointed and switched to a similar competitors offering. In the meantime Google’s product developed into something very useful while the competitor’s stayed where it was. If I had read this book earlier I would have made a better decision.

According to the author of the book there are several forces that steer Google as a company: the triumvirate of executives and user
community. Each of these parts has its share in Google’s success.

The founders challenged many traditional methods of managing a company. To start with, a governing triumvirate is very uncommon. The biggest advantage is that they compensate each other when making decisions. Another difference is how Google went public – the founders used then uncommon Dutch auction model to distribute initial set of shares. The author analyzes the advantages and disadvantages of Google management style.

Over the past, many companies have accumulated devoted user bases. This was achieved in different ways such as more traditional – offering a discount or less traditional elitism. The author of the book analyzes the reasons why so many people admire Google:

• Using Google is free. However, many people asked to charge a nominal price in exchange of support.
• Google releases beta versions of its products. It relies on large user community to report bugs and generate improvement ideas.
• As a company whose revenue is based on online ads, Google has simplified the process of placing an ad. The process is totally automatic – the people bid for certain keywords which are associated with their ads.

Google has improved the way in which customers interact with it. Another important component is innovative environment within the company. Google is different from traditional companies in the following ways. Its HR department has highly variable size. Google fights bureaucracy by keeping the team size small. Instead of asking managers to evaluate the employees, peer reviews are used in Google. Fellow developers evaluate the projects written during the 20% free-time rule and select the most promising. The ability to work on what you like allows experienced developers to advance in the career ladder without being forced into becoming a manager.

In addition to the interesting content, the book has unique style of presenting it. Blogs are cited very often. Using this book I discovered many new interesting blogs.

This book is a bridge to understanding processes going on in the Internet industry. It will help improve your own company or evaluate other Internet companies.

Internet offers lots of information, above any reasonable amount for a normal human being. Thus, consuming information is not that easy. Researchers found out that there are two types of people – those who prefer web pages with few highlights and those who get excited when they see lots of numbers, possibly visualized.

In other words, lack of detail is not always what people are looking for. Personally, I get excited when I see lots of detailed information. Then I bookmark such a web page with the idea that I will visit it again to read it carefully but that happens rarely. I will revisit a web page if it is really important. This is why I like semantic web – it has lots of inter-linked structured information. On my web site I have lots of information represented as charts. Most of it is hidden in a protected zone, for example financial information.

In year 2005 I read an article in IEEE Spectrum. It described the idea of Gordon Bell who worked on MyLifeBits project. The idea is to record all possible information, everything that happens to you throughout the day using a camera. I am trying to implement this idea without a camera, though.The example above shows the number of visits to swimming pool per month.

I need a tool to visualize vast amounts of information. I want to try out different representations – bars, lines, circles, etc. and I need this charts on the web. There are lots of good drawing programs but they are not web-ready.

Google charts bridge the gap between information visualization and web. All the data and metadata are encoded in the URL. Of course, building such URLs manually is not easy. Thus I needed a tool to build charts quickly with different parameters.

I have searched Internet but what I found were tools that asked lots of questions. Instead, give me a chart that is almost ready, I will plug in my data and get the result. In other words, we need an
example-driven tool.

Here is Google Charts Builder. A sample chart is displayed as soon as the page is opened. I tried to make it as nice as possible. Not any type of the chart is supported yet, I will add them as necessary.

I have used this tool to build lots of charts and it allowed me to experiment with scale, chart type, labels, colors, etc.

There are tools for other Google APIs, for example Google Maps builder.

While implementing Weather forecast on the homescreen of a Nokia device I faced a problem of inserting entries to Google calendar. I have thought of a number of approaches including using Twitter app called TwitterCal that connects the calendar with a Tweet user. In fact, this is quite an interesting application. Implemented as a Twitter user, it receives your messages in a quick add format and inserts them to your calendar. Unfortunately, the application is defunct. Thus the idea was to minimize the development effort. Now I am thinking of a pipeline of Twitter robots. One robot generates weather forecasts. It is connected to the TwitterCal which delivers the weather forecasts to your Google calendar.

But I could not avoid programming. Thus I started using Google Calendar API. As I am used to programming in PHP I wanted to use PHP API. However, that is quite a huge package and it uses Zend, I needed a simpler implementation. Thus, I read the documentation and decided to use good old curl to interact with Google servers. With a minimalistic API allowing only creating and deleting entries I implemented the first version of my project.

I need to deliver weather forecast for any city. Thus I have a search box in which the user enters the desired location. I am using BBC Weather site to search for the location. Here is what the result looks like when I enter New York:

This is not appropriate for a script. In fact, there is a weather forecast just for New York on BBC Weather but there is no direct way of getting there, only through clarifying questions. One idea is to make the script click on the first link on the above page but I have thought of a more elegant solution – use Google Search API!.

We are using Google search on a daily basis. Have you ever noticed that the results are available only in HTML format but not in RSS? Thus, automating search was always a problem. Not anymore, though. Google Search AJAX API allows you to launch queries from within your webpage using Javascript. The idea is that there is an edit box on a web page in which user enters a query and there is a DIV element on your web page in which the results are inserted. Google search is much more robust, it does not ask clarifying questions. If you search for BBC Weather New York the first result is the desired page with NY weather forecast. I am feeling lucky!

When a user of our project enters city name there is no need to display all possible results. We only need the URL of the first result. Thus the trick is to hide the output window to which the Google Search API inserted the results. After the results have been added to the hidden window and the first link has been extracted, we will show that URL on our web page as if we found it on our own! The whole power behind the Google search is neatly hidden on our modest web site. That’s the power of web APIs.

There is a lot of work going on right now on creating new APIs. Their capabilities are limitless. I am thinking of allocating a time slot every weekend to study web APIs that popular web sites expose. A Web API allows you to leverage great powers of those web giants when designing your own web page. You have total control on the look and feel of the results, the external sites shape the data only.

Today I found out that Nokia has adopted the idea of implementing custom homescreen widgets! Here is a contest which goal is to select the best homescreen widget for an upcoming Nokia N97 device. Should I submit Weather on the homescreen there once again?