Real-time preview of your HTML and CSS using Brackets.io

Ever wondered how easy it would have been as a developer to have something that previews your HTML code changes instantly?
Feels good, isn't it? Here is the answer to all those wonderful feeling - Its Brackets.io

Get a real-time connection to your browser. Make changes to CSS and HTML and you'll instantly see those changes on screen. Also see where your CSS selector is being applied in the browser by simply putting your cursor on it. It's the power of a code editor with the convenience of in-browser dev tools.

This is just an information article. I have tried using the editor and looks awesome and fabulous.

Elasticsearch Series :: Episode 2

Hi All,
In my previous post, I gave a quick demo on what is Elasticsearch and told you how to set it up in your local machines as a webservice. Now, we will take a step forward and will try to understand few basic queries that we can run on ES.

In ES, Index (Indices) are equivalent to a database name and table in a RDBMS is equal to type in ES.

So, we will start with creating a simple index named Employees in ES. Within it, we have Employee as the type, the table that holds the data of every employee who is working with our dummy company named Dumbo.
No matter wether it is SQL or NOSQL, we are humans and we are bound to have data that is related. So, I have the following details for an employee.

firstname, lastname, employee_id,salary, experience, location,role

Hence, my data would be something like this.
So, let us create this in our ES database that is running at port 9200 on localhost.

This code piece creates a new index employees and then creates a type employee and creates a schema within elasticsearch and then saves the data. As ES is JSON based full-text search database, all the talk with the ES happens in JSON in RESTful manner.

Notice, that ES has identified the datatypes based on the data passed to each field in the JSON. Thus the properties are set as per the understanding of ES. We can create mapping as per our requirements and we will discuss this in the due course of the series.

Lets insert a couple of more employees in the index so that we can do some basic operations on it.

The output from ES is as below.

Notice from the above code that ES tells us what is the index, type on which the data is created along with its version and is it created or not.
The version is 1 as this is a new entry in the type and there exists NO  entry prior to this on the id = 2.
Remember that the id = 2 is the one that we are sending in the PUT request and not the employee_id.

If we do not mention the id in the PUT request, ES will auto generate an id that it uses for identification.

Lets re-execute the same piece of code again. Notice the difference? version has change to 2. This means that the data is updated.

But in real sense, ES marks the current record with id = 2 as deleted and recreates a new one. We will talk on this as well in the coming days.

Android ListView with mutliple TextView items

Recently we had a requirement where we have to display data in a list in android. Every row in the list has multiple TextView items. It means, we wanted an output that is like this!


  • The list items should have space division between them.
  • The default color of the listview item must be colored in gray+blue mix.
  • On touch/click of the item, it should highlight it as green.
  • Every item in the list has 3 elements (Header, content/information and datetime when the content was received)

So, how did I do it?

  • To achieve the colors needed for the project, that is default -gray and on hover - green, we did this

Add: Inside res/drawable, create a new resource file with the following name generic_list_row_selector.xml
Add the following code to it.

2nd, Addgradient_background.xml which has the below code
3rd, Add gradient_background_hover.xml with the below code snippet in it

  • Open the main activity file's designer -> in my case it is MainActivity and its related designer calss is acitivity_main
Add the following code to it. This has the ListView that will show the list of items that we bind

  • Now we need the Row that has the TextView elements that displays the data for us. Create a new res file named activity_custom_row_for_listview.xml with the following code in it.

The data that will be bind to the controls - TextView will be from an object holder. So, create a java class named DisplayDataClass.java

Now, create a custom Adaptor, that will make sure to bind the controls with the data as the data is fed in and rebinds it with each item (row) of the listview. Create a file named CustomAdaptor.java

Comeback to the parent class now. It should have the below code

The method private ArrayList<DisplayDataClass> GetDisplayResults() inside the class MainActivity is the data object. You can plug in your own data and show it here. It might be from SQLite database or from an API or from GCM or from another Activity inside your android app. 

Hope, you have liked my tutorial. Stay tuned! there is a lot to come. - Eshwar