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

2025年7月23日 星期三