Blog of Raivo Laanemets

Stories about web development, freelancing and personal computers.

Blog upgrades 2014-04

My blog got new (final) upgrades: sitemap, share buttons, search, article schema and OpenGraph data.


Sitemap was not strictly needed as my blog does not use Ajax or other fancy navigation/content techniques. But I thought it is easy to implement one and decided to do it. Unfortunately, the easy task turned out to be another bug hunting session. My issue raised from URL (URI) encoding. It came out that Swi-Prolog is not always encoding non-US-ASCII UTF-8 characters with percent encoding. It was actually not a problem in my blog as I do not use non-US-ASCII URLs but it's good that it got fixed.

By the way, there is an excellent article covering URL encoding issues: What every web developer must know about URL encoding.

Share buttons

At first I thought about adding as many share buttons as possible but then I figured out that easier is just to give possibly the most popular buttons (in my opinion) and the share URL. The share URL uses JavaScript code to simplify copy/paste by automatically selecting the whole URL when you hit/touch it. I did not want to include random blobs of JavaScript into my page and thus used share links in their purest form: just anchor tags.


For search I initially thought of using Custom Google Search. However, it needs another random JavaScript blob. Then I thought it must not be hard to implement search yourself. It was not. I decided to use simple search query tokenization by spaces and apply the same algorithm to article bodies. Tokens pass the snowball stemmer before matching. The search page uses XHR to make query to the search API endpoint and displays the results. This approach works well with page caching.

I hit one encoding issue with it: URL fragments are not consistently decoded on different browsers. Firefox will decode it by default, others do not. Workaround is described in the same SO thread.

Article schema and OpenGraph

I only implemented the Article schema and I did it using the microdata format. That is how much is supported by Google. I also added some OpenGraph tags (type and image). The image tag is used by Facebook to show the post image. I just use a static "logo" image for that.

I now consider my blog to be ready. I have no more upgrades planned and I will concentrate on writing actual articles.


No comments have been added so far.

Email is not displayed anywhere.
URLs (max 3) starting with http:// or https:// can be used. Use @Name to mention someone.