本篇文章為系列文第三篇： 感測器介紹篇 - DHT11 與 MH-Z14A 資料溝通篇 - UART Arduino 踩雷篇 （未上映）WiFi 篇：為了省下 Debug 的時間，我額外購買了 ESP32 開發版，本身已經含有 WiFi 跟藍芽功能 （未上映）MQTT…

…

這個議題吵好久了，在這裡簡單紀錄一下自己的想法。 在很久以前只有 HTML 與 CSS 的年代，頂多再加上 jQuery，只要架出靜態網頁丟到 FTP 就可以被稱作是高手。 隨著瀏覽器可以做到的事情越來越多，前端能夠涵蓋的範圍也越來越廣了，光是前端這個名詞，可能就可以有多個分支： UI…

本篇文章為系列文第二篇： 感測器介紹篇 - DHT11 與 MH-Z14A 資料溝通篇 - UART（實作是用 UART，所以只講 UART） Arduino 踩雷篇 （未上映）WiFi 篇：為了省下 Debug 的時間，我額外購買了 ESP32 開發版，本身已經含有 WiFi…

前言 最近真的很喜歡各種 IoT 的應用，買了很多 Arduino 跟各種感測器，光是手上有的 Arduino 就有 Arduino Uno、Arduino Mega2560、Arduino nano *…

前言 難得在公司有蠻完整的機器學習跟資料分析團隊，也有相對完整的資源跟 pipeline，趁著這個機會一邊學習資料科學的知識，如果有不懂的地方也可以直接跟同事們請教。資料科學的範圍很廣，目前也沒有一個明確的方向，就邊學邊看可以迸出什麼火花吧，斜槓斜起來！ 規劃 把大學統計課遺失的拼圖拼回來（…

大概在六個月前，同事在站會分享了他正在玩的遊戲「project winter」，並且介紹了遊戲類型與玩法，有點像是可以互動的狼人殺。當時被 low-poly 的風格還有場景（雪山）吸引，但苦於當時沒有遊戲機，所以一直惦記在心。最近終於入手了遊戲機，於是就把這款遊戲從 steam…

前言 (2020/02 ~ 2020/06) 日本大約在 2 月中旬時，東京開始逐漸爆發疫情，雖然我在 福岡 上班，不過為了避免疫情擴散，公司在二月底時宣佈了遠端工作的政策，目的是為了減少通勤、減少感染等機會。在這邊紀錄一下心得。 實際感受到的事 少了來回通勤的時間（其實也不多，上下班加總約 4…

Typora 是我非常愛用的 markdown 編輯器，用到現在覺得沒有任何比它更順手的編輯器。比較複雜的部落格文章我就會在 Typora 寫好後上傳，Typora 有非常豐富的功能，包含： Table 的支援 支援 LateX 語法，方便寫算式 可以直接拖拉圖片產生對應 markdown…

其實很早就想要玩玩智慧家電，不過目前的電器都已經是固定的，沒有內建連網功能，要直接改成智慧家電要額外做工程，一般不是那麼容易就能達成的。 因此轉念一想是不是可以有一台機器連上 wifi…

被主管升上 Tech Lead 後我的心情有點複雜，因為職等既沒有對應的提升，也沒有一個實際的稱號，只是被指名了「嘿，從現在開始你就是 Tech Lead」，然後加了一點薪水。 不過對我來說是個很好的嘗試，在這邊記錄一些感想。 Tech Lead 與 Team Lead…

我在研究新的函式庫時，同時也會研究這個人（當然不是全部，不然一個 npm install…

在 part1 當中我們提到了如何撰寫一個 JSON 解析器，並實作解析字串的功能，接下來我們把其他函數補上。（事實上只要知道基本原理，剩下的函數實作都是照本宣科而已） Number number 實作上也不難，容易忽略的地方在於小數點、負數、浮點數的部分，還有指數表達（1e…

遞迴下降可以說是直覺且強大的解析方法。 今天會從解析 JSON 開始，講解如何從頭建立一個 JSON 解析器。由於 JSON 的架構簡單，很適合當作練習。雖然解析語法這件事情的確和前端或是平時的開發沒有什麼太大的關聯，不過如果有天要設計一個 DSL…

正當我開開心心用 svelte 實作了 smooth-scroll 之後，我發現其實可以用一行 CSS 達到： 除了瀏覽器支援可能要擔心一下，完全省掉開發者引入 library 或是自己實作的麻煩。 完美達成 smooth-scroll ，不需要再透過改寫 hashchange 跟 state…

一句話形容 Github Actions Github 內建的 CI/CD。 簡介 以往要做 CI，團隊中可能要花一些時間討論（吵架）CI 的解決方案，像是 CircleCI、DroneCI、Jenkins 等等，但是只要團隊當中將程式碼放在 Github 上面託管，就可以輕鬆和 Github…

今天跑去看 Svelte 原始碼，摸熟架構的同時順便看看有沒有什麼簡單的 issue 可以拿來練手。然後看到了 這個 — emits warning 。 雖然我覺得以這個 issue 的描述來看，沒有 href 的 a tag 應該是不合法的才對（至少不符合 a11y…

用螢幕錄影好麻煩，每次都要自己拉框框，所以查了一下可不可以用 simulator 錄影，發現還真的可以，而且意外地很簡單，只要在 command line 下指令就好： 按 ctl+c 之後就會自動生成影片檔了，只要注意不要有同名檔案就好。另外因為常常把 repro 放到 github…

原本想用 svelte 搭配 graphQL 玩玩看是什麼感覺的，apollo 本身提供的 Observable Query 非常容易搭配 Reactive 的場景。 我在 svelte 裡頭引入 ApolloClient 沒想到都裝好了發現 rollup 編譯沒辦法過： 查了一下 issue…

在前面的章節有提到，Svelte 讓我愛不釋手。Svelte 的核心概念在於「透過靜態分析+編譯減少 runtime 做的事」，來減少 Virtual DOM 做 diff 的時間和一大包的 runtime。 但是 Svelte 走的路也註定會遇到一些問題，最主要的就是 Svelte…

前言 第一次看到 Svelte…

這篇文章是看完 flv.js 作者的 故事 之後有感而發當作紀錄。 目前只要是跟直播服務，或是影片服務有相關的網頁開發，基本上最熱門的就是 hls.js 或是 flv.js。因為瀏覽器的原生 video 並不支援這些格式，所以必須要自己想辦法解碼。 以前 flash…

隨著使用者對隱私權的重視，各個服務也都逐漸開始調整自家的隱私權與安全，像是 Mac 改版到 Catalina 之後會很煩人地問你是否要同意 xxx 存取某某資源。 雖然安全性上的確是變得更嚴謹了，不過也因為如此有時候會出現一些慘案。像是 WACOM 手繪版 沒辦法順利使用之類的。 而 Google…

mailchimp 是我相當喜歡的電子報寄送服務，斷斷續續也用了三年了，突然想寫下來。我在三年前寫了一份週刊，叫做日語八百屋 要做電子報寄送服務並不簡單，像是 event tracking、資料統計、不掉信、重試、針對不同的客戶端優化等，也因此 mailchimp…

在網路圈時常聽到，點子不值錢，動手做最重要。這句話基本上認同，沒有實際行動有再好的點子都沒有用。 但是最近逐漸改觀了，雖然身為工程師本來就應該有紮實基礎，但感覺每天討論某某框架的內部實作、又有XX框架跑出來、有人用了XXX做了一個 ToDo App…

xxd 是一個可以看 binary 文件的 linux 工具。 為什麼沒事要看二進位檔？ 看編譯出來的程式跟自己想得是否一樣 看圖片、影片的檔案內容 純粹好奇 xxd 使用 xxd filename 會輸出檔案內容像這樣： 可以分為三個區塊： 第一個是 hex dump…

現在已經有越來越多創作者，為了加速自己的製作流程，都會或多或少寫點程式來幫助自己優化。 這些創作者們非常清楚瓶頸在哪裡，而且因為他們想要花更多時間創作的慾望，這種動力和求知慾有時候會比工程師自我學習本身來得強烈，甚至可以比工程師更精準地找到解決方法。 看看文件、打個 API…

前言 恩，簡單來講就是開始了一個 YouTube 頻道，就跟寫好了一個部落格很開心想要分享一下的感覺。 連結 嘗試不同的呈現方式 在 202…

最近把 Twitter 帳號關掉跟鎖起來，App 也刪掉了。說真的最近好焦慮，看著推特上充滿各種憂鬱、厭世、成功、好笑、諷刺的推文，不知道為什麼就有一種焦慮感。還不知道什麼時候會把他重新打開，但我覺得自己已經快要到達極限了。 Instagram…

最近這個月的專案開發，讓我對寫測試這件事有了完全不同的想法。 在前端的部分來說，過去我也很喜歡寫測試，不光是寫單元測試（Unit Test）而已，因為用 React 開發的關係，也會一併測試元件功能，像是模擬點擊、使用者互動等等。如果用 Redux 來管理副作用（side-effect…

原文： Software disenchantment…

In 2019, in the first 5 days of January, I was still counting steamed bread in the barracks ( compulsory military ). After four months of my military…

2019 年，1 月的頭 5 天，我還在兵營裡頭數饅頭，好不容易才熬過四個月的軍旅生涯開始找工作。上半年幾乎都在準備面試與沈澱自己，而下半年移居到日本後生活逐漸步上正軌。 上半年 201…

Preface iOS 11.0 can read and write NFC Tag through CoreNFC , but it can't read information such as IC cards. IC cards can only be read by iOS…

前言 iOS 11.0 開始可以透過 CoreNFC 來讀寫 NFC Tag，不過還無法讀取 IC 卡片之類的資訊，到了 iOS 13 後才開放 IC 卡讀取。 剛好一直以來對 NFC 蠻有興趣的，而且也想要自己讀取 Suica （日本交通 IC…

鐵人賽連結 - 深入前端開發 深入前端開發 - Gitbook 之前就希望能夠把一些關於前端開發的東西紀錄下來，不過一直沒有著手去做，趁著鐵人賽期間一口氣全部整理完。 這個系列分成了幾大部分，未來有機會會再繼續寫下去。 JavaScript 基礎 淺談 JavaScript 與 ECMAScript…

Driving Technical Change: Why people on Your Team Don't Act on Good Idea, and How to Convince Them They Should…

react-transition-group 從 v1 升級到 v4 比較重要的有幾點： 升級後 CSSTransitionGroup 元件被移除了 leave 變成 exit transitionName 變成 classNames transitionEnterTimeout…

這篇文章並不會一一介紹各個 react-hooks 的 API，而是試著從設計的角度出發，來探討設計背後的原因。主要會分成幾個段落： Function Component 與 Class Component 的差異 如何在元件中複用類似的邏輯 淺談 high-order component…

前言 之前就很喜歡日本文化，所以在大學時就逐漸萌生要到日本工作的想法。不過礙於兵役跟經濟的關係，所以一直沒有實行。在這之前我當服完兵役，在服兵役之前則是在公司裡頭擔任前端工程師。最近當完兵回來，總算可以毫無後顧之憂找日本工作了。 剛好現在也是個蠻不錯的時期，日本因為高齡少子化的緣故正在大幅招攬 IT…

前言 EMS 是國際快捷郵便，整合了各大國家的郵政，有追蹤號碼可以在網頁上查詢進度，號稱最快的郵便服務，價格當然也貴上許多。 第一次寄 EMS 感覺很棒，網頁進度追蹤很及時，兩天就到日本了；這次公司將在留資格證明寄給我也是用 EMS，正當我以為大概也是 2 ~…

大概在好幾個月前，我寫了一篇關於如何在 golang 設定環境變數的文章，怎麼優雅地設定環境變數是一件相當重要的事情，因此我寫了一個簡單的函式來做這件事。 當初的考量很簡單，如果有提供對應的 config 檔，就把裡頭的 key/value 用 os.Setenv 設定。之後在整個 App…

前言 這篇文章是看完 Implementing a pin-to-bottom scrolling element with only CSS 後，並且介紹使用 JavaScript 的做法整理而成。 現在網頁越上越常出現每次加入新的內容時，就將 scroll…

有一天在開發頁面的時候，為了要檢查請求 Header 的欄位是否正確，打開開發工具一看，發現了請求多出了幾個可疑的 header： 有注意到可疑的地方嗎？仔細一看發現，怎麼有三個以 Sec-Fetch…

在 golang 當中，如果在初始化時沒有賦值，就會使用 zero value 。 不過用了一段時間會發現，如果每次都用 zero value 來代替，我們會分不清楚到底是使用者沒有輸入值導致 zero value，還是使用者原本就輸入了 zero value？ 這時因為 Email, Name…

這篇文章是看完 How to collect, standardize, and centralize Golang logs | Datadog 總結的心得。 使用 log 時通常有幾點要注意： 把 log 當作參數傳遞，需要使用到 log 時就傳參數進去 統一用 context…

在 golang 當中，對於 interface{} 的型別，你可以做型別斷定，來假設這個 interface 是某個型別，這樣一來你就可以操作這個型別中的方法。 這段程式碼可以將原本的 interface…

最近正在將專案從 Ruby On Rails 當中逐漸搬移到 golang，除了一方面是想要練習寫寫看醜醜的語法感覺怎麼樣，一方面是想感受一下 golang 的威力還有在沒有一個既有的框架下，要怎麼組織自己的程式碼。 今天要來介紹的是 goworker 。會看上他的原因是搜尋 go worker…

許多網頁當中都有各式各樣的 script 需要執行，當然也會有優先程度，像是比較重要的：渲染 UI，註冊相關的互動事件，呼叫 API 拿取資料等等是高優先的任務，而像是比較不重要的任務有：Analytic 的腳本、lazy loading、初始化比較不重要的事件。 怎樣才算 Idle…

前言 大約從前幾個月開始，我的 google chrome 就時常有莫名其妙 connection refused 的情況發生，有時候有些網頁就是開不起來，但用其他裝置開卻正常。雖然覺得怪怪的，但想說可能是伺服器設定的問題，而且也沒有造成什麼困擾，就這樣繼續用下去了。 設定 custom…

在前端當中，我們主要可以透過兩種方式來發送請求： XHR 跟 Fetch 。XHR 是從，嗯...，很久以前就有的 API。不過因為設定上很麻煩，所以時常被包裝成更高階的 API 使用，像是 jQuery 的 getJSON 、 axios 、RxJS 的 AjaxObservable…

前言 CORS 與 cookie 在前端是個蠻重要的問題，不過大多數在開發的時候，因為前後端的 domain 時常是相同的，所以很少去 care 這些問題。或者只要要求後端將 Access-Control-Allow-Origin…

研究了一下現在比較熱門的 sql 套件，發現幾乎都沒有像是可以即時在 connection lost 的時候跳 error 的功能。例如： nodejs 的 mysql 當中，我們可以用 connection.on(‘error’) 來監聽錯誤。 不過在 golang…

由於實在太多特定的詞彙了，每次看到每次都要查一遍實在太累人了，而且還要一直 context switch…

前言 身為前端工程師，通常在整個團隊裡面會是最常發送 pull request 的人。為了讓自己的 PR 更容易被測試，以及讓 reviewer 更容易的 review，總結了一些注意事項。 pull request 的描述 這個 pull request 的目的。例如：修正 layout…

前言 在開發專案的時候常常需要切換不同的環境，也因此我們通常會設定不同的環境變數。不過如果直接寫死在程式當中每次修改起來實在太麻煩了，如果可以透過動態的方式傳入環境變數的話可以減少很多不必要的修改，程式也相對比較乾淨。 flag 一般在 golang 可以利用 flag 這個 package…

在最近的專案中用到 vue 來開發，而如果要管理比較複雜的資料流貨狀態，通常都是用 vuex 來當作 Single Truth of Source 的 store。在 vue 裡頭建立 store 時，都是把所有的 module 寫完後，再統一放到 vue 的 root…

在 golang 有兩個保留字 make 與 new ，也是剛開始學習 golang 的時候容易搞混的地方，這邊做個簡單的筆記。 new new 可以用來初始化泛型， 並且返回儲存位址 。所以通常我們會用指標變數來接 new 過後的型別。特別要注意的是，new 會自動用 zeroed…

前言 生日悖論是個剛開始上統計學時，老師很喜歡拿來唬弄學生的招式。通常老師會徐徐從錢包拿出 100 元，並且問學生，在教室中有沒有兩個人同一天生日？ 直覺上，我們可能會以為機率很低。不過事實上只要超過 23 人，2 人同一天生日的機率就有 5…

哈囉大家，2018 新年快樂 🎉。 昨天和女友選擇過一個很平凡的跨年，早上各自做彼此的事，晚上在家裡開伙吃飯，再一起跑步，最後一邊寫程式一邊看紅白，結束了 201…

在機器學習當中，如果特徵數過多時，有可能會造成一些問題，像是： 過擬合 (overfitting…

自學日文也已經三年多了，做了一份周刊，叫做 日語八百屋 。 粉絲專頁 Medium…

Array.sort 淺析 這篇文章不是談論在 Javascript 原生的 sort 要注意的事項。例如： 因為預設的 sort 方法會把值轉為 String，並按照 char code 做排序，所以才會出現上面的結果。 今天要來探討 Javascript 的 sort 背後的實作方式。 從 V…

認清一件事實，table 是拿來看，不是被當作絢麗的視覺使用的 最近在後台頻繁有使用表格的需求，如何設計對使用者良好的 table 是一項挑戰，尤其在資料筆數多、欄位多的情況下，使用者很容易就會被額外的元素吸引。 而在現代 div 排版盛行的影響下，使用 table…

今年 1111，除了各大電商正在雙 11 特價外，今天剛好也是我的滿 2…

Medium 本身不支援 code block 編輯，雖然不知道背後的原因為何（或許工程師並非主要客群），所以如果要高亮程式碼，一個作法是直接貼圖片，一個是貼在 gist 上後再 embed…

Better-express-error 在 express 開發時，如果遇到錯誤，通常是直接印在 error page 上，或者在 production 端直接導到 404, 500 page。 這雖然沒有什麼值得一提的是，不過說真的，看到這種頁面，你會覺得開心嗎？ 熟悉 Ruby On…

react 終於正式發佈 v16 了，其實 官方部落格 的介紹已經相當完整（而且賞心悅目）。本篇文章作為筆記與統整，精簡了部分的細節。 1. componentDidPatch(error, info) react16 最亮眼的部分，加入 ErrorBoundary…

前言 終於有時間整理最近的面試歷程了。先總結一些看到的事情： 通常公司面試只考 Javascript 的熟悉度，多數關於演算法或是解釋原型鍊等等，很少考 DOM 或是 Event 的操作。 幾乎不考 CSS，就算有也只是簡單判斷 class、ID 優先度這種基本題目而已。 沒有面試考 HTML…

前言 ramda 是個相當好用的函式庫，如果聽過 lodash 或是 underscore 的話，可以將 ramda 想成 functional programming 的 lodash，他們的 API 有許多相似性，差別在於 ramda 本身有 FP 的功能，任何的 API…

前言 目前所在的公司裡頭是直接在本地端的 terminal 跑 cap staging deploy 指令。 capistrano 作為自動部署化的工具非常方便，但難免會遇到幾個問題： 不是團隊中的每個人都有相同的環境 大家都在部署，結果 staging 上現在到底是哪個 branch…

連結 今天是鐵人賽的最後一天，感覺自己最後結尾的部分收得不是很好，也有很多部分都因為時間上的關係沒有很完整地 介紹完。 挑戰 3…

在前端的頁面中，我們經常會碰到需要相同高度的排版。最直覺的方法就是將容器裡的所有元素設為 float 或是 inline-block。 float 及 inline-block 如果是使用 float 排版，不但要先撐開父元素容器(clearfix)，還要針對子元素設定 margin…

因為一則廣告而創立的 g0v g0v 的由來其實是因為經濟動能推升方案（就是那個史上最腦殘的 廣告 ) 這群熱血的工程師決定組成 g0v。致力於推動政府開放，並且以網路的方式推廣給大眾。 g0v 能夠紅，是從 318 學運開始。因為 hackfold…

比較短的程式碼比較好嗎？ 雖然減少程式碼會提高易讀性，但 縮短讀程式碼的時間才是重點 。 表層結構 清楚的命名方法跟變數名稱 方法不需要用 do 選擇詞彙的時候不要用模擬兩可的名稱，ex: pop popItem 在方法名稱加入更多的資訊 找尋更明確的詞彙 send => deliver…

之前寫過了一篇關於自己對 css variable 的想法，原本對這個屬性沒有抱持著太大的期待，自己用習慣了 SASS 變數也覺得這個 css variable 反而像個彆腳的 system，不過如果你也是這樣想的人，可以參考這篇文章 Why should you care Css…

從 SASS 到 PostCSS 大約在一年前，PostCSS 開始竄紅在前端生態圈裡，不外乎就是所謂的 preprocessor 的特性、高度客製化自己的 plugin、搶先使用 cssnext 的功能，還能夠搭配各種建構工具（gulp, webpack…

重新思考語義化這件事 會有這個想法，是看到 instant article 的 html 架構，他們規範 instant article 的架構必須符合他們的規範，而且結構的表達也很清楚。我在裡頭看到了好多我以前沒有注意過的 html tag。像是 address figure…

…