The ins-and-outs of – Part 1


TheVocket – a collaboration project with a friend of mine, Mohd Fazreen Jasni since early July 2014. The 6-months-old side project gave me an opportunity and a stage to play with huge crowds, and they are an avid readers.

Monthly Pageviews    : 5,200,000 views  
Daily Pageviews         : 100k - 200k views  
Peak Traffic        : 2000+ live readers  
Normal Traffic         : 300 - 500 live readers  

It was a fun and knowledgable journey.

Then, few of my friends and some of the readers who were curious about, asked about its server configuration and the system behind it. So, lets dig into it and apologise if the remaining story went going too technical.


This project is based on WordPress CMS as its publishing platform because it is free, relatively easy learning curve, and has wide support on the internet. Very wide.

For the WordPress setup, i tried my best to minimize utilisation the usage of plugins. If a feature can be coded natively into the theme, then do not use plugin. Sometimes, what we want to implement in the theme was very minor, or static and this can be hard-coded into the theme itself.

The most important plugin for this project was W3 Total Cache as one of the mechanism for caching. It helped with page caching and also database caching (memcached). 'Page Caching' is a concept to store fully rendered HTML files, which were processed through PHP.


Every single static file will be compressed, such as CSS and Javascript. Please use CSS/Javascript compressor to remove any unnecessary white spaces, and to simplify the javascript variables and more.

If there are few files of CSS/Javascript, they will be combined as one file to reduce the number of request from our server. This will result with less traffic towards our server. Yeay.


Referring to the attached image at the top of the post, 'User Request' is the reader. When someone typed in their browser, it will send a 'request' to our server. And the server that will be accepting the request is server A, because this is the first door to the other server, the most frontal server.

Server A is meant to store all the informations which have been fully processed, and this is also called 'caching'. The idea of having this server is to serve as a huge 'Library'. There will be no data processing at all.

However, if the requested page was not found on Server A, the request will be forwarded to Server B.

Server B, which use LEMP configuration (Linux Nginx MySQL PHP). Nginx is pronounce as 'Engine X'. Because Nginx is just an HTTP server, the request will be proxied to PHP for processing, in case you forgot that WordPress is based on PHP.

At this level, common and used PHP codes will be cache by OPcache for future reuseability. Then, through W3TC plugin, the requested page will be rendered as HTML file, ready to be sent to the browser.

When the page went through Server A, it will be cached again to serve for the same request by next reader without having to go all the way to Server B


The attached diagram is specially done for, a blog. This setup only focused on reading performance. For a server with inputs from user, the data processing power is very crucial, and most of the time it involved a lot of RAM and PROCESSOR power (cores?).

If we look closely, is not using any CDN services, because most of the CDN focused on the outside of Malaysia, while our readers came from inside Malaysia. Furthermore, CDN services such as MaxCDN is still beyond our budget and the quality of Cloudflare seems to disappoint us.

We decided not to use CDN and just a common cache server at the moment, which is Server A (with Varnish Cache).

There are many more configurations that can be done with all the technology available. Standalone server, multiple backend, Master-Slave, multiple front-caching (DNS configured), vertical-horizontal setup or event Standalone-Backup settings.

Feel free to comment for Q/A.

A Message to Malaysian Meteorological Department

Photo by Jason Nilsson Lee


Just to highlight bashing up in comment section regarding the rumours that has been spread out through internet messaging systems, it seems that you didn't write a proper copy as what you been reported at BHarian Online.

The rumour:

Jabatan Metreologi Malaysia menasihatkan agar semua warga Kuala Lumpur dan Putrajaya agar merancang perjalanan pulang dari tempat kerja dengan baik pada 27, 28, 29 dan 30 Oktober 2014. Dijangkakan ribut petir dengan angin selaju 80-100 kmsjm bersama hujan lebat akan melanda Kuala Lumpur dalam tempoh tiga hari tersebut pada setiap waktu petang. Dibimbangi pusaran puting beliung boleh berlaku dengan kelajuan angin seperti itu. Elakkan daripada terperangkap dalam kesesakan lalulintas, kawasan pokok dan kawasan mudah banjir. Sekian

Do include the word 'puting beliung', and adjust the position of the word 'ribut kuat' in this post: link

Just want to highlight that, wrong use of term can cause backslash to the department and its body.

Kindly, reconsider to update the post copy.

One more thing, I found out that is hardly accessible (not loading at all) at the time of panic or high-load, especially like this morning, when I received a copy of the message.

I would like to offer my technicalities and specialties with website development to take a look into this issue.

The reason why other platforms were taken as serious note is because they can be accessible at all time (Twitter, Telegram, WhatsApp, etc).

Therefore, in order to go against that medium, your site also need to be accessible at all time, as people would like to verify the news. (Even though, some just simply forward stuffs).

That's all from me, thank you.

p.s: The department also might consider 'boosting' any emergency or urgent post on Facebook to increase it's awareness across Malaysian users.

Should Start Writing, Again

Well, first and foremost, hi.

Haha. Previous post was a wake up call after a long hiatus, but somehow I went back to away mode for another 8 months. All sort of things has changed. Even the framework that power this blog has updated to version Orchestra 2.2

Lets start writing again, baby!

Hello World

function index() {
    echo "Hello World";

The statement above is a common practice when you start learning into the world of programming, on any language; be it PHP, HTML, JavaScript, and others. The 'Hello World' was the basic string/text used when you want to display your codes on the screen. Hence, the reason I name this post as such.

This is a comeback after a hiatus for a very long time. After quite a while, I found out myself to be among (online) friends who loves to share knowledge and discoveries. They write on multiple platform such as Medium, hosted WordPress, Blogspot or even Facebook. It came to me that I also have the desire to learn more and share the knowledge to others. To the community. To the younger ones (new to the web design/development scene).

Oh. Before I forget, this blog is now hosted using Story CMS on Laravel, through an awesome Orchestra Platform.

Will get to the theming and customisation, a bit later. For now, wish all the best to myself, to start writing (again).

p.s: Need to read more about Markdown