小安彙整 - VECTOR COOL 威得數位行銷

去x的，Google這招太奸詐了！

今天 AI Vibe Coding 界燒起來的一篇文章，苦主是一名講師兼開發者，利用 Google AI Studio Build Vibe Coding 方式開發了一個多功能圖片生成的 APP ，分享給大家使用，APP 中有寫了一個填入自己 API Key 的欄位，一切都好，直到收到一萬多元的刷卡訊息後驚覺不妙，原來填入 User API Key 的欄位的功能是假的，事實上是用自己綁定的 API Token 在燒錢，全世界都用他的 API Token 生圖，氣得作者以「去 X 的，Google 也太奸詐」為題發文，民俗月剛過還是有這種故事。

* 本來想說點什麼，看大家炮成這樣，我也來說點什麼 *

看到這個議題，如果是普通人就算了，如果是講師，傳遞正確觀念應該是有討論空間的，我覺得本件事也不全然是 Google 的問題，這裡與大家聊聊，這是個人主觀的觀點啦：

1. Vibe Coding：

我不能說 Vibe Coding 擠壓到我們的商業價值，的確 Vibe Coding 的方式的確降低了進入軟體領域的門檻，可以快速做出各式各樣看起來可以改變世界的有趣玩意，但我個人會把它定位成玩具，若是商業行為會把它定義為原型 (prototype)，是一個把想法到實踐的第一個步驟。這是一個挺好的改變，不需要就圖面想像，可以更有利的爭取到投資或是有效與客戶溝通，跳過圖說這個步驟，簡化開發流程。

簡化開發流程，並不代表原型即產品。自己用風險可控，肯定沒問題；真正要上線運作的，面對不特定人的服務，還是需要一個產品化的過程，需要嚴格的檢查，因為你真的不知道 User 會怎麼用你的有趣服務，模擬各種情境，盡可能把低級錯誤降到最低。另外對於開發者本身也必須控制風險。

2. API Token 管理

此例，開發者知道 API Token 的成本問題，於是做了使用 User 自身提供的 API Token 的輸入框，這點很好。但這一段功能也是 vibe code 出來，卻沒做驗證的動作。AI 的確存了 User 的 API Token，只是沒用到，是個假功能（嚴格說也不是假功能），AI 覺得功能已完成，但開發者應該於功能完成後，與上線前都驗證功能是否為自己預期。最簡單的就是關閉自己開發的 API Token，來測試輸入的 Token 是否真的有用，其實這是可以避免的風險。

接著，API Token 是不能寫進 Code 裡的，這跟你把提款卡與密碼放在一起一樣，如果閉源服務就算了，要開源應該也要檢查一下，抄完別人考卷也要檢查一下班級、姓名座號有沒有不小心抄到。

另外，聊聊 API Token 管理，應該要把開發用的 API Token 與自己的 Token 分離，必須限定額度、範圍。就像是信用卡一張用來買網購額度低一點，自己用的卡額度高一點，如果網購被盜刷，還在可以控制的範圍，這就是很簡單的生活例子。

另一個面向，使用者對於這些有趣的程式時，對於不信任的單位，有沒有防備的觀念？好好保存你的 API Token，思考一下有沒有可能被騙走的 API Token。技術上盜走你的 Token 比盜刷你信用卡簡單，不要覺得沒什麼。記得口罩地圖嗎？新冠疫情期間工程師大哥開發了方便大眾使用的口罩地圖聲名大噪，但收到帳單臉都綠了，60 多萬。Google 商用 API 都是要錢的，不是免費的，用一筆算一筆的，這金額是無上限的。

3. LLM 養、套、殺

說「太奸詐」有點過於嚴厲，這就是商業，一個願打一個願挨。

大型語言模型 LLM 供應商（例如：ChatGPT、Gemini、xAI），對於提出新鮮有趣的 AI 功能不遺餘力，其實主要目的就是提高市場佔有。通常會分為 Web 版、CLI 版、API 版。Web 版的產品定位就是給一般 User 日常使用，以 ChatGPT 為例，有沒有很強？非常強。訂閱有沒有很貴？沒有很貴，物超所值，甚至我覺得賠錢賣，因為這不是他們主要的營收來源。主要是資本主義要讓你養成習慣，學生用 AI 寫報告，老師用 AI 改報告，找工作用 AI 寫履歷，HR 用 AI 審履歷，就套住囉，長出生態系，讓你加入生態系，病毒式的入侵，讓你覺得只要我用這東西就無敵囉，像毒品般難以戒斷，攪和市場洗牌才是真正目的。

當然，這是一種商業手段。小的七年級生，不知道看了幾輪。真正要殺的不會是使用者，而是面向商業服務廠商，被逼得不得不用。還很糟糕的會被誤會免費？殊不知每一次請求都要錢，是你們用的 Web 版不收錢！拿過去例子最簡單的就是 Gmail 與 Google Workspace，由商業用戶賺回。

4. 以為我不會 Vibe Coding 嗎

對於原本在這產業中的人，每天看神仙打架，誰一統江山制定度量衡還沒個準。在這渾沌局勢中，對於中後端的廠商而言生態還在定義中，活生生環境被擠壓外，實質被迫提高了研發及生產成本。除此之外，可能被貼上為傳統開發者的標籤。『你以為我不會 Vibe Coding 嗎？』

今天會燒起來，大概是很多同業也一吐鳥氣。看起來我們生產慢了點，因為比別人多了解了一點，我們怎麼會不知道這些新東西呢？只要讓子彈再飛一會兒，非常謹慎地對待。我們知道販賣機投幣進去有很多流程，不是只有錢進去飲料出來，很多流程是不容妥協的，尤其面對客戶的商用領域，更是需要嚴肅看待。一萬元真的是買個經驗，也上了寶貴的一課。

回到老話一句：

AI 只是協作、只是工具，重點是觀念。

這局工程師小小板回一城，
誰知道下一局呢？
也許我在賣雞排了。

[……]

專案「拖延」的藝術-老師不會教的事

如果是專案管理者，專案執行時延遲是肯定會遇到的問題，但沒人會教你「拖延」。
這裡討論的拖延，並非故意拖延，是基於團隊或資源分配導致的延遲，拖延有時只是必要之惡，但還是要盡快完成任務，不可懈怠，當專案進入「拖延」時刻猶如走鋼索的人，得到掌聲及粉身碎骨於一念之間，如何為自己或組織爭取多一點時間，不會遭到罰則又讓專案順利完成，且得到顧客滿意這就是門藝術。

但如果實際進度真的與預期相距甚遠，建議直接道歉，並與客戶共同尋求解決方案才是正道

依據經驗歸納出幾種技巧：

技巧性拖延

當客戶需求在不確定的階段，給客戶多點時間想想，順勢將完成時間遞延，製作時間加上客戶的猶豫思考時間這是非常合理的，而團隊只是先做別的事而已，但你得到額外的拖延額度

答應客戶範圍外的小功能

客戶需求變更，在可控的情況下，答應客戶
並延伸討論幫客戶想更多解決方案，但需要拿捏就是快速、簡單、看得到東西的小事
預留延遲的伏筆，記得讓對方感受到欠你個人情

推託複雜的更改

執行階段，已陷入延遲的專案，切記!! 不可再加入新的大範圍或複雜的任務，這將壓垮你和你的團隊或組織，專案必定延遲，既不被客戶接受、也不被團隊或組織體諒，裡外不是人。
告訴客戶的額外需求先用簡單的替代方案先處理，此舉說明既沒有坐視不管，也先幫客戶解決當下遇到的問題，若要真正的解決額外需求，等當前專案結束後再來討論，通常客戶是可以接受的

無關緊要的小事先做

避免客戶要求檢視進度時，如果什麼東西也沒有，客戶期待將摧毀對你的信任，所以花一點時間先做很快完成的簡單小事、看得見的小事，因為主要會延遲的通常是大功能或沒做過的新功能，這些功能通常在完成前無法展示，如果沒先做些無關緊要小事，將陷入沒有東西看的窘境，反之，當客戶要求檢視進度時，就可展示這些無關緊要的小事，鉅細靡遺解釋這無關緊要的小事，藉此掩蓋還沒完成的大功能，讓會議有東西看、有東西講、有東西討論，至少看圖說故事，讓業務還是PM發揮他們的唬爛功力，最好能延伸討論無關緊要問題，帶客戶在這些無關緊要的問題上做無謂的討論，無關緊要的問題，結論還是無關緊要。
至少讓你順利度過進度審查會議

哀兵策略

如果是已經快要完成了，這是最後一步的終極手段，請小心使用，如非必要請不要用，
這時通常是客戶等待的臨界點，基本上客戶已經生氣了，此手段盡可能只用一次，用第二次就非常拙劣，客戶對你信任會降至最低，直到客戶看見東西。

哀兵策略意旨因人身不可抗力的原因，導致專案延遲，常見的有染疫、流感、重感冒、住院、大姨媽來(僅對男客戶有效)，道德勒索讓客戶無法質疑，真的不是故意無法出席、不能主持，但通常這時效頂多三天，你就必須好了，包含你的專案

請謹記以上技巧並非長期解決之道，它們僅為應急之計。持續改進您的專案管理流程和時間管理能力將有助於減少這些緊急情況的發生。

原創，引用請標明出處

[……]

CSS 選擇器，模糊查找匹配元素

CSS選擇器中沒有所謂的「萬用字元(*)」，可以透過一些方式接近模糊查詢方式，查找匹配屬性或值的元素

歸納出幾種用法

下表屬性名稱不一定為Class，可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值

使用範例：

See the Pen
CSS 選擇器，模糊查找匹配元素 by VECTOR.cool (@ann71727)
on CodePen.

[……]

PHP 解決 Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime()

set_magic_quotes_runtime()於 PHP5.3後棄用

在 PHP.net 官方文件中有提到，set_magic_quotes_runtime()於PHP5.3已經棄用，雖然不會造成Fatal error而中斷程式，但會發送E_DEPRECATED的過時警告，而在PHP4.0+已被棄用，所以PHP4.0之後不會有set_magic_quotes_runtime()這function，所以會跳出下列錯誤：

Call to undefined function set_magic_quotes_runtime()

官方說明：
http://php.net/manual/en/function.set-magic-quotes-runtime.php

解決方法：

移除所有 set_magic_quotes_runtime() 程式碼。

替代方案：

[……]

PHP get HTML img src

PHP get img src

$string = '<img border="0" src="/images/image.jpg" alt="Image" width="100" height="100" />';
preg_match('@src=["']([^"']+)["']@', $string, $result);
print_r($result);

output

Array
(
    [0] => src="/images/image.jpg"
    [1] => /images/image.jpg
)

[……]

Chrome console log show time

Settings > Consle > Show timestamps

http://stackoverflow.com/questions/12008120/console-log-timestamps-in-chrome[……]

jQuery Form data to Object

jQuery Serialize Object

取得所有表單資料，目前試過唯一能轉多維表單物件的，使用簡單，找到感覺得救了

Form data to Object jQuery

Github：https://github.com/macek/jquery-serialize-object

Example：

<form id="contact">
  <input name="user[email]" value="[email protected]">
  <input name="user[pets][]" type="checkbox" value="cat" checked>
  <input name="user[pets][]" type="checkbox" value="dog" checked>
  <input name="user[pets][]" type="checkbox" value="bird">
  <input type="submit">
</form>

$('form#contact').serializeObject();
//=> {user: {email: "[email protected]", pets: ["cat", "dog"]}}

$('form#contact').serializeJSON();
//=> '{"user":{"email":"[email protected]","pets":["cat","dog"]}}
'

[……]

[MIS][WIN10] chrome 變大了，解決方案

不知道為什麼今天開啟Chrome不管是工具列介面，都變大了，不僅如此，網頁的呈現也變大了，看一下縮放比例仍維持100%沒錯壓，大約要調到80%，才跟之前的顯示尺寸一樣，查了一下是Chrome更新所致，但，用起來相當不順手，以下提供解決方案，我順利解決。

開始 > Google Chrome (右鍵) > 更多 > 開啟檔案位置

選取 Google Chrome (右鍵) > 內容

目標欄位

例如我的是”C:Program FilesGoogleChromeApplicationchrome.exe”

在後面加上 /high-dpi-support=1 /force-device-scale-factor=1

變這樣”C:Program FilesGoogleChromeApplicationchrome.exe” /high-dpi-support=1 /force-device-scale-factor=1

/前面記得加個空白鍵

重新建其他地方捷徑
選取 Google Chrome (右鍵) > 傳送到 (N) > 桌面 (建立捷徑)
捷徑就會存在桌面了，再來就看你習慣放哪了

我習慣在下方工具列加上捷徑，所以我這麼做
選取 Google Chrome (右鍵) > 釘選到工具列

關閉所有Google Chrome，若不確定是否全關了，就重新啟動電腦
點工具列圖標，開啟，Chrome，賓果~恢復正常

參考資料
https://forum.gamer.com.tw/C.php?bsn=60030&snA=444515&tnum=3
https://tw.answers.yahoo.com/question/index?qid=20140828000016KK08138

[……]

PDF 解除密碼，解除限制~超簡單~一步驟線上直接處理

http://www.pdfunlock.com/

把檔案拖曳到該網頁紅框處~解鎖
就這麼簡單!!

[……]

[PHP] How to break or stop include php file

Use

<?php
return

test.php：

include 'include.php';

include.php：

return;
echo 'test';

[……]

標籤: 小安

去x的，Google這招太奸詐了！

1. Vibe Coding：

2. API Token 管理

3. LLM 養、套、殺

4. 以為我不會 Vibe Coding 嗎

專案「拖延」的藝術-老師不會教的事

依據經驗歸納出幾種技巧：

技巧性拖延

答應客戶範圍外的小功能

推託複雜的更改

無關緊要的小事先做

哀兵策略

CSS 選擇器，模糊查找匹配元素

歸納出幾種用法

使用範例：

PHP 解決 Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime()

set_magic_quotes_runtime()於 PHP5.3後棄用

解決方法：

替代方案：

PHP get HTML img src

PHP get img src

`$string = '<img border="0" src="/images/image.jpg" alt="Image" width="100" height="100" />'; preg_match('@src=["']([^"']+)["']@', $string, $result); print_r($result);`
output
`Array ( [0] => src="/images/image.jpg" [1] => /images/image.jpg )`

Chrome console log show time

jQuery Form data to Object

jQuery Serialize Object

Example：

[MIS][WIN10] chrome 變大了，解決方案

PDF 解除密碼，解除限制~超簡單~一步驟線上直接處理

[PHP] How to break or stop include php file

1. Vibe Coding：

2. API Token 管理

3. LLM 養、套、殺

4. 以為我不會 Vibe Coding 嗎

依據經驗歸納出幾種技巧：

技巧性拖延

答應客戶範圍外的小功能

推託複雜的更改

無關緊要的小事先做

哀兵策略

歸納出幾種用法

使用範例：

set_magic_quotes_runtime()於 PHP5.3後棄用

解決方法：

替代方案：

PHP get img src

$string = '<img border="0" src="/images/image.jpg" alt="Image" width="100" height="100" />';preg_match('@src=["']([^"']+)["']@', $string, $result);print_r($result);outputArray( [0] => src="/images/image.jpg" [1] => /images/image.jpg)

jQuery Serialize Object

Example：

`$string = '<img border="0" src="/images/image.jpg" alt="Image" width="100" height="100" />'; preg_match('@src=["']([^"']+)["']@', $string, $result); print_r($result);`
output
`Array ( [0] => src="/images/image.jpg" [1] => /images/image.jpg )`