Hike to Mission Peak: Test of stamina

Today was the day! Many people told me hiking to Mission Peak is something what they have enjoyed and is a good test of stamina and hiking skills. Some people have even returned from the middle ways from where they just couldn't go ahead. Some people scared me "drink a lot of water", "make sure you carry less items", "oh! it is very tough", "hope that you complete it" Sigh!

I want to share my experience from today's hike to mission peak. I decided with group of friends to go to mission peak today morning. I prepared my backpack with following stuff:

• Small Towel
• A Big bottle of water
• Couple of banana (potassium helps relax muscles)
• A bread-butter sandwich
• Couple of protein bars

I wore my performance shorts and tshirt so that I can be light and comfortable. We planned to meet at 6AM but some members from group were late and we were able to start by 6:35 AM. Finally we started the hike, initially it was moderate and then it started getting steeper and that is when fun starts ☺. We did take few stops in between.  As I was going up I realized it is getting more steeper and steeper. I was told that the hike is six miles and I assumed it is six miles each way. This made me hike conservatively and consume less energy and reserve more for later use. When we were a mile away we learned it is actually 3 miles hike ☺. The last mile was a lot more fun than the rest because of rocky and adventurous in nature. I enjoyed last mile and completed it with one stop. In few minutes we were at mission peak!

I enjoyed and I feel the my determination to complete the hike and reach to the top helped a lot. Here are few things I feel I should be doing different next time.

• Buy a good camel backpack (small and compact)
• Keep only needed food
• Sunscreen
• Gatorade or Red Bull will help
• Less stops 
• Hike at moderate speed for first mile, then be aggressive for next one mile by a notch or couple and stretch hard for last one mile
• Rest for enough time at the peak and then try to come down in lesser time and faster pace.
• It is fun to go with the group of people you know.

I will certainly share my thoughts when I go next and will definitely encourage anyone who has been wanting to go to hike to Mission Peak. Go with open mind and strong determination to conquer it. Good luck!

Messing with CSS: Art of construction

All the developers enjoy working with CSS and what more it is more fun when you are working with cross browser issues (sarcasm :)). A simple definition of cascade is descending waterfall, which has the same meaning with style sheets too and that is the beauty of CSS. Rules that are defined later get applied to the elements as compared which are defined earlier. Author style sheets are applied prior to user style sheet which are applied prior to user agent style sheets with the only exception that user !important will have higher precedence over author !important.

Layout

How do you want your page to look like? or How do I make my page to look same as the Adobe image sent to me by graphics/UX team? Darn! it makes my life crazy. CSS is pretty handy for page layout, it can be used to create custom layouts and then layouts can be reused as templates for other pages. Most of the web page needs are around either column layout || row layout which leads to grid layout. CSS layouts are basis for Responsive Web Design.

Theme-ing

Modern day world users expect to change theme of application, well if they can for desktop why not for desktop look RIA application. There are many ways to do it. CSS is divided into two categories one is visual like color, font, images etc. and structural for e.g. padding, margin, width etc. In most of the theme requirements its the visual which is changing and structural almost remains the same. Given that, we can divide the CSS into two files for each module under visual and structural folders. The files under these folder defines the default theme for the application. 

Now product requirement is to have a Ferrari theme with rounded corners, red colors, ferrari images etc. We create a new folder named Ferrari under our CSS/visual directory and create a file called as theme.css. In this file we will override the class for appropriate theme changes. Now lets say we get three more theme requirements for Corvette, Mustang and Porche. We follow the same process we followed for Ferrari and create three more theme.css files. What do we do now? Lets include all the CSS on to the DOM and while including link has attribute "title" give the name of the theme as value:

Now we need JavaScript DOM magic to work with UI, when user request for change in theme, javascript code has to iterate through the list of links on the document and check if they have title. Set the link disabled to true to all except but one which has the same title as requested by user. By setting the link disabled to true we are making CSS referenced by link disabled for the document. Using this approach user gets real time and awesome experience with changing the theme.

MyApp.changeTheme = function (title) {
    var cssLink;
    var cssLinks = document.getElementsByTagName("link");
    var i;
    for (i = 0; i < cssLinks.length; i++) {
        cssLink = cssLinks[i];
        if (cssLink.getAttribute("rel").indexOf("style") !== -1 && cssLink.getAttribute("title")) {
            cssLink.disabled = true;
            if (cssLink.getAttribute("title") === title) {
                cssLink.disabled = false;
            }
        }
    }
};


Challenges

Not to mention there are many. I would like to mention two which are not so obvious on IE. Here they are:

1. IE has a limit to the number of CSS which can be included in a give document. It is limited to 31 CSS files, all the files included after 31st file will not be referenced in document.

2. Another interesting problem, combined and compressed CSS file gets huge and then on IE only some part of the CSS from that file is recognized and rest is ignored. why? because IE has another limitation which says per file IE allows only 4095 selectors. Now I feel like killing myself but hang on suicide is a crime. To address this issue we will have to page the compressed and combined CSS file.

Not to mention CSS3 has given new dimension to web development. Flexible grids, layouts, images, etc all leading to Responsive Web Design where one application will scale on various screen resolutions.