Screencast: Webkit in Titanium

It's the honeymoon phase of learning a new platform. That part where you really enjoy the features that it offers. It's fun and exciting. You've yet to discover all the weird quirks and limitations. This little screencast is of my little frolic through the fields that is Webkit in Titanium.

If, like me, you've been hearing about all the nice features that have been going into Webkit then come along and check out this 5 minute screencast into a couple useful features.

Within this little screencast, I cover 3 topics fairly quickly: custom scrollbars, a little box-shadow action, and webkit transitions.

Custom Scrollbars

While the idea of custom scrollbars conjures up memories of horridly coloured scrollbars in Internet Explorer, when it comes to desktop applications, the ability to specify custom scrollbars is quite handy. As you can see within the screencast, I was able to replicate the look and feel of the scrollbars from Tweetie with ease.

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

::-webkit-scrollbar-thumb:vertical {
    -webkit-border-image: url(app://scrollbar.png) 13 0 13 0;
    border-color: transparent;
    border-width: 13px 0;
    min-height: 20px;
}

This code is almost a direct copy and paste from the scrollbar example provided with Webkit (albeit stripped down to the bare essentials).

Box Shadow

Drop shadows on a container are super easy in Webkit. As I understand it, the box-shadow will only work on the Mac and does not work in the Windows version.

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 

The first value is the horizontal spread, the second value is the vertical spread and the third value is the size of the drop shadow. The final value is the colour of the shadow. In this case, it's black with an opacity of 0.3. Subtle.

Transitions

Admittedly, it took me a bit to wrap my head around how transitions are supposed to work. Then, it finally clicked. You define transition rules on an element. Those rules define what should happen when a style property of that element changes.

#a {
   -webkit-transform: scale(1);
   -webkit-transition: -webkit-transform .4s ease-out, opacity .4s linear;
}

In this case, I've declared an initial transformation on the object that scales the item to 100%. Then the transition declaration says that if the transform value changes, to ease out over 400ms. If the opacity changes, a linear transition should occur over 400ms.

You could then change the value via CSS using a :hover (or other pseudo class) or via JavaScript, as I've done in the screencast.

el.style.webkitTransform= 'scale(1.3)'; 
el.style.opacity = 0;

Despite my previous concerns with animations being declared in CSS, it works really well in practice.

The other thing to note is that you sometimes want to act on when the transition is complete. This was one of my concerns with CSS-declared animations. Thankfully, there's a TransitionEnd event that gets fired when the transition is complete.

el.addEventListener('webkitTransitionEnd', check);

In this last example, it will run the check function when the transition is done. The event name is currently prefixed, which is unusual for JavaScript, but makes sense until it's standardized.

Enjoy!

Here's hoping you enjoyed yet another screencast!