❞

❝

Frontier: the nuggets writing unconsciously already after four months, the few reading, from the beginning to now have broken reading article, thank you support my friends of the Denver nuggets, hope can deepen the depth of the output articles in the future, from today to take this opportunity to share with you the tree sauce is commonly used in daily work of some of the tools, maybe can help you improve daily work efficiency

❞

1. Write an essay ✏️

❝

Based on many children’s shoes in the comments section before, asked Shu Jiang, such as mind map is very beautiful, what is used, how to make the first picture and so on, so through some tools to sort out the hope to help you

❞

1.1 language finches

❝

Wordfinch is a professional cloud knowledge base incubated by Ant Financial, similar to a wiki. Currently, it has covered the use of 100,000 Ali employees for document writing and knowledge precipitation. The official link is 🔗

❞


Two aspects of language I often use

  • Mind map: One is the mind map of the bird, which I think has a strong UI experience (Appearance Association)

  • Diary arrangement: use the language to keep records of the problems and experiences encountered in the front-end development every day, convenient replay and regression, the most important is the typesetting experience is high, support orchestration, when you review your article, reading experience is high, like turning over a book

1.2 the Process On

❝

ProcessOn is an online collaborative mapping platform that provides users with the most powerful, easy-to-use mapping tools available. Support online flowchart creation, mind mapping, organization structure diagram, network topology diagram, BPMN, UML diagram, UI interface prototype design, etc

❞


I mainly use Process on to draw interaction diagrams and flow charts. Online real-time editing is supported. However, if non-paying users are involved, the number of drawings will be limited


1.3 Carbon

❝

Carbon is used to create a beautiful version of the code snippet that filters through various theme switches and then generates the code snippet image you want to look like at 🔗

❞



1.4 Mdnice

❝

Mdnicde full name is Markdown Nice, support to add “theme elements” to Markdown, a bit like skin feeling, support a variety of subjective, let your article as if covered with wedding clothes, the most important is to support wechat public number, Zhihu, and gold digging! Official link 🔗

❞

The export is shown below


1.5 Cover template

❝

Many children are curious that EVERY time I write an article, I will attach a theme map, whether I made it by myself. Although I am a UI front-end engineer, design is still trivial and time-consuming, and time should be spent on more valuable things. Here is the template online editing tool I use – the official link of Fanke Quick map 🔗 or canva official link 🔗

❞



1.6 Shields

❝

Shields. IO is mainly used to generate badges in Markdown documents, which we often see on Github projects, expressing official links such as unit test coverage, package size, release information, certification information, etc. 🔗

❞



1.7 Gif generated

❝

Sometimes pictures cannot express what we want to explain. In this case, dynamic diagrams play a very important role in describing the whole process more intuitively

❞

  • Mac first uses QuickTime Player for screen recording

  • Then the generated MOC video will be converted to GIF dynamic map official link 🔗

❝

If you are using GIF in nuggets, please note that you need to add the image in the lower left corner to upload

❞


1.8 Screenshot of web page

❝

Need screenshots of web pages for article material? For a long time, I need to take screenshots of the current webpage. I am still using wechat screenshots tool. In fact, the powerful Chrome has built-in screenshots function

❞

  • First open chrome Console (open shortcut Option+Command+ I)
  • Open command line (open shortcut shift + CMD + P or Win Shift + CTRL + P)
  • Then enter Capture on the CLI. The following information is displayed

❝

Note: The difference between Capture Full size Screenshoot and Capture Screenshoot is that the former is a screenshot of the complete information on the entire page, while the latter is a screenshot of the current page

❞


2. Efficiency ⏰

❝

In daily development, the use of efficiency tools can often reduce a lot of unnecessary waste of time, and through tool empowerment, help us improve production efficiency

❞

2.1 Iconfont Icon Library

❝

Iconfont Icon library is convenient for individual developers to find their own ICONS, save Icon design and search time, is not the official link 🔗

❞


2.2 Regexr regular visualization tool

❝

RegExr is an online tool for editing and testing regular expressions. It has a concise interface and an official link to 🔗 to view text boxes for finding and replacing regular expressions in real time

❞


2.3 Postwoman Interface Debugging Tool

❝

You’ve heard of Postman, now there’s Postwoman, Postman’s rival in love! It’s free, open source, lightweight, fast, and has beautiful API debugging tools. It can help us save time and improve work efficiency. Official link 🔗

❞


2.4 CanIuse Compatibility Query

❝

can I use? As the name suggests: I can use it, can quickly let’s take a look at browser compatibility condition of a certain attribute syntax, application scenarios currently in a browser can be used normally, but changed after another browser does not support, this time we nip in the bud, before the use of a property, do enough research, rather than wait to go online to find the problem The official link 🔗

❞


2.5 Prettier Playground code online formatting

❝

Application Scenario: When I use a computer without an IDE but need to read code written by others, Prettier Playground can help me change the original messy code and greatly improve readability official link 🔗

❞

The source code is on the left and the formatted code is on the right

2.6 SwitchHosts Host Management tool

❝

SwitchHosts allows you to quickly switch between different hosts Settings and edit hosts. The official link is 🔗

❞


3. Command line tools 🔧

❝

All in code! If you only want to use a command line tool to complete a series of tasks that can help you increase your productivity, you can check out the following tools

❞

3.1 n– Node version switching tool

❝

Used to switch node version, convenient lightweight official link 🔗

❞


3.2 nrm– NPM image management tool

❝

NRM is the mirror source management tool for NPM. Sometimes it is too slow to access foreign resources. Using NRM allows you to quickly switch between NPM sources and manage your internal NPM sources

❞


3.3 caniuse-cmd– Compatibility test tool

❝

The web version of Caniuse mentioned above, here is its command line tool, how to use? NPM install -g caniuse-cmd Below is an example of websocket browser compatibility testing 👇

❞


The articles

  • Develop dynamic forms from 0 to 1
  • Front-end form data stuff
  • How to better manage the Api
  • The micro front end thing
  • Front-end engineering stuff
  • Develop tool libraries from 0 to 1
  • Develop simple scaffolding from 0 to 1
  • Front-end Nginx stuff
  • Front-end operations and deployment

Please drink a cup 🍵 remember three even oh ~

1. Remember to give 🌲 sauce a thumbs up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨