Shiv ENOW large front end
Company official website: CVTE(Guangzhou Shiyuan Stock)
Team: ENOW team of CVTE software Platform Center for Future Education
The author:
preface
At present, our team holds an hour-long tea party every Friday. The tea party included a confirmation of the overall goals for the current quarter and a chat about how everyone was feeling recently, as well as some fun sessions such as code teasing and tips sharing.
Tips sharing: Each session, two guests will share some tools, plug-ins, or techniques that they think are good for collaboration.
This article is a summary of the tips provided by each programmer “technician” in each session of tips sharing. We usually accumulated some development skills to share with you, I hope to help you [smiling face ~].
Technical point of Chrome development and debugging
1, Edit breakpoint
As we all know, breakpoint debugging can be done from the console at development time, as shown in the following figure, which demonstrates breakpoints on Chrome:
But what you may not know is that this breakpoint can also be edited, allowing developers to trigger it conditionally, as shown below:
Right-click breakpoint to display menu:
Select * from breakpoint a where a === 2;
After setting the breakpoint condition, there will be a small question mark at the breakpoint, and the breakpoint of my code will no longer trigger. Because test is passed as 1, and the breakpoint is only triggered when a equals 2:
I tried it out, and Safari has a similar feature.
(Thanks to Technician Saifei)
2, document. DesignMode = “on”
This can be described as SAO operation. Open the console and type: document.designMode=”on”
You can copy the text content on the web page as you like, even what button, tag text content is also optional:
(Thanks to Technician Saifei)
3, browser console quick search
Open the browser console and Command + Shift + P opens quick lookup:
(Thanks to “Technician” Xuan Xuan)
4, salad look up words
I don’t know if you’ve ever been in the same situation as me:
Understand buckle 1.
Using Chrome’s one-click translation, it looks like a translation, but it looks like a translation transition…
Sometimes we just need to translate individual sentences or words and copy them to the dictionary APP for reference.
OKK, now that you have the salad word, you won’t have to worry about that anymore.
After the installation is enabled, you only need to select the word or sentence you want to translate, and then move the mouse to the small salad icon next to it, you can query the dictionary.
(Thanks to “technician” Han Cheng)
Technical point of use website
1. 3000 lives for you
A great tool set site: tools.fun/index.html
This toolset recommended by Brother Bin is a bit cruel, one skill beats 100 skills…
(Thanks to “technician” Bin Ge)
2, codepen
IO/codepen. IO /
It not only provides online coding ability, but also can upload and share their own code, case. Not bad, not bad.
(Thanks to “Technician” Xuan Xuan)
3, cssreference
Are you still frustrated that you don’t know how to use a CSS property in detail? Are you sometimes embarrassed by the simplicity of the W3C case?
OKK👌, check it out: cssReference.io! It provides a detailed introduction to various CSS properties, as well as online cases, the most, the most, the most important is that this site it looks high ah!
4, umaar
Next, here’s another “one trick wins one hundred” tip, a website for tips: umaar.com/dev-tips/24…
It also provides a variety of common development tips. Well, forget this article and go to umaar.com/dev-tips. (Just kidding, come back here.)
(Thanks to “Technician” Xuan Xuan)
Vscode plugin for technical points
1, GitLens
As a new era of migrant workers code farmers, how can get less editor plug-ins, especially front-end magic vscode.
If you’re working with a Git team, GitLens is a must.
Once installed, you can see exactly who wrote this line of bugs, when they were written, which commit wrote them, and for what reason. Then take a screenshot of the company wechat, is to hate him.
Lol, just kidding, it’s not the goal, the main point is that if you have any questions about a part of code, you can quickly find out who wrote it and ask him for advice.
Of course, this has some drawbacks in some scenarios: if a conflict occurs while merging code, and a colleague resolves the conflict and commits it, the record will only see his commit for resolving the conflict.
Don’t panic, we still have the backup, this time can also go to check the file history, even the branch of the warehouse, tags and so on:
It is highly recommended that it be used within a team to increase the bond between colleagues [smiling face ~].
(Thanks to Jun Heum, technician)
2. Code Spell Checker
Code Spell Checker, OCD benefits!! Also a nightmare of OCD!!
Why? Because it’s a word checker plug-in that can tell if you’re spelling the word correctly.
For example, if there is an r missing in father and an N listener missing in listener, it can check the abbreviation of some words.
In the same way, individuals push… Sometimes you’ll find a BUG you’ve been looking for for a long time because of a misspelling of a word. Well, in that case, you can use the GitLens above to find out who wrote it, then hate it and find out it was you.
3, the Document This
Next is a plugin for VSCode to write comments: Document This, when enabled, at the point where you need to add comments, type:
/ * *Copy the codePress Enter again, and the comment information is automatically generated, and you can add to it.
4. Leek box
The plugin was tipped off to me by an anonymous “mechanic”, and I took a look at its features. It’s not really suitable to share publicly.
But today I also do not hide the pinch: leek box, VSCode can also see the stock & fund real-time data, do the best investment plug-in.
Can be configured on their own concerns about stocks and funds, open vscode blatant touch fish. It was recommended by the Fish Champion.
Cons: job confidence index down, found every day is ineffective work.
Common software for technical points
1, clipy – app
A copy – and – paste stack of computer history software.
If clipy-app is enabled, you can use Shift + Command + V to view the history of the clipboard and paste the history information:
As shown above, even file images can work.
Download from clipy-app.com/
(Thanks to “technician” Tao Ge)
2, GIPHY Capture
A good Mac record screen and GIF conversion tool.
Search for GIPHY Capture in the AppStore
The official website is giphy.com/apps/giphyc…
According to this sharing technician, although he has not used, but he saw others have used, really good [smiling face ~].
Well, in the spirit of professional ethics, I downloaded one myself and played with it. It was really good. I recommend it.
(Thanks to Technician Wang Cheng)
After the language
This is the end of this issue’s “Technician” sharing, and we will continue to share more fun and interesting tools to improve development efficiency. I’m Engineer no. 99 Lin Daidai, glad to serve you, let’s see you later, 886.