Time Based Animations in HTML5 Games: Why and How to Implement them

So you got into Web Based Animations or Games (using that HTML5 thingie) and chances are high that you’re relying on setInterval, setTimeout or even better – requestAnimationFrame to reflow and repaint your frames (fancy terms for rendering each animation frame). Precisely, you’re basing your animations or game mechanics on the frame rate. There’s nothing wrong with that, but let me show you a more sophisticated approach which can actually enhance all sorts of user experience – time based animations.
Continue reading “Time Based Animations in HTML5 Games: Why and How to Implement them”

Using HTML5 postMessage For a Secured Cross Domain Communication and Rendering

In the previous post, we covered how easy it is to build an environment where anyone can write in HTML, CSS, JS code that gets rendered and displayed in a sandbox (iframe) in realtime. It’s all good as long as the platform is restricted to yourself, but when it becomes open, i.e., when others can create testcases or use it for some other purpose as on CSSDeck, you need to start thinking about security.

Continue reading “Using HTML5 postMessage For a Secured Cross Domain Communication and Rendering”

Creating the Environment To Write Code and Render in Realtime

After the Introduction, its time to build things! We will basically lay out a basic UI for the playground and learn how to render our code in the sandbox.

Continue reading “Creating the Environment To Write Code and Render in Realtime”