Nitin Manju's Blog.

Configure Visual Studio 2015 to use the manual installations of external web tools like Node, Grunt, Git , Bower, npm

Visual Studio 2015 ships with multiple open source command line tools that are used in modern web development like Git, Node, npm, bower, grunt.

But we also tend to install them manually in our development machines which are usually in their latest versions.

It is likely that when you run the Grunt file using the inbuilt task runner, visual studio will end up running the task using the Grunt installed as a part of its installation likely to be found in the path

" C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External "

[this is for reference only and might change from machine to machine (i am on Windows 10) and on your installation as a whole but the path is a good starting point].

Now if you want visual studio to use the web tools installed by you manually, you can do so!

Go to Tools –> Options –> Projects and Solutions –> External Web Tools.

Take a note at the above screen shot, the paths will be searched in that order.

Notice that how $(PATH) is below the $(DevEnvDir)\Extensions\Microsoft\Web Tools\External

As mentioned before to use the manually installed web tools , you need to tell VS to check for tools available in the environment path variable and use the required tool if available.

To reorder the paths use the arrow buttons on the Top Right of the dialog window and move the $(PATH) above the $(DevEnvDir)\Extensions\Microsoft\Web Tools\External.

You can find more information at https://blogs.msdn.microsoft.com/webdev/2015/03/19/customize-external-web-tools-in-visual-studio-2015/

Configure Visual Studio 2015 to use the manual installations of external web tools like Node, Grunt, Git , Bower, npm

Take a note at the above screen shot, the paths will be searched in that order.

Token Based Authentication : What and Why?

HTTP protocol is stateless. meaning, if we have to authenticate a user we send out the username and password to the server and the server authenticates us , the next time when we send out a new request to the server the server doesn't really remember us anymore (from the last request) and we may need to have to authenticate the user again to process the request and so on.

We have been using the Server based authentication for a long time now and frankly with the era of cloud computing and scalability , its ..umm .. Outdated? Yeah probably. Basically with the server based authentication we need to save some user authentication information on the .. well you guess it , Server! This is a problem. mostly because of scalability. Today we have cloud platforms that can be scaled dynamically according to the demand and if we are going to save the authentication information on the server (session mostly) then we are restricting the user to that particular server machine which was used to login increasing the server machine load and traffic.

Token based authentication to the rescue!
Token based authentication is stateless. With token based authentication, we don't save any session information and with that out of the system the server can scale! we save the authentication information as a token on the client.

How does it work
You(user) send the server(api) the authentication information, basically the username and password.
The server(api) will approve you(user)
The server(api) returns a token
You save this token somewhere on the client for further use.
Here is the important deal -> you send this saved token every time you make a new request to the server (api).

Every single further request will require you to send this token. You can also set an expiry for this token and when it expires you (user) have to login again.

You can further read about this from this amazing article here

That's all folks!

Brace yourself.. C# 6.0 is coming!! or has it already arrived?

Annnd .. you'll love it.

Version 6.0 has been out since April via the new .NET compiler, Roslyn and will soon ship with Visual Studio 14 but To help you find its awesomeness here are a few highlights.

Null Propergation operator

Probably this was the feature you were waiting for all along The Null propergation operator ( ?. ). lets assume you have an object (Employee) which holds a property which is another class object (Department) which in turn holds a string property (Name) and your objective is to assign a value to this string property imagine how ugly this code looks

Before :

if(Employee != null && Employee.Department != null)
{
Employee.Department.Name = "Software Development";
}

This looks ugly. so many conditional checks to make sure we do not face the null object exception.

With C# 6.0 you do it in this awesome way.

Now:

Employee?.Department?.Name = "Software Development";

No "if" conditions for null checks anymore and you can assign the value , All you have to do is use the Null Propergation operator (?.) on the object to find out if its not null and assign the value.

How cool is that ?! This is not limited to properties only, this works even on methods.

Now:

string departmentName = Employee?.Department?.GetName();

Thinking of disposing an object..?

Now:

Employee?.Dispose();

Employee object wont be disposed if its null and if its not null, gone into the garbage can!

Auto Property Initializer and Primary Constructors

Remember we could assign(initialize) a value to a variable as and when we declare it but we could not do the same for the property declaration? well that is a thing of the past now and would it not be nice if you could declare the default constructor in a simpler way? well there is a way now for that as well.

Before:

public class Employee
{
public string Name{ get; set;}
public string Department{ get; set;}

public Employee(string name , string department)
{
Name = name;
Department = department;
}
}

Now:

//Primary constructor need not be declared again
//Provide the parameter list in the class declaration.

public class Employee (string name , string department)
{
//Properties declared and assigned at the same time.
public string Name{ get; set;} = name;
public string Department{ get; set;} = department;
}

Please note: C# is making us LAZY!!

Exception Filtering now made easy

Imagine you have no clue what type of exception you are going to come across and you will write a generic catch block. But however you have to run some specific statements based on the error code?

well you would do it the following way

Before:

try
{
//Try to do something and BAM!! an exception
}
catch (Exception ex)
{
if (ex.ErrorCode == 12345)
// do something

throw;
}

well now if can filter this as below.

Now:

try
{
//Try to do something and BAM!! an exception
}
catch (Exception ex) if (ex.ErrorCode == 12345)
{
// do something
}

looks cleaner doesnt it?

Declaring the variables inline

Now we can declare variables inline and can still be used outside. how? refer below.

Before:

int emp_no ; // emp_no declared outside

if (!Int32.TryParse("100", out emp_no ))
{
// do something with emp_no
}

Now:

if (!Int32.TryParse("100", out int emp_no )) // emp_no declare inline
{
// do something with emp_no
// the scope for emp_no exists here.
}

All this and more in the C# v 6.0 .
Do note that with the Roslyn compiler you can still get all the above and more benefits in your existing projects.

There is a lot more .. please visit http://msdn.microsoft.com/en-us/magazine/dn683793.aspx

For the FAQs on Roslyn please follow http://blogs.msdn.com/b/csharpfaq/archive/2014/04/03/taking-a-tour-of-roslyn.aspx

Resetting the MySQL server password on Ubuntu

To Reset the MySQL server password running on Ubuntu follow the below steps.

Check the version of your mysql-server. To do this open terminal and type the below command

apt-cache policy mysql-server

Some lines of information is displayed look for the line that says about the installed version

For example in my system the version installed is [ 5.5.38-0ubuntu0.14.04.1 0 ] (From this I know that I have mysql-server-5.5 installed in my system.)

Start the reconfiguration with:

sudo dpkg-reconfigure mysql-server-*.*

where mysql-server-*.* should be replaced by the version that you have. (for me it'd be mysql-server-5.5).

This will stop the database daemon.

A prompt will then appear where you'd have to enter your new password and confirm the reconfiguration.

The daemon will be automatically started after the reconfig completes.

You can then log in with:

mysql -u root -p

The server will prompt you for the password after entering it start your database admin tasks.

Setting up AndEngine

Today we will work out on how to setup AndEngine for development in Eclipse.

AndEngine is a very powerful 2D OpenGL Game engine developed by Nicolas Gramlich. You can visit the website at http://www.andengine.org/ for more information.

To start , first download the project code from https://github.com/nicolasgramlich/AndEngine . As shown below. Download the .ZIP file and extract it in a location on your computer.

Now open Eclipse and Add a new project. Name it AndEngineSample as shown below. Proceed as usual with any other Android project you create.

Next we have to import the AndEngine project in our current workspace.

Click on file and select Import as shown below.

Expand the Android Node and click on "Existing Android Code Into Workspace" and click on Next button as shown below.

Click on Browse and browse to the location where you have extracted the .Zip file. and select the folder. Eclipse will automatically detect all the projects in that folder and add it into the list. select the project and click on finish button.

As you can see the AndEngine project is now imported into our workspace. Now we need to add a reference to this project in our sample project.

Right click on the sample project and click on Properties

Select Android tab as shown below and click on Add button

The available libraries will be loaded and select the AndEngine project and click on OK button

The below screen will be displayed , Click on Apply and then OK button.

Done!! You are all setup for AndEngine Development.

Animated Sprites with AndEngine

AndEngine is a very powerful 2D OpenGL game engine [http://www.andengine.org/] . today we will work on a small project to create moving sprites. We will create an animated cat running towards... something :)

First we will need a sprite sheet for the cat. I have chosen the below sheet (found it on google , credit goes to who ever created it , Save it by clicking on it and then right click and Save).

Save the above image by clicking on it and then right click and save (as .png)

Now create a new android project and add a reference to the AndEngine project. If you do not know how to add a reference to this follow my tutorial on how to setup AndEngine before proceeding.

Now add the above image resource into your Assets folder as shown below.

Now open the main activity (MainActivity.java by default) as below. The namespace will depend on your individual project, in my case its com.codephixlabs.movingsprites

Extend this activity with SimpleBaseGameActivity and include the following namespaces as below

Java / Android
import org.andengine.engine.camera.Camera;
import org.andengine.engine.options.EngineOptions;
import org.andengine.engine.options.ScreenOrientation;
import org.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.scene.background.Background;
import org.andengine.entity.sprite.AnimatedSprite;
import org.andengine.opengl.texture.TextureOptions;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextureRegionFactory;
import org.andengine.opengl.texture.region.TiledTextureRegion;
import org.andengine.ui.activity.SimpleBaseGameActivity;
import org.andengine.util.color.Color;

public class MainActivity extends SimpleBaseGameActivity
{

}

Add the following methods and variables in your activity

Java / Android
private BitmapTextureAtlas texCat;
private TiledTextureRegion regCat;
private AnimatedSprite sprCat;
private Scene m_Scene;
private Camera m_Camera;

//This represents the sprite sheet(image) rows and columns
//We have 4 Rows and 2 Columns
private static int SPR_COLUMN = 2;
private static int SPR_ROWS = 4;

//Set the camera Width and Height
private static final int CAMERA_WIDTH = 480;
private static final int CAMERA_HEIGHT = 320;

//Override the below method from base activity class

@Override
public EngineOptions onCreateEngineOptions()
{
m_Camera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
EngineOptions en = new EngineOptions(true, ScreenOrientation.LANDSCAPE_FIXED, new RatioResolutionPolicy(
CAMERA_WIDTH, CAMERA_HEIGHT), m_Camera);
return en;
}

//Override the below method from base activity class

@Override
protected void onCreateResources()
{
texCat = new BitmapTextureAtlas(this.getTextureManager(), 1024, 1024, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
regCat = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(texCat, this.getAssets(),"gfx/runningcat.png", 0, 0, SPR_COLUMN, SPR_ROWS);
texCat.load();
}

//Override the below method from base activity class

@Override
protected Scene onCreateScene()
{
m_Scene = new Scene();
m_Scene.setBackground(new Background(Color.WHITE));

sprCat = new AnimatedSprite(0, 0, regCat, this.getVertexBufferObjectManager());
m_Scene.attachChild(sprCat);

sprCat.animate(100);
return m_Scene;
}

//Override the below method from base activity class

@Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

Now you are done! ... Run the project and you will get an animated cat running , Refer below screenshots of the emulator

The complete code is below. you can copy paste it and replace the namespace and the activity class name.

Java / Android
package com.codephixlabs.movingsprites;

import org.andengine.engine.camera.Camera;
import org.andengine.engine.options.EngineOptions;
import org.andengine.engine.options.ScreenOrientation;
import org.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.scene.background.Background;
import org.andengine.entity.sprite.AnimatedSprite;
import org.andengine.opengl.texture.TextureOptions;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextureRegionFactory;
import org.andengine.opengl.texture.region.TiledTextureRegion;
import org.andengine.ui.activity.SimpleBaseGameActivity;
import org.andengine.util.color.Color;
import android.view.Menu;

public class MainActivity extends SimpleBaseGameActivity
{

private BitmapTextureAtlas texCat;
private TiledTextureRegion regCat;
private AnimatedSprite sprCat;
private Scene m_Scene;
private Camera m_Camera;
private static int SPR_COLUMN = 2;
private static int SPR_ROWS = 4;

private static final int CAMERA_WIDTH = 480;
private static final int CAMERA_HEIGHT = 320;

@Override
public EngineOptions onCreateEngineOptions()
{
m_Camera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
EngineOptions en = new EngineOptions(true, ScreenOrientation.LANDSCAPE_FIXED, new RatioResolutionPolicy(
CAMERA_WIDTH, CAMERA_HEIGHT), m_Camera);
return en;
}

@Override
protected void onCreateResources()
{
texCat = new BitmapTextureAtlas(this.getTextureManager(), 1024, 1024, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
regCat = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(texCat, this.getAssets(),"gfx/runningcat.png", 0, 0, SPR_COLUMN, SPR_ROWS);
texCat.load();
}

@Override
protected Scene onCreateScene()
{
m_Scene = new Scene();
m_Scene.setBackground(new Background(Color.WHITE));

sprCat = new AnimatedSprite(0, 0, regCat, this.getVertexBufferObjectManager());
m_Scene.attachChild(sprCat);

sprCat.animate(100);
return m_Scene;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}

Thanks for reading, If you face any issue please add it in the comment section.

Make Ubuntu look like Windows 7 .... Only the Look!

Recently I started using Ubuntu, Trust me this is a great OS .. and its free. But I have a problem. I have grown up using windows and today I basically earn my bread and butter developing windows apps using .NET
though Ubuntu looks great , clean and comfy. I do not really feel at home , naturally I started looking for ways of customizing the default shell (Unity , I am currently using the Ubuntu 12.04 LTS and yes , Ubuntu is totally customizable) and I stumbled upon this article on www.PCWorld.com and decided to try it out.

This is what my current desktop looks like.

How to do this (at your own risk ) ...

I will provide you with the content in the web link I have come across.

First you need to run a few commands on the terminal (and It feels like rocket science to see all those awesome series of lines displayed after you hit the ENTER key)

Open the terminal and type the below command(just copy and paste in the terminal window). The sudo command will ask you for the admin password. just like run as admin in Windows.

Ubuntu Terminal

sudo add-apt-repository ppa:upubuntu-com/gtk3
sudo apt-get update

sudo apt-get install win2-7

The theme will get installed now. But to see the changes we need to apply it.

We need to run a few more commands (more rocket science!! Yes!!)

Ubuntu Terminal

gsettings set org.gnome.desktop.interface gtk-theme 'Win2-7-theme'

gsettings set org.gnome.desktop.wm.preferences theme 'Win2-7-theme'

gsettings set org.gnome.desktop.interface icon-theme 'Win2-7-icons'

As soon as you run these commands you will notice that your window gets transformed , but to see its full impact you need to logout and relogin.

you will also want to move the close , minimize and maximize button to the right corner of the window.

Ubuntu Terminal

gsettings set org.gnome.desktop.wm.preferences button-layout 'menu:minimize,maximize,close'

To remove the Mac-style global menu bar and put the menu bar (containing File/Edit/View) back into each individual application window, run this command:

Ubuntu Terminal

sudo apt-get autoremove appmenu-gtk appmenu-gtk3 appmenu-qt indicator-appmenu

You’ll have to log out and log back in for this change to take effect. Use the button at the top-right corner of your screen to log out. and it will look something like this.

The wall paper is something I took off the interweb and this is what it looks like now :)

Want to undo your changes?

Just run these commands. Remember to log out and log back in after running the commands to restore the global menu bar.

Ubuntu Terminal

gsettings reset org.gnome.desktop.interface gtk-theme

gsettings reset org.gnome.desktop.wm.preferences theme

gsettings reset org.gnome.desktop.interface icon-theme

gsettings reset org.gnome.desktop.wm.preferences button-layout

gsettings reset org.gnome.desktop.background picture-uri

sudo apt-get install appmenu-gtk appmenu-gtk3 appmenu-qt indicator-appmenu

There is more..!

There is more you can do and make your system a complete look alike of windows 7 follow the link below for the complete article.

http://www.pcworld.com/article/2028896/how-to-make-ubuntu-linux-look-like-windows-7.html

Thanks :)

Thanks to Chris Hoffman @chrisbhoffman and PCWorld for providing such a nice article.

Source link pasted as above.

Creating your own markup extensions in WPF XAML

If you do not know what markup extensions are in WPF and XAML then you have to first go through this MSDN link to understand what they are, here in this post i will be explaining how to create and implement your own Markup extensions.

To define a markup extension you have to first derive your class from the System.Windows.Markup.MarkupExtension abstract base class. This abstract class has a abstract method defined inside it abstract object ProvideValue(IServiceProvider serviceProvider) implement this this abstract class in your derived class as shown below.

public class CultureKeyResolver :System.Windows.Markup.MarkupExtension
{
public override object ProvideValue(IServiceProvider serviceProvider)
{
throw new NotImplementedException();
}
}

Now if you see that we get a method with the name public override object ProvideValue(IServiceProvider serviceProvider) , Now this is the method that is always called when the markup extensions are called for in XAML. This method should always return a VALUE which is depending on the context.

Now let me tell you the context of this markup extension, here we will return a string VALUE based on a KEY passed , the resolution will happen using a method within this class.

Lets add a dictionary to this class that will hold the KEY VALUE pairs.

//This method will be called when the extension is called.
public override object ProvideValue(IServiceProvider serviceProvider)
{
throw new NotImplementedException();
}
}

This dictionary will hold the KEY VALUE pair, and the the key will be matched with the KEY that is passed to this markup extension and the VALUE if exists will be returned or a default VALUE will be returned.

Lets add two constructors to this class , one will be a default constructor and the other will be take a string parameter which is the KEY , Also lets add a static constructor that will add entries to the dictionary.

public class CultureKeyResolver :System.Windows.Markup.MarkupExtension
{
  //The dictionary holds the key value pair of culture keys
  static Dictionary<string, string> _lookTable = new Dictionary<string, string>();

  //Static constructor initializes the dictionary
  static CultureKeyResolver()
{
_lookTable.Add("en-us", "Click Me");
_lookTable.Add("Albanian", "Kliko Mua");
_lookTable.Add("Dutch", "Klik op mij");
}

  //Local field and property
  private string cultureKey = string.Empty;
  public string CultureKey
{
get { return cultureKey; }
set { cultureKey = value; }
}

  //Default constructor
  public CultureKeyResolver()
{
}

  //This is a constructor with a parameter as the input key
  public CultureKeyResolver(string key)
{
cultureKey = key;
}

  //This method will be called when the extension is called.
public override object ProvideValue(IServiceProvider serviceProvider)
{
return this.GetValue(cultureKey);
}
}

Now we will add a method to this class that will resolve this KEY for a VALUE, if that KEYexists in the dictionary the corresponding VALUE will be returned else a default VALUE will be returned
the method will look something like this.

public string GetValue(string culture)
{
//Make a check for the key
if (_lookTable.ContainsKey(culture))
{
//If exists then return the value
return _lookTable[culture];
}
//Return default value
return _lookTable["en-us"];
}

Go Ahead and add this method into the class, Your class will look something like this now

public class CultureKeyResolver :System.Windows.Markup.MarkupExtension
{
//The dictionary holds the key value pair of culture keys
static Dictionary<string, string> _lookTable = new Dictionary<string, string>();

//Static constructor initializes the dictionary
static CultureKeyResolver()
{
_lookTable.Add("en-us", "Click Me");
_lookTable.Add("Albanian", "Kliko Mua");
_lookTable.Add("Dutch", "Klik op mij");
}

//Local field and property
private string cultureKey = string.Empty;
public string CultureKey
{
get { return cultureKey; }
set { cultureKey = value; }
}

//Default constructor
public CultureKeyResolver()
{
}

//This is a constructor with a parameter as the input key
public CultureKeyResolver(string key)
{
cultureKey = key;
}

public string GetValue(string culture)
{
//Make a check for the key
if (_lookTable.ContainsKey(culture))
{
//If exists then return the value
return _lookTable[culture];
}
//Return default value
return _lookTable["en-us"];
}

  //This method will be called when the extension is called.
  public override object ProvideValue(IServiceProvider serviceProvider)
{
return this.GetValue(cultureKey);
}
}

Your Markup extension class is ready now, lets call this in our XAML code.

XAML

Now in the above XAML code we see that we have made a reference to our Application namespace and given the alias as MyApp this is also used to call our markup extension as
Content="{MyApp:CultureKeyResolver Dutch}" Here if we look the KEY is passed as a value to the constructor , anything that follows the class name separated by space will be passed as a input to the constructor. For example if the constructor takes two or more parameters then your syntax should look something like this Content="{MyApp:CultureKeyResolver Dutch en-us}" here Dutch and en-us will be the two parameter values any value separated by space will be considered.

If you are wondering how it works? Internally this is how it is going to call your markup extension.

if(CultureKeyResolver is MarkupExtension)
{
MarkupExtension _extension=new CultureKeyResolver();
object value= _extension.ProvideValue(argument);
currentControl.Property=value
}

The KEY can also be passed as a Property value to the Markup Extension. You can pass it the following way

XAML

With that , you can see that now we have a property name coming up in yor XAML IDE , this is assigned a value.

This is how you implement your own markup extension in WPF XAML.

Pages