JavaScript day 2

In today's session we were given 3 interesting questions. I will share them with you now,
1.Write JavaScript code to crash a browser
2.Create a simple pattern using JavaScript
3.Write your own programming language using JavaScript


The day went in solving these 3 questions. You too try coding answers.
I will share my answers along with concepts used for coming up with the solution in next post.

Javascript Introduction

Audio blog on JavaScript introduction


The day went away in a jiffy learning basics of javascript. I went through basic and some advanced concepts of javascript in www.w3schools.com . It was fun. 

I would now explain a popular javascript functionality of ‘handling events’ with not-so-popular functionality of html ..’maps’ !

Events -- > actions performed by user like mouse click, keystroke etc...
Here i have done a sample program which uses onmouseover and onmouseout functions of Javascript. 
Sharing screenshots of code and output with you here,
pic1 - html page containing the javascript code as well.
The code is kind of self explanatory.
pic2 - output.. the paragraph content is head because the mouse pointer was hovering over the upper part of the picture. A video would have been better. But this is a very simple program. U can very well code and see the output in your machine.

Pic 1 the html file

Output. Mouse pointer is over head of penguin :P

Will be posting more about JavaScript in coming days.
See you in next blog.

TDD and BDD

Audio blog on TDD and BDD


TDD:
TDD-->test driven development
Adhering to tdd means you shouldn’t write a line of code without developing test case for it first !!
For beginners this may be very difficult...sometimes we write functional code without writing test cases. That’s not correct TDD.
It’s a technique where we use unit tests to drive the design of the program or project.
Unit tests ??
    These are very small scripts which send some input to a class or method and verifies if the result is same as the predicted result.
For example , suppose we have a function to concatenate two strings, we test it like,
START TEST
    assert(concatenate(“hello”,”world”),”helloworld”,”expects helloworld as output”);
END TEST
Forget the syntaxes used above, they are invented by me now to explain testing.
There are different testing frameworks available for carrying out testing in different programming languages.
Java - JUnit
C - Check
...

How TDD works? or Motto of TDD..
RED ---> GREEN --> REFACTOR

RED --> Develop a test case and make it fail. ( a test case will obviously fail without even writing the function it is testing)
GREEN --> develop code so that the test case developed in the first step passes.
REFACTOR --> Change code to remove duplication(accept it.. there will be some sort of duplications even in experts code) , improve the design.

It's to be noted that testing is to be done after refactoring to verify everything is working correctly.
This is done for every piece of code that is going to be a part of your project.
Getting the point?
You develop test cases based on requirements and then write code to pass those test cases . This is the essence of TDD.

Why use TDD ??
You may think you are good at designing and then implementing the same. But that may not be the case. May be you are a gifted programmer and designer.. ! but that may not be the case with everyone. TDD makes sure that the code you write is good. You will understand if i explain some advantages of TDD,
Advantages:

• It helps you in proceeding step by step. The important thing is that it gives you confident that the step you completed is perfectly working and correct. Some programmers tend to code many many lines of code and then wonder where the bugs are !! it's always better to go step by step.
• It forces decoupling of modules or dependencies. For example , you write a program to find multiplicative inverse modulo of a number. This program in turn needs to calculate gcd of the number and the modulo involve. Normally you tend to write the code to calculate the gcd within the main module itself. So they become coupled. If you need to find gcd of two numbers in some other program you need to copy paste the code. Had you used TDD you would have developed test cases to check whether the gcd algorithm works correctly. Automatically you would have put the gcd algorithm as a separate module. Decoupling happens !!
• The test cases are like a constant feedback to the developer that the modules are working properly. Again it's for the confidence of the developer. It helps in easily identifying and fixing bugs too.
• It is like a documentation that never goes out of date unlike the documentation developers write !

BDD:
It stands for behaviour driven development. It involves identifying behaviour of a system and then writing test cases for that behaviour to be satisfied. It combined acceptance testing and unit testing.
People consider BDD as rephrasing the existing good testing process based on TDD. Am not going into BDD any further as i have zero experience in them.

Where TDD may go wrong? or what led to BDD when we have TDD !!
TDD may have design impacts (not always.. happens due to bad programming logic or poor design knowledge of the programmer). Sometimes design may not be clear to the coder. In those cases you need to change the test case itself which may prove very costly.
Lot of time investment is involved to get into the TDD approach. Normally you can see developers skipping test cases for some part of the code or project .

TDD approach by example:
    Let’s assume you are writing a simple 2D game... like mario.
As you are considering game as an example test cases will be innumerable. I will tell only a few here.
When mario gets a mushroom,
    if he is small he must become big
    if he is big then he must get firepower

Now you decide to put this into code, you decide to write a mushroom_got function which gets called when mario gets a mushroom.
so you start by writing test cases.

testcase 1:
input : small mario gets mushroom
result: big mario

test case 2:
input: big mario gets mushroom
result: mario with firepower

Now you begin implementing methods that does the same. You then find that becoming big or getting firepower also needs to be tested.

so you write test case for those like,
after becoming big -- is height of mario larger than his prev height etc..

for implementing this testcase you will write makemariobig as separate function and then use it inside the mushroom_got function.

This is how TDD works. You can understand how it helps in deciding the flow too.

That’s it for today. See you in next post.

CSS - OOCSS,sprites,media queries

Audio blog on CSS sprites

Object oriented CSS:
    We are already familiar with object oriented programming. It means grouping behaviour and methods. In CSS we split the skin and the structure. The ultimate aim of this is to increase code reusability and make the code more readable.
Skins are visible attributes like color,gradient,visible borders etc..
Structures are dimensions essentially.
A particular skin can be applied to two or more elements having different structures. So when you separate skin from structure you can reuse the same skin for different elements. This is the basic concept behind OOCSS.

Media queries:
    The CSS statements that involve selection of some sort of media(screen, print, mobile etc..) are called media queries.
For example,
@media all and (min-width:500px) { … }
The statements inside this block will be executed for media type where the screen width is of minimum 500px.
Media queries are very helpful in creating layouts which changes according to the device used.

Sprites:
My favorite topic of the day!!
Sprites are nothing but collection of images stitched as single image. The stitching can be horizontal, vertical or in some random manner suiting your needs.

Why to use sprites?
Remember this for images,
sum of sizes of individual images > size of sprite containing all images
also,
for fetching an element of a web page a http request has to be sent to the server. So,
more images to load in a page ==> more http requests
more http requests ==> more time to load the page !!
Thus by using sprites loading time of a page can be greatly reduced.

How sprites work?
When you need to display an image, you just create a div and display that portion of the larger image which contains the specific image you want.
Consider sprite as a big canvas with lot of small paintings or images. The div you create acts as a small window through which you can see only small portion of the canvas. When you move the canvas behind the window you can see different images based on what part of canvas is now visible through the window.
Hope u get what i mean.. feel free to drop comments if you don’t get my point !

Other notable points about sprites:

• Sprites can be used when you have lot of small images to load.
• They can be very helpful when behaviour of an image changes depending upon user interactions(hover,click etc...)
• They can be used to create an animation
• Many Google doodles use sprites to create video like effect

My experience with sprite:

http://www.google.co.in/logos/2011/gumby11-gumby.jpg

This is an example of sprites image. It came as a part of a google doodle. I thought of animating it. I will share the code for doing the animation.
pic1- shows the html code. Javascript is used to change the background position of the div created. (in my words background position determines the position of the canvas behind our window , the div ). Javascript also does the job of calling the function repeatedly in a set time interval to change the background position of the div .
pic2- shows the CSS code that is used to alter properties of the div created. Note that background of the div is our image !

Pic 1 the html file

Pic 2 the CSS file

See you in next post.


Trained at Sourcebits