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.
But why ? I thought it could be a great source of education and inspiration. People could also reuse some of the snippets in their projects to some extent quickly. It has definitely helped me to learn all the latest CSS3 features. Before CSSDeck all I knew about CSS3 was border-radius.
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
This story goes back to like late November 2011 (although the release was in January 2012). The first version was built in a weekend with not as many features as it has today. Anyway, fast forward ages and now I would like to tell you that if you think its a really complex app, then you are very much wrong! I am planning to write a series of posts to teach you how to create your own CSSDeck (atleast the basic functionality).
But why would you do so ? Well, first of all, even if you don’t do it, maybe you can learn something from my experience of building it as I write along. Secondly, you can build a similar app (a weekend’s task) and put up on your website. It can be an excellent way to display your skills, on your very own site, in your very own portfolio section! Impress friends, customers or potential employers, eh?
So this is just an introduction to whats coming up soon. The upcoming posts will need you to have some prior experience with basic HTML, CSS, JS else you wont understand a thing.
Posts in this series:
- Creating the Environment To Write Code and Render in Realtime
- Using HTML5 postMessage For a Secured Cross Domain Communication and Rendering
- Integrating an In-browser Code Editor to Your Playground
- Showcase Your Creations in a Gallery
- Cancel CSS3 and JS Animations to Prevent High Memory and CPU Consumption
- Discussing Server-side and Other Essential Components for Your Playground
Nice content there, looking forward to it.
Hi,
I took the liberty to turns this into a small github project – I hope this is ok:
https://github.com/dirkk0/playground
I also intend to create a variation of it sporting Brython (Python in the browser: http://brython.info/ ) as an additional language.
Best,
Dirk
Yes, its completely fine. Great work buddy!
Thank you!
It took only a couple of lines of beef this up for python:
https://github.com/dirkk0/brython-playground