Build your own Related Posts widget for Blogger

I have visited many blog sites and most of them have "Related Posts" or "You may also like - " section for visitors who like to discover more related articles or stories. I am one of those visitors who likes to find out more interesting posts which are related to the original article I have read. Indeed, having related posts section will increase your exposures of your site. That is no doubt about it.

Unfortunately, I didn't have this feature on my site since I started to customise it. Of course I then started to do some research about building a "Related Posts" widget for Blogger. Obviously, there are lots of articles talking about "adding" related posts widget to your Blogger site but not many of them have detailed explanations. Well, fortunately some of them guided me to create this jQuery plugin. 

Flickr Photo Gallery with Colorbox in jQuery

Last week I updated my Blogger site to be responsive and optimised the page load time. Whilst doing those optimisation, I was looking for a simple photo gallery to display the photos from my Flickr photo stream. I've tried flickr sideshow, pictobrowser and slideflickr however I was not satisfied with them. I then started to study the Flickr API and tried to make a Flickr-like justified layout for my photography page. While trying to code the jQuery plugin, I found two great articles by Sam from Wackylabs.net and Miro Mannino. Miro explained how the layout could be done with a detailed illustrations but I decided to use Sam's algorithm to build my own jQuery plugin.

Summarising your Blogger posts

I use a simple JavaScript function to summarise the posts on the home page of this blog. It worked quite well since the Blogger.com hasn't complained about it. Well, things have gotten a little bit ugly. Few days ago, I post a new article "Start your own MVC Framework with PHP" which is quite a long post. It contains code samples, descriptions and CSS code for presentation.

After I published the article, I noticed that some posts on my home page went missing. I set the setting to display 8 posts per page for home page, categories, paging and search results. However the home page only displayed 5 posts and I was not very happy about it. So I went Blogger Help Forum to search for solutions. Voilà ~ The reason is that if one or more of your recent posts is/are too long/big, Blogger.com will cut down the number of the posts to display. The main reason is to enhance the loading speed. Well, fair enough but what should I do now? Divide the post to two or three parts? Mate, I'm not going to do it. So what then? It must be a way to fix it. So I started to search any possible solutions on Google again and found the term "Jump Break".

Start your own MVC Framework with PHP

I have been using ASP .NET MVC for many years. It is a complex framework but not difficult to learn (at least for .NET developers). Anyway, I like the way it handles templates and routing. Few years ago, one of my clients asked me to developed a simple ERP system with PHP and MySQL. My first thought was: "Why not developing a simple MVC framework with PHP?". It would allow me to utilise the backend code and avoid mixing code in classes.

I started to study many PHP MVC Frameworks such as Zend Framework, Symfony and CakePHP but I realised those "ready-to-use" frameworks are overkilled for this simple project and I would like to have codes that I could manipulate easily and apply them to next simple projects without making my brand hurts.

Edit your CSS and JavaScript files on Google Drive

Well, I like blogger.com. It is free and it allows me to play around the source code of templates. Since last year, I started to use customised templates and tweak some of the source codes. Believe or not, I actually enjoy it. Anyway, this is not what this post about.

I use Google Drive to host my CSS and JavaScript files for this blog site. I edit these files on my computer and let Google Drive application to synchronise the files to the cloud. It sounds normal and I believe many other people would use the same way I do. However, what if I want to edit these text based files over Google Drive itself, on the browser? "Yes, You Can!" but you need third party Google Drive Apps to achieve the goal.

I found two third party Google Drive apps, Neutron Drive and Drive Notepad. Both are great apps and have their pros and cons. I started with Drive Notepad since it was the first app I found. But I use Neutron Drive more often because it integrates very well with Google Drive and it has file browser feature.

Generate MetaData for ExtJs Data Reader

Metadata is one of my most used properties in Ext.data.reader.Reader. It allows me to pass custom data/configuration to Grid Panel, Form, ComboBox and other components without needing extra efforts to change the code. At the following example, I just want to put my column layout configuration to the grid without configuring the data fields in the data store. If the settings of data fields is bound with data columns' information on the database, then we could save a lot of time to match the data field types when updating/retrieving data to/from server.

In this article, we are going to retrieve field types, defaultValues, and allowBlank settings via the meta data which is generated based on the data columns information of the MySQL database.