Hi，我是 Kalan👋🏻

一直以來我很好奇一件事，身邊的朋友們在網路上通常不太會去評論某件事，例如在一篇貼文底下留言，在推特上發表自己的看法。然而，如果是在私密群組發問的話，通常會得到不錯的建議。我體會到的事情是其實人是很喜歡給建議與評論的，然而為什麼大部分的我們在網路上卻不常評論呢？

有兩名男性以及一名國一女生因為分享無限 alert

現在許多網站都會導入測量 Web Vitals 的流程，透過量化指標找到可以改善的地方。不過比較少人知道的是其實 sentry 在之前也推出了 Web Vitals 的統計功能，能夠統計 Web Vitals 的各個指標如 LCP、FP、CLS，讓開發者可以在後台看到相關的圖表，甚至把平均值都標好了，相當貼心。

今天在日本軟體開發圈中，最熱門的新聞應該就是「Coinhive 事件」了。這個訴訟是因為網站經營者在網站裡放挖礦腳本，當瀏覽網頁的使用者進入網頁時便會開始挖礦。這個行為被以「不正指令電磁的記録（妨礙電腦使用罪）」起訴，開始了一連串的訴訟過程。

換了 HHKB 鍵盤之後沒有方向鍵，編輯文字時很自然地想要避免方向鍵的使用次數。種種外在因素影響之下我開始學習 Vim，發現搭配 VSCode 真的蠻好用的，在這邊分享一些心得跟技巧給有興趣的大家。

從 UI 的角度來看，前端與手機開發會遇到問題是類似的，儘管使用的語言或是開發手法不盡相同，我們都需要打造一個易用的使用者介面。既然如此，彼此也會遇到類似的問題，元件化開發、狀態管理、資料流、管理副作用（API 或是 IO）等等，對我來說是個很適合互相學習的領域。

可能是經驗也累積多了，看事情的角度好像也變得寬廣了一些了。在 2020 年與 2021 年開始多方探索各個領域，像是 Arduino、玩樹莓派、跑去看 AVR、買 STM32 開發板來玩、學習 PCB 跟 3D 列印，希望自己除了在前端之外，也可以和其他領域整合，做更多自己想做的事。今年是 2022 年，在去年及前年的探索後，希望今年可以變成開創的一年，讓自己做出一些成果來。

今天早上看到這篇 Leaving MySQL。如果說這篇文章有什麼重點，大概就是作者在文章中寫的：MySQL is a pretty poor database, and you should strongly consider using Postgres instead.

Polly 是 Amazon 雲端平台的其中一個服務，可以將文字轉為聲音。雖然文字轉聲音這件事並不稀奇，不過 Polly 可以根據句型組合盡可能發出自然的聲音，對語言學習者來說是一大福音。除此之外能夠應用的範圍也很廣，例如字幕轉為聲音、腳本、旁白、對白，甚至直接用 Polly 來錄 Podcast 也不無可能

對我來說收音機的發明相當神奇，只透過無線電傳輸，聲音竟然可以傳播到那麼遠的地方，再透過收音機將聲音還原播放出來。本篇文章試著自己實作一個簡易的收音機電路，進而理解背後的原理

要用 AVR 做 USB 只有一個重點，就是晶片本身是否有內建支援 USB。目前大概只有 ATmega32u4 還有產線，但半導體供應缺貨下應該也買不到了

2021 年初時樹莓派發佈了 pico 微控制器，價格相當便宜只要 100 多台幣，其中有個相當有趣的功能 PIO。可以透過特化後的組合語言與架構實作不同的通訊協定，卻不需要耗費主處理器的資源。

WebGL 不支援 lineWidth 大於 1 的線條，連 Three.js 也沒有支援可調整寬度的線條實作，於是開始了自製線條的實作

在瀏覽網頁時，我們時常透過 subdomain 來區分服務的內容，然而要區分一個網站是否為 subdomain，或是兩個網站是否為 SameSite 似乎沒有想像中的簡單。

在前端應用當中，很常會遇到一個情形是在畫面上顯示的值是透過其他的值複合計算而成；或是先經過某種計算再放入畫面當中。通常這類型的處理都可以用 useMemo 來簡化程式碼

shiki 是一個將程式碼語法做高亮的套件，跟其他套件（highlightjs, prismjs）算是比較新一些，也比較少人知道。主要是因為它支援的語法更多也比較好設定，內建的主題也蠻多的，就順手把原本的 prismjs 換掉。

一直以來用終端機的習慣都是直接透過 iTerm2 的分頁功能切換 tab，這麼做其實沒什麼大問題，不過自從了解 `tmux` 的好用之處後就把終端機的操作都移到 tmux 了。

從 NAND 邏輯閘到圖靈完備，全部自己拉電路組裝元件。這款遊戲透過視覺化把程式碼的撰寫變成可以拖拉的邏輯閘，即時的互動更方便玩家觀察的真值表變化。

線性產值是經濟體系運作的基礎；指數產值可以改變人類的生活方式

一群工程師們正在研究如何逆向工程在 Apple M1 跑原生 Linux kernel

撇開這些因素不談，用 monospace 字體撰寫程式碼的開發者還是佔大多數，這篇文章來分享一些近年來使用的 monospace

心智模型是指我們如何預期事物的發展，或是事物會如何運作的認知過程。聽起來有點學術，舉例來說當我們在畫面上看到一個按鈕的 UI 時，我們會預期這個 UI 是可以點擊的，點擊之後可能會發生一連串的事件。因此當使用者發現這個 UI 不如預期時它會感到困惑。

趁著這個機會試試看鍵盤界的最高峰，同時也是工程師界許多人夢寐以求的鍵盤 - HHKB，購入後使用到現在非常滿意，在這邊分享給大家。這篇除了 HHKB 的心得還會同時介紹無接點靜電容鍵盤的原理。

對於軟體工程師來說，日本特殊的文化、環境、薪水並非首選，不少到日本工作的軟體工程師也都是單純喜歡日本才會到日本工作。因此這邊不討論薪水跟日商文化，單純就日本社會的現況點出我目前最擔心的事情。

我們常說要傾聽基層人員的聲音，因為他們才是真正在做事的人，在開發上也一樣。 不過成為 Tech Lead 除了了解程式碼本身之外，更重要的是必須要對整個專案有通盤性的了解，以下列出幾個我覺得很重要的地方。

台灣受到疫情影響，進入第三級警戒狀態，也有部分公司開始實行遠端工作。從去年起就已經開始遠端的我或許能夠分享一些經驗。

在這次的專案開發當中，以往純靜態的 Landing Page 頁面，企劃端有了想要 call API 拿資料動態更新的需求，再加上頁面的互動越來越多，原本 pug+webpack+jQuery 的純靜態頁面不敷使用，我們在新版本的開發中導入了 next.js。並開始了架 Server 踩坑之旅

Google Chrome 89 推出了 Web Serial API 讓外接設備透過瀏覽器 API 直接互動，包含 USB 設備或是有 Serial 介面的藍牙設備。這樣一來瀏覽器就能與硬體直接溝通。

本篇文章會介紹瀏覽器背後會怎麼處理 form 標籤，以及在 JavaScript 上怎麼運用 FormData 來簡化表單操作

表單在網頁中是相當常見的應用，不只能夠傳輸純文字，也能夠達到檔案上傳的功能。不過也因為 form 的行為跟其他傳輸方式較為不同，有時候也產生疑惑與誤解。 這篇文章試著從閱讀規範理解來龍去脈後，深入理解 form 背後到底做了哪些事情，以及表單與其他傳輸方式的不同之處，最後再提及 HTML 的 form 標籤背後做了哪些事情。

從 Svelte 的核心理念可以得知，Svelte 希望從編譯過程中盡可能地獲取必要資訊，減少在動態的 overhead。上一篇文章中說明了 Svelte 從編譯到生成程式碼是如何運作的，今天要來觀察一下 Svelte 生成的程式碼是怎麼運作的。

Svelte 關注度逐年攀升，這篇文章整理了幾個 2022 年值得學習 Svelte 的理由，同時也會來談談 Svelte 使用上的缺點。

為了生成最後的程式碼，Svelte 必須將元件編譯一次獲取必要資訊，Svelte 的編譯過程到生成程式碼主要會通過幾個階段，在本篇文章會一一介紹

這一系列的文章以探討 Svelte 原理實作為主，希望能讓讀者對於 Svelte 的編譯機制與程式碼生成有更深入的理解。由於 Svelte 編譯過程涉及程式碼解析，因此這一篇文章主要會先討論抽象語法樹是什麼，並進一步說明抽象語法樹扮演的角色與重要性。

回顧自己在 2020 年做了哪些關於技術的事情～

2020 年是個混亂的一年，同時也是讓我重新思考電腦本質的一年。在這一年我做了很多非自己擅長領域的嘗試，基本上都圍繞著一個主題：重新認識底層。 我在高中是念電子科的，在升學為主流的時代，雖然有實習課，但更多的感覺是按表操課，然後大部分的時間都在唸書解題。唯一慶幸的是課業並不像一般高中繁重，不然我可能也考不上台科。

linaria 是一個強調沒有 runtime 的 css-in-js 的函式庫，可以用與 styled-components 類似的語法，但是在編譯時期生成 CSS，進而減少動態修改樣式的 overhead

這篇文章原文是以日文撰寫，不過裡頭有很多我在工作上有共鳴，甚至是可以學習的地方，因此決定在這邊做簡單的引用與自己的心得。這位作者 36 歲，原本還是工程師的他也接下了管理職的職位，原因是因為年紀大了，同時也逐漸失去了對技術的熱情，然後剛好上司說「你就來當當看吧」，薪水也漲了，所以就順勢接下管理職位。 作者很有趣地說「不過有些問題，我最討厭人了，如果可以的話我喜歡一個人，原本好好地幹嘛去管人呢？」，反正也不用管業績，也有薪水可以拿，就好好做吧。

前幾個月剛好是大型功能上線的時間。再接續另外一個專案之前並沒有什麼太大的開發，主要就是修一些小 bug 以及將現有的功能做改善。也因為開發上沒有那麼緊湊，所以這一季有更多的時間可以專注在改善流程上。

在瀏覽器爬取網頁的時候，爬蟲會將網頁的 HTML 內容爬過後產生內容，也會作一份快取在資料庫當中並且定時更新。也就是說如果沒有實作 SSR 的話，那麼 html 檔案本身會是一片空白，需要等到 JavaScript 被解析且執行後才能看到實際頁面