Testing Canvas API Calls

This post was inspired by this question at StackOverflow. Basically the author wanted to verify that certain calls have been made while using the HTML5 Canvas API. I came up with a little solution.

CSS Gradient Adapter Using RightJS

In case you checked out the source of yesterday's CSS gradient demos you probably came to the same conclusion as I. It was just friggin' ugly. A lot of duplication and room for error. Not a DRY solution at all...

Is there anything we can do about this? As it happens, yes. All we need to do is to develop a little adapter. It just converts to some nice, generic syntax to some CSS required by a browser we are currently dealing with.

I did this by extending RightJS's setStyle method. The implementation is not flawless and does not support all possible cases. It should give you enough idea for you to implement something similar.

In case you aren't too fond of handling this on the client side, you could try coming up with some sort of CSS preprocessor. Check out Sass for a good example.

I've set up a simple fiddle demonstrating this technique. Give it a go and let me know what you think. :)

Overview of JavaScript Application Development - Case CanvasDraw

I've been doing some serious JavaScript development for around a year now. It started out with some innocent Harmony hacking at Spring. After Summer I received an offer I just could not pass.

I started developing CanvasDraw for Rate My Drawings somewhere around September. The application is currently at beta and close to a public release. Quite a few people have tried it out already.

During a recent seminar I wrote a paper about the application and its development. I hope it gives you some idea of what can be achieved with some effort. JavaScript isn't definitely a toy language.

The paper contains some very basic information about JavaScript and surrounding concepts. It also discusses RequireJS and RightJS briefly. If you have any questions, I'm willing to answer them at the comments section.

There's also a brief presentation available. The slides are in Finnish so it's likely you won't be able to understand them without some considerable effort. After all there are like six million people proficient in it. :)

Less Spartan Approach to JavaScript Key Handling

Let's face it. It's not fun to deal with keys in JavaScript. Each browser seems to have an idea of its own how it should work. In this post I'm going to show the way I deal with this madness.

I have split my solution in two parts: shortcuts and mixed events (ie. trigger some handler while both mouse button and some key is pressed). I will use a premade component for the former while I present a custom solution of my own for the latter. My solution is based on RightJS but it ought to be easy to translate the idea to other environments as well.

Crude Painting Application in RightJS

I just came up with a crude little HTML5 canvas based painting application using RightJS. Instead of boring you with some blabber let's just dive into implementation and figure out how the thing works. Here's some code then:



My initial implementation was considerably shorter as you can see from the revision history at GitHub. In this version I separated painting related functionality to a plugin of its own. In addition I extended RightJS with a offset function that returns the location of mouse relative to the element (canvas in this case).

If you have used canvas before the painting code probably looks quite trivial. It probably would make sense to abstract painting a bit but I guess that would be overkill in this case.

The initial code should provide a nice basis for further exploration. It might be nice to hook up a color or size selector with the code. There are certainly a lot of ways to extend it. :)

Sidebar in RightJS

I came by RightJS, a JavaScript framework, during the last week. The project just reached an important milestone as version 2.0 was released earlier today. Those familiar with jQuery will probably be able to pick up the library fast. Compared to jQuery RightJS provides some additional functionality (classes, utilities) and syntactic sugar. So far I have liked it!

As an experiment I decided to implement a simple sidebar using the library. The basic idea is that a sidebar contains a main area and a handle. Clicking the handle either opens or closes the sidebar depending on its current status.

It's possible to vary this behavior in various ways (ie. by making the handle draggable) but just this simple case is enough to demonstrate the usage of library. Let's have a look at the code then:


Most of the code probably looks quite straightforward if you have used jQuery before. It's just a matter of selecting appropriate element, assigning an event handler to it and then animating it a little bit. To keep it simple I separated the "toggle" behavior to a generator.

I am aware that JS 1.7 contains support for. That's something I'm not willing to count on, however, so I ended up implementing a small class encapsulating the idea.

The example isn't probably enough to actually convince someone to check out the library. I guess the showcases available do better job at that. Have fun exploring RightJS, apparently the right JS framework for various little apps. :)