Cannot install npm modules "cross-env"

Problems

Installing npm module "cross-env" states the following error

npm error on every command: EEXIST: file already exists, mkdir 'c:\users\user\appdata\Roaming\npm'

Troubleshoot

1. Try re-installing the module -> no luck
2. Try installing with "npm install --force --save-dev cross-env" -> no luck
3. Try removing npm cache -> no luck

Solutions

Turns out I have put the npm start scripts before actually install the module, which is the cause of the error, DO NOT update the script with the command "cross-env" before installing it.

References

• How can I set NODE_ENV=production on Windows?
  

Pipeline failed after changing the desktop machine and upgrading Ubuntu

Background

Recently I have changed my desktop to a mini PC and update the Ubuntu system from v18 to v20, which cause the gitlab runner failed to run.

The annoying part is that it only outputs "Job failed! exit status 1" which provides no clue for my debugging.

Troubleshooting and Solutions

Retrieve more debugging information using "journalctl -u gitlab-runner", which did provides some clues with the following

But it still is not enough for my debugging, I then find out with the help of the reference links, stated that the ".bash_logout" script of the user "gitlab-runner" is the cause of the issue. Every time when the runner use user gitlab-runner and exit (logout) the account, under the logout script, clear_console script 

is being called which gitlab-runner user does not have any privileges. Commenting the clear console script and re-run the runner solved the issue.

References

• https://gitlab.com/gitlab-org/gitlab-runner/-/issues/3849#note_134536963
• https://www.cnblogs.com/zhang-guansheng/p/13429527.html
  
• https://forum.gitlab.com/t/self-hosted-gitlab-ci-runner-shell-executer-fails-immediately-with-error-job-failed-exit-status-1/33252
  
• https://docs.gitlab.com/runner/faq/#run-in---debug-mode
  
• https://unix.stackexchange.com/questions/225401/how-to-see-full-log-from-systemctl-status-service
  

Printing image in non POSIX system

Background

In a project which needs to print receipt using heat sensitive printer, I successfully print out the receipt for each take away ordering, like below

Existing version of the receipt contains only text, using node module printer I was able to print the text properly, but recently a new request requires to print the qr code, which is in the form of an image, which this node module is not supported.

Somehow only CUPS printer support image printing which is not what Windows is supporting...

Solutions

So luckily I keep searching in the issue thread of the node printer plugin, and found this thread. 

So from the reply, I agree that there is no need for me to use time for finding node plugins, instead I follow the path to use a Windows application "printhtml" to first generate a HTML file and then print it.

Although it is quite a bit complicated, as I need to create a child process in my node application and execute the remote command, but it finally works.

Steps

1. In loopback application, send socket message to the remote node daemon which that PC is connecting to the printer.
   
   
2. The node daemon received the socket message and generate the HTML file (with the QR code image)
   
   
3. Execute the child process and run the printhtml executable and print success.

References

• https://www.npmjs.com/package/qrcode#qr-code-options
  
• https://www.npmjs.com/package/printer
  
• https://stackoverflow.com/questions/17242516/mingw-w64-threads-posix-vs-win32
  
• https://github.com/tojocky/node-printer/issues/206
  
• https://github.com/tojocky/node-printer/issues/20
  
• https://stackoverflow.com/questions/23437804/is-it-possible-to-print-an-image-with-node-js
  
• http://www.printhtml.com/
  
• https://stackoverflow.com/questions/21617468/node-js-generate-html
  

Clone system disk from larger to smaller size HDD

Items

1. Windows 10 USB (for fixing MBR)
2. Gparted USB

Procedure

1. Bootup the GParted USB
2. Shrink the volume of the large HDD enough for the smaller HDD to save to
3. Copy all the partitions of the source HDD to destination HDD
4. Reboot the system
5. Boot up the Windows 10 USB
6. Repair Windows MBR partition
1. Choose troubleshoot > command prompt
2. Type Diskpart
3. List disk > sel disk X, where X is the one of the new HDD
4. List vol 
5. Sel vol X, where X is the EFI partition (the one with ~500MB volume)
6. assign letter=V:
7. Type "exit"
8. Type "V:"
9. Type "bcdboot X:\windows /s V: /f UEFI"

References

• Windows 10 bootrec /fixboot access is denied

Concept of react elements, components and instances

References

• React Components, Elements, and Instances by Dan Abramov
  
• Difference between React Component and React Element
  
• How to append element to variable to be render in react
  
• Difference between React Component and React Element
  
• Assign a React component to a variable with extra props
  

Setting up ARC between Onkyo amplifier and Panasonic TV

Background

Want to try the functionality of using ARC to pass through TV audio to Onkyo 626 amplifier to output sound

Problems

After configuring settings in amplifier and TV, the audio is still not playing through my speakers

Solutions

One of the device (media player EGreat A5) is blocking the ARC signal, disconnecting it with the Onkyo amplifier make things work normally

Set-up sharing

Panasonic P55VT50H

• Press remote button "Option", configure VIERA Link as "On"
• You will find "Home theatre" selection in Application section

Onkyo NR626

• The output channel should be selected with "TV/CD"
• The main TV out of amplifier (Out 1) should connect with Panasonic TV's (TV in 2)
• Advanced Settings > Input / Output Assign > Digital Audio Input > TV / CD, configure it as "--"
• Advanced Settings > Source Setup > Audio Selector configured as "ARC"
• Advanced Settings > Hardware Setup > HDMI，HDMI CEC (RIHD) configured as "ON" and Audio Return Channel configured as "Auto"

References

• Onkyo TX NR 626 User Manual
  
• ARC 問題
  
• Onkyo、Sony Bravia, ARC 設定
  
• 電視有ARC的HDMI接喇叭的問題?
  
• Panasonic 49GX800H駁soundbar，兩者都有ARC, 但沒聲出
  
• [教學] ARC問題的可能解決方案
  
• [教學] 很多人卡關ARC. 有冇人用pioneer amp Panasonic 電視成功用到ARC
  

React concepts and learning

1. Usage of useRef

• Syntax: const refObj = useRef(initialVal), where refObj={current: initialVal}
• refObj is mutable
• Value persists through the react lifetime (even after you changed the initialVal)
• Use cases
• Managing DOM directly, e.g.: textfield focus, integrate with 3rd party DOM libraries
• <input ref={textInput} type="text" />, where const textInput = useRef(null) is declared on top of the functional component, by accessing textInput, you retrieve the input DOM element for further processing
• Store instance variables
• Use to store setInterval or setTimeout's ID for clearing at unmount stage. 
• const intervalRef = useRef(null);
• intervalRef.current = setInterval(() => { // something... });
• clear stuffs in return function of useEffect return () => { clearInterval(intervalRef) }
• Use as render counter when you want to know how many re-render made by React (since ref values keep throughout the React lifetime)

2. Usage of useMemo

3. Usage of useCallback

References

• What is the different between the ref={callback} and the ref = “myInput” in react?
  

4. About useEffect and rendering timing

useEffect always run after the UI rendering is done, the useEffect will check the dependecy array against the value of the last render, and run the useEffect callback when they are different from each other.

References

• What are production use cases for the useRef, useMemo, useCallback hooks?