IDE

  • Getting Started with Angular Development Using Cloud9 Online IDE

    Cloud 9 is an online IDE hosted in the cloud and runs inside the browser. It's built on top of a Linux container and offers most of the features found in a standalone IDE. To start using it, one needs to create an account at Cloud 9 website. Once you created the account, you will be able to create workspaces as per your development needs. Given below is the screenshot of the IDE which I created for web development.

    For using Cloud9 or c9 in short for all your development needs, you will need to create a workspace based on the Blank template as shown below

     


  • Generate C# Classes from a JSON String Easily Using Visual Studio

    As developers, we are often faced with certain tasks that are very repetitive in nature, which can also be time consuming to solve it. For example, whenever we need to reserialize a complex JSON string to classes we may need to write a lot of code. Until recently, whenever I needed to do such task I invariably create the classes manually and if it's a complex string, I was spending way too much time on that.

    When the instances like these began to happen every now and then, I decided to search for online options which can spit out classes from a JSON string. After some googling, I found out this site json2csharp.com which can do what I was looking for. You only need to paste the JSON in the input box and click on the Generate button to get the classes in C#.


  • Visual Studio 2017 - Introducing the New Installation Experience

    As many of you have already are aware that Microsoft has released a Release Candidate version of the latest incarnation of Visual Studio during the Connect() event held at New York City in November. Visual Studio is one of the most widely used IDE in the world and the latest avatar comes with lot of new features and performance improvements under the hood. The most notable among these is the all new installation experience which considerably reduces the installation time as well as eradicates a lot of pain points that an user faced during the installation of the earlier versions of the software.

    Preparing Installation

    Visual Studio 2017 RC is free for all and can be downloaded from the Visual Studio site here and also read about the minimum system requirements is available at https://www.visualstudio.com/en-us/productinfo/vs2017-system-requirements-vs before you start the installation. You will get a nice little installer utility from the download link and when you run vs_enterprise.exe, it will show the new launch screen which will tell you to accept the license before proceeding to the installation.

    Selecting Components

    Visual Studio is used by a wide variety of users for developing different types of application and majority of them doesn't need to install every garbage that comes along with the installation package. So deciding what to choose for your need was confusing and particularly about the dependencies that need to selected for a hassle free experience.

    In Visual Studio 2017, the concept of Workloads are introduced to solve this problem and now there are separate workloads for .NET desktop development, web development, UWP development etc. So if you are a web developer and selecting the Web Development workload will ensure that Visual Studio will install all the necessary tooling and dependencies that are needed for developing web applications. 


  • Bundling & Minification in ASP.NET Core MVC Application

    Bundling is the process of concatnating a set of files into one single file and Minification is removing all the whitespaces and comments in the code, removing extra statements to make the file smaller in size. By doing bundling and minification in our application will reduced the request payloads as well as the number of requests to the server for downloading the assets such as CSS and JS files.

    .NET Framework had an in-built bundling and minification feature for sometime and since the advent of .NET Core they moved to use Grunt and Gulp for doing the same in both the RC versions. These tools primarily used JavaScript for operations such as file manipulation, automation, bundling and minification. Using these tools, we can also schedule tasks to run during a build or a publish event and is very useful in setting up a workflow for these opertions. The only downfall of these were we need to have some knowledge of programming in JavaScript and if you are not a fan of JavaScript then you will have some difficulties playing with it.

    So Mads Kristensen created an extension which automates these processes and the functionality can be achieved with no code. So when Microsoft released .NET Core 1.0 they integrated this into the ASP.NET Core Web project template and is now available for you out of the box, if you are using Visual Studio 2015 for your developement. Basically it supports

    • Bundling your assets into a single file
    • Minification of your assets
    • Create triggers for doing re-bundling automatically
    • Globbing patterns
    • MSBuild support

    Also the same is available as a NuGet package so that non Visual Studio users will also be able to use that in their projects. In this post, I am going to show how to do this a ASP.NET Core MVC project using Visual Studio Code and .NET CLI tools.

    Adding Reference & Configuring BundlerMinifier

    The first is to add the BundlerMinifier package in your json file as shown below

    tools": {
        "BundlerMinifier.Core": "2.0.238",
        "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
        "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
      },
    

    Now we need to add a configuration file in which we will specifiy the files that needs to be bundled and minified. The default name for the config file is bundleconfig.json, the advantage being that the tool will take it automatically by the bundle command. If we specify a different filename, then we need to set it explicitly while executing the command for bundling.

    As you can see from the above snippet, we can specify multiple files that needed to be bundled into a single file as input and when the bundling operation is completed the unified file will be named using the value set in the outputFileName property. To minify the files, just set the value as true for the enabled property in the minify element.


  • Logging into Console in ASP.NET Core MVC Application

    One of the important upgrades happened in .NET Core is the complete rewrite of the diagnostic logging pipeline which emits different events for logging errors. .NET Core now supports logging framework out of the box and also supports extensibility to make use of third party logging frameworks such as Log4Net, NLog etc. Logging can be implemented in quick time with a minimal amount of code in your application.

    Microsoft uses Microsoft.Extensions.Logging namespace for implement logging functionality and acts a wrapper for third party logging frameworks. This eradicates the need of writing our own logging framework to provide abstraction for third party frameworks such NLog, Log4Net etc. Also it has got inbuilt providers for supporting logging into Console, Event log, Trace Logging etc.

    Console logging in ASP.NET Core MVC application.

    As I said earlier logging has got inbuilt support provided by the ILogger class in .NET Core. For that, first we need to add a reference to the Microsoft.Extensions.Logging package in project.json file. Add the following entries under dependencies section in the json file for implementing providers for console and debug logging. 

    "Microsoft.Extensions.Logging": "1.0.0-rc2-final",
    "Microsoft.Extensions.Logging.Console": "1.0.0-rc2-final",
    "Microsoft.Extensions.Logging.Debug": "1.0.0-rc2-final",

  • Custom Error Pages in ASP.NET Core MVC Application Using StatusCodePages Middleware

    While developing a web application, one of the best practice every developer should follow is to set up a custom error page for the site. Showing that dreaded yellow page to the user during the occurance of an exception is highly unprofessional and is prone to security risks. In one of the earlier post in the blog, I have explained the use of StatusCodePages middleware and various approaches for implementing it in a ASP.NET Core web application.

    In this post, I am going to implement custom error handling in an ASP.NET Core MVC application using the StatusCodePages Middleware. I will use the UseStatusCodePagesWithReExecute method provided by the middleware for showing the error the page in the case of an error. So let's add the following line in the Configure method in the Startup.cs file as shown below

    app.UseStatusCodePagesWithReExecute("/Error");

    This method is telling the web server to execute the action method name Index in the ErrorController. Since we are using the ReExecute method the redirection will happen in the server itself thereby avoiding a round trip between the server and the client.

    Now, we need to create the controller and the action method in it. Create a file in the Controller folder, save it as ErrorController.cs and add the following lines in it


  • Using StatusCodePages middleware in ASP.NET Core Application

    In ASP.NET Web and MVC applications, we have a customErrors.Mode property in the web.config file to specify custom error pages for exceptions happening in the application.

    In an ASP.NET Core web application we can make use of the UseStatusPages middleware to return a custom error page or a error message to the output stream. The middleware can be used to return a custom error message or page when there is an invlid response code between 400 and 600. Normally, the 4xx error is used for client errors where as 5xx is used for server errors.

    To explain the various options available in the middleware, I am going to use a ASP.NET Core web application created using Visual Studio Code and .NET CLI tools to run the application. You can also do the same using Visual Studio IDE too.

    Let's create a empty MVC project and run the application using the dotnet run command. It will self host the application and exposes port# 5000 for accessing the site. Open the site in the default browser by typing in http://localhost:5000/ and if you try to access a page which doesn't exists in the project, the browser will show an empty page or a page with a message saying that Page not found. Given below is the screenshot of the page I got in Chrome. If you open up the developer tools by pressing F12, you can see that the response from the server has 404 as status code.


  • Visual Studio Tips & Tricks - Window Layouts

    Another neat little feature available in Visual Studio is the option to customize the window layouts. This comes in handy when you work on different machines and you want the same look and feel for the enviroment across all your devices and instances. 

    For this to work, first you need to log in with the Microsoft account while using Visual Studio, so that whatever changes you make for customizing the layout will get stored in the cloud and will be used to synchronize the layout across devices.

    Let's see how we can manage layouts using Visual Studio. I prefer to have least tabs open in the IDE and likes have the code editor uses most of the layout. So I have closed all the open tabs in the right side as well as in the bottom.

    Saving Layout

    Now we can save out layout from Window -> Save Window Layout.


  • Visual Studio Tips & Tricks - Quick Actions

    In the previous versions of Visual Studio we have refactoring options such Encapsulate Field, Extract Method etc in the context menu and the Resolve option for adding namespaces when you refer a method which are not imported etc. In VS 2015, these all are clubbed together and will appear in once place called Quick Actions. They also added new features like previewing and integreated search into it making it more productive. Also in statements wherever the quick actions are available, a Light Bulb will be shown in the left side very much like the feature in tools like Reshaper.

    To see this in action, let's call a new method which is not defined in the code. The light bulb will immediately appear along with the red squiggly once you complete the statement as shown below.

    You can click on the bulb to bring up the suggested action, which is to generate the method stub for PerformAction. If we click on the arrow button, you will get a preview of the content of the method that is going to be generated. This feature is newly added in Visual Studio 2015, earlier we had only the option to generated the method


  • Visual Studio Tips & Tricks - Performance Analysis

    In this post, I am going to introduce a new feature made it's debut in Visual Studio 2015, the diagnostic tools, which I will definitley help you to easily identify performance bottlenecks and issuees while developing apps using the most widely used IDE.

    One new feature you are going to easily notify is that whenever you debug code in Visual Studio 2015, it will show the time eapsed right next to it as shown in the image below. 

    Time Values while debbugging

    You can configure the type of information that needs to be shown from the options. You have the option to set either CPU clock ticks or Miliseconds. By default it's miliseconds. 

     

    Opening Diagnostic tools

    If you hover your mouse over the time value, it will show you a popup like the one below.


  • Visual Studio Tips & Tricks - Error List Window

    In this post, I am going to give you some tips for the Error List window is Visual Studio , which I hope will help you to increase the productivity while using the most widely used IDE.

    The error list will show the application error and warnings with code starting with "CSXXXX" where as the errors from code analysis will start with "CAXXX". Also you have the option to filter out error, warning, messages by clicking on the button in the top bar in the window. Those three buttons will act as toggle buttons and based on its state it will filter the list.

    Errors, Warnings and Messages

    Filtering Errors by Document


  • Creating ASP.NET Core Web App Using VS Code

    VS Code is a brand new cross-platform open source editor from Microsoft which supports a variety of languages. You can read more about it in following posts I have blogged earlier

    Installing Visual Studio Code in Windows 10

    What is Visual Studio Code

    In this post, I am going to show you to create ASP.NET app targeting ASP.NET Core framework. ASP.NET Core which was earlier known as ASP.NET 5 is built from the scratch, is very lightweight, more modular and cross platform. 

    Before we get started with this, there are some pre-requisites which needs to be setup properly for our sample to work.

    1. VS Code Editor
    2. Node.js 
    3. Gulp
    4. Git for Windows

    You can refer the following links for installing Node, Gulp and Git

    Installing node.js in Windows 10

    Getting Started with Gulp

    Installing Git Client in Windows 10.


  • Installing Visual Studio Code in Windows 10

    Visual Studio Code or VS Code is modern light weight editor from Microsoft for developing apps in a variety of languages. It's cross platform and can be run on Windows, Linux and Mac natively. Also it's free for all to use and the source is hosted publicly at GitHub.

    You can download the installer from code.visualstudio.com which is around 29 MB in size and will take around 115 MB in your disk when the installation is completed

    The full system requirements are here. Please make sure that you go through it before doing the installation on your machine.

    Let's begin the install by double clicking on installer

    Specify the location where VS Code needs to be installed. Will default the path in the drive where Windows is installed. If you want you change it to another location by typing in the box or using the browse button select the folder you want

    In this page , we will specify the caption for the text needs to be displayed in the Start menu. If you don't it to show up in the menu, tick the checkbox in the bottom


  • What is Visual Studio Code

    Visual Studio Code is new light weight free editor from Microsoft initially launched as a beta version around a year ago. Since then it has come by leaps and bounds and evolved into a truly cross-platform editor with loads of features.

    Since it's introduction more than 2 millions developers have installed the code and these days there are around 500,000 active users for the application. And in April 2016, Code came out of beta and version 1.0 was released worldwide. It's available for download from code.visualstudio.com and supports upto 9 langugages. As I mentioned earlier Visual Studio is cross-platform tool and native versions are available for Linux and Mac

    Visual Studio Code was initially targeted developers who were working on TypeScipt and Javascript. But when the product was made extensible and delivered to the community, they quickly created a lot of extentions that supports most of the languages and runtimes.VS Code is fully accesible, with full keyboard navigation, screen reading and accesible navigation for visually impared developers.