HD鬼故事N+5集

今天來說說洨邊的主管之路

就在洨編當上主管後，PM照常發任務給我底下工程師，我就這樣被架空了半年，甚至連週報都沒有寄了，每天就忙著摸摸新技術什麼的，甚至還抽空學了套flutter，過得好不愜意。

就在半年之後，因為人力分配不當導致專案延宕（事實上我覺得分配沒啥問題，畢竟我底下也才兩個人可以用），老闆怪罪下來，說項目經理（CEO）管理不當，再犯直接辭退，PM架空主管，懲處罰金X千元.....WTF，如果是我，寧願被口頭警告也不要被罰錢，而且公司可以罰員工錢的嗎！！這啥鬼故事！

但這事也沒什麼，就在事情過去兩三個月，我終於把手邊任務清得差不的時候，團隊迎來第一個大任務，重構

就是手上有五個長得非常類似的站，當初不知道哪個白癡手筆，硬拆成六個專案來維護（一個基礎站，別問我這是什麼，解釋起來我會怕），我從進公司就不斷提說要節省人力，要好維護，要不出問題，終就只有重構一途，這次終於要進行了

隨著會議進行，雖然項目很大，但我也是摩拳擦掌，信誓旦旦，沒想到在老PM休假一週後，一切就變天了，在一次會議中

老闆：還是你就在五個站當中挑一個站，加上換膚，這樣不就可以了

我：？？？？（那我們前兩個禮拜在討論辛酸的嗎）

但老闆都說話了，且這筆買賣我也不是太虧，我就挑一個我有長期在維護跟重構的專案來當基礎站

我：那我選76站

老闆：那你們要解決頁面切換不順暢的問題

我看到這句話，心理想說我都已經沒有用lazy load，還會切換不順？？難道要加上動畫？？

所以我拆成兩大任務進行，第一，我現有的react專案，把底層改成astro.js（網傳這樣切換速度可以加速），路由切換加上動畫。第二，加上換膚功能

第一任務簡單說就是，在置換過程千瘡百孔，動不動就沒畫面，一堆坑要填，免勉強強一個月才完成底層置換，根本不像網路上講的幾乎無腦置換，重點換完效能更差＝＝每次頁面切換都會頓個半秒到一秒

第二個任務倒是很快就順利完成

最終到了驗收時間

老闆：你們沒有解決畫面切換不順的問題啊，我不能為了節省人力，讓客戶體驗變差，公司為了你們一個月沒有任何產出

我：當初讓我選的是你，答應的也是你，現在不讓我上的也是你，且這專案頁面切換幾乎就是0.1秒，到底哪裡不順，能不能說明一下

CEO：你看一下錄影

我看完錄影發現，畫面是切過去了，但component要等api打完，才會長出來，幹！這叫做顯示流程有問題，才不是什麼效能問題

我看完真的是無FUCK說，需求在他們心裡，在這公司也不是一天兩天的事，PM私下建議我不要再上訴，默默把顯示流程優化完，再給他們看，簡單來說就是要我們加班拉。

然後過兩天......這位PM就掰了......說是沒過試用，實際原因也不知道，我也只能猜他背了我們的鍋。

過幾天老闆鬆口說，這次真的要進行重構了，但需要作足研究，避免做出來更慢（看來他對我們誤會很深啊），然後要我們給承諾.......（這公司不僅會扣錢還要員工給承諾），我說技術就這幾種，你們在意的體驗問題我們也了解了，新的站會特別打磨這塊，針對競品的研究可以作給你，但承諾我是給不出來拉，畢竟關係的層面太廣，從運營到後端，每個環節都可能影響網頁流暢，不能所有事都我們扛吧！

這次雖然真正開始重構，但老闆也沒上什麼心，但這樣也好拉，省的他來比手畫腳＝＝，且畢竟之前停擺了一個月，累積了大量的卡片要清，所以我也只能讓大家先把任務做完，有空在進行重構，只是可想而知這樣進度一定會不如預期，但....目前也只能這樣

真正的鬼故事才正要開始，一次機緣下，其他部門要招新人，老闆隨口提到看我要不要再找一位，（其他部門有一位前端因為開週會時，開直播逛賣場後來掰了），我想說員工這種事多多益善，隨口就答應了，隨即談起這次照聘薪資，我聽聞後，寫信給老闆說：如果只是要補這工程師的洞，根本不需要這麼多錢，故能否招聘個普通的工程師（我有內推），然後剩餘金錢讓我們作其他應用，幫其他員工加薪

老闆馬上斥責我，公司沒有加薪制度，且你最近表現不佳，部門屢屢犯錯，破壞公司和諧，已經準備找人取代你！

......對於沒有完成換膚，我只能說，我確實也沒確認好他們的需求（幹這是PM的工作為啥是我扛）。過程中員工犯錯，我也不能為其說話，這就專案就的確實有問題，你就算殺了他也解決不了事情，事情還是會一再發生。最後對於破壞公司和諧的部分.....我只能說，那天我口氣確實不佳，但我始終就事論事，論述內容也沒問題，是對方開始跳針，且當時已經很晚了。但說到底這也是我跟那員工之間的事，這也要被他捅刀上報，我也是認了。重點這是都過去兩個月了，還要拿出來鞭屍。

我完爾一笑，日後也只能龜縮度日，但招募還是要繼續

就在七月中，我面識了一位內推，技術能力不錯，開發習慣也不錯，重點他還是台中人，且暫時沒有其他競爭者，我回報給PM結果，想說應該是穩了，沒想到過兩天PM回復：老闆希望找個有領導經驗的......你他媽的！有先決條件怎麼不先說！目的這麼明顯要把我換掉你幹嘛不自己來面啊！讓我面一個人來把我換掉，你可以在惡趣味一點啊！～

結果過了一個多月的奮戰，這位仁兄還是沒能錄取，錄取了另一個技術能力不錯，話非常多的工程師，有機會在來說說的的故事

總之我在這間公司的故事還沒說完，看有沒有機會出第六集～

vue3做css變數操作除了v-bind你還有其他選擇（好文分享）

話不多說，上連結

簡單說靠著ref指定元件，接著設定:root css變數，最後靠setProperty改變變數內容，這著挺精妙的，大家有空可以上去爬原文

靜態資源快取怎麼做？

前言

很難得一天發兩篇文，還都不是我的本業文（算了我也不是第一天不務正業

總之後端反應為什麼前端會重複下載靜態資源，請我去查（乾～這又關前端什麼事

我再度拿我的專案去問gemini-cli，他給我的檢查方式是看network，靜態資源檔的size，如果顯示為disk cache或memory cache，那就是正常快取，如果為容量，那就是沒有快取（我以為是看status301，問了才知道301是轉址，好在不是問維運不然一定被嗆爆

這邊有個要注意的點，注意network頁的disabled cache不要打勾，不然你永遠看不到快取（我就這樣犯傻浪費了些時間

以下這張圖就是有拿到快取

假設沒有快取，如果你想在nginx上設置，可以加上以下配置，時間可以自訂

location ~* \.(jpg|jpeg|gif|png|svg|ico|webp)$ {

# 快取有效期設為一天

expires 1d;

# 明確設定 Cache-Control 標頭

# public: 可被任何快取（包括 CDN 和代理伺服器）快取

# immutable: 告訴瀏覽器這個檔案內容絕對不會改變，不需要為了驗證而重新發送請求

add_header Cache-Control "public, max-age=86400, immutable";

# 可選：關閉這個 location 的存取日誌，減少 I/O

access_log off;

}

這樣應該就可以做到一天快取

小結

結果在我們站上，我把nginx設定拉掉，快取還是在啊，強烈懷疑那位後端把disabled cache打溝了，但我沒有證據......好拉快點讓我下班吧＝＝

原來前端資源讀取阻塞是Http協議的問題

前言

圖片有點小，簡而言之他們說api載入速度慢是因為前面一堆東西要載阻塞了，請前端協助確認

原來loading組塞也規前端管，三更半夜收到這種消息想必正常人都要睡不好了！

好在我11點就調勿擾，且我已經睡了。珍惜生命，遠離手機，特別是三更半夜還有同事在加班的公司。

總之言歸正傳，我之前一直以為瀏覽器的升級讓資源載入不會阻塞，所以我壓根不用考慮這件事，所以我問一下ai獲得以下答案

A：1. (強烈建議) 啟用 HTTP/2 或 HTTP/3

這是解決此問題最現代、最有效的方法。

* 原理：HTTP/2 和 HTTP/3 支援「多路復用 (Multiplexing)」，允許在單一的 TCP 連線上同時處理多個請求，完全繞過了 HTTP/1.1 的隊頭阻塞 (Head-of-line blocking) 問題。

* 如何做：這需要在伺服器端進行設定。您需要與後端或維運團隊合作，在您的 Web 伺服器（如 Nginx, Apache）或 CDN 服務商上為 api.ktkdf.xyz (或 bb.025674.com) 域名啟用 HTTP/2 或 HTTP/3

支援。

* 優點：一勞永逸，不僅解決 Stalled 問題，還能提升整體網站的載入效能和反應速度。

Q：接著我問我該如何得知目走的是HTTP多少

A：方法一：使用瀏覽器開發者工具 (最推薦)

這是在您自己的開發或生產環境中，最快也最準確的確認方式。

1. 打開您的網站：在 Chrome、Edge 或 Firefox 中打開您要檢測的頁面。

2. 打開開發者工具：

* 在 Windows/Linux 上按 F12 或 Ctrl+Shift+I。

* 在 macOS 上按 Cmd+Opt+I。

3. 切換到 Network (網路) 標籤：在開發者工具面板中，點擊 "Network" 或 "網路"。

4. 重新整理頁面：保持開發者工具開啟，然後按 Ctrl+R 或 Cmd+R 重新載入頁面。你會看到所有的網路請求都列了出來。

5. 查看 Protocol (通訊協定) 欄位：

在請求列表的表頭中，找到名為 "Protocol" 的欄位。

* 如果沒有看到 "Protocol" 欄位：在表頭（例如 "Name", "Status", "Type" 的那一行）上按一下右鍵，然後在彈出的選單中勾選 "Protocol"。

6. 判讀結果：

* 如果顯示為 `h2` 或 `http/2`，恭喜，您的網站正在使用 HTTP/2。

* 如果顯示為 `h3`，代表正在使用 HTTP/3 (更新、更快)。

* 如果顯示為 `http/1.1`，則代表您還在使用舊的 HTTP/1.1，這就是造成 Stalled 問題的元兇。

方法三：使用 curl 指令 (進階)

如果您熟悉使用終端機，可以用 curl 指令來檢查。

打開您的終端機並執行以下指令 (將 your-website.com 換成您的域名)：

1 curl -Is https://your-website.com | head -n 1

* 如果回應是 HTTP/1.1 200 OK，代表是 HTTP/1.1。

* 如果回應是 HTTP/2 200，代表是 HTTP/2。

檢查結果

方法二要用工具太麻煩就忽略吧

至於http protocol之間差異在哪，gemini解釋太長了我直接放上連結

用人話來說就是http1.1一次只能載6個檔案，所以會組塞，http2跟3速度更快

小結

所以最終結論就是，真的不關我的事，後端跟維運要處理，AI萬歲，半小時搞定，準時下班～

你知道vscode也可以做到ngrok的效果嗎？

通常我們要把電腦的網頁分享給別人

一般人都會下指令

ngrok http 80 // or 8080 or ....

前提是你有ngrok指令，這樣就會產生一段網址，可以連到你電腦的某個port

但近期看到一篇奶綠茶大大的文章

詳情大家可以自己去看，簡單來說vscode也有類似的功能，但實際操作起來狀況挺多的，我作一下紀錄

我初次在嘗試一直卡在開啟的部分（我現在試正常，可惡，而且似乎只有我遇到），等了十分鐘也沒下文，我想說不應該啊，一個服務啟動這麼久，好意思說要取代人家，後來show log點進去，滑到最上面，有看到一些網址，找到device後綴那個網址，先別急著點，再往後面一點，有一串八碼的代碼，先複製起來，再打開該網址

首先會看到要用github帳號繼續，接著會要求輸入八碼代碼，然後就是認證什麼的繼續點，最後才成功開啟服務，看到他給的網址

記得把port visibility改成public，修改方式是按右鍵，找到port visibility，下拉選單進行選擇（這點實在很不直覺），這樣可以讓你朋友在連網址可以少一個動作，但還是有機率會先進到微軟畫面，要點一下繼續（這情況大概兩三個人會遇到一個，我拿學生作實驗）

結論：
所以論爽度ngrok還是稍爽一些

好文分享，人人都需要http-proxy來debug

網路文章

safari的header延伸，踩坑系列

 故事發生在一天下午，被開出了bug，請參考下圖

動態島nav bar的部分被延伸了，有趣的是，在另一個平行專案，底色是藍色卻不會發生。

詢問AI說是safari為了給你滿滿的沉浸式體驗，有了這相設計，我咧甘霖良！能不能不要這麼假掰，還有這BUG位啥要算在前端頭上，你應該算在庫克頭上啊＝＝

但，藍色不會發生代表他有可能可以克服的吧，我比對了一個晚上的程式碼，發現不管顏色你寫在是body, header還是最上面的div背景顏色，都可能會影響到nav bar，然而可能比較潛顏色不會（所以平行專案的淡藍色才沒有），靠悲，這樣我怎麼搞啊！這時AI大神也救不了我了

最終，我還是在同個專案中找到了答案，我發現它header背景顏色如果是漸層，nav bar就沒有延伸了....如法炮製了一下還真的是，所以只要把單一色改漸層（漸層兩邊放同一個色碼就好），成果如下，只能說，握草～～

placeholder突然變粗了？css踩坑系列

事情是這樣的，在案發當天晚上十點左右，UI突然敲我說為什麼input所有placeholder字體都變粗了，我到底改了什麼，叫我退版。

問題是我根本什麼也沒改，被UI被PM被測試追殺已經很煩了誰還有空亂加東西，我矢口否認，但UI開始瘋狂跳針叫我退版，我一氣之下回他：「小姐你知道我今天上了多少版嗎？你要我退版好歹也要讓我知道哪一版啊！」

然後我就被吉了！

但這不是今天重點，總之後來我使用下面這語法暫時瞞過主管趕上線

input::placeholder {

@apply font-light;

}

硬把字體調細了。然後我仔細去看UI給我的對比，確實這頁的placeholder比較粗....這就神奇了。但礙於當時已經很晚了，趕快做完保命要緊！

然後就過了兩週，今天心血來潮想要一探究竟，最終發現最外的.page裡面有個語法

-webkit-font-smoothing: antialiased;

把這語法點掉就變粗了，但因為這在很外層所以當天沒找到，礙於時間壓力也沒心思慢慢看。

但為什麼這頁會出事呢？根據css說法這語法是用來消除鋸齒，讓文字更平滑，看起來也會更細，

那為什麼這頁會突然變粗呢，原因是因為頁面中底部的popup我是使用React.createPortal去創建在body下面的，所以他根本沒吃到.page的css

所以UI口中的突然壞掉要我退版，就是我手刻了這個popup導致的，但～鬼會知道啊～

唉～總之～又是個美好的一天～

補充：

事後在另外一個專案又發生類似的事情，結果不是出在這css，查詢結果問題發生在字體...好一個博大精深

在網頁作動畫現在有更好的選擇requestAnimationFrame

網頁作動畫應該很直覺都是使用setTimeout()或setInterval()，但timer其實不是這麼精準的

但記載前幾天叫grok幫我寫程式時他給了我一個方法

requestAnimationFrame()

激起我的興趣我去查了一下

出自網站

https://ithelp.ithome.com.tw/m/articles/10186735

我直接附上裡面的程式碼，有時間再研究囉，據說可以依照機器的好壞把時間控制在微秒，然後這竟然還是八年前就有的東西我的天啊

function startAnimation() {

var start = null;

var limit = 2000;

var count = 0;

requestAnimationFrame(animation);

function animation(t) {

count++;

if(start === null) start = t;

if(t-start < limit) {

console.log(t, start, count);

requestAnimationFrame(animation);

} else {

console.log('done.');

}

}

}

在docker的container中，如果要連本機服務該怎麼處理

當然如果你偶實體IP可以直接使用，但如果你沒有固I，假設我要連mssql port 1276，首先可以考慮使用ngrok

ngrok tcp 1276

這樣就可以把服務讓外面來連，當然這是緩兵之計，重開機網址就會換了

今天我要講的是另外一招，可以讓容器直接連本機服務

直接把ip設定成host.docker.internal，如下面用php sqlsrv來連線

sqlsrv("host.docker.internal, 1276", [......])

就可以直接連到，注意，這招只適用於windows跟mac

linux上也不是不可以使用，只是似乎要特別設定dns解析，或者有另外的作法，這我們改天有用到在研究吧

如果我container想要docker服務一啟動就開啟怎麼做

 給程式碼

// docker-compose.yml

version: "3"

services:

php:

image: namoshek/php-mssql:7.3-fpm

restart: unless-stopped # 關鍵就是這行

container_name: php

volumes:

- ./:/var/www/html

working_dir: /var/www/html

ports:

- "9000:9000"

environment:

- PHP_ENV=development

networks:

- app-network

nginx:

image: nginx:latest

restart: unless-stopped # 關鍵就是這行

container_name: nginx-proxy

ports:

- "80:80" # HTTP 端口

volumes:

- .:/var/www/html/ZHCC

- /var/run/docker.sock:/tmp/docker.sock:ro

- ./nginx/default.conf:/etc/nginx/conf.d/default.conf # 自定義 Nginx 配置

working_dir: /var/www/html

depends_on:

- php

networks:

- app-network

networks:

app-network:

driver: bridge

這樣就可以在docker服務啟動後，自動把container跑起來喔，

restart還有其他設定，我記得有一個是always，但跟unless-stoped有什麼區別，有興趣可以自行研究

github actions可不可以寫funcion，試試看複合動作

就我知道github actions應該算腳本類的語法吧，在工作上遇到要連線vpn就要落落長一大堆語法，所幸問一下ai，有沒有類似function的用法，還真的有，做一下紀錄

# ./github/actions/vpn/action.yml

# 路径除了vpn其他都必须一样

name: vpn connect

description: 'vpn connect'

# description這裏不能省

inputs:

OVPN_CONFIG:

description: 'ovpn config'

required: true

# actions里面不能有env跟secrets只能透过with传入

runs:

using: "composite"

steps:

- name: Write OpenVPN config

shell: bash # shell这行必填

run: echo "${{ inputs.OVPN_CONFIG }}" > xxx.ovpn

- name: Install OpenVPN

shell: bash

run: sudo apt-get update && sudo apt-get install -y openvpn

- name: Configure OpenVPN

shell: bash

run: |

sudo openvpn --config cywang.ovpn &

sleep 10 # Wait for the VPN to establish connection

ps aux | grep openvpn

ip addr

ip route

這樣就寫好了，接著我們要來示範使用方式

jobs:

  deploy:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v3

      # 因為要使用到repo裡面的檔案一定要有這行

- name: vpn connect

uses: ./.github/actions/vpn

        # 直接uses就可以使用，要注意路徑要正確

with:

OVPN_CONFIG: ${{ env.OVPN_CONFIG }}

以上就是這次的分享