Saturday, November 29, 2014

CSS relative absolute positioning

Over my course of being a frontend web programmer, I realised that a lot of web developers dont understand how css position works. If you're a new web developer, after mobile webkit, firefox or chrome became bigger than IE, then everything is way easier to understand. The most simple explanation is this http://css-tricks.com/absolute-positioning-inside-relative-positioning/. Basically if the position is static(default), the children with different position (relative, absolute) will follow the first non static position parent it has (which on the site was the body).
So for example
<body>
    <div style="position:absolute;top:10px">
        this div parent(body) is static so make that our bounds 
    </div>
</body>

<body>
    <div>
        <div style="position:absolute;top:10px">
            this div parent(div) is static and so its parent(body) so make body our bounds
        </div>
    </div>
</body>


<body>
    <div style="position:relative">
        <div style="position:absolute;top:10px">
            this div parent(div) has a non static so stop there and make it our bounds
        </div>
    </div>
</body>

Back when I build widgets for client site, would experience something like
<body>
    <div id="left-sidebar" />
    <div id="main-content" />
    <div id="right-content" style="position:relative;overflow:hidden">
        <our-widget>
            Some basic requirements include
            * our widget sometimes could be bigger then the right-content size of the site like expanding ads
            * we cant change the style (we cant just flip the position relative or overflow hidden of client style)
            * and a lot more
        </our-widget>
    </div>
</body>

One solution (probably the only solution) for this is to attach the widget to body and position it absolute to the same spot where it originated, an advantage of that is that no matter the structure of the site is, the widget will always be relative to the body and will always be on top of the any content. That was the short solution, the longer one involves injecting a placeholder for tracking where the widget will reference to, resizing the placeholder same as the widget so that the content below will adjust accordingly, listening to window resize, listening/constant tracking of the location of the placeholder incase the items on top expands, and a lot more.

But to what I said easier, earlier I said that everything is way easier to understand right now because back when I think IE5 or IE6 days you could set position absolute plus change the z-index to super high and it will ignore the non static position and you achieved what you want (almost as if everything is bound to body). But then everything changed when mozilla and others embraced the standards and this made position more confusing, but this is good news, the only bad news is that older IE like IE7 and IE8 has bugs on different stuff like z-index or layout bugs which sometimes make you think you had everything wrong. So to end things up, like the lightbulb moment statement from the site, css position once you understand it everything is way simpler :)

Saturday, September 6, 2014

Jax Coco - best coconut water

Having been to hawaii recently and got into drinking coconut water i tried to find something so coconut water here in Hong Kong. So as i was browsing i found jax cooc on wellcome and to my surprise it taste so much like the real thing (of course the real young coconut will taste better). So the price is for 330ml is 18HKD and for the 1 litre is 33HKD which is not that expensive for its taste

 

Here are the amazon links if you live in the states

 

Friday, August 29, 2014

Hanawa bay

Today we went to hanawa bay to snorkel and it was good even near the shoreline you could see fishes and corals. Here are some pictures of the beach.