共计 3826 个字符,预计需要花费 10 分钟才能阅读完成。
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 开发的组件库,由微软官网开发。
相比于其余组件库,它有如下特点:
- 针对 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++ 比照为例:
地址:https://programming-idioms.or…