Webfont for Websites

I was working on a web project where I wanted to embed the special fonts not the standard fonts which comes with
the Operating System. When I did the POC I was having font installed on my local and everything worked fine.
But I was sure about the upcoming problem, as this is a website where I want to use this special font and
even if I install the font on the Server that will not help as end user will not see the same font on the
browser window until they have same font installed on their machine.

then I thought about some other options and did some Google and read about the Web Fonts and that looks
like a perfect solution for the problem which I have.
Generally browser will not support the special fonts until those are installed on your machine or
in the form of web fonts.

Now to reference these webfonts we need @font-face feature of CSS. this will allow us to reference any of the
web font type. Here are the steps to implement the special font format on web:
1) First of all get the .TTF or .OTF format of the font which you want to use for the website
2) Now convert the .TTF format to the following format types – .eot, .woff, .otf and .svg
3) To convert these .TTF format to other web font format you can use the online converters. These converts are
really helpful. here are few converters which I have used when I was working with the font formats
Onlinefontconverter,Freefontconverter, Fontconverter and TTF2EOT
Even for .eot conversion it is good to use the online converter instead of Microsoft WEFT. That tool is no good
looks like a overhead. But choice is yours 🙂
4) Now to support all the browsers we need to get all the above mentioned font format, once you have converted ttf to these format create
a CSS and add the code mention below in that, I have created a fonts folder in my project folder and kept all the font files in that
font-family: “Fontname”;
src: url(‘fonts/FontFilename.eot’);
font-weight: normal;
font-style: normal;

font-family: ‘Fontname’ ;
src: url(//:) format(“No-IE-404”),
url(‘fonts/FontFilename-webfont.woff’) format(‘woff’),
url(‘fonts/Fontname.otf’) format(‘opentype’),
url(‘fonts/FontFilename-webfont.svg#intlt’) format(‘svg’),
url(‘fonts/FontFilename.ttf’) format(‘truetype’),
url(‘fonts/Fontname.eot’) format(’embedded-opentype’);
font-weight: normal;
font-style: normal;

After making all these changes it worked fine in all the browser like IE 7, Chrome , Firefox but issue i faced in
opera and I noticed opera was always having a conflict with IE font file/ fontname. So to fix it I have used two
.eot files. one for the IE CSS style code and other for the NON-IE CSS style code. Then it worked perfectly fine.

We have used in this CSS @face-font twice because one @font-face works with IE and other for all the NON-IE browsers.
till IE 8 Microsoft browser supports only .eot format so we have to have separate code to handle it.

I hope this article help you…

Solution to Ember.js app’s frequent failures (Error:FSEventStreamStart)

In our ember.js based project after getting latest code and running following commands:

npm install && bower install
npm start

when I was starting app, it was failing randomly with following error.

(FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)


throw er; // Unhandled 'error' event
Error: watch EMFILE
at _errnoException (util.js:746:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1161:26)

npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "start"

To solve this issue I tried doing following

npm cache clean
rm -rf node_modules bower_components dist tmp

Then reinstallation of everything. After that it was still failing randomly.

A lot of developers have faced this issue and many said when we restart the machine it work well. And same happened with me. However I was not happy about this solution at all. Because I cannot start my laptop every time to run the app

So I stumbled upon one of the github issue post and that solution really worked well. As I am using sublime, so I created a file with extension .sublime-project
e.g. goodcity.sublime-project

Added following content in my PROJECTNAME.sublime-project file

   "folder_exclude_patterns": [

Then to be on safer side I closed my sublime and reloaded it. Then I cleaned up npm cache using npm cache clean and started app

npm install && bower install
npm start

Now everything works perfectly!! Even if you want to skip last step that is OK because after adding the sublime-project file content. If we start app directly it will work

Thanks to github issue post

To learn more about Sublime-project file click here

NOTE: After doing all above mentioned changes if you still randomly face same issue, then I would suggest just close your Sublime app if you are using sublime. Then start the servers and you will see it will start working. To understand more about it you can read this issue

Post Xcode 7.1 Upgrade build issue – cordova/CDVViewController.h file not found

If you have recently upgraded your Xcode to 7.1 version, you will start getting cordova/CDVViewController.h file not founderror. You would be surprised that earlier build was working perfectly fine with Xcode 6.4 and Xcode 7.0

Screen Shot 2015-11-26 at 15.43.18

Screen Shot 2015-11-26 at 15.43.24

To fix this error follow these steps:

In Xcode select the project and go to Build Settings of the project and the Search for Header Search Path It will show you below shown screen.

Screen Shot 2015-11-26 at 15.48.09

Double click on the Multiple values row and it will show you a list pop-up now add a new row to this list and add content


Then archive/build the app and you will see everything works fine.

If you want to add this content from command line instead of directly adding it using XCODE IDE, then use command:

xcodebuild HEADER_SEARCH_PATHS="\$(TARGET_BUILD_DIR)/usr/local/lib/include \$(OBJROOT)/UninstalledProducts/include \$(BUILT_PRODUCTS_DIR) \$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"


Reason behind this issue is, release of new platforms like tvOS, there is an extra folder has been created to archive intermediates, namely a folder with the name of the os. earlier we had "$(OBJROOT)/UninstalledProducts/include" and now we should have "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" To make xcode 7.1 work we should have these both paths added to `HEADERSEARCHPATHS

How to make Active Admin column Html_safe and replace boolean values with some icons in better way

I was working on ActiveAdmin views and as we are using html editor for some of our text fields so we wanted to make sure when we are showing that html content in the application. It should be readable and without html tags.

To do that generally it is mentioned to use a block for the field and use .html_safe method. However I did not like this approach, as we have too many fields where I have to call html_safe method and I was not keen to write block for each fields. I know 🙂 I am lazy in that way. However, if I use that approach that means it is not DRY.
Here is the example to explain, what I mean by writing block for each column.

ActiveAdmin.register Post do
index do
column :comment do | post |
column :description do | post |
column: isPrivate
column :website_url

So I and my colleague Devilal was looking for a better approach and thanks to him he found out and suggested approach write a custom method for the column of the ActiveAdmin view. Now I have wrote a html_column method and that will actually return html_safe data and I will call this method in my ActiveAdmin view.
Basically we are extending Active Admin class ActiveAdmin::Views::TableFor and ActiveAdmin::Views::AttributesTable and we have added new methods html_column, html_row, bool_col and bool_row to display data in html safe format and boolean value with a nice tick and cross icon

We will add this code to a new file and you can put that file under
app/admin/lib folder or else add code to config/initializer/actice_admin.rb

module ActiveAdmin
module Views
class TableFor
def html_column(attribute)
column(attribute){ |model| model[attribute].html_safe }
def bool_column(attribute)
column(attribute){ |model| model[attribute] ? '✔'.html_safe : '✗'.html_safe }
class AttributesTable
def html_row(attribute)
row(attribute){ |model| model[attribute].html_safe }
def bool_row(attribute)
row(attribute){ |model| model[attribute] ? '✔'.html_safe : '✗'.html_safe }

Finally we can make the change in the Active Admin View now and we will replace column with html_column or bool_column as per requirement.

ActiveAdmin.register Post do
index do
html_column :comment
html_column :description
bool_column: isPrivate
column :website_url

Use Jquery – document.ready() to load page specific javascript in Rails App

Yesterday I was working on one of our portal (It’s in Ruby on Rails and we have used quite alot jquery as well). Was integrating a nice Photo Gallery plugin on one of the page. Applcation is having many pages. Every page has some different behaviour and we have different jquery calls for that as per need.

For a performant application, we always want to avoid any unwanted calls to different methdods/functions. In my case, as I mentioned earlier I wanted to show Photo Gallery on a page and photo gallery loads as soon as page is loaded. Gallery photos are dynamic and random which I will be getting from server always.

As soon as we talk about page load we start thinking 🙂 that this code has to go in $(document).ready() 🙂 isn’t is?

Ok, so I did the same thing. I wrote my function and called it in $(document).ready(). Everything worked fine as expected from the functionality point of view. However as I knew getting random photos is always a heavy thing and so I wanted to make sure that I do not hamper performace of the app by any means. So I started looking at application terminal/console to see what all requests are coming in.

Oh I see unwanted calls to my funpics action, in Home page and other all pages. Why it is happening? It was obvious as my $.ajax method which I have used it not based on any Click/ MouseWheel etc event. It was directly on the load.

As per rails practices, I was having a separate JS file for my each controller and same for the “Gallery” controller and there I wrote my code to get the Photos. But you can see that I am calling my ajax method directly on document.ready. Which I should not be.

//----- gallery.js
var gallery ="" ;
url: '/funpics',
async: false,
success: function (data) {
//render images
error: (function(xhr, status, e) {
// show error

I could have done a workaround for it by adding a “IF” condition before calling the $.ajax method.

if ($('body.gallery').length > 0)

However I wanted to do it in a little better way, so I came across a nice article. Article was addressing exactly same issue. So I added ControllerName and ActionName to the body tag atg in my layout file application.html.haml file

Something like this
%body{class: "#{controller_name} #{action_name}"}

Now I will always have two classes – controller_name and action_name in body tag.

After doing this I added JS plugin jquery.readyselector.js. This one is must and it is doing the really trick. Do not forget to include this in your application.js

Then I changed my gallery.js file little bit, now it looks like

var gallery ="" ;
url: '/gallery',
async: false,
success: function (data) {
//render images
error: (function(xhr, status, e) {
// show error

In above code $(‘.gallery.funpics’)_, gallery is –> controllerName
and funpics is –> actionName

Now when I started app, I can see $.ajax code of funpics is only called when I am on funpics page and not on Home or any other page.

By this approach jquery.readyselector.js plugin makes sure that content of the ready() block is only loaded when those classes are there otherwise it will not call those functions.

There are some other approaches to handle this problem. e.g.

1. Some developer recommended using data-attribute_, instead of defining the ControllerName and ActionName as class, define them as data-attr_

%body{"data-controller" => "#{controller_name}"
"data-actionname" => " #{action_name}"}

I tried it, but I did not like the idea of comparing the names. So I dropped this approach

2. Some suggested using gems like Pluggable_js and Paloma_

However I was not having a need of that level of complexity so I did not use any of these gems. Paloma gem looks good for a bigger project where we have many many controllers and it will take care for things in systematic manner. However I cannot comment much on it as I have not tried it, I just read about it 🙂

3. If you still want to know some more approaches then go through this blog, it has one more approach http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution

I hope this will help you guys improving your application perforamance by avoiding unnecessary method calls.

Special thanks to:
John Firebaugh for writing useful jquery-readyselector
Brandon Hilkert as his blog really helped me

If you are trying this approach then do read comments written on “Brandon Hilkert” blog as those are also very informative and useful

Public Share your local application

These days during application development we find many times need to share our local application with remote users. Or sometimes there is need to have  a public url to get access to some third party apis.  e.g. if you are using a third party api and  you want to have webhook from that third party to auto update your application in that case you  need a public url.

During development it becomes difficult to work if we do not have apps like Pagekite and localtunnel etc. Pagekite and localtunnel both are really good tunneling solutions, however these have some drawbacks  or I would say limitations as per my needs.


  • For Pagekite you should have an account on Pagekite site and that login will last only upto 30 days or so. However most of the time you do not use  Public sharing  all 30 days in one strech of the app all the time
  • For localtunnel the only drawback is change of url every time you start it. However in practical scenarios some times it is annoying as every time you start it you have to either pass the url to others or change it in configurations multiple times.

In one of my project I had to restart my app multiple times, also I could not afford waste of time by changing my configuration all the time. More over I was out of Pagekite trial period 🙂

So I started searching for a solution which helps in saving my time and also where I need not to buy for my testing specific needs.

I came across a nice solution – i.e. ngrok

Ngrok’s Benefits:

  1. When you start it, it will give a unique url and that will be valid for one day!! So it saves my time as I do not have to change it on every restart
  2. Another advantage, you can use the service without any sign-up. Just download and install. There you go. Also it is available to everyone. If extra features needed you can buy
  3. One more advantage is, it provides url with both http protocols (http and https)

Steps to install ngrok

Integration – Github with Pivotal Tracker

Everyone these days working with one or the other Version controls systems and Agile tracking tools. Currently for our most of the project, we are working with github and for tracking we all are using Pivotal, Trello or some other tools.

Now these apps are having some cool apis and api tokens which helps us integrating Version control system and tracking tools.
So that when we commit something that same message gets saved in our tracking tool. At the same time those tracking tools change their status automatically from Started -> Finished -> Delivered etc

I am going to explain, how to integrate Github with Pivotal. This is very simple and quick and you can make it work immediately.

Basic Requirement

  • Admin access to the Github Account
  • Api token for the Pivotal

Steps to implement

  • Login to Pivotal and go to Profile page. At the bottom of the page you will find the API TOKEN. As shown in the Screenshot_1
  • Copy the API Token
  • Now login to the GITHUB account and go to the specific project for which you would like to integrate the tracking. If you have the admin access for github then you will see a tab Settings in githib
  • Go to settings page and click on Service Hooks link. That will give you list of all the services which Github supports, e.g. Pivotal, Basecamp, Campfire and Trello etc
  • Click on the Pivotal Tracker link, it will show you screen as shown in Screenshot-2
  • Now enter the API TOKEN of Pivotal in the TOKEN field and tick the ACTIVE checkbox. Then just save settings. You are done with the integration of the Github and Pivotal

Commit Message after Integration

To associate an Github commit with a Pivotal Tracker story, we must include a special syntax in the commit message to indicate one or more story IDs and (optionally) a state change for the story.

  • Commit message should have square brackets containing a hash mark followed by the story ID i.e. “[ #StoryID]”.
  • If a story was not already started (it was in the “not started” state), a commit message will automatically start it.

e.g.    [#12345678 #12345679] feature developed for soap

  •  To automatically FINISH a story by using a commit message, include *”fixed”*, *”completed”* or *”finished”* in the square brackets in addition to the story ID.

“[fixed #12345678] my message” or
“[fix #12345678] my message “or
“[fixes #12 345678] my message”
“[completed #12345678] my message”
“[finished #12345678] my message”

              Note: For features, this will put the story in the ‘finished’ state. For chores, it will put the story in the ‘accepted’ state.

  • If you h ave implement CI, which will basically do an auto deployment and test. For that situation, include “delivers” in the comment and story will be put in the ‘delivered’ state:

“[Delivers #12345679] My message”

Introduction to Windows Azure with Node.js

Windows Azure with Node.js

Windows azure is a windows based cloud services, you can deploy your code and build your apps on the cloud server. Also it has support for all the OS and not just for WIndows. Also you can setup Virtual machine and you can do a Remote desktop to that machine. Which is a nice feature.

As initially when Node.js was launched it was not supporting the windows environment. But later on to use Node.js on the Windows machine and allow user to build and deploy Node.js apps Microsoft has brought Node.js to Windows Azure.

So now we can use Node.js on Windows, we can develop and test Node.js app on the windows machine too.

To do so powershell command prompt is needed and most importantly Windows Azure SDK for Node.js, other than that there are few more essential tools you need to work on Azure and Node.js

Azure SDK for Node.js

Azure Storage Explorer

Once installation is done then you will see Windows Azure PowerShell for Node.js in your Program files. Run that as “Administrator” to start with your first Node.js app

Few Important commands of Windows Azure

  1. New-AzureService
  2. Add-AzureNodeWebRole
  3. Start-AzureEmulator -launch
  4. Get-AzurePublishSettings [file_path]
  5. Import-AzurePublishSettings
  6. Publish-AzureServiceProject –ServiceName –Location -Launch
  7. Stop-AzureService
  8. Remove-AzureService

Its good to remember these commands while working with Windows Azure (Node.js)

Now to start with the first app of Node.js for Windows Azure you have to start with first two commands


“This will create a Azure Service on you local”


“Once you run this command it will create a WebRole folder inside your service and this is the place where you will keep you Node.js code. When we run these two commands, SDK by default creates a Hello World app for us in Node.js”

Now to run this app use the (3) command in the list

Start-AzureEmulator -launch

“This will launch the web browser with the main page of our app”

If you are done and would like to start with some other code, you can stop the service using command (7)


If you do not need this service and want to remove it then use the command (8)


Now if you are done with your code and want to Publish this app to Windows Azure Cloud then you have to use the command (4), (5) and (6)

To get the AzurePublishSetting on your local so that you could deploy/publish your changes to Cloud, you need to use command (4)


This will popup a download window, you have to download the file and need to keep in your local folder

After getting the file run the command (5) to import these settings

Import-AzurePublishSettings [File path]

Now this will allow you to publish you code to cloud server.

Finally to Publish your code you have to use the command (6) and this will deploy your code to cloud service

Publish-AzureServiceProject –ServiceName –Location -Launch

To learn more about Windows Azure and Windows Azure for Node.js you can use following links

Windows Azure Development Guide for Node.js

Windows Azure Node.js Cloud Service

Git Commands

We are using various version controls and GIT is one of the good version control system. Now it is our day to day work to use git and there are a lot of commands of git which we need daily. I thought it would be better to document these here

1. Get the Repo from Git Remote to your local for the first time use
$ git clone https://type- yout-git-remote-repo-path
in case you want to clone a specific BRANCH then use
$ git clone https://type- yout-git-remote-repo-path -b

2. Now if you have made some changes and you want to check what are the files which are changed for the purpose you can use “STATUS”
$ git status

3. Once you have done some changes to the repo code and you want to push these changes to Remote repo then you have to do two steps “Commit” and “Push”
-If you want to commit all the changed files the use this command
$ git commit -m "Enter your comment here "
-If you want to push specific files or folder the use
$ git commit -m "Enter your comment here " folder-name/ folder-name/filename filename

After commit now push your code using
$ git push
if you want to PUSH specific branch use
$ git push origin branch-name

4. Ideally before committing your changes you should first “Pull” the repo code to make sure that you do not try to overwrite other persons code. Because if someone else has committed code before your commit there is possibility of conflicts. For that use “PULL”
$ git pull
if you want to pull specific branch use
$ git pull origin branch-name

5. If you want to switch between the Repo branches then use “CHECKOUT” command
$ git checkout origin branch-name

6. If you want to delete a FOLDER or FILE from your REMOTE repo, permanently then use following command
$ git filter-branch --index-filter "git rm -rf --cached --ignore-unmatch FOLDER-NAME " HEAD
Once process is complete run push command
$ git push origin master

RVM commands

Useful RVM commands:

1. To set the defult ruby environment using RVM you can use the following comamnd

rvm use 1.9.3 --default # this will set the ruby1.9.2 as default ruby environment

rvm use jruby-1.4.0 --default # this will set the jruby as defult ruby environment

2. If you do not have ruby install on you machine, you can install using following command:

rvm  install ruby-1.8.7-p352 # to install 1.8.7 ruby

rvm  install ruby-1.9.2-head  # to install 1.9.2 ruby

rvm  install jruby-1.6.4  # to install jruby 1.4.2

3. If you want to see all the installed versions in the RVM the use

rvm list

4. How to create a gemset

rvm gemset create< GEMSETNAME>

5. If you want to see list of gemsets

rvm gemset list

6. If you are using gemsets for your projects then you need to make sure that, when you start using project it also set the RVM to use that gemset. There are two ways to do it – either you set the Manually by using commands as mentioned above or create a .rvmrc file in your project which will switch to that Gemset automatically
To create the .rvmrc file go to your project directory and type command:
This will start using the gemset

echo "rvm use 1.9.3@mygemset" >> .rvmrc
If you want to create and use the gemset then use this command:

echo "rvm --create use 1.9.3@mygemset" >> .rvmrc