CSS and JavaScript Animation Remake For Tuas South Incineration Plant Video

What happens if you want to play an old animation video on a modern PC that was created long before FHD and 4K monitors are being invented? Instead of watching the animation, you will be dazed with square pixel boxes and wonder why would the animator likes boxes so much.

This project is a remake of Tuas South Singapore Incineration Plant video using multiple static images, intensive CSS animation and JavaScript for a school environmental hub project. The original animation video belongs to National Environmental Agency (NEA) Singapore.

GitHub: https://github.com/kennykee/Tuas-Incineration-Animation
Demo: https://demo.kennykee.com/MT (View it on the PC)
YouTube: https://www.youtube.com/watch?v=kbaUYNklYxo

Android GPS Randomly Turned-On XiaoMi and Huawei Honor Alternative Solutions

Recently I encountered GPS randomly turned-on on my Android phone. Even though countless time of turning-off and disabling location access on my Android phone, it is still turning on by itself.

It appears that it affects certain network and mobile device brands only.

Alternative Solution: Set network mode to GSM only.

1) Go to Settings.

2) Open Mobile Network Settings.

3) Click Network Mode.

4) Select GSM only.

When needed for browsing the Internet, turn back to Auto Network Mode.

This is a temporary solution until the network operator can resolve this issue.

Codeigniter Session Storage Alternative Method

The limit of a cookie is 4kb. If you choose to store codeigniter session data in the cookie then you should not exceed 4kb.

To store more than 4kb of session, you can set in config.php file with the following setting:

$config['sess_use_database']	= TRUE;

This allows you to store session data in database.

Refer to http://ellislab.com/codeigniter/user-guide/libraries/sessions.html on how to setup saving session data to database.

Alternative Method

An alternative method to store large session data without using database is to use CodeIgniter file-cache. This allows you to store session data into a file located in CodeIgniter cache folder.


function login(){

    /* Do your user login validation here */
    $user_id = $this->myusermodel->verifyLogin();
    $this->session->set_userdata('users_id', $user_id);
    /* End of login validation */

    $session_data = $this->mymodel->get_my_big_data(); 
    $cache_user = array();
    $cache_user["session_data"] = $session_data;
    $this->cache->file->save('cu-' . $user_id, $cache_user, 100000000);

From example above, i store only the $user_id into the session and the rest into a cache file in the server. The cookie / session is now very small as it contains $user_id only.

Then, I save session data into a cache file. To ensure I am able to access the correct cache file when I want to retrieve the session data, I use ‘cu-‘ + $user_id  as the key. Note that the time-to-expire is set to unlimited as the data need to be used all the time.

About CodeIgniter Cache Library: http://ellislab.com/codeigniter/user-guide/libraries/caching.html#file

To retrieve session data:

function loadCache(){
    $cache_id = 'cu-' . $this->session->userdata('users_id');
    $cache_user = $this->cache->file->get($cache_id);
    $session_data = $cache_user["session_data"];

    //Perform operation on $session_data here.

To retrieve session data, simply call $this->cache->file->get($cache_id). The returned object is exactly what has been saved.

Note: To ensure the safety of the cached data, ensure you put the cache folder outside of WWW or use .htaccess to disable access to any files in cache folder.

To change the location of the cache folder, modify the following in config.php file:

$config['cache_path'] = '/mydrive/safefolder/cache'; //Ensure this folder is writable by apache

Good luck on the implementation and have fun.

PHP HTML Entities String Function For Javascript Function Not Working Solution – Simple Concept

“Uncaught SyntaxError: Unexpected token ILLEGAL” is a common error when input parameter of JavaScript function is not closed properly.

1) To escape JavaScript parameter, we use PHP htmlentities function. However, even with PHP htmlentities, we might still encounter this issue. Consider the following example:

 PHP Code:

echo "<a href='javascript:showContent(\"" . htmlentities ("Edit Service Sushi's Shop", ENT_QUOTES) . "\");'></a>";

2) Now the string should be Edit Service Sushi&apos;s Shop.

3) However, when this string reaches browser, the string gets unescaped and becomes:

<a href='javascript:showContent("Edit Service Sushi's Shop");'></a>

4) Hence, the JavaScript function breaks when user click on this link.

5) To solve this, we need to double-escape the string.

echo "<a href='javascript:showContent(\"" . htmlentities(htmlentities("Edit Service Sushi's Shop", ENT_QUOTES), ENT_QUOTES) . "\");'></a>";

6) Now the string becomes Edit Service Sushi&amp;apos;s Shop. The string parameter is now safe. We can use this parameter string as input for jQuery.html() function without breaking the JavaScript function.

<a href='javascript:showContent("Edit Service Sushi&apos;s Shop");'></a>

function showContent(input){
   //the escaped characters will be unescaped via .html function

jQuery Images Crossfading Front Page Banner – Simple Stuffs

Creating a crossfading images slideshow for a homepage is easy. All you need is jQuery.

Steps as follow:

1) Assuming we have 3 images. All these images have same height and width, and positioned absolute. Each of these images are overlapping on top of each other.

	<img id="home-image-1" class="position-absolute" src="home-image-1.png"/>
	<img id="home-image-2" class="position-absolute" src="home-image-2.png"/>
	<img id="home-image-3" class="position-absolute" src="home-image-3.png"/>
	position: absolute;

2) Hide second and third image using jQuery hide(). Now we have only one image showing.

3) Next, we need to make the second image fading in after a certain amount of time in crossfading manner. To do this, we will set first and third images to have z-index = 0 while second image to have z-index = 1.

Note we have second image on top of all other images and it is still hidden. Call fadeIn(‘slow’) for second image.

4) Once fadeIn() animation for second image is completed, call hide() for first and third images.

5) Repeat this method for next images.

To see how to create continues looping of crossfading images, see code sample below:

		$("#home-image-2, #home-image-3").hide(); //Show first image and hide the rest.

	var curr = 1;

	function loopHomeImages(){
		var after = (this.curr + 1)%3; //Next image in the loop
		var bef = ((curr - 1) >= 0) ? (curr - 1) : 2; //Previous image in the loop

		$(".position-absolute").css("z-index", 0);
		$("#home-image-" + curr).css("z-index", 1);
		$("#home-image-" + curr).fadeIn("slow", function(){
			$("#home-image-" + after).hide();
			$("#home-image-" + bef).hide();
		curr = (curr + 1)%3;

That’s all.

Good luck and have fun.

Java Thread Not Created – run() or start() ?

Why is my Java thread not running?

A: Calling run() and start() are not the same.

start() – create a new thread. Now we have one main process and a thread executing concurrently.

run() – no new thread create. The main process go into the class of the thread and executes codes in the run() block. Now we have only one main process in the application.

run() is just a function in the class. start() is to ask the JVM to create a new thread first and uses this newly created thread to execute run() function.

So call start() when you want to create a new thread to execute your code concurrently.

javax.net.ssl.SSLException: Received fatal alert: bad record mac – Simple Solution

Recently, I encountered a Java exception called bad_record_mac while running a Java software that uses jsoup connection. 

After 1 hour of trial and error, I realized the website I am connecting allows only SSL 3.0 which previously is not.





To Solve This:

I added one properties line.

System.setProperty("https.protocols", "SSLv3,SSLv2Hello");

And now jsoup connection is able to connect properly using the correct HTTPS protocol. Note, don’t forget to include your SSL certificate as well when making connection.

System.setProperty("javax.net.ssl.trustStore", certPath);


Internet Explorer 10 Reset Settings – Simple Stuffs

Sometimes, Internet Explorer may crash or freeze during launch time. Therefore, resetting IE settings may help. Below are the simple steps to reset IE settings:

Disclaimer: This is a suggested method. Use at your own risk.

1) Click Windows Start button.

2) From Search programs and files text box, type “Run“. See image below.

Windows Run

Alternatively, press “Windows Logo” + “R”.

3) Click Run. A run dialog box will appear.

Run DIalog Box

4) From Run dialog box, copy and paste the following line.

%windir%\System32\rundll32.exe shell32.dll,Control_RunDLL inetcpl.cpl,,6

Windows Run Box

5) Click OK.

Result: Internet Properties dialog box will appear.

Internet Properties

6) From Internet Properties dialog box, click Restore advanced settings.

7) From Internet Properties dialog box, click Reset.

Reset IE Settings

Result: Reset Internet Explorer Settings dialog box will appear.

8) Click Reset.

9) Click OK.

10) Restart Internet Explorer browser.


Internet Explorer 10 Show Menu Bar – Simple Stuffs

Sometimes, you may notice that Internet Explorer menu bar is missing. Here’s the method to show it.

1) Open Internet Explorer.

2) Right click on the top part of the browser.

Internet Explorer Show Menu

3) From right-click menu, click Menu Bar.

Internet Explorer Show Menu




Note: If steps above not showing menu bar, you will need to close all Internet Explorer browsers and try the steps again.