CSS Inner Border - 內框線
這次在設計個人入口頁時因為想做出內框線（Inner Border）的效果，學到一種很聰明的寫法，提到 CSS Inner Border，直覺肯定是想到用 padding 或 margin 把盒子撐大，但其實這樣是行不通的，當你把盒子撐大時，框線也會跟著移動，無法做出內框線的樣式。 ...
Programming
Vue.js Render Object as Table in Beautiful Way
In Vue.js we can use v-for to render Array as HTML Table or List beautifully, but If we want render Object key and value as Table, for example, I use JS Object and Array to store many Contact info, each Contact have different key, I want display Contact 1 info in a table, It seems v-for not good at here? ...
GitHub API Note
這幾天因為開發 Dashboard 的關係，接觸了 Trello 和 GitHub 的 API，把一些資訊整理起來，如果你也有GitHub API 的使用需求，可以來讀讀這篇文章。GitHub 也是採用 RESTful HTTP API 的形式，開發起來十分簡單，對於有 HTTP API 串接經驗的人更是好上手；GitHub API 算是我看過數一數二的 API Friendly，文件十分好理解不說，API 也提供很完整的參數供選擇，甚至未來還會提供 GraphQL API，真是令人期待！ ...
Trello API Note
今天因為在開發公司 Dashboard 的關係，需要寫程式去計算每天的開發點數，讓 Dashboard 能夠呈現每個月的開發點數變化，所以玩了 Trello API，簡單筆記在這裡。 前情提要，我們部門使用 Scrum 的點數方式來評估開發進度，幫每個 Issue 設定一個難度點數，搭配 Trello Scrum 外掛使用。 ...
Python 3 在 Windows 命令提示字元輸出時遇到 CP950 錯誤
今天在教學弟妹寫程式時，用 Python 印出一段中文字到命令提示字元，卻遇到「UnicodeEncodeError: ‘cp950’ codec can’t encode character」這個錯誤，嘗試了各種方法都無法解決，最後爬了文章才搞懂是怎麼回事。 看到這段錯誤，有經驗的開發者直覺就會認定是字串裡面有特殊字元，立馬給它加上 ignore 參數卻沒有效果，我遇到的情況檢查後發現是一個日文字，但眾所皆知 Python 3 預設使用 Unicode 字串，不應該會有無法輸出的問題才對，又不是萬惡的 Big5… ...
解決 HTML Anchor 內文被選單遮住的問題
HTML 的 Anchor 錨點功能十分方便，當網頁過長時可以透過 Anchor 讓訪客快速的移到指定段落，這樣的手法在許多技術文件、部落格都有出現，如果你看到類似 https://coder.tw/?p=123#section1 的網址就是應用 HTML Anchor 的特性，這樣的特性雖然方便卻也帶來一些問題，最常見因為網頁最上方有浮動選單，當訪客點擊 Anchor 連結進到網頁後，雖然瀏覽器有自動捲到指定章節，但卻有部分文字被選單遮住，我始終很煩惱這問題，今天恰好在閱讀 Facebook 技術文件時發現他們的解法蠻不錯的。 ...
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 事件卻被自動觸發了！ ...
Visual Studio Code - 貼上程式碼後自動整理縮排
從 Sublime Text 切換到 Visual Studio Code ( 以下簡稱 VS Code ) 的開發者想必都很懷念「Paste and Indent」的功能吧！ 寫程式時不可免的需要複製貼上程式碼，貼上後縮排往往會亂掉，必須要手動在整理一次，而在 Sublime Text 有提供所謂的 Paste and Indent 功能可以讓你貼上的程式碼自動符合當前檔案的縮排方式，而 VS 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 一樣可以直接相等運算，誰知道完全不如預期。 ...
JS 前端處理檔案上傳之預覽、大小、尺寸、格式
在上傳檔案時，最討厭的莫過於檔案上傳了 5 分鐘後才跟我說檔案過大或尺寸不正確！ 在檔案上傳的驗證我們往往交給後端處理，導致檔案需要上傳後才能確認是否符合規定，特別是圖檔還有長寬比例的問題需要檢查，這些事情如果完全交給後端，就可能導致用戶體驗不佳，之前在新頭殼研究大頭貼上傳時，發現原來完全可以將這些事情交給前端處理，透過 JS 和 HTML5 API 做到檔案上傳的格式、大小(20MB)、尺寸(100x100) 檢查，甚至還可以做到預覽、前端切圖轉檔等等！ ...