I have just joined Toptal

A month or so ago I was contacted by one of the hiring managers at Toptal. I had heard of Toptal before; it is a “network comprised of the most thoroughly screened, talented freelance engineers in the world”. As freelance web developer I have worked on elance.com and oDesk.com (now called upwork.com). Though rewarding most of the times, the experience of having to go through all the nitty-gritties of looking for jobs, sending through proposals, sending sample work, waiting for responses, answering to questions as part of “interviews” etc has not generally been great. This is primarily because so much time goes into all those processes before landing into the actual work.

Come Toptal into picture and learning about the noble idea of giving the right platform to top developers as well as to clients who look for quality work, I was simply fascinated and immediately aspired to become one of the coveted “top 3% developers”. Basically it was everything I was looking for as a freelancer.

So when I got a call from the Toptal hiring manager I was pleasantly surprised (he first connected me on LinkedIn). Somebody heard me!

Becoming a Toptal developer was not easy. There was four-step interview process.

Telephone chat

This part was the hiring manager calling me over telephone, inviting me to join Toptal as front-end developer, to which I was completely like why not? He also explained to me about the company, the interview process and we went through some other chit-chat. It was basically to test my English speaking proficiency, which he said I passed right away!

Coding exercise

Next I was given coding exercise to be completed within next 48 hours (they were flexible to extend the time if I wanted). There were three questions (and a sample question for practice) from codility.com to be completed in 90 minutes. You can choose whichever programming language you are comfortable with (I did in PHP).

Technical Interview

Then after few days I was scheduled a technical interview with one of their senior engineers. This I thought was like a real face-to-face interview over Skype, so I got my face shaved (one of the beauties of working as freelancer is you never care when you last shaved), wore by best shirt and was ready to impress. But it was all voice-only interview. He asked me about my previous work experience, my level of expertise in CMSs like WordPress, Magento, Concrete5 and Shopify and my availability for work. He also asked me to send links to websites I did in these CMSs.

Test project

Then finally I was given a test project. They sent me git repository to version every step as I work. The duration of the project was two weeks.

My project was to develop a plugin for any CMS I am comfortable with (I chose WordPress). The plugin will add Facebook like button on posts and pages. Users have to hit like in order to read the full content of posts and pages. Only certain number of characters will be shown initially, the number of characters to be set by admin.

I completed the project within two days. The final part was to demonstrate the plugin to another senior developer over Skype. He was happy with my work and at the end, he said “welcome to Toptal”!

So that’s how I got in, a pleasant and enriching journey. I am now looking forward to getting my first client.

Note: I will be submitting the plugin I developed to WordPress. I have called it “Like and Read”.

CSS Sticky footer

CSS to add sticky footer (footer position is fixed at the bottom of the page independent of page height).

Cannot insert images using WYSIWYG after Magento upgrade

I have just upgraded Magento 1.6 to 1.9 and everything went as smooth as baby’s bum (or silk).

But there is one issue. I am not able to insert images using WYSIWYG editor. The “Media Storage” dialog box is showing up wired. Look at the screenshot below:



There is a CSS file called magento.css inside the directory skin/adminhtml/default/default/lib/prototype/windows/themes that is missing on the upgraded version. Move in the file to the new version same location, problem solved!

How to manually upgrade Magento version properly via FTP


First of all, to all my fellow wonderful web developers out there, DO NOT modify “core” files when you are tweaking any CMS-based websites. If you want to add in new features, do it through extensions / modules / plugins / addons (or any other fancy jargons), or create “local” copies of core files and make modifications there.

Modifying core files is not only a very bad practice, but more importantly when you upgrade the CMS version, all the changes will be gone (as in Gone with the Wind – ah what a classic! I wish more such movies are made today instead of the likes of Fifty Shades of Grey. Anyways.)

For some unfortunate reason if you have Magento 1.4.1 or earlier, I suggest you to straightaway go to the great Museum of Magento and give a copy of your site. Jokes aside, for Magento 1.4.1 and earlier, you have first upgrade to 1.4.2, and then you can upgrade to any higher version.

Which means to say, for versions later than 1.4.1 you can upgrade to any higher version. Magento has its official page listing steps on how to upgrade via SSH. But on this post, I will be listing steps to upgrade Magento manually via FTP, the good ol’ way.

1. Back up

Keep a back up of both and database and website files before doing the upgrade. Very important!

2. Download the new version

Download the latest version of Magento. Remove all the files of your current site (but you have a back up somewhere) and move in the files from new version you just downloaded.

3. Merge community and local files

DO NOT replace files from old version on new version. Meaning if there is file with the same name and same location on the new version, do not replace but only move the ones that do not already exist.)

Merge these the folders from the old to new version:

  • app/code/local
  • app/code/community
  • app/etc/modules
  • app/js

Pay careful attention on /app/code/community folder and take note of extensions that are installed. When an extension is installed, it also adds files in these locations:

  • /app/design/adminhtml/default/default/template
  • /app/design/adminhtml/default/default/layout
  • /app/design/frontend/base/default/template
  • /app/design/frontend/base/default/layout

So for each extension, locate in these four folders any files belonging to the extensions and move to the new version. For example if an extension is called ABC there probably will be some files called AMC.xml inside “layout” folder and/or folder called ABC or similar inside “template”.

4. Move theme / package files

If your site uses custom theme, move it to new version from app/design/frontend/default/yourtheme.

Or if it uses package move it from app/design/frontend/yourpackage

5. Skin files

If your site uses custom theme, move skin files from skin/frontend/default/yourtheme.

Or if it uses package move skin files from skin/frontend/yourpackage.

Also extensions might have added their own skin files. So check for any skin files associated to each extension in these folders (same point as in step #3 second part)

  • skin/frontend/base/default
  • skin/frontend/default/default

6. Custom admin folder

If there is custom admin folder, move it from from adminhtml/default/yourtheme

7. Go to app/etc/local.xml and change the database setting

8. Check the site and welcome yourself to new Magento!

7 reasons why you will love Concrete5

concrete5Having worked with Concrete5 over the last four years, both us as developer and end user, I have simply loved the CMS. Concrete5 was conceived with strong focus on end users so that it is easy, flexible and robust. It is exactly that!

Unless a website has very specific requirements, say it is a full-fledged online store or a complete blog (for which there are other CMS like Magento and WordPress respectively) I use Concrete5 for any standard website. And once the site is built, it has never been more fun to teach the clients how to use the CMS, and happier to see them pick up the tricks so easily.

So here are 7 reasons why you will love to have your website built in Concrete5:

1. Inline content editing

White giving training or showing to clients on how to maintain their Concrete5 website, I often tell them that editing contents of their website is like editing a Word document, which is indeed true. Concrete5’s Inline content editing feature allows you to edit contents directly on the page without requiring you to go to a separate interface etc. For example, in other CMS like WordPress, you have to go to admin Dashboard, locate the page and edit the contents on the interface which looks entirely different to what your website actually look like. But with Concrete5, you edit the contents of a page by “staying” on that page itself.

2. Blocks

A website can be thought of as a collection of things like logo, navigation menu, banner images, text and images, embedded videos, contact us form, etc, to name a few. In Concrete5 terminology, they are called “blocks”. A block is a type of content that can be added into any page, an image block for example. The beauty of blocks is that they can be easily moved, edited and copy-pasted into another location.

3. Inbuilt Features

If you are looking for astandard website say with a few banner pictures, paragraphs with images for content, some embed videos from Youtube and contact us form, Concrete5 has it all. Unlike other CMS, for example WordPress where you start looking for additional plugins right after installing the CMS to even add very standard and simple things like contact us form, Concrete5 has all these standard features in place.

4. Versioning

Versioning is another useful feature of Concrete5. Whenever you make any slightest of changes to a page, it creates versions. In case you did something wrong on a page or you want to revert back to what you had before, you just have to activate an old version. As simple as that!

5. Asset Management

All the images, documents like PDF & Word files are your website’s assets. Many CMSs have poor asset management feature where all image files are stored in one area and locating a particular image makes it very difficult. Cncrete5’s “File Manager”, on the other hand, is very robust and intuitive. You can create “sets” and arrange images by keeping them under separate sets for easy management.

6. Customization

Another strong reason why I love Concrete5 is because it offers flexibility as its best. Every website is unique in its own way and more often than not, each website requires different features both in terms of functionality and look. Concrete5 makes it so easy to create customized blocks specific to a website.

7. Add-ons

Add-ons are additional features that can be downloaded and installed onto your website. There are both free as well as paid add-ons for Concrete5 like any other CMS. But what set apart Concrete5’s add-ons is that they are not created by any Tom, Dick and Harry and uploaded online with potential loopholes on the codes, for anyone to download and use, thereby risking the site getting hacked. Before an Add-on is made available online for download or purchase, they are thoroughly reviewed by core Concrete5 developers, ensuring that the codes are up to the standard.

Magento minimum order amount before discount

We have a Magento store that makes use of “Shopping Cart Price Rules” and minimum order amount. We realised that by default, the minimum order amount is validated after the discount is applied which did not make sense because if the order about is more than the minimum amount the validation should pass, meaning the discounted value should not matter. That means, the minimum about should be validated before discount.

There is a work around:

Copy the file:




Inside the function validateMinimumAmount()



How to develop WordPress plugin tutorial: Widget (step 5 of 5)

nopkinwp-widget.php – Widget

This file is used to create widget function for the plugin.

With this, the plugin is ready to be deployed!

If you want to test the plugin or see the files for yourself, you can download the complete plugin here:

Download Nopkin Hello Plugin

How to develop WordPress plugin tutorial: Shortcode (step 4 of 5)

nopkinwp-shortcode.php – Shortcode function

This page is used to create Shortcode for the plugin.

Once the function has been created, there are two ways to use the Shortcode:

1. Paste the Shortcode inside post/page:
[nopkin_wp display_author=true/false]

2. Call PHP function directly within template files:

How to develop WordPress plugin tutorial: Admin (step 3 of 5)

nopkinwp-admin.php – Admin page

This page is to create admin / settings page. Just for example, there is one input field on the setting, that is, to give font size (in px) to the output text.

How to develop WordPress plugin: Initialise (step 2 of 5)

Plugin file structure

First create the following folders and files.

nopkinwp-hello.php – the main plugin file

This is the main file to define and initialise the plugin. It can be given any name but it is a good practice to give it the same name as your plugin name.

This file defines the plugin giving its name and description, author, version, license information, etc.

Now if you look at WordPress Plugins page, the information you entered above within comments is displayed here.

Next, these are functions to include other required files.

Mysql table
As the main purpose of the plugin is to display “Hello world…” text from mysql table, a mysql table has to be created and text inserted.

The plugin’s main function
Then there is the plugin’s main function, which will be used as shortcode and function call to display “Hello world…”

About me

profileSangay Tenzin
Web Developer, Magento, Concrete5, Wordpress, Shopify, Ecommerce, Website all-rounder, Casual blogger…

Love… Happiness…



Bhutanese Calendar
གནམ་ལོ་ མེ་མོ་བྱ་ལོ།

Fire Female Bird Year 2017

འབྲུག་ཟླ་ གཉིས་པ - གསུམ་པ།

April 2017

ཟླ་བ Sun
མིག་དམར Mon
ལྷག་པ Tue
ཕུར་བུ Wed
པ་སངས Thu
སྤེན་པ Fri
ཉི་མ Sat
༡༠ 6
༡༡ 7
༡༢ 8
༡༣ 9
༡༤ 10
༡༥ 11
༡༦ 12
༡༧ 13
༡༨ 14
༡༩ 15
༢༠ 16
༢༡ 17
༢༢ 18
༢༣ 19
༢༤ 20
༢༥ 21
༢༦ 22
༢༧ 23
༢༨ 24
༢༩ 25
༣༠ 26

Powered by Bhutanese Calendar