前端開啟app的方式

如標題，總是會有各式各樣的需求，要請前端要能直接開啟app，直到今天我才知道關鍵字怎麼下，其實就一句話，上網查"[該app] schema url"

例如: 抖音 schema url

目前沒有找到有人整理這部分成套件，只有找到有好心人整理了各大app的schema url

https://github.com/Oct1a/TikTok-Scheme

https://github.com/WengYuehTing/url-scheme-collection

如果需求只是要開啟app那其實可以無視後面的路由，把href導到//即可

例如：location.href = "snssdk1233://"

備註：抖音有好幾種版本，都不一樣，記得確認對象再寫

在這先預祝大家工作順利不用加班，尾牙抽到大紅包，年假可以放14天～

HD鬼故事N+4集

原本以為這個系列會隨著神工程師的退役而停止更新了，想不到最新一集來的如此之快

年關將近，隨著專案進入最後測試幾段，老闆突發奇想，希望連到正式機，以正式機數據來進行測試，故事就此開始

這想法原則上也沒什麼問題，至於要怎麼倒資料，小編身為前端工程師沒有話語權，就這樣早上九點就被告知後端關閉api，然後.....前端就放假了＝＝

一直到中午被告知匯入資料比預想還要久，可能還要再兩三個小時，一直到三點半資料才倒完。

雖然放了將近一天的假很爽，但該吐槽還是要吐。我就問，既然知道倒資料要停機，專案又這麼趕，那為什麼要拿測試機來倒，開個新的db倒資料，倒完再把db指過去很難嗎＝＝然後到底是怎麼倒需要這麼久，我嚴重懷疑他寫腳本去打另一套系統api，然後在寫入資料庫....算了想到就怕！

另一則故事

在近期這個專案有個聊天室的功能，後端非常有自信的說要做即時聊天必須用websocket，這功能在這專案中算是有一定複雜性的，所以讓主力工程師來負責，然後他跟我說，ws連是連了，但是功能是告訴你有新的訊息，實際的訊息資料，必須打api去要....然後我問是哪位後端負責這功能的，當我聽到姓名後只能說，真不塊是你啊！那是一位我曾經同一個功能要跟他來來回回三四次次，連前端需要code這麼基本的需求都還要我們三催四請，我就問你們都用laravel了，為什麼不直接寫成middleware跟route group就好＝＝哎

另另一則故事

我想歲末年終大家最期待的就是尾牙了吧，公司也非常大方開放員工帶眷屬一起同樂，只是眷屬的車資不輔助.....我忍了，然後今年特別收到消息，公司大佬要來台與大家一起同樂，所有員工必須喝酒，然後眷屬坐一桌，員工為了方便敬酒坐一桌.....

後來通話了我才知道，不是車資不輔助，是單人車資輔助有上限400人民幣，小編家做uber到高鐵就要800塊了不豪小，來回1600，高鐵車資1400，就算我搭捷運去餐廳，我一個人車資就不夠請了，最省的方法就是不能喝酒，然後開車載家人去，但是說強迫要喝酒...然後攜帶眷屬不能跟眷屬不能同桌又是哪招....真的不知道要從哪開始吐槽了

以上三篇短篇故事，同樣是做夢夢到，如有雷同，肯定是雷同的啦

vue開發上的小坑，vFor的item不能當vModel

簡而言之我在程式碼裡面這樣寫

UserCard(v-for="data in datas", v-model="data")

UseCard是我自製的component，因為裡面會牽涉到改動，所以不太適合用props的方式傳進去，所以用model的方式來傳，開發上還沒啥問題，不過打包卻會爆出以下錯誤

v-model cannot be used on v-for or v-slot scope variables because they are not writable

上網查了一下，用v-for拆出來的物件，該物件不能放到v-model裡面進行修改，那怎麼辦呢？

很簡單，跟著v-for傳出來的還有index，用它來指向原物件就可以了

UserCard(v-for="(_data, index) in datas", v-model="datas[index]")

沒想到用vue這麼多年還有這麼一個小坑沒採過，記錄一下＠＠收工下班！

HD鬼故事N+3集

在年初搞出大事件的神級工程師（詳閱鬼故事第N集），據以往跟他配合的工程師爆料，他從來沒在管衝突的，一但有衝突就是直接用自己的程式碼蓋過去。大概就是以下情況

情境一：
大學長要過～～你們這群菜雞瞎逼逼什麼，全部閃開！

情境二：
哪有什麼衝突，小朋友在小打小鬧而已！

這些對已經待上個把月的工程師來說，雖然痛苦，但都習以為常了。你問我老闆為什麼不火他！他把ＤＢ刪了都沒事，這種小事對他來說跟搔癢差不多吧！

然而，就在最近來了個“產品”，我是不知道他產什麼品，但他感覺一來就想搞點事，這又是另一個故事了，有機會再談。

總之昨天又發生這件事，熟知版控的朋友一定知道，如果不好好解衝突，上線的功能極有可能會壞掉。想當然爾，有了一個會議，重點這會議沒有找該神級工程師開，而是找功能壞掉，負責的另外兩位工程師，一部分對話訊息如下：

產品：這事挺嚴重的，下次再發生，老闆可能會懲處。

....你跟他們兩個說意思是懲處他們嗎？言下之意是肇事者撞爛了建築，應該要告建商為什麼建造不夠穩固嗎？我都不知道要從何開始吐槽了

正當我們以為事情就這樣告一段落時，當晚我們就收到神級工程師要離職的消息。雖然有些驚訝（畢竟他待了十年）但也擋不住嘴角上揚，正當我們要開香檳時，就看到他無預警地退群了，沒有留下任何交代......

沒有人知道發生了什麼，也不知道未來會如何，更沒有好好交接（幹你到是好好交接啊！）

到底是被罵了鬧脾氣離職，還是產品大大跟他說了些什麼，沒有人知曉，唯一知曉的是，丞相起風了，要變天了！

更新一下

現在每天都聽到後端工程師在喊說需要通靈，需要知道更多資訊，當初神工程師的對話紀錄，叫運營配置的參數，什麼都能拿來作為通靈的素材....哎～

再更新一下

據說老闆早就想火神工程師了，原因是他很貴，終於動手的時候，神工程師在離職前把機器帳號密碼都換掉了......跟公司最後成功交易到300萬人民幣，是人民幣喔....真讓人羨慕啊＝＝重點是對方拿到錢後只給密碼，還是不交接！不瞞大家說，小編出社會第一份工作就這樣想過了，可惜一直都沒那膽識。不過coco都拿了交接態度還這樣真是.....

safari踩坑第一集input focus為啥會有一塊空白

你也遇過safari的坑嗎？

希望你可以在這系列找到一點溫暖

問題描述：

safari點擊input出現鍵盤後，底部會多出一塊空白，我用debug模式下去看，這塊不屬於html的空間。應該是瀏覽器問題，但老闆不會管你，bug照開

我是參考這篇文章下去做的，也是唯一找到比較符合我狀況的問題，不過他遇到的坑不是因為input產生的，應該是因為滑動導致工具列縮小所產生的空白，看起來應該是不同的坑。因為我使用他的程式碼，只是額外在content後面加上input，然後打開safari一樣爆…（如圖）

有興趣的朋友可以參考這隻程式碼

https://codepen.io/lu7766lu7766/pen/RNbrBeO

因為這屬於瀏覽器問題，上網找也找不到什麼有效解法，只能使用設計避免它看起來這麼明顯像bug，例如把input的底色與背景底色相同，或是用彈窗來做搜索，或是將搜索單除出一頁並且放在上方，最終找到一個程式的硬解

參考這個網址，在input focus時把window scroll鎖起來，唯一小問題是在safari中，addEventListener第三個參數必須設定為{ passive: false}，不然會預設為true，然後它就會繼續不屌你e.preventDefault()繼續快樂的出現空白

程式碼

const preventDefault = (e: Event) => {

e.preventDefault()

}

const onFocus = () => {

window.addEventListener("touchmove", preventDefault, { passive: false }) // mobile

}

const onBlur = () => {

window.removeEventListener("touchmove", preventDefault)

}

結語：

希望過兩天老闆不會說為什麼輸入時都不能滑動視窗....

之後可以試著寫成超出window.scrollY不給滑動.....之後再說

更新

發現只要不要滑到最低，出現鍵盤就不會出現最下面那片空白，那解法可能就是滑到最低會自動回彈1px，實際我還沒寫，有興趣的小夥伴可以寫一下試試

github actions使用進化，使用runner來佈版吧

我就覺得奇怪，最早喬納斯推薦我這套，我就在質疑，一開始跑jenkins是跑在server端，這樣才能對機器進行操作，github跑在遠端是要怎麼進行佈版啦。

一開始也沒什麼概念，於是我突發奇想，使用ssh連線，使用sftp上傳檔案，或是使用nodejs腳本

一直到最近遇到windows open ssh不穩的問題，如果短時間遇到一個帳號同時登入，ssh就會掛掉的狀況，我只好另求出路

原本想說要使用drone來作為cicd工具，看到要透過docker啟動兩個服務，一個是server一個是runner，我對這個也沒有很了解所以看過就算了，但server我有點不太想亂裝東西，所以還是放後面吧

在多方查找之下才發現，actions有各式各樣的套件可以與不同的服務進行部署，azure, aws之類的，我想想會不會有iis的pipeline可以使用，結果是有的，但使用上好像會失敗，有興趣的大大可以自己玩一下

再來我逛到保哥的網誌，裡面有用到一個可以上傳跟下載的套件（actions/upload-artifact，actions/download-artifact），接著再看到這篇提問，裡面幾個關鍵字，needs: build，run-on: self_hosted，needs我看得懂，就是可以把任務串連起來（沒串連之前測試都是併發）那self_hosted難道是可以跑在本機上？接著我就開始研究這些關鍵字

原來有github有個服務叫github runner，可以在伺服器跑起來，這樣run-on: self_hosted就可以在之後step寫要做的動作了，這招妙啊！原來runner就是監聽器的服務啊～(drone也有)

要在伺服器把github runner跑起來，可以參考這篇教學，可以選擇伺服器的作業系統進行安裝與啟用，基本上從第一行執行到最後一行就可以完成了

這邊記錄下我遇到的兩個問題

第一行下載zip包，遇到ssltls安全問題，可以把網址複製到chrome上直接下載

最後一個./run.cmd，這行跑起來沒問題，服務也持續啟動，但問題是到時腳本跑在機器上會在github-runner資料夾下面創run.cmd資料夾，到時會有檔名衝突問題，所以當啟動完就要把檔名改掉，這超不合理的啊，我也不知對什麼會這樣，可能是我設定哪裡出問題了。

圖中我把run.cmd改成run_service.cmd了，另外成功的跑了一些程序

接著就可以開始撰寫腳本了

name: 81-dev

on:

push:

branches:

- "dev"

env:

PROJECT_NAME: "81 dev"

PROJECT_FOLDER: "81c"

TELEGRAM_TOKEN: "tg_token"

TELEGRAM_CHAT_ID: "chat_id"

jobs:

build:

runs-on: ubuntu-latest # runs-on字段指定运行所需要的虚拟机环境。注意：这个是必填字段

steps:

- uses: actions/checkout@v3

- name: Setup Node 14

uses: actions/setup-node@v3.5.1

with:

node-version: "14"

cache: "npm"

- name: Install yarn

run: |

npm i -g yarn

- name: build

run: |

yarn

yarn build

- name: Upload a Build Artifact

uses: actions/upload-artifact@v4

with:

name: application

path: dist/**/*

deploy:

needs: build

runs-on: self-hosted

steps:

- name: remove old files

run: |

Remove-Item -Path D:\wwwroot\${{ env.PROJECT_FOLDER }}\static\* -Recurse -Force

Remove-Item -Path D:\wwwroot\${{ env.PROJECT_FOLDER }}\index.html -Force

- name: Download new binaries over the top of the app

uses: actions/download-artifact@v4

with:

name: application

path: D:\wwwroot\${{ env.PROJECT_FOLDER }}

notify:

needs: deploy

runs-on: ubuntu-latest

steps:

- name: telegram notify

run: |

curl -d '{"method": "sendMessage", "chat_id": "${{ env.TELEGRAM_CHAT_ID }}", "text": "${{ env.PROJECT_NAME }} deployed."}' -H "Content-Type: application/json" -X POST https://api.telegram.org/bot${{ env.TELEGRAM_TOKEN }}/

小結

這專案打包下來2.6mb，這樣扣除build跟上傳時間，僅算下載及佈版，時間都落在30秒內，算是非常快速跟滿意。

最終還是有個小問題，如果是在organization創建的runner那這self_hosted都會指向同一台，沒辦法多台或命名嗎？這之後再來研究吧

補充

上線問claude他這樣回答我

self-hosted runner 可以自訂命名和設定群組：

1. 在 GitHub Actions 工作流程中指定特定的 runner：

2. 設定 runner 時的命名和標籤：

# 基本設定命令格式
./config.cmd --url https://github.com/{YOUR_USERNAME}/{YOUR_REPO} --token {YOUR_TOKEN} --name "MY-IIS-RUNNER" --labels prod-iis,windows,vue

# 例如：
./config.cmd --url https://github.com/your-name/your-repo --token abcd1234 --name "PROD-IIS-01" --labels prod-iis,windows,vue

參數說明：

• --name: runner 的名稱
• --labels: runner 的標籤，可以設定多個，用逗號分隔
• --work: 指定工作目錄 (預設是 _work)
• --group: 指定 runner 群組

3. 如果要修改現有的 runner：

# 1. 先移除現有的 runner 設定
./config.cmd remove

# 2. 重新設定
./config.cmd --url https://github.com/{YOUR_USERNAME}/{YOUR_REPO} --token {YOUR_TOKEN} --name "NEW-NAME" --labels new-label-1,new-label-2

4. 設定多環境範例：

# 正式環境 runner
./config.cmd --name "PROD-IIS-01" --labels prod-iis,windows,vue

# 測試環境 runner
./config.cmd --name "TEST-IIS-01" --labels test-iis,windows,vue

# 開發環境 runner
./config.cmd --name "DEV-IIS-01" --labels dev-iis,windows,vue

然後在工作流程中可以這樣使用：

jobs:
  deploy-prod:
    runs-on: [self-hosted, prod-iis]
    if: github.ref == 'refs/heads/main'
    # ...

  deploy-test:
    runs-on: [self-hosted, test-iis]
    if: github.ref == 'refs/heads/develop'
    # ...

  deploy-dev:
    runs-on: [self-hosted, dev-iis]
    if: github.ref == 'refs/heads/feature/*'
    # ...

有機會再來試吧

業界鬼故事第一彈

不知不覺已經四個月沒發文了，看標題就知道這次不是ＨＤ係列，只是小編走在路上不小心聽到的。

原本相安無事日子過得也是好不自在，偏偏小編最近家中換車，需要一大筆資金，剛好小編工作沒有勞健保，所以只能付全額，想起來就覺得可怕。所以只好出來多打一份工作。

正愁沒有案源，小編想到了一直以來的按摩師朋友，向來他還滿欣賞自己能力，最近又剛創業（！？），應該會有系統開發需求，所以馬上預約了一堂課，準備來個反推銷。

這過程就不贅述，絕對沒有各位想聽的抓龍筋故事，想當然耳反推銷是失敗收場，不然哪來的鬼故事。

這朋友我姑且稱他為老Ｋ

老Ｋ：「我們店已經有找到人來開發系統了。」

我：「那也不錯啊，開發得如何？」

老Ｋ：「別說了，開發到現在四個月，我測一次錯一次，我要的功能也沒幾個，有個客人連三次使用都出錯，我到現在還是紙本作業」

我：「那幹嘛不換人（選我選我！）」

老Ｋ：「對方是老闆好朋友啊」

我：「那也只能祝你好運」

老Ｋ：「我跟你講有多扯，先講個最扯的，這個月初他把資料清空了，我問他有沒有備份，他說有的，然後他反問我有沒有紙本備份，我說都有系統了我用紙本幹嘛，他反倒怪我為什麼不用紙本備份！」

我：「......聲先奪人，高明！你老闆跟他真的是好朋友嗎？」

老Ｋ：「我們按摩師賣多少課，抽成這很正常吧，假設五成，1800課按摩師賺900，1400按摩師賺700，這應該很合理吧，上次開會老闆把我叫去罵，說你這樣系統會很難計算。我雖然不是學程式的，但不就是除以2而已嗎？這有很難嗎？」

我：「......他們真的是好朋友，我第一次聽到老闆幫工程師罵客人的！」

老Ｋ：「還有我們創建客戶理論上就照創建日期排列，他也是這樣告訴我的，結果我實際去看，我後來創建的排在中間，我說能不能照順序排，他竟然回答我不能，這要另外寫，要開發時間，正常不是要可以選擇用什麼排列嗎」

我：「我已經不知到要從哪裡吐槽了」

老Ｋ：「還有一個很扯，我們通常都使用掃QRCode扣課，必須在他的app介面才能掃，然後只能正著掃，橫著掃跟倒著掃都掃不出東西，如果用一般掃條碼的app掃會掃出客戶電話號碼」

因為大部分我的回答都是...所以就省略

老Ｋ：「還有他有一份excel可以計算薪水，只有客戶用qrcode掃課才能真的扣課，按摩師薪水才會計算上去，如果在後台手動扣課，excel不會更新，這樣數據肯定是錯的吧」

老Ｋ：「我們要去辦信用卡機，他還跟老闆打包票說他辦過絕對沒問題，最後來來回回送件了好幾次終於辦下來，結果一個客人刷卡完，我進後台看怎麼沒入帳，過一週後還是沒入帳，我就打給業務員，業務員開後台確認是有入帳的，最後確認到問題是他幫我申請的是線上刷卡的帳戶，不能在線下使用。那證明他根本就沒辦過嘛，好在他沒有把金流跟系統做整合」

老Ｋ：「他寫完的東西自己都沒在測試的，都直接交給我們，我也沒有特別刁難他，但真的是用一次錯一次」

老Ｋ：「而且你跟他講問題，他永遠不會正面回答你，例如上週他問我使用狀況，我列了五點給他，他只回我我再看看，你倒是告訴我你什麼時間點會修好什麼東西啊＝＝」

我也只能一路聽他抱怨，我甚至有點可憐他想幫他重新寫一個，他過程一直問我這些功能如果是我要開發多久，我回答一週吧，真的是沒有很複雜的功能，只能說對方是我聽過的奇耙之一，這故事也再次證明了，寫程式很強真的沒什麼用，後台要夠硬才是硬道理！

最後大家如果同情老Ｋ可以到他店裡消費，按摩技術真的不錯，人在台中，有興趣可以留言給我