Blazor.NET a new way to think web application

Recently, in March 2018 Microsoft launched the Alpha version of a new way of thinking to develop the web application which BLAZOR.NET.

Nowadays if you see yourself as a web application developer then you are heavily surrounded with JavaScript, for example, Angular JS, VU.JS etc.

In the nutshell, if you want to survive in the Web development field you have to have learned any of the above-mentioned JavaScript frameworks moreover need to learn JavaScript as well, which is good although.

But now Microsoft brings a new framework which Blazor.NET which I can say is the new way of thinking of web application development and without less dependency on JavaScript.

So, If you want to create any Single Page Application for which you to heavily dependent on the JavaScript framework like AngularJS earlier which you can avoid and create the sample kind of SPA application using Blazor.NET with your favorite C# language. Isn’t it a big surprise?

This New Blazor.NET framework helps .NET (C#) developers to create the web application with the help of web assembly without depending on Javascript.

We can use the same Razor syntax and C# language to create a web application.

Although it is an experimental project, surely it will be used with full swing soon.

We can start Blazor.NET project by the following step

We can start Blazor.NET project by following step

1) Install the latest preview of Visual studio 2017 (15.7)

2) Install .NET Core 2.1 preview

3) Install Blazor.NET extension

Let’s install all the above 3 required component and in the next blog, I will show step by step tutorial to create a blazor.NET.

Be Ready ASP.NET Core 2.0 & Entity Framework Core 2.0 in the market

Dear All,

World is changing so fast. I don’t remember who the great guy said that “Nothing is permanent but the change”.

I think Microsoft is adopting same statement and launched 2 new updates for us.

  1. ASP.NET core 2.0
  2. Entity Framework 2.0

You can find more detail by following link

  1. https://blogs.msdn.microsoft.com/dotnet/2017/08/14/announcing-net-core-2-0/
  2. https://blogs.msdn.microsoft.com/dotnet/2017/08/14/announcing-entity-framework-core-2-0/

So, learn & share, help each other. Enjoy.

Happy Independence Day to all of you .

RJ

What your face says let’s find out using Microsoft Emotion service

We always hear your face say everything. Your emotions on your face says everything. Microsoft’s did a great job to identify these expressions,these emotions  with Microsoft Cognitive Service.

Microsoft Cognitive service is an umbrella which has various APIs to help us intelligently.

Emotion API is one of them to determine the the expression or emotion in a image.

With the help of this Emotion service we can easily identify the emotion like happy, sad, fear,surprise etc.  The best part of this API is that it detect all the faces in an image and provides the emotion collection object. Another good thing about this API is it is easy to use you just need to pass the image and rest other thing is handle by API itself.

Now, I am very sure you are curious to know more and want to implement it at your end.  I am trying to share basic steps how you can use this in your project. just wanted to share that I am using MVC C# in my example .

In my example, I tried to upload  an image and passing that image to API and according to API result showing the result. so Let’s begin with step by step

Step1 :- First & for most important step is register for this API and grab your subscription key.  To get this  you have to register on https://www.microsoft.com/cognitive-services/

Once you registered you can get the subscription key from my account. As you notice in the snap below in free trial we have 30,000 transaction per month & 20 per minutes API calling facility.

Indiandotnet_Congintive_Service_Key

Once you got the key the next step is implement it in your project.

Step 2:- You can implement this via API URL or Nuget package manager in visual studio.  Just to update you that Microsoft’s Oxford team is working on this so the namespace name is Project oxford.

Indiandotnet_Nuget_Package_Oxford

In my project , I successfully installed nuget package manager

Indiandotnet_Installed_Through_nuget_Package_Manager

Step 3:- Once the Emotion package installed in your project simply create the object of Service API and call.

Pass the image steam or required parameters as per the documentation. As you can see in below image, I have created a new object of EmotionServiceClient & passing subscription parameter to avail it.

Once my object is Created, I am calling RecognizeAsync method in and passing the uploaded file stream.  This Recognize Asynch  method.

The best part is it return Emotion’s array by determining the number of faces. but in current, code I am just interested in determining the emotion of single face. So, I did code accordingly.

Indiandotnet_Calling_emotion_API

Step 4:-  To capture all the emotion’s score I have created a EmotionScore class as you can see below.

Indiandotnet_Different_Emotion_Capture

Step 5:- Once Everything setup just run the page and upload image.when you upload the image you will get emotion collection to play. See below snap in which I tried the same.

Indiandotnet_Sprised_Aayush

I tried with several expression (Thanks to my little champ“Aayush” to help me out with his cute expressions).

Indiandotnet_Different_Expression

As mentioned above you can use API URL as well to call it.

I hope you may like this new face expression API. For more information you can visit following sites

https://www.microsoft.com/cognitive-services/

https://www.microsoft.com/cognitive-services/en-us/emotion-api

Different samples https://www.microsoft.com/cognitive-services/en-us/SDK-Sample

Please, feel free to share your inputs.

Happy coding !!

RJ

Surprise ! Visual Studio 2017

Isn’t it surprising ? Microsoft announced Visual studio 2017 RC on 16-Nov-2016.

You can get download the RC version from following link

Download Link

Now , your question will be What’s new in Visual studio 2017 ?

To know more about Visual Studio 2017 check the release note of Visual studio 2017 with following link

Release note Link

I am pretty much sure you will enjoy this latest release.

Please, share your thought for same.

RJ

The Dummies’ Guide to How to solve Problems with Extension Method

I am pretty much sure that, You have used Extension method in your program. Did you think to create your custom Extension method ?

If not then this article help you to create your own Extension method step by step.

Before jumping to direct practice let’s understand first what is extension method. So, an Extension method is created to simplify the code. It is a static method which represent as instance method. It accepts “this” keyword as a parameter.

If you see below example image you are not going to surprise as you have used this type of method.

extension_Method_1-1

Now, let me tell you more about the Extension method. As you now aware it is a static method & it accept “this” as a parameter so just need to add a “.” dot symbol with variable and all the existing method will be appear.

The question come to our mind how to create our own Extension method. So, it is simple and easy. We need to create a static class first and then that static class we can create our own Extension method.

extension_method2-1

Once you added a class in your solution specify the class as a static class and a static method in the class. In below example I am using static method with name  “MyStringCharacterLength”  if you see the below snap you will find in the parameter we are using this which is must for an extension method. We are not doing any fancy with this method it is a simple logic of calculating the length of the string.

Extension_Method_3

Now once the extension method is created we can use this method using by a “.” dot symbol. Isn’t it easy let me show you the code.

extension_Method_4

When we run this code it will return the length of the string which provided as a input.

I hope a basic now you have a basic understanding of extension method. You can create your various method to use this and reduce your efforts in cases where you have to write similar logic again and again.

I recommend below site from where you can download existing Extension method and  use it.

http://extensionmethod.net/

I hope you have a clear view of extension method now.

Enjoy!!

Abstract Classes & Interfaces

Abstract class or Interface : the most confusing decision in the programming world when to go with which. Let us understand each one in detail and try to answer this question.

OK so let’s discuss about them one by one.

Abstract class:
An abstract class, just like any other class is a collection of fields, properties and methods. It has got behavior of its own. The only difference is that an abstract class cannot be instantiated; and of course the use of the keyword “abstract” in the class declaration.
It can have methods that contain a method body or even ones that contain only declaration (abstract methods).

AbstractClassBasicDefinition

Now, coming over to some points we all get confused about. The “Myths and Truths” of the abstract class –

Myth : Abstract class must contain at least one abstract method.
Truth : Abstract classes need not have any abstract methods. But a class containing even one abstract method must be declared abstract.
Now the question arises what is the use of such a class? Such an abstract class would just prevent a user from instantiating the given abstract class, while providing a default implementation for all child classes.

AbstractClassWithNoAbstractMethods

Myth : Abstract class cannot be instantiated and hence cannot contain a constructor..
Truth : Abstract classes cannot be instantiated yet it can contain a constructor.
Once again, the question arises what is the use of having constructor if it cannot be instantiated?
This is so because abstract classes are based upon the concept of inheritance and in C#, whenever an object of a derived class is instantiated, prior to calling the constructor of the child class, the constructor of super-class is called and this is where a constructor of abstract class comes in use.

ConstructorInAbstractClass
On instantiating the object of the derived class (shown in the above figure) , the output is :

ObjectInstantitationOutput

So this was all about abstract classes. We would be discussing interfaces, their differences and which to use when in the following posts………..

Enjoy with new release of Visual Studio and SQL SERVER :)

Dear All,

Although, I am bit late to share this information and might be possible most of you people aware of this.Recently Microsoft released Visual Studio 2015

and SQL SERVER 2016 CTP. Not needed to say that there are various awesome features in both build.

You can download latest Visual Studio 2015 from below link

https://www.visualstudio.com/downloads/download-visual-studio-vs

and SQL SERVER 2016 CTP from below link

https://www.microsoft.com/en-us/evalcenter/evaluate-sql-server-2016 

In future post you will be find tips & tricks related to SQL SERVER 2016 & Visual Studio 2015.

Enjoy Learning !!!

Thanks

RJ

LESS but it is more–CSS Preprocessor with ASP.NET

 

Now a days a “ CSS  pre processor “ is a very famous buzz word.  Although I am a web developer but still I am not always interested in writing CSS  don’t know why.

When I heard about css pre processor then I was curious to know what it exact about.

So let me share my thought here about CSS Preprocessor.

So a  CSS pre processor is a way to extend the CSS language and variables, functions and programming  stuff.

As a developer you will be more happy to have pre processor because it allows you to write code and also reduce the amount of css up to some extent.

There are many CSS  pre processor are exists in the market  like LESS, SASS,

Stylus,clay and many more.

Now Let me share here how to use LESS.css in your ASP.NET code.

Step 1:-  Add  Nuget package Less.js

Less_Nuget_Package

once you added this package in your script folder you will get 2 new java script file with prefix less as shown below in figure

Less_Script

Step 2:- Now right click on content folder and add a new item which is LESS style sheet. This file will have extension .less

 

Less

Step 3:-  Now you can write your LESS related code as shown in below snap

lesscss

If you see above snap I declared  variable like @back-color , @font-color etc

and used in body.

Step 4: Now  add a web page and write following lines to enable LESS css.

<link href="Content/MyLessCss.less" rel="stylesheet/less" />
   <script src="Scripts/less-1.5.1.min.js"></script>

Test_Less_Page

step 5:- Now in web.config we need to add following mime type

Webconfig_less

Or you can add this from IIS.

Step 6: Now we are good to go and can run  it

sample_Less__page

So we get the color according to variable which we declared.

It means we can play with the variables and can write the less code in programming way.

I hope this post will give a step to go further and I am sure you will deep dive in CSS pre processor soon.

Enjoy !!!

RJ !!

How easy to reduce efforts in retesting a asp.net web application?

 

Most of the time when you write code for a web application you need to test it again and again. You have to run a whole flow of positive or negative test cases to check whether your application is working or not.

Now suppose your application have 20 pages and you need to traverse each individual page and may be perform some operation and on each change of your development you need to perform same thing.

sometimes, this thing will irritate you and you will skip testing which may be harmful because most of the time it happens when you skipped something Smile you took a deep breath  and at that moment your application crashed Sad smile.

So , as a responsible developer we do not have to skip any test scenario but next question is how to reduce this effort which you feel boring sometime.

I can say we can reduce this effort by a installing a simple  Firefox add-in which is absolutely free. The add in “Selenium add in”

you can download it from https://addons.mozilla.org/en-US/firefox/addon/selenium-expert-selenium-ide/

once you have installed this you will find the selenium icon near by search bar as shown below

selenium_icon

when you click this icon you will get a selenium interface as shown below

selenium_interface

The basic concept of this tool is what ever you will run in browser it has capability of recording those steps so it is just play button and pause button game, no rocket science. You can easily run and use this.

I am sure it will reduce your testing effort and when when selenium ide will play your test cases you can take a deep breath and enjoy your coffee and snacks.

I hope this tip may be helpful to you somewhere.

Happy Holidays.

Regards,

RJ