Saturday, December 20, 2014

Dojoboilerplate - My First Opensource Project

The Introduction

This is a boilerplate where I wrote for a lot of my projects, ranging from mobile app to website for the past few years. The base is Dojotoolkits, which provides a good place to start. You may wonder, of so many other framework out there. Why Dojotoolkits? Why not AngularJS among others. My answer to that, is simple. Dojotoolkit has one of the easiest to setup in terms of its widget.

When you read on almost all of the recommendation out there that promote JavaScript framework, you will never hear Dojo or Dojotoolkit despite it being one of the best and easiest framework to learn so far. You will wonder, why are there no attention given to Dojotoolkits? May be, just may be that there is no good tutorial out there that makes people want to learn something as comprehensive as Dojotoolkits. And may be, dojoboilerplate will change your perception. At least, that's what I hope it would do.

Missing AS3 or Objective-C?

If you come from Flash Action Script 3.0 or Objective-C, you may have trouble setting up a good Javascript architecture that make sense in the long run. You may end up in spaghetti code where there is no real good practice in place, and everything just works. But what if, what I have developed so far, enables you to develop a full stack application on JavaScript? And you can finally have a more managable separation of logics from backend to frontend. Finally, a frontend framework that make sense.

I myself, have been exploring different frontend JavaScript framework. Most are okay to a point. But most fail at one feature where I think is most important. The ability to gel a Javascript "Class" to a template. Imagine if you will, every single piece of views that you see on a website is made up of a lot of template pieces. They may be the whole page, may be just the form area, the news section or even the breadcrumb.

Traditionally, what I would do, is to generate the whole page in backend platform of my choice, it can be PHP, ASP.NET, JSP and now NodeJS or others. Then use spaghetti code or jQuery to tie them to a function when the document is finished loaded and ready. Not a big problem, as developers have been doing this for the past decades or so without blowing up the internet.

Why the change?

It's more scalable, legible and best of all, easy to learn and use.

Currently, there are a few banking apps that are in the development process using the framework that I have managed to put together. And I am naming it dojoboilerplate. Beside this, there are already an app out there in the app store that uses this framework, it's called Shuttlefly.

Malaysia.my & Yasmin's How You Know

When I was in Leo Burnett Malaysia, I was tasked to develop Malaysia.my's frontend. The initial objective was simple, to get the site out quickly, as soon as possible, because the client's previous vendor has failed them miserably and the site is taking forever to update and to refresh. So, by the time the brief reached my table, it was almost reaching the deadline. So, we had to find ways to make this work. And at that time, I had just started playing around Dojotoolkit, and had only completed 2 projects prior to this incoming task. The first one was Yasmin Ahmad's How You Know website that was aimed to promote the book, if you don't know who is Yasmin Ahmad, may be you have seen her very touching and down to earth Petronas festive TVC, her passing away was a great lost to the industry as much as to the society. Personally, haven't have the chance to work with her, but from her legacy, I can feel she touched lots of souls and are well missed.

Samsung Galaxy Wonderland

The second website developed on Dojotoolkits was Samsung Galaxy Note campaign, it's called Galaxy Wonderland. I had to admit, because I had just started familiarising with how to structure a good Javascript fronted, the site was bloated and loading slow. Which we later found out how to speed things up and also cut down on stuff that's slowing the site down. And the experience of developing these two sites had benefited me greatly as it provide me the necessary challenge in a real world problem where I need to give solution to.


The framework will be released in Github, it will take me few weeks to find time to tighten up few more loose screws before I think it's ready for the 0.1v alpha primetime! Due to my current extreme amount of workload in my new position as Tech lead in Next Digital, one can only expect to see 0.1v in late January 2015. Hopefully, by then the framework will be even more mature and I hope it will help more people out there who struggles to choose a good Javascript framework.

If you must, and you will, please checkout Malaysia.my if you want to have a taste of what my framework would do.

As of current, my task is to deliver Connected Mum's Club within these coming few weeks. Same old story, previous vendor screwed up the site so bad that makes updating and upgrading the site's content difficult, if not impossible. Till then, happy coding!

Friday, October 3, 2014

[Bash Script] Bash SH SUDO

As developer, you will want to spend most of your time developing than spending time minifying your script every time there is a change to the code and you will need to go through the process of minifying all of them. If you have like 5-10 javascript files, you may spend somewhere around 2-3 minutes minifying them depending on your choice of tools and how you want to minify and obfuscate your code.

2 - Minutes of manual minifying files

2-3 minutes is not a lot by itself, but when you add up those minutes when you have changes everyday, then you are bound to spend a lot more of your precious time on doing this tedious and boring work. And that's where bash script comes in handy, you are already using it in your terminal when you compile phonegap hybrid app, or when you install ruby or when you SSH into server.

I always thought bash script or anything you use in terminal makes you a hardcore programmer! That's my impression when I see people use terminal to access database server and application server to see where is the memory leaks and stuff, it makes me jawdrow, like literally, if reality allows.

I didn't know then, that using bash script allows me to do a lot of stuff that you normally would need a GUI that is programmed by other people to do something. And if what you need is from your own set of requirements, then you may need to write your own bash script to automate the tedious procedure that you want.

Dojotoolkit Evangelist

In my case, I am a Dojotoolkit evangelist. So, naturally, the amount of files for a typical complex web app will easily go up to hundreds of dependency files and widgets. And Dojotoolkit take AMD dependency injection to a whole new automagical level, which will allow your site to run lean and smooth while you can keep your source files organised and legible to a very good extent. Something that Angular.js has failed so far for me, hence my reluctance to move over to Angular. May be when they have figured out how to do widget properly, I will move over.

Almost Useless Dojo Build System

Dojotoolkits does have their build system, but there is a problem, there isn't even one good example of how to properly make a good build profile tutorial in the whole freaking site. It has good documentation, but those documentation is not good enough in my opinion. And require too much effort to learn something which should be painless and easy. Because the whole point is that you want people on board with you on Dojotoolkit, is that it's simpler and easier. I gave myself a good 1 months to tinker with how the build system works. I stopped after 1 week into the research because I find it too troublesome, and guest what, Dojotoolkit tutorial also feature someone else's custom boilerplate for building a profile because they themselves haven't figure how best to organise the file structures!

However, after using Dojotoolkits for all of my projects, including HTML canvas games. I have a verdict, it's good for everything. I even came up with a skeleton template that I can use for almost anything web and even hybrid app. The performance is there, the ease of use is there, the practicality is there, the reusability is there. Everything a web developer can dream of, and now I am tinkering into NodeJS. So might abandon PHP-based Codeigniter and give NodeJS a try in my future project that also runs on Dojo!

Ok, I mentioned my problem. Now comes the solution, I mentioned that I would have a lot of widget files and share elements classes across different folder structures that would require too much effort to minify them one by one and place them back one by one. So I went ahead and research about bash script and how it can automate this process, it took me around 15 minutes for me to search for the relevant syntaxes and command line before I can automate the whole freaking process!


To minify CSS, if you are already using SCSS or SASS, compass can already fulfil that requirement because you can choose to compact when it process your SCSS or SASS.

To minify JavaScript, you can use a series of tools found on the world wide web. It's everywhere! But specifically for the minifier that is Dojo-friendly, means it won't break Dojo style of code, it's recommended to use ShrinkSafe. There is a version where you download along side Dojotoolkit development set, it's inside the util folder.

To minify HTML, since Dojotoolkit's strength lies mostly in the power of widget, the amount of HTML file is also relatively huge because you make a template of whatever you need to reuse. Hence, it's also a good idea to minify those HTML widget file. And for that, I use htmlcompressor found in Google Code. The result is fantastic!

Now comes to the juicy part where we need to stitch up a bash code that automate the process of minifying, and obfuscating.

In order to do that, we need to consider a few things, - Retain the current folder structures as AMD loading style will always refer to the same folder path where the class is defined in Dojo - To switch from minify from source folder should be just a change of application path

So my first problem is solved by duplicating the current JavaScript folders into another folder and renamed it ending with _min. While I am at it, I will destroy all minified folders to make sure we don't get file override issue.


 rm -r $K_REL
 mkdir -p $K_REL

 cp -r $K_SRC/* $K_REL

Then we need to define those path that will be used over and over again in the entire script

 K_SHRINKSAFE="java -jar WHERE_YOU_SAVE_YOUR_FILE/shrinksafe.jar"
 K_HTMLCOMPRESSOR="java -jar WHERE_YOU_SAVE_YOUR_FILE/htmlcompressor-1.5.3.jar"

The Magical Part

 for file in `find "$K_SRC"`;

 currentfile=$K_SRC"/"`echo "$file" | cut -d/ -f9-`
 desinationfile=$K_REL"/"`echo "$file" | cut -d/ -f9-`

 if [[ $currentfile == *.js* ]]
 $K_SHRINKSAFE $currentfile > $desinationfile
 echo "JS - ".$desinationfile
 $K_HTMLCOMPRESSOR $currentfile > $desinationfile
 echo "HTML - ".$desinationfile

 #echo "$file | cut -d/ -f9-"


This is where the magic happens, where I find each files in the folder and minify them by either using Shrinksafe or HTMLcompressor depending whether they are JavaScript files or HTML files. HTMLCompressor is more error tolerant, so it won't stop the process from finishing when it tries to process, say a mac dust file or a PNG file or just an empty folder. Shrinksafe on the other hand, isn't that tolerant and will pause the process, which I find it rather restrictive. May be there can be a try and catch for batch shell script. But, so far, this has serve me very well. Hope it helps you too.

Thursday, August 7, 2014

[HTML JS] Hexagonal or Diamond Shape Masked Image

I am not entirely sure when did the creatives decide that hexagonal or diamond shaped images are the cool trend, because since last year I had been working on a project that requires user's avatar to be presented in such matter. At first, it presented a reasonable challenge because it's not possible to process all the images with Javascript to mask out the shape that we want, because that would be too taxing for any ordinary PC. Which would spells trouble especially client's PC tend to have weaker processing power and will very soon complain about the site being slow.

Hexagonal Image using HTML and CSS only

So, the other option that I could think of, would be to use canvas, but that too, didn't solve the problem of incrementally heavier load. And this dawn me, that I should utilize what new CSS has to offer and uses multiple overflow:hidden and css transform to rotate the image clockwise once and counter clockwise again. And the result is simply amazing, of course it takes some experimentation to get it correct.

Which, coincidentally, at the same time, I was working on a project that needed those techniques. But this time around, the mechanism is alot more complex and the hexagonal tiles are required to move around as desired. And this creates another problem that conventional html with CSS couldn't achieve with ease. Though that's not to say that we can achieve the same using just the layout with html and CSS, it's just a lot harder to predict the outcome.

I Chose Canvas

And so, I chose the easier way out, which is to use canvas based technology, which I had very recently been using in my game projects, the amount of learning and the amount of flexibility is amazing using PhaserJS. 

This project uses only PhaserJS as the main engine driving this website, even down to the hexagonal orange tiles that is laid out throughout the screen. The challenge here is to make the tiles arranged in such a way that they all tightly fit together and is able to change position with each other.

The bigger challenge is to have a center point where I could populate selectively avatars from, so there is no cheating here. It takes some thinking to put those code together.

The logic isn't rocket science once you know how to find the middle one, but to arrange the tile in a more meaningful way that you could arrange avatar from the middle point is a little bit more hair pulling. And the solutions that I had was gracefully short, around 4 lines of code to achieve that. I broke the problem into smaller problem and solve from there.

The Simple Algorithm

Firstly, we push all the hexagonal tiles into an array that we can use.
Then, we sort the array by comparing each one to the middle hexagonal tile
Finally, We can use. And here is the code snippet:

alltiles.sort(function(a, b) {  
return distance(yourself,a)-distance(yourself,b); 
function distance(p1, p2) {return Math.sqrt(Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2));}

Now, isn't the solution simple?

As for the moving around part, it's easily achievable if you have work considerably with PhaserJS. The sprite class provides adequate support for animating things around with absolute ease. If you haven't start using any canvas game engine, you have to give PhaserJS a try. It's good.

Monday, July 21, 2014

[Objective-C Swift] My First Look

Swift, is Apple's next step to make coding fun and fresh again while not forgetting the productivity gained that results in simpler, tidier code. I went through the WWDC videos about the fundamental differences between Objective-C and Swift, went through the intermediate and advanced Swift introductions. I must say that I am very impressed with how well-thought the whole transition to the current Swift must have been.

The Transitions

I mean, if you were following the development of Objective-C for the past few years, you might notice that while the documentation of Objective-C is probably one of the best in the world, the language itself requires a lot of efforts for you to keep your code clean and memory in check. That's when they introduce ARC, Automatic Reference Counting, new LLVM, new Xcode! No longer will we need to juggle between multiple windows and tab between the old Xcode and interface builder, the transition simple took place slowly during the last few years. Leading to the now Xcode 6 beta. The best of all, is that Apple didn't rush any of those stuff out in a hurry, I guess they have certain practice of launching new stuff, is that they keep developing those features and at the same time maintain those that public uses, so by the time the framework is mature enough, they release to the public and started getting feedback to make it better and they did make it better, one way or another.

Difficult Start

I still remember when I first started learning Objective-C, it was quite a difficult time. Mainly because I never know that I am responsible for each allocated memory and every action has to take into account for memory leaks. It was where I learnt about delegation that is in the very core of Objective-C and Cocoa that makes me rethink of how I approach a problem in an algorithm that make sense every single time. It was also the time where I know then, that OOP suits my style and I should practice them more often!

Practice Makes Perfect!

That said, I did practiced OOP for the next few years in Action Script 3.0 and JavaScript. I still do JavaScript nowadays, in fact, it's my bread and butter. And talking about JavaScript and looking at the now called "Swift" file. It feels like JavaScript all over again! Apple did away with header and implementation files and now only one Swift class file that's all you need. In fact, if you have been downloading examples code snippets from apple developer site, you may notice, from the past 2 years, they have been putting stuff that you are supposed to put in header files into implementation files! I notice that when I was studying how certain code should be written in Objective-C, but being a stubborn me, I would still keep those @property @interface and others in the header files and only keep implementation in the implementation file, because that's what I believe to be true.

May be, Apple wants us to transition slowly with them as well, who knows?

// Show a dialog with an "Okay" and "Cancel" button.
    func showOkayCancelActionSheet() {
        let cancelButtonTitle = NSLocalizedString("Cancel", comment: "OK")
        let destructiveButtonTitle = NSLocalizedString("OK", comment: "")
        let alertController = UIAlertController(title: nil, message: nil, preferredStyle: .ActionSheet)
        // Create the actions.
        let cancelAction = UIAlertAction(title: cancelButtonTitle, style: .Cancel) { action in
            NSLog("The \"Okay/Cancel\" alert action sheet's cancel action occured.")
        let destructiveAction = UIAlertAction(title: destructiveButtonTitle, style: .Destructive) { action in
            NSLog("The \"Okay/Cancel\" alert action sheet's destructive action occured.")
        // Add the actions.
        presentViewController(alertController, animated: true, completion: nil)

Now look at this code snippet and tell me you don't see the resemblance between Swift and JavaScript! Notice the way functions are now defined, and also the way dot syntax plays a bigger role that the old time square bracket accessors!

I was playing with the code for a few hours, trying to make a simple prototype of a TableView that reads data from CoreData and able to write simple data to CoreData. Suffice to say, it was all too similar to the old implementation of Objective-C, in fact, it has gotten simpler and nicer this time around with Swift. May be because I know the ins and outs of Objective-C, but I think mainly because the way it works still stay pretty much the same, it's just that, it's different. Just like one of the first video tutorials that taught me about Objective-C.

Objective-C is not better than other languages, it's just different.

And I have the same feeling for Swift, too. And I feel like I can focus more on delivering the solutions faster and better and worry less about the transitions, the framework, the architectures and so on. Happy Swifting!

Friday, July 18, 2014

[HTML JS] Animating Infographics Numbers

On one of the projects that I am working on, requires text animation. We are not talking about transitions that we can either use Ease.js, TweenLite.js or any sort. It's the type where the words slowly increasing in value and you have to sort of animate or display them in such a way that it feels like the words are alive and its animating. I wanted to show a number say, 33.53%, but because this number will be shown alongside with some infographics, I need to make them slowly accumulate in value, transition all the way from 0.00%. And that was the plan, to make the infographics looks a bit real and feels a little fresh.

And apparently, jQuery has made the process very simple and easy,

function animateNumber(selector, value, precision){
 $({countNum: $(selector).text()}).animate({countNum: value}, {
   duration: 1000,
   step: function() {
    var number = new Number(this.countNum);
    number = number.toFixed(precision);
   complete: function() {
    var number = new Number(this.countNum);
    number = number.toFixed(precision);

animateNumber('.percentage-something', 33.53034, 2);

Can you believe it. It's just that simple. Pass in a class where you want the action to happen, a value to count towards to, and of course optionally, pass in the precision because you might get more than what you wish to display since infographics are a little more accurate than usual in terms of its number.

Tuesday, July 15, 2014

[HTML JS] Game with PhaserJS On Mobile Device!

Ah... finally, being able to practice some wizardry using just HTML and JavaScript really makes me feel like a child inside. Last month,  I've made a HTML game that uses only PhaserJS on top of Dojotoolkit and the little web app framework that I had developed for very rapid-paced development.

The Easy Part

The game's mechanic is rather straight forward, it must be playable on mobile device, and user will need to swipe to throw the drumstick out to hit the players on the field and make some sort of scoring system to keep track of the score. And that were the only easy parts from the development perspective, because I had already chosen my platform of choice and also framework of choice. The only thing I could do then, was just to explore what could be done to make the game happening. And I must not forget that since it's a game, it has to be somewhat fun to play with, easy to play with but with certain level of difficulty because I want to challenge the player to get the highest score but wouldn't want to give the game away too easily. It takes days of tuning to get the final algorithm right, it wasn't an overnight thing.

The Unsaid, Difficult Part

But how to achieve all of them in HTML and JavaScript is a whole different matter altogether, and on top of that PhaserJS is not a 3D game engine and so, I would need to also make that happen and try to simulate the 3D environment as close as possible, and that requires a fair bit of planning and thinking before I could even try to develop the game.

It looks and feels daunting until I finally chalked the details down and split the problems into smaller, manageable chunks. One of the problems that I have for this project when I chose PhaserJs is 3D space in the game. To tackle this problem, I split the problem down into the following:

1. PhaserJS is a 2D game engine, there is no way that I am ever going to have an easy time making it happen. But there are things that I could tap onto, for instance, the gravity, the particles, velocities, directions of projectiles and many more. And once I know what I currently have in PhaserJS, I worked out formulas to calibrate throwing items away and further into the game. All these while mimicking the realism that it actually flew inwards towards the target and getting smaller when it flies. It takes some tuning and calibration, but all in all, it works out pretty good!

var swipeHandle = topic.subscribe("throw.item.swipe", function(velocity, distanceTravelled,direction){
  var absoluteDistance = Math.abs(distanceTravelled);
  if(absoluteDistance <= 0)
          absoluteDistance = vs.h;
                velocity *= 1.2;
                if(typeof hand === "undefined")
                hand.animations.play('throw', 4, false);
                    hand.animations.play('normal', 1, true);
                //distance has to be small to go futher.
                //velocity range is from .11 - .4;
                var distance = vs.h - absoluteDistance;
                var howmanypixelPerSecond = 400 + (distance/vs.h)* 300;
                var updateInterval = 10 + (distance/vs.h)*10 ;//Math.round(velocity *10);
                var smallest = (1 - velocity)/10;
                var cameraOffset = vs.w/2 -50;
  var newbot = game.add.sprite(cameraOffset,  vs.h , 'bot');
  newbot.animations.play('run', 15, true);
  game.physics.enable( [ newbot], Phaser.Physics.ARCADE);
  newbot.body.collideWorldBounds = false;
  newbot.body.bounce.y = 0;
                var directionInfluence = (direction/(vs.w*0.5))*vs.w*0.125;// * 1;
                var finalXDirection =  cameraOffset +directionInfluence+0.5;
                 game.physics.arcade.moveToXY(newbot,finalXDirection, distance, howmanypixelPerSecond); 
   context.deteriorate(smallest, newbot, distance, howmanypixelPerSecond);
                }, 200);

This code snippets feature one of the key mechanics for simulation of 3D space in this particular game, as you can see I even comment the velocity range from 0.11 to 0.4 because that was the range of value that make sense when the projectile launches towards the target, it determine how fast it should fly, and it's in sync with its scale value and also the distance value. Took me around 5 hours to get it perfect. Nothing big deal here.

Depth of field, on the other hand, is a little tricky in this scenario, although I can simulate a close-to-perfect 3D simulation for this throwing drumstick game. It will still lack true realism if it doesn't have certain level of Depth of Field. Just imagine no matter how far the drumstick seems to had flown towards the target, it still fall flat to the ground of your feet. That's where I implemented a simple deterioration technique where I clean off the projectile when the flying should ends. Hence, it will appear it dropped at the place where it flew to, but in actual case, it didn't.

Collision detection in PhaserJS is rather practical and useful, in the sense that it's easy to use and in this game, it's actually powerful enough to detect how the collision should work. Because as you can imagine, if the projectile were to only engage when it comes down due to gravity and hence being able to hit some target in the far distance. But if the target is just on top of the projectile, if PhaserJS didn't offer the type of options for collision detection, I would have to burn midnight oil just to figure this part out! And yes, PhaserJS' collision detection can let you configure whether a particular object is to be collided from top, left, right or bottom direction. Ain't that cool!

 game.physics.enable( realTarget, Phaser.Physics.ARCADE);
 realTarget.body.immovable = true;
 realTarget.body.allowGravity = false;
 realTarget.body.checkCollision.down = false;
 realTarget.body.checkCollision.left = false;
 realTarget.body.checkCollision.right = false;

But I do wish they would state in the documentation clearer that you will need to explicitly enable physics for any object that you want collision to even happen. I found out that Phaser.Physics.ARCADE is most suitable for this game's requirement hence I use it instead of other Physic engine in PhaserJS, do check them out!

All in all, I am looking forward to developing my next HTML game, it has been a fun ride, so far.