<h1 class="pgc-h-arrow-right" data-track="1" >2021-10-29[tips].</h1>
Chrome's IdleDetector allows you to detect whether a user is "AFK" (Away from keyboard), i.e. leaving both hands off the keyboard for a period of time.
Unlike requestIdleCallback, it detects whether the user is idle, that is, whether there is an interactive action, such as a mouse, keyboard, etc. The requestIdleCallback is to detect whether the browser itself is idle.
You can do things with it, such as the official mention:
Chat app to see if the person is online
Reduce some large calculations in the absence of users
I used to watch a Live Fish or YouTube video with a type of detection that pauses and prompts you if you want to continue when you leave for a long time. 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/
<h1 class="pgc-h-arrow-right" data-track="9" >2021-10-28[tips].</h1>
Chrome 95 has a new api EyeDropper that's pretty interesting. It is said that this feature was contributed by Microsoft bosses.
After use, a cursor that collects the color will come out, and when you are sure, the rgb value of the user's selected color will return to you.
code:
You can directly enter the above code in the devtool console on chrome 95 or above to see the effect.
More chrome 95 new features: https://developer.chrome.com/blog/new-in-chrome-95/
<h1 class="pgc-h-arrow-right" data-track="16" >2021-10-27</h1>
Chrome extensions must have been used by everyone? Have you ever thought about developing a chrome extension?
Sylvia developed a chrome extension: "Leetcode-cheatsheet" https://leetcode-solution.cn/download
The biggest headache for chrome extension development is all kinds of communication, such as content-script and backgound communication, how background communicates with popup, and so on. This article covers these common extension development issues and has a lot of code and images to make the content easy to understand.
For example, what if you create a new panel in devtool? How to create a new sidebar in devtool's elements panel.
Code demo:
Photo Presentation:
The article is very long, tens of thousands of words, and everyone can pick the key points according to their own needs.
Address: https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
<h1 class="pgc-h-arrow-right" data-track="26" >2021-10-26</h1>
What is OAuth? If you don't know it, it's too out. My "91 Days Of Learning Algorithm" official website uses OAuth to link Github login, address: https://leetcode-solution.cn/91
This article takes Github as an example to explain that if you access OAuth2 from scratch, it is suitable for novices.
Address: https://www.honeybadger.io/blog/oauth-nodejs-javascript/
<h1 class="pgc-h-arrow-right" data-track="30" >2021-10-25[tools].</h1>
A syntax checking tool, note that the syntax here is the syntax of natural languages, not the syntax of programming languages, which is also unique to this tool.
Address: https://caderek.github.io/gramma/
<h1 class="pgc-h-arrow-right" data-track="33" >2021-10-19[tools].</h1>
The previous company had always wanted to do a front-end toolchain, and one of the links was to integrate workflows in the editor (we are vscode). For example, create a new project in the editor, submit code, publish code, code review, code check, etc.
It's just that this still needs a lot of time to invest, and until I left, I haven't done a very good job. And this open source product has been quite perfected. If your company has similar needs, you may want to try it directly, or fork a modification, which can save a lot of time.
This tool is integrated directly into vscode without switching to other windows, which is much more convenient for the program.
Address: https://github.com/apptools-lab/AppWorks
<h1 class="pgc-h-arrow-right" data-track="38" >2021-10-18</h1>
Recently, I have been developing debugging tools for Mini Programs, similar to WeChat's debugging tools. There are several articles to refer to, and if you're doing something similar, you might want to refer to them.
Gain an in-depth understanding of Chrome DevTools
devtools
But to be honest, the ideas of these articles are worth learning, but the lack of details, and some of the details have lacked reference due to the version (the new version of the devtool API has undergone some changes), we should pay attention to it when reading.
<h1 class="pgc-h-arrow-right" data-track="43" >2021-10-15[information].</h1>
The markdown syntax in Github supports Footnotes.
You can use the following syntax
This renders the following content with footnotes:
Similarly, previous platforms had a syntax similar to the following rendered footnote, which implemented the footnote in the form of extended markdown link syntax.
However, the limitation is also obvious, that is, it must be linked to generate footnotes, and Github's footnote syntax solves this problem very well.
More about Github markdown The syntax can be found in this article: https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
<h1 class="pgc-h-arrow-right" data-track="52">2021-10-13[tools].</h1>
Graphql is a query language that Facebook opens.
Nowadays, the popularity in China is far from enough, mainly because of the high difficulty of getting started and the lack of output from domestic communities and large companies (many large companies are actually using it). It is not only a client of the front end, but also the cooperation of the back end server.
And if it works, it can even be used to "replace" service workers, redux and other tools. On the other hand, with ts, you can greatly improve the back-end interface type, which I recommended in the daily recommendation in September. Recommended 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
<h1 class="pgc-h-arrow-right" data-track="57">2021-10-12[tools].</h1>
ES Module Lexer is a lexer for ESM that allows it to analyze ESM text, which is used in vite to analyze file dependencies. Thanks to the use of wasm (by default), it is fast.
Address: https://github.com/guybedford/es-module-lexer
<h1 class="pgc-h-arrow-right" data-track="60" >2021-10-11</h1>
vue can be dynamically injected directly with v-html, and similarly, React can set html via dangerouslySetInnerHTML.
However, if left untreated, there is a high chance of an xss attack. An easy way to do this is html entity escaping. Communities have similar solutions, such as DomPurify. And this time the official standard came out, it is the Sanitizer API. This article explains in detail what sanitizer is, what it is used for, how compatible it is, how to demo the program, how to start it, and so on.
Address: https://web.dev/sanitizer/
<h1 class="pgc-h-arrow-right" data-track="64" >2021-10-10[Component Library].</h1>
The Webview UI Toolkit for Visual Studio Code is a component library developed for vscode and officially developed by Microsoft.
Compared to other component libraries, it has the following characteristics:
Customized for vscode, not only is the UI more consistent, but it can also be styled according to the vscode theme
Web components are used, so theoretically it can be applied to any front-end framework
Focus on accessibility. This point is not paid attention to by many domestic component libraries, but this point is very important, not only for people with disabilities, but also for some normal people. For example, I used to use ESC to close pop-up windows, but many websites couldn't close it, which reminded me of the era of spam ads.
Officially produced, must be a fine product.
Address: https://microsoft.github.io/vscode-webview-ui-toolkit/
<h1 class="pgc-h-arrow-right" data-track="72" >2021-10-09[website].</h1>
Many people ask the question, "How is the yy feature of the xx language written in the zz language?" For example, how is reverse in the Python language implemented in C++?
I actually just used the new language when the brain also subconsciously have this kind of question, today's introduction of the website on the collation of "many common operations of different language comparison implementation"
Still take the reverse of C++ as an example:
You can click on the programming language above to see how reverse in other languages is implemented, and the site now has 277 language features available, making this tool site useful for those who are just starting to learn a new language.
We can even turn on contrast mode directly, using Python and C++ comparison as an example:
Address: https://programming-idioms.org/idiom/19/reverse-a-list