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.