Advanced HTML Editing With Emmet

In the previous post on Sublime Text 3, I explained how to get up and running with the Text editor along with the PackageManager plug-in. In this post we will explore another plug-in Emmet. This is the single most powerful plug-in you can inject in your day to day web development life and be productive right away. Your simple abbreviation will be converted into complete HTML markup in no time.

Let's start by installing the plug-in on our Editor.

Installing Emmet

  • Open Command Palette by pressing. Ctrl+Shift+p
  • Type Install and click Enter
  • Type Emmet, Select first result and hit Enter
  • Restart the Editor

Formatting XML and JSON using Sublime Text

Last week I was trying to make some changes to my WCF service and had to deal with some XML data. The problem was the XML was not nicely formatted and I had to highlight couple of missing pieces of information. Normally I would use Notepad++ but I though let's try doing it in "Sublime Text".

If you are new to this editor you can read my this post which describes the basic steps to get started with Sublime Text. As a web developer we often have to deal with non formatted XML and JSON data. Sublime Text has a plugin Indext XML that you can use to format XML and JSON data. The plug-in is available in both ST2 & ST3.

Installing Plug-in

Open the editor and hit Ctrl+Shift+P to open Command Palette.

Data binding in AngularJS

In this short blog post we will start exploring the data binding features of AngularJS framework. In the previous blog post we saw step by step tutorial on building our first AngularJS application. In that post we saw the one side data binding operation coming form source [Controller] to destination [UI]

But AngularJS is designed with two day data binding. Meaning if you have to take the updated data form the User Interface back to the source, you can do that pretty easily. In fact, that's exactly we are going to do in this blog. Following is the diagram of two way data binding for those of you who are visual learner.

Getting started with AngularJS

In this blog post we will start exploring the AngularJS framework. If you are not familiar with this framework do a simple search on the web and should result into bunch of introductory posts that explains the basics of AngularJS framework. Here is the one from my blog.

For few initial demos I am not planning to integrate any server side connection so the application will be just a purely client side. In the later blog posts I am planning to integrate AngularJS with the framework like Asp .Net MVC Web API. However, I will be using Visual Studio as my editor of choice because that will make things simpler when we start adding more and more server side components.

For start, let's go ahead and build an Empty Web Application in Visual Studio 2013. Here is a short video explaining how to create this.

Setting up the Project Structure

Installing Package Manager On Sublime Text

That's right, I am going to blog about how to set-up a text editor !! As easy and dumb it sounds, believe me, this is not your ordinary text editor. You must be living under a stone to not have heard about this new Text editor that has taken Developer community by a storm. I am talking about the sophisticated, amazingly fast and extremely extensible Text editor named "Sublime Text".

We are going to work with Version 3 of the text editor. For now Sublime Text 3 is in beta and few things might change. For me reason to do this blog series with new version is to keep the content more relevant over coming months/years. Benefits of this text editor are end less but following are few to name,

  • Cross Platform [Once you get used to it,you can use it between Mac/Windows/Linux
  • Enormously huge plug-in community, here
  • Extremely fast and fluid
  • Strange type of Trial-ware that does not expire !

We will be using Windows OS as our target for setting up and using the Sublime Text editor.

Download the Sublime Text Installer

Go to the website and download the Sublime Text Installer for Windows OS.