Saturday, December 18, 2010

Work, distractions, responsibilities and expectations

WORK
Today I want to write about my regular day at work. I will start with work. This is the first thing I love in my life. I like my job a lot and I guess everyone does. Oops! No.... not everyone like their job but a few are very lucky who like what they do. This helps these lucky people create something that they haven't seen or done before. They read and understand what other gurus are doing and they always think about improving their level of quality.

DISTRACTIONS
What if there are so many distractions around me when I am doing my work? I have some work to be delivered in four hours, I'm completely focused in my task and suddenly someone pings me on IM asking for some other work or some help. There isn't one person who distracts me, there are minimum 4/5 people asking for different tasks and helps at the same time. What am I suppose to do? Reply to their questions / leave my desk go to their desk to help them / explain something to someone about how a particular thing can be done / understand what the requirements are / leave everything and focus on my task that I am suppose to deliver in four hours? These question remain unanswered.

RESPONSIBILITIES
My bosses: With the fact that you are a senior employee, it's mandatory for you to be a part of every project that we are working on PLUS the every new project that is coming in. We don't care how you will manage it but we know one thing that you will manage it. Because you are already managing this everything from last two years.

My Developer Colleagues: We work for only one project until the project gets over. Since you are the only designer and UI developer we have for our project, you must respond to our queries instantly. We don't care if you are working on other projects or not. We care about the project we are working on. So keep everything aside that you are doing and solve our issues first.

EXPECTATIONS
In my five years of experience in IT industry I have learned many things, one of them is Expectations. Most of the developers/managers/bosses expect a 'quick response' from others. If they have a query / work / question they will ask you on IM and they will expect a very quick response from you. Sometimes I feel they have kinda lost the sense of patience. Basically it's not their fault. There are many reasons for this lost of patience-ability -
            1. it’s because there is someone else who has asked him about that query/question. He knows that I can solve his issues, so he pings me and expects a quick response.
            2. He has project delivery in an hour and suddenly something stops working. He pings me and expects a quick response because he has very less time to deliver.
            3. He tries to solve the issue on his own. He spends two/three hours on it. He gets frustrated, he pings me and expects a quick response because he is already frustrated.

Spending each day in such environment is a gift for me. This helps me improve my learning & understanding. I also receive a 'Thank You' reply from many people every day, which is great!

Thank you friends for making me work, for distracting me, for making me responsible & for expecting a lot from me. It's because of you I go to bed SATISFIED.

Friday, December 10, 2010

CSS3: Multiple background images explained

CSS3 has introduced us to many wonderful features that we always expected. One of the best features amongst all those is the "multiple background images". It gives us the freedom of attaching multiple background images to a div, p, span etc.

Here is how it works in practical -

<style type="text/css">
@font-face{
font-family: HoneyScript;
src:url(HoneyScript-Light.ttf) format("truetype");
}
.multipleBGs{
margin: 0 auto;
width: 600px;
padding: 10px;
text-align: center;
background: rgba(244, 244, 230, 0.9);
border: 1px solid #d1d1d1;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;

box-shadow: 6px 6px 20px #999999;
-moz-box-shadow: 6px 6px 20px #999999;
-webkit-box-shadow: 6px 6px 20px #999999;
}
.attachBgs{
height: 200px;
padding: 24% 0 8% 0;
background: url(design1.png) no-repeat left top, url(design2.png) no-repeat left bottom, url(design3.png) no-repeat right top, url(design4.png) no-repeat right bottom;
font-family: "HoneyScript", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #638cc5;
}

</style>

<div class="multipleBGs">
<div class="attachBgs">Welcome to the world of multiple backgrounds</div>
</div>

CSS3 Backgrounds compatibility table - http://www.quirksmode.org/css/background.html

Note: Mobile UI developers - please don't wait for w3c's 100% recommendation to CSS3. This feature works perfectly on webkit engine. Use it! Use it now!

Wednesday, December 8, 2010

HTML5 Video Element

When we use the words HTML5 and CSS3 the very first thing that strikes in is Video/Audio tags introduced in HTML5. Any UI developer keen to learn new trends would surely try to work on these tags and keep them for future references or if he is also working on mobile UIs he will dare implement it for mobile because mobile browsers use webkit browser engine.

Here we go...

I used these tags and checked it in browser on my local machine. It works perfectly! WOW!!

<video width="640" height="360" controls id="movie" poster="movies/html5-iphone.jpg">

<source src="movies/Nimbooda.mp4">
<source src="movies/Nimbooda-Fogg.ogv">

</video>

Since it was working on my local machine I thought of checking it online and uploaded the files on server. OMG! What the hell is happening? It's perfectly working on my local machine, why isn't it working online?? DEAD......

I went on googling. Thankfully Google helped me out with two things I was missing 'types' and 'codecs'. Alright! I've added these attributes. Still no luck. What the....

<video width="640" height="360" controls id="movie" poster="movies/html5-iphone.jpg">

<source src="movies/Nimbooda.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movies/Nimbooda-Fogg.ogv" type='video/ogg; codecs="theora, vorbis"'>

</video>

<script type="text/javascript">
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
});
</script>

Again had to take help of Google, after reading on and on I read this sentence "You need to contact your webhost and get them to add .ogv - video/ogg as a valid MIME type (they should know what you mean) same for MP4."

The root of all evil was the MIME type on server. Make sure you get this done before struggling with page re-load and re-upload.

And finally Fallback for IE -

Note that you shouldn't include classid in the object tag in order to be compatible with browsers other than Internet Explorer.

<!-- IE Fallback -->
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="350" id="newIdPlayer" height="300" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="flash-video.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="" />
<param name="base" value="" />


<param name="flashvars" value="filePath=videos/Nimbooda" />

<embed base="" src="flash-video.swf" flashvars="filePath=videos/Nimbooda" quality="high" width="350" height="300" name="newIdPlayer" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>