Things to learn if you want to learn Web Development

1. Responsive Web Design - Things that you need to focus on:

• Media queries - for example: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style480.css" />
• Viewport meta tag - controls the dimensions of the mobile browser window
• Flexible layout - Use percentages and third-party flexible grids
• Flexible images - set max-width style for image as 100%; myimage { max-width: 100%;}

2. Cascade Style Sheets

• inline styles, internal styles and external styles
• id, class, element selectors and specificity
• CSS positioning and display properties
• Building navigation bars using CSS
• Background images, sprites
• Building simple grids
• Playing with page CSS using Chrome developer tools, Firebug in Fire fox
• CSS3 features

3. JavaScript

• Capturing the DOM elements
• Functions - creating and calling
• Variables - globals, locals, hoisting
• Loops and Conditionals
• Form validations
• Event binding and delegation, Event capturing and bubbling
• Objects and constructor functions
• AJAX

4. HTML Elements

• Form elements
• Layout elements
• Special elements
• Web Storage, Local Storage
• HTML 4.01 and HTML 5

Learning PHP

PHP or Ruby on Rails? Which would be the easy server side language to pick up in no time? And how difficult to install it on Windows 8?

Well, these were the questions that I asked myself when I thought about a simple server side scripting language that I can use to explain some basics to a novice web developer.

I decided to go with PHP for the following reasons:

• I read couple of chapters from a book (Head First PHP and MySQL) and went through couple of lessons in W3C Schools and felt it was easy.
• I checked in dice.com and found more job opportunities for a PHP developer than a Ruby on Rails developers.

So....

1. I followed this web site http://www.c-sharpcorner.com/UploadFile/47548d/how-to-install-wamp-server-on-windows-8-1/ and insalled WAMP (Windows, Apache, MySQL, PHP) server on my winodows 8.1 machine. Surprisingly, it was simple and straight forward. NOTE: Steps 1 through 8 were good enough for me and the WAMP server was up and running like an Arabian horse.
2. From localhost index page, I opened the sqlbuddy and created a sample table in test database.
3. I wrote the following simple program that talked to the database and provided me the response:

<?php // Connecting to a database using parameters... // mysqli_connect(hostname, username, password, database name) $dbc = mysqli_connect('localhost','root','','test') or die('Error connecting to MySQL server.'); // Select statement to get data from 'person' table $query = "select firstname, lastname from person"; // Executing the query $result = mysqli_query($dbc,$query) or die("Error querying database"); // Accessing the data that is obtained while($row = mysqli_fetch_array($result)) { echo $row['firstname'] . " " . $row['lastname']; echo "<br>"; } // Closing the database mysqli_close($dbc);
?>

So much for a day, huh? I am happy because I learnt something today!

Using Dojo DOH

D.O.H.: Dojo Objective Harness

DOH is...

• used to unit test JavaScript functions and custom widgets
• Runs in many environments from browsers to JS runtime environments such as Rhino, node.js

Where is DOH located?

• Download Dojo source code (you get dojo, dijit, dojox, util packages)
• DOH is located in util package.

Give an example of running a doh test from browser?

• Write a unit test file (mysampletest.js)

define(["doh", "../date"], function(doh, date){ //I am trying to test the functionality of date module
    doh.register("tests.date.util", [ //tests.date.util is the name of the test group
        function test_date_getDaysInMonth(t){//test_date_getDaysInMonth - name of the test
            // months other than February
            t.is(31, date.getDaysInMonth(new Date(2006,0,1))); // returns true

            // Februarys
            t.is(28, date.getDaysInMonth(new Date(2006,1,1))); // returns true

        }
    ]);
});

• Save this file under dojo/tests (if you are testing some modules in a package, save the unit test file in that package under tests folder - in this example, I am trying to test the date module in dojo package, so I am going to save it under dojo/tests folder)
• Run it from your local browser

http://localhost:8080/js/dojo-src/util/doh/runner.html?test=dojo/tests/mysampletest

Suppose if I have more than one unit test file (for example mysampletest.js & mysampletest2.js) how can I provide those files to doh?

• Save both the files under dojo/tests
• mysampletest.js

define(["doh", "../date"], function(doh, date){ //I am trying to test the functionality of date module
    doh.register("tests.date.util", [ //tests.date.util is the name of the test group
        function test_date_getDaysInMonth(t){ //test_date_getDaysInMonth is the name of the test
            // months other than February
            t.is(31, date.getDaysInMonth(new Date(2006,0,1))); // returns true

            // Februarys
            t.is(28, date.getDaysInMonth(new Date(2006,1,1))); // returns true

        }
    ]);
});

• mysampletest2.js

define(["doh", "dojo/_base/array"], function(doh, array){ //I am trying to test the functionality of array module

    doh.register("tests._base.array", [//this is the name of my test group
        function testIndexOf(t){ //name of my test
            var foo = [128, 256, 512];
            t.assertEqual(1, array.indexOf([45, 56, 85], 56));
            t.assertTrue(
                array.some(foo, function(elt, idx, array){
                    t.assertEqual(3, array.length);
                    return true;
                })
            );
        }
    ]);
});

• Create a module file, mysampletests.js as below and save it under dojo/tests

define([ //Module that helps loading of unit test files
    "dojo/tests/mysampletest",
    "dojo/tests/mysampletest2"
], 1);

• Run the unit tests by providing the module to the doh:

http://localhost:8080/js/dojo-src/util/doh/runner.html?test=dojo/tests/mysampletests

Best references to understand more about D.O.H:

http://dojotoolkit.org/reference-guide/1.10/util/doh.html

By the way, what is the meaning of assert?

as·sert

əˈsərt/

verb

1. state a fact or belief confidently and forcefully.

   "the company asserts that the cuts will not affect development"

   synonyms:

   declare, maintain, contend, argue, state, claim, propound, proclaim,announce,  pronounce, swear, insist, avow; More

   • cause others to recognize (one's authority or a right) by confident and forceful behavior.

     "the good librarian is able to assert authority when required"

     synonyms:

     insist on, stand up for, uphold, defend, contend, establish, press for,push for, stress More

   • behave or speak in a confident and forceful manner.

     "it was time to assert himself"

     synonyms:

     behave confidently, speak confidently, be assertive, put oneself forward,take a stand, make one's presence felt;

A Sample program accessing Dojo CDN

<!DOCTYPE HTML>
<html>
<head>
<title>Sample Dojo Page</title>
<meta charset="utf-8">

<!-- Get the Dojo styles Google's CDN -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">


<script>dojoConfig = {async: true, parseOnLoad: true}</script>

<!-- Bootstrap Dojo From Google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>

<script>
    require(["dojo/parser", "dijit/form/ValidationTextBox"]);
</script>
</head>
<body class="claro">
    <label for="phone">Phone number, no spaces:</label>
    <input type="text" name="phone" id="phone" placeholder="someTestString" required="true"
        data-dojo-type="dijit/form/ValidationTextBox"
        data-dojo-props="regExp:'[\\w]+', invalidMessage:'Invalid Non-Space Text.'" />
</body>
</html>

7/6/14

Playing with HTML5 Canvas

So for this week, I want to explore the HTML5 Canvas a little bit. But where to start? I was searching on google and found the following link:

http://codetheory.in/20-best-canvas-tutorials-and-examples-that-will-make-you-a-canvas-master/

The links provided in that page are good and I started with one link http://code.tutsplus.com/series/canvas-from-scratch--net-19650. I just completed the first tutorial in that and felt very comfortable with the explanation. I am going heads on into the second tutorial :)

6/1/14

Git & GitHub

Simple instructions for a beginner to set his code on GIT repo:
https://kbroman.org/github_tutorial/pages/init.html

Couple of good sites that I come across this week that have excellent explanation on Git and GitHub:
http://git-scm.com/book/en/Getting-Started-Git-Basics
http://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1#awesm=~oFT1fA8SbuXSlO

What is Git?
As per http://git-scm.com/  , Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. That's a cool one line explanation about Git.

Looking for a still simpler explanation?
Git is a version control application.

So what is GitHub?
GitHub makes Git easier to use by providing the visual interface and provides social network kind of environment for your projects on the web.

5/25/14

An HTML page with equal height columns

It's almost 2 months since I stopped adding content to my blog. Did I learn anything but haven't mentioned here? I don't think so. So the most I post to this blog, the better my learning curve would be!

Building equal height columns using simple CSS is a challenging task. I came across this page http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks where it was explained in an artistic way. Also found the other web sites on the same topic:

http://www.pmob.co.uk/pob/equal-columns.htm

http://www.vanseodesign.com/css/equal-height-columns/

3/22/14

Learning about Angular JS

Well, today I wanted to know about Angular JS and as usual, I know almost nothing about Angular JS other than things like Angular JS is supported by Google and there are plenty of job opportunities for an Angular JS developer. I started looking for a good tutorial that gives the basic idea about Angular JS and at the same time won't scare me away from it.

I came across this tutorial (http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/) that sure helped me to take my baby steps in learning Angular JS.

And also now I know where I can find the Angular JS API: http://docs.angularjs.org/api

I am all excited to know more about Angular JS now!!

More references:

http://dotnetlearners.com/tutorial/angularjs/17/angularjs-tutorial-introuduction-to-angularjs

https://docs.angularjs.org/guide/introduction

http://viralpatel.net/blogs/angularjs-controller-tutorial/

https://www.youtube.com/watch?v=i9MHigUZKEM

http://theprofessionalspoint.blogspot.com/2014/02/basic-angularjs-interview-questions-and.html

3/1/2014

Building your own web server with nodejs in 5 minutes

Well, it took me almost a week to get back to my blog :)

Couple of things I want to add to my blog before I forget! I mentioned about NPM, the node package manager that helps you to get the new modules. So how do I request for a new module using npm?

Psst! I stumbled upon this blog http://blog.modulus.io/absolute-beginners-guide-to-nodejs which got cool things that you can do with node.js. And I am installing express module (of course, using npm) to build my own web server.

I have my web project 'npj' created under: C:\Development. So basically 'npj' is a folder under C:\Development that has all my JavaScript, CSS, images folders and files.

Now request for the module you are looking for:

C:\Development>npm install express

npm is going to install the express module in there, that's it!

Now, let's go ahead and create a web site and browse it using your own web server that you can build with node. Create a file nodeWebServer.js under C:\Development.

           var express = require('express');

           var app = express();

           app.use(express.static(__dirname + '/npj'));

           app.listen(8080);

Four lines of code and my server is ready! Run my server as below:

C:\Development>node nodeWebServer.js

Note: Now you are using node.js to run your newly created web server. So node.js is busy running it so you CAN NOT access it from command prompt any more unless you stop your web server.

2/23/2014

More on nodejs

Well, I thought of jumping right into tuts+ tutorial on node.js but before that I wanted to know more details about node.js. Things like why should I use node.js, and how is it going to help me and where? And following is what I found:

• Node.js is a command line tool (or some people call it as a JavaScript environment) that helps to run JavaScript programs.
• You can build a regular web server with node.js in no time (rather surprising as I remember the days when I was looking to set up a local web server like IIS, Apache tomcat, etc. to help me develop some html stuff on my local PC).
• V8 is Google's open source JavaScript engine and node.js is built on top of V8.
• When you build a web server with node.js, you can share code between browser and backend
• You can even connect to a database like mysql
• Node.js uses a module architecture and this helps to build complex applications easily.
• To effectively run a company (either a micro company or a major corporation), you need a manager to manage the show. Node.js is no less. It has a package manager, called Node Package Manager (NPM) that helps you to install new modules.
• You want to write a JavaScript program and run it using Node.js, you basically need the modules that are provided by node.js. You can check for any new modules available on Github. How to install new modules using the node package manager?
npm install new_module

2/22/2014

2/22/2014

About node.js

These days everybody talks about node.js. Some of them boast about what cool things they did with node.js. Well, I need to catch up with these guys but I don't want to spend too much time learning node.js. So I set out a challenge myself to find out more about node.js in a short period of time.

So I downloaded node.js and all ready to go!

My first experiment with node

1. On my windows PC, I created a file test.js under C:\node-examples folder
2. I added the following line in test.js:
console.log("testing node");
3. From command prompt, I ran the command "node test.js" and "testing node" came up.
C:\node-examples>node test.js
4. Viola! I was able to run my JavaScript file from command prompt using node.

My second experiment with node

1. I modified test.js so that now it has the following content:
function printLine(){
       console.log("printing from node");
}
console.log(printLine());
2. From command prompt, I ran the command "node test.js" and "printing from node" came up. Nice!!
C:\node-examples>node test.js

Notes:

There is this site http://code.tutsplus.com/tutorials/nodejs-for-beginners--net-26314 where they have a simple but good tutorial on node.js! I am going to dive into that right away!