The aim of this entire series was to teach you how easy it is to create a playground like CSSDeck, in reality. We covered everything from building the environment to making it secured. Then we integrated an amazing piece of code editor and finally discussed how to build a nice, performant and secured gallery to show the “real” interactive but scaled down previews of your creations. Although, you might need some extra bells and whistles.
So you got your creations gallery up on your site and shared the link on some social networks like twitter and facebook. Your loyal fans clicked your link and ended up crashing their browser. OMG! What happened ? Did you have any experiment with lots of amazing CSS3 and JS animations ? Most probably, that’s what happened then. Your experiments were awesome enough to eat up all the RAM and CPU and what not of your fan’s computer and crash it eventually.
Continue reading “Cancel CSS3 and JS Animations to Prevent High Memory and CPU Consumption”
So you have created your own CSSDeck platform and made loads of creations. But you need a way to show them somewhere on your website or web app. Like a gallery with small previews of the items that other people can browse through and click to view a specific creation. So how to do this ?
We have already created our environment to write and render html, css, js code and also made it secured. Now we’ll add an in-browser code editing tool that supports syntax highlighting, indentation, themes, zen coding and tons of more cool features to help us code even better.
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.
I’ll try to take you through my process of re-creating the famous Doodle Jump (which was originally released for mobile platforms) in HTML5 from scratch. The entire write up might help you with creating your own games from scratch!