透過 overflow-anchor 實作 pin to bottom 元件
這篇文章是看完 Implementing a pin-to-bottom scrolling element with only CSS 後，並且介紹使用 JavaScript 的做法整理而成。 現在網頁越上越常出現每次加入新的內容時，就將 scroll 的位置調整到最底下。像是 Twitch…
更安全的請求標頭 - Fetch Metadata Request Headers
有一天在開發頁面的時候，為了要檢查請求 Header 的欄位是否正確，打開開發工具一看，發現了請求多出了幾個可疑的 header： network 有注意到可疑的地方嗎？仔細一看發現，怎麼有三個以 Sec-Fetch…
Golang 當中的預設值以及 zero value
在 golang 當中，如果在初始化時沒有賦值，就會使用 zero value。 不過用了一段時間會發現，如果每次都用 zero value 來代替，我們會分不清楚到底是使用者沒有輸入值導致 zero value，還是使用者原本就輸入了 zero value？ 這時因為 Email, Name…
如何搜集並集中 golang 應用中的 Log
這篇文章是看完 How to collect, standardize, and centralize Golang logs | Datadog 總結的心得。 使用 log 時通常有幾點要注意： 把 log 當作參數傳遞，需要使用到 log 時就傳參數進去 統一用 context…
Golang 筆記 — Type Assertion
在 golang 當中，對於 interface{} 的型別，你可以做型別斷定，來假設這個 interface 是某個型別，這樣一來你就可以操作這個型別中的方法。 這段程式碼可以將原本的 interface…
Goworker 簡介 — 搭配 Redis 實作 worker
最近正在將專案從 Ruby On Rails 當中逐漸搬移到 golang，除了一方面是想要練習寫寫看醜醜的語法感覺怎麼樣，一方面是想感受一下 golang 的威力還有在沒有一個既有的框架下，要怎麼組織自己的程式碼。 今天要來介紹的是 goworker。會看上他的原因是搜尋 go worker…
requestIdleCallback - 善用空閑時間
許多網頁當中都有各式各樣的 script 需要執行，當然也會有優先程度，像是比較重要的：渲染 UI，註冊相關的互動事件，呼叫 API 拿取資料等等是高優先的任務，而像是比較不重要的任務有：Analytic 的腳本、lazy loading、初始化比較不重要的事件。 怎樣才算 Idle…
記一次 debug 流程 — connection refused
大約從前幾個月開始，我的 google chrome 就時常有莫名其妙 connection refused 的情況發生，有時候有些網頁就是開不起來，但用其他裝置開卻正常。雖然覺得怪怪的，但想說可能是伺服器設定的問題，而且也沒有造成什麼困擾，就這樣繼續用下去了。 設定 custom…
新的取消請求方式 - AbortController
在前端當中，我們主要可以透過兩種方式來發送請求：XHR 跟 Fetch。XHR 是從，嗯...，很久以前就有的 API。不過因為設定上很麻煩，所以時常被包裝成更高階的 API 使用，像是 jQuery 的 getJSON、axios、RxJS 的 AjaxObservable…
和 CORS 與 cookie 打交道
CORS 與 cookie 在前端是個蠻重要的問題，不過大多數在開發的時候，因為前後端的 domain 時常是相同的，所以很少去 care 這些問題。或者只要要求後端將 Access-Control-Allow-Origin…
在 Go 如何處理 connection lost？
研究了一下現在比較熱門的 sql 套件，發現幾乎都沒有像是可以即時在 connection lost 的時候跳 error 的功能。例如：nodejs 的 mysql 當中，我們可以用 connection.on(‘error’) 來監聽錯誤。 不過在 golang…
日本軟體業常見名詞轉換
由於實在太多特定的詞彙了，每次看到每次都要查一遍實在太累人了，而且還要一直 context switch…
【golang 筆記】 如何為你的專案設定環境變數
在開發專案的時候常常需要切換不同的環境，也因此我們通常會設定不同的環境變數。不過如果直接寫死在程式當中每次修改起來實在太麻煩了，如果可以透過動態的方式傳入環境變數的話可以減少很多不必要的修改，程式也相對比較乾淨。 flag 一般在 golang 可以利用 flag 這個 package…
透過 vuex 與 webpack dynamic import 動態載入 module
在最近的專案中用到 vue 來開發，而如果要管理比較複雜的資料流貨狀態，通常都是用 vuex 來當作 Single Truth of Source 的 store。在 vue 裡頭建立 store 時，都是把所有的 module 寫完後，再統一放到 vue 的 root…
make 與 new 的差別
在 golang 有兩個保留字 make 與 new，也是剛開始學習 golang 的時候容易搞混的地方，這邊做個簡單的筆記。 new new 可以用來初始化泛型，並且返回儲存位址。所以通常我們會用指標變數來接 new 過後的型別。特別要注意的是，new 會自動用 zeroed value…
再談生日悖論（Birthday Paradox）
生日悖論是個剛開始上統計學時，老師很喜歡拿來唬弄學生的招式。通常老師會徐徐從錢包拿出 100 元，並且問學生，在教室中有沒有兩個人同一天生日？ 直覺上，我們可能會以為機率很低。不過事實上只要超過 23 人，2 人同一天生日的機率就有 5…
2017 年度總結
哈囉大家，2018 新年快樂 🎉。 昨天和女友選擇過一個很平凡的跨年，早上各自做彼此的事，晚上在家裡開伙吃飯，再一起跑步，最後一邊寫程式一邊看紅白，結束了 2018
如何 Code Review
身為前端工程師，通常在整個團隊裡面會是最常發送 pull request 的人。為了讓自己的 PR 更容易被測試，以及讓 reviewer 更容易的 review，總結了一些注意事項。 pull request 的描述 這個 pull request 的目的。例如：修正 layout…
Array.sort 淺析
Array.sort 淺析 這篇文章不是談論在 Javascript 原生的 sort 要注意的事項。例如： 因為預設的 sort 方法會把值轉為 String，並按照 char code 做排序，所以才會出現上面的結果。 今天要來探討 Javascript 的 sort 背後的實作方式
PostgreSQL 筆記 — INDEX
在資料庫當中，為了改進查詢效率，在資料量大的時候，可以透過建立索引讓資料庫加速查詢效率。本篇文章將會探討 PostgreSQL 的 index。雖然在大部分的情況，直接使用 `CREATE INDEX` 的語法已經能夠應付常見的開發場景，但是在 PostgreSQL 當中，其實還提供了許多不同的 index types 使用。
如何設計 user friendly 的 table
認清一件事實，table 是拿來看，不是被當作絢麗的視覺使用的 最近在後台頻繁有使用表格的需求，如何設計對使用者良好的 table 是一項挑戰，尤其在資料筆數多、欄位多的情況下，使用者很容易就會被額外的元素吸引。其實對於呈現資料上，table…
狂歡雙 11 — 祝我生日快樂
今年 1111，除了各大電商正在雙 11 特價外，今天剛好也是我的滿 23 歲的生日
透過 AWS lambda 上傳 Medium 文章
Medium 本身不支援 code block 編輯，雖然不知道背後的原因為何（或許工程師並非主要客群），所以如果要高亮程式碼，一個作法是直接貼圖片，一個是貼在 gist 上後再 embed
Better Express error
Better-express-error 在 express 開發時，如果遇到錯誤，通常是直接印在 error page 上，或者在 production 端直接導到 404, 500 page。 這雖然沒有什麼值得一提的是，不過說真的，看到這種頁面，你會覺得開心嗎？ default error…
React16 重點整理
react 終於正式發佈 v16 了，其實官方部落格的介紹已經相當完整（而且賞心悅目）。本篇文章作為筆記與統整，精簡了部分的細節。 1. componentDidPatch(error, info) react16 最亮眼的部分，加入 ErrorBoundary 的功能，確保在 lifecycle…
前端面試心得
終於有時間整理最近的面試歷程了。先總結一些看到的事情： 通常公司面試只考 Javascript 的熟悉度，多數關於演算法或是解釋原型鍊等等，很少考 DOM 或是 Event 的操作。 幾乎不考 CSS，就算有也只是簡單判斷 class、ID 優先度這種基本題目而已。 沒有面試考 HTML…
淺談 ramda 中的幾個 API
ramda 是個相當好用的函式庫，如果聽過 lodash 或是 underscore 的話，可以將 ramda 想成 functional programming 的 lodash，他們的 API 有許多相似性，差別在於 ramda 本身有 FP 的功能，任何的 API…
淺談降維方法中的 PCA 與 t-SNE
在機器學習當中，如果特徵數過多時，有可能會造成一些問題，像是： 過擬合 (overfitting…
做了一份週刊 - 日語八百屋
自學日文也已經三年多了，做了一份周刊，叫做日語八百屋。 粉絲專頁 Medium…
Rails app 自動化部屬 - hubot 與 heaven
目前所在的公司裡頭是直接在本地端的 terminal 跑 cap staging deploy 指令。 capistrano 作為自動部署化的工具非常方便，但難免會遇到幾個問題： 不是團隊中的每個人都有相同的環境 大家都在部署，結果 staging 上現在到底是哪個 branch…