Midgets standing on the toes of others

Code That Matters

Deploy Static Website Using Capistrano

Capistrano is a good tool for deploying applications. It can deploy Ruby on Rails applications and other applications. This article is to show you how to use Capistrano to deploy a static website. The deployment process is very simple, just check out the code from Git and put into a directory hosted by Apache.

Prepare your local environment

On your local development environment, install Capistrano using gem install capistrano.

Prepare your remote environment

Remote environment is where the application is deployed to. Add user deploy to your remote environment. This user deploy is the user Capistrano runs.

Magento - Add Order Item Quantity

In Magento’s ‘Place order’ page, order item’s quantity is not shown by default. To show this value, file /app/design/frontend/default/myshop/template/checkout/onepage/review/item.phtml should be modified. You can get the file path by enabling Magento’s Template Path Hints.

From this file, $_item is the order item.

<?php $_item = $this->getItem()?>

AngularJS - Simple Input Text Count

With AngularJS’s two-way data binding, it’s very easy to count the characters while user is typing. Usually this will need to use JavaScript to watch keyup event on input or textarea elements. But with AngularJS, it’s very simple. No JavaScript is required.

As code shown below, use ng-model to bind textarea to model message. Once message is changed by user input, {{ message.length }} will display characters count.

<div>{{ message.length }} of 120</div>
<textarea ng-model="message" cols="30" rows="10"></textarea>

Introduction to Iframe Shim

iframe shim is an old technique which emerges from old days when browser plugins were popular. When a brower plugin is added to the browser window, it opens a hole in the browser window. If you try to show any other content in the plugin’s area, the content will be hidden behind the plugin and won’t show up.

To show content above plugin window, you need to create an iframe shim. iframe element can display above plugin window. So it can be used as a layer between plugin window and actual content. The iframe’s size is the same as the actual content, but with a lower z-index value.

Disable Form Auto-filling for Chrome 34

After upgrading to Chrome 34, due to a new change, autocomplete="off" on the form element is no longer disabling form auto-filling. To fix this issue, just add a hidden password field as the first element of the form, see below:

<input type="password" style="display:none;width:0;height:0"></input>

This will disable form auto-filling.

The rule of Chrome 34 to auto-fill username and password is to find the first password field and auto-fill this password field and the text input field before it. Chrome 34 will treat these two input fields as username and password fields, respectively. So adding a hidden password as the first element will make sure other text and password input fields are not auto-filled.

AngularJS - Delay Controller Initialization for Asynchronous Operations

In an AngularJS web application, a controller requires some data for initialization, but this data needs to be retrieved from server. One solution is that after controller is initialized, use $http service to get the data and returns a deferred. But this will change the usage of data to asynchronous operation, which may not be possible for all the operations. People usually prefer to synchronous operations. Another solution is to delay initialization of controller until data is retrieved from server successfully.

To do this, we need to use a run service to start retrieval of the data.

Jekyll - Bootstrap Navbar Active Status for Different Pages

When using Jekyll to create websites, Twitter Bootstrap is a very good choice for styling. Typically there will be a layout template for all the pages. When using Bootstrap’s navbar, the basic markup of the navbar is put into the template, each page’s content is put into separate markdown files. Then we need to add active class to the correct <li> element in the template to make sure that in each page only the corresponding <li> element has the active class.

To solve this issue, I created a small Jekyll plugin to correctly generate the class name for navbar.