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…

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.

e.g.

  • 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.

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

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