[Android] JS debugging

Problems
I know for many of them it may be an old news, but I am quite surprise chrome debugging can be so easy even in Android device. Facing some weird bugs, when the front-end tries to fire an API to perform some server actions, it only succeed in desktop chrome but not mobile chrome.

I know it has a high chance of not a coding issue, but some specific settings that only occurs in mobile chrome, and even more, the API call works in incognito mode, which makes me even more curious on why it happens.
Solutions
To find out what actually malfunctioned behind, I planned to find a way to let me get a sort of like "remote logging", which connects my android device to the development machine and view the console log of the Android chrome for further bug tracing.

Turns out, it is quite easy, which use me only 5 minutes to setup

1. Enable USB debugging in Android device

2. Connect the Android device and accept the permission dialog raised on phone

3. Open the desktop chrome > console log > more tools > remote devices

4. Check "Discover USB devices", and wait until your device comes up to list (mine is Oneplus 7 pro, so the model is shown up as "GM1913"

5. Interesting part comes up, when you type in the address and press open, the remote device will pop up chrome and navigate to the designated site! YES! We've now got a console log for our mobile version of chrome! 

6. Press "inspect fallback" or "inspect", a remote device devTools come up and you will see a REALTIME mapping of your device's chrome screen in the devTool, they are in sync now!

7. You can of course do anything just like you inspect your desktop site, like inspecting network tab, console logging, capturing back-end data etc. And more surprisingly, as both of them are insync, you can control the phone's surfing behavior through desktop browser's debugging window too!

8. So finally I found the data save mode add a data save header causing my API call being cache and causing the failure. Disabling that mode brings the API call succeed again! 

References

• https://developers.google.com/web/tools/chrome-devtools/remote-debugging?utm_campaign=2016q3&utm_medium=redirect&utm_source=dcc
• https://stackoverflow.com/questions/2314886/how-can-i-debug-javascript-on-android
• Video captured for demonstration of remote debugging

[JS] RequireJS - Prevent JS File Caching

Problems
Very often when we updated the JS files, directly refreshing is not reflecting the changes, instead we need to manually clear cache, which makes end users using the web application quite annoying.


Solutions
RequireJS provides "cache busting" which can force browser to download the latest version of JS files every time new pages loaded

Basically, we write a general function accepting target path not to cache, the "require.config" will then execute the function, the bust function actually use current time and attach as the parameter of the JS URL, since time is always changing, it can force the browser to retrieve the JS files for every load

function bust(path) {
    return path + '?bust=' + (new Date()).getTime();
}

require.config({
    baseUrl: '/base/path',
    paths: {
        'fileAlias': bust('fileLikelyToChange'),
        'anotherFileAlias': bust('anotherFileLikelyToChange'),
        'jQuery': 'jQuery'
    },
});

References
- https://stackoverflow.com/questions/16523755/cache-busting-specific-modules-with-requirejs

[JS] Useful ES6 / ES2015 Syntax Enhancements (Keep Updating...)

Below are the es6 enhancements that are easily forgot but use a lot. Keep them noted here

Details
1. Function definitions in object (shorthand)

const obj = {
  foo() {
    return 'bar';
  }
}

2. Shallow copy using spread operator

let obj1 = { foo: 'bar', x: 42 }

let clonedObj = { ...obj1 }

3. Nested object properties destructuring

const nestedObj = {
	open: true,
	btnAct: {
		proceedLbl: 'aaa',
		cancelLbl: 'bbb',
	}
}
const {
	open,
	btnAct: {proceedLbl, cancelLbl}
} = nestedObj

proceedLbl and cancelLbl variable is created with value nestedObj.btnAct.proceedLbl and nestedObj.btnAct.cancelLbl

[Android] Boot Loop when Changing Custom ROM

Problems
Recently I want to change other custom ROM for my Mi Pad 4 (Clover), but something strange happens, some ROM can dirty flash nicely while some didn't. This catch my attention.

The symptom is that when flashing some ROMs, it did flash successfully, but become bootloop in the system logo. Then I head to twrp recovery, clean dalvik cache, data etc. But problem still exists.

But this popup gives me a clue for the solution

The system get stuck for 1-2 minutes and the "encryption unsuccessful" warning pops. It told me to reset my phone bla bla bla


Solutions
Turn out some of the ROM changed my MiPad's file system to f2fs for the sake of performance, I then go to Wipe > advanced wipe > select data > change or repair file system > change file system, change the file system back to ex4, and hola! I can boot into the new custom ROM again!

References
- https://forum.xda-developers.com/mi-a1/help/encryption-unsuccessful-help-t3763087

[CSS] Keeping DIVs Side by Side

Problems
Making DIVs left and right side by side with the same height is a "always wants to accomplished" task, having the same height of 2 divs ensure the best alignment and appearances upon designing our UI.


Solutions
First we set the outer div to display: flex, and the inner 2 divs to flex: 1, the purpose is to told the browser that 2 child DIVs are of the same proportion. 

And that's it ! Now no matter what content is in the 2 DIVs, they will always share the same height

References
- https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height

[System] Revive Folder Cannot Open Problem in Ubuntu

Problems
Ubuntu OS has been started for 80 days, and many problems occurs, one annoying issue is unable to open any folders and even more serious unable to use the desktop (unresponsive)


Reasons and Solutions
Seems the daemon / program handling the UI stuffs crashes (nautilus), so seemly kill and restart them solves the issue

ps -A | grep nautilus // gather target pid

sudo kill -9 pid  // kill the program by pid gathered from previous cmd

And that's it ! All desktop functions and folders can be functioned properly again, saving me from restarting the whole system and re-initialize all my programs

References

• https://superuser.com/questions/1320475/cannot-open-folders-located-on-ubuntu-desktop

[Angular JS] ng-click and ui-serf

Problems
Using angularJS ui router with 3 ui views, Leftbar for showing menu, topbar for showing application title and actions and content view for displaying actual content.


Clicking links in leftbar trigger change in state which in turn change the view of the content correspondingly. At the same time, current usage of the tab will be highlighted.


Problem is the color highlight is wrong. Surfing content B highlights menu of title A.


Reasons and Solutions
The mixture of usage of "ng-click" and  "ui-serf" in menu bar item causes the issue, I somehow used both ng-click to change router state and the view simultaneously, but the funny thing is when you change the router state, the binding will re-do and all the view binding will reset to initial state. This explains why when I click the link one more time, the color highlight becomes correct.


To fix this, I change the implementation method, I bind the $stateParams and $state to $rootScope as follows

$rootScope.$stateParams = $stateParams;
$rootScope.$state = $state;

After assigning, I can access the current state directly in the view template and therefore save the effort on changing the state in ng-click

References

• Can you use ng-click with ui-sref?
• Angular - run block vs bootstrap
• Angular UI Router Quick References
• UI Router Tabs with Routing