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 ?
Tag: cssdeck
Integrating an In-browser Code Editor to Your Playground
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.
Continue reading “Integrating an In-browser Code Editor to Your Playground”
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”
Building Your Own HTML, CSS, JS Realtime Playground
Many months ago I built this site called CSSDeck. Its an interesting app where you can write your HTML, CSS, JS code inside few code editors that gets rendered and displayed in realtime in an output area (sandbox). Similar to JSFiddle, yeh! But the intent was a bit different. Instead of aiming for a playground where people could just create testcases, I wanted to build a community of people who would create some cool creations with their CSS3 and Javascript skills and all I would do is feature them on the Home Page of the site. Whatever people submit shows up in their profile page which means they can share their profile link with anyone and show off how awesome they are.
Continue reading “Building Your Own HTML, CSS, JS Realtime Playground”