Must Have Developer Tools! Some tricks to develop quicker

Google Developer Tools, Some tricks to develop quicker

1. View Source => By going through menu navigation or Ctrl-Shit-I on windows or Cmd-option(alt)-I on mac.
2. Or for particular element, just right click on it and choose inspect element.
3. For fast navigation, prefer keyboard arrow keys to collapse or expand DOM elements. You will find the width and height of that active element as you move in Developer Tool.
4. To get the full view of the page, try Ctrl - (minus) to zoom out so as to see your whole page with developer tools open without scrolling. Sometimes useful to me.
5. You can copy the the content or the DOM elements by using your mouse, but you might like to do this by using console's copy() method. For example, copy(document.body.innerText) and then paste that anywhere. Its handy if you know the DOM element and may help for productivity.
6. Use clear(); function to clear the console, however the developer tool has a GUI for that.
7. Use inspect(body) to inspect body element of the DOM, just pass any element in the function.
8. Also, you can use $0 to access the element that is selected in the DOM in a console. So,  you can pass $( $0 ) for jquery method where an anchor tag was selected in your DOM, so it means you are accessing that anchor method.
9. Under Network tab, the blue line in the waterfall chart shows that the DOM is ready or the DOMContentLoaded Event fire and the read line shows the windows load event which waits for the documents to load images, iframes, etc.
10. You an see the cookies information by going through the Network tab and then selecting Header or Cookies tab.
11. For javascript debugging, we can edit the script file of the page on the fly and it will render it as this feature is unique to Chrome because of its V8 JavaScript engine.
12. Sometimes, its hard for us to find where the error is in our script, so you might want to open the script in developer tools and then click the pause button, now chrome will set a breakpoint when it find the statement because of which the error is being logged in console.

Learn how to build HTML5 and JavaScript Apps with MVVM and Knockout (Part - 1)

One needs to understand the "Separation of Concerns" while building an application:

1. The Structure i.e. HTML
2. Presentation i.e. CSS
3. Behaviour i.e. JavaScript

Do we use any UI patterns with JavaScript development, like 

1. MVVM or
2. Data binding structures

How should be write structured JavaScript? Should we write in a modular pattern?

Also, all apps love data, so, how should we care about data and bindings. Somehow, we need to load data from somewhere, such as using an Ajax service or loading JSON data on your screen and after getting the data how will you respect changes from the user

Knockout is a JavaScript library that can solve the above issues in a very nice and efficient manner.

So, what is Knockout?

1. It allows you to have rich client-side interactivity for your UX provide a good pattern. 
2. It gives you a good separation of structure and behaviour.
3. It provides you to use declarative bindings to be able to help you bind your UI elements, in case, HTML or even may be CSS styles and classes down to your source object. 
4. Offers you to work in MVVM pattern.
5. It has a very good browser support. (IE6+, Firefox 2+, Chrome, Safari, Opera)

Key Concepts of Knockout:

1. Dependency Tracking via observables (eg: a property depending on another property and it is in sync with a UI control and vice-versa(optional).)
2. Declarative Bindings (Instead of using JavaScript to go through DOM and find a particular control with certain ID use can bind the control from the html itself to push data to the UI and pull data from UI again from/to the source object.)
3. Templating Support (eg: you might have repetitive structures in your webpage like list of abc or rows in a list box, rows in a table or li in a ul/ol. You can use templates to take care of those views. You can use jQuery templates with Knockout, or native templates of Knockout or any third party templating engine.)

Demo

• Hello World Demo (Open in a good browser as CodePen needs it.)

The important factor is to understand the MVVM in terms of Knockout: the separation of concerns. 

1. MVVM is just a separation pattern and a way to organise your code structure to make it easier to maintain and to deal with separation and responsibilities.
2. Model-View-ViewModel
3. Not technology specific. ( you might have heard MVVM with XAML and now you are using with Knockout with JavaScript and HTML.)
4. Works well with data bindings. (in this case its html)

MVVM Components

1. We have a view which is this case is HTML. ( is the user friendly presentation of information)
2. We have our model which is in JSON. (javascript object in this case which has a property named as firstName)
3. Between above two, we have logic to separate to how to  present that model JSON data into the view itself and that is our view model. 
1. It contains all the behaviour for the view that the view needs and can aggregate on or more models to show the data inside the view.
2. Contains properties like firstName, methods and the Model.

Demo

• A quick demo using JavaScript's object literal notation
• A quick demo using JavaScript's function
• A quick demo

Visual Studio Extensions for your productivity

• Nuget - to manage 3rd party libraries and references.
• Web Essentials - code collapsing, vendor specific css properties, etc.
• Web Standards Update - html intellisense and validation.
• WoVS Default Browser Switcher - quickly change the default browser from visual studio.
• JSLint - javascript code analysis.
• CSSCop - catches common CSS issues.
• Resharper 6 (trial version only) - javascript refactoring tools.

Begin Coding with Knockout and Visual Studio

• Either download the JavaScript references from http://knockoutjs.com/.
• Either get the debugger or minified version from Github.
• Use Nuget to install Knockout.
• Add intellisense for Knockout in Visual Studio for any *.js files by adding the following: & lt; reference path="/scripts/knockout-2.2.0.debug.js" / & gt; at script-page level.
• After doing this, whenever you will type ko. you will see all the options that you can use from the Knockout library.
• It has to be the first line of code in the page and you have to comment it using "///".
• Or use a tool like Resharper that will add the intellisense support for your project by its own.

Key Resources

• Knockout  - http://knockoutjs.com
• Source Code - https://github.com/SteveSanderson/knockout
• Documentation - http://jpapa.me/kodocs
• Forums - http://jpapa.me/koforum
• Tutorials - http://learn.knockoutjs.com
• Stackoverflow - http://jpapa.me/kostackoverflow
• Ryan Niemeyer's Blog - http://www.knockmeout.net
• jsFiddle - http://www.jsfiddle.net
• CodePen.io - codepen.io

Stay tuned for part - 2.

The Building Blocks of JavaScript Programs

This post is second is series of learning JavaSciprt fundamentals. You may like to visit this article to go through all the posts in the series.

Now, we will learn some building blocks the bits and pieces, that one should know to write JavaScript code.

The working demo for this post is here.

Outline

• Comments - using which you can write some hints for a piece of code.
• Variables
• Null - a special object in JavaScript programs
• Undefined - which is slightly different primitive type in JavaScript.
• Finding Help - we will see where we can go for any assistance/docs for JavaScript.
• Objects
• Equality - how things are compared in JavaScript which one should be aware of it.

Comments

• The comments in JavaScript is kind of similar to comments syntax available in Java.
• Comments is something that won't output anything as a result like your other piece of code, it is just for your use as it doesn't get rendered by the JavaScript interpreter. 
• Single line Comment - "//", this two forward slash characters is used for single line comments followed by any single line sentence. For example, "// this is a single line comment".
• Multiline Comment - "/*  your content */", the syntax for this comment is forward slash and star to start with, put your multiline sentence after that and close it with start and forward slash. For example - /* As you know this is a multiline comment, in which you can break the sentence into n number of lines.*/.
• You might want to use comments for any piece of code in order to instruct yourself or to any other developer in the team that what that code does, etc.
• The working demo for this post is here.

Variables

• Variables in JavaScript are declared with 'var' keyword.
• Variables type is inferred, i.e. they don't have a type until a value has been assigned to a variable. When assigned, the type is then defined from type of value specified.
• The working demo for this post is here.

Null

• Is one of the JavaScript primitive types.
• Null means the absence of a value.
• But when null is used in any boolean expression like in case of a if condition, it evaluates to false.
• The working demo for this post is here.

Undefined

• Is also one of the JavaScript primitive types.
• It represents an unknown value i.e. a variable that has not been assigned anything.
• We encounter undefined when a non-existence object property is called.
• But when undefined is used in any boolean expression like in case of a if condition, it evaluates to false.
• The working demo for this post is here.

Finding Help

• Mozilla Developer Network

Objects

• Everything in JavaScript is an object except for the simple types like string, number, boolean, null and undefined.
• Objects are collection of properties and the values of those properties can be of any type.
• Objects are declared with the object literal notation.
  var anobject = { firstValue: 'a', secondValue: 2 };
• In the above example, we have created a anobject object, with two properties - firstValue with a string value and secondValue with a numeric value.
• In JavaScript, there is no class construct but we can define our objects and properties.
• The working demo for this post is here.

Equality

• Objects are only equal to them-self.
• Primitives are equal only if the values matches like ("Dog"==="Dog").
• There are two types of equality operators in JavaScript:
• ==
• ===
• The difference between the two is type coercion.
• == only checks for values but === check for values and also for the type.
• Use === over == and !== over != as it gives a proper answer comparing value and the type. Although, the decision is yours. 
• The working demo for this post is here.

 Keep reading the other post in this series to learn JavaScript. Happy Learning!

Learn Modernizr Library with some quick Demo

If you are reading this article you might already know what Modernizr has to offer but the post aims to give you some working demo instead of a content based approach. If you are looking for a documentation it is available on their website and it offers a step-by-step guide. But while using it, I have found that there was a lack of demo that how to really use its features in real world, so, I thought of creating a demo which you can fork it and keep it for your own reference.

Our users always remember the website experience that we offer

I would like you to see some of the examples that I have in order to understand the advantages of a responsive web design.

For a quick demo, I request you to click the links below. Those websites are very good and is already helping a business. The links below will demonstrate you a user’s experience when they are browsing our websites from different devices:

• Website 1
• Website 2

Did you enjoyed moving the scroll-bars and finding the content that we want our users to see? If yes, then it’s time to stop reading here and go back to the page again and try completing a user journey. Come back and start reading here:

When we create a website or any web solution for our users, we can’t guarantee that they will read these words on a printed page, holding a tiny paperback in their hands. Maybe they are sitting at desk with an electronic copy of the content on a screen. Perhaps, they are on morning commute, tapping through pages on a smart phone or swiping along a tablet. Or maybe they don’t even see the words as we blessed people do or may be their device or desktop is simply reading this book aloud.

The best way to understand is to replace water with our websites and water’s container with device browser. I was working on a single page, just to demonstrate you a sample of website that is responsive. I have not spend any minute for the designing or for actual content because that will take a much amount of time and is not needed for this instance. Again, I would like you see and tell me about your experience by going through URLs below

• Prototype 1
• Prototype 2 (This is my website which is in progress…) 

The above prototype contains all User-Interface elements that we need like a form, slide show, images, navigation, header, footer, sample paragraph, etc.

I am sure by now you have discovered the importance of a responsive web design and the fun behind it. Soon, I will be writing the main concepts for create a responsive design. Stay tuned!

An Introduction to JavaScript

We will focus on JavaScript as a programming language rather than its usage in web or ajax based applications. Because, one should know the building blocks of a language to really make most out of it.

Overview

• What is JavaScript?
• Why is JavaScript important?
• History
• An Hello World demo
• JS Bin / CodePen / JSFiddle / JSDB- a handy tool for you.

What is JavaScript?

• It is a scripting language with no static/void/main.
• The language of the browser to handle scripting activities.
• Its a dynamic language which means that one can modify the objects/types on the fly.
• It supports function programming and object-oriented features like other languages for example - Ruby, C#, etc.
• If you are aware of Java syntax, you might find learning JavaScript easy as the syntax is somewhat same because it appeared around the same time when Java was very popular and had lot of buzz in the market.
• Other than the syntax, JavaScript as a language is more close to languages like Scheme and Self semantics.
• It is very simple to learn and is very small/compact.

Why is JavaScript important?

• Almost all the computers on the planet have JavaScript interpreter. It is possibly the most used language on the planet.
• It has good browser support and vendor like Microsoft, Mozilla, Google, Apple, etc are researching continuously for JavaScript interpreters.
• AJAX/Rich Clients - You might have heard about these terms which uses JavaScript heavily. This was a turning point for this language as people then started focusing more on JavaScript to achieve more and more rich activity in the browser.
• It is a powerful and highly flexible language.
• The usage of JavaScript at server-side is also increasing because of the interest people have in JavaScript and the powerful interpreters.

To boost your interest to learn this language:

• A good example of a rich client interfaces in the the browser that you might be aware of or have used is Google Docs Interface where you can just start typing, give formatting from the toolbars, use drawing tools to draw different shapes, etc. 
• Another example can be Processingjs, if you love animation. Try spending some time on the demos available on Processingjs website.
• Go to BallDropping website and play with small white balls. It's a Chrome Experiment.
• Also, when playing with above demos, don't forget to open your system's task manager to see the CPU usage (especially for ball dropping animation, if you add many balls). You must know that even though it is possible to create such animations but sometimes, it's not the efficient way to achieve those animations.

History

• Netscape wanted to have scripting capability to the browser & JavaScript was born.
• Developed by Brendan Eich. 
• First version - Netscape 2.0 (1995)
• Microsoft then implement their own version and named it as JScript (named differently to avoid issues with Javascript trademark).
• In 1996, JavaScript was submitted by Netscape to ECMA International to standardise it as ECMAScript in the ECMS 262 standard.
• Working with DOM within browser was somewhat odd because of different browser notations.
• People discovered JavaScript's brillance while working with Ajax/Web 2.0.
• To ease the cross-browser development, frameworks like prototype and jQuery were and still are a great help.
• The usage of JavaScript at server-side is also increasing. Example: Node.js, the event based web server and CommonJS,  the JavaScript standard library.

An Hello World demo

• You can find the demo here. I will be using CodePen to show all the demos. I like CodePen as it allows you to write HTML, CSS, JavaScript and run the sample within the browser. There are different alternatives as well that are listed above at the starting of this post. Feel free to try as they are free.
• Also, one needs to understand that all the browsers renders a webpage from top to bottom, so if you write a heavy script block or which needs some action by a user as in demo above, you won't be able to see the rest of the content below the script tag because it has not been rendered it. 
• To avoid the above problem, you should practise to include all your scripts just above the body end tag which will help in better performance of your webpage as it will load fast. Alternatively, you can run a script when the webpage has finished loading in the browser (example - window.onLoad() or jQuery's ready() method).

I think this is enough for a quick introduction to JavaScript and believe me, JavaScript is very important for developer and yeah, it is different to some of our mainstream languages like C# or Java. Also, it is easy to learn and powerful too. Keep reading the other post in this series to learn JavaScript. Happy Learning!

Learning JavaScript Fundamentals

I was about to start a project which is heavily based on JavaScript. I thought it will be a good approach if I also start learning JavaScript fundamentals for my bad memory! And thought, if I am learning something from scratch, I should write it somewhere for me and for others. Though from scratch, but this series fo learning JavaScript fundamentals will be jump start tutorial. I will try to cover all the basic stuff. Let us start now.

 Below you may find the links to all the part of this series:

• An Introduction to JavaScript
• The Building Blocks of JavaScript Programs
• Functions
• Control Flow
• Types & Libraries
• Firebug
• Testing JavaScript.

Be patient to go through above topics. Hope this series will help you to learn one of the scripting languages that many developers enjoy! :)  

Some tools to instantly code faster...

I thought it would be great if I share the knowledge that I have with you. This  is my attempt to share my knowledge that can help you code in a better way and it would be great if you also share the tools you have in your arsenal. 

​

1. Let us take a demo. If I ask you create this piece of html,

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

​
I am sure you will go on create element by element and will type a lot. Ever wondered how you can boost your coding skills?

Well, I can create the above mark-up by following code:
#page>div.logo+ul#navigation>li*5>a{Item $} and this will expand to the above mark-up! Cool. Right?

Just imagine, you will be able to create a whole basic webpage structure with in seconds. You can do many such stuff just by going through here: http://docs.emmet.io/ 

1. 
   
2. I also save all my projects on github through which I can access it from anywhere I go. https://github.com/
3. I find myself writing the same piece of code many times and yeah, it is sometimes odd to remember the code that I discovered few days back. Thus, I use tools like https://gist.github.com/ to save all my snippets which I can access it anywhere.
4. There is no need to create a page and add html, css, js etc in your pages and creating a project structure. Just go to http://jsfiddle.net/ and http://codepen.io/ and start writing your code and share it with your team members anywhere on the globe!
5. You may find yourself very productive if you start using a CSS pre-processor like LESS, SCSS or SASS. They extends CSS with dynamic behaviour such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
6. Choose a good code editor. Visual Studio (for those who work with Microsoft technologies) is very good but sometimes there are more better alternatives if you love working with HTML, CSS, JavaScript.
7. Expertise in the web developer tools either the Firebug or Chrome developer tools or the one in IE or Safari. 

I will keep extending this list of tools that can help you to be more productive and I am sure you will like the tools that I have listed above and you might remember me :) if you are totally new to these tools. 

Does your code communicate with other Dev's?

In a team atmosphere, the personal nature of coding style is a challenge. 

The following example might explain the importance of coding style:

"The situation of a group of musicians trying to form a band. Each one comes in believing that their way of doing things is best (their "method" or "process"). The band will struggle so long as everyone is trying to do their own thing. It's impossible to create good music unless everyone in the band agrees on the tempo, the style and who should take lead during a song. Anyone who has ever heard a high school band perform knows this to be true. Unless everyone is on the same page, you aren't going to accomplish much."

Thus, we should start following a style guide. Following are the few style guides that I have in my list and I try to follow them.

1. http://docs.jquery.com/JQuery_Core_Style_Guidelines 
2. http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml 
3. http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
4. https://github.com/necolas/idiomatic-css 
5. https://github.com/styleguide/ 
6. http://msdn.microsoft.com/en-us/library/ms229042.aspx  Microsoft - Design Guidelines for Class Library Developers.
7. http://www.idesign.net/idesign/download/IDesign CSharp Coding Standard.zip  IDesign C# Coding Standard.
8. http://www.danrigsby.com/Files/csharpcodingstandards.doc Dan Rigsby C# Coding Standards.
9. http://submain.com/products/guidelines.aspx SubMain C# / VB.NET Coding Guidelines.
10. http://weblogs.asp.net/lhunt/archive/2004/08/17/CSharpCodingStandardsv113.aspx Lance Hunt - C# Coding Standards.
11. http://www.dotnetspider.com/tutorials/BestPractices.aspx  DotNetSpider - C# Coding Standards and Best Programming Practices.
12. http://msdn.microsoft.com/en-us/library/67ef8sbd.aspx Microsoft - C# Programming Guide.
13. http://www.tiobe.com/content/paperinfo/gemrcsharpcs.pdf Phillips Medical Systems - Coding Standard C#.

You can opt one and start extending it. Also, you might also have some experience or resources under your arsenal :D which you can share with team members.