2021-10-29[技巧]
chrome 的 IdleDetector 可以允許你檢測使用者是否AFK（Away from keyboard），即雙手離開鍵盤一段時間。
和 requestIdleCallback 不同， 它是檢測使用者是否空閒，即是否有互動動作，比如滑鼠，鍵盤等。而 requestIdleCallback 是檢測瀏覽器本身是否空閒。
你可以用它做一些事情，比如官方提到的：
- 聊天應用看對方是否線上
- 使用者不在的話減少一些大型計算
我之前在看鬥魚直播或者 youtube 視訊也會有型別的檢測，當你長時間離開的話，它會暫停並提示你是否繼續。我覺得這個可以顯著地減少使用者忘記關閉視窗帶來的頻寬消耗，不要小看它。這或許可以為你的公司節省很大一筆錢。
更多關於這個 api 的使用請參考：https://web.dev/idle-detection/
2021-10-28[技巧]
chrome 95 出了一個新的 api EyeDropper 蠻有意思的。 據說這個功能是微軟大佬貢獻的。
使用後會出來一個採集顏色的游標，當你確定後會在使用者選擇的顏色的 rgb 值返回你。
程式碼：
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}大家可以直接在 chrome 95 以上的瀏覽器上在 devtool 的 console 中輸入上面的程式碼檢視效果。
更多 chrome 95 新特性：https://developer.chrome.com/...
2021-10-27[好文]
chrome 擴充套件想必大家都用過麼？ 那你有想過開發一款 chrome 擴充套件麼？
西法就開發了一款 chrome 擴充套件：《leetcode-cheatsheet》https://leetcode-solution.cn/...
chrome 擴充套件開發最最頭疼的就是各種通訊，比如 content-script 和 backgound 通訊， background 如何和 popup 通訊等等。這篇文章對這些常見的擴充套件開發問題進行了講述，並有大量的程式碼和圖片，使得內容通俗易懂。
比如如果在 devtool 新建一個 panel？怎麼在 devtool 的 elements 皮膚新建一個側邊欄。
程式碼演示:
// 建立自定義皮膚，同一個外掛可以建立多個自定義皮膚
// 幾個引數依次為：panel標題、圖示（其實設定了也沒地方顯示）、要載入的頁面、載入成功後的回撥
chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{
console.log('自定義皮膚建立成功！'); // 注意這個log一般看不到
});
// 建立自定義側邊欄
chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
{
// sidebar.setPage('../sidebar.html'); // 指定載入某個頁面
sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通過表示式來指定
//sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接設定顯示某個物件
});圖片演示：
文章很長，有幾萬字，大家可以根據自己的需要挑重點看。
地址：https://www.cnblogs.com/liuxi...
2021-10-26[好文]
OAuth 是什麼？你如果還不知道就太 out 了。我的《91天學演算法》官方網站就用了 OAuth 來連結 Github 登入，地址：https://leetcode-solution.cn/91
本文以 Github 為例，講解如果從零接入 OAuth2，適合新手。
地址：https://www.honeybadger.io/bl...
2021-10-25[工具]
一個語法檢查的工具，注意這裡的語法是自然語言的語法，不是程式語言的語法，這同時也是該工具獨特的地方。
地址：https://caderek.github.io/gra...
2021-10-19[工具]
上家公司一直想做一個前端工具鏈，其中一環就是在編輯器（我們是 vscode）中整合工作流。比如在編輯器中新建工程，提交程式碼，釋出程式碼， code review ， 程式碼檢查等等。
只不過這個還是需要很多時間投入的，截止到我離職也沒有做的很完善。而這個開源產品做的已經相當完善了。如果你的公司有類似的需求，不妨直接嘗試使用，或者 fork 一份修改，能夠省去不少時間。
這個工具是直接整合到 vscode 中的，無需切換到其他視窗，對於程式來說方便許多。
地址：https://github.com/apptools-l...
2021-10-18[好文]
最近在開發小程式的除錯工具，類似微信的除錯工具。參考了幾篇文章，如果你也在做類似的事情，不妨參考下這幾篇文章。
不過說實話這幾篇文章的思路很值得借鑑，但是缺乏細節，並且部分細節由於版本原因已經缺乏參考性了（新版本 devtool api 發生了些變化），大家在閱讀的時候注意一下。
2021-10-15[資訊]
Github 中的 markdown 語法支援腳註（Footnotes）了。
你可以使用如下語法
Here is a simple footnote[^1].
[^1]: My reference.這樣就可以渲染出如下帶有腳註的內容：
類似地，之前其他平臺有類似如下的渲染腳註的語法，它通過擴充套件 markdown 連結語法的形式實現了腳註。
Here is a simple [footnote](http://xxx.com "My reference")不過限制也很明顯，那就是必須是連結才能生成腳註，Github 的這種腳註語法就很好地解決了這個問題。
更多關於 Github markdown 的語法可以參考這篇文章：https://docs.github.com/en/gi...
2021-10-13[工具]
Graphql 是 facebook 開源的一門查詢語言（query language）。
如今在國內的普及程度還遠遠不夠，主要原因就是上手難度高以及國內社群和大公司輸出不夠（很多大公司其實都在用）。它不僅僅是前端的一個 client，還需要後端 server 的配合。
而如果運用得到，甚至可以用來“替代” service worker，redux 等工具。另一方面和 ts 配合，可以大大完善後端介面型別，這個我在 9 月份的每日一薦推薦過相關的工具。今天推薦的是 Graphql 在社群非常有名的一個框架，它的估值也在隨著它的流行越來越高。
地址：https://www.apollographql.com...
2021-10-12[工具]
ES Module Lexer 是一個針對 ESM 的詞法分析器，使用它可以對 ESM 文字進行分析，vite 中就使用了它分析檔案依賴。由於使用了 wasm（預設情況下）， 它的速度很快。
地址：https://github.com/guybedford...
2021-10-11[好文]
vue 中可以用 v-html 直接動態注入 html，類似地，React 則可以通過 dangerouslySetInnerHTML 設定 html。
但是如果不加以處理，很可能會遭遇 xss 攻擊。 一種簡單的方法就是 html entity 轉義。社群也有類似的解決方案，比如 DomPurify。而這次官方標準出來了，它就是 Sanitizer API。這篇文章就詳細講述了 sanitizer 是什麼，有什麼用，相容性如何，demo 程式，如何開啟等等一系列問題。
2021-10-10[元件庫]
Webview UI Toolkit for Visual Studio Code 是一個針對 vscode 開發的元件庫，由微軟官方開發。
相比於其他元件庫，它有如下特點：
- 針對 vscode 定製，不僅 UI 更加一致，並且還能根據 vscode 主題變換樣式
- 使用 web components，因此理論上可以應用於任何前端框架
- 注重可訪問性。這點是國內的很多元件庫都不注重的，但是這點卻很重要，不僅僅是針對障礙人士，對待一些正常人這也是必要的。比如我習慣使用 ESC 來關閉彈窗，但是很多網站卻關不掉，這讓我想起了垃圾廣告橫行的年代。
- 官方出品，必數精品。
地址：https://microsoft.github.io/v...
2021-10-09[網站]
很多人會問這樣的問題：xx 語言的 yy 特性在 zz 語言中怎麼寫啊？ 比如 Python 語言的 reverse 在 C++ 中怎麼實現？
我其實剛剛在用新語言的時候腦子也潛意識的有這種疑問，今天介紹的網站就整理了很多常見操作的不同語言對比實現
仍然以 C++ 的 reverse 為例:
你可以點選上面的程式語言檢視其他語言的 reverse 是如何實現的，目前該網站已經提供了 277 個語言特性，這個工具網站對那些剛開始學習新語言的人非常有用。
我們甚至可以直接開啟對比模式，以 Python 和 C++ 對比為例：
