SVG Coloring Page

I've been playing around with SVGs lately and was amazed at how easy it is to create a simple
coloring page that runs on almost any browser and device. No Canvas or HTML5 API.

Check it out:



The code is very simple:
I use jQuery to select all SVG elements that have a "fill" style and change the fill color upon click.
You can right-click and select "view frame source" to see the code - I'm sure you will find it simple to understand.

My website update

I've just updated my website with a new design and an updated projects show reel.
Check it out at: http://amirush.com

Sheep Bouncer - my first Android game was published!

I've just published my first Android game - Sheep Bouncer.
Its a fast arcade game with great graphics and funky music.
Check it out at Google Play!
The game was developed in Adobe AIR (ActionScript 3).

Web Fonts Dynamic Loading

In one of the applications I'm currently working on, there is a need to allow users to select  a font from a variety of Google web fonts.
Since I don't want to load all the fonts when the application loads, I've added some code to dynamically load only the selected font.
Below you can see it in action.
The code can be viewed in this jsFiddle.

Localization of HTML Elements

When creating a SPA (Single Page Application), many times we like it to be localization-ready,
meaning it can be easily translated to other languages. 
Without getting into the many aspects of localization (and sometimes internationalization), 
I would like to present a simple way to localize HTML elements using HTML5 "data-" attribute.

The idea is to add a key attribute to the HTML element that we want to localize. 
For example:

<span data-key="txt1"></span>

We then create a JSON file holding all the application text as key-value pairs. For example:

{
"txt1": "translated text 1",
"txt2": "translated text 2",
"txt3": "translated text 3"
}

For each language we create a separate JSON file.
When the application loads, we use jQuery to load and parse the JSON file.
Then we access each HTML element by its data-key and set its HTML to the corresponding value from the JSON data file:

  var appNS;
  (function (appNS) {
      appNS.initApp = function(){
      // load language file
      $.getJSON('en_us.json', function(data) {
        // json loaded - save to object
        appNS.Lang = data;
        for (var key in appNS.Lang)
          $('[data-key="'+key+'"]').html(appNS.Lang[key]);
        });
      }
  } (appNS = appNS || {}));
  
  $(document).ready(function () {
    appNS.initApp();
  });

In this example, I've also used a name space and a JavaScript module.
A working demo can be seen in this plnkr.

JavaScript Name Spaces and Modules

An important concept of modular JavaScript is name spaces usage. 

Since any variable declared in the code automatically becomes a global variable residing on the main window object, 

accidental overriding of variables could occur. Further more, code maintenance and modular components are hard to implement. 

The solution is using name spaces and JavaScript modules. Nested modules can also be easily created.

• Name spaces are implemented using JavaScript objects.
• Modules are achieved using JavaScript immediate functions. 

Here is a simple example:

var myAppNS;

(function (myAppNS) {

   myAppNS.prop = value;

   myAppNS.func = function() { 

      // do some stuff...

   };

} (myAppNS = myAppNS || {}));

Check out this jsfiddle to see an example.

For nested modules and nested name spaces - check out this plnkr.

From Flex to JavaScript - "The Big Switcheroo"!

So, it took me a year. 
As the rich-media world made a giant leap (or fall, depends on your point of view) from Flex / Flash back to good old JavaScript, I didn't want to be left behind. 
I've spend the last year learning new JavaScript frameworks, HTML5 / CSS3 features, new UI libraries etc. 
My future posts will probably target these new technologies. 
Bye-bye Flash, hello JavaScript!