Wednesday, October 18, 2017

How to temporary fix Open Live Writer blog template adaption issue?


Introduction

Current version of Open Live Writer has issue with some blog services e.g. BlogEngine. When we configure blog then it does adapt the blog template.

It is related to issue on OpenLiveWriter adaption issue on github. Similarly, I faced this issue when first time I configure my blog in this tool. Below is the actual theme for my blog which has white background in the blog post.

clip_image002

When I select this newly added blog account in the Open Live Writer, I looks like this:

clip_image004

It has some blackish background and font color is also different than the actual blog view.

Solution

Currently, this has not fixed yet but we can revert the blog template to view the default view of the writer to write out blog post and view them property. Below are the steps to correct the problem until Open Live Writer is not able to adapt the blog templates correctly:

Press Windows + R key to open the Run dialog and open the Open Live Writer blog templates folder at location “%AppData%\OpenLiveWriter\blogtemplates”

clip_image005

Then Identity the folder for your blog if you have multiple blogs configured in Open Live Writer. In my case it has multiple folders for storing blog template.

clip_image007[1]

Now just delete the blog template folder and when you either reload or switch back to your blog then it will show blog in default view from Open Live Writer which much better than the previous one.

clip_image009

Conclusion

We learn that how to switch to the default view of Open Live writer, so that we can even write post on blog easily.

Tuesday, October 17, 2017

Introduction to Angular 4 and TypeScript- Setting Up the Development Environment

clip_image001
In this article, you are going to learn that how setup the development environment for Angular and TypeScript.

TABLE OF CONTENT

  • Introduction
    • What is Angular?
    • Why do we need Angular?
    • Architecture and Building Blocks of Angular Apps
  • => Setting Up the Development Environment
  • Your First Angular App
  • Structure of Angular Projects
  • Webpack
  • TypeScript Fundamentals
    • What is TypeScript?
    • Creating First TypeScript Program
    • Declaring Variables
    • Types
    • Type Assertions
    • Arrow Functions
    • Interfaces
    • Classes
    • Objects
    • Constructors
    • Access Modifiers
    • Access Modifiers in Constructor Parameters
    • Properties
    • Modules
  • Angular Fundamentals
    • Creating Components
    • Generating Components Using Angular CLI
    • Templates
    • Directives
    • Services
    • Dependency Injection
    • Generating Services Using Angular CLI
  • Exercise

Introduction

Before we start code with Angular, there are some prerequisites to install first. In this article we set up everything what we need to start work with Angular 4. Before we more further to learn Angular we need to make some decisions related to selection of programming language, Editor and setup our tools to get everything ready.

What Language to select for Angular?
There several languages we could use to build an Angular application. Either we can use JavaScript or TrypeScript.

JavaScript

The JavaScript language specification standard is officially called ECMAScript or ES. Most browsers don't yet support higher version ES 6 named ES 6. So, ES 6 code must first be translated to ES 5. Code developed with ES 6 must be compiled by a tool that converts that ES 5 syntax to comparable ES 5 syntax before the browser executes it. That way we as developers get the benefits of the new ES 6 productivity features and the browsers still get code they understand. Since Angular is a JavaScript library we could use any of the many compile to JavaScript languages to build our Angular application. But the most common language choices for Angular include the ES 5 version of JavaScript. ES 5 code runs in the browser today without translation so no compile step is required. If we want to take advantage of some of the new ES 6 features to improve productivity such as classes, the let statement and arrow syntax, we can write our Angular code using ES 6. We then translate our code to ES 5 before running it.

TypeScript

Another language is TypeScript. TypeScript is a superset of JavaScript and must be translated. One of the key benefits of TypeScript is its strong typing, meaning that everything has a data type. Because of this strong typing, TypeScript has great tooling including inline documentation, syntax checking, code navigation, and advanced refactoring’s so TypeScript helps us better reason about our code. The Angular team itself takes advantage of these benefits and uses TypeScript to build Angular 2. Most of the demo code in the Angular documentation at present also uses TypeScript. For these reasons, TypeScript is the language of choice for many Angular developers and we will also use this throughout entire tutorial.

TypeScript is an open source language that is a superset of JavaScript and compiles to plain JavaScript through translation. It is strongly typed so every variable, every function, and every function parameter can have a data type.

How does TypeScript determine the appropriate types when using JavaScript libraries that are not strongly typed? By using TypeScript type definition files. These files contain the definition of each type in a library. These files are named with the library name .d.ts. TypeScript implements the ES 6 class-based object orientation plus more. It implements classes, interfaces, and inheritance so if you have experience with an object-oriented programming language such as C#, C++, or Java, using TypeScript may feel very natural to you. We will learn TypeScript in detail later in this tutorial.

clip_image001[4]

Dart is another option. It is a non-JavaScript-based language for building Angular applications.
We've selected TypeScript as our Angular language.

Editor or IDE for Angular

Once we've picked a language, we select an editor or IDE that fully supports development in that language. Then we set up the development environment to get started with Angular. In these there are lots of editors and IDEs offer support for TypeScript and we can check the documentation of TypeScript Editor Support, but we only get the clever Intellisense as we type if we use a supported IDE. Initially, this was only Microsoft's Visual Studio.

Some of the support TypeScript out of the box and by including a plugin. Select any one of these supported Editors or whichever suits you best, but keep in mind that working with TypeScript will be much pleasant if you select an editor that understands TypeScript.

We are going to use either Visual Studio or Visual Studio Code throughout the tutorial. It support it much better than other IDEs or Editors because Visual Studio 2017 now has ability to debug the TypeScript code as like C# code.

Setting up Development Environment

Setting up development environment for Angular require to Install npm or Node Package Manager

Install npm or Node Package Manager

First thing you need is the latest version of the Node. Visit the Node.js website and download the latest version of the Node.

clip_image003[4]
It is runtime environment for executing JavaScript code outside the browser. Node provides some tools to build Angular projects.

npm or Node Package Manager is a command line utility that interacts with a repository of open source projects. Now Node Package Manager has become the package manager for JavaScript. Using npm, we can install libraries, packages, and applications along with their dependencies.

We'll need npm to install all the libraries for Angular. Then we help us to execute scripts to compile our code and launch our Angular application.

After installing Node, we can verify it by running command “node –version” on command prompt that it has been install successfully or not.

clip_image001[6]

With npm installed we are ready to install third party libraries e.g. Angular CLI for set up our Angular application and create our first Angular application.

clip_image003[6]

It is the command line tool to create new Angular projects or generate some boiler-plate code and creates deployable packages. Now again move back to the command prompt and write below command to install Angular CLI on the development machine:

npm install -g @angular/cli

clip_image005

To ensure that installation is successful, check it with below command:

ng –version

clip_image007

Conclusion

We have learnt how to setup the environment for Angular development and installation of Angular CLI. If we have installed tools required for development then we good go for creating our first Angular application.


Previous: Introduction Next: Your First Angular App

Tuesday, October 10, 2017

Introduction to Angular 4 and TypeScript

clip_image001
This tutorial led you to learn the fundamentals of Angular and TypeScript.

TABLE OF CONTENT

  • =>Introduction
    • What is Angular?
    • Why do we need Angular?
    • Architecture and Building Blocks of Angular Apps
  • Setting Up the Development Environment
  • Your First Angular App
  • Structure of Angular Projects
  • Webpack
  • TypeScript Fundamentals
    • What is TypeScript?
    • Creating First TypeScript Program
    • Declaring Variables
    • Types
    • Type Assertions
    • Arrow Functions
    • Interfaces
    • Classes
    • Objects
    • Constructors
    • Access Modifiers
    • Access Modifiers in Constructor Parameters
    • Properties
    • Modules
  • Angular Fundamentals
    • Creating Components
    • Generating Components Using Angular CLI
    • Templates
    • Directives
    • Services
    • Dependency Injection
    • Generating Services Using Angular CLI
  • Exercise

Introduction

What is Angular?
Angular is a JavaScript framework for building client-side applications using HTML, CSS, and a programming language such as JavaScript. It is an open-source front-end web application platform based on TypeScript.

clip_image002

Before start using something new framework; everybody has lots of questions in his mind that What is it and Where does it fit in requirement? At which place it benefits and Why to use if there are lots of JavaScript frameworks out there.

Why do we need Angular? Why to use Angular and not some other JavaScript framework?
clip_image004
Angular makes HTML more expressive. It powers up HTML with language related features such as local variables, for loops, and if conditions.

clip_image006
Angular has powerful data binding. Application can easily display fields from data model, track changes, and process updates from the user so fast. It is built for providing speed. It has faster initial loads, faster change detections, and improved rendering times than other JavaScript frameworks.

clip_image008

Angular encourages modularity in application by design. It led us to create Applications as a set of building blocks, making it easier to create and reuse content. There most of the application build with JavaScript/ jQuery but as far the application gets more complex it is not easy to maintain the JavaScript and jQuery code.

It requires to properly structure the application. There are some JavaScript patterns out there e.g. Revealing Module Pattern, Prototype Pattern but these are must easy to lots beginners for JavaScript.

clip_image010

Angular has built-in support for making communication with a backend service. This makes it easy for web applications to integrate with a back-end service. It is preloaded with set to features to get and post data or execute server-side business logic.

Easily Testable

clip_image011

Picture credit from..

There are most the applications build with JavaScript or jQuery. Over the years various frameworks are build and evolved to make web applications development easier. Angular makes applications with clean structure that easy to understand and easy to maintain loosely coupled code. It makes applications more testable to write automated test to test the various part of the application.


Architecture and Building Blocks of Angular Apps

clip_image013
In modern web application, there are at least two parts a Front-end and Back-end. The Front-end is called client, it is the part of the web browser that user sees and interacts with. It includes user interface or UI for the application. It uses HTML, CSS, JavaScript/ TypeScript, Angular to create the Front-end. Front-end contains the HTML Templates and presentation logic to display the data and responding to the user e.g. navigation, listing data.

The Back-end consist of web servers or cloud which responsible for storing the data and doing any kind of processing. Back-end may one or more databases and APIs to make the data available to the client. For a large enterprise level application, it may also implement the business logic of the application like calculating the tax, shipping on various parameters

The Front-end or Client app talks to the Backend-end to get or save the data. At Back-end we create one or multiple HTTP Services / API to make data available to the client. These HTTP Services/ APIs are endpoint that are accessible via HTTP protocol so we call them to through HTTP request to get or save the data.

If we talk about Angular Building Blocks At the heart of every Angular App, we have one or more components. Application developed with Angular is comprised of a set of components and services which facilitates operations/functionality across those angular components.

clip_image015

Angular component

clip_image017
Angular component is comprised of a template which is the HTML for the user interface fragment defining a view for the application. component encapsulates the Data, HTML mark-up and logic for a view.

Along this, a class for the code associated with the view. The class contains the data or properties for use in the view and methods, which perform actions button for the associated view e.g. responding to a button click.
clip_image019
Metadata

A component also has metadata, which provides additional information about the component to Angular. It is this metadata that identifies the class as an Angular component.

Modules

Every Angular application has at least one Angular module which called the application's root Angular module. As Application grows it can have any number of additional Angular modules including feature modules that consolidate the components for a specific application feature to make code maintainable. It is a container for groups of components.
clip_image021

For an example, in real world scenario If we go to a grocery store then it has few shelf's to maintain their products/items to sell but in a big mall we found lots of I/0 to manage different categories of the products. Similarly, to maintain different type of components we can create multiple modules to organize the components.

If we see in Training web application, there are following modules can be created to manage the application:

clip_image023
Each module will manage their specific group of components, sub components to break the application in smaller and maintainable to facilitate a specific area of the application.

Conclusion:
In this section we have learned about the Angular and what/why Angular. Along this we have also tried to know the basic building blocks of the Angular to develop a web application

Next: Setting Up the Development Environment

Sunday, September 10, 2017

Rule "Same architecture installation" failed with Microsoft SQL Server Data Tools for Visual Studio 2013

Scenario:

I was installing Microsoft SQL Server Data Tools - Business Intelligence for Visual Studio 2013 with a 64 bit SQL Server 2014 Express and Visual Studio 2013. The installation will not start because of a failing rule check. "Same architecture installation"

I have selected existing SQL Server instance to add features:

image

Then selected “SQL server Data Tools – Business Intelligence for Visual Studio 2013.

image

After that installation start running “Feature Configuration Rules” and I got an error saying that Rule “Same architecture installation” failed.

image

Solution:

I have searched for the problem and found that only 32-bit version of SQL Server Data Tools for Visual Studio 2013 published by Microsoft.

image 

From MSDN forum and blog article:

Make sure you choose the "New Instance" option (strange as that might seem). Otherwise, you'll get an error that says the following:

Rule "Same architecture installation" failed.

On my machine x64 version of SQL Server was installed so it requires to do a new installation rather adding features to existing instance. I thought that It was due to the Operating System architecture difference but these tools require 32 bit instance of SQL Server.

Hope this help others to solve this strange issue.

Friday, June 30, 2017

Out of box “Emmet” code snippets in Visual Studio Code

Visual Studio Code has a port for Emmet out-of-the-box too, which gives us more HTML features. Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow or programming.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime. Same like full version of visual studio, Emmit is way to implement code snippets in the VS Code editor.

For example  let's say we wanted to just type div and then inside of that div we wanted to have a UL. And then we want that UL to have, let's say, five LIs. We could do LI right there and how do you do five of those, we can do *5. Now if I hit Tab, it's going to automatically generate all that HTML.

Emmet_in_vscode_thumb[2]

Notice it's kind of got a cursor there in the first spot, so let's see what that happens there. I can type I first, hit Tab, and go to second, and then just keep typing like this. Now you can use that and hit Escape to get out and to also create things like table or anything else that's more complex.

if you want to learn more about the Emmet syntax you can check out this link here at docs.emmet.io.

Thursday, June 29, 2017

How to run Node.js and Npm with web proxy

Recently I needed to install npm on my workplace computer and it always showing below connection timeout error message every time when I run any command.

clip_image002

I have faced such issue with VS Code when trying to install extensions and updates. After going through documentation, I found that here is the same issue with proxy settings and I got information by running ‘npm help config’ command. It redirected me to the npm config documentation and I found this:

clip_image004

To authenticate my corporate proxy, I set the environment variables HTTP_PROXY and HTTPS_PROXY but npm did not recognized these environment variables.

After doing search on internet and from my previous experience with vscode issue, I found the following same way to configure the proxy for npm.

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

If you need to specify credentials, they can be passed in the url using the following syntax.

http://user_name:password@proxy.company.com:8080

You can also set the proxy configuration as a command line argument or environment variable. Configuration parameters can be specified using -- when executing npm. So the proxy could also be specified as follows.

npm --https-proxy=http://niranjansingh:MyPass@172.29.01.01:8080 -g install yo

I have tried command line configuration to make it work and I have done my job.

Hope this help others also... Happy Coding!

How to setup major tools for VS Code development environment?

Visual Studio Code is light weight editor for web development languages. To enhance it you require some tools which speed up development in Visual Studio code and also prerequisites for doing development e.g. Node.js . Here are the few players which play some important roles to enhance the development environment features:

clip_image002

Bower is a package manager for the web.
Gulp enables you to automate and enhance your workflow.
Yeoman is Scaffolding tool for modern web apps and helps you to kick start new projects, prescribing best practices and tools to help you stay productive.

You can setup these as follows:

Step 1 – Install Node.js

To through previous post - How to create Node.js development environment in Visual Studio?. Just download the installation package from Node.js site and go through the setup wizard to complete installation to work npm working.

Step 2 - Install Bower

To install Bower first run the Command Prompt and Bower is installed globally by running the following command:

npm install -g bower

Step 3 - Install Gulp

To install Gulp.js globally on your system run the below command which enable you to run the ‘gulp’ command in your command prompt:

npm install -g gulp

clip_image004

Step 4 – Install Yeoman

To install Yeoman, just run the below command on command prompt:

npm install -g yo

You can install these in one go using below command:

npm install -g yo gulp bower

clip_image006

After that most of things are up and running to start with VS code.

Happy coding!