【10月精彩回顧】Github 支持腳注,Chrome插件開發(fā)全攻略

2021-10-29[技巧]

chrome 的 IdleDetector 可以允許你檢測用戶是否「AFK」（Away from keyboard），即雙手離開鍵盤一段時間。

和 requestIdleCallback 不同， 它是檢測用戶是否空閑，即是否有交互動作，比如鼠標(biāo)，鍵盤等。而 requestIdleCallback 是檢測瀏覽器本身是否空閑。

你可以用它做一些事情，比如官方提到的：

• 聊天應(yīng)用看對方是否在線
• 用戶不在的話減少一些大型計算

我之前在看斗魚直播或者 youtube 視頻也會有類型的檢測，當(dāng)你長時間離開的話，它會暫停并提示你是否繼續(xù)。我覺得這個可以顯著地減少用戶忘記關(guān)閉窗口帶來的帶寬消耗，不要小看它。這或許可以為你的公司節(jié)省很大一筆錢。

更多關(guān)于這個 api 的使用請參考：https://web.dev/idle-detection/

2021-10-28[技巧]

chrome 95 出了一個新的 api EyeDropper 蠻有意思的。據(jù)說這個功能是微軟大佬貢獻的。

使用后會出來一個采集顏色的光標(biāo)，當(dāng)你確定后會在用戶選擇的顏色的 rgb 值返回你。

代碼：

const?eyeDropper?=?new?EyeDropper();
const?result?=?await?eyeDropper.open();
//?result?=?{sRGBHex:?'#160731'}

大家可以直接在 chrome 95 以上的瀏覽器上在 devtool 的 console 中輸入上面的代碼查看效果。

更多 chrome 95 新特性：https://developer.chrome.com/blog/new-in-chrome-95/

2021-10-27[好文]

chrome 擴展想必大家都用過么？那你有想過開發(fā)一款 chrome 擴展么？

西法就開發(fā)了一款 chrome 擴展：《leetcode-cheatsheet》https://leetcode-solution.cn/download

chrome 擴展開發(fā)最最頭疼的就是各種通信，比如 content-script 和 backgound 通信， background 如何和 popup 通信等等。這篇文章對這些常見的擴展開發(fā)問題進行了講述，并有大量的代碼和圖片，使得內(nèi)容通俗易懂。

比如如果在 devtool 新建一個 panel？怎么在 devtool 的 elements 面板新建一個側(cè)邊欄。

代碼演示:

//?創(chuàng)建自定義面板，同一個插件可以創(chuàng)建多個自定義面板
//?幾個參數(shù)依次為：panel標(biāo)題、圖標(biāo)（其實設(shè)置了也沒地方顯示）、要加載的頁面、加載成功后的回調(diào)
chrome.devtools.panels.create('MyPanel',?'img/icon.png',?'mypanel.html',?function(panel)
{
??console.log('自定義面板創(chuàng)建成功！');?//?注意這個log一般看不到
});

//?創(chuàng)建自定義側(cè)邊欄
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!'});?//?直接設(shè)置顯示某個對象
});

圖片演示：

文章很長，有幾萬字，大家可以根據(jù)自己的需要挑重點看。

地址：https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

2021-10-26[好文]

OAuth 是什么？你如果還不知道就太 out 了。我的《91天學(xué)算法》官方網(wǎng)站就用了 OAuth 來鏈接 Github 登錄，地址：https://leetcode-solution.cn/91

本文以 Github 為例，講解如果從零接入 OAuth2，適合新手。

地址：https://www.honeybadger.io/blog/oauth-nodejs-javascript/

2021-10-25[工具]

一個語法檢查的工具，注意這里的語法是自然語言的語法，不是編程語言的語法，這同時也是該工具獨特的地方。

地址：https://caderek.github.io/gramma/

2021-10-19[工具]

上家公司一直想做一個前端工具鏈，其中一環(huán)就是在編輯器（我們是 vscode）中集成工作流。比如在編輯器中新建工程，提交代碼，發(fā)布代碼， code review ， 代碼檢查等等。

只不過這個還是需要很多時間投入的，截止到我離職也沒有做的很完善。而這個開源產(chǎn)品做的已經(jīng)相當(dāng)完善了。如果你的公司有類似的需求，不妨直接嘗試使用，或者 fork 一份修改，能夠省去不少時間。

這個工具是直接集成到 vscode 中的，無需切換到其他窗口，對于程序來說方便許多。

地址：https://github.com/apptools-lab/AppWorks

2021-10-18[好文]

最近在開發(fā)小程序的調(diào)試工具，類似微信的調(diào)試工具。參考了幾篇文章，如果你也在做類似的事情，不妨參考下這幾篇文章。

• 深入理解 Chrome DevTools
• devtools

不過說實話這幾篇文章的思路很值得借鑒，但是缺乏細節(jié)，并且部分細節(jié)由于版本原因已經(jīng)缺乏參考性了（新版本 devtool api 發(fā)生了些變化），大家在閱讀的時候注意一下。

2021-10-15[資訊]

Github 中的 markdown 語法支持腳注（Footnotes）了。

你可以使用如下語法

Here?is?a?simple?footnote[^1].

[^1]:?My?reference.

這樣就可以渲染出如下帶有腳注的內(nèi)容：

類似地，之前其他平臺有類似如下的渲染腳注的語法，它通過擴展 markdown 鏈接語法的形式實現(xiàn)了腳注。

Here?is?a?simple?[footnote](http://xxx.com?"My?reference")

不過限制也很明顯，那就是必須是鏈接才能生成腳注，Github 的這種腳注語法就很好地解決了這個問題。

更多關(guān)于 Github markdown 的語法可以參考這篇文章：https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

2021-10-13[工具]

Graphql 是 facebook 開源的一門查詢語言（query language）。

如今在國內(nèi)的普及程度還遠遠不夠，主要原因就是上手難度高以及國內(nèi)社區(qū)和大公司輸出不夠（很多大公司其實都在用）。它不僅僅是前端的一個 client，還需要后端 server 的配合。

而如果運用得到，甚至可以用來“替代” service worker，redux 等工具。另一方面和 ts 配合，可以大大完善后端接口類型，這個我在 9 月份的每日一薦推薦過相關(guān)的工具。今天推薦的是 Graphql 在社區(qū)非常有名的一個框架，它的估值也在隨著它的流行越來越高。

地址：https://www.apollographql.com/docs

2021-10-12[工具]

ES Module Lexer 是一個針對 ESM 的詞法分析器，使用它可以對 ESM 文本進行分析，vite 中就使用了它分析文件依賴。由于使用了 wasm（默認(rèn)情況下）， 它的速度很快。

地址：https://github.com/guybedford/es-module-lexer

2021-10-11[好文]

vue 中可以用 v-html 直接動態(tài)注入 html，類似地，React 則可以通過 dangerouslySetInnerHTML 設(shè)置 html。

但是如果不加以處理，很可能會遭遇 xss 攻擊。一種簡單的方法就是 html entity 轉(zhuǎn)義。社區(qū)也有類似的解決方案，比如 DomPurify。而這次官方標(biāo)準(zhǔn)出來了，它就是 Sanitizer API。這篇文章就詳細講述了 sanitizer 是什么，有什么用，兼容性如何，demo 程序，如何開啟等等一系列問題。

地址：https://web.dev/sanitizer/

2021-10-10[組件庫]

Webview UI Toolkit for Visual Studio Code 是一個針對 vscode 開發(fā)的組件庫，由微軟官方開發(fā)。

相比于其他組件庫，它有如下特點：

1. 針對 vscode 定制，不僅 UI 更加一致，并且還能根據(jù) vscode 主題變換樣式
2. 使用 web components，因此理論上可以應(yīng)用于任何前端框架
3. 注重可訪問性。這點是國內(nèi)的很多組件庫都不注重的，但是這點卻很重要，不僅僅是針對障礙人士，對待一些正常人這也是必要的。比如我習(xí)慣使用 ESC 來關(guān)閉彈窗，但是很多網(wǎng)站卻關(guān)不掉，這讓我想起了垃圾廣告橫行的年代。
4. 官方出品，必數(shù)精品。

地址：https://microsoft.github.io/vscode-webview-ui-toolkit/

2021-10-09[網(wǎng)站]

很多人會問這樣的問題：「xx 語言的 yy 特性在 zz 語言中怎么寫啊？」 比如 Python 語言的 reverse 在 C++ 中怎么實現(xiàn)？

我其實剛剛在用新語言的時候腦子也潛意識的有這種疑問，今天介紹的網(wǎng)站就整理了「很多常見操作的不同語言對比實現(xiàn)」

仍然以 C++ 的 reverse 為例:

你可以點擊上面的編程語言查看其他語言的 reverse 是如何實現(xiàn)的，目前該網(wǎng)站已經(jīng)提供了 277 個語言特性，這個工具網(wǎng)站對那些剛開始學(xué)習(xí)新語言的人非常有用。

我們甚至可以直接開啟對比模式，以 Python 和 C++ 對比為例：

地址：https://programming-idioms.org/idiom/19/reverse-a-list

• 后臺回復(fù)：typescript，獲取我寫的 typescript 系列文章，絕對精品
• 后臺回復(fù)：電子書，自動獲取我為大家整理的大量經(jīng)典電子書，省去你篩選以及下載的時間
• 后臺回復(fù)：不一樣的前端，自動獲取精選優(yōu)質(zhì)前端文章。
• 后臺回復(fù)：算法，自動獲取精選算法文章。另外也可關(guān)注我的另外一個專注算法的公眾號力扣加加。
• 后臺回復(fù)：每日一薦，自動獲取我為大家總結(jié)的每日一薦月刊，內(nèi)含精品文章，實用技巧，高效工具等等