Building Your first vue.js and firebase Web App

A Simple way to get started with the simplest Javascript library as a novice and simplest real-time database “firebase”.

Introduction to Vue.js

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In the following you can find a list of features:

  • Reactive Interfaces
  • Declarative Rendering
  • Data Binding
  • Directives
  • Template Logic
  • Components
  • Event Handling
  • Computed Properties
  • CSS Transitions and Animations
  • Filters

The core library is just 17kb that means u can just add it to your html page with <script> tag and get started.

The Vue.js website is available at: to dive in.

Introduction to Firebase

Firebase is a mobile platform from Google offering a number of different features that you can pick ‘n mix from. Specifically, these features revolve around cloud services, allowing users to save and retrieve data to be accessed from any device or browser. This can be useful for such things as cloud messaging, hosting, crash reporting, notifications, analytics and even earning money through AdMob. Here we are going to use real time database feature.

In short, Firebase handles the backend online element for your apps, allowing you to focus on the front-end UI and functionality. All this is done through a single SDK with easy-to-use APIs and excellent integration into Android Studio. This removes the need to create your own server-side script using PHP and MySQL, or a similar set-up. This is ‘Backend as a Service’ or ‘BaaS’, and essentially this means that anyone really can make that ambitious social app. It works with Android apps, iOS apps and web apps and best of all: it’s free!

To set up firebase project is simple

SetUp : Vue.js

There are different ways to include Vue.js in your web project:

  • Use CDN by including <script> tag in HTML file
  • Install using Node Package Manager (NPM)
  • Install using Bower
  • Use Vue-cli to setup your project

In the following we’re going to the Vue-cli to setup a new project and install the Vue.js 2 library.

Using Vue-cli

First, we need to install Vue-cli. The commend line interface is available as an NPM package. Make sure that Node.js and the npm command is available on your system and use the following command to install the Vue CLI globally on your local system:

$ npm install -g vue-cli

Having installed the client successfully the vue command becomes available. Now we’re able to initiate a project by using this command in the following way:

$ vue init webpack firevue-todo

when you run the command ( vue init)

now your vuejs template project will be downloaded and the structure of the project folder looks as below:

Project Structure

├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

to know in detail click below

to be continued… in next post.

Creating Links in HTML

The most distinguishing feature of the web is it’s ability to help users navigate easily from one page to another in the same website or between different websites. This feature of navigation is achieved through links which are called Hyperlinks in HTML. The basic function of these links is to take users to another page or website or even to another part of the same document just by clicking on a piece of text or an image.


Links to other Documents and Pages


The primary element used to create links in HTML is called the Anchor tag, usually represented by the <a> tag. To link to another document, we use something called the href attribute. This attribute contains the link to the page or document we are linking to.

Let’s look at an example:

Suppose we want to link the home page or sometimes called the index page to a random page in a document. We can achieve this by using the opening <a> and closing </a> tags along with the href attribute which contains the link to the home page of the website.

The code to the above example will look something like this:


          Return to the <a href=”index.html”>Home Page.</a>


If you click on the words “Home Page”, it will take you to the index page or the home page of the website which you are trying to link.

We can include all kinds of elements in the <a> element like text, images and other media. The type of element we use depends upon the functionality the web page is offering.

Similarly, we can include links to other web sites in the href tag. For example, if want to create a link to Google’s home page in our document, we can do something like this


           Click <a href=””>here</a> to go to the google’s home page.


creating links in html


So if you click on the word here, it should take you to the Google’s home page.

Now, there is an attribute called the title attribute which will display the description of the page we are linking to. This attribute is generally used when we are creating links in images.

Now that we have seen how to link pages and to sites and vice versa, in the next article we will be going more depth into the various attributes of the <a> element.

If you have anything to share, please put them in the comments below.




What is a Permalink- It’s Effect on SEO

Permanent link or in short Permalink is an address that links your posts with your blog’s URL. For each post you write, a permalink is generated automatically. It is an important aspect of your blog’s SEO and should not be neglected.

There are usually two types of permalinks- an automated permalink and a custom permalink. An automated permalink is generated according to the title of the post and is not recommended for a good SEO score as it may have too many stop words or other phrases which may actually dilute your focus keywords.

So, It is always good to use a custom permalink which has more focus only your keywords which is good from the optimization point of view.A custom permalink has a positive effect on your site’s rankings as it contains majority of your focus keywords. Let us have a look at an example to get a clear idea.

Suppose you are writing a post on Permalink and it’s effect on SEO. You have selected your focus keyphrase to be “What is a Permalink” because it has a descent search popularitty. Now if you put your title of the post as “What is a permalink-It’s Effect on SEO”, then the automated permalink may look something like this

If you observe the link which is generated automatically, you can see that there are plenty of stop words like “is”, “on” which might affect your index rate and also your focus keyphrase is being diluted because of some extra keywords like “it’s”, “effect”, “on”, “seo” which do not have a good search popularity.
 So we need to create a custom permalink which are rich in our focus keywords, like “what”, “is”, “a”, “permalink”. These also contain minimal stop words which is good for your index rate and makes a huge impact on your site rankings.

Effect on SEO

As mentioned earlier a custom permalink has an immense effect on your site ranking and your index rate which combined is a good SEO strategy. But sometimes there comes a situation where you need to include some stop words other wise your sentence may look meaningless and incomplete.
So you need to create permalinks with minimal stop words which does not affect your rankings to a great extent. A permalink with focus keywords and minimal stop words makes it easy for Google bots to index your page and rank higher in search engines which is actually beneficial to drive organic traffic to your site.
So keep in mind all the keywords related to your article you are about to write and make sure that those  keywords are included in your permalink.



Creating Lists in HTML

Listing is a great way to organize text better in a document and makes it easier for the reader to understand what you are trying to convey. It is better to segregate lengthy text into lists rather than putting it in a single block of text.There are three ways to list text in HTML. You can create:

  • Ordered Lists
  • Unordered Lists
  • Definition Lists


Creating Ordered Lists in HTML

You may want your lists to be ordered based on either Numbers, Letters or Roman Numerals. All these type of lists come under Ordered Lists because they follow a particular sequence or order.Ordered lists are created with the help of the <ol> element. Each item you want to put in the list should be placed between the opening <ol> and closing </ol> element.

You can use numbers, alphabets and roman numerals by including their respective values of the attributes. You can refer to these attributes from the table below


Value of AttributeMeaningExample
1Arabic Numerals(Default)1,2,3,4,5
ACapital LettersA,B,C,D,E
aSmall Lettersa,b,c,d,e
ILarge Roman NumeralsI,II,III,IV,V
iSmall Roman Numeralsi,ii,iii,iv,v
The Syntax and example of creating an ordered list is given below.

<ol type=”1″>
<li>This is the first point</li>
<li>This is the second point</li>
<li>This is the third point</li>
<li>This is the fourth point</li>

The output of the above example looks like this

Similarly you can include the desired attribute value to the list element to get the appropriate list.

Creating Unordered Lists in HTML

Unordered lists do not contain any value for identification of a list but rather contains bullet points to list the text.
The unordered list can be created using the <ul> Element. The text to be listed should be entered between the opening <ul> and closing <ul> elements.
The syntax for the unordered list goes like this
<li>This is the first bullet point</li>
<li>This is the second bullet point</li>
<li>This is the Third bullet point</li>
<li>This is the fourth bullet point</li>
The text will look something like this

Creating Definition Lists in HTML

These are another type of lists used for providing terms followed by a short text of definition or description.
These lists are created using the <dl> element. This element is followed by <dt> and <dd>. The <dt> element is used to give a title for a specific point and the description is entered using the <dd> element.

Consider an example

<dt>Ordered List</dt>
<dd>This is the description of ordered list.</dd>
<dt>Unordered List</dt>
<dd>This the description of Unordered list.</dd>
<dt>Definition list.</dt>
<dd>This is the description of definition list.</dd>

The following image shows the output of the above example



Presentational and Phrase Elements

Presentational Elements

Presentational elements are generally used to change the way the text in a document is presented. There can be various types of presenting a text. Text may be presented in italics, bold, underlined and many other forms depending upon our functionality.

Below table lists all the presentational elements present in HTML and their use or purpose.

Note that these properties of text can be changed using CSS as well.

The <b>  ElementThis element is used to represent the text in Bold.
The <i>  ElementThis Element is used to represent the text in italics.
The <u>  ElementThe text is underlined with a simple line.
The <s>  ElementThe text is striked through with a straight line.
the <tt>  ElementThe Text will appear in a monospaced format.
The <sup>  ElementThe associated text appears as superscript
The <sub>  ElementThe text appears as subscript
The <big>  ElementThe text appears bigger than the remaining text.
The <small>  ElementThe text appears smaller than the remaining text.
The <hr/>  ElementCreates a horizontal line across the page generally after a heading or after the end of a para.

Phrase Elements

There are another set of elements called as the Phrase Elements which expands the way text appears on a webpage. 
These elements are listed in the table below
The <em>  ElementUsed to emphasise a particular word or sentence.
The <strong>  ElementUsed to show a more stronger emphasis more like the <em>  Element
The <abbr>  ElementUsed to indicate an abbreviated form by placing the abbreviation in between the opening and closing tags.
The <acronym>  ElementUsed to indicate to indicate that the word between the opening and closing tags is an acronym
The <lt>  ElementUsed to indicate a special term in italics.
The <blockquote>  ElementUsed to denote a block of text as a quote
The <q>  ElementUsed to denote a sentence as a quotation similar to the blockquote element except that this element is used within a sentence rather than a para or a block of text.
The <code>  ElementUsed to denote a block of code.
The <kbd>  ElementUsed to denote a piece of code similar to the code element.
The <var>  ElementUsed to indicate a statement from a programming language or a piece of code.
The <samp>  ElementUsed to display a code or a sample output
The <address>  ElementUsed to display an address

Elements Involved in Basic Text Formatting

There are various elements involved in formatting the text of a document. These elements are used to design the basic structure or skeleton of a document.The Basic Formatting Elements are

  • Heading Elements
  • Paragraph and other Related Elements.

Creating Headings using the <hn> Element

Headings are an important part of a document. There has to be a heading in each and every document we write. Headings not only improve the look and feel of the document but also is an important SEO strategy.
There are various types of headings which can be used in a document.
There are namely <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. 
These different types of headings would look similar to the image below
headings in html

The align Attribute

The align attribute is used to indicate whether the heading or text should appear on the left, right or on the center of the page. The values of this attribute can be seen in the table below
leftThe text appears to the left of the window. This is the default value even if this attribute is not used.
centerThe heading or text appears to the center of the browser window.
rightThe text or heading appears to the right of the browser window.

Writing Paragraphs using the <p> Element

The <p> element is a way to structure the document. Dividing the whole text into paragraphs makes the document less clumsy and makes it easier to read. This element can be used like the example shown below
    <p>This is the first paragraph.This is a sample text which denotes how a paragraph looks like using the <p> element.</p>
    <p>This is the second paragraph. This is also a sample text to show the second paragraph.</p>
   <p>This is the third paragraph. This is a sample text used to denote another paragraph.</p>
The output of the above code look like this
paragraphs in html

The <br/> Element

The <br/> element is used to create breaks between lines in a document. We use this element when we want to appear a part of the line in a new line.
We can also use the break element instead of the <p> element to create paragraphs in a document.
Let us look at an example:
This is a Paragraph of text used to denote the use of break statement.<br/><br/>
This is a second paragraph used in the example.</br></br>
The output of the above example may look something like this
break element in html
All these elements are the basic formatting used in HTML but there are many other formatting elements which can be found in CSS.

Internalisation Attributes

There are mainly three Internalization attributes that are applicable to almost all the XML elements. These attributes help us to write pages for different languages and character sets.

The three Internalization attributes are

The dir attribute.
The lang attribute.
The xml:lang attribute.

The dir Attribute

The dir attribute is used to specify the browser the direction in which the text should flow. There are two ways to specify the directionality of the flow of text. We can include this attribute with the <html> element to apply the direction of flow to the whole document and also this is supported in most browsers. The next way is to include this attribute in the <body> element to specify the direction of a specific portion of the document.
The dir attribute can have two values as follows
ltrLeft To Right
rtlRight To Left


The lang Attribute

The lang attribute allows us to indicate the main language we would be using in the document and this attribute is used in the backward compatibility to the HTML documents. The more recent language attribute is the xml:lang attribute which will be discussed next.

The xml:lang Attribute

This attribute is more recent to the lang attribute. This attribute can be applied to all languages written in XML, that is why the syntax xml:lang. Even this attribute like the dir attribute can be used in the <html> element and also with the <body> element depending upon the purpose.
This is about the Internalization Attributes and in the next article, I will be writing about the last type of attributes called UI Events.

Basic Attribute Groups

There are various attributes in HTML and they are better understood if we learn them separately rather than all at once. Attributes generally live on the opening tag of an element and provide extra information about the element that carries them. For example in Object Oriented Programming, for each object we create we also specify some attributes or properties that the object has to possess. In the same way each element in HTML has to be given some properties to better describe them. These properties are technically called Attributes in HTML.

There are basically three attribute groups in HTML

  • Core Attributesclass, id and title.
  • Internalization Attributesdir, lang and xml:lang attributes.
  • UI Events – onclick, ondoubleclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown and onkeyup.
 The core attributes are the class, id and title attributes which give different meaning to an element when applied. These attributes have to be applied within the opening tags of the element to which we want to specify the attributes. If all these look complicated, do not worry, I will be making a detailed tutorial on each of the attributes very shortly.

What are Core Attributes

There are four core attributes that are used on the majority of XHTML elements. These attributes are id title class style. These  attributes  basically define an element and give a special meaning to the defined element. All the HTML and XHTML documents revolve around these four basic attributes. That is the reason they are called Core Attributes.

The id  Attribute

The id attribute is used to uniquely define an element within a page or a document. We generally use this to distinctively identify an element so that you can link to that specific part in the document, or to specify the element so that you can associate a CSS or JavaScript to the content of that one element within the document. The syntax for this attribute looks like this:

The “string” can be anything like a name which can used to link and identify that element uniquely. For Example:
                                      <p id=”menu”></p>

The name of the id is given as menu where the term menu can be used to describe anything like a class or a JavaScript.

The class Attribute

The class attribute when included in an element is used to specify that the element belongs to that particular class. This attribute is commonly used in CSS, so I will be detailing about this attribute in the future tutorials. The syntax of the class attribute looks like this:


We can also specify more than one class name to an element.

                                        class=”className1 className2 className3″

The title Attribute

The title attribute gives a suggested title for the element. This attribute is some what similar to the id attribute but they differ in their own ways. This attribute is not mandatory to an element but I will show its real importance soon. The syntax for this attribute looks like this:

Now do not get confused with the <title> Element which we discussed earlier. That is an Element and this is an attribute.

The style Attribute

The style attribute is used to specify the CSS rules to an element. Below is an example of how this attribute looks like
                                 <p style=”font-family:arial; color:#FF0000;”>Some Random Text</p>

It is recommended that you avoid using this attribute and learn coding a seperate style sheet itself which I am going to discuss in the coming tutorials.


More Elements and Attributes


The <html> Element

The <html> element is the basic element of an HTML document. Any element in HTML should contain in this <html> element. This element should be used after the optional XML declaration and required DOCTYPE declaration. This element should have an opening <html> tag and the document should end with a closing </html> tag. This element can have the attributes such as id, dir, lang, xml:lang. I will be discussing about these attributes later in the coming tutorials.

The <head> Element

The <head> element contains all the other header elements. It is usually the first thing that appears after the <html> element. Each <head> element should contain a <title> element which indicates the title of the document. Along with the <title> element the <head> element can also contain other elements such as
  • <object> – This element is used to include images, JavaScript objects and other multimedia files.
  • <link> – This element is used to link to an external file such as a style sheet or JavaScript file which I will be explaining in detail in the coming tutorials.
  • <style> – This element is used to include CSS rules inside the document.
  • <script> – This is used to include script in the document.
  • <meta> – This element includes information about the document such as keywords and description which are usually helpful for search engine optimisation strategies.
All the above mentioned elements are just a brief descriptions. I will be detailing about them later in the coming tutorials.

The <title> Element

It is always recommended that you specify a proper title to your page to give an idea to the readers to what they are reading about. Also providing a suitable title will help the search engines to index your site or page better. The syntax of the title element generally looks like this:
                  <title>Design The Web</title>
The <tittle> element should only contain the text for the title and not other elements though it may contain the following attributes- id, dir, lang, xml:lang.

The <body> Element

This element appears after the <head> element and contains most of the web page or a document. It may contain some simple paragraphs or complex tables and forms. There are  several browser specific attributes that you might see on the <body> element. Some of these can be- language, topmargin, bottommargin, leftmargin, rightmargin, scroll, bgproperties, margin height, marginwidth.
Remember that all the attributes do not contain any spaces between them and they have to be written in a single word otherwise they are not recognised by the browsers as attributes.
  So I am going to end this tutorial here. In the next tutorial I am going to explain in brief about the various attributes and their usage.