[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

[Docker] Console Log Problem

Background
Making a docker application through docker compose, the log terminal does not return any of the console logging returned from my node server


Cause & Solution
Turn out the problem comes from my mistakes on making a "command substitution" in entrypoint of the dockerFile. Here is my entrypoint command

ENTRYPOINT /bin/bash -c "npm install && if [ $NODE_ENV == '"development"' ]; then \
$(nodemon --ignore node_modules/ mongoEngine.js); else $(node mongoEngine.js); fi"

Outputting in command substitution mode will not be captured. Remove the $(...) quoting solves the problem

References

• https://unix.stackexchange.com/questions/440088/what-is-command-substitution-in-a-shell
• https://www.cnblogs.com/sparkdev/p/8461576.html

[System] Remove Backup Volume from Laptop

Background
Bought a new laptop, but the partition is being chopped into different pieces, 512GB of SSD spaces is being chopped into half of system and half of data, and some are being occupied by Acer backup partition which is not what I wanted.


Solution
Following this guideline https://macrorit.com/wipe-hard-drive/delete-oem-partition.html, I first list current volumes and remove the 1 using command line interface. Restart the laptop, and the backup partition is backed again!