2025年7月23日 星期三

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

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

一般人都會下指令

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

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

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

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

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

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

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

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

2025年4月29日 星期二

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

網路文章


safari的header延伸,踩坑系列

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

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

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

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

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

2025年4月28日 星期一

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導致的,但~鬼會知道啊~

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


2025年4月16日 星期三

在網頁作動畫現在有更好的選擇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.');
}
}
}

2025年3月31日 星期一

在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解析,或者有另外的作法,這我們改天有用到在研究吧

2025年3月30日 星期日

如果我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有什麼區別,有興趣可以自行研究