The topic of the day is “positioning”, the first thing after floating is the positioning of elements I was forced to learn. There is a lot of emphasis on the richness of the web content presented to the user, these days. Small images, texts, round corners, uncluttered and simple design, everything calls for this thing known as “CSS positioning”.
position:absolute was something I knew before even I did my first web project. I seemed to know its meaning through intuition, that was fairly correct as well. Its meaning is to position an element absolutely on the screen, by specifying co-ordinates. You specify, top/left/right/bottom or/and width/height, the element is positioned absolutely on the screen with respect to the co-ordinate system. The subtle thing that came out after reading up some theory is that the element is taken off the normal flow and positioned absolutely.
The next important thing about positioning is knowing to position an element relatively within a container. Now the concept of a container is that, an element (usually a div) acts like a box holding other boxes inside of it. A div can be made to act as a container by positioning it relative (position:relative). Now, if elements inside of a container are positioned absolute, then they will be positioned relative to the container box and not relative to the screen (viewport).
The above knowledge of CSS positioning is fairly sufficient enough to do web dev-ing. There is yet another thing called position:static which doesn’t have much importance because elements by default are positioned static (they are positioned as they would appear in the normal flow). Yet another positioning is position:fixed which positions the elements as per the offset properties, relative to the viewport, the only difference in this case is that even if the window is scrolled, the fixed position elements stay afloat.
Another theoretical know-how is the use of position:relative on a standalone element. If position:relative is used on a element in a stand alone fashion with offset properties applied (like top/left/right/bottom), what happens is that the element is laid out as it would position in the normal flow and then the relative sizes are applied with reference to the normal position. It should be noted that the space occupied by the element in the normal flow is kept intact.
Positioning is also synonymous with "layering" or "stacking" Because using positioning, elements can be placed one over the other. In this context, there is a property called z-index which implies the depth of the placements of elements. Sure enough, there is a mess in rendering elements with z-index in some cases in browsers like IE.
If you are looking for a hands-on try, use firebug along with the scenario text at URL[1]
[1] http://thanix.info/webdev/basics/position-1.html
Keep me posted on your thoughts to: thanix[at]gmail[dot]com
Written by thanix on December 12th, 2007 with no comments.
Read more articles on basic and webdev.
Taking a break does really have its own effect! Like, when you gym — your body is in action and it really frees up the clogged mind.
Whatever you do, your mind just goes on and on, thinking of everyday actions, philosophies, girls and what not! As I said in my previous post, Fitness takes in some motivation from you and gives back a lot of it!
One thing is sure, Fitness is not about how comfortably you can do it, its all about how uncomfortably you do. I hope you can see what I’m getting at. If you can comfortably, say, lift ‘x’ kg of weight, thats not getting you anywhere. What you must attempt is to lift ‘x+y’ kg of weight whatever that ‘y’ is — the condition should make you uncomfortable, to the extent that you give in more of yourselves to do that.
If you see, this applies to just everything you do in life. The more uncomfortably you do something, your system adjusts itself (as in builds its own strength) to withstand that, the next time you do it. The only important thing, ofcourse, is that you should make sure you continue on this.
Written by thanix on December 7th, 2007 with no comments.
Read more articles on fitness and health & wealth.
This series doesn’t go in any particular order, there is a bunch of things that I learn and realize as I code during the project. I present them in a chaotic order, not like how a book will present them. This means, you can find an introductory article somewhere after an advanced thing is spoken about. There is nothing wrong about this, I felt, because at work, I learn quite advanced things first and then come back to the fundamentals. Alright, this post is going to be on “CSS floats”
“Floating” content on a webpage is a nice and intuitive idea, whoever thought of that first. It is just like how a lotus flower would float on top of water — except that it won’t necessarily float to the right or the left. Any piece of text, graphic can float to the right or left, not on the centre.
.float-left-class {
float: left;
}
/* similarly float: right; */
When I first knew about floats, I imagined that a float has a float: centre; property, thats why I’m seeing a piece of content floating in a div in the centre of the page. Floating means real floating on top of the page — like this element is on the top, other elements lie beneath. I, later, came to know that an element can be made to float in the center using the left and right properties of a float. I, later, also came to know that there is something called z-index associated with an element to decide on the depth of placing an element and that floating an element doesn’t necessarily mean that element will be on the top of every other element, no matter what.
The thing, probably, I didn’t figure out quickly was that a “width” should be specified for a “float” element, explicitly. Except for the <img/> element, for which the width is implicitly known. This seems to be in the specification of CSS that an explicit width must be specified for elements that are floating. If there is no “width” specified for floating elements, then the floated elements’ width is the width of the content inside it. But that is the case usually, the result can be unpredictable because the specification doesn’t say what to do for undefined width of float elements.
The next thing is that I used redundant property specifications like this:
/* redundant css mistake */
.box-inside-container {
float: left;
display: block;
}
unaware of the fact that if an element is “floated”, it is converted into a block level element. That seems obvious, because only a block of text/graphic can be floated and there is no much value in saying a “float” while something is in its normal flow.
I must be a naive webdev to use floats without knowing what effects they produce on a webpage. I was caught up — not with the text clinging to the right of the left-floated element (thats how it should be), but with that, everything that comes after this floated element starts to cling on a single row until space is available and then on the next line, if space is not available. damnnn!! The immediate text appearing to the right of the left-floated element is fine, but not the text/graphic that comes after it, Why not? spec is right and well thought out.
Ok, so I got introduced to clear:both; , which can clear any left or right floats that I defined and push the next block level element onto the next line. Ofcourse, clear takes left and right as correct property values to clear left floats and right floats respectively.
The above knowledge of float seemed to be sufficient for a while, until I came across the next:
There is a float:right; element with a certain width defined inside a container box. Some text is appearing on the left of this right-floated element. Alright fine, everything is in the container box, with my desired effect that the right-floated box should appear as much right as possible. Now, there came more text into the floated element, the bloated element started to overflow, meaning it increased in height and what happened was that the floated element’s increased height hung outside of the parent container box. The container box didn’t expand to the height of the floated box. Weird!
Is this a bug in the browser? Or is there some valid reason why browsers exhibit this behaviour? Not sure, till date, haven’t given a thought.
This really got me nuts and made me read volumes of material in the net on the fix that needs to be applied for this scenario. Not only that, different browsers had to be treated differently to produce the desired result. Oh wait! what the heck, aren’t browsers supposed to follow standards. My colleague said in loud words “thats the thing”, “welcome to the webdev world”, “enjoy the fun”.
Having to write browser specific code and knowing what hacks to apply to what scenario didn’t look all that fun to me. It rather looked like a dark, gloomy, you-know-the-trick-you-survive kind of a world.
After much history and research, I found this piece of code fixing the problem of the container box expansion:
.clearfix:after {
display:block;
clear:both;
height: 0;
visibility: hidden;
content:'.';
}
“:after” is the pseudo class that creates an element which clears the floats at the same time doesn’t show any content. This seemed to be a much better fix which came after CSS2 spec, better because no markup litter is generated just to do this clearing float.
Ah, wait. I said browser hassles in this clearing and the above works good in browsers that respect the standards from time to time. The only other popular and notorious amoung web developers, the hacky IE has something internally as the “layout” data structure that relates to the dimensions of the boxes and the layout needs to be triggered to invoke its self clearing divs. The “layout” is triggered with any height, width, overflow or such dimensional properties but there is something called the “zoom” and this is promised by the IE team that atleast from IE5.5+, using this will trigger the layout.
.clearfix {
zoom: 1;
}
So, use this clearfix class on the container div’s and you are done, the container boxes will expand to contain the float elements.
One more subtler thing. Float elements’ border, margin, padding don’t collapse with parent/container borders, margin or padding. They stand distinct. This means, whatever margin is specified for the float element, that will begin inside of the container element.
This much floating seems sufficient for me, so far. 
Let me know if youve trouble in comprehending some things I’m speaking above or want to leave feedback/opinions. You could use thanix[at]gmail[dot]com for the same.
Update:
To better explain the various “float” scenarios, I’ve coded a sample page here[1]
[1] http://thanix.info/webdev/basics/float-1.html
Written by thanix on December 5th, 2007 with no comments.
Read more articles on basic and webdev.
After an irregular gymming during my college days, I’ve been regular gym-ming at Fitness One Its been a nice and fruitful experience ever.
If I look back to october 2006, when I just began at Fitness One, I was slightly bulky and my endurance, muscular strength and stamina were doing poor. However, I wasn’t largely fat or without the basic stamina. I was still good, due to my college gym, though irregular and agricultural activities in my farm in my earlier days.
A company sponsorship to this Fitness One gym came to me as a boon. I joined with all enthusiasm and promise that I’m gonna be regular and really achieve my fitness targets. “Alright, what is your goal thanix?”, asked prakash, my Fitness one trainer. I could immediatly bring those words — “I want to build muscles” Well, he said, unsure of my determination to continue with the gym, “Aright, we’ll do it, but you should take care of the motivation and turn up at the gym”. He probably has seen a lot of guys come with sheer enthusiasm and after sometime loose all momentum and fallback.
By late 2003s, I had somehow gained patience and a die-hard perseverance that I take care to pursue whatever I began and see the fruit, no matter what it takes. This has largely helped me in the gym. After the third hard workout day, your muscles become tight and your body refuses to move, you don’t even feel like going to work, then where is the motivation to go for the workout?
However, I figured that its only a matter of stretching and proper food/sleep that is all required to make sure the next day I possess the eligibility to gym. Stretching the muscles relaxes the body and makes it flexible - point #1, warming up the body just gets me away from the “I can’t wake up now” laziness - point #2. But how will you warm up the body without even waking up? If only your mind knows this fact that you do warmup and everything is ok, your mind gives in to wake up on time.
Alright, above all desires, you need motivation, you need a lot of that mental determination and “comeon, thanix” kind of power within you to lift any single weight in the gym. And mind you, everyday is not just the same — you need to push a little bit more than what you did yesterday. Its kind of a boomerang, you go to gym with little motivation and the whole gymming gives you more motivation to the rest of your day. You seem to understand the principles of the body, the mind and every single object that is there in the universe.
You know how to push little bit everywhere, you know how to develop endurance, you know how to develop and maintain stamina. I must agree that I really learned to listen to my body. My body literally speaks to me as to what it is ready to do, what it can’t do, what it is ready to take in, which energy it likes, which it repels, which food it is ok with and not, etc.
Thanks to everyone at fitness one, they really helped me push my limits, helped me understand the body and its parts and structure my workouts quite well. If you are reading this, there is atleast one take away for you — never stop doing that physical activity everyday. It is very very essential to the whole system.
Written by thanix on December 1st, 2007 with 1 comment.
Read more articles on fitness and health & wealth.
The next thing after the doctype that I learnt is what forms the basis of today’s data exchange between the client and the server in HTTP - the “cookies”.
HTTP is a stateless protocol. To understand what this really means — lets look at what HTTP itself is built on top of, the TCP/IP. For every page that the browser requests, the TCP underneath the HTTP makes a “connect” with the server (a connect is a 3-way handshake in TCP/IP protocol), pass over the HTTP data and then “disconnects”. There is no persistent connection maintained between the client and the server between requests. So, the server has no way of connecting a previous request with the current one and draw a co-relation — this means, for example, if a user gives a login request, the client connects to the server, passes the login data to the server, the server does the login for the user (user is in login state) and then disconnects it. The next time around when the user does an action, the same sequence if connect-data-disconnect happens, but then how do the server figure out that this user had already logged in? (Remind you that once the disconnect happens, the state information is lost and every request that comes in to the server is a new request with no past history). There must be some mechanism which enables this conversation between the server and the client about the state of the application.
There are several mechanisms to associate subsequent requests and maintain some kind of a state and one such working, reasonably good enough mechanism is “cookies”.
There are several rules that a browser sticks to make sure cookies are not messed up:
1. browser has a local storage area where cookies are stored (on the harddisk of the user)
2. browsers support around 20 cookies per domain and 300 cookies in total and each cookie’s maximum size fixed at around 4k (this varies)
3. browsers make sure that they don’t give away this domain’s cookies to some other domain - the same domain policy. (essentially, this means, for example, that google’s cookies are not given away to yahoo’s server and viceversa)
The third point is very important and it remained not so visible to me, until sometime, when I tried to read/write someone else’s cookies. For example, try to read the expiry time of a google’s cookie and set it to something else using a javascript on your domain. I, actually realized why this script can’t do it by thinking a bit more - I could then give the url of the script and when they try to access the url, reset google’s cookies in anybody else’s computer to whatever time I want and just play.
Now there are variations to point #3 that make the cookies vulnerable like XSS (cross site scripting), which I’ll discuss in some other post. XSS falls under cookie stealing/theft (cookies can also be stolen in the network, which can be prevented using https), apart from this, there is the cookie poisoning (changing some values in the cookie without the knowledge of the server/client to produce some imitated change, which can be prevented by having a signature) etc.. But briefly, there are security and privacy concerns around cookies, that is what I understood.
The sequence of cookie exchange goes like this: Browser sends a request, the server sets the cookie in the HTTP header and sends it to the browser. Whenever the browser makes a request from the page which has cookie set, the cookie information is sent along with the request, so server figures out the state and acts accordingly.
Cookies can be set in server side (say, using a PHP script) like this:
<?php
//to set a cookie
setcookie('cookieName', 'cookieValue', $expiry, "/");
//to read a cookie
$cookie = $_COOKIE['cookieName'];
?>
Hmm.. when I wrote the setcookie(), I figured out that it has to be sequenced in the code in such a way that it appears before spitting out any HTML code (including any echos’ that you might’ve used. Otherwise, setcookie() simply returns false (the heaaders have already been sent, so cookie info cannot be set). Once the page is available, the cookies in the browser can be manipulated. Only that the next request to the server will go with the manipulated cookies.
Here an expiry time can be set as to when the cookie should expire. If the expiry time (in seconds) is provided, then a “persistent cookie” comes up (persistent cookies don’t expire, if I close the browser/session). The fourth parameter can tell which path this cookie is active on. There is also one more thing that the browser can do — send a particular cookie only for secure session (available as another parameter to setcookie).
On the client side, the browser can typically read and write the cookies through Javascript. I know not any other way to manipulate cookies on the clientside.
<script type="text/javascript">
document.cookie = "name=value; expires=time; path='/'; secure";
var cookies = document.cookie;
</script>
The first line to set a cookie and the second to read the values of the cookie.
Alright, the other ways to exchange data between the client and the server (of the state information) can possibly be:
1. Through URLs (have encoded strings that mimick cookie name/value pairs)
2. Hidden form variables and
3. possibly a few others methods..
Hmm.. they must be having their own difficulties or cookie seemed to be much reliable than these methods that having a cookie while browsing is almost like indispensable. I ponder on the reason why there is an option to enable/disable cookies - ya, obviously if a security vulnerability is found and the browser be used — atleast we could disable the cookies and have read data from the Internet, if not write!
Written by thanix on November 30th, 2007 with no comments.
Read more articles on basic and webdev.
I wrote the first html page like this:
<html>
<title> Hello </title>
<body> <h1> Hello World </h1> </body>
</html>
I showed the code to my fellow senior webdev and was immediately brought to the attention of using proper “doctype” declaration, which looks like this:
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 //EN” “http://www.w3.org/TR/html4/strict.dtd”>
So the story goes like this: Use of appropriate “doctype” makes the browser behave differently as the scenario demands. In “strict” doctype, browser renders the page as per W3C’s specifications and the browser is said to operate in what is called as the “standards” mode. In certain other cases like when you don’t specify the doctype correctly, the browser falls back to imitate older browsers (which do not adhere to W3C spec) - this behaviour of a browser is “quirks” mode operation.
My question then came: “How do I detect what mode a browser is currently rendering a particular page in?” There must be a Firefox extension or some other code/script which can tell me this mode. I didn’t get an answer and I still do not know what is the right way to do this. (After note: read my update in the bottom of this post)
Then there are two other types of doctypes, other than “strict”. They are the “transitional” and the “frameset”. The use of “transitional” comes into play when you want to use presentational attributes in markup and certain presentational markup tags like <font> <strike> <u> etc.. In all ways, using “transitional” doctypes should be avoided, as the presentation can be very well done with the use of CSS. In the semantic markup world, (we will see what this is, sometime later) CSS is for presentation and markup is just for meaningful grouping of content. So, a good webdev should try to use “strict” doctype. 
If you want to refer to the exact syntax of the doctype magic line that you would use, refer w3c’s site[1]
[1] http://www.w3.org/QA/2002/04/valid-dtd-list.html
I’m not sure what “frameset” doctype means. I just know that “<frameset></frameset>” will be used in the place of “<body></body>” tags. I’ve never attempted to use these frameset tags, so I don’t know what the browser does with it.
So, the first headache that I cleared in my webdev world is to make sure that I communicate to the browser how to read my code. I did byheart this magic line and put it in the very beginning of every html page that I write:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
UPDATE:
How do I figure out what mode a particular page is rendered on?
———————————————————————
Alright, a few of my friends updated me on how to figure out the Quirks mode. Its quite easy — in Firefox, Tools > Page Info (Ctrl + I) displays the “Render mode” of the browser, like this:
This site[2] has a nice bookmarklet which alerts you to say if the page is rendering in “Standards” mode or “Quirks” mode. By the way, if you do not know what a bookmarklet is — read on, others can skip this paragraph. When you go to the site[2], you will find a link that calls itself the bookmarklet (on the bottom of the page) which you should right click and add to the bookmarks toolbar. Then when you are in a page whose mode of rendering you want to figure out — just click on that bookmarklet, you’ll geta javascript alert (popup) saying the mode of rendering of that page.
[2] http://dorward.me.uk/www/bookmarklets/qors/
Written by thanix on November 29th, 2007 with 1 comment.
Read more articles on basic and webdev.
I was thinking for a longtime to compile all the stepping stones that I encounter in my webdev (web developer) world in a collection called “the making of a webdev“, so this attempt. In all weirdness, this would come out as a naive man attempting to learn to code the web. I call it weird, because I, being a webdev, present this series/compilation so naked that you could find ample chances to call out “hey, you are a webdev?, really?” This comes with great amount of instinct, mistakes, practical usecases, inherited code, hearsays and a lot other, possibly “garbages” that got dumped when I listened with my “webdev” ears.
An artist becomes a “pro” by painting for money, the same applies for every other career. A “pro” has an exceptionally different knack, style and devotion attached to what he does, that really makes him a “pro”, much diffferent from someone who does it for hobby, the amateur hobbyist. Well, there are exceptions, but I’m talking of the larger class.
Probably, there is a lot more of you who haven’t coded a website, but think you make a decent “webdev” on the surface of your minds. Probably, you wrote simple, table-based HTML page, with or without using the so called tools like FrontPage, dreamweaver, and others. I was pretty much thinking like you and when I attempted to bring some content for a near “awesome” site, I drained out, I soon, found that I’m nowhere near the webdev zone. This is simply because web is no more 1.0, infant. It’s a grown up 6th class(grade) child now, I had to handle it in its own way, much different from how I’d handled it earlier.
I’m sure, this wouldn’t be like a powerpoint silver bullet or a tutorial or a training handout. This is more likely of the kind of sharing the know hows, whys and whats. Life is a relative phenomenon, so is what appears “simple” and “complex”. Somethings here might appeal to be drop dead “simple” and certain others very “complex”. I’m sure you will appreciate and take it in the right tone, as these are relative depending on one’s skill, experience and knowledge. I want to make sure that you take me to be standing on the same plane as yours — meaning this article here appears because I initiate it here, other than the fact that I initiated, there is nothing really that differentiates you from me. You could have better ways of putting out things, better skilled and better experienced in the same thing that I spit here. In that case, please open up the discussion through comments. I do not even claim to be the author of this series.
Lets being the roll from the next post, keep watching!
Written by thanix on November 27th, 2007 with no comments.
Read more articles on basic.
This is my first post, so greeting you all with this basic sound of the universe “Aum”,
To demonstrate how I write markup using PHP, here is the code snippet below:
<?php
#aum code
echo <<< MARKUP
<h1 style="font-weight:bold;"> Aum </h1>
MARKUP;
?>
And you know what this code does, PHP simply understands that whatever is inside the MARKUP heredoc is spit as it is. The “<<<” marking is called the “heredoc”. The code marked with the heredoc is typically referred as the “heredoc code fragment”.
Written by thanix on November 26th, 2007 with no comments.
Read more articles on webdev.
