Valtira Blog

Thinking in the Third Dimension (CSS3)

by Sheldon Schwartz - 10 Feb 2011, 13:36:52

css3_post5-300x140


While working on a recent project I found that CSS3 packs more than just cool factor. It’s also a powerful new front-end tool that can potentially save a lot of rework, reduce development time, and help maintain project budgets.

I thought I would share a snippet and demo of some code that helped me out of a jam recently and got me thinking of CSS in a new way. The solution was fairly simple, but like any quest, getting to the solution was the hardest part!

A little backstory: A client requested help to make their video site “iOS compatible”. We were supposed to work with the current UI and get things to function just like the content available for desktops and browsers. There was lots to do – from UI tweaks to swapping out the Flash video player for HTML5 video. Tons of fun, and all-in-all pretty straightforward. Except for one detail found when testing.

Apparently there is a “challenge” in Safari for iOS where tabs, buttons, and links can become unusable when placed over a video element.

I tried everything with the content and video element. I slid, hid, moved, unmoved, positioned and repositioned things. Nothing worked. With javascript I could move and/or hide the video element without much problem but the video would lose its place or just not play properly.

As the available project hours started to dwindle, I realized there was one direction I was not trying to move, slide, or twist this video element in — and that I was confining myself within a 2D space. I thought, “What about 3D?”

My fix ended up being a simple CSS3 3D transformation to “hide” an existing video element from the browser’s view by turning it on the z-axis. The main guts of this fix ended up only being about 5 lines of CSS styling – and it works great! I also added a cool animation effect in the process.

There are probably many ways to solve this – but here is a little demo of a simple 3D Transformation of a video element. (Works in fresh versions of Safari, Chrome, and iOS Safari.)
DemoSource

Script for Buttons/Hiding

$('.hide').live('click', function() {
  $("video").css("-webkit-transform","rotateY(90deg)");
});
$('.show').live('click', function() {
  $("video").css("-webkit-transform","rotateY(0deg)");
});

Style for video element

video {
    -webkit-transform-style: preserve-3d;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1.5s;
    -webkit-transform: rotateY(0deg);
    background: #333;
    display: block;
    border: 1px solid #333;
}

Front-end development typically happens in a flat, 2D browser space, but with CSS3 some amazing things can be done in the browser in mesmerizing 3D. This little snippet and demo is just the tip of the iceberg. I have gathered links to other info, demos, and documentation below.

Here are some great links related to this post:

More Information and documentation:

W3C: CSS Home
W3C: CSS 3D Transforms Module Level 3
Safari CSS Reference: CSS Property Functions > Visual Effects Transform Functions
Surfin’ Safari: 3D Transforms

Demos on the Web:

Safari Reference Library: Card Flip (download only)
24 Ways: An Introduction to CSS 3-D Transforms
Line 25: Super Cool CSS Flip Effect with Webkit Animation
CSS3 Playground: 3d Flip Cards
DemiNoodle: Create a Flip Effect by Using CSS3
Safari Tech Demos: Photo Transitions

As a front-end developer I enjoy all opportunities to work on iPad and iOS development. On Apple’s mobile platform we are able to explore and take direct advantage of the many new features available with HTML5 and CSS3 via the Safari/WebKit browser.

From a front-end developer’s standpoint it’s fun, challenging, and pretty cool.

My suggestion to all front-end developers is to go out there and get busy with it!

Comments? Suggestions? Feedback?

Roku: Sign S3 URL

by Morgan Catlin - 18 Nov 2011, 13:26:50

Here's a BrightScript function to sign an S3 URL that expires in 4 hours:

Function signS3Url(bucket as Object, folder as Object, file as Object) As Object
    
    now = CreateObject("roDateTime")
    now.mark()
    
    hour = now.getHours()
    hour = hour + 4 ' expire in 4 hours
    
    day = now.getDayOfMonth()
    
    if hour > 24
        hour = hour - 24
        day = day + 1
    end if
    
    expireStr = now.getYear().toStr() + "-" + now.getMonth().toStr() + "-" + day.toStr() + " " + hour.toStr() + ":" + now.getMinutes().toStr() + ":00.000"
    now.fromISO8601String(expireStr)
    
    policy = "GET" + chr(10) + chr(10) + chr(10) + now.asSeconds().ToStr() + chr(10) + "/" + bucket + "/" + folder + "/" + urlEncode(file)
    
    hmac = CreateObject("roHMAC")
    signature_key = CreateObject("roByteArray")
    signature_key.fromAsciiString("YOUR SECRET KEY")
    signature = ""
    if hmac.setup("sha1", signature_key) = 0
             message = CreateObject("roByteArray")
             message.fromAsciiString(policy)
             result = hmac.process(message)
             signature = result.toBase64String()
    end if
    
    signature = urlEncode(signature)
    
return "https://s3.amazonaws.com/" + bucket + "/" + folder + "/" + urlEncode(file) + "?AWSAccessKeyId=YOURACCESSKEY&Expires=" + now.asSeconds().ToStr() + "&Signature=" + signature
End Function

Function urlEncode(toEncode As Object) As Object

    Http = CreateObject("roUrlTransfer")
    return Http.urlEncode(toEncode)

End Function

Comments? Suggestions? Feedback?

Secure Video OnDemand

by Morgan Catlin - 18 Jan 2012, 15:24:57

It's been over a year since we launched the Video On-Demand site for one of our clients (here). We've learned a lot about streaming video since then, mostly, that it's hard!

Problem 1: Secure Streams
I spent two blog posts talking about why and how to secure your streams. Keep those dirty pirates from getting your content!

Problem 2: Content Providers
Content providers impose even weirder and harder to implement restrictions than securing the streams. For example, one client's providers want to keep people from watching free content from anywhere but the US and Canada. We had to pull down Maxmind's geo database and use it to validate IP addresses. We're rolling this feature out to Roku and Nook based apps too!

Problem 3: Scaling
Man, video is bandwidth starved. Bandwidth means three areas:

  • Client Internet - sure, you might have cable but your WIFI router is crap
  • Server Internet - obviously
  • Server Disk I/O - just how much data can you push through?

All of these things can put a crimp on a user's happiness with your video. What we've been doing when we bump into limitations on Server Disk I/O is spool up another EC2/S3-backed Wowza instance and loop it into the production cluster. We're then able to step up the amount of I/O capability through out the system.

Problem 4: Customer Support
Well, Disk I/O causes a problem for all users streaming from a specific server but what about other issues? We spent some time building diagnostic pages (like MLB's) that will issue bandwidth tests and report to us what type of environment the user has. It's easy then to create profiles of environments that have issues, could have issues or are relatively issue-free. We're adding these types of diagnostics to devices too - consolidating all the reporting into a set of RESTful web services easily invoked by developers.

Problem 4: Devices
Getting video to play on a device is really just harder than it should be. Devices all support different standards at different levels of support. For example, Android devices don't support Apple's HTTP streaming, but Roku devices do. In fact, we have to go with a Flash player on Android - talk about hideously slow and battery killing! Other problems include setting up the content to look nice on each device - some content just needs lots and lots of massaging to get it look right.

Comments? Suggestions? Feedback?

Categories

Archives By Month

About Us

Valtira's team includes many bright people with useful opinions on the latest web technologies like HTML5 and cloud computing.

Blogs We Read