Raivo Laanemets. Software consultant.

Blog upgrades 2014-03


Last week I have been upgrading my blog.

Navigation

Added all posts and all tags pages. So far it was not possible to see older posts other than through individual tag pages. The tags page does not look very good but makes it easier to find specific topics.

Social

Comments are now back. But right after adding them back I got link-spammed. The only article that got link-spammed was about Wordpress tho. Interesting. Anyway, I had to implement human recognition test. For that I'm using simple questions (What is 2-nd digit in 03456?). The answer is checked (using XHR) before submitting the form. A secure token is later checked that the answer is correct. For token creation/verification I use simple XOR function by "encrypting" the question id through xor 13.

I have created a Facebook page. I will share new posts to there.

Optimizations and UI

I'm now using self-hosted social button images (visible on the front page). It gives more control over them. I also added better browser caching headers. The style is more consistent with the style of the rest of the page. I took base icons from the simple-icons project, used css-sprite to combine them into a single sprite and optipng to optimize the resulting image.

Tags use inline-block buttons instead of links. Buttons provide more clearance and are easier to click on touch screen, especially for short tags.

Some clutter was removed. More space between sections (meta, actual article, footer) was added. There is a new print view. It removes navigation, comment form, backgrounds and sets font to serif.

Other things

I switched from init script to supervisord. I'm sick and tired of maintaining 100+ line shell scripts. The script was replaced by a 3-line configuration file.

Some older pages (CV, Projects) had to be converted to Markdown syntax. I switched from Textile to Markdown long time ago but as I also keep HTML around I did not find much need to convert them before. One of the pages had escaping error in HTML which now also got fixed.

Tools

While optimizing for performance and usability I used these online tools:

Google Pagespeed. It does not only test the page/server performance but also points out possible usability issues on Mobile/Desktop. My current scores:

  • 92/100 for Mobile (some links too close, main stylesheet blocks)
  • 98/100 for Desktop (the stylesheet issue)

I'm not "fixing" the stylesheet issue as I only have a single CSS file that has compression enabled and long expire headers.

Nibbler. It runs many types of tests (accessibility, experience, marketing, technology). Current scores:

  • 10/10 for accessibility
  • 8.3/10 for experience
  • 4.0/10 for marketing
  • 10/10 for technology
  • 8.7/10 overall

Low score in marketing results from low "like" counts on my social accounts (the new Facebook page). It also does not count my Google profile page. It only counts real Google Pages (company type). Lack of such Google Page also drags down the experience score.

GTmetrix. Tests server and page load/render performance. Current scores:

  • 94/100 for Page Speed Grade. Biggest issue: the print stylesheet is not inlined.
  • 96/100 for YSlow Grade. Biggest issue: normal stylesheet and the print one not inlined.

Both of issues cause more pain than gain to solve at the moment. I would need a build command for them. Not seeing that very practical at the moment.

Structured Data Testing Tool. It tests integration with Google Authorship. It can also test microdata validity.

In general I think that every page optimized for visitor count should get at least 90% score on these tests. While it does not guarantee sales or other types of user/client interactions, it is necessary to stand out and be visible at all on search engines.

TODO

  • Links in text are not very good. Even though I use larger-than-normal line height (1.5), shorter links that appear above/below to each other due to line wrap, are a bit hard to hit cleanly on a touch screen (Google Pagespeed also warns about it). I'm not exactly sure what to do about it.
  • Google authorship links take to Google Plus which asks to install an app. I really do not like that.
  • Share links/buttons. I have not decided which share buttons to add.

Comments

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.