乐趣区

关于github:10月精彩回顾Github-支持脚注Chrome插件开发全攻略

jiezi

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[好文]

最近在开发小程序的调试工具，相似微信的调试工具。参考了几篇文章，如果你也在做相似的事件，无妨参考下这几篇文章。

  • 深刻了解 Chrome DevTools
  • devtools

不过说实话这几篇文章的思路很值得借鉴，然而不足细节，并且局部细节因为版本起因曾经不足参考性了（新版本 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 程序，如何开启等等一系列问题。

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

2021-10-10[组件库]

Webview UI Toolkit for Visual Studio Code 是一个针对 vscode 开发的组件库，由微软官网开发。

相比于其余组件库，它有如下特点：

  1. 针对 vscode 定制，不仅 UI 更加统一，并且还能依据 vscode 主题变换款式
  2. 应用 web components，因而实践上能够利用于任何前端框架
  3. 重视可拜访性。这点是国内的很多组件库都不重视的，然而这点却很重要，不仅仅是针对阻碍人士，看待一些正常人这也是必要的。比方我习惯应用 ESC 来敞开弹窗，然而很多网站却关不掉，这让我想起了垃圾广告横行的年代。
  4. 官网出品，必数精品。

地址：https://microsoft.github.io/v…

2021-10-09[网站]

很多人会问这样的问题：xx 语言的 yy 个性在 zz 语言中怎么写啊？ 比方 Python 语言的 reverse 在 C++ 中怎么实现？

我其实刚刚在用新语言的时候脑子也潜意识的有这种疑难，明天介绍的网站就整顿了 很多常见操作的不同语言比照实现

依然以 C++ 的 reverse 为例:

你能够点击下面的编程语言查看其余语言的 reverse 是如何实现的，目前该网站曾经提供了 277 个语言个性，这个工具网站对那些刚开始学习新语言的人十分有用。

咱们甚至能够间接开启比照模式，以 Python 和 C++ 比照为例：

地址：https://programming-idioms.or…

退出移动版