@msguy blog

Web Apps: Design & architecture tips

2017-06-17T02:19:00.000-07:00

I previously (my take on solution design) mentioned about sharing a few tips on application design & architecture. Here is a post with a few raw design pointers. Some I learned from my own experience and some by looking at others implementation. I will update this post with more and more tips as and when I find time and will also make an attempt to categorize them under different architectural pillars.

Here we go…

The biggest sources of failure in a system are usually people and not the machines or networks. Have fewer components in the system which involves human intervention.

Automation works well with homogeneous and modular systems. Look for opportunities in your current and the new systems you design.

Whatever is a pain to humans should be automated.

If scaling out is an easy & affordable option, choose it over scaling up. Scaling out does more than scaling. If you need to scale a little, go vertical.

Avoid cascading failures unless you absolutely intend it. If something fails, it should be okay and should be treated as a norm. Not everything should fail to depend on it. Synchronous operations are the usual reason for cascading failures. If your system has more and more async operations then, if something fails, it fails in isolation and does not fail together.

As experts say, treat your servers like cattle and not like pets. If one of them isn’t doing well, kill it and spin another. Don’t be in love with a server. No emotions.

Write probes that Periodically checks security, health & load (CPU/memory/application/databases) and to kill unhealthy/non-adherent (to best practices) machines and spin new ones.

Destruction: Write programs that randomly kill your servers and services. This is to ensure periodically that your system works with failures. Don’t wait for your servers/services to fail naturally with an assumption that your backup servers will be live on a disaster. Better fail it yourself occasionally to see if your recovery mechanism is working intact. Netflix does this.

The overall complexity of a system is not just the sum of complexities of independent components. It will be much more. So, keep things sim...

You can write programs which check your systems for resource wastage and the program can optimize the resources if needed. Not using something but still paying is foolishness.

Stop guessing the capacity. Design your system to scale up/down automatically based on the load. Enable auto-scaling when required. One way people do is to bake the code and keep it in a place (like a storage bucket or a repo). During the process of auto instance creation, the image on boot can pull the code from a bucket and add machines to service.

Regularly backup your data. OK, you know this. Even more importantly, test your backups regularly. Many times backups will be present but don’t get restored when you need. Bad format, bad media or corruption = loss.

Your recovery process should just be a part of regular processes you follow. It should not be treated as a special exercise.

Define and establish a path for support and escalation process to handle things when a system goes wrong.

Server-less architectures remove the need for you to run and maintain servers to carry out traditional compute activities. (An s3 bucket storage can act as a website. You may not need a web-server. Many times, things like this remove the operation burden.)

Excess use of applications/services from a particular vendor is a risk. You get tied up. The number of versions of your application probably would depend on the number of times your cloud provider upgrades his service and forces you to redo. Think twice before you decide to get locked-in. The point is to make an informed decision. You might not want to rely completely on a vendor in order for your whole business/org to function. Cloud adoption is going to grow for sure and not shrink.

Port, firewall, and database misconfigurations are the usual causes for security breaches. Write a scanner and periodically scan for potential problems. Lock down everything and then open what you just need. (Not the other way for sure)

Secure your system at all levels & layers and not just at edges. Use encryption whenever and wherever data is sensitive. Multiple levels of defense are always better than a huge monolith door.
Decide what you keep in-house. Moving everything to the cloud may not be the best way in terms of cost, security or feasibility.

Stress test your systems often. Initially, your system might work very well but over a period of time, many things get added and chances of breaking become more.

Log and audit all the actions (from programming & operations point). Storing data is less expensive today. Traces help a lot.

A take on solution architecture design

2017-04-05T03:59:00.000-07:00

Published a post on medium to discuss a kind of mindset that works in favor of self when doing solution architecture design.

Here it is https://medium.com/@msguy/a-take-on-solution-architecture-design-6a350b4dec39

Windows Azure Mobile Services : Scripting a Scheduler to dump Live Forex data for future analytics

2015-09-05T21:41:00.000-07:00

Before using the scheduler, you just need to know a little about Windows Azure Mobile Services. The below paragraph summarizes the features.

Mobile Services on azure allows you to add structured storage, user authentication and push notifications to your Android, iOS, HTML, Windows Store, or Windows Phone 8 apps. Have a look at the below list of features. You can visit mobile services website if you are a beginner.

What are we going to achieve?

As a proof of concept, let us create a mobile services scheduler job on azure to get the live Forex data from an API and then load the data into a table recursively. (It simply means, every x minutes, our scheduler gets the fresh Forex currency data and stores it in a structured storage). The data we store can be used in a variety of ways later. You can push the data to end user's mobile phones through push notifications or you may want to draw a currency chart on your users mobile phone screens. It is up-to you. Here we go.

Creating a Mobile Service

Click on the "create a new mobile service" link (see above screen) and provide the details of your new mobile service (like in the screen below).

go Next. Specify the database settings like I have done below.

Finish (Click on the check mark above). Wait for a few seconds. Your mobile service will be created and ready to use. You will the below screen.

Adding a table to store data

Click on the Forex-Loader mobile service (The arrow pointing towards right) in the above screen. Mobile Service screen will get displayed. Click on the DATA tab to see the below screen to start creating a table.

Now, Add a table with details below. (Well, you can give your own set of permissions to be safe. I gave 'Everyone' just to make it quick)

Once you click Finish (check mark) in the above screen, table will be created with a index and with no records automatically. See the below screen on how it looks. (Now, don't worry that you did not provide details of fields, datatypes etc. Azure will do the magic!. Fields are created automatically at the time of loading the data. You don't have to define it well in advance).

Creating a Scheduler Job

Let us create a scheduler. Click on the Scheduler tab. You will see the below screen.

Click on the "Create a scheduled Job" link to create a new job. Provide the details as mentioned below and Finish.

While creating a job, you may notice that you can schedule to run the jobs in different time frames in a variety of available combinations. You can select the option 'On demand', if you want to manually run the job.

Now, your Forex job is created. (screen below)

Let us now write some code to do the actual task. Click on the right arrow to open the ForexJob you just created. When the Forex job opens, by default it will take you to Configure tab. Now, you should navigate to the SCRIPT tab. You will see something like the below screen.

Delete the default javascript function you already see (screen above) and add the below code instead. It is a simple script. Scheduler allows you to write your own script for doing the job.

var updatesTable = tables.getTable('ForexLive'); // Table Name to store data
var request = require('request');
var url='http://api.apirates.com/api/update'; // This api gets the fresh forex data

function ForexJob() {   //Notice that the function name is same as the Job Name
       request(url, function ForexDataLoaded (error,response, body) { 
       console.log("------BEGIN------"); //Log it
       var list =JSON.parse(body).ticks; //Read the JSON data and store it as object
       var now = new Date(); //Get current date time                             
                                
                   for (var currency in list) {
                         var data = {
                                    Currency_Name: currency,
                                    Present_Value: list[currency],
                                    Date_Time: now
                                    }; //Prepare the object
                        updatesTable.insert(data); //Insert data to the updatesTable
                        console.log(currency + " ::: " + list[currency]);
                    }
       console.log("------End------");
       });
    
 }

Code is self explanatory. Read the comments. To summarize, we already have an API from APIRates which gets fresh Forex currency data when you call it. The output returned by the API will be in JSON format. (Just try hitting the API URL in browser. You should see the latest Forex ticks. An API call always gets you the currency pair values of that moment changes every now and then.)

Then the code, parses the JSON response and gets the individual currency pair values and loads it into an object and finally pushes the data (of every pair) into the table. (within a loop).

Below screen shows how it looks after you add the above code.

Click on the save button (above screen) to save the Job.

Before running the Job, It is very important to Enable it first. Click on the Enable button in the above screen.

Running the job once

You are almost done with it. Now, if you do not want to wait for few minutes to see the job running, just click on the "RUN ONCE" button to forcefully run/test the job once.

Congratulations. You just ran a new Job. Waiting to see the result?. Just click on the Back button as you see in the screen (below).

You will see the below screen. Now, open the DATA tab

Open the ForexLive table (Click on the Arrow pointing towards the right) and you will realize the Magic that has happened !!

The scheduler has done its job and loaded fresh data to the table. Remember, this will happen every x minutes you selected earlier. Observe the Column Names of the table and the way it got created :). To your surprise, an Auto Ident column got created too!

Use this data and do whatever you want, show it to users at run time, push it to phones, do analytics, come up with fresh charts or what not. Hopefully this post helped you to learn a thing about Windows Azure Mobile Services.

For windows azure mobile services scripting reference, click here

Happy Learning :)

NOTE : Delete the Mobile Service after doing this exercise. You will end up paying HUGE Bills otherwise as it silently runs in the background every now and then costing you.

Windows Azure - Load balancing a website running on different Virtual Machines

2015-02-11T11:02:00.000-08:00

In this post, we shall create two Windows Virtual Machines in Azure, set up the end points for communication, deploy a web application and finally enable the load balancing mechanism to distribute the load.

To start with, we shall first create a virtual machine on azure. If you do not have a Windows Azure account yet, subscribe for a free trial here.

Once you create a trial, just log on to manage.windowsazure.com and create a new Virtual Machine.

Here are the steps to create. Select NEW -> COMPUTE > VIRTUAL MACHINE > QUICK CREATE. Provide a DNS Name, Select OS as Windows Server 2008, provide a windows password and you are good to go. Click the check-mark arrow.

You will see something like this. Wait for some time.

And finally, your VM Should be up and running in a few minutes.

Open the virtual machine you just created by clicking on the name.

Click on the CONNECT button at the bottom. You will be prompted to download the RDP File. Just save it and open it.

Provide the password and you should be able to get inside your brand new virtual machine in no time. Install the IIS in your Virtual Machine (By Adding a New Role, Selecting IIS Web Server to Install).

You are almost done with your First VM. Now, let us create a second VM. But this time, we shall create the second one in a different way.

Here are the steps to create. Select NEW -> COMPUTE > VIRTUAL MACHINE > FROM GALLERY. (Click on it)

A popup will be opened

Select Windows Server 2008 image from the list. click Next. In the next screen, provide a VM name (VM 2 for example), provide a new windows password and click next.

You will see the below screen once you click on the "Next" arrow from the above screen. Here, you have to select the option "Connect to an existing virtual machine" and from the dropdown, select the name of the First VM you just created.

Click next, do not modify anything else and click Complete.

After a few minutes, even this VM will be up and running. Now, in the same way, connect to 2nd VM through RDC and login. Install IIS (like we did for first VM).

So, finally we have two VM's connected and with IIS installed. Close the remote desktop client for now.

The next step is to create two html files locally on your machine.

Just open up notepad/visual studio and create a new index.html file with the below content.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome</title>
</head>
<body>
    <h1>
        This page is served from Virtual Machine 1</h1>
</body>
</html>

Create a directory VM1 and save the above index.html file inside.

Now, let us create one more index.html file with a different heading

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome</title>
</head>
<body>
    <h1>
        This page is served from Virtual Machine 2</h1>
</body>
</html>

Create a directory VM2 and save the above index.html file inside.

So, now we have two folders VM1 & VM2 and each has a different index.html file. We are almost done. Here are the steps now to deploy this code on your VM's

Login to VM1 using RDC
Just copy the VM1 folder from your local desktop. and paste it inside your d drive of VM1
Open IIS, Create a new web application by name "first" and point it to the VM1 folder (From Step.2)
Browser the website http://localhost/first/index.html . You will see the below kind of output

And now,

Login to VM2 using RDC
Just copy the VM2 folder from your local desktop. and paste it inside your d drive of VM2.
Open IIS, Create a new web application by name "first" and point it to the VM2 folder.
Launch http://localhost/first/index.html . You will see the below screen.

You are done with your deployment now. Close all the remote desktop connections. Return back to the Azure Management Portal.

You have the Virtual Machines up and running but there is no way for the rest of the world to access your webpages. We need to create endpoints for both the Virtual Machines so that the webpages inside can be accessed by public. (ie. to make your website Public Facing). To do that,

Open the VM1 in Azure Portal
Navigate to ENDPOINTS tab (tabs will be on top)
Click on the ADD ENDPOINT button, provide the name as http, select TCP protocol and enter 80 for public and private ports. It should look like below.

We have now added an endpoint so that anyone can talk to VM1 using the port 80.

From the Azure portal, select VM2, Navigate to END POINTS tab, click on the Add new End point button at the bottom. But this time, select the option "Load Balance Traffic on an existing Endpoint".

Click Next. Provide the details as mentioned below. (Name & Port)

Yes. We are done. We have 2 VM's connected. We also have created End Points for both. We also have enabled the Load Balancing option for the VM2. Now, just find out the IP of your VM1 or VM2. To do that, go to the Azure Portal Dashboard, open your VM. Just note down the Public Virtual IP Address. In my case it is 168.62.36.130.

That is all you had to do. Thanks for following it up. Now, from any pc (having internet access) launch your favorite browser and hit http://<Your Public Virtual IP Address>/first/index.html
In my case it will be http://168.62.36.130/first/index.html . You may see any one of the pages.
"This page is served from Virtual Machine 2" or "This page is served from Virtual Machine 1"

Just switch your browser, access the same URL again and again from different browsers or after clearing browser cache, randomly you will either see a page from VM1 or may be from VM2.

So, Windows Azure did the Magical job of Load Balancing your websites. Some times, the request is sent to VM1 and some times to VM2 sharing the load.

However, this is just for illustration. In real scenarios, you will deploy the same code in both VM's. If you are even smart, you will deploy your code on 1 VM and clone/copy it as second VM.

There are about 20 screenshots in the article making it really big. But the concept is too small and simple. Isn't it?

Programmatically Uploading Media Content using Windows Azure Media Services SDK & C#

2014-02-02T01:32:00.000-08:00

In this post, have explained how to create a proof of concept to demonstrate how media files can be uploaded to the azure storage using the Media Services SDK. Just before writing code, it is very important to understand the basics of media services. If you are interested only in code, scroll down to the end of this post.

What are Media Services?

Windows Azure Media Services offer the flexibility, scalability and reliability of a cloud platform to handle high quality media experiences.

In simple terms, Windows Azure Media Services allows you to upload media files, encode them, convert the formats, protect the media content, do on-demand streaming or live streaming. and Yes, you have complete support for programming if you are a developer.

If you are interested to learn the concepts in detail, please visit this page from windows azure main website.

Prerequisites for uploading media files to storage (Programmatically)

Have a Windows Azure Account (Free Trial at least)
Login & Create a Media Services account (In my case I created it as msguymediaservice).
Obtain the Account Name and Key & keep them handy (Have written the steps after the prerequisites section)
Have the below development environment

Operating Systems: Windows 7, Windows 2008 R2, or Windows 8.
.NET Framework 4.5 or .NET Framework 4.
Visual Studio 2012 or Visual Studio 2010 SP1 (Professional, Premium, or Ultimate).

To obtain the key and account name, after creating media services account in step 2 above, you can just click on it (as shown below)

The below screen will be displayed.

Then, click on the Manage Keys button (as shown above) to see the below dialog

Now, just copy the account name and primary media service access key and paste them in a notepad. We will be using these credentials for this proof of concept later.

To get content into media services, you must first create an asset (one or more media files together) and upload it to storage.

Once you have the development environment ready, use Nuget to install the Azure media service SDK

PM > Install-Package windowsazure.mediaservices

Here is the complete listing with explanation for uploading the video file to azure storage using media services. Create a console application and copy the below code.

        using System;
        using System.IO;
        using System.Configuration;
        using Microsoft.WindowsAzure;
        using Microsoft.WindowsAzure.MediaServices.Client;

       //Let us have a Global Handle for accessing the media services context
        static CloudMediaContext m_MediaContext;
       // Entry point to your console application
        static void Main(string[] args)
        {
            //Get the server context. The Media Service Name & Access key are the inputs
            m_MediaContext = new CloudMediaContext("msguymediaservice", "/u4+RqlARQcRWti5OOtBewOEHEgzn/H6hiWOcXSGwZg=");

            //Upload the video file. Asset Creation Options can  Common Encryption Protected or Envelope Encryption Protected if you want to encrypt it 
            //during the process or leave it to None otherwise. Replace the below file path with the actual video file path on your machine
            UploadMedia(AssetCreationOptions.None, @"D:\sample_mpeg4.mp4");
        }


        //Creates the asset and returns the object
        static private IAsset CreateAsset(string i_sAssetName, AssetCreationOptions i_AssetCreationOption)
        {
            var objAsset = m_MediaContext.Assets.Create(i_sAssetName, i_AssetCreationOption);
            return objAsset;
        }

        //Uploads the media file to Azure Storage after creating the asset
        static public void UploadMedia(AssetCreationOptions i_Option, string i_sFilePath)
        {
            //Form a Name for asset
            var sDynamicAssetName = "Asset_" + DateTime.UtcNow.ToString();

            //Create a empty asset
            var objAsset = CreateAsset(sDynamicAssetName, i_Option);

            //Get filename with extension which needs to be associated with asset
            var fileName = Path.GetFileName(i_sFilePath);

            //Create the asset file
            var objAssetFile = objAsset.AssetFiles.Create(fileName);
            Console.WriteLine("Created assetFile {0}", objAssetFile.Name);

            //Create an AccessPolicy instance that defines the permissions and duration of access to the asset.
            var accessPolicy = m_MediaContext.AccessPolicies.Create(sDynamicAssetName, TimeSpan.FromDays(3), AccessPermissions.Write | AccessPermissions.List);

            //Create a Locator instance that provides access to the asset.
            var locator = m_MediaContext.Locators.CreateLocator(LocatorType.Sas, objAsset, accessPolicy);

            Console.WriteLine("Upload {0}", objAssetFile.Name);

            //Updoad the asset to Azure Storage
            objAssetFile.Upload(i_sFilePath);

            Console.WriteLine("Done uploading of {0} using Upload()", objAssetFile.Name);

            //Finally, Some Cleanup
            locator.Delete();
            accessPolicy.Delete();
            Console.ReadLine();
        }

Now, run the project. The code will create asset and upload it to the storage on your account automatically.

Once the upload is complete, just login to your azure account and verify.

Now, from the azure portal, You may publish your video in one click (ref. screenshot below. You can see a button). Once you publish it, you should see a publish URL for the video which you can use !!.

For a list of supported Media file formats, click here. You can also upload multiple files, upload even asynchronously & get the progress of the upload. I will leave this part to you. You can also program Media Services using the OData-based REST APIs. I will explain this part in an other post in the near future. Hope this post was useful. Your feedback and comments are welcome.

Facebook Javascript API : Feed and Share Dialog for Beginners

2014-01-21T05:27:00.004-08:00

I received five emails last month especially from students on making their websites social. This post is for them and all others who are interested in social media programming. Facebook Graph API no doubt is a silver bullet and a primary way today that allows us to post and retrieve data from-to Facebook. I am using it since its inception. I must say it is amazing and easy to work with.

This post is all about an interesting Facebook dialog which is powerful and has potential to generate decent traffic for your webpages. If you are a webmaster or an app developer, this post is for you.

Facebook dialogs are cool because they do not require any additional permissions as each one do not require someone to directly interact with them. Facebook offers dialogs for various purposes. I will write about each one of them in coming days. This post will give an introduction to Feed and Share dialog to begin with.

Feed and Share Dialog

Feed dialog allows users to post a story on their/others timeline (Well, after you login). The dialog works even on IOS & Android mobile platforms with a little variation in implementation. In the phone world, we call the same feed dialog as a Share Dialog. Here is how it looks. You might have come across this dialog while browsing websites or when using social media plugins on the blogs yourself.

Javascript Implementation : The fastest way

Idea : Let us have a screen with a login button. Clicking on it should allow a user to login through his facebook credentials. After successful login, our application must show another button, clicking on which would launch the Facebook Feed dialog. Our code should decide what to display in the dialog.

Open Visual Studio, create a new website by name "FBPlayground". Right click on the website name in the solution explorer and add a new html file "FeedAndShare.html".

Open the new file you just created and clear the contents of it. Add the below code, and save it.

       
<!DOCTYPE html>
<html>
<head>
    <title>Feed and Share Dialog</title>
    <script type="text/javascript" language="javascript">

        //Not Jquery !!! just a helper function to return an object
        function $(i_obj) {
            return document.getElementById(i_obj);
        }

        window.fbAsyncInit = function () {
            FB.init({
                appId: '757846120912141', // App ID : Insert the APP ID of the APP you created here
                status: true,
            });
        }


        function fbLogin() {
            FB.login(function (response) {
                if (response.status == "connected") {
                    //User has logged in, hide the login button and show the launch button

                    $("btnlogin").className = "Hide";
                    $("btnlauncher").className = "Show";

                } else {
                    // user has not yet logged in, hide launcher button and display login button

                    $("btnlogin").className = "Show";
                    $("btnlauncher").className = "Hide";
                }
            });
        }

        //Function displays the Feed Dialog
        function LaunchFeedDialog() {
        
        //Create an object with the below properties.
//There are a lot more parameters than what I have written below. Will explain each one of them in coming posts.
            var obj = {
                method: 'feed',
                link: 'www.msguy.com',
                picture: 'http://fbrell.com/f8.jpg',
                name: 'A Title for Feed Dialog',
                caption: 'Some Caption for the URL',
                description: 'A description for the URL which is to be displayed'
            };

            //Calling the Facebook API : Important
            FB.ui(obj, callback);
        }

        function callback(response) {
            //Do anything you want here :)
            //document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
            //alert(response['post_id']); Some diagnostics lol :)
        }

        // Load the SDK Asynchronously. This is a very important part. It loads the Facebook javascript SDK automatically.
        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        } (document));
    </script>

    <!--Styles -->
    <style type="text/css">
        /*Hides a element*/
        .Hide
        {
            display: none;
        }
        
        /*Shows an element*/
        .Show
        {
            display: block;
        }
    </style>
</head>
<body>
    <!--User can click on this button and the fbLogin method is invoked which prompts for facebook login-->
    <input id="btnlogin" type="button" onclick="fbLogin()" value="Login with Facebook" />
    
    <!--After user logs in using facebook credentials, make this button visible. Not until.-->
    <input id="btnlauncher" type="button" onclick="LaunchFeedDialog();" value="Launch Feed Dialog"
        class="Hide" />
</body>
</html>

The next thing you should do is to create a facebook app. With your Facebook credentials, login to official Facebook developer apps platform https://developers.facebook.com/apps

After login, just navigate to the "Apps" menu and select "Create a New App". A pop-up will be shown just like this.

Provide a name for your app (In my case, it is Dialo). It can be anything you wish. Leave the namespace field blank. You can select a category which is appropriate for your app. Then, click on the "Create App" button. It will prompt you to complete a Captcha. Complete it. You are almost done.

Your app is now created. Let us configure it to work with our code. Select the Settings menu from the left pane. You will see the below screen.

Note down the APP ID. We need it later in our code.

Enter the name of App Domain as "localhost" in case you are running this sample on localhost.

Now, click on the "+Add Platform" button to see the below screen. Select "Website". The pop-up would close and you will be back to previous screen with a few additional controls displayed in it.

Now, enter the path to the virtual directory of the application you just created in the "Site URL" field. In my case, it was "http://localhost:62735/FBPlayground". (In your case, the port number would differ. Just run your website and copy the same port number).

Say for example, if the test application you created is available at http://localhost/MyDialogTest, provide the same URL in the Site URL box of the above screen. (In case your app will be hosted on a domain, provide the full URL of the site and virtual directory. This is where users are redirected after they login to your app using their facebook credentials. Just be cautious. This URL is very important and your app only works if you provide a valid URL. In case you are using Visual Studio and running the website using the built-in web server, the port number would vary when compared to the one above. I have provided a sample screenshot below which works for me.

Save the changes.

Do not forget to change the APP ID in the code above with the actual APP ID of your Facebook app.

Running It

In your Visual Studio, set "FeedAndShare.html" as a start page and run the website. You will see the screen below.

Click on the "Login with Facebook" button. You would then see the below screen. (If you don't see the below screen, there are two reasons. The website URL you provided while creating Facebook App is not correct or you have opened the html file directly without a web server.)

Click on the "Okay" button. Now, you will see another option on the screen to launch Feed dialog. The login button would be hidden.

Click on the "Launch Feed Dialog" button. You see see the dialog with all the settings configured. You can just type something and share it on your wall.

Now, Login to facebook and check your wall. You will find the post you just shared. All your friends can see it and share it if they like.

The code is self explanatory. However, I have added a few comments. Go through them. Let me know if it worked for you and even if it doesn't, I will help you to fix it and make it work for you.

Creating a cool Microsoft Word Report for listing Scientists with Templater and C# Generic List

2014-01-18T03:05:00.000-08:00

Some time back, I had written a post on Templater Library for creating a simple "Prize Winner Notification" e-mailer template using MS Word & Templater. It was a simple one. If you have not read it yet, please have a look at this Post.

In this post, let us create a Microsoft Word Report which lists few great scientists across the world. Also, let us see how the Templater supports Generic List as a data source for the report.

Creating the report template using MS Word

Open Microsoft Word, create a new blank document.
Insert a table with just 1 Row and 2 Columns
Insert the Tags inside the cells [[NAME]] & [[BIRTH_DEATH]]
Select the table design or do the color, font formatting and style the way you want. (This is not mandatory!). You can even select a bullet!
Save the document as Scientists.docx (or .doc)

Writing some code

Open Visual Studio and Create a new console application for this demonstration! Reference the Templater DLL to Your Project or do Install-Package Templater from Nuget!
Now, let us create a Entity which can hold the Name and Active years of a scientist.Add a class file, Create a Class like this.

class Scientist

    {
        private string m_sName;
        private string m_sYears;

        public string NAME
        {
            get { return m_sName; }
            set { m_sName = value; }
        }

        public string BIRTH_DEATH
        {
            get { return m_sYears; }
            set { m_sYears = value; }
        }
    }

The property names are in UPPERCASE just because the tags we gave in the word document are also in Uppercase. Also, the property names here exactly match the tags we gave in the word document template.
In the main program.cs, let us add a function which generates a list of employess

/// <summary>
        /// This method Creates a List of Scientists and adds the objects into a Generic List Collection 
        /// and Returns it back
        /// </summary>
        /// <returns></returns>
        private static List<Scientist> GetScientistData()
        {
            List<Scientist> lstScientists = new List<Scientist>();

            Scientist scntst0 = new Scientist { NAME = "Albert Einstein", BIRTH_DEATH = "1879 - 1955" };
            lstScientists.Add(scntst0);

            Scientist scntst1 = new Scientist { NAME = "Sir Isaac Newton", BIRTH_DEATH = "1642 - 1727" };
            lstScientists.Add(scntst1);

            Scientist scntst2 = new Scientist { NAME = "Galileo Galilei", BIRTH_DEATH = "1564 - 1642" };
            lstScientists.Add(scntst2);

            Scientist scntst3 = new Scientist { NAME = "Charles Darwin", BIRTH_DEATH = "1809 - 1882" };
            lstScientists.Add(scntst3);

            Scientist scntst4 = new Scientist { NAME = "Johannes Kepler", BIRTH_DEATH = "1571 - 1630" };
            lstScientists.Add(scntst4);

            Scientist scntst5 = new Scientist { NAME = "Louis Pasteur", BIRTH_DEATH = "1822 - 1895" };
            lstScientists.Add(scntst5);

            Scientist scntst6 = new Scientist { NAME = "James Maxwell", BIRTH_DEATH = "1831 - 1879" };
            lstScientists.Add(scntst6);

            Scientist scntst7 = new Scientist { NAME = "Edwin Hubble", BIRTH_DEATH = "1889 - 1953" };
            lstScientists.Add(scntst7);

            Scientist scntst8 = new Scientist { NAME = "Emil Fisher", BIRTH_DEATH = "1852 - 1919" };
            lstScientists.Add(scntst8);

            Scientist scntst9 = new Scientist { NAME = "Paul Dirac", BIRTH_DEATH = "1902 - 1984" };
            lstScientists.Add(scntst9);

            return lstScientists;
        }

Now, we have the data and also the report template. Let us write the code to generate report

        /// <summary>
        /// This method Generates the Report using Templater
        /// </summary>
        /// <param name="lstScientists">List of Scientist (Generic List) </param>
        /// <param name="i_sReportLocation">Location of the Word Template</param>
        private static void GenerateReport(List<Scientist> lstScientists, string i_sReportLocation)
        {
            using (var document = Configuration.Factory.Open(i_sReportLocation))
            document.Process(lstScientists);

            //Open the report (file) for the user to view it
            Process.Start(i_sReportLocation);
        }

Thats all we have to do. But hold on. We have to invoke these methods. Lets do it

In the main function , call the above methods to create the report

using System.Collections.Generic;
using NGS.Templater;
using System.Diagnostics;

static void Main(string[] args)
        {
//Generates Data
            List<Scientist> lstScientists = GetScientistData(); 

//Generates Report based on the data. When trying out this code, Give appropriate path of your report template (Which you created earlier) below.
            GenerateReport(lstScientists,@"C:\Scientists.docx");
        }

Hurry up!

Run it and believe it!

Here is how it looks!

Working with MS Office reports was never easier for C# developers earlier. Isn't it?

5 Windows 8 posts for beginners

2013-10-24T04:42:00.000-07:00

There are few posts on the web which makes Windows 8 Installation and understanding the concepts easier. Here are five of them which I found simple and interesting.

50 Windows 8 tips, tricks and secrets
http://www.techradar.com/news/software/operating-systems/50-windows-8-tips-tricks-and-secrets-1028220

How to Install Windows 8 In 7 Simple Steps
http://www.soluto.com/knowledgebase/how-to-install-windows-8

How to optimize Windows 8 on old hardware
http://www.pcworld.com/article/2011906/how-to-optimize-windows-8-on-old-hardware.html

Windows 8 Secrets: WinRT, the Windows Runtime
http://www.winsupersite.com/article/windows8/windows-8-secrets-winrt-windows-runtime-142196

How to Backup and Import Wireless Network Settings
http://mywindows8.org/backup-import-wireless-network-settings/

Video Tutorial : Creating Win 8 Metro App to work with Picture Library (WinRT, XAML and C# )

2013-09-19T06:51:00.000-07:00

Some time back, I created a small Windows 8 Metro Application (Windows Store App) which can access the Windows Picture Library and display thumbnails of all the pictures available in it. This post should be of a little help for developers who just started exploring Metro Apps for Windows 8.

I've created a detailed 30 minutes video covering many aspects (Code, UI, Concepts) of building a Metro Application for the Picture library Thumbnails. Go ahead and watch it.

User Content Files and Windows 8 Metro Application - Part 1

2013-09-07T01:22:00.000-07:00

This post introduces a few concepts which can help you when working with user content files in Metro Applications. Next post will focus on the code and a demo. The post is full of concepts and theory and you may be a person who like to see code more than the concepts. However, it is necessary to understand the basic concepts before starting a code demonstration. I promise. Next post will have code, code and nothing else. Read further..

When we are working on Windows 8 Metro Apps, we have a wide range of options when choosing the data source for our apps. A metro application can access data

From the user content files located on a machine, removable storage, or a network drive.
From the isolated storage which is local to application (APP DATA)
From the Web. (Through WCF, OData Service etc)
From other applications if they expose.

And by the time I am writing this post, Microsoft has introduced the Azure Mobile services. Now, Windows 8 Metro Apps for PC & Mobile can access data from the azure cloud and the data can be in structured format. I will write about this in a separate post in near future.

Metro Apps can access certain file system locations, like the app install directory, app data locations and the Downloads folder by default. Apps can also access additional locations through the file picker or by declaring capabilities.

Metro apps can access the user files located in Windows Library. To a windows library, user can add documents, pictures and videos. Also users can add additional content locations which can be of a disk, network drive or a removable storage and the library then acts as a central repository for all the files and folders you mapped. Your metro app can access the library by just declaring a capability in the manifest of the application. When your Metro app is installed by users, it asks them to provide permission to access the library. Also, in cases where we do not want our apps to access the library directly, we can display the file pickers which allows users to select files from different locations of user's computer.

Windows 8 makes it very easy to work with files in a location transparent manner. You work with the local files, network files and the web files in the same way with the same windows storage API.

The StorageFile & StorageFolder classes of the Storage API abstracts away the physical locations. The Storage File can represent a file on the local machine or a file on the cloud and similarly a Storage folder may be a physical folder on the machine or a virtual folder representing a windows library or a group of files.

Now, to access a top level folder within our Metro Application, we need to provide a reference to it. For example, we can write the code like

StorageFolder picLibrary = Windows.Storage.KnownFolders.PicturesLibrary;

The KnownFolders class Provides access to common locations that contain user content. The class is static and cannot be instantiated. You must Call the methods directly instead. Also, In order to access the folder and libraries represented by the properties of this class, you must declare the necessary capabilities in your app manifest as I mentioned..

We can create metro applications using C# / VB.Net for the business logic and XAML for the User Interface. Also, if you are from a web background, you can create a metro app just with JavaScript for business logic and HTML for the User interface. No more disappointment!

In the next post, we shall create a Metro Application for displaying images from the windows pictures library. Just install the prerequisites Visual Studio 2012 (at least a express edition) and the Windows 8 operating system (a preview version at least) and get ready for the action.

Developing a Link Chopper using C# and Bit.ly API in 1 Hour

2013-07-28T07:03:00.000-07:00

I just spent an hour today to develop a very small tool (Just 130 KB) for Shortening the links using the API provided by bitly. I call it Link Chopper. I wrote it just for fun and to explore bit.ly API. I have Link Chopper ready and you can download it for free from this link Download LinkChopper. You dont have to say thanks as it is a no big stuff :)

The tool gives an option for users to enter a long URL and generate a short bit.ly url with just one click.

Also, the short URL is copied to clipboard automatically so that users can just paste it wherever required. Link Chopper comes with basic functionality to clear the controls & launch the URL in browser.

Its a very simple tool and anyone can use it. I have used the background worker to generate the URL in the background while displaying the progress to user without blocking him.

However, if you are a developer and interested in the code to generate the short url, read further.

First, create a free bit.ly account. Go to https://bitly.com/a/sign_up. Of course, if you have a Facebook or twitter account, you can use that as well.
Login to your bit.ly account using your credentials and then visit this link http://bitly.com/a/your_api_key/ . You will see a screen something like below (Do not use this same exact key. It doesn't work either as I have scrambled it. So, use your own keys)

I know you cannot wait anymore to see the code. Here is the function which can generate a Short URL.

/// <summary>
/// If you pass a Long URL, the bitly USER ID and THE API Key, this function will shorten the URL and return it back to caller
/// </summary>
/// <param name="i_sLongUrl">Long URL</param>
/// <param name="i_sBitlyUserName">User ID</param>
/// <param name="i_sBitlyAPIKey">API Key</param>
/// <returns>URL if succeeds or Status if Fails</returns>
/// <remarks></remarks>
public static string GetShortUrl(string i_sLongUrl, string i_sBitlyUserName, string i_sBitlyAPIKey)
{

    //Construct a valid URL and parameters to connect to Bitly Server
    StringBuilder sbURL = new StringBuilder("http://api.bitly.com/v3/shorten?");
    sbURL.Append("&format=xml");
    sbURL.Append("&longUrl=");
    sbURL.Append(HttpUtility.UrlEncode(i_sLongUrl));
    sbURL.Append("&login=");
    sbURL.Append(System.Web.HttpUtility.UrlEncode(i_sBitlyUserName));
    sbURL.Append("&apiKey=");
    sbURL.Append(System.Web.HttpUtility.UrlEncode(i_sBitlyAPIKey));

    HttpWebRequest objRequest = WebRequest.Create(sbURL.ToString()) as HttpWebRequest;
    objRequest.Method = "GET";
    objRequest.ContentType = "application/x-www-form-urlencoded";
    objRequest.ServicePoint.Expect100Continue = false;
    objRequest.ContentLength = 0;

    try {
        //Send the Request and Get the Response. The Response will have the status of operation and the bitlyURL
        WebResponse objResponse = objRequest.GetResponse();
        StreamReader myXML = new StreamReader(objResponse.GetResponseStream());
        dynamic xr = XmlReader.Create(myXML);

        //Retrieve the Status and URL from the Response
        XmlDocument xdoc = new XmlDocument();
        xdoc.Load(xr);

        string sStat = xdoc.ChildNodes(1).ChildNodes(1).ChildNodes(0).Value;
        if (sStat == "OK") {
            return xdoc.ChildNodes(1).ChildNodes(2).ChildNodes(0).ChildNodes(0).Value;
        } else {
            return sStat;
        }

    //I know the above code is dirty. You can use Linq to make it good and beautiful. 
    //I did not wanted to use linq and inteded to finish it fast. However, it works!
    //the xml node status_txt will have the status of the operation and the tag url will have the link.
    //Instead of above code, Something like below code can make your code Neat. Leave the comments as as it is if you do not like to get your hands dirty

    //dynamic xdoc = XDocument.Load(xr);
    //if (xdoc.Descendants("status_txt").Value == "OK") {
    //    return xdoc.Descendants("url").Value;
    //} else {
    //    return xdoc.Descendants("status_txt").Value;
    //}
    } catch {
        return "SOME_OTHER_ERROR";
    }
}

And, you can call it like

var sShortUrl = 
GetShortUrl("http://wwww.xyz.com/a_long_xyz_url_which_is_really_boring.html", "23567o_6das567dflpu567m34dl", "R_4e957fe279asdfasdfasdf03be81asdffbfefcc38c40e2b463")

Make sure you replace the above parameters with valid ones. Especially your bitly User Name and Key

The Big Post : Being positive about your work and organization

2013-03-29T10:24:00.000-07:00

Look. If you are a guy or gal who do not like the organization you are working at, this post may help you to learn a few things which you should actually know to start feeling successful @ work.

Background: First, I hate writing these kind of posts related to non-programming stuff. I am a techie, (Not a HR Guy) passionate about tools, technologies and programming. You will find no other posts in my blog which is non-technical. I am writing this post not because I am too rich or too much happy with my present employer. Also, I am not working for a fortune 100 giant too!

Adding to it, I never traveled abroad till today through my employer and I am not a silent spiritual guru who can teach you how to compromise in life and assume yourself to be happy inside. I am saying all this because I am always positive at work and telling you how to be positive at work. That's it !!

I like to earn a great salary, love to buy new smart phones every now and then and love to have beach vacations every month! I am a kind of person just like you. So, try to read the post completely before you start looking at the X button on the top right corner!

Hey, look further.

"Being successful at work" is a delicious recipe to have and the main ingredients are "Financial Success, Happiness and Job Satisfaction". Job satisfaction is as important as like a tablespoon of salt in a hot and spicy recipe.

This post is all about a typical employee mindset and the attitude. Most of the times, employees will be right in what they think, what they assume to be and what they predict about their organization. But the actions they take will usually be incorrect. Seriously, there will nothing be happening around them as they think. The problem is the resistance they have in accepting a thing or may be their organization is not doing well!!

Any guy like you and me want these things @ work

Cool Designation: Like an evangelist or an expert or something smelling fancy
Easy to do work. (Which you yourself call it challenging)
A great N digit salary. (N is up to you)
Perks, Bonus, Goodies and rewards every now and then.
Onsite Opportunities
Holidays, Vacations and Sponsored trips!
Company Stocks, Club memberships and discounts.

OK. Now, read the above 7 lines few more times. You will know what you wanted and wanting. Lemme tell you one thing. Whoever doesn't want these things are either sitting on top of mountains (meditating) or they do not belong to our planet. Agree? I know you would. Well, you did. Yes.

My intention here is to convey that everyone likes to have these things but mostly will not be getting all of these or my god some guys do not get even one of these!! But still, you can be positive and work (here or there) with a smile :)

How? Read further.

Just try to follow these things to be positive and energetic. Try seeing the difference in you

Be passionate about something in life. The so called "Something" in this context can be a Technology, art, painting, Sport or anything that interests you.
Maintain good Health: Sleep 8 Hours a day. Have enough food and water. This is a real important thing. I am not a doctor to suggest you to do physical exercise and all. Huh. I don't do it myself. Who gets time!! So, just get addicted to an indoor/outdoor game and play every day without miss. See, if you start thinking too much about the problems you have at work or about that damn employer, you yourself are getting tensed. You will die a few years early and your employer will never be affected. So, take care of yourself.
Spend time with your friends and family: Have enough time for your family. Talk to them, spend more time with them, play with your kids, take your parents outside on a small vacation and do not think about your organization when you are with them. Don’t tell them how bad you feel about your organization. You are already wounded. Why are you passing the pain to your innocent family members?
Think like a business owner: Think as if you are a business owner and observe the challenges. What would be your reaction if you open your own dream company and your employees eventually talk rubbish about it in front of others just like you are doing it now?
Do not get influenced by External Factors: Do not allow external factors to influence you negatively. Many of your friends may not like their work, their financial life, and their team mates. You should never get influenced by what they are vomiting! It’s their problem and their problem should not create a problem to you. Observe what they are saying, listen to them, analyze the good and bad sides of it, but never take it seriously.
Don’t spread the disease: Do not discuss what your friends talk about your organization with others. Do not even talk about this to your closest friends. Though your friends are complaining about your organization, they are discussing it with you just because they trust you. If you leak what they say, it’s like you are seriously doing some damage to your relationship. So, keep the things confidential. The worst thing one would do is to talk about such guys with the boss just to impress him. By doing such things, no one becomes a super hero; they just start losing their value. Even employers will hate such kind of guys eventually.
Do not show resistance. Accept everything positively in work. See, you are working for your customers. But again, your customers are working for someone else. What you think about your customers may not be true always. They might be having their own worries too.
Money is not everything: Money is very important and you and I work for it. But, why it should become everything? I personally know many super rich families. You will be surprised to know that they suffer more than you do. Own brothers and sisters quarrel for money. Own blood relatives will have disputes and the main reason most of the times will be that piece of paper called Money.
Stop Unnecessary Comparison: Understand that every human being in unique. Every human being deserves something which is unique. Let me give you an example

Assume that you are a Person P having around 5 years of industry experience. You draw a monthly salary of S dollars. You are putting E amount of effort to earn it.
Now, your colleague has the experience as much you have. He might be drawing S + 100 dollars, He might just be putting E – 100 amount of effort only. OK. Why can’t you accept it? Till you come to know the other guy is earning more than you, were you not happy? Didn't you unnecessarily make yourself unhappy?
So, is comparing bad?

No. Not really. You must always compare yourself to others. Compare it to know where you are.
Compare it with your friends who earn less than you
Okay. Compare it with others who earn more than you. But, have an ambition or a desire to earn more. It is not harmful. But, don’t use that as a thing to talk negative about your organization; don’t allow that matter to demotivate you. Don’t allow that matter to hurt you inside. Don’t allow that matter to show less interest in your work. Instead, think of what you can do to earn more. Isn't it a good idea?

Think about yourself: This is kind of a tip which you should never ignore. You always think about others, work, things which bothers you. Do this. Go, just sit below a tree for some time alone, and think about yourself. Think what you are feeling, what you are doing, Why are you doing it, what best can be done, Where do you want to be? This is the thing you should be doing. Isn't it? By appreciating your organization or by blaming them, you are allowing your mind to think about the organization itself. I suggest you to think about yourself. You will find lot of ways to improve in your work, financials and other aspects.

Okay, for some of you all the above things are good to hear but difficult to adopt. Isn't it? I know. Here is a list of items which I would like to bring into your attention.

Were you not happy the first day you joined your organization. It is only you who agreed to work for this compensation. Isn't it? But now why worrying?

Yes I was but I never knew my increments will be less in future :

Did you bring it to your boss notice that your compensation is less? if

YES – if you think even then they did not consider it after many years, try quitting the job. Do not wait further.
NO - Try discussing it with your boss. It’s your mistake.

No. I joined my present organization because of some other commitment and not for a financial reason.

Cool. Then, live with it if your commitment is more important than your desire. So that is the answer, but stop thinking negative now! Your present job solved a problem you had which is more important than a financial thing. So, work happily now.

For me, role and designations are more important than financial things but not getting it

if you think you can’t grow in your present organization, why are you working there still? Are you capable? If yes then try joining another organization where you think you can fulfill your dreams.

Many employees do this. When their friend wants to join the same organization, they say “No, why do you want to join my company. They don’t give you good work; here they won’t pay you well, we are already suffering...”. If your friend is smart, he would say “Why the heck are you working in your present organization then. Go and change your job first. There are too many opportunities to shine in this world”

Well, if you have issues other than financial or work related and you have been forced to work in your present company for some inevitable reason; I suggest you to start thinking positive or at least start finding an alternative way to earn. Who knows, you may do good as a business owner.

The final statement. After reading the post, hopefully you will go back to work with a smile. If you still think you can’t be positive at work tomorrow, and if you think you are not happy with your present work and also if you think there is no way to get rid of your problem in your present organization, just change your job but don’t blame Mr. Bob !

TypeScript : My Video tutorial on its Need, Usage and benefits with a demo

2013-03-21T02:46:00.001-07:00

If you love writing javascript, you may even like to explore a new scripting language which is becoming popular these days known as "TypeScript". You can write TypeScript just like you write javascript. You can compile TypeScript code to generate output javascript which is clean, maintainable and cross browser compatible.

The best thing about TypeScript is you can get rid of the problems posed by dynamic types of javascript. Adding to it, you get to use the object oriented features like Interfaces, Visibility Modifiers & Classes. Here is a video where in I have explained

Why we need TypeScript?
What is TypeScript?
Features of TypeScript
TypeScript Compiler
Keywords & Hierarchy
Tooling Options

At the end, you will see a demo of a small hello world application with TypeScript. Enjoy watching this video. Happy Learning !

Creating your first mobile application for Firefox OS, the new Rockstar!

2013-02-26T06:44:00.000-08:00

If you are new to Firefox OS, the definition says it all. "Firefox OS (project name: Boot to Gecko also known as B2G) is a Linux-based open source operating system for smartphones and tablet computers being developed by Mozilla."

Thing is that, there is a new OS coming to market sometime near future. Smartphones will be equipped with a fresh new OS known as Firefox OS. In this post, let us create a first hello world application and see it running inside Firefox OS.

No No. You don't have to learn a new language. It's a promise. Well, stop guessing now. Firefox OS is designed to allow HTML5 applications to integrate directly with the device's hardware using JavaScript. So, you just need to know a bit of html, css and javascript to begin writing awesome apps for Firefox OS. You can access your phone's contacts, camera, settings, so on and so forth just like you did with your Hybrid Mobile Apps. Firefox OS is not just a framework like Phone Gap. It is an open source operating system written in HTML/CSS/JS/C++. As a developer, you can modify anything and everything. Firefox OS is not a garden with a wall like other Mobile Operating systems. It is open and wall-less !!

This post is not about the history of Firefox OS, the need or its future. Read the below posts if you interested in such stuff. We shall start using it instead !!

Wiki Definition
Documentation from Firefox
Architecture

There is also a marketplace now for Firefox OS apps. Here it is https://marketplace.firefox.com

As a developer, you only need to learn three things.

Think of a concept, use a responsive frameworks to design it, develop your apps using web technologies and publish it to marketplace. Oh Yes, you can make some money too :)

Now, the first thing to know, there are only few phones at present with Firefox OS installed. I know its difficult to get one at this point of time. So, it's obvious. There is a simulator available using which you can install your app, test it and then you can publish it.

Firefox OS Simulator

The Simulator is easy to install and runs on Windows, Linux and Mac. To install it, use Firefox as your browser and click here. (Simulator is around 60 MB. Do not worry if your browser goes for a task during installation. Just 'continue' running it.)

Once you install it, On the Firefox menu (Windows) or the Tools menu (Mac, Linux), go to Web Developer and click Firefox OS Simulator. The dashboard appears.

Click the Stopped button. It changes into the Running button and Firefox OS boots up in its own window. The default size for this window is 320x480.

Let us now create an application locally (without a web server) and deploy it inside the simulator.

Follow the steps written below. (Create all the files mentioned below in a single folder)

STEP 1: WRITING HTML CODE

Create a basic index.html in your favorite editor with the below html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<h1>Hello World from Firefox OS</h1>
</body>
</html>

STEP 2- ICONS FOR YOUR APP

Create a folder by name "img". Within that, create one more folder by name"icons" and you can add three icons with size 16 X 16 , 48 X 48 , 128 X 128 respectively. This step is just for adding an icon for your app. In my case, I have three icons by names mortar-16.png, mortar-48.png and mortar-128.png. You can have your own icons for your app.

STEP 3 - CREATE MANIFEST.WEBAPP

The Open Web App manifest contains information that a Web browser needs to interact with an app. A manifest is one of the key things that distinguish an Open Web App from a website. It is a JSON file with a name and description for the app, and it can also contain the origin of the app, icons, and the permissions required by the app, among other things.

Using your favorite text editor, create a file by name manifest.webapp. Copy the below json contents into it. Save the file.

{
  "version": "0.1",
  "name": "MY First App",
  "description": "Some Description for my awesome App",
  "launch_path": "index.html",
  "icons": {
    "16": "/img/icons/mortar-16.png",
    "48": "/img/icons/mortar-48.png",
    "128": "/img/icons/mortar-128.png"
  },
  "installs_allowed_from": ["*"],
  "appcache_path": "/cache.manifest",
  "default_locale": "en"
}

You are almost ready. I have created a video on how to deploy the application you just created. Watch it.

It is a matter of few minutes to get started with a basic hello world app for Firefox OS. This post only talks about creating and installing a basic app. You can use the device capabilities to access maps, camera, sensors and settings using javascript inside Firefox OS. We shall look into it in coming days. Happy Coding !

A fresh look for my blog. Layout changed !!

2012-12-28T12:15:00.001-08:00

The year 2012 was really fun and was a prosperous year in my personal & professional life. Had wrote many articles, created many videos, participated in User Group Meetings, delivered sessions, visited places, met Industry experts and the best of all, me and my wife blessed with a cute little angel baby girl.

Talking about my views & passion, I always wanted to update the layout of my blog not because it was ugly but it was outdated and heavy. I wanted it to be light, usable and responsive to some extent. It took me around two months to put the things in place. Finally I am done customizing the layout of my blog. I almost had to rewrite the entire page stuff. I hardly wrote something on my blog in the last two months. I felt bad, used to curse myself for not being able to write any thing for so long. However, I am happy now with the new layout and now it feels so fresh & decent and the blog is all set to rock in year 2013.

In an attempt to make it better, I had to remove a few ads which were earning some money for me but was really annoying the readers. Also, have modified the color scheme to make the readers feel as though they are reading a newspaper. Well, I was happy with the Discuss commenting system but always felt it heavy & a performance killer. Just replaced it with Facebook commenting system. It should be okay now. Let me see how it goes.

Menu has been restructured now. Readers can now find the posts based on the category that interests them. Many times I received emails & appreciations from readers saying the quality of the video tutorials on my blog were good. I could not believe it myself as I am really poor in making videos & screencast recordings. The support shown by my friends and readers always motivated me to write something Interesting. The video channel has been added as a widget in the sidebar of blog to make it easily accessible.

I wish you all a Happy and prosperous New Year ahead. I suggest you guys adding a New Year resolution to Learn & share tech stuff. Wish I could learn more in the year to come. Happy Reading.
Once again, thanks for all your comments, opinions, support, reactions, likes and tweets. Have a fantastic year ahead. Keep an eye on my blog!!

New ebook : A guide for developers to keep the QA bugs count minimum

2012-08-19T02:58:00.000-07:00

I always wanted to write an ebook which could help both developers and testers in some way to save their valuable time.

All software engineering gurus say Unit Testing is important. Yes it really is and please do. However, if you are running short of time to carry out detailed unit tests, here is a guide with a list of items you can verify against the application to make sure that the bugs count on your head goes minimum during QA.

Testers can use this guide as a checklist for finding common errors and developers can make use of this guide to fix them before testing !

If you have some more things to add, your comments and suggestions are welcome.

You can download the eBook here for free.

Introduction to Webfonts for HTML & CSS developers

2012-08-04T08:27:00.003-07:00

I am writing this post as an answer to a question I received in email. A developer wanted to know about Webfonts and using them. If you are a Web-font expert or you have used them , you can hit the X button right on your browser tab.

However, read further if you want to learn about it.

In the modern web era, fonts play a major role in web design, usability and typography. Webfont is the solution to a big problem which all web designers and developers were facing. Now, lets dive into the problem statement.

In simple words, until recently, most websites could only display text using a small selection of fonts which are already installed on user's computer. Simply, the font names/types you use in your HTML/CSS should be available on user's machine and only then users could see the text with that font and not otherwise.

As a designer, if you wanted to use some fonts which are catchy, flair or with a different appeal, it was not possible as you could not expect your users to install the fonts which you like as a developer. Just imagine, how many times we used images instead of text to show a attractive text or a small section header?

The biggest problem with images is that ; Search engines cannot understand the text on your images so could not index your pages very well. And suppose, if you wanted to change the font size in your heading, you had to recreate an image!

And with the Introduction to Web-fonts, the problem is solved!.

Webfonts are a font format with a specific license that permits web designers and developers to use real typography online without losing the advantages of live text — dynamic, searchable, accessible content.

Today, there are many providers offering web-fonts as a service. Few services are for free and few of them comes for a cost! Using a web-font is fairly simple. The service provider gives a Javascript reference URL and a font name. Just reference that URL on your web page and start using the font in your CSS. And these fonts are available to your users without having them to manually install it!!

Almost every one likes "Free" just like me. So, lets look into a Free Web-font Service.

Google !!
Google Web Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. There are many fonts available on the Google directory for free use. Also, you can submit your own font. Find more details here http://www.google.com/webfonts/#

Here is an example on using a free Web-font called "Merienda One" available on Google.

Add the below code in the Head Section of your HTML

<link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>

You can obtain the URL ref like above for every font available on Google web-fonts. Just browse the web-font directory and for the desired font, click on "Quick -Use" for that particular font. You will get the javascript ref link code to use it.

And that's all you have to do. You can Just use the font name wherever required in your HTML document. Here is the complete listing.

<html>
<head>
    <title></title>
    <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet'
        type='text/css'>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-family: 'Merienda One'">
        This text is looking cool. Thanks to the font Meerienda One!
    </div>
    </form>
</body>
</html>

and for every user and every browser, the output will be

Interesting? Here are some more web-font services

If you are looking for free webfonts, just Google for "Free Web-fonts" and you will find couple of them.

Back to C# School: Basics of Yield keyword

2012-07-21T02:37:00.003-07:00

It is a common thing that, as and when we progress to use advanced language features and get some experience on few types, we almost tend to forget using the basics.

This post is all about an interesting C# stuff that exists right from C# 2.0!! Which you should be aware when writing code. Yes. If you are an expert or if you already know the use of Yield keyword, stop reading right here.

Carry on if you dont mind reading it !

Yield (A C# language feature)

It is an iterator block to provide some value to the enumerator object or to signal the end of iteration.
According to Microsoft definition, the yield statement can only appear inside an iterator block, which might be used as a body of a method, operator, or accessor. The body of such methods, operators, or accessors is controlled by the following restrictions:

Unsafe blocks are not allowed.
Parameters to the method, operator, or accessor cannot be ref or out.

Let us see an example. Create a Console application and add this function below inside the class.

        public static IEnumerable<int> GetNumbers()
        {
            yield return 1;
            yield return 2;
            yield return 3;
            yield return 4;
        }

Now, from your main, you can call it like this

IEnumerable x = GetNumbers();

and now, to print the values from x, just use a loop and just add a break-point to above function and the below foreach loop to see how it works at debug time.

       foreach (int i in x)
       {
           Console.Write("{0} ", i);
       }

During debugging, the first thing you need to note is every single call maintains the state!! So only yield statement is executed at a time. That means, the call is made when required!

That’s pretty basic. Being said, If you want your function to return multiple values, you can use yield and finally at the caller end, you can iterate through the results. That’s fine. At first, Looks similar to a collection. Not a big deal. Let us see one more example now to see the usefulness of yield.

Let us first write two extensions to int. The To extension prints a number serially.

       public static IEnumerable<int> To(this int value, int inclusiveMax)
        {
            for (int i = value; i <= inclusiveMax; i++)
                yield return i;
        }

And the Multiply Extension just multiplies a value with the multiplier.

    public static IEnumerable<int> Multiply(this IEnumerable<int> val, int multiplierval)
        {
            foreach (int v in val)
                yield return v * multiplierval;
        }

Now, you will see the .To extension for integers. So you can use something like

            var numbers = 1.To(10);

and doing a

        foreach (var i in numbers)
          {
             Console.WriteLine(i);
          }

Will print the values from 1 to 10.

Now, how about multiplying each of the above output value by 5?

          var op = 1.To(10).Multiply(5);
            foreach (var i in op)
                Console.WriteLine(i);

And you should see

This proves yield is useful. Isnt it? Here are few more things about Yield

Interacts with the foreach-loop. It is a contextual keyword: yield is a keyword only in certain statements. It allows each iteration in a foreach-loop be generated only when needed. In this way it can improve performance.
Yield is not a behavior of CLR but a C# language feature.
This keyword is used to return items from a loop within a method and retain the state of the method through multiple calls. The call maintains the state and you don’t have to worry about doing it yourself!

Try it once!

To reach me, You can follow me on twitter @MSGuyTweets or find me on Facebook at Facebook.com/MysoreGuy

Cross Browser Text Rotation just with CSS Transforms & HTML

2012-07-03T01:33:00.001-07:00

I keep getting frequent emails and questions regarding CSS and JavaScript hacks. This time, one of the developer wanted to know how to rotate text in CSS. So, this post is all about rotating text with CSS & HTML. I have not used JavaScript for doing it and it is not necessary too.

The first rule to know! :
There is no single universal property in CSS to rotate text which works on all the versions of all the browsers.

So, it is obvious that we need to write CSS for all the browsers. Now, assuming that the output we are expecting is something like below,

the very first thing we need to know is the angle at which we need to rotate the text. It is very easy if you know basic math. For example, The above text is rotated to 300 Degrees. Let us first write some code to see how we can rotate text.

Now, the CSS Class for rotation would be

.box_rotate
  {
    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE8 */
    M11=0.50000000, M12=0.86602540, M21=-0.86602540, M22=0.50000000, sizingMethod='auto expand');
   }

Not simple?

OK. Let me make it clear. There are 4 parameters in above code. M11, M12, M21 & M22. They mean nothing but the angle of rotation.

Assuming THETA is the angle of Rotation,

M11 = COS THETA,

M12 = -SIN THETA,

M21 = SIN THETA,

M22 = COS THETA

So, if you want to rotate text to 300 degrees,

M11 = COS 300,

M12 = -SIN 300,

M21 = SIN 300,

M22 = COS 300,

So, use a Scientific Calculator to calculate the above and the output will be

M11=0.50000000

M12=0.86602540

M21=-0.86602540

M22=0.50000000

And exactly, this is what i have specified in the above CSS class!
Now simple? Yes it is.

Hold on. You see a weird comment which says /* IE6–IE8 */ in the above code. It exactly means what it says. It is for Older IE browsers. Let us go a step further to make it compliant with modern browsers. So, the modified CSS becomes

.box_rotate
        {
            -moz-transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            -o-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE8 */
                     M11=0.50000000, M12=0.86602540, M21=-0.86602540, M22=0.50000000, sizingMethod='auto expand');
        }

The good thing is that, Mozilla and Webkit based browsers already have support and you can specify the rotation angle as a parameter directly. However, even older IE browsers has some support but you need to mention something like 1,2,3,4 to rotate and you cannot provide rotation angle of your choice like 110, 221 etc. So, the above code is good enuf and rotation works best with Matrix values even for older IE browsers.

Well, I did not try this with IE10 yet but hope it works as I have provided the -ms-transform for IE 9 +. And if you don't want to do COS SIN Bla bla bla then here is a link which can give you the calculations if you just enter the rotation angle in degrees.

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

You can also specify an optional writing mode as a css property to indicate how text is written, for example

.box_rotate
        {
            -moz-transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            -o-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE8 */
                     M11=0.50000000, M12=0.86602540, M21=-0.86602540, M22=0.50000000, sizingMethod='auto expand');
    writing-mode: tb-rl; 
        }

The below list can make you to understand the writing mode and flow.

    lr-tb – This is the default value, left to right, top to bottom
    rl-tb – This flows the text from right to left, top to bottom
    tb-rl – Flows the text vertically from top to bottom, right to left
    bt-rl – bottom to top, right to left
    tb-lr – This and the followings value are only available in IE8+ using -ms-writing-mode. Text flows top to bottom, left to right
    bt-lr – Bottom to top, left to right
    lr-bt – Left to right, bottom to top
    rl-bt – Right to left, bottom to top

Try out the above writing modes and Have fun. And Here is the complete listing

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .box_rotate
        {
            -moz-transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            -o-transform: rotate(300deg);
            -ms-transform: rotate(300deg); /*Internet Explorer 9 + */
            filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE8 */
                     M11=0.50000000, M12=0.86602540, M21=-0.86602540, M22=0.50000000, sizingMethod='auto expand');
        }
    </style>
</head>
<body>
    <br />
    <table>
        <tr>
            <td>
                <div class="box_rotate">
                    Rotated 1</div>
            </td>
            <td>
                <div class="box_rotate">
                    Rotated 2</div>
            </td>
            <td>
                <div class="box_rotate">
                    Rotated 3</div>
            </td>
        </tr>
    </table>
</body>
</html>

More details can be found at http://www.css3files.com/transform/

Details related to Browser support for CSS Transforms: http://caniuse.com/transforms2d

Remember, CSS Transforms are not just meant for rotating the text. They can do a lot more like 2D and 3D !
The above code can be used even for images!

Lets do programming together. You can follow me on twitter @MSGuyTweets or find me on Facebook at Facebook.com/MysoreGuy

C# and Sun One Directory Server : Retrieve Domain Group Members

2012-06-21T01:37:00.000-07:00

If you have already worked on the Sun One Directory Server product, you might already know that SunONE Directory Server is a robust, scalable server designed to manage an enterprise-wide directory of users and resources. This is something like the Active Directory Microsoft has built for windows.

When working with the Sun One directory using C# & the .Net 2.0/Above, most of the developers find it difficult to get the Members of a group within a domain programmatically. This post should help few of those developers to resolve the problem. You can easily query the directory to get all the members of a group using c#.

Now, how do we get the members?
No more hitting the bush. Lets write code. Create a console/web/windows application using Visual Studio. In my case, have used a console application for making the things quick.

First, create a entity which can hold the details of a group user like Id, Full Name of the user, email id of user, path where he resides. Create a class CLDAPUser with the below code.

class CLDAPUser
    {
        private string m_sUId = string.Empty;
        private string m_sFullName = string.Empty;
        private string m_sEmailId = string.Empty;
        private string m_sPath = string.Empty;

        public string Uid
        {
            get
            { return m_sUId; }
            set
            { m_sUId = value;}
        }

        public string FullName
        {
            get
            {return m_sFullName;}
            set
            {m_sFullName = value;}
        }

        public string EmailId
        {
            get
            {return m_sEmailId;}
            set
            {m_sEmailId = value;}
        }

        public string Path
        {
            get
            {return m_sPath;}
            set
            {m_sPath = value;}
        }
    }

Now, let us write the function to retrieve the Sun One Users of a Group. I have added comments inside which gives the explanation

//Include the below namespaces.
using System.Collections.Generic;
using System.DirectoryServices;

private static List<CLDAPUser> SunOne_GetGroupMembers(string i_sGroup, string i_sADsPath,  string i_sDomainName, string i_sPath)
       {
            string sFName = string.Empty;
            string sLName = string.Empty;
            string sFullName = string.Empty;
            string sMail = string.Empty;
            string sADsPath = string.Empty;
            string sPath = string.Empty;

            List<CLDAPUser> objLdapUserList = new List<CLDAPUser>();
            try
            {
                DirectoryEntry oRoot = new DirectoryEntry();
                oRoot.Path = i_sADsPath;
                oRoot.AuthenticationType = AuthenticationTypes.ServerBind;
                oRoot.Username = m_sUserName;
                oRoot.Password = m_sPassword;

                sADsPath = i_sADsPath.Substring(0, i_sADsPath.LastIndexOfAny("/".ToCharArray()));
                DirectorySearcher oDSSearcher = new DirectorySearcher(oRoot);

                //The very important step. CN = Group Name & uniqueMember=* is a filter which returns all members from Sun One
                oDSSearcher.Filter = "(&(CN=" + i_sGroup + ")(uniqueMember=*))";

                SearchResultCollection oSRC = oDSSearcher.FindAll();
                foreach (SearchResult oSResult in oSRC)
                {
                    ResultPropertyCollection resultPropColl = oSResult.Properties;

                    //Loop to iterate for each sun one user of the group and get the details further
                    foreach (object oMemberColl in resultPropColl["uniqueMember"])
                    {
                        DirectoryEntry ogpMemberEntry = new DirectoryEntry(sADsPath + "/" + oMemberColl.ToString());
                        ogpMemberEntry.AuthenticationType = AuthenticationTypes.ServerBind;
                        ogpMemberEntry.Username = m_sUserName;
                        ogpMemberEntry.Password = m_sPassword;

                        System.DirectoryServices.PropertyCollection oUserProps = ogpMemberEntry.Properties;
                        string sID = oUserProps["uid"].Value.ToString();

                        if (sID != "")
                        {
                            try
                            {
                                //givenname is the property name to get the First Name of Sun One User
                                sFName = oUserProps["givenname"].Value.ToString();
                            }
                            catch (Exception ex) { /*Do Some Error Logging*/ sFName = "N/A"; }

                            try
                            {
                                //sn is the property name to get the Last Name of Sun One User
                                sLName = oUserProps["sn"].Value.ToString();

                            }
                            catch (Exception ex) { /*Do Some Error Logging*/ sLName = "N/A"; }

                            sFullName = sFName + " " + sLName;

                            try
                            {
                                //mail is the property name to get the email address of Sun One User
                                sMail = oUserProps["mail"].Value.ToString();
                            }
                            catch (Exception ex) { /*Do Some Error Logging*/ sMail = "N/A"; }

                            try
                            {
                                sPath = oMemberColl.ToString();
                            }
                            catch (Exception ex) { /*Do Some Error Logging*/ sPath = "N/A"; }

                           
                            //Store the details
                            CLDAPUser objLdapUser = new CLDAPUser();
                            objLdapUser.Uid = sID;
                            objLdapUser.FullName = sFullName;
                            objLdapUser.EmailId = sMail;
                            objLdapUser.Path = sPath;

                            //Add this user detail to the list
                            objLdapUserList.Add(objLdapUser);

                        }
                    }
                }
            }
            catch (Exception ex) { /*Do Some Error Logging*/}

            //The List contains all the users/members of the group!
            return objLdapUserList;
        }

Now, we need to call the above function with required parameters. Here we go. Write it in Main() of your console application

    //This is the Group for which we need to Retrieve the Users from Sun One
     string sGroup = "Accounting Managers";

     //Port the Sun One Server is Listening at
     int iPort = 30291;

      //Server 
      string sServername = "192.168.37.202";

      //Domain String 
      string sDomainstr = "dc=yoursun1,dc=local";

      //Create LDAP Path based on above credentials
      string sAdsPath = "LDAP://" + sServername + ":" + iPort + "/" + sDomainstr;

      //I dont have a user name password required to connect to Sun One so let me make it null.
       m_sUserName = null;
       m_sPassword = null;

       //Create a list to Hold Sun One Users
       List<CLDAPUser> objLdapUserList = new List<CLDAPUser>();
         
       //Finally, Get the Sun One users for the Group by calling the function
       objLdapUserList = SunOne_GetGroupMembers(sGroup, sAdsPath,  sDomainstr, sDomainstr);

And thats it!!, pass any Group name and you get the users within it. Easy. Isnt it?

Lets do programming together. You can follow me on twitter @MSGuyTweets or find me on Facebook at Facebook.com/MysoreGuy

WCF: Operation Overloading inside Service Contracts using C#

2012-05-31T04:50:00.002-07:00

In this post, I will explain a simple way to do operation overloading for Service Contracts in a WCF Service.

If you create WCF Services, you might already know about ServiceContract attribute. It just describes the operations that a client can perform over a service and if you are from Object oriented programming background, you know that programming languages support Method Overloading. It is as simple as having two or more methods with the same name but with different parameters in same scope. The advantage is that we can perform same operations on different datatypes without having the need to use separate names for each version.

public Interface ICalc
    {
      Int Subtract (int a, int b);
      double Subtract (double a, double b);
    }

Well the above code is fine with C++ for overloading. if you try to do the same thing with WCF like below,

[ServiceContract]
    public interface ICalc
    {
        [OperationContract]
        int Subtract(int x, int y);

        [OperationContract]
        double Subtract(double x, double y);
      
    }

public class Service1 : ICalc
    {
        public int Subtract(int x, int y)
        {
            return x - y;
        }

        public double Subtract(double x, double y)
        {
            return x - y;
        }
    }

it compiles but you would end up seeing a InvalidOperationException at the service host load time!

“Cannot have two operations in the same contract with the same name, methods Subtract and Subtract in type xyz violate this rule. You can change the name of one of the operations by changing the method name or by using the Name property of OperationContractAttribute.”

The reason is simple; Operations are only identified by names and messages in this particular world.

Now, to get rid of this problem, just manually enable the operation overloading. Simple. Use the Name property of the OperationContract Attribute to alias the operation.

[AttributeUsage(AttributeTargets.Method)]
    Public sealed class OperationContractAttribute : Attribute
    {
      Public string Name
        {get;set;}
    }

However, you need to alias both at Server and the Client Side. Here is how you give a unique name at server side

[ServiceContract]
    public interface ICalc
    {
        [OperationContract(Name = "SubInt")]
        int Subtract(int x, int y);

        [OperationContract(Name="SubDouble")]
        double Subtract(double x, double y);
    }

Now, When the client generates the proxy the operations will have the alias names

[ServiceContract]
    public interface ICalc
    {
        [OperationContract]
        int SubInt(int x, int y);

        [OperationContract]
        double SubDouble(double x, double y);
       
    }

Now, the client can use the generated proxy as above. But this is not so cool! The overloading has not been done to use with two different name by the client.

To make it even better, rename the methods on the imported contract and the proxy to overloaded names. The proxy class should call on the internal proxy using overloaded methods and use the Name property and imported contract on client side to complete it. Now we have overloading at client side.

[ServiceContract]
     public Interface ICalc
     {
        [OperationContract(Name = "SubInt")]
        int Subtract(int x, int y);

        [OperationContract(Name="SubDouble")]
        double Subtract(double x, double y);
     }

     class CalcClient: Servicereferce1.CalcClient
     {
        public int Subtract (int a, int b)
        {
          return Channel.SubInt(a,b);
        }

        public double Subtract (double a, double b)
        {
          return Channel.SubDouble(a,b);
        }
     }

Now it is easy to use the overloaded operations without any confusions!

CalcClient pxy = new CalcClient();
    int output1=pxy.Subtract(3,2);
    double output2= pxy.Subtract(3.0, 2.0);
    pxy.Close();

Thats it.Very simple and straight. Happy coding :)

Lets do programming together. You can follow me on twitter @MSGuyTweets or find me on Facebook at Facebook.com/MysoreGuy

A cool list of Tech News Websites and the Blogs I follow

2012-05-14T03:11:00.001-07:00

For many techies who asked me where to get good tech news everyday, here is my answer. "This article is all about the list of websites and blogs you must follow to keep yourself updated on the latest happenings in technology".

Usually, the websites provide the latest happenings in the form of news content and the blogs help you to learn/understand a specific technology or a topic.

Below is a list of around 20 good websites I visit for technology news. (Covers news on Social Media, Inventions, Happenings, Announcements, Hacks and General). Make a habit of opening few of them at least once a day and read the headlines at least. I have not categorized as mostly all are worth reading and mostly talk everything in common.

As I work on the Web & Microsoft Technologies (In the .Net Stack), I keep an eye only on blogs which talks about my interests. Some of them are from well-known great authors and some from my friends who are experts in a technology. I know there are 100’s of great blogs. I have listed only the ones I follow. Please post few more links if you think they are good to go in the list below. I shall add them with a big thanks to you :)

http://www.hanselman.com/ (Microsoft Technologies , General Tech & Tools)
http://weblogs.asp.net/scottgu/ (Microsoft Technologies like ASP.Net, IIS, Silverlight & General)
http://odetocode.com/Blogs/scott/ (.Net & Client side)
www.4guysfromrolla.com/blogs/aspnet.aspx (ASP.net)
http://dotnetkicks.com/default.aspx (.Net)
http://weblogs.asp.net/shijuvarghese/default.aspx (Azure & Cloud)
http://amazedsaint.com/ (C#, Silverlight & .Net)
http://www.dotnet247.com (.Net)
http://dotnetcurry.com
http://windowsteamblog.com/windows_phone/b/wpdev/ (Windows Phone)

Free Ebook : 25 Tips for Making your website Usable

2012-04-24T03:32:00.000-07:00

Usability factors play an important role in a website design process. Keeping users engaged on your website and allowing them to get the most from your pages can be challenging. I have written a small guide containing 25 tips which can help your website to become more usable and friendly.

You can download the ebook from the below link.

Free ebook - 25 tips for making your website usable

Responsive Web Design & Frameworks : Kick Start your brain

2012-04-08T06:10:00.002-07:00

If you are still designing/developing websites which just works on PC's & Laptops, it's time to upgrade yourself. Remove that old brain. Wash it and replace it back with a new battery called "sense".

Do you think your users only use desktops to browse your webpages?

No. Not at all. People use mobile phones, small notebooks, tablet devices such as iPad or even Playbooks to access the web & apps you develop.

If you are still busy creating the traditional fixed width webpages, the output of them on the devices would be cluttered pages, unwanted scroll-bars, missing Ratio & Proportions in the Size of images & text would be causing a big imbalance and thus creating frustration among the users. Take some time. Just browse your webpage on a Mobile phone and see how it looks.

Now, if you are really serious about designing and developing web pages that are usable across devices and platforms, start learning the art of Responsive Design.

Responsive design is all about the adaptive design principles which helps your web pages adjust their size to fit in all the display resolutions and the devices. Flexible images & content are the keys for a responsive design. First, open these webpages and resize your browser window back and forth & observe what happens when you do that.

http://colly.com/

http://seesparkbox.com/

http://www.bostonglobe.com/

http://staffanstorp.se/

http://www.movembermike.com/

Did you observe that, even the images change their size based on your screen size, there is no clipping of text, images, cluttered blocks of text or unnecessary scrollbars that make you feel bad? Instead it had a mechanism for folding the columns as and when you reduce the screen size, had elastic gutters to make your pages expandable and to look simple and readable even on different resolutions.

And Now. try doing the same for some other webpages which doesn’t have the responsive design thinking in them. You feel shame on what you have done really. Common Sense & A good framework are two important things which can make your webpages responsive. However, when you want to know the basics, two things you need to be aware of are CSS3 Media Queries and a CSS Grid System.

OK. Now, if you argue that you really don't have time to learn complicated HTML, CSS and all. Just learn and use any of the frameworks mentioned below.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Website : http://getskeleton.com/

Demo : http://getskeleton.com/#grid

BluCss

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you're working on your next project, you don't have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.

Website : http://designlunatic.com/projects/blucss/

Demo : http://designlunatic.com/projects/blucss/demo.html

Adapt.js

Adapt.js is a lightweight (848 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Website & Demo : http://adapt.960.gs/

Less Framework 4

Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Website & Demo : http://lessframework.com/

Twitter Bootstrap (Yes, this is from the twitter development team)

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

Website & demo :http://twitter.github.com/bootstrap/

Among all the above frameworks, I personally like twitter bootstrap. Because it can be used by people with all skill levels, Built for and by nerds, It has a 12-column grid, Cross-everything and the very important thing is that it is made in twitter! and is growing. Here are some great examples of pages done using the Twitter Bootstrap http://twitter.github.com/bootstrap/examples.html

Twitter bootstrap offers three kind of free templates for everyone to download and start using that as the starting point for creating a responsive webpage.

If you have some time, you can look into the nUit, Tiny Fluid Grid, Respond & Zurb Foundation frameworks for responsive design.

You can follow me on twitter @msguytweets and Subsribe to the feeds http://feeds.feedburner.com/MsGuyblog . Happy Reading :)

TechEdIn 2012 : My Experience - Part 2

2012-03-27T03:33:00.005-07:00

What a wonderful Keynote it was from Sanket Akerkar (Managing Director, Microsoft India). Every Word he delivered reflected & demonstrated his energy and passion towards his work along with his vast experience. Soon after his note, Bernardo Caldas, General Manager for Windows & Live (Emerging Markets) continued to pour energy adding to Sanket's words. I could see his eyes sparkling and feel his sense of responsibility.

The Groovy background music was kicking at my chest just to allow myself to feel proud of my presence. After the Keynote, pushed the recording switch off on my handy cam, just came out, took a snap with the SQL Guru @pinaldave and there was a surprise waiting for everyone. Guess what. There was hardly any space even for a mosquito to get inside the "T-SQL Rediscovered with SQL Server 2012” session. House Full!. #techedIn was trending on twitter (India) already.

Without any option, I attended "The Windows 8 platform for Metro style apps from Kraig Brockschmidt". It was gr8 session, ah, nothing to regret. After that, one more metro design principles session from Krishnan Rengasamy (I believe he is a Senior Program Manager ).

Time for lunch. Had each and every veg recipe I found there. Loved the desserts very much. The very important thing i noted is that, the buffet had a good spread and also it was accessible to thousands of participants all together at a time.

Met Lohith (@Kashyapa) and took a snap with him along with Mr. Pavanaja and Ganesh.

I did not want to miss the Kinect session from Abhijit Jana so ran quickly to Magadh Hall. Met him, introduced myself, spoke to him for few minutes, and took a Snap. Hmm... He was tensed!! Really. But once he started presenting "Windows Azure meets Kinect, Windows Phone and Windows 8 Metro ", he was amazing. He almost impressed everyone with his demos.

We knew that SQL Track would be running full so walked away from the previous session 10 minutes early to the "SQL Server Misconceptions and Resolution – A Practical Perspective" from Pinal Dave & Vinod Kumar M. I had no place to Sit. One hour completely on my feet. Was sweating even with the Air conditioning turned on. But, the stunning presentation from both the guys kept me entertaining with loads of knowledge. Almost everyone got stumped! Yes, that is what I call an interactive session.

After a tea break, went to "Building Metro style apps with XAML: What .NET developers need to know" session. It was not too great but was good just because I knew many things he mentioned. And not to forget, others enjoyed it.

The Demo Extravaganza in Kalinga hall was the highlight of the day. Collected 2 t-shirts (thx to Nokia & Microsoft) & Returned back to home with great satisfaction.

(to be continued)