Predefined JavaScript function methods: apply(), call()

I was searching online to find a way to explain JavaScript predefined function methods: apply() and call(). This site http://hangar.runway7.net/javascript/difference-call-apply explains in simple English. Thanks a bunch!

Sample Ajax using jQuery & PHP

I started searching for a simple example that covers "PHP, jQuery, Ajax" and I found this web site which is simple and awesome: http://brian.staruk.me/php/2013/sample-jquery-php-ajax-script/. Thanks to Brian Staurk!

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 :)