[Wonderful review in October] Github supports footnotes, Chrome plug-in development guide

2021-10-29[Techniques]

IdleDetector 's 0617faca15083f can allow you to detect whether the user AFK (Away from keyboard), that is, leave the keyboard with both hands for a period of time.

Different from requestIdleCallback, it detects whether the user is idle, that is, whether there are interactive actions, such as mouse, keyboard, etc. The requestIdleCallback is to detect whether the browser itself is idle.

You can use it to do some things, such as the official mention:

• Chat application to see if the other party is online
• Reduce some large calculations when the user is away

I was watching Douyu live or youtube video before, and there will be a type of detection. When you leave for a long time, it will pause and prompt you whether to continue. I think this can significantly reduce the bandwidth consumption caused by users forgetting to close the window. Don't underestimate it. This may save your company a lot of money.

For more information about the use of this api, please refer to: https://web.dev/idle-detection/

2021-10-28[Techniques]

Chrome 95 has a new api EyeDropper quite interesting. It is said that this feature is contributed by the Microsoft boss.

After use, a color-collecting cursor will come out, and when you confirm, the rgb value of the color selected by the user will be returned to you.

Code:

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

You can directly enter the above code in the devtool console on the browser above chrome 95 to see the effect.

More chrome 95 new features: https://developer.chrome.com/blog/new-in-chrome-95/

2021-10-27[好文]

Surely everyone has used the chrome extension? Have you ever thought about developing a chrome extension?

West France has developed a chrome extension: "leetcode-cheatsheet" https://leetcode-solution.cn/download

The most troublesome chrome extension development is all kinds of communication, such as content-script and backgound communication, how background and popup communication and so on. This article describes these common extension development problems, and there are a lot of codes and pictures to make the content easy to understand.

For example, if you create a new panel in devtool? How to create a sidebar in the elements panel of devtool.

Code demo:

// 创建自定义面板，同一个插件可以创建多个自定义面板
// 几个参数依次为：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!'}); // 直接设置显示某个对象
});

Picture demonstration:

The article is very long, with tens of thousands of words, so you can pick the key points according to your needs.

Address: https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

2021-10-26[好文]

What is OAuth? If you don't know yet, it's too out. My "91 days learning algorithm" official website uses OAuth to link to Github login, address: https://leetcode-solution.cn/91

This article uses Github as an example to explain how to access OAuth2 from scratch is suitable for novices.

Address: https://www.honeybadger.io/blog/oauth-nodejs-javascript/

2021-10-25[Tools]

A tool for grammar checking. Note that the grammar here is the grammar of a natural language, not the grammar of a programming language, which is also unique to this tool.

Address: https://caderek.github.io/gramma/

2021-10-19[Tools]

The last company has always wanted to build a front-end tool chain, one of which is to integrate workflow in the editor (we are vscode). For example, create a new project in the editor, submit code, publish code, code review, code inspection and so on.

It's just that this still requires a lot of time investment, and as of my resignation, I haven't done it very well. And this open source product has done quite well. If your company has similar needs, you might as well try to use it directly, or fork a modification, which can save a lot of time.

This tool is directly integrated into vscode without switching to other windows, which is much more convenient for the program.

Address: https://github.com/apptools-lab/AppWorks

2021-10-18[好文]

Recently, we are developing debugging tools for small programs, similar to WeChat debugging tools. I have referred to several articles. If you are doing similar things, you might as well refer to these articles.

• depth understanding of Chrome DevTools
• devtools

But to be honest, the ideas of these articles are worth learning, but they lack details, and some of the details are lack of reference due to version reasons (the new version of devtool api has some changes), so please pay attention when reading.

2021-10-15[Information]

The markdown syntax in Github now supports Footnotes.

You can use the following syntax

Here is a simple footnote[^1].

[^1]: My reference.

In this way, the following content with footnotes can be rendered:

Similarly, other platforms previously had a syntax for rendering footnotes similar to the following, which implemented footnotes by extending the markdown link syntax.

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

However, the limitation is also obvious, that is, it must be a link to generate footnotes. Github's footnote syntax solves this problem well.

More about the syntax of Github markdown can refer to this article: 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[Tools]

Graphql is a query language open sourced by Facebook.

Nowadays, the popularity in China is far from enough. The main reason is the difficulty of getting started and the insufficient output of domestic communities and large companies (many large companies are actually using it). It is not only a front-end client, but also requires the cooperation of the back-end server.

And if it can be used, it can even be used to "replace" service worker, redux and other tools. On the other hand, with ts, you can greatly improve the back-end interface type. I recommended the related tools in the daily recommendation in September. What I recommend today is a framework that Graphql is very famous in the community, and its valuation is getting higher and higher with its popularity.

Address: https://www.apollographql.com/docs

2021-10-12[Tools]

ES Module Lexer is a lexical analyzer for ESM. It can be used to analyze ESM text. Vite uses it to analyze file dependencies. Due to the use of wasm (by default), it is very fast.

Address: https://github.com/guybedford/es-module-lexer

2021-10-11[好文]

In vue, you can use v-html to directly inject html dynamically. Similarly, React can set html through dangerouslySetInnerHTML.

But if it is not dealt with, it is likely to encounter an xss attack. A simple way is to escape the html entity. The community also has similar solutions, such as DomPurify. And this time the official standard came out, it is the Sanitizer API. This article describes in detail what sanitizer is, what is its use, how compatible it is, demo program, how to open it, and a series of issues.

Address: https://web.dev/sanitizer/

2021-10-10[Component Library]

Webview UI Toolkit for Visual Studio Code is a component library developed for vscode, which is officially developed by Microsoft.

Compared with other component libraries, it has the following characteristics:

1. For vscode customization, not only the UI is more consistent, but also the style can be changed according to the vscode theme
2. Use web components, so theoretically it can be applied to any front-end framework
3. Focus on accessibility. This point is not paid attention to by many domestic component libraries, but it is very important, not only for people with disabilities, but also for treating some normal people. For example, I am accustomed to using ESC to close pop-up windows, but many websites cannot be closed. This reminds me of the era when spam ads were rampant.
4. Officially produced, must count the fine products.

Address: https://microsoft.github.io/vscode-webview-ui-toolkit/

2021-10-09 [website]

Many people will ask such questions: How to write the yy feature of example, how does the reverse of the Python language be implemented in C++?

I actually had this question subconsciously when I was using a new language. The website I introduced today has compiled Many common operations in different languages are compared to achieve

Still take C++'s reverse as an example:

You can click on the programming language above to see how the reverse is implemented in other languages. At present, the website has provided 277 language features. This tool website is very useful for those who are just starting to learn a new language.

We can even turn on the comparison mode directly, taking the comparison between Python and C++ as an example:

Address: https://programming-idioms.org/idiom/19/reverse-a-list