Midgets standing on the toes of others

Code That Matters

AngularJS and Rails 4

After you have created a Rails 4 project and want to use AngularJS for the front-end development, this post can provide some tips.

Use Bower

It’s a common practice to use Bower to manage front-end dependencies. Bower should also be used in Rails development. After Bower is installed, create .bowerrc in project root directory to specify directory to put dependencies.

  "directory": "vendor/assets/components"

Then update config/application.rb file to include Bower components. Add following line to your application configuration.

Install AWS CLI on Ubuntu

To install AWS CLI on Ubuntu, you need to use Python 2.7. If you use Python 2.6, there is a conflict error with simplejson library.

You may need to uninstall Python 2.6 first using sudo apt-get remove python. Then install Python 2.7.

sudo add-apt-repository ppa:fkrull/deadsnakes
sudo apt-get update
sudo apt-get install python2.7

Then install pip using sudo apt-get install python pip, then install AWS CLI using sudo pip install awscli.

Common JPA/Hibernate Issues - javax.persistence.EntityExistsException and org.hibernate.LazyInitializationException

When using JPA/Hibernate, there are some common errors.

javax.persistence.EntityExistsException: A different object with the same identifier value was already associated with the session

This means when Hibernate is trying to save entities when committing the transaction, two new entities have been added but they are related to the same database table row. You should check the Cascading settings of your entities. You may declare CascadeType.PERSIST or CascadeType.ALL on one of your entities, but still trying to persist dependent entities explictly using save. This will cause two entities to be persisted: One from cascading and another one from explict persisting operation. You can remove the explict persisting operation and let Hibernate to manage dependent entities.

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.