Web and Mobile Development articles
In the previous post we kicked off with our painting application using HTML5 canvas. If you remember well, we ended up with a basic app where one can easily draw lines or something else with a “pencil” tool. But there was a problem. When drawing different shapes like circles, the lines/curves had jagged edges. They were not smooth or anti-aliased, whatever you want to call them. This article will aim towards solving those issues.
Continue reading “HTML5 Canvas Drawing Lines with Smooth Edges”
Let’s build a simple painting (or sketching) application using HTML5 <canvas> element along with its Javascript API. Although the app will be small, there’s going to be quite a bit of information for intake. So I’ll break the entire process into different tutorials (posts).
Continue reading “Creating a Paint Application with HTML5 Canvas”
You might have used CSS3 box shadows several times to create some pretty looking drop shadows like you do in Photoshop. That’s great! But do you even know how it can be used for some other mind boggling purposes ? If not, then you are definitely going to like what I am about to show you.
Continue reading “The Real Beauty of CSS3 Box Shadows”
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.
Continue reading “Discussing Server-side and Other Essential Components for Your Playground”
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.
Continue reading “Integrating an In-browser Code Editor to Your Playground”