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.

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!

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.