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
—————————————————————————–
CSS CODE
—————————————————————————–
@font-face
{
font-family: “Fontname”;
src: url(‘fonts/FontFilename.eot’);
font-weight: normal;
font-style: normal;
}

@font-face
{
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…

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.

e.g.
“[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:

e.g.
“[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

New-AzureService

“This will create a Azure Service on you local”

Add-AzureNodeWebRole

“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)

Stop-AzureService

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

Remove-AzureService

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)

Get-AzurePublishSettings

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
OR
If you want to create and use the gemset then use this command:

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

Use of scp command on AWS (Amazon) EC2

While I was working on my new project I had a situation where we need to copy our files from Amazon AWS  to Rackspace server.

On Amazon server as per the app architecture we are  having multiple elastic private servers and we wanted to copy data from private server to the AWS public server and then to Rackspace. As I am not expert of Unix so it look some time for me to figure out how to do it.

I was aware that I have to use SCP or Rsync etc command  but things were not working, because I was not having the root access to Amazon. Finally after googling and trying various commands / options I got it working. Here are my notes on that

---

scp -i <key-pair-file-path> <remote-source user@ip>:<directory>  <destination-local-path>

In SCP

-i indicates the identity_file

<remote-source user@ip>:<directory> – Source from where we would like to copy the file/folder

<destination-local-path> – Destination location where we would like to copy it, it can be a local/remote location

---

1. To access Amazon command prompt as ROOT , login first with your identity key-pair and then type  $sudo su this will show the root prompt directly

2. Now to access AWS public/private servers we need to use the identity key-pair file so we need to use the “scp -i ” option as “-i” indicates the identity file path

3. If you want to copy data from AWS public server to Rackspace or any other public server you need to use AWS “root” account, as mentioned above that is easy just type “sudo su” and from there you can  transfer files/folders between AWS to any other remote server

Steps to get started with Mercurial Version Control

Steps to get started with Mercurial version control 

1. To setup Mercurial on the Ubuntu you can check my post INSTALL MERCURIAL ON UBUNTU 10.04

2. Once installation is complete try running “hg” command on the terminal it should give you list of all the commands of the mercurial
  $> hg    #This will return all the commands available for the mercurial

3. Other useful commands of the Mercurial are :

$> hg help “command” e.g. if you want to check what version command will do the type $> hg help version

           - This will list the brief details about the commands of hg that we have specified.

$> hg init

- create a new repository in the given directory
- Initialize a new repository in the given directory. If the given directory does not exist, it is created.
- If no directory is given, the current directory is used

$> hg clone

- This command makes the copy of the existing repository, and repository can be copied over the network.

$> hg log
- This command give history of all the changes done.

$> hg status

- This will tell us what is status of the file whether it is newly added or a modified file.

$> hg incoming

- This command will tell us what changes the hg pull command would pull into the repository

$> hg pull

- This will pull the latest code to the .hg respository on the local machine, but it will not impact/change the working directory to get these changes in the working directory we need to use the “hg update” then we will be able to get the latest changes in the working directory.

$> hg update

- This will now update the files in the working directory

How to make Rabbitvcs and TortoiseHg work together on Ubuntu Lucid?

I have been struggling from few days to make Rabbitvcs and tortoiseHg work together on my ubuntu lucid machine.

I have followed various instructions mentioned onmany blogs, but nothing worked. Some instructions broke the tortoiseHg and some broke the Rabbitvcs. Finally I came across one of the issue which was opened on the  Tortoisehg bitbucket reporistory  and by the time I finished reading that entire discussion,  I got the solution.

As per that discussion we need to add one line code. I think in the future release of the tortoiseHg we even might need not to add this line manually as Aleksandr Dobkin is trying to checking in his code to tortoiseHg repository. But until it is done I think we can do the manual fix.

1. Open the  file nautilus-thg.py and it is located at usr/lib/nautilus/python/extension-2/

Add below mention code at the bottom of the file

demandimport.disable()

Once I did this step and restarted my Ubuntu, I could happily use TortoiseHg and RabbitVCS side by side on my ubuntu.

Version Control GUI Tool for GIT

I am using  Git and Mercurial version control systems. For the mercurial there is a nice tool by tortoise which is tortoisehg, whereas for Git there is no tool which is popular and give a good file browser based GUI tool. Recently when I was searching for a better tortoise like tool for the Git. I came across Rabbitvcs and it is really a good tool for git and they also support subversion and Hg.

As it provides icons in your file browser which helps you identify changed files. Also it has a nice Difference Viewer “Meld Diff Viewer” which gives you a nice merge utility. To install RabbitVCS on your Ubuntu Lucid you need to follow below mentioned commands.

Install RabbitVCS on ubuntu-10.04 (Lucid)

• sudo add-apt-repository ppa:rabbitvcs/ppa
• sudo apt-get update
• sudo apt-get install rabbitvcs-nautilus

  #For File browser and difference viewer “Meld diff viewer”

• sudo apt-get install rabbitvcs-thunar

   #For the GEdit extension

• sudo apt-get install rabbitvcs-gedit

   #For the command line launchers

• sudo apt-get install rabbitvcs-cli 

At the end just run

• sudo apt-get update

To remove/uninstall the RabbitVCS you can use:

• dpkg --purge rabbitvcs

if you want to remove the ppa entries related to Rabbitvcs then use the following :

1. Run sudo gedit /etc/apt/sources.list

        This will open the source.list file and remove the entry of the “Rabbitvcs” manually and save the file and close it

       2.Run sudo gedit /etc/apt/sources.list.d

       This will open the directory structure where you will see a “sources.list.d” directory and that will have the files for “rabbitvcs”.

      You need to manually  delete those files.

Related links

• 
  http://rabbitvcs.org/
  
• http://wiki.rabbitvcs.org/wiki/install/ubuntu

Install Mercurial on Ubuntu 10.04

To install the Mercurial latest version on ubuntu 10.04 use the following commands:

These four commands will help you to get install the latest version of the Mercurial (i.e. 2.0)

• sudo add-apt-repository ppa:mercurial-ppa/releases
• sudo apt-get update
• sudo apt-get install mercurial

To remove the mercurial from your ubuntu 10.04 machine then you can use this command:

• sudo apt-get remove mercurial-common --purge

OR we can use

• sudo apt-get remove mercurial --purge
• sudo apt-get autoremove # will delete the now unused mercurial-common

GUI tool for Mercurial – tortoiseHg

    Steps to install tortoiseHg for Mercurial

• sudo apt-add-repository ppa:tortoisehg-ppa/releases
• sudo apt-get update
• sudo apt-get install tortoisehg
• thg

Related Links:

http://mercurial.selenic.com/wiki/Mercurial

http://mercurial.selenic.com/wiki/BeginnersGuides

http://stevelosh.com/blog/2010/08/a-git-users-guide-to-mercurial-queues/

Jruby on Ubuntu 10.04

Installation of Jruby on ubuntu

1. First of all get the installer  for the Jruby from the jruby site
http://jruby.org/download
. As we wanted to use the latest version 1.6.2 so we downloaded that version and as we want to do this installation on Ubuntu so we  downloaded  .tar.gz  file (JRuby 1.6.2 Binary .tar.gz (md5, sha1)

2. After downloading  we need to install it by copying it to a location where it is easily accessible.We have extracted file (jruby-1.6.2) kept it  at HOME directory

3. Now to make it available, we need to add the path to the environment variable, for that we need to open the  .bashrc file.

4. To open the .bashrc file you can use the command on the terminal as ($  gedit ~/.bashrc)

5. It will open the file in editor then add the below mentioned code as per your directory path.You have to add two line of code which will define the  path of the jruby and other will add that to Environment variable $PATH

export JRUBY_HOME=/home/jruby-1.6.2

export PATH=$JRUBY_HOME/bin:$PATH

6. Once it is done then try the command on terminal  to ensure that Jruby is installed

$Jruby  -v

If any issues then try using RVM

1.  We have faced a lot of issues to run the application on the Ubuntu and finally, we need to install the RVM to make it work, so here are the steps which we have followed.

2.  First of all install the git and curl so that we can use the commands to install the rvm

COMMANDS —

sudo apt-get update  # this will do the housekeeping work for you

sudo apt-get install build-essential git-core curl  # this will install the curl & sgit

3.  Now to get the rvm installed run command

bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)

Or

use system wide installer

# bash < <( curl -L http://bit.ly/rvm-install-system-wide )

Once this command is completed then open the .bashrc file to make some changes related to RVM

export rvm_path=/usr/local/rvm

[[ -s "$rvm_path/scripts/rvm" ]] && source “$rvm_path/scripts/rvm”