Thursday, May 31, 2012

Hack SenchaTouch Core

I've worked on some projects with SenchaTouch. Basically, I love the core functionality of SenchaTouch. It supports many useful features for developers, includes:

+ A standard OOP with Javascript and its dynamically/clever JS class loading.
+ Data package for loading data from Ajax (JSON, XML) + Storage + Model
+ Dom accessing/querying
+ Logging

However, currently SenchaTouch cannot support some mobile OS with its UI layer, ex: Window Phone 7. So, when moving to a project that have the need to support a specific phones, we need to consider other frameworks to use (just for supporting the UI layer), like: JQuery Mobile.

Btw, I don't want to rewrite everything from scratch. I want to have a core framework that developer can based on to develop features. They need to follow only 1 coding convention, 1 style of OOP programming with JS. After reviewing some popular JS frameworks on the community, I decide to use the Core of SenchaTouch for this purpose.

Firstly, I create a simple project which includes the whole of SenchaTouch library and try to remove unnecessary classes in its folder. JS files are loaded in a very messy ways and I cannot control it after 30 mins. I found this is a crazy way.

I found that SenchaTouch supports a way to build its files using Sencha SDK tool ( and in SenchaTouch folder, you can find a jsb3 file. This file is used for building the SenchaTouch JS output files (to includes into your HTML pages).

I start from this one. Just copy the touch.jsb3 files to another one and customize it. Customizing task is only "removing all unnecessary JS files" (mostly they are classes of UI layer).

After doing this step, I have a problem with the JS loading mechanism of SenchaTouch via Ext.Loader.    In the final package of the senchatouch, it loads all js files based on the default path = src folder. In my new project, I copy the senchatouch into www/lib folder. So, a lot of files cannot be loaded because of wrong path.

Because of this reason, I decide to separate the output into 2 packages:
1/ touch-core.js: includes the fundamental js classes for loading JS files + SenchaTouch class system.
2/ touch-extra.js: includes all of other advanced features of SenchaTouch: logging, Ajax, data model, storage

I must put the code of

enabled : true,
paths : {
'Ext' : 'libs/touch'
between 2 script tags to make it understand the correct path of Ext before loading the touch-extra file.

I found another critical issue in SenchaTouch build jsb3 file: the order of JS files are not correct and missing loading some important files. So, instead of using only 2 JS files (touch-core.js, touch-extra.js), it loads a lot of other files in the SenchaTouch src folder.

I decide to do a next improvement step. Based on the loading order of JS files, I put all of missing JS files/re-arrange the order of JS files in the jsb3 project. It takes me 1-2 hours :(. Finally, I created a jsb3 files for building the SenchaTouch core as my expectation:

touch-core.js: for using the Sencha Class system + DOM features.
touch-extra.js: for using other features (Ajax, Logging, Data Model, Storage, wrapper classes of using Device features, Utils).

After refactoring a little bit more, I can control deeply the way that Ext.Loader load JS files dynamically  and the final script to use "Touch Core" in my project looks better. Now I only need to embed 3 js files:
+ touch-core.js
+ touch-extra.js
+ app.js

In the app.js file, I set the path of Ext.Loader to make it understand the correct path to load my application scripts:

enabled : true,
paths : {
'MyApp' : 'js/MyApp'

Now, I don't need to set the path of 'Ext' namespace anymore because I put all necessary scripts into the 2 Touch JS files.

I did some testings with all expected features in Sencha Core as mentioning at the beginning and see it works very well. From now, I can use any other HTML5 framework for the presentation layer and use the Sencha coding style with my favorite features to save my time.

I put the jsb files and the tutorial to use it into Github at:
If you want to use it or create your own custom build of Sencha, you can get this as a reference.

Wednesday, August 24, 2011

Learning art and graphic design

For a long time, I've worked on technical solutions/consulting for many projects in my life. This job is great and interesting. However, one day  I found that: I became too "logic" strictly. In my mindset, there are only 2 guys for 2 different views: tech and business.

To be more flexible and creative, I think I need characters of an "artist". Actually, I don't know what would be happened in a kind of combination "Technology, Business and Art". However, I think it's very interesting and may make some evolutions in my future way.

So, what is exactly the kind of "artist" that I want to be? Actually, I stick my "art" need into software domain, not too general as  other artist guys, eg:  "photographer or painter".   I try to define criteria of this guy as below:

1. He needs to know evaluating how beauty a (web) design/artwork is.
2. He needs to know how to create beautiful-AND-creative designs/artworks.
3. He needs to have deep knowledge about User Experience (UX) and how to make a design in best UX.
4.  He needs to know how to research common habit/characters of the "crowd" to give the the best creative artwork (certainly in software domain :)).

I think these criteria are best match for the web designer job.

I don't know where to start from the beginning. I did asking my friends working as web designer and surfing on Internet to find my answers.  Everyone has his own way to learn Kungfu, right?

Below is the list of thing that I think I need to learn:

1. Color theory/ color harmony
2. Theory of graphic elements (shapes/lines/...)
3. Typography
4. Some basic concepts of photography.
4. UX common theory/best practices.
5. Learning graphic tools.
6. Enjoy/evaluating and stimulate some artwork that already done by others in the community.
7. Create my own "artwork".

 I start the "course" 3 days ago. Everything seems good till now. Below is the first "artwork" I did myself: the "KBird" logo. :))

It's still rubbish, but it could be a little bit progress. I think I will write down what/how I learn after finishing this course in other articles.

 Hope it helps for anyone has the same need like me. :)

Wednesday, May 4, 2011

Ubuntu for my mom

My mom does not know anything about computer. She often asks me to copy traditional songs that she liked to her very old-fashion phone. Everyday, she loves to hear news on TV and keep track any things related to health. These tools (phone and TV) are  "most hi-tech" things that she can use currently. 

I am beside her just 2-3 hours per day (not count the sleeping time). So, I know that she feels very lonely and sad when I am not there. I decide to help her know more about computer. It's a good tool for her to discover favorite things to relax at home. Anyway, helping an old person without knowledge about computer is not an easy task. 

All of my computers at home installed with Ubuntu. It's good for any tech guys liked me, but not too easy for my mom if she wants to learn.  
My mom and I

During my life, I develop software projects for many clients, many bosses - but never for my mom (the most important person of my life). This is the time I need to do that. So, I decide to setup the first IT project for my family. I call it "Ubuntu for my mom". The target is: helping my mom can use my Ubuntu computers in some days.

I will update these steps on the same post when I finish on each day. So, please comment if you have any good ideas to help me simplify/improve the "project".

Day 1: Setup a simple screen and help my mom to use the mouse for reading news

Step 1: Setting up

+ Create an account for my mom on Ubuntu. Setup for automatically login for that account. She does not get acquainted with the keyboard/mouse at the beginning. I did that to prevent confusion to her.
+ Install the Vietnamese locale for my Ubuntu. My mom does not know English. So, localization is suitable for her.
+ Changing the theme of my Ubuntu. Using big icons, theme with big contrast color. My mother's eyes are not good. This way helps her to know where to click on the screen.
+ Clean up all unnecessary icons on the screen.
+ Install Prism. Prism helps to create shortcut/application based on web URLs. I created some shortcuts for my mom for reading big magazines in VietNam (TuoiTre, ThanhNien, PhuNu, ...) on the desktop.

My screen after setting up:

Step 2: Help my mom know how to turn on/off the computer:

This step is easy for me, but not memorizable for my mom. So, I decide to put a big note on the "button to turn on the computer". Now, she knows how to turn on.

So, how to shutdown the computer? I added a single RED shortcut on the top menu. She just need to remember the "RED" color button to click. Now, it's totally easy for my mom.

Step 2: Help my mom to use the mouse

+ I guide my mom to use the mouse with very basic concepts: left button click, left button double click and scroll. She does not remember too much about when to use which actions. So, I take a big note and stick on my desk. After 1 hour, now she knows how to use the mouse for reading news with shortcuts I created for her.
+ I also guide her how to "minimize, maximize and close" windows on the screen.
+ Another important point: I guide my mom for navigate and click into link of the online magazine to see detail content for each articles, categories.

Result: day 1 is in very good progress. My mom can read news online and turn off the computer when I am not at home.

Wednesday, August 18, 2010

Knowledgeroot - installation and backup/restore

Knowledgeroot is an open source knowledgebase system. It helps you to create a central place for organizing information/knowledge for your team. 

Below is a screenshot from our current knowledgeroot system:

Anyway, the installation guide for this open source is not clear enough for you to install easily. I've just found a great guideline on below link:

I already tried to install it on my Ubuntu desktop for the team to use currently. After some days, I need to move this system to another server because if I shutdown my computer, noone can use it anymore :)

Fortunately, backup & restore knowledge root is easy. You just need to backup/restore the database only. All attached files are stored inside the MySQL DB.

MySQL v.5.0 supports some nice commands for you to backup data:

In this case, I prefer to copy the whole folder of my knowledgeroot database (because it contains also binary data files). So, I did below steps:

Step 1: using mysqlhotcopy to create backup database in raw

Below is the command I use to backup my knowledgeroot database to current directory:

sudo mysqlhotcopy -u my_db_account -p password_of_my_db_account  knowledgeroot . 

Step 2: copy this folder into USB, and copy it to the data directory of mysql (default mysql data directory is located at: /var/lib/mysql

However, I need to do a quick trick to copy this folder because /var/lib/mysql folder is not owned by my account by default
(a) sudo chown -R myaccount /var/lib/mysql
(b) copy the backup data folder into /var/lib/mysql
(c) return the owner for mysql account by this command:  sudo chown -R mysql:mysql /var/lib/mysql

Saturday, June 5, 2010

Smartphone market

Some useful information for all mobile developers

Mobile market share (2009)

(The graph below presents for general mobile market share)
Source: Gartner

Smartphone market share

Source: Nielsen

Worldwide Mobile Terminal Sales to End Users in 1Q10

(Thousands of Units)
1Q10 Market Share (%)
1Q09 Market Share (%)
Sony Ericsson

Source: Gartner (May 2010)

Worldwide Smartphone Sales to End Users by Operating System in 1Q10

(Thousands of Units)
1Q10 Market Share (%)
1Q09 Market Share (%)
Research In Motion
iPhone OS
Microsoft Windows Mobile
Other OSs
Source: Gartner (May 2010)