HTML 5 tutorials Part 4 - Introduction to HTML5

Initial 3 parts Part1, Part 2 and Part 3 we talked about the basics of HTML. I know most of the developers usually know about this stuff but it is always to brush up the basics before talking about the new stuff.

From this part we will start more on HTML5. First question that come to mind is what are the problems that are being solved by HTML5?

What is HTML5?

HTML5 is combination of new html elements and lots of new JavaScript APIs. I know this not a definition you were expecting but in reality this is it. So do we really need to call it HTML5? I think we can just say HTML as there will be new development but I guess there won't be any HTML6. It will be called on HTML.

Problems solved by HTML5

SEO

Previous we use one tag mostly in the web page design, I guess you know it is div. So for search engine to identify different parts of the page is by scanning the ids. So we need to keep consistent ids across the web pages. How this is solved by HTML5?

HTML5 provide us different html tags like header, main, footer which are used to specify the header content, main content and footer content of the page. Which makes is easy for the search engines to find specific contents of the page. It provides semantics for the web pages.

Mobile Friendly

Billions of people are now using mobile device and we want to make sure that our web pages are more suitable for mobile. If you open up a web page on mobile than you get an option to make the web page mobile friendly and read in mobile mode. As soon as you click on this option the web page completely change the design as per the mobile form factor. So it is easy to develop the web page for vast variety of mobile form factors.

Multi Media

HTML5 provide tags which can be used to host the multi media content like music, video, graphs and games. Now developer can develop a full fledged  game only in HTML5 and supporting CSS3 and javascript. So we do not need to use Flash or Silverlight to show videos or animated stuff on web pages. 

we will discuss these features in details as we move along the tutorials. I am sure there are other many important things which can be done easily in HTML5. Please add these to comments to share with others.

So here is the basic structure of HTML5 page that you can see.

Advanced JavaScript Topics Part 2

We were discussing the let keyword in the Part 1 of this series. We discussed what the advantages and how we can use let keyword in the code. However, let keyword has a problem it does not support hoisting, means if you have declared a variable using let keyword in the mid of the block it would not be available in the part above the declaration of the let keyword.

So you always make sure that let is declared at the top of the block.

As we discussed earlier let keyword kind of Hack the scope implicitly. We can always write the code to make sure when we see we can explicitly identify that this block is a scope. The example given the in the Part 1 of this series used the implicit way. To use the explicit way do it like this

function foo(bar) {

    "use strict"

    let (test = bar) {

        console.log(test) // "bar"  

    }

    console.log(baz) // reference error

}

However, this syntax is rejected by the committee. we can use some other way to make sure we see the block scope in the code as we read the code.

function foo(bar) {

    "use strict"

    /*let */

    {

        let test = bar

        console.log(test) // "bar"  

    }

    console.log(baz) // reference error

}

This is one way to do it. Keyle Simpson have created this great tool to help you with block scoping it is called Let-er .

So, as we started to talk about tools you might want to take a look at traceur-compiler it generates ES 5 code from ES 6 code. As there is development going on in ES 6 you should start writing your code in ES 6 and use a transpiler to convert the ES 6 code to ES 5. You can use grunt-traceur . Other than this you might wanna take a look at the tools for ES 6.

Hoisting

Hoisting is a concept which is developed to understand how JavaScript works when we declare the variables and functions. Take a look at the code below

Advanced JavaScript Topics Part 1

If you are writing Hybrid Mobile Applications than JavaScript should in your blood. So, I am trying to write something about JavaScript today.

Some Resources

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide : It is Mozilla Developer Network also known as MDN. It is an open source Wiki also, which I  think not known to most of the people. It is one link that should be bookmark in your browser.

• https://github.com/rwaldron/idiomatic.js : It is a write up of idiomatic code that is widely accepted across the developer to write consistent JavaScript code. You may not agree with all the code which is there but it is a great place to start. There are couple of quotes written on the git page, which I like it is

         "Arguments over style are pointless. There should be a          style guide, and you should follow it"                

         Rebecca Murphey

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/ : This is one stop shop for design patterns in JavaScript and if you are going to write a clean code in JavaScript and Follow a Design to solve the problems in JavaScript you should go through this.
• 
  
•     http://www.ecma-international.org/ecma-262/6.0/ : JavaScript is EEMA Script if you don’t know. This is the language specification and I am sure many of you have not referred to this. If you are referring to this means you are writing some serious efficient JavaScript Code.

Hybrid App Development Part 1

So, in the previous blog Introduction to hybrid app development we learn about what is hybrid app. Today, we will learn more about hybrid app.

1. Hybrid App Architecture : Hybrid App Development Part 1
2. Development tools           : Hybrid App Development Part 2
3. Debugging techniques      : Hybrid App Development Part 3
4. Building Hybrid App        : Hybrid App Development Part 4
1. UI Development     : Part 4.1
2. Fetching Data and Angular Caching : Part 4.2
5. Testing the App                : Hybrid App Development Part 5
6. Deployment of App          : Hybrid App Development Part 6

We will talk about Architecture of Hybrid Mobile Application. We will discuss each of the component in detail. 

So first question that came to my mind when I think of Hybrid App Development is that what is it that enables this?

Answer to this Question is 

Web vs Native vs Hybrid Applications

In my previous blog Introduction to Hybrid Application development, we talk about different technologies which we will can use to build a Hybrid Application development.

However, before going into deep with Hybrid Application Development I was thinking to do a comparison between Web vs Native vs Hybrid Mobile applications.

Web vs Native vs Hybrid Mobile Applications

What I think about these different techniques for Mobile Application Development is that we should go with Hybrid Mobile Application development as over the past couple of years the Tools which are being used for Hybrid App development are matured and have been popular enough.

I didn't want to mention this but if you are a mobile app developer than you can see that the jobs in the IBMWorklight are more than any other Tool being used for Hybrid Mobile Application Development. If you would ask me what I am favoring the Hybrid App development is because

1. Single CodeBase for all the platforms. You need to maintain only one code for different platforms like iOS, Android and Windows.
2. Development is faster. As we are using the existing Web application development technologies like JavaScript, HTML and CSS with Apache Cordova
3. Deployment as Native apps by wrapping the web app using native framework.
4. IBM Worklight provide Single Notification server which can be used to deliver notifications to all the different platforms.
5. Integration with native features is very easy.
6. Offline databases can be used to store data when network is not available which huge advantage for offline support is.
7. There is huge repository of Cordova Plugins which can be integrated easily.

I would like to know your opinion on this before I start the Hybrid application development series and please suggest if there is anything specific you want me to include in the series.