How to Prevent JS Input onFocus Event Fire After Page onFocus

最近的工作是在網站中置入 Google Analytics 的使用者事件追蹤程式碼,我透過 HTML Event 的做法將程式碼掛在 Input 上面,只要使用者點擊特定的欄位、按鈕就會發送一筆記錄到 Google Analytics,這樣的做法沒有什麼問題,但我發現當使用者點擊 Input 欄位後如果切換到其他網頁(Chrome Tabs),當使用者在切換回我的頁面(Page onFocus)時,Input onFocus 事件卻被自動觸發了!

繼續閱讀 How to Prevent JS Input onFocus Event Fire After Page onFocus

Visual Studio Code – 貼上程式碼後自動整理縮排

從 Sublime Text 切換到 Visual Studio Code ( 以下簡稱 VS Code ) 的開發者想必都很懷念「Paste and Indent」的功能吧! 寫程式時不可免的需要複製貼上程式碼,貼上後縮排往往會亂掉,必須要手動在整理一次,而在 Sublime Text 有提供所謂的 Paste and Indent 功能可以讓你貼上的程式碼自動符合當前檔案的縮排方式,而 VS Code 也有類似功能,但原理不太一樣且需要到設定檔上開啟。

繼續閱讀 Visual Studio Code – 貼上程式碼後自動整理縮排

JavaScript 判斷變數是否等於 NaN

在 JavaScript 實在有太多奇怪的眉眉角角了,今天因為把字串轉數字用到 parseFloat,如果進去的參數無法轉成數字則會回應 NaN (Not a Number),我就寫了如下語法來判斷:

var score = parseFloat(prompt("Score:"));

if(score === NaN) {
    console.log("Not a Number");
} else {
    console.log(score);
}

這段程式碼乍看之下理所當然,就像 undefined、null 一樣可以直接相等運算,誰知道完全不如預期。

繼續閱讀 JavaScript 判斷變數是否等於 NaN

怕訪客複製你的文章嗎? 讓 JS 自動加上提醒文字或禁用複製!

在許多內容網站,都會有所謂的「複製時自動加上原文網址」機制,例如魔境歌詞網、知乎等等,更有的網站直接禁止使用者複製文字,要達到這些功能不困難,只需要幾行簡單的 JavaScript 語法,但需要思考網站是否真的需要加入這樣的功能,當正常訪客複製並轉貼文字到 Facebook,對網站真的造成損害了嗎? 此外如果真的要防止訪客複製文字,光憑著這些防君子不防小人的手法,到底是保護了利益還是讓網站變得更難使用?

繼續閱讀 怕訪客複製你的文章嗎? 讓 JS 自動加上提醒文字或禁用複製!

返校 Detention 第四章 斷掉的教室通過方法

在返校最終章的第一關,和靈魂碎片對話後可以交換身份,並需要穿過斷掉的教室抵達另一道門,這關不得不說真的有難度,如果你也跟我一樣卡關了,那就一塊來看看究竟該如何破關吧!

繼續閱讀 返校 Detention 第四章 斷掉的教室通過方法

返校 Detention 好壞結局攻略

建議第一次玩返校的朋友,就別再往下閱讀了。知名的電腦遊戲 返校 Detention 其實有兩種結局,如果你跟我一樣嘗試了兩次都還是壞結局,那不如來偷看一下祕技,了解該如何走向另一種結局吧! 在第四章 方芮欣 會和她的分身對話,那時分身會給你選項回答,其實無論你選擇哪個,遊戲都會繼續進行,差異只在於結束方式會有所不同。

繼續閱讀 返校 Detention 好壞結局攻略

JS 前端處理檔案上傳之預覽、大小、尺寸、格式

在上傳檔案時,最討厭的莫過於檔案上傳了 5 分鐘後才跟我說檔案過大或尺寸不正確!  在檔案上傳的驗證我們往往交給後端處理,導致檔案需要上傳後才能確認是否符合規定,特別是圖檔還有長寬比例的問題需要檢查,這些事情如果完全交給後端,就可能導致用戶體驗不佳,之前在新頭殼研究大頭貼上傳時,發現原來完全可以將這些事情交給前端處理,透過 JS 和 HTML5 API 做到檔案上傳的格式、大小(20MB)、尺寸(100×100) 檢查,甚至還可以做到預覽、前端切圖轉檔等等!

繼續閱讀 JS 前端處理檔案上傳之預覽、大小、尺寸、格式

Google Cloud Platform 自動扣款餘額不足處理

因為我登記在 GCP 的信用卡是「VISA 金融卡」形式,所以每月自動扣款時有可能會遇到銀行餘額不足的問題,目前 GCP 針對該問題的做法,會再扣款失敗後寄信提醒你,並在一日後重試扣款,如果依舊失敗就會要求你在解決問題後自行登入 GCP 後台付款,過去在登入 GCP 後台付款都沒有遇到問題,但這次似乎動線有改變,按照他的連結引導會被帶到帳單頁面,但無法執行扣款動作,此外即使你找到正確的扣款按鍵,但使用 Chrome Canary 卻似乎會有前端的問題導致扣款對話框無限載入中,必須要切換到正常版 Chrome 才可以正常扣款,真好奇這個扣款對話框是用了什麼最新最潮的技術…

繼續閱讀 Google Cloud Platform 自動扣款餘額不足處理

關於程式設計的命名藝術

命名,是程式設計領域老掉牙的議題,從變數命名到函式、物件的命名,未必有多少人將這件事做好,你真的明白為何變數命名重要嗎?  此外,除了最基本的變數名稱要有意義外,常見變數命名方式如匈牙利命名法、駝峰命名法等等,又該如何選擇呢? 這邊將簡單跟大家分享我對於變數命名的一些想法。

繼續閱讀 關於程式設計的命名藝術