preface
Coding should be a lifelong career, not just 30 youth rice This article has included making https://github.com/ponkans/F2E, welcome to Star, continuously updated
Recently, many people wrote me strange messages, asking me what tools I use in my work. Today, I will share with you ~~
As a nice big front-end development, with some good tools, can bring twice the result with half the effort to work oh ~
This issue of pure dry, are carefully selected tools ~
Universal gadget series
Homebrew
- Official website: brew.sh/
HomeBrew is a package manager for Mac that allows you to install UNIX tools and software that are not available on Mac OS
One-click application installation is very convenient, such as the command line directly install QQ:
iterm2
- Official website: www.iterm2.com/
Iterm2 is used to replace the system’s own Terminal to improve work efficiency
uTools
- U.tools /
Improve work efficiency and a great artifact, cross-platform, plug-in is very much, like a JavaScript, free chart bed ah, have, push!!
This tool basically takes care of all the little bits and pieces that you can use in your daily work
One of the most recommended tools in this article is this one. If you don’t install it, you must try it. It’s really great!!
Snip
- Website: snip.qq.com/
Tencent a lightweight screen capture software, browser screenshots also support oh ~, with the line ~
CleanMyMac X
- Official website: macpaw.com/cleanmymac
Clean the Mac, collaboration software of choice, very powerful!!
1 Password
- Official website: 1password.com/zh-cn/
This password management tool is to do security friend strong push drop, very easy to use, strong push!
Strong push, no longer need to worry about the password can not remember, no longer need to worry about the password leaked ~
About the safety problem, we can rest assured that we have consulted professional safety friends, there is no problem ~~
xclient
- Official address: xclient.info/
There are a lot of MAC software, and all provide a way to crack, friends can help themselves ~
Note series
Notion
- Official website: www.notion.so/desktop
As a front-end, this high level of appearance of the notebook is a must have drop ~~
Notes, knowledge base and task management seamless integration of the collaboration platform, the appearance of the level of super good use.
Of course, evernote is also good, but Notion is much richer and more powerful
Typora
- Official website: www.typora.io
Typora is a Markdown tool, easy to use, with the following IPIC chart bed, directly cool
Strange that all articles are written on this
Ipic
- Official website: ipic.ca
The flaw with Typora above is that the image is a local address and will be invalid when posted online.
Use Ipic free map bed, you can solve ~
Ipic’s free map bed is Sina drop, if it fails, you can configure X cloud OSS, very cheap ~
Markdown format beautification
- Website address: www.npmjs.com/package/lin…
An NPM package, through the command Markdown file, Chinese and English separated, AST based development, and easy to integrate CI
It is very standardized, very pattern, very good-looking ~
Interested partners can also go to study the source ~
Caught series
Charles
- Official website: www.charlesproxy.com/
Packet capture essential artifact, in fact, is a proxy server
With the back end of the joint adjustment, there is a problem, the first packet to see the correct ~
Mock interface data can also be used with this tool. Map local to a locally written JSON file
wireshark
Official website: www.wireshark.org/
It is also used to capture packet drops, but it is the network layer
This tool will come in handy for occasional network layer optimizations
The UI series
ProcessOn
- Official website: www.processon.com/
Strange all articles inside drawing, are using this artifact, all kinds of prototype map, mind map, network topology map support!!
Daily development, first draw a picture of the idea, or it is necessary to drop ~
The following is a picture of the node.js system
Sketch
- Official website: www.sketch.com/get/
Most enterprise products are designed with Sketch
This tool, to make PPT, that is also a must, no longer need to worry about PPT ~~
Zeplin
- Zeplin.io /
For some everyday H5 activities, use this tool, or Adobe Photoshop CC 2019 as described below
Adobe Photoshop CC 2019
- Website address: www.adobe.com/cn/products…
Ps as we all know, nothing to help sister P below, maybe can find a girlfriend what drop ~~
Development series
Devdocs
- Official website: devdocs.io
Develop technical documents, direct online quick search oh, very convenient ~
All kinds of technical documentation is complete
CodeLF
- Unbug.github. IO /codelf
GItHub is a crawler tool, it is estimated that many partners will be troubled to name the method when developing, this site directly to you in one step, a variety of choices.
No longer afraid to write code with method names
SwitchHosts
Official address: github.com/oldj/Switch…
In front end development, you always have to switch between different environments (offline, pre-delivery, online), so this little tool is tailor-made for you
In fact, SwitchHosts is not very perfect. In real enterprises, I think there should be a unified host switching tool. What offline environment ah, pre-send environment ah, are unified in the remote configuration. (The monster is under development and will be open source later)
Minimal TWO-DIMENSIONAL code
- Address: Chrome extension store search [minimalist QR code], add to chrome plugin
H5 page development, always need to access the mobile terminal in the PC side of the development of the page, this small tool directly generate the current webpage two-dimensional code, a scan is very happy ~~
Take, for example, the mushroom Street home page below.
Visual Studio Code
- Official website: code.visualstudio.com
Visual Studio Code is a lightweight and powerful cross-platform open source editor (IDE) that supports Windows, OS X and Linux. There is built-in JavaScript, TypeScript, and node.js support, and a rich plugin ecosystem that supports C++, C#, Python, PHP, and other languages by installing plug-ins.
Take up the majority of the front-end market ~ write code of choice ~~
WebStorm
- Website address: www.jetbrains.com/webstorm/
Although Visual Studio Code is very powerful, Strange still likes to use WebStorm, Ws is a bit of a memory hog, if you are a Windows user, you will choose Vs directly.
The following project is the recent article source oh ~~
n
- Official website: www.npmjs.com/package/n
Switch node version of a NPM package, light and easy to use, if you want to use NVM, this does not have a big impact
According to my friend, Ant Financial has its own set of switching tools, without NVM or N
Lighthouse
- Website address: developers.google.com/web/tools/l…
Automatic page performance analysis tool, will give you the analysis of the current page which is the need to optimize the place, and provide optimization program ~ very practical
Let’s give Apple’s official website a score. It looks good! ~
Mobile debugging
Website address: developers.google.com/web/tools/c…
There are many mobile debugging tools on the Internet, but I still want to recommend this way oh, convenient, timely response ~
FeHelper
Official address: github.com/zxlie/FeHel…
A Chrome plugin, a collection of some daily use of the function set, great ~
What re, timestamp conversion, this series of development will use, almost all have ~~
Intellij IDEA
- Official website: www.jetbrains.com/idea
Occasionally the front end needs to write their own Java situation, that is right to use this tool, great power ~
Navicat Premium
- Official website: www.navicat.com.cn
This database visualization tool is a great tool to use when doing small projects with Node.js that require a database
Postman
- Official website: www.getpostman.com
Interface debugging magic, the backend interface has not written good, this tool used for front-end partners mock API, or pretty good oh ~
However, many companies have their own data mock platforms
conclusion
This article has included making https://github.com/ponkans/F2E, welcome to Star, continuously updated π§
The tools shared above are some of the most commonly used and considered good tools for kooky work.
Share with you, I hope to bring you some work efficiency improvement ~~
Currently writing the Node.js series portal:
- Big Front-end Advanced Node.js series must know, must know, must ask
- “Big Front-end Advanced Node.js” series Double 11 seconds kill system (advanced must see)
- Large Front-end Advanced Node.js series multi-process underlying principle (bytedance asked)
There are daily development have missed the necessary tools, please leave a message, let more partners know ~~
Stay up late finishing is not easy, if help to you, trouble point a praise, add a concern oh, Thanksgiving ππ
Contact me/public number
Wechat search “water monster” or scan the qr code below reply “add group”, I will pull you into the technical communication group. Honestly, in this group, even if you don’t talk, just reading the chat is a kind of growth. (Ali technical experts, aobing authors, Java3y, mogujie senior front end, Ant Financial security experts, all the big names).
The water monster will also be regular original, regular with small partners to exchange experience or help read the resume. Add attention, don’t get lost, have a chance to run together π βββ
