Jac 前端攻城屍的玻璃心: 3月 2024

2024年3月19日星期二

HD鬼故事N+1集

在許久許久之前，有位異常懶惰的工程師，正躺絕對不坐，能做絕對不站。如果能夠自動化的事情我就絕對不會親自動手，所以凡舉布版打包一類的瑣事，這位工程師通通交由腳本去執行。但事情往往不會這麼順利

在他的服務單位有一個傳統，正式機需由後端或維運來佈版，至於背後的原因，那可能又是另外一則鬼故事了。

測試機在沒人管的前提下，當然由這位工程師說了算，直接從github actions ci走腳本一路打包布版版到機器，全程無尿點，舒服！至於正式機......總之我秉持你愛怎樣我配合的想法，工程師就寫了個腳本打包，然後傳壓縮檔給後端讓他們自己去發揮。多日來倒也算相安無事，但鬼故事總是發生得措手不及那才叫做鬼故事啊！

這專案再一次大更版後，正式環境出現了不明原因的錯誤，且多日debug無果，老闆開始檢討起開發流程，覺得在測試與正式間，應該再多一個uat環境。這想法原則上沒問題，問題在後面。老闆覺得換皮站應該每個皮的系統是獨立的，防止換Ｂ皮結果Ａ皮壞掉.....從技術面向來看，這位工程師已經不知道要從何吐槽起了。總之還是那句，你愛怎樣怎樣。

老闆最終再提一個想法，應該要加快布版速度，防止用戶有不良體驗。

看到這裡大家應該覺得，那不就測試機的佈版腳本，就改一下環境變數直接上到正式機就好。工程師原本也是這樣想。但很可惜關於佈版前端工程師並沒有話語權。接下來主管一系列指令更是殺得工程師手足無措

關於快速佈版，主管提出使用cicd。這乍看下沒有問題，問題在工程師以為他也是github actions腳本寫一寫佈版，大錯特錯！他把佈版腳本寫進寶塔裡面，使用人工點擊腳本佈版

然後關於uat，工程師原本以為他會叫工程師開一個uat分支，多一個環境變數檔，當uat push時觸發佈版。結果完全不是我想得這麼回事！每當程式要上uat，會叫工程師把開發分支merge回master。（先別噓），然後他再點“按鈕”進行uat佈版，等測試完成後再點按鈕上正式。

哎.......就請問如果uat測試沒過，要改東西，這時有hotfix趕著上版怎麼辦！算了～只是一個小小前端工程師～如果能保一切順利老闆開心，這位工程師願意陪你們演猴戲，但好巧不巧事情就這麼發生了......

因為這套系統在打所有api前，會先讀取本地ip.txt，把裡面的網址進行解析測試，看哪個通就走哪個，但當初也不知道怎麼規劃的ip.txt放在根目錄，有開發過vue vite的小夥伴一定知道如果打包完要在根目錄，那檔案開發時要放在/public裡面，但事實是，ip.txt不歸前端管，是歸維運管，所以不應該放到前端專案中，等於打包時不應該打包到ip.txt這隻檔案，但最終打包出來卻要有這個檔案。

這聽起來很饒口，但實際上就是這樣。那應該怎麼做到呢？很簡單，測試機腳本是先下指令清光ip.txt以外的所有檔案，再把壓縮包直接壓進來，這樣就可以ip.txt不會被覆蓋及刪除。

當然主管也不笨，他在package.json中使用指令，在打包完把指令路徑的ip.txt複製到指定目錄。這樣原本上也沒什麼問題，但問題出在寶塔，例如yarn build && cp ../ip.txt ./dist/，這樣理論上會先打包在複製檔案，但不知道為什麼如果是按按鈕下指令，最終會看不到ip.txt這隻檔案，或許是寶塔優化了腳本變成多執行序執行？？導致一開始就複製進去，在build完後一並被刪除，不知道，這位工程師並不想了解。總之在改成這樣上版後，正式機癱瘓了，原因是找不到ip.txt。死活也找不到為什麼，最終只好一遍又一遍人工把ip.txt複製進去，可喜可賀......個頭啊！所以當初導入cicid的意義在哪，還是要人工啊！

後記

過程中工程師無論明著說，暗著說，告訴他們已經有寫好腳本。然後把專案管理權全數交數去，主管明明就可以看著腳本知道過程中到底都發生些什麼事，卻一行都不看，偏偏選用這麼....不自動的方式去打包，唉～槽點滿滿。真的搞不清楚主管到底是強還是弱了～

最終這位工程師將何去何從，下場又是如何，請靜待下回分曉

3/21鬼故事更新

果然就在發文兩天後就生了塞車，事後工程師主動請纓才讓事件有了完美的帷幕，至於日後還會發生怎樣有趣的事呢，讓我們拭目以待

2024年3月18日星期一

在前端寫後端？如何寫出不會被快取清掉的資料

前言

前陣子接到一個需求，要前端產出一個uuid，傳給後端當身份驗正。先別噴，身份驗證坐在前端前所未聞，但任務確實就是這樣，開發過前端的都知道，前端存資料選項沒幾個，就算我把資料存local storage，一但遇到清除快取也會消失。一開始ＰＭ那邊當然是說沒關係，我們盡量，但背後還是不斷給壓力說看有沒有辦法解決......這擺明就是後端的工作，我實在想不明白為什麼必須得前端做想，他們困難點到底在哪，相當然爾我兩手一攤說沒有辦法，結果主管有天突然就跳出來了說他想到更好的方法了！！

我們先來解釋一下他的想法，簡單說把產生uuid的做成單獨的一個站，然後除了存入local storage之外，還要用postMessage的方式將產生的uuid回傳，看到這裡聰明的小夥伴應該猜到，在原專案用iframe將上面這個站嵌入就可以了，變且addEventListener("message", (e) => { e.data })去監聽回傳內容就好。

這樣除非對方真的很專業開啟了產生uuid的站並清除快取，不然在原本的站怎麼清uuid都會保持不變，我附上code

// uuid page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSO Page</title>
</head>
<body>
<script>
function generateUUID() {
  var d = new Date().getTime();
  if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
    d += performance.now(); // 使用性能計時器來增加隨機性
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}
var uuid = localStorage.getItem('uuid');
if(!uuid){
    uuid = generateUUID();
    localStorage.setItem('uuid', uuid);
}
// 發送 local storage 中的數據給父頁面
window.parent.postMessage(uuid, document.referrer);
</script>
</body>
</html>

// parent page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Page</title>
</head>
<body>
<iframe src="https://uuid.com" width="1" height="1" style="display:none"></iframe>
<script>
// 接收來自子 iframe 的消息
window.addEventListener('message', function(event) {
  console.log(event.data) // uuid
}, false);
</script>
</body>
</html>

後記

我雖然滿佩服主管可以想到這種奧步的，且這招不光是只能用來存資料，也可以拿來做些偷雞摸狗的事情，例如我第一分工作就看到老闆使用iframe更新主頁面的畫面.......某種意義上來說也是ajax拉，把部分後端的工作移到前端來做。不考量安全性的話......天啊，我好不想想起當時那個畫面＝＝大家還是考量一下安全性，珍惜生命，少用iframe吧

2024年3月15日星期五

要改變component的樣式為什麼不是用v-deep

前言

在與前同事隨意尬聊的狀況下，前團是提出要我幫他看code的需求，他說他一直無法改變component的樣式，我想說不過就是v-deep的麽簡單的事情，所以想也不想就答應了，殊不知最終我搞了兩個小時的故事....

問題起源於他使用了套件vue-advanced-chat來製作聊天視窗，正確來說是前同事使用，所以他也只是背鍋而已。然後公司需求很多，然後這套件很多功能其實都無法達成需求。這故事告訴我們，選元件要慎選，如果客製化需求太多，自己造輪子不一定是不好，至少彈性足夠。

接下來要說說這次遇到什麼問題，就是audio的樣式在某種解析度會跑版，需要用css去修正，但無論用v-deep或是global寫css，死活都是吃不到，正一籌莫展之際，我看到了幾個關鍵字。

首先第一個為什麼這個套件的tag還可以保持原樣<vue-advanced-chat>，然後在tag下面出現#shadow-root(open)的字樣，下面可以展開，上次我看到類似的景樣是在iframe裡面，如果這狀況跟iframe真的是類似，那確實css selector無法吃到裡面也很正常。我上網查了關鍵字發現確實是類似的情況shadow dom，簡單說被web component包裝成一個原生tag了。

我原本想說有了關鍵字剩下就簡單了，所以去查要怎麼樣才能讓shadow dom吃到css，查了半天都說有:host之類的選擇器可以用，但每個都是過了一樣沒有效果，但看到這網站說明後才大致明瞭這東西必須在寫web component當時，也就是內部撰寫，所以也還是沒辦法達成我要的效果，且裡面也明確表示css是無法從外層直接影響內層的樣式。

正當我想放棄時我想到，既然css無法做到，能否使用javascript去強制修改呢？結果還真讓我找到解法，要分成兩個步驟來說，首先你要可以選擇到shadow dom，做法也不難，就是你要在選擇到web component之後，直接.shadowRoot就可以選到dom，之後再創造一個style並把內容寫好寫滿，之後appendChild進去就好，我們直接來看code

// 寫一個可以選擇到shadow dome的selector
const querySelectorAll = (node,selector) => {
  const nodes = [...node.querySelectorAll(selector)],
      nodeIterator = document.createNodeIterator(node, Node.ELEMENT_NODE);
  let currentNode;
  while (currentNode = nodeIterator.nextNode()) {
      if(currentNode.shadowRoot) {
          nodes.push(...querySelectorAll(currentNode.shadowRoot,selector));
      }
  }
  return nodes;
}

// inject css
const style = createElement("style")
style.innerHTML = `
.class { ...... }
......
`

document.querySelector("custom-web-component").shadowRoot.appendChild(style)

這樣就大功告成拉。

後記

我就說好好的vue component為什麼要包成web component，應該是考量到要讓各種框架使用，然後你包沒有關係，為什麼要包成shadow dom，然後你包成shadow dom沒有關係，為什麼還要有bug！！好在大爺我幾十歲了，不怕你！雖然已經一點多了，下班

2024年3月11日星期一

vscode常常壞掉該怎麼處理

前言

如果有寫typescript的人應該再複製貼上或使用snippets來輔助輸入的人應該很常發現貼上後莫名畫面中出現很多紅線，然後vscode的輔助開發就壞掉了，需要關掉重啟才可以

今天我心血來潮，嘗試使用指令reload window去重啟vscode，這樣確實可以達到不用關閉就可以修復編輯器的效果，但每次都要按command+shift+p 然後再輸入reload...實在有點繁瑣，心想應該可以設定個command+r的快捷鍵讓他自動重啟吧

所以我打開快捷設定，我這邊用英文版，所以我不知道中文版叫什麼名字，可以參考圖片

打開之後找到reload window發現原來已經有快捷了，而且還正好是command+r，但為什麼怎麼按都沒反應呢？後來上網查在知道原來when的這個欄位也要設定，要設定觸發情境

所以在reload window上面點右鍵選擇修改上面點右鍵選擇修改when，然後輸入editorTextFocus

因為壞掉一般都在程式編輯過程吧。設定完之後就大功告成了，再遇到壞掉直接敲快捷就搞定了。

祝大家之後都可以準時下班～啾咪～

2024年3月10日星期日

bilibili內嵌設定

在祖國你別想說要用youtube絕對封得你不要不要，如果直接把影片放s3也不見得會比bilibili穩定，所以難免會使用到影片嵌入。

但直接使用官方給你的內遷網址範例如下

然後如果你要加上自動播放等其他的功能，autoplay=1，之類的功能，你會發現根本不屌你，你上網查基本上也查不太到有用的資料。如果只是參數沒用那也就算了，safari網頁開啟竟然沒有聲音....我你個去你們家測試工程師會不會太混了一點！

終於找到這篇說明，原來bilibili有寫一個播放器，所以只要把網址稍微改一下

就是//player.bilibili.com/player.html換成了//www.bilibili.com/blackboard/html5mobileplayer.html

之後其他網站叫的參數基本上就可以生效了，safari功能也正常了，交差去吧～

訂閱：文章 (Atom)

2024年3月19日 星期二