English version:
In the working time at 24th December 2021, I finally finished a critical UX feature of a product from current serving company and I had confirmed it can work as expected. I had been developed this feature over a month and it’s good to send a pull request for merging branch of codebase. Boss considers this feature is critical because of it can resolve headache about uploading files experience for clients, who are migrating massive mount of their files from on-premise to our cloud system.
This feature is to display multiple modals in same time for uploading files to remote storage and then those modals can be minimized by an user to corner of viewport just like behavior of facebook message within desktop web. As the modals are minimized, uploading files within them is still working. A modal can shows information of progress bar as before and it will automatically be marked closable if it completes uploading. User can benefit from this feature because uploading behavior won’t block users' other intension such as user can also switch to other folder(s) to do other uploading or see content of files, ……etc. This feature enhances original functions of uploading files. Original functions only can open a modal, and then to upload files within it in same time. At original functions, user needs to wait for uploading files to be done because a modal blocks a user’s subsequent intensions.

I’ve get more experiences about dividing problems from the process of developing this feature:

1. Get brief overview about existed implementation, which had done by quited frontend engineer, for realizng usage path, number of entry points for origin feature and mutual dependancy between core features

2. Divide large problem to small ones, bullet them as list of tasks and eliminate coupling level between components and features.

   If the range of a problem is too large to be resolved at once, I recommend you to try to resolve a small part of it for providing solution(s) every time.

3. Proactively report your handling progress show visible staged-result to boss and colleges. It’s fine to tell them what problems or obstables you’re encountered, give them an opportunity to assess your way for solving hard problems whether it has blind points or not.

   By the way. As you solving the hard challenge, ask the boss or a product manager they for arranging easy tasks to resolve within tiny leisure slots. Doing this can make clients feel we care their feedback and also keep moving the progress of product developments.

4. Write down every procedure and solutions of problems to your notebook as they come to mind. You assess them in your fragmentary time and add descrition/statement for undocumented code.

5. Try for getting a large part of undisturbed times from your team, which includes your boss and colleages, for concentrating on finish problem-resolving.

Get proficient experiences from frontend development:

1. redux observable

2. timing flow between redux and most kind of redux observable epic

3. react with setInterval() weird part.

   • setInterval() always gets initial vlaue of useState().
   • I use workarounds for passing the challenge, but I cannot explain how it works.
   • react useState() with setInterval() is good to be a interview question. Resolve example is here

4. ionic 5 custom styling with modal. It can use cssName to adapt with customized styling

5. Behavior of css height 100vh of iPhone safari v15 are different with 100% from my observation.

   • As a button is at low position within a fullscreen-type modal view, it will be covered by URL-address field of safari, which is placed at bottom of screen by default, so an user cannot see it and then click it.

6. ajax() of RxJS 6 has an attribute: progressSubscribe and this attribute can be used to subcribe progress of uploading files. progressSubscribe comes from object data of vanilla js’s XMLHttpRequest. RxJS 7 changes progressSubscribe usage interface, and it will be called from other component. RxJS 8 changes its usage a little, which compares to RxJS 7.

By the way, I had encountered situation of code without any description and code comment. The spaghatti code takes my time to add description for assisting me understand how code works.

===
中文版:
2021 年平安夜的白天上班時間，我終於完成已陸續做了一個多月的公司某個產品關鍵功能，確認運作正確，可以發 PR 了～ 這個功能是讓原本只能一次顯示一個上傳檔案的 Modal 視窗，而且必須要做完事情才能關閉當下 modal 視窗，改成能夠顯示多個視窗，而且能縮小視窗，就像 FB 訊息視窗一樣縮小，同時具備原本上傳檔案過程中顯示的進度資訊和上傳完成的資訊。 拆解問題的學習：

1. 對前人的現有實作內容先具備巨觀的全覽，為了要瞭解功能的使用路徑、功能入口的數量和核心功能相依賴程度
2. 拆開問題，並且拆解元件／功能的相依賴程度。當問題範圍太大無法一次解決時，每次改進時嘗試解決原本問題的一小部分
3. 主動向老闆報告處理進度、展示可見/可感知的階段性成果，並告知目前遇到難題，讓老闆或者其他旁觀者一起評估一下，現在我處理的方式有沒有盲點、以及如何解決問題和開發資源分配。另外詢問老闆 or PM 要不要安排一些小票進來，在研究如何解決大票的空檔時，持續推進其他產品的進度，讓客戶感覺我們有在處理客戶回饋。
4. 紀錄每個流程和問題解決方法到自己筆記本上，利用零碎時間評估，並且為原本沒有註解說明的程式碼，加上註解說明。
5. 跟團隊爭取，我需要一段完整不被打擾的工作時間。

技術上的新學習：

1. redux observable
2. redux 和已存在的各種 redux observable epic timing flow
3. react with setInterval() weird part 。setInterval（）一直取到 useState（）的初始值。目前我用其他方法繞過去了，但是我無法解釋原因。 react useState, useEffect with setInterval() 很適合當面試考題，解決範例在此
4. ionic 5 styling with modal 客製化樣式。用 cssName 去增加自定義樣式。
5. iPhone safari v15 的 css height 100vh 跟我以為 height 100％行為不一樣。當設計的按鈕在 modal 視窗畫面底部，會因為 css height 100vh，按鈕被 safari 預設在手機螢幕畫面下方的網址列蓋住。
6. RxJS 6 的 ajax()，裡面有 progressSubscribe，能夠訂閱上傳檔案進度，這是使用原生 JS XMLHttpRequest 物件裡的資料。RxJS 7 大改使用介面，從別的地方呼叫；RxJS 8 小改。

順帶一提，已離職的前一位前端工程師沒有留下任何程式碼註解，那位前端工程師可能以為自己寫的程式碼很 clean code ，實際上不容易理解，所以我為程式碼撰寫註解與說明，用以輔助理解程式碼用途，這額外花我工作的時間。