The All New “try-it” style editor.

Check out The Sandbox “try-it” style editor.

As we all know, reading code can be abstract and disconnected from its actual results. An on page code editor is a great way to re-connect ourselves with the code’s function. As you may have seen at W3schools.com and a bunch of other websites, the try-it type editor can be a very helpful when learning html and css. I decided I didn’t want everyone else to have all the fun, so yourshoesuntied.com had to have a “try-it” editor too.

After a lot of playing around with the design concepts, crying over the JavaScript function and having my brother rewrite the function so it actually worked, the Sandbox editor has finally gone live. Though it was not all that complicated to build, dropping it into WordPress proved to be a bit more complicated than this rookie had planned on. The initial design was a little too over-styled, and a handful of poorly planned, generic css classes made a temporary mess of my overall design. As always, persistence and firebug prevailed.

20120523-092525.jpg

In the end it seemed that a simplified design and functionality worked the best. After that, it just needed a catchy name like The Sandbox to glue it all together. It’s safe to say that phase one is complete. Phase two is where the real fun begins.

In the next week or so, I will write a tutorial on how The Sandbox works. As usual I will include all the necessary code to get one working on your site. I also plan on building a smaller pluggable version that can be pasted directly into my posts. I think that will come in handy as the site continues to grow.

Hope you like it and stay tuned for the tutorial.

Brian


Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin