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

CSS - the box model

Its worth dedicating a blog entry for explaining the box model.

Audio blog on CSS box model
CSS box model:
Every page element is a box !! I guess this is the single most important thing you need to understand before learning anything about Box model of CSS.
The box has,

• content
• padding
• border
• margin

I will explain the box model with a simple example.
Suppose you are having an unordered list. The whole list is a box and in turn each list element is a box.
The box has a border. You can make this border visible by giving it solid pattern and some color and thickness.
For example,
li {
border: solid 2px red;
width: 50px;
}
Now you can see the border surrounding the list element.
From here explaining padding and margin is pretty simple.
Let’s assume you have given a width of 50px for the list element.

Padding:
It specifies the space between the content and the border. Individual padding values for top, right, bottom or left side of the box can be given. Now in the above example if you give,
padding: 10px;
It makes sure that there is 10px space on all four sides of the box, between the content and the border.
Note: It adjusts the total size so that the width of the content doesn’t get affected. Imagine the box getting bigger !!

Margin:
Padding affects our box. Whereas margin affects things around our box. Imagine margin as some imaginary force pushing objects around our box so that there is always some free space between our box and other boxes.
The margin values you give determine to what extent other objects get pushed.
margin:20px;
It makes sure that no other object is within 20px range (calculated from border) of our box.

Here am showing three images to make it better to understand what i said above,
pic 1: Shows our box with only border.
pic 2: Padding is added (look how only the box gets bigger and the content doesn't shrink)
pic 3: margin is added ( look how objects near our box gets pushed... actually our box moves to the right to accommodate the margin change)

Pic 1 (only borders)

Pic 2(with padding)

Pic 3(with padding and margin)

The difference in text size is due to my improper screenshot techniques !!
 See you in next post.


Trained @ Sourcebits

HTML more concepts

Audio blog on Html more concepts


How the browser works?
    A browser has various functions like sending request, getting response, rendering a page and displaying it for users etc... So how does it do these things?
A browser has many sub parts that handles different functionalities. User interface , javascript interpreter, networking module etc...
But the most important component is the one which renders web pages... the browser engine !
Different browsers have their own way of rendering web pages and hence their own engines as well.
Chrome and safari use webkit. Webkit was developed from KHTML by apple and then made open source.
Internet Explorer uses trident which is a microsoft invention.
Firefox uses Gecko which is developed by mozilla. It's also used for thunderbird and other mozilla applications.
Opera uses presto.

What browser engine does?
In short it parses the marked up content(html) and builds DOM tree which is inturn combined with the styles and finally painted in the browser for users to see!!
Parsing involves lexical and syntactic analysis.
Lexical analysis --> tokenizing. Keywords are separated.
Syntactic analysis --> tokens from lex are fed into syntactic analyzer. It will use some sort of context free grammar for understanding the page’s contents and syntax.
After parsing painting job is done !

Page layout:
Page layout determines what elements of the web page are going to be present where.
There are different types of layouts. You can fix the position of an element or make it relative. It all depends on your needs. People view the web page you develop in different devices. The layout should make the page appear good in every browser and in every device. You can read about the layouts in this link here...
http://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-design/

Browser specific contents:
There will be always certain contents that will work correctly on one browser and crash pathetically on some other browser (mostly IE :P ). So browser specific codes are mostly written to give specific instructions to specific browsers.
Conditional comments are used to give browser specific code.
For example,
<!-- if IE> .....
This conditional comment will make IE to use the code following it. Other browsers will ignore the code.
In css @ symbol is used to mention the browser name for which a particular style is written.
@-moz-document
The above modifier like thing will make the style following it apply only to firefox.

Div vs Table:
When contents are arranged in a table it gives a near and structured view. Web developers have been using table to arrange page elements for a long time. But it's not the right way to do it. In other words semantic html doesn’t allow this ! After introduction of CSS and div tags... page layout is done mostly using them.
div is always the better option for page design. There are many reasons for it like it's difficult to parse tables, it's difficult to modify a page designed using tables etc..

Web page designed using tables

The web page

My experience: I tried designing the web page i designed yesterday ( look yesterday’s blog images please :) ) using tables. It was definitely not easy. Learning curve of css may be long but once you are comfortable with css you will definitely hate table design. What i feel is that separating styles from html is a great practice . It gives a sense of clarity to your web page !!
See you in next blog !


Trained @ Sourcebits

HTML

Audio blog about HTML
If you are expecting html syntax, tags and stuffs. This is not going to be the place. I will discuss some basic concepts relating to html,browsers and stuff.

HTML:
It stands for hypertext markup language. 
Hypertext --> responding text ( links !! )
markup --> annotating a text (tags !! )
So HTML is a language in which you have annotated and responding texts . The annotation is for browsers to understand and render the web page. Simple right?

Markup :
There are three main types of markup. They are,

• Presentational markup : The one you see in text editors. It's based on what you see is what you get (wysiwyg). The markup is hidden from the humans so that they can see only the output.
• Procedural markup : Those who worked on LaTex would know how a descriptive markup would look like. The text processor reads your LaTex file from top to bottom and manipulates your markups to produce the desired output.
• Descriptive markup : Rather than giving instructions on how to process, this kind of markup just gives label to stuff.

The differences are very minimal and they are getting even lesser day by day with growing concepts and technologies!
HTML is a standard markup language. There are also large number of unstandardized markup languages like the one wikipedia uses for allowing users to edit wikis.

The meta tag !
    It's one common tag in html. But many users don’t get it fully.Meta tag is used to give information about data in web page. Content of meta tag are not actually visible to humans viewing the web page. Let me try explaining. This tag has 4 attributes. They are,

• content
• http-equiv
• name
• scheme

In html 5 charset has also been added to meta tag.
http-equiv is for specifying the HTTP headers that should be sent before sending the content.scheme attribute is just optional.

name and content are the two most commonly used attributes.
<meta name=”xxx” content=”yyy”>
Search engines used to see the contents of meta tag for ranking pages once. Now the situation has changed because website owners can give wrong information about a page in meta tag and get undeserved traffic to their page. Description of web page or keywords in web page can be specified in meta tag. This may be used by machines inturn ( crawlers, RSS feed generators etc.. )
<meta name=”keywords” content=”c c++ java programming”>
That’s pretty much everything about meta tags.


Browser modes:
There are two main modes in which a browser operates. They are quirks

• quirks mode and 
• standard mode

In earlier days during the introduction of java script and more functionality each browser had its own methods and ways of implementation. Web pages were written that time using those functions. Now after standardization we have a universal standard. But old pages should also work fine now. So web browsers use a mode called quirks mode which enable them to render old pages correctly.

In standard mode only web elements that comply to the present standard alone will be rendered correctly.

There is also a mode called almost standard mode in some browsers which neglect accepts nonstandard methods as well.

DOCTYPE is used to tell the browser what version of html we are using. 
for html 5 , the latest standard <!DOCTYPE html> is given and it tells the browser to run in standard mode.

Semantic HTML:
    It's nothing but HTML page written according to the correct semantics. That is, usage of proper tags in proper place. For example, a line break can be given using <br> as well as <p></p>. The correct procedure is to use <br>. This is called as following the semantics. Usage of semantics has many advantages as well.
For example,
An important text can be made bold by the use of <b> as well as <strong> tag. The semantic is to use <strong>. Normal users won’t find any difference in the implementation. However when the page  is processed using an aural browser(for deaf people). The text to speech system reads <b>(bold) text as normal text only. But <strong> text is read in a different way stressing the importance of the text. That’s the importance of using semantics !
Not only aural browsers, crawlers of search engines also give importance to the <strong> tag !
Always keep in mind that humans are not only the readers of your web page. Machines read them too !!
It's a part of semantic html to separate the text/data from styles. Now let me explain what happens if you don’t follow the semantics.
You have page A and B having the word ‘java’ 5 times.
Page A has separated the styles and the html content is just 10 KB.
Whereas page B has both styles and data in same html page and its size is 30 KB.
Now can you guess which page will have higher priority or rank when searched for the keyword ‘java’.
Obviously it's page A. Because it has higher percentage of occurrence of the word ‘java’ in its page !! 
Understood how semantic HTML can be so important.

DOM:
It stands for document object model. It's just a convention for representing elements. It's language independent.In html document is an element , a form within a document is a child object. Hope you get the point.

Page layout and CSS:

As part of practicing i wrote a sample page that will make clear basics of html and css. Take a look  

HTML file

CSS file

Output in browser

See you in next blog!


Trained @ Sourcebits

Document based databases

Audio blog of document based databases

Before moving into document based databases let me make it clear what is a relational database as i doubt many people won’t be clear with it.

Relational database:

    Relations between two tables in the form of foreign key is not the reason why a database is called relational database. A table is itself a relation. It has a specified number of attributes or fields and each record abides to this fixed schema. Each tuple is related to each other because of the defined attributes. This is why a database like mysql is called relational database.Primary key , foreign key are nothing but constraints that user can create in a relational database.

Hope you can understand what i mean. Next let's look at another type of database which is not relational.

Document based database:

    It is not relational. So obviously it doesn’t have a fixed schema and tuples of same table may be unrelated. Unrelated in the sense each may have different number of attributes or different types of attributes.

    So what is document based?? Let me explain. In general a non relational database model is called as nosql.

As the name suggests you cannot use sql for querying information from nosql databases. They are used to store huge amount of data which do not need a relational model of storage.For example, facebook uses nosql for storing user messages and searching it efficiently.

nosql databases are classified based on how they store data,

• Key-value stores
• Big table implementation
• Document based
• Graph

These are different types of nosql database. I think there are no well defined differences between the above classifications. Key-value store is how data gets stored in Big table as well as Document based databases. Difference is that Big table is a google proprietary storage used in Google File System(GFS). Read about Big table and Gfs more... Google has developed them for their own use and they are very interesting.

So let’s now come back to Document based database. Here database has only documents. Documents are like tables. Here data is stored in some encoded form like JSON, BSON etc...

JSON- Javascript object notation. It's a way of storing text(just like xml). However it is more readable , easily parsable than xml. It uses javascript object kind of format. So instead of using some parser a javascript program can parse JSON and convert them into objects easily using eval() function.

In document based databases records are stored as key-value pair. For example a consider a person’s record , it is stored as ,

{ firstname:”raj” lastname:”kumar” devices: [{type:”mobile” model:”samsung” number: “9988776655”},{type:”laptop” model:”apple”}]  }

here firstname is the key and raj is value. devices is an array which inturn has objects with keys type , model etc...

Notable points:

• There is no fixed schema
• Each record can be considered as object stored something like hash(key value pairs)
• Each tuple may have different number of attributes and an attribute may inturn be an array of objects.
• When a tuple doesn’t contain an attribute which is present in previous tuple no NULL values are stored. In other words space allocated only for attributes mentioned.
• Since adding a new record is just writing into a document writes are extremely fast.  
• So for an application which has huge amount of data to be maintained, relational model is not needed and ACID properties are relaxed, nosql would be very helpful !!
• However for applications where security is of high priority nosql should not be used since it doesn’t provide transaction safe processing.

Examples of document based databases are mongoDB,couchDB...

See you in next post!


Trained @ Sourcebits

Unix

Audio blog on Unix

Most probably every unix commands tutorial start with ls. Am gonna start with a command which i feel is the most important one in unix.

man:

man stands for manual. It can be used to see the manual of any other keyword or command in unix.

for example,

man ls

will provide the complete manual of ls command. You got doubt about the man command itself ??

try

man man

you get the manual of man command itself !! Now that’s cool ! So when you are doubtful about a command’s usage you can go for man.

There are also many other ways of getting help in unix. For example, you can type

command_name --help

The difference between man and help is that help gives you only the usage of the command whereas man gives its complete description by opening a separate manual page.

There are plenty of unix commands and explaining everything is not possible. I will instead explain what i understood about unix and some other basic stuffs.

Unix and Linux ?

Unix is one of the oldest operating systems. It's developed as multi user OS.  IBM and other manufacturers had their own version of unix. So a new kernel based on unix’s kernel was developed by Linus Torvalds and he also made it open source. Linus’s Unix then came to be known as the Linux. It was designed to work on all PC’s unlike unix at that time. Unix is priced whereas Linux is free !! Other than these, there are no big differences between unix and linux.

Kernel:

Kernel is the most basic abstraction of an OS. It’s the layer between hardware and applications at the most basic level. Kernel’s have three types namely,

• monolithic
• micro
• hybrid

In monolithic kernel all functionalities like processor management,memory management, disk management, i/o management are loaded into memory. advantage: fastest !

In microkernel only the very basic functionalities like processor management are loaded into main memory, others are implemented as user level functions. They depend on some interface to interact with the hardware. advantage: less memory footprint

Hybrid tries to have the advantage of both monolithic and microkernel. They are essentially microkernels with some functionalities of monolithic kernel as well.

Shell:

Shell is just command line interpreter. It's an user interface for typing commands as text in unix and other similar OS. Commands can also be typed in a file and given as input. Bourne shell and C shell are two popular types of shells. C shell uses syntax similar to C language. It also has some additional functionalities. tcsh is an advanced version of C shell.

Other interesting commands i came across:

ssh: It stands for secure shell. It allows you to remotely access the shell of some other user in the network.

ssh remote_user_name@ip

you will be prompted for the remote client’s password after typing the above command. On entering password you will then have full access to that remote system via shell.

scp: It stands for secure copy. It allows you to copy files/directories to or from one system to another system over network.

scp file_name remote_user_name@ip:path

The above command copies a file from your system to the path mentioned in the remote user’s system. The contents are encrypted and sent over network for security. There is also an option to change the encryption type depending on the security level and transfer speed you want.

write: It allows users to send message from one system to another.

write remote_user_name@ip on tty

the above command will open connection with the remote systems terminal having tty you specified.

tty will be like pts/0 , pts/1 ...(just see it as terminal/shell number)

after the connection is set up whatever you type will be transmitted to the remote shell.

Unix is so vast. I will explore more in days to come and it's definitely fun. See you in next blog.


Trained @ Sourcebits

Dbms day-5 more concepts

DBMS more cncepts - audio blog
Importing and exporting database:

When you are using some clients like phpmyadmin importing and exporting can be done easily using button clicks. It doesn’t mean importing and exporting databases is difficult in command line. Mysql allows users to export and import databases using dump files.
A dump file of a database contains all sql statements needed to create the database and populate the data again.
A dump file can be created using using following command,

> mysqldump -u user_name -p database_name > dump_file_name.sql

Now a dump file for the database database_name will be created as dump_file_name.sql

To import this dump file into a database the command used is,

> mysql -u user_name -p database_name < dump_file.sql

this command imports dump_file.sql into the database database_name

Views:
Sometimes you require only few tuples of a data to be viewed often or you need only few fields of a table to be shown every time. Rarely you would need to see the full table. In that case you can create a view of a table and use it every time.
A view can be created using the following sql query,

mysql>create view view_name as select_query;

here select_query can be written in a way to match your needs. It is to be noted that updating table automatically updates table and vice versa.

Triggers:
A trigger is an sql statement or set of sql statements which can be made to be executed whenever an insert or update or delete operation happens in some user specified table.

create trigger trigger_name
[before/after] [update/delete/insert]
on table_name
for each row
begin
sql_statements
end
In place of sql_statements you can write the sql statements you need to execute when the trigger is triggered. mysql provides old and new keywords for accessing the values of fields before and after modification !!

For example, suppose you need to make a note of all name changes in some log file,
then you can create a trigger that gets triggered after every update in user table.

create trigger log_trigger
after update
on users
for each row
begin
insert into log values(old.user_name,new.user_name)
end


It is advised to change the delimiter at the start of the trigger so that you can use semicolon for ending each sql statement within the body of the trigger
for example,
delimiter |
trigger_defn
end;
|
After this you can change the delimiter back to semicolon
delimiter ;
It is to be noted that the triggers will be triggered only by sql statements, whenever an API does some modification the trigger is not automatically triggered!!

Stored Procedures:
They are just like procedures in programming languages. When you have a set of sql statements to be executed often, you can store them as a procedure and call it using the procedure name you have assigned.
When we have such procedures in server, the clients or users can directly call the procedure. In a way it gives more security and modularity. The clients won’t be using individual queries (or in most cases prevented from accessing the individual queries) every time.

create procedure procedure_name()
begin
    sql statements
end
This is the basic syntax for declaring a procedure in mysql. The procedure can then be called using the keyword call

call procedure_name()

Procedures allow you to define variables. The scope of the variables is between the begin and end statements of the procedure.

I was wondering how a function can be really useful without parameters ! Well procedures in sql does have parameters. They can be of any of the following three type.

• IN --> input to the function. Changes done inside the procedure on the parameter doesn’t get reflected outside
• OUT --> output from function. This is the value which is changed inside the procedure returned after the procedure gets over.
• INOUT --> can be given as input to the function and the return value is also stored here. Or in other words the changes done inside the procedure on this parameter gets reflected.

As in triggers delimiter has to be changed here too !

Commit and rollback:
In mysql autocommit is set to be true. So if you want to check commit and rollback statements set autocommit=0;
then start a transaction ( start transaction ) , set a savepoint ( savepoint savepoint_name) do some modifications like insertion or deletion, then rollback to the previous savepoint (rollback to savepoint savepoint_name).
Now the changes you made wont be reflected in the database.
Only when you commit changes are written to disk.
A transaction ends whenever you give a commit or rollback statement.

Database Normalization:
It's just a process of organizing data in database. It mostly involves splitting large tables into small ones(not necessarily in all cases). There are well defined rules for normalizing a database. We have 1st normal form , 2nd , 3rd normal forms.. etc !
Explaining about each normal form in detail is not possible. I will just give a hint of each.

• First normal form: Eliminates repeating data in individual table
• Second normal form: Creating separate tables for sets of values that are common to many tuples
• Third normal form: Eliminate those fields that are not related to the primary key (not always desirable or possible!)

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


Trained @ Sourcebits

Relationship between OOP, data structures and design patterns

OOP--> object oriented programming

Data structures--> any format for efficient storage and retrieval of data

Design patterns--> optimized, readymade solutions for common problems in designing and programming logic

On first look these three look unrelated. But there is more to it than what meets the eyes.

So in what way they are related?

Let’s take the first two topics, OOP and data structures. One very basic data structure used in many places is the stack.

When you think of stack implementation the following comes to our mind,

Class Stack()

{

Stack_content

{

Data;

Pointer to prev stack_content;

};

top_of_stack;

getTop();

push();

pop();

}

Here you can see that the data and the methods associated with it are combined together. Implementing the same without classes will lead to messy code.

So for data structures to be implemented neatly we need proper Object oriented programming knowledge!!

Next consider the topics OOP and Design Patterns. Design patterns deal mainly about how OOP concepts should be used properly. It gives optimized designs and solutions for common problems involving classes and objects.

According to me,

OOP + design patterns => optimized object oriented program

For example,

Introduction of factory class, single responsibility principle, singleton class design etc... These are examples for the relationship between OOP and design patterns.

Data structures and design patterns don’t relate directly. They have the layer of object oriented programming in between them.

The diagram shows how data structures and design patterns are related via OOP.

Data structures are implemented using OOP which are in turn governed and designed by design patterns.

So that’s it about relationship between OOP, data structure and design patterns. See you in next blog .


Trained @ Sourcebits