Facebook Open Graph meta tags or Facebook graph objects

What are Facebook Open Graph Meta Tags?

Facebook's open graph protocol allows web developers to showcase the preview of their page when it is shared on facebook. The web developers set the information in the web page which is used by facebook to display that page with a preview in the facebook news feed. This information is set via some some custom META tags.
Let's take a look at different META tags facebook uses to allow you to set the information displayed when some one shares the url of your website.

The basic syntax for all the facebook META tags is that every tag is prefixed with og: and then the property name, second attribute inside the facebook META tag is content where the value of property is mentioned.

Facebook Meta Tags

1. The Image tag
The image tag tells facebook to use the specified image when page is shared in news feed of facebook

<meta property="og:image" content="https://avatars.githubusercontent.com/u/4556455?v=3"/>

2. The Title tag
This is the title which is corresponding to the URL of the page

<meta property="og:title" content="Title to be displayed on facebook"/>

3. The URL tag
It represents the URL of the corresponding page

<meta property="og:url" content="url of the page"/>

4. The site_name tag
It represents the name of the website

<meta property="og:site_name" content="Impetus"/>

5. The type tag
It represents the category of the website and allows facebook to categorize the link based on this type tag

<meta property="og:type" content="blog"/>

More can be explored but the syntax is same the type of tag prefixed with og: and the content inside the content attribute of these META tags.

Bower Fundamentals Part 2

Creating bower.json file

bower.json file maintains the record of all the dependencies you have installed in your project.
To create bower.json file, type following command on to your terminal

bower init

It will ask your few simple questions and after that, a bower.json file will be created in your project.

Installing from bower.json file

If you have bower.json file and it has all the dependencies mentioned in it then you can install all those dependencies into your project by executing below command

bower install

Changing default location of Bower installation directory

By default bower installs all the dependencies in bower_components directory. But let say you want to install these dependencies in a folder 'public/lib'.
You can do it by create a file .bowerrc in the root of your folder and inside this file give the following configuration

{
    "directory": "public/lib"
}

Using --save and --save-dev flags

If you want to install a package in your project and you want your bower.json file to get updated with this installation then use --save flag.
Some dependencies are meant for development purpose like testing dependencies and they do not have anything to do with the production code. So it is better not include such dependencies and keep them as dev dependencies. To install a package as dev dependency we should use --save-dev flag. For example,

bower install lodash --save-dev

Now when you want to deploy your code into production then you can ignore these dependencies and install only those packages which are needed in production. this can be done through

bower install --production

It will not install dev-dependencies.

Bower Cache

Bower maintains a cache, if the requested package is in cache then it will not make network connection to fetch it, it would rather install it from the cache,
To list down the packages available in cache, execute the following command

bower cache list

To clean the cache

bower cache clean

To explicitly install from cache only, use -o flag

bower install angular -o

For further more instructions, try out

bower help

Bower Fundamentals Part 1

What is Bower?

Bower is a tool which fetches the client side libraries for your web application. Bower takes care of finding and downloading the library or package for you and then add it into your project. It manages all these dependencies in a file called bower.json.

Installing Bower

To install Bower you need to have node.js installed in your system. Once you find that node.js is installed then you can run the below command on terminal

npm install -g bower 

-g flag is to make it global

** Do not run npm with sudo because there might be some dependencies which needs permission to write but are not able to do so, so if you are not able to run npm without sudo then run the following before installing bower

sudo chown username /usr/local
npm cache clean

here username is the name of the user

Installing packages using Bower

Suppose you want to install angularJS in your project then you can install it by executing following command. First create a bower.json file by init command

bower init

It will ask you few basic questions and after that it will create a bower.json file. Now you can install angularJS via below command

bower install angular --save

If you are using --save flag then it will save it into your project and update the bower.json file. If you are running it without --save flag then it will not modify the bower.json file. Now if you run

bower prune

then it will remove all the dependencies which are not there in bower.json file

Installing Specific version of package

to install a specific version of a particular package you can use a # symbol and specify the version afterwards, as shown below

bower install angular#1.3

Uninstalling Packages

Packages can be uninstalled by using this simple command

bower uninstall angular

and done, it will remove the entry from bower.json file also.

Getting info about a package and its version history

To install a particular version of a package you need to know the version history about that package, and you can do it by executing this command to get the history of that package

bower info angular

Listing installed packages

To list down all the packages installed in your web app, you can run the below command

bower list

Searching a package with Bower

To search a specific package with the name, but you are not sure about the complete name of that package. Then you can run the following command to get the list of all the packages containing that name along with their github URLs.

bower search angular

This will return a list of all the packages containing the word angular along with their github URLs
...to be continued

HTML Web Server: Working and Implementation

In order to understand the working of an HTML web server, first we need to understand how the browser interacts with the server, what information browser sends to the server and how server uses that information to send response to the client(browser).
Here is a small code in JAVA which will show us the header information sent by the browser to the server.  //server.java

import java.net.*;
import java.io.*;
class server{
 public static void main(String[] args) throws Exception{
  ServerSocket server = new ServerSocket( 3000);
  Socket s = server.accept();
  InputStream in = s.getInputStream();
  BufferedReader reader = new BufferedReader(new InputStreamReader(in));
  String data = reader.readLine();
  while(!data.isEmpty()){
   System.out.println(data);
   data = reader.readLine();
  }
  s.close();
  server.close();
 }
}

Now when we'll run this program by typing 'java server' on terminal, it will wait for client to send request. Now we'll send the request from our web browser by typing 'localhost:3000' in the address bar. Then the header information sent by the browser will be displayed on terminal. Here is the output.

The first line says method of request is GET and protocol used is HTTP version 1.1, second line tells the IP address and port number of the host and similarly other information about the browser.

Now let's request a page from browser 'localhost:3000/p1.html' and again check the output on terminal.

Now we can see the name of requested page p1.html is coming in between the GET / and HTTP, so we can extract the name of page from this string and check if this page is present in our directory, if it is not present then simply send the information to the browser <h3>Page Not Found</h3> or if it is present then open a FileStream and send the content of file to the browser.

A very basic code shows how we can send the information to the browser after analysing its request.

import java.net.*;
import java.io.*;
class server{
 public static void main(String[] args) throws Exception{
  ServerSocket server = new ServerSocket( 3000);
  Socket s = server.accept();
  InputStream in = s.getInputStream();
  BufferedReader reader = new BufferedReader(new InputStreamReader(in));
  String data = reader.readLine();
  while(!data.isEmpty()){
   System.out.println(data);
   data = reader.readLine();
  }
  OutputStream out = s.getOutputStream();
  PrintWriter writer = new PrintWriter(out, true);
  
  File file = new File("p1.html");
  if(!file.exists()){
   writer.write("<html><h3> Page Not Found</h3></html>");
  }
  else{
   BufferedReader fl = new BufferedReader(new FileReader("p1.html")) ;
   String datatosend = fl.readLine();
   while(datatosend != null){
    writer.write(datatosend);
    writer.flush();
    datatosend = fl.readLine();
   }
  }
  writer.close();
  s.close();
  server.close();
 }
}

The above code can be made more dynamic and also when we have urls containing spaces they are replaced with %20 which is ascii code of space in hexadecimal format(UTF format specifiactions), we have to take care of that also while building such a server.

Finding minimum possible degree of a graph(n,e)

The following code snippet is to find the minimum possible degree of a graph whose number of vertices(n) and edges(e) are given.

The algorithm is such that a vertex can have maximum degree equal to (n-1) but if it is having degree 1 it means there is one more vertex whose degree is one and if its degree is 2 then there are 2 vertices whose degree is 1.

The here is the code for finding minimum degree of a graph

import java.io.*;
import java.util.Arrays;
public class MinDegree {
        //function to find sum of an array
 static int sum(int[] arr){
  int sum = 0;
  for(int a: arr){
   sum += a;
  }
  return sum;
 }
        //function to find minimum of an array
 static int minimum(int[] arr){
  int min = Integer.MAX_VALUE;
  for(int i=0; i<arr.length; i++){
    if(arr[i] < min)
       min = arr[i];
   }
  }
  return min;
 }
 public static void main(String[] ar) throws Exception{
  BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
                //number of edges should not exceed n(n-1)/2
                System.out.println("Enter no of vertices and edges: n e");
  String[] in = br.readLine().split(" ");//input should be like 5 7
  int vertices = Integer.parseInt(in[0]);//parsing string into integers
  int edges = Integer.parseInt(in[1]);
  int[] degree = new int[vertices];//buffer to store degrees 
  int counter = 0;
  int round = 0;
  while(sum(degree) < (2*edges)){//sum of degrees must be less than 2*edges
   if(degree[counter] < (vertices-1)){
    degree[counter] += 1;
    degree[round+counter+1] += 1;//it will increase neighbours degree
    round++;
   }
   else{
    counter++;
    round = 0;
   }
  }
  System.out.println(minimum(degree));
 }
}

Happy Coding :)

Converting OpenCV Mat to BufferedImage of Java

While working with opencv and java i got stuck on how to display an image in java's JFrame, because i can't directly put Mat object of opencv in drawImage function of Java's Graphics class, so i need a hack to convert Mat object into BufferedImage which is as follows.
First think of how can we do it, we have some methods to make a BufferedImage such as

• Directly passing the path of image, which is not the case.

• Passing stream of bytes of image into BufferedImage, which can be useful, lets focus on it.

Suppose image is my Mat object

Mat image = Highgui.imread("/Users/Sumit/Desktop/image.jpg");

and i want to convert it into BufferedImage
So lets take an object of MatOfByte.

MatOfByte bytemat = new MatOfByte();

byte mat is to convert image into stream of bytes.

Highgui.imencode(".jpg", image, bytemat);

this will put the bytes into bytemat object
Now convert byte mat into array of bytes.

byte[] bytes = bytemat.toArray();

Pass these bytes into ByteArrayInputStream to get a stream of bytes.

InputStream in = new ByteArrayInputStream(bytes);

Now pass this stream in read method of ImageIO class.

BufferedImage img = ImageIO.read(in);

Now we have BufferedImage object, we can use it to display it in JFrame's paint method.

This is the complete snippet

Mat image = Highgui.imread("/Users/Sumit/Desktop/image.jpg");

MatOfByte bytemat = new MatOfByte();

Highgui.imencode(".jpg", image, bytemat);

byte[] bytes = bytemat.toArray();

InputStream in = new ByteArrayInputStream(bytes);

BufferedImage img = ImageIO.read(in);

Happy Coding!!! :)

Installing opencv for java on MAC OS X and Configuring Eclipse

Opencv is an open source library for computer vision, Now i am going to show you how to install it on Mac OS X.

Steps:

• Download a fresh copy of opencv-2.4.6.1 from here.
• Extract it to some location in your Mac.
• now open terminal go inside the extracted folder opencv-2.4.6.1.
• Type following commands
• mkdir build
• cd build
• Make sure your JAVA_HOME environment variable is set or explicitly type export JAVA_HOME=<location of java home folder>
• cmake -G "Unix Makefiles" -D CMAKE_CXX_COMPILER=/usr/bin/g++ -D CMAKE_C_COMPILER=/usr/bin/gcc -D WITH_CUDA=ON .. 
• make -j4 // here number 4 means the number of cores in your processor
• make install

Configuring Eclipse with opencv

• Open eclipse
• Click on File-> New Project-> Java Project
• Give an appropriate Project Name
• Now right click on Project and choose Properties.

• Select Java Build Path and then select Libraries.

• Click on Add Library.

• Choose User Library.
• Click on User Libraries, then Select New and give a name to your library.

• Now Select your library and click on Add External JARs, go to your build folder and then open bin folder, there you will find opencv-246.jar, Select this file.
• If you are not able to find .jar then make sure your JAVA_HOME variable is set in the environment variables at the time of build.
• Now Select Native Library Location and click on Edit.

• Insert the path of your cv.so file, mine is in /build/lib.

• Click on Finish, Now your project is configured with openCV library.