2021-10-29【技巧】Chrome的IdleDetector可以检测用户是否AFK（Awayfromkeyboard），即双手离开键盘一段时间。与requestIdleCallback不同的是，它检测用户是否空闲，即是否有交互动作，如鼠标、键盘等。而requestIdleCallback是检测浏览器本身是否空闲。可以用它来做一些事情，比如官方提到：聊天应用，看对方在线不在线，如果用户不在线，减少一些大规模的计算。之前都是看斗鱼直播或者youtube视频。还会有类型检测，当你离开时间长了，它会暂停，让你继续。我认为这可以显着减少用户忘记关闭窗口带来的带宽消耗，不要小看它。这可以为您的公司节省很多钱。关于这个api的更多使用可以参考：https://web.dev/idle-detection/2021-10-28【技术】Chrome95发布了一个新的apiEyeDropper，还是挺有意思的。据说这个功能是微软大佬贡献的。使用后会出现收集颜色的光标，确认后会返回用户选择的颜色的rgb值。代码：consteyeDropper=newEyeDropper();constresult=awaiteyeDropper.open();//result={sRGBHex:'#160731'}chrome95以上的浏览器在devtool控制台直接输入上面的代码就可以看到效果了。chrome95更多新特性：https://developer.chrome.com/...2021-10-27【好文】你用过chrome扩展吗？你有没有想过开发一个chrome扩展？西发开发了一个chrome扩展：《leetcode-cheatsheet》https://leetcode-solution.cn/...chrome扩展开发最头疼的就是各种通信，比如content-script和后台通信，后台怎么和popup通信等等.本文描述了这些常见的扩展开发问题，并有大量的代码和图片使内容通俗易懂。例如，如果您在devtool中创建一个新面板？如何在devtool的元素面板中创建一个新的侧边栏。代码演示//创建一个自定义面板，同一个插件可以创建多个自定义面板//几个参数是：面板标题，图标（其实设置了就没地方显示了），要显示的页面加载成功后回调chrome.devtools.panels.create('MyPanel','img/icon.png','mypanel.html',function(panel){console.log('自定义面板创建成功！');//注意这个日志一般是不可见的});//创建自定义侧边栏chrome.devtools.panels.elements.createSidebarPane("Images",function(sidebar){//sidebar.setPage('../sidebar.html');//指定加载一个页面sidebar.setExpression('document.querySelectorAll("img")','AllImages');//通过表达式指定//sidebar.setObject({aaa:111,bbb:'HelloWorld!'});//直接设置显示一个对象});图片演示：文章很长，有几万字，大家可以根据自己的需要选择重点。地址：https://www.cnblogs.com/liuxi...2021-10-26【好文】什么是OAuth？如果你还不知道，那你就太out了。我的官网使用OAuth链接Github登录，地址：https://leetcode-solution.cn/91本文以Github为例，讲解如何从零开始接入OAuth2，适合新手。地址：https://www.honeybadger.io/bl...2021-10-25[工具]一个语法检查工具，注意这里的语法是自然语言的语法，不是编程语言的语法，是Where工具的语法也是独一无二的。地址：https://caderek.github.io/gra...2021-10-19【工具】之前公司一直想做一个前端工具链，其中一个就是在编辑器中集成工作（我们是vscode)流。比如在编辑器中新建项目，提交代码，发布代码，代码审查，代码检查等，只是这个还是需要大量的时间投入，直到离职才完善。而这个开源产品已经相当完善了。如果你的公司有类似的需求，不妨直接尝试使用，或者fork一个修改，这样可以节省很多时间。这个工具是直接集成到vscode里面的，不用切换到其他窗口，对于程序来说就方便多了。地址：https://github.com/apptools-l...2021-10-18【好文】最近在开发一个小程序的调试工具，类似微信的调试工具。我参考了几篇文章。如果你正在做类似的事情，不妨参考这些文章。深入理解ChromeDevToolsdevtools不过说实话，这些文章的思路值得学习，但是缺乏细节，部分细节由于版本原因不再参考（新版devtoolapi有变化），大家要埋单阅读时注意。2021-10-15[新闻]Github中的markdown语法支持脚注。您可以使用以下语法Hereisasimplefootnote[^1].[^1]:Myreference.这样就可以渲染出如下带脚注的内容：同理，其他平台之前也渲染过类似如下的脚注语法，它是通过扩展markdown的链接语法来实现脚注的。这里是一个简单的[footnote](http://xxx.com"我的参考")，但是限制也很明显，就是必须是链接才能生成脚注。Github的footnote语法很好的解决了这个问题。更多关于Githubmarkdown的语法可以参考这篇文章：https://docs.github.com/en/gi...2021-10-13【工具】Graphql是Facebook开源的一种查询语言。如今，在中国的知名度远远不够。主要是入门难，国内社区和大公司的输出不够（很多大公司其实都在用）。它不仅是前端的客户端，还需要后端服务器的配合。而如果使用的话，它甚至可以用来“替代”serviceworker、redux等工具。另一方面，配合ts可以大大改善后台界面的类型。我在9月份的每日推荐中推荐了相关工具。今天给大家推荐的是Graphql，一个在社区非常有名的框架，估值也随着火爆程度越来越高。地址：https://www.apollographql.com...2021-10-12[工具]ESModuleLexer是ESM的词法分析器，可以用来分析ESM文本，在vite文件依赖中使用。由于使用了wasm（默认情况下），它很快。地址：https://github.com/guybedford...2021-10-11[好文]Vue可以使用v-html直接动态注入html。同样，React可以通过dangerouslySetInnerHTML设置html。但是如果不处理，很可能会遇到xss攻击。一种简单的方法是html实体转义。社区中也有类似的解决方案，比如DomPurify。而这次正式的标准出来了，就是SanitizerAPI。本文详细介绍了消毒器是什么，有什么用，兼容性如何，演示程序，如何打开等一系列问题。地址：https://web.dev/sanitizer/2021-10-10【组件库】WebviewUIToolkitforVisualStudioCode是微软官方为vscode开发的组件库。与其他组件库相比，它有以下特点：为vscode定制，不仅UI更一致，而且可以根据vscode的主题使用web组件，理论上可以适用于任何前端框架专注于可访问性。这一点国内很多组件库都没有重视，但是却很重要，不仅对于残疾人，对于一些正常人来说也是如此。比如我习惯用ESC关闭弹窗，但是很多网站是关不掉的，这让我想起那个垃圾广告横行的年代。官方出品，必定是精品。地址：https://microsoft.github.io/v...2021-10-09[网站]很多人会问这个问题：xx语言的yy特性怎么用zz语言写？比如如何在C++中用Python语言实现逆向？其实刚才我在使用一门新语言的时候，我的脑海里就下意识的有这个疑问。今天介绍的网站整理了很多不同语言的常用操作的对比和实现。仍然以C++的逆向为例：可以点击上面的编程语言查看其他语言的逆向是如何实现的。目前，该网站已提供277种语言功能。这个工具站点对于那些刚开始学习一门新语言的人来说非常有用。我们甚至可以直接开启比较模式，以Python和C++的比较为例：地址：https://programming-idioms.or...
