What’s new in ASP.NET Core 2.2 – Web API improvements – HTTP-REPL

On September 2018, .NET Core preview 2 has been released. Dot Net team keeping the Web API improvements as a major theme for this release.

The aim of web API improvements is to make API

  • Easier to create
  • Easier test and debug
  • Easier to document
  • Easier to consume
  • Easier to secure
  • Easier to monitor

API becomes part of a major software application, this release got major improvements to develop APIs and services.

In this post, we shall discuss the improvements made to APIs in terms of creating, debugging and testing.

We can build an API from scratch and let’s view what’s new in this release.

For doing these activities, I’m using Visual studio 2017 preview 2 in my machine. So make sure you are having the similar version to experiment the same.

Create an API Project

Let’s create a new project called “APITest” using the following steps

  • File -> New Project -> Choose ASP.NET Core Web Application under Web Category

http-repl-1

  • And in the next prompt select ASP.NET Core 2.2 in the topmost drop-down and click.

http-repl-2

Now, our API gets created with the default template. We will be having a controller called ValuesController.

Additionally to that, we shall create a new controller called EventController to perform our experiments.

Model

Before creating that controller, let’s create Event model and we can generate our Controller code based on the model we create.

Our Event model will look like below,

So, we have our Model ready now. Let’s generate our Controller based on this Model.

Controller

  • Right click on Controller folder in solution explorer
  • Select Add
  • Click Controller
  • Choose Option “API Controller with actions, using Entity Framework”
  • Select Model class and DataContext using the plus symbol and Click Add

http-repl-3

http-repl-4

Once we have clicked the Visual studio will start scaffolding our new controller in a few seconds. And our controller will look like below

So, all set with API setup. Whenever we create an API, we will run the application and open the API link in the browser window.

If it is a GET call its fine, but when we need to make POST call or something we need another set of tools to perform testing. In that case, the browser is not the best tool to perform testing in the API.

In .NET Core 2.2, a new tool called HTTP-REPL has been introduced. It’s a .NET Core global which we can install using the dotnet CLI.

HTTP-REPL is a command line tool to interact with API.

Right now, the tool is not shipped with this release. However, we install using the following steps.

How to install HTTP-REPL

Run the following command in command prompt to install in global level in your machine

dotnet tool install -g dotnet-httprepl --version 2.2.0-* --add-source https://dotnet.myget.org/F/dotnet-core/api/v3/index.json

Once installed, we can verify the installation using the following command

http-repl-5

we can run http-repl using the command

dotnet httprepl

And we can point to any API which has swagger enabled to try out by setting the base URL.

Let’s not do that now, we can experiment the tool with the API which we created.

Add HTTP-REPL in Web browser list

Instead of opening the command and traversing to the API URL, we can launch our application into Repl right from our Visual Studio IDE.

For that, we need to add the Repl in the Web browser list.

http-repl-6

To Add in web browser list, click browse with the option and click Add and fill the required as follows.

http-repl-7

http-repl exe will present in the following path

C:\Users\<>\.dotnet\tools\dotnet-httprepl.exe

Once added, set it as default web browser.

And update your default launchUrl as empty or remove that settings from launchSettings.json

Launch the application

As we have added EF in our API, let’s add migration before launching the application.

Run the following command in Package Manager Console (Tools->Nuget Package Manger->Package Manager Console)

Add-Migration Initial
Update-Database

Click F5 or click IIS express in the toolbar to launch

http-repl-8.png

After launching the application, we can test our API endpoint right from our Repl command prompt.

Let’s add Open API spec

To make HTTP Repl more accessible, we can add swagger Open API Spec. So that Repl will get to know the available HTTP methods and info in the application.

Let’s add swagger generation with the help open source project Swashbuckle.AspNetCore

Right click on the project and click Manage Nuget package and install Swashbuckle

http-repl-9.PNG

Once installed

In the ConfigureServices method of Startup.cs, register the Swagger generator, defining one or more Swagger documents.

services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new Info { Title = "Events API", Version = "v1" });
});

In the Configure method, insert middleware to expose the generated Swagger as JSON endpoint(s)

app.UseSwagger();

At this point, you can spin up your application and view the generated Swagger JSON at “/swagger/v1/swagger.json.”

Optionally insert the swagger-ui middleware if you want to expose interactive documentation, specifying the Swagger JSON endpoint(s) to power it from.

app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "Events API V1");
});

All Set!!!

The command ls will list the routes API as well the HTTP methods available in that particular.

http-repl-10

The command UI will launch the swagger UI page and open in the browser.

https://localhost:44384/api/Events~ ui

http-repl-11

POST call

Let’s post some values using Repl. For making post calls we need to register some text or code editor.

For example, using the following command we can set a default editor

pref set editor.command.default "C:\Windows\System32\notepad.exe"

Once we have set the default editor, we can make post call as follows by typing command POST

http-repl-12

 

The target editor will default placeholder to fill the data, we can fill up the JSON data, save the file and close it. And also we set header with command line argument -h, the tool got some nice autocomplete feature.

Once closed, the POST call gets called with the data we submit.

http-repl-13

 

Get call

We can make GET call as follows,

http-repl-14

Cool! That’s it for now. we can discuss API Analyzer in the next post.

Happy Coding!

ASP.NET Core 2.2.0-preview1 – Web templates update

The first preview of the next minor release of ASP.NET Core and .NET Core is available from Aug 21, 2018. The new .NET Core SDK of 2.2.0-preview1 can be downloaded from here.

We need Preview of Visual Studio 2017 – 15.9 Preview 1 to work with .NET Core 2.2 projects.

Whats new in 2.2?

.NET Core listed the following features in their documentation. Now, there is no much information regarding the features in details. They will be publishing detailed information about features soon and hyperlinking that documentation in the same release page.

The new features have been discussed in the ASP.NET Community Standup call.

 

In this post, I would like to discuss updated web templates. Even though we need Visual Studio Preview to work with ASP.NET Core Projects. I have used VS Code to discuss the web templates in this post.

Current Version

Before upgrading the SDK, I wanted to check the current version of the .NET Core with the command.


dotnet --version

version

We can download the .NET Core 2.2 SDK from the link,

https://www.microsoft.com/net/download/dotnet-core/2.2

We can download and start Installation based on our system environment.

SDK

Once installed we can check whether the latest version is available or not with the same command which we have earlier in this post.

SDK2

Now, dotnet version is updated the 2.2.1 preview 🙂

Let’s create a web application

Using dotnet CLI, we can create the application from the command prompt right away. Following is the syntax to create an application


dotnet new  [--force] [-i|--install] [-lang|--language] [-n|--name] [--nuget-source] [-o|--output]
[-u|--uninstall] [Template options]
dotnet new  [-l|--list] [--type]
dotnet new [-h|--help]

 

If we have any doubts in the arguments we can use flag –help to list the available arguments to that particular command. dotnet template engine will display the commands.

For example,

dotnet new --help

The above command lists the available templates in this version

args.png

Using the help of commands, we can create n number of application with the various application with different themes.

MVC web templates

For now, let’s explore whats new in MVC and angular web templates.

To explore MVC web templates, we can go ahead and create an MVC application using dotnet CLI from the and prompt with the owing command.


dotnet new mvc

Once the command executed, the CLI will create the required files for the MVC application and it will start to restore the dependencies as the post-creation actions.

mvc

The files have been generated with the following structure,

mvc-2.png

DotNet completed optimized this folder and file structure, and they have placed an only minimal code in the starter template. The main aim of this optimization is to provide a quick starter template for the user to get started with the project.

Even though we have a separate template to create an empty project, its always good to have a very minimal set of code with some working example in the project.

So the team has provided the very small set of code in this latest version templates if the user wants to override or delete the existing pages and getting started with the new project. That can be achieved with less number of deleting the existing code.

Let’s run the application and see how the new UI has been designed with command

dotnet run

 

mvc-3

The latest UI looks so clean, there are no such components – Jumbotron in the first half of page, 4 or 5 pages with user login feature. We are having only 2-page links here.

And as you see there is a default option to place the cookie accept policy details. Once the user clicks the Accept button, the message gets hidden and a flag is getting added in the browser cache. Until the user clears the browser for this particular web page, the message won’t show to the user again. That’s a helpful feature IMHO.

We 2 links called page 1, page 2 here, but those are not working in this preview release. In the standup call, the team provided the news that it will be fixed in the main release. And the team is looking for the feedback from the community to improve the templates.

I think we should add sidebar as an optional flag, we can let the user decide whether they need it or not. We don’t have to put it in the default templates page.

 

Angular web templates

Now, let’s explore the angular application web template.

We can follow the same approach

dotnet new angular
dotnet run

 

The angular web templates come up with following folder structure

spa.png

When we run the latest angular application template, we have got following UI pages,

angularangular1angular2

In the Home page, we have information about the single page application on what are all the UI framework and technology used in the application like –

In the counter page, we have a button and counter whenever we click the button the counter provides the number of clicks information.

In the Fetch date page, we have a table with bootstrap styles.

 

Bootstrap is fine here, but I wish the angular material design should get included as an optional flag. It will be great if have the material design support in the dotnet CLI itself.

That’s for now, thanks for reading.

Happy Coding!

 

Progressive Web Apps – Web App Manifest

The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to users in areas where they would normally see apps in mobile devices.

Screenshot_20180821-000049

 

Web app manifests are part of a collection of web technologies called progressive web apps, which are websites that can be installed to a device’s homescreen without an app store, along with other capabilities like working offline and receiving push notifications.

And, more importantly, how it behaves when it’s launched from the home screen.

Installs to the homescreen

When a user clicks “Add to homescreen”, they will see the app being added on the homescreen.

At a minimum, the manifest must contain the name of the app and a short_name.

The short_name is used on the home screen and in other places where there is limited space.

It also needs the start_url, the URL the app should open when launched from the home screen.

Defining the manifest metadata

 
{
  "short_name": "Pandiyan",
  "name": "Pandiyan Murugan",
  "icons": [{
      "src": "/img/portrait_small.jpg",
      "type": "image/jpg",
      "sizes": "192x192"
    },
    {
      "src": "/img/portrait.jpg",
      "type": "image/jpg",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

Make sure, the page you specify is cached as part of the app shell. Otherwise, you won’t get the benefits of a cached app shell and your app won’t work offline.

One quick tip.

To track the number of users who are launching your app from their home screen, you can add a query string to the end of your URL.

And use any analytics to track launches, with that query string.

But don’t forget to ensure that you’ve cached the URL with the query string, in your service worker.

Adding icons and Splash screen color

Finally, we need to provide a set of icons for things like the home screen icon and the tab switcher, and splash screen.

The icons parameter takes an array of icons and must include the source, the size of the icon, and the type.

For example, image/jpg.

I recommend providing eight icon sizes,

48 x 48, 96 bx 96, 128 bx 128, 144 x 144,

192 x 192, 256 x 256, 384 x 384 and 512 x 512.

Just make sure you have icons for 1x, 2x, 3x and 4x devices.

Chrome uses the 48 device independent pixel icons for the home screen icon and the tabs footer. And the 128 device pixel icons for the splash screen.

Those are the minimum requirements. But there are a few other helpful things that you should set in the manifest.

The background color, and theme color are used by the browser along with an icon, as part of the splash screen.

Shown the instant the web app is launched, until its first render. As we provide the splash screen color as blue in manifest. The splash screen, icon and short name is displayed while the browser is rendering the application. (http://pandiyan.cool)

Once the app is loaded, the theme color tells the browser, what color to display in the UI elements such as the address bar or the notification tray.

Display and orientation property give you control over how the app is displayed. For example, you can hide the address bar and the back and forward buttons, by setting “display”: “standalone”. Or if you’re building a game that works better in landscape, you can force landscape view by specifying, “orientation”: “landscape”.

Web apps will launch full-screen with no vestiges of a browser. The URL will not be present, nor will traditional browser actions such as bookmarking and navigation controls.

Linking the manifest

When you have created the manifest add a link tag to all the pages that encompass your web app:

<link rel="manifest" href="/manifest.json">

Manifest metadata in browser

To confirm whether the manifest is properly, we can use the chrome DevTools to view the manifest as below

(Switch to Application tab in the Chrome Dev Tools)

manifest

Happy Coding!

Angular 5 Tutorial 03 – Project Structure

In the previous post, we have discussed on how to create hello world application in angular. Using Angular CLI, we have generated basic files needed to run a hello world application.

Now, let’s have a quick look at the files and folders in our new Angular project.

The generated projects have the following files and folders structure

angular_structure

We have three folders and few files in the root directory.

The 3 folders are e2e, node_modules, and src.

src – src/ folder presents in the root folder. It contains all the source code of project whereas the remaining folder contains files that helps to build, test,  maintain the application.

e2e – It contains end to end tests. These files should not present in the src folder, because it acts as the separate app that helps to test the whole application.

node_modules – This folder has been created by Node.js based on the libraries listed in packages.json. (click here to know about in details)

 

Before digging further into the above folders, let’s take a look at the remaining files available in the root folder.

.angular-cli.json – Configuration of angular CLI. It helps us to define different environments like dev, stage, etc. and also to import third-party stylesheets.

.editorconfig – Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Example: indent_size, max_line_length of the project. It allows us to maintain a common editor setting across the team.

.gitignore – Git configuration to make sure autogenerated files are not committed to source control. Example: dependencies folder – node_modules, compiled output folder – dist

karma.conf.js – Karma is a test runner which we are using in Javascript application. This file contains the configuration of karma test. The configuration mentioned in this file is used when we are testing the application using ng test command.

package.json – npm configuration to maintain the metadata of the application, third-party packages listing, and to maintain the dependencies of those packages.

protractor.conf.js – Protractor is an end to end test runner. The configuration mentioned in this file is used when we are testing the application using ng e2e command.

README.md – Basic documentation of the project, when are generating files with CLI it is prefilled with CLI commands details.

tsconfig.json – TypeScript compiler configuration for IDE.

tslint.json – Linting settings for TSLint which is a used during ng lint for linting TypeScript code.

 

So far we have discussed the folders and files available in the root directory. Let’s dig deeper into the src folder.

cool-app-src

The src folder contains sub-folders called app, assets, environments and few more files such as index.html, main.ts, etc

app/app.component – The HTML, CSS, ts, spec.ts files together form the  AppComponent. Basically, it’s an HTML template, stylesheet and unit test. It acts as the root component of the application. The remaining component will be created as the nested component of this root component.

app/app.module.ts – Modules is a mechanism to group the component, pipes, and services which are related.

assets – assets folder is the place to maintain the static contents like images, or any content that needs to copy fully as it is during the build process.

environments – This folder contains one file for each environment. The file contains environment based configuration or information.

favicon.ico – favorite icon to be displayed when we are bookmarking our page

index.html – The main HTML thats serves the application. The CLI automatically links the js and CSS files when building the application.

main.ts – The entry point of application. Compiles and bootstraps the application root module to run in the browser.

poyfills.ts – Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. Example: The latest feature will browser like chrome or firefox, but we need the fallback for the browser like Internet Explorer. Polyfills will help to fill those gaps.

styles.css – We import the global styles in this file. Mostly the local style specific to the particular component will be placed inside the same folder for easy maintenance.

test.ts – The main entry point of the unit test.

tsconfig.json – Typescript compiler configuration for the angular application

 

In the next post, we can discuss about component in more details.

Happy Coding 🙂

Angular 5 Tutorial 02 – Creating Hello World Application

In this post, we are going to discuss how to setup development environment and create an initial angular app using CLI.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v

01

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v

 

4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

  • cool-app is the name of the project.

 

new-app

Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows

code_ng-app4.png

5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

The default page will get open with the greeting message.

 

CoolApp.png

 

Stay connected and Keep supporting. 🙂

Happy Coding!

 

In the next post, we can discuss the architecture of the angular application.

Angular 5 Tutorial 01 – Introduction

angular5.png

What is Angular?

A framework for building client application in HTML, CSS and JavaScript/TypeScript.

Why Angular?

Why we need Angular? We can do the same in JavaScript or jQuery. Yes, we complete our most of the task using jQuery.

When the application becomes complex in terms of requirements, jQuery becomes hard to maintain the code. Even though we have lots of design patterns for JavaScript, its hard for beginner to start with design patterns.

When we create large complex application using jQuery it becomes hard to test. To make life easier a lots of frameworks arrived in programming world to help the programmers.

Benefits of Angular

  • Its a component based framework which gives a clean structure for our application
  • It has Declarative templates which Includes lots of re-usable code
  • More testable code – supports to build lots of automated test
  • Dependency Injection – loads dependent objects (called the dependencies) when it creates an instance of an object.
  • We can write our code in either JavaScript or TypeScript – Angular Framework itself developed using TypeScript

Architecture

We have two main sections in Architecture

  • Front-end
  • Back-end

Front-end

In the front-end, we have built our UI using HTML, CSS, JavaScript or TypeScript. It contains HTML templates, Graphical representation, application presentation logic.

Back-end

Back-end Architecture contains the Business Logic, Data from Database or APIs. In angular, we are not going to store any data in client side because once the session or cookies cleared everything will deleted. We will use local storage or cookies in client side to store temporary data. The business logic or data are stored in database or APIs.

angular

The key parts available in angular architecture are

  • Modules
  • Components
  • Templates
  • Directives
  • Data Binding
  • Services
  • Dependency Injection

We can discuss on each topic in upcoming posts.

History of Angular

Before moving to deeper learning part, lets take a look on history of angular.

  • Angular JS – Version 1 – 2010
  • Angular – Version 2 – 2016
  • Angular – Version 4 – 2016 December
  • Angular – Version 5 – 2017 November

The first version on Angular is released in 2010 with the name of “Angular JS”. It became popular framework among developers.

Then in 2016, a complete rewrite has happened in the framework and it has been release with the name “Angular”. The word JS is removed from the framework name. This is a major release with complete rewrite of framework with major architecture and behavioral changes.

In December 2016, Angular version 4 is released. The version number 3 is skipped to match the version number mismatch between other components of angular.

The current version of Angular 5 is released in Nov 2017. The new version of Angular is going to released on every six months. That’s all about the major version changes happened in angular.

In next post, we can see how to create our hello world application in Angular.

Happy Coding!

A techie newbie?

Wow! Welcome to the tech field where you have lots of computers, servers, rolling chairs, ACs, etc. It may be a very hard task to transition from college to a job -a software developer. In spite the myths about this job, claiming to be the most paid job, most stressful job, most hair-fall job, most whatever job, it has its own pros and cons. Yet many of the myths are true, the hair-thing for example 🙂 Just kidding!

When you first step into this field, everything seems a little off and people keep on speaking, attending meetings, tapping the keyboard, etc and you don’t understand what they speak or why 😦 For two months you will be left alone, I mean you would struggle to make friends and acquaintances. People would stare at you as if you are from Kepler-1229b (an exoplanet) but as days go by, you begin to get along with the people around you. (i.e) You start to code.

When this process begins, you discover new languages, frameworks, and most importantly you will realize that StackOverflow is the greatest treasure you can have. And every time you try to stay cool, some bug would rise up from the code you wrote yesterday and dance before the QA Team. Your bad 😦

Even I’m new to this field. I have consolidated few tips that would make you feel better as a fresher in this job -the most paid job 🙂 Again kidding!!
This post is a bit lengthy, if you want a quick read, just skim through the bold letters.

Mistakes are OK:
Yup! You heard it. No one is perfect. A famous proverb says “Rome was not built in a day”. Perfection comes with practice and experience and they come with mistakes. When you commit a mistake, learn from it and try hard not to repeat it again. One of my favorite quotes -“I never fail, I learn”. Learn from the mistakes of your seniors as well.

Ask questions:
Being new to this field, everything will seem strange and weird. Open your mouth and ask questions if you are not clear about anything. People in the software field are kind. They will surely help you. Do not hesitate to ask a question that has knocked your throat. Just open your mouth and let it out.

Get Help from seniors:
Don’t feel shy to speak with them, they are also fellow human beings with an experience level greater than you. They would always be ready to help you out. Think them as your StackOverflow but do not disturb them often. This might lead them to avoid you, move to another cabin, find another job, etc. Who knows!! Just don’t disturb them with silly questions like “What is 1&&-1 ?”, “Visual Studio is not working, can you help me?”, you could Google it instead 🙂

Learn/Read/Practice:
I heard people in college say, “All this studying stuff, examinations, semesters will get over within the college, Once into a job, we are free, no exams, no learning, nothing”. My friend, this is not true and you know it. You have to keep on learning as the world moves fast, so does the technological advancement. Frameworks, languages they all mutate every day, make sure that you read a lot and keep your technology stack up-to-date.

Improve writing skills:
Don’t write stories in the comment/work-log. Be straight to the point you wanted to say. Did some changes to the code?? Commit message – “updated bug that was not fixed today”. This type of writing doesn’t help you. In this field, you will have to write a lot of comments, reply to emails, skype with people. Poor writing skills do not help.

Be precise/short and firm in words:
Speak right to the point and use the correct words. Once I was asked by my team lead at the beginning of my career -“What is AJAX ?” I had no idea what it was back then. I knew “A” was for asynchronous so I started with Asynchronous… JQuery… He said “Don’t bluff” 🙂 All I wanted to make clear is that, if you don’t know something –Don’t bluff 🙂

Be wise while you code:
Read about OOPS and try to implement them and make the code modular. Use efficient algorithms and do a thorough analysis before you get your hands dirty on the code. Understand why and how the code works and then begin your task.

Keep your passion along with you:
Not everyone has the same passion -coding. Each and everyone may have different hobbies and passion. Do not leave them untamed. Follow your passion. Coding is your profession, passion may be something else. When you feel bored or stressed, ignite your passion and feel the stress relieved.

And finally, Smile always 🙂
“Face is the index of mind”, radiate joy and confidence to the people whom you meet and talk with. A simple smile can brighten your day.

This is a field where you can develop your logical thinking, programming skills, ability to solve problems, communication skills, comprehending skills, etc. Make use of it. It may be hard in the beginning but as you get involved you will be drawn towards it and stress will stay away from you. For more posts on life skills, visit samuellawrentzz.wordpress.com

Happy coding!!

Emmet in VS Code

VS Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

VS Code is one of my favorite code editor. I love the various features like embedded Git Control, Code completion, snippets, code refactoring etc.

I’m a full stack web developer (I used to call myself with that name), I have been using the vs code from its earlier release. I use to follow the release notes of VS Code on every release.

I always used to share the details of VS Code new features with friends, colleagues and all. Some of the features I have excited about was integrated terminal, Side by Side editing, Command palette, Markdown preview and list goes on.

Today, in this post I would like to share one of the interesting feature of VS Code which is involved with Code completion.

It’s Emmet!

So the next big question is,

What is Emmet?

Wiki says,

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.

Me:

To be short, it helps to code completion, add snippets, etc.

And next big question is, even some text editor also doing this fair job nowadays. Why Emmet?

Yes, nowadays all the editors comes up with code completion or syntax suggestion intellisense.

However, Emmet got some cool features like syntax abbreviation, improves HTML, CSS workflow. Using Emmet we can quickly write a bunch of code, wrap code wit new tags.

Your favorite may be Atom, Sublime, Brackets or something else. Emmet supports most of your favorite editors.

Check this link on how to integrate Emmet with your editor.

https://emmet.io/download/

It’s a plugin, you can install or integrate with your code editors.

 

Emmet in VS Code

The one good news is that we don’t have to download & install the Emmet in VS Code.

Emmet is built in with VS Code, no extension in required. OK, that’s the base story; now let’s start with how to use the features.

 

How to expand Emmet abbreviations?

Emmet abbreviation and snippets are enabled by default for html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

Mostly, Tab key is used to complete the code abbreviation. We have to type the syntax and click tab key to expand the abbreviations.

We expand the single html tag or even expand the hierarchy of html tag at the same time by clicking tab key.

emmet-gif-01

 

An important change is that the Tab key is no longer the default way to expand Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

We can quickly view the Emmet abbreviation by clicking the info icon next to list shown. By typing text next to hash (#) will be taken as id and text next to period(.) will be considered as class name. Emmet basically works related to CSS selectors.

emmet-gif-02

And also we can create multiple list of same syntax with unique id as well.

emmet-gif-03

 

We can generate lorem ipsum text with default number of words or certain number of text by mentioning the word count.

emmet-gif-04

 

Let’s see some CSS abbreviation example as well

emmet-gif-05

 

To experience more html & css short code check this out link https://docs.emmet.io/cheat-sheet/

The complete cheat sheet for html and css.

Try out and let me know your thoughts on the comment section.

Happy Coding! 🙂