The authors introduce

Arno (Green Nan), a proprietary nail front-end member, avid tool and efficiency pursuer 🤩, is currently responsible for the front-end research and development of proprietary nail collaborative product system.

💎 preface

He that would do a good job must sharpen his tools.

👆 this sentence, I think we all understand the truth ~

But recently, during my summer internship, I took a careful look at the tool habits of my fellow interns. I found that the people I thought were productive in college had a poor grasp of the tools, both at the level of consciousness and at the level of use. In particular, some of you have not been in touch with Mac, so you are a layman in the field of efficiency. Therefore, in the spirit of being a responsible and good elder brother, I would like to share with you my experience in the use of tools. It is also to throw a brick to introduce jade, and we talk about what NB and fun tools.

It should be noted that I mainly use Mac and Apple ecology as the keynote here, but I believe that the idea of tools and efficiency improvement is unchanged. There are also specific tools in Win that can be replaced, so Win students can also look for them carefully. Please comment on the alternative solution under Win at 🙏🏻

Of course, the tool of 👇, I have no way in this kind of summary of the kind of articles inside thoroughly, so all “point to”, to the relevant extension to read the article, so interested in the word of everyone and then outside the chain out to study, or their own Google community quality resources ~

So are you ready? Here we go ~

🛠 the tools that work on the front end

Before we start talking about the mainstream tools at the front end, let’s emphasize the importance of being a good Coder, good Coder, and good Coder.

Become a keyboard hobbyist

When I use software tools, I subconsciously ask myself to remember at least the “shortcut keys” for the Top 20 operations. You don’t have to be a “solid gold keyboard warrior” at the level of vim editors, but you do need to have “muscle memory” for the mainstream keyboard shortcuts in VSCode. This is to ask you a question, if you can answer, that you have a good grasp of VSCode shortcut keys ~ to:

Q: what is the shortcut key for RenameSymbol in VSCode? (P.S. if you do not know what the Rename Symbol is, go to 😄)

If you can’t answer that question, trust me, shortcuts can save you at least 1 second of time per operation. Think about how good that is. CheatSheet is a tool to check the registration of Mac apps for shortcuts. Hold down the Command key to activate the shortcut menu of the current App. Like this 👇

KEEP ON DOING THAT.

Become VSCode Professional

Tools, it’s fashionable to say that VSCode has become a mainstream front-end development tool since the Typescript epidemic began. But I posted a lot of students on the use of VSCode is still at an entry level, did not really play the power of this tool ~ so also in and you have a chat. I’m not going to write a Bible level guide to VSCode. I’ll just use a few small cases to show you that VSCode has many interesting points you can use to greatly improve your productivity, especially in VSCode Extensions.

  1. Do you know that VSCode can be configured with cloud synchronization and can synchronize other devices with one click?
  2. Did you know VSCode has a plug-in that automatically sorts Typescript imports and clears invalid dependencies?
  3. Did you know that VSCode can automatically fold code layers using shortcut keys?
  4. Do you know how to quickly go back to the last edited or viewed file?

If you know it, that’s good 👍, if you haven’t heard of it, then I give you a few suggestions:

  • Look at the list of VSCode shortcut keys, pick out their own feel can improve their coding efficiency in the future, repeated execution, until the formation of muscle memory.
  • Take a look at the Top200 installed and popular VSCode plug-ins, see the introduction, and install the ones you are interested in. 👈 Have a treasure-hunting game, read less recommended articles, and play with your own tools!

  • Finally VSCode on a beautiful skin and font, according to my aesthetic, this is what I want “skateboard shoes” ~ BTW, the theme isOneDarkProThe font is:FiraCode.

Read more:

  • VSCode plugin recommendation: there are a lot of this article on B, you can help yourself.
  • I’ve written a VSCode Plugin before, so I know a little about the architecture of VSCode, and it feels NX.

With good Terminal

As an engineer, you don’t have to be a master of the Shell, but the common commands in Terminal and daily beautification are still required. ITerm + OhMyZsh = iTerm + OhMyZsh = iTerm + OhMyZsh = iTerm + OhMyZsh

  • Download iTerm installation (you use VSCode of the line, but I still recommend the independent terminal App, because VSCode this goods sometimes will fake death, and then the iTerm a whole no, so still have to specialize in 🙈), with this goods, points on the screen 👇 is a regular operation.

  • Download OhMyZsh installation, update the latest Git directory, get all the mainstream plugins down, change color after installing, then install the corresponding theme, don’t be too happy.

  • “Conditioning” according to personal interests OhMyZsh, strongly recommended in~/.zshrcStart these plug-ins: who uses who knows ~ 😄 casually say a function are easy to use to no good, here is not verbose, there are other good plug-in students, welcome to build a building to share.
plugins=(git osx wd autojump zsh-autosuggestions copyfile history last-working-dir)
Copy the code

Git checkout -b ‘XXX’ for example, the Git plugin can simplify the complex Git command Git checkout -b ‘XXX’ to: GCB ‘XXX’.

For example, the OSX plug-in can help us quickly open the Finder and so on.

.

Read more:

  • Entry-level Shell programming: manual scripting, ✍🏻 to improve efficiency

  • OhMyZsh plugin set: look at all the fancy shell plugins. Here, pull them out and show them at 🌞

  • Vim CheatSheet: Vim was an artifact in the server age, and it’s still worth the heat 🧎♂️ The god took my knee

The use of good Chrome DebugTool

I won’t belabor the importance of this as a front end. I strongly recommend you to wank through the official documents, you will have a lot of new knowledge.

Developer.chrome.com/docs/devtoo…

👆 You could write a book about this, but I suggest you use this tool. It’s the most important debugger in our front end, and I often ask students when interviewing them about how they use it to solve problems. In fact, look at the process of debugging code you know this classmate’s programming level, really, you can consciously see how to debug and troubleshoot the problem, high efficiency? Is there room for improvement.

  • For example: how to check the rendering of a project?
  • For example: How to check for memory leaks?
  • For example: How to search globally to find duplicate code?

The use of good ChromeExtensions

Browser plug-ins, I won’t go into that. Here’s a list of the Chrome add-ons I use on a daily basis, and you’re welcome to add your own browser add-ons and operations. For developers:

  • JSONFormatter: Format JSON data for everyday direct requests

  • XSwitch: my former TL’s browser web request agent, put an AD for him 😛

  • ReactDeveloerTools 👈 this is not much to explain, strongly suggest you open HighlightRerender functions, see your own code write more bad, more criticize yourself 🙈

For Chrome Extension this kind of “god text” is more, like oil monkey, AdBlock, video download what and the like tools I will not mention here, understand the people all understand, do not understand the people themselves Google. Here are a few more articles that you can read as needed:

  • B this question and answer is more pertinent
  • Check out the “collective Intelligence” section below 😁

🔍 search! Search!!!!! Search!!

Whew, we’re done talking about development tools, so let’s talk about search. According to my understanding, I have always divided the efficiency of personal information management in the digital age into three basic levels:

  • Entry level: rarely tidy up their own disk and desktop, the typical feature is desktop what weird named files are stacked together
  • Novice level: began to consciously organize, file classification stratification, pay attention to file naming, establish a label and other mechanisms
  • Proficiency level: start to build database index consciously, do file index at OS level, have data awareness
  • Master: Start to focus on data, integrate personal and collective data into your daily life, and even start to use unstructured data to help you do things

Ask yourself, what Level are you at?

Spotlight

Level 1 and level 2, I won’t, but I’ll focus on the index and search tools that reach level 3. Spotlight has always been a global search tool on the Mac. With Spotlight, you can seamlessly unlock system-level search, major Apps, documents, calendars… It’s searchable.

Alfred

But what comes with the system, it’s not always the strongest, is it? So on top of Spotlight system-wide metadata (the Mac built its own file index library and opened its API to upper-layer applications) came a powerful tool called Alfred. I have been an avid fan of Alfred, using the Alfred feature (search) up to 70 times a day. 👇 Photo:

Alfred is a “true productivity tool” with the following main functions:

  • Document retrieval
  • Quick URL Concatenation
  • Clipboard history quick access & search
  • A BookMark search
  • Custom workflows (the next section will focus on this)
  • . (Function is invincible)

For those of you who don’t know what Alfred is, I strongly recommend you to read the article 👇, which is an introduction to Alfred I wrote on the Intranet in my first year of working in Ali. Please give me a “like” on 👍 if you get something out of it

For language content of finches card here, click on the links to view: www.yuque.com/surfacew/fe…

🚌 The charm of automation

“Automation” must be a mode of thinking that programmers should embed “in their minds.” Whenever we encounter a repetitive process, shouldn’t we try to ask ourselves, how often is this time-consuming process worth automating with a tool?

Now, there are also listed companies relying on automation, so here I want to talk with you about how to do the ultimate automation around. I’ll focus on three tools here: Alfred Workflow, Apple Shortcut, and IFFTT.

AlfredWorkflow

Featuring automated processes on the Mac. Create a flow of actions by using the visual programming approach 👇. For example, I want to achieve a search through Cmd + Alt + B Chrome bookmark 🔖. The community has already helped us implement a workflow. You can download workflows from Alfred’s community Packtal and other forums to automate your daily life.

Or the one above:

  • ChromeHistory: Search for Chrome history (in Alfred search)

  • GithubRepos: Browse and search your own GithubRepos

  • Colors: quickly change the Colors of the front end 🙈

  • . Etc., etc.

We can also define our own workflows to automate some processes. In my own Case, I will define many shortcuts to bind my own daily operations. Such as:

  • Cmd + Alt + D: Open the nail

  • Alfred: Enter weather to query the weather

  • Alfred input Calendar: open baidu calendar (for nothing else, see the holiday calendar 😄)

  • Codereview: Access to the group CR workbench

  • .

It’s a whole lot of fun, and you can customize your workflow a lot. I’ve written an article about Workflow before, so if you’re interested, read it.

AppleShortcuts

Focus on automated processes on your phone. (iPhone)

It provides close to zero code flow choreography, allowing us to access the App and some operating system APIS, so as to achieve functionality choreography like 👆 Alfred, is not also very strong. For example, if we want to implement a function to read content from the clipboard and open a web page, we only need to add two simple programming actions (true 0 code) below to achieve the implementation of the custom process.

The API provided by Apple Shortcuts indicates:

As you can see, big companies like Apple have been thinking about making coding truly approachable, so that the average white user can define their own workflow at a low cost. Shortcuts there are many ways to play, here will not elaborate, to give you enough possibilities to explore.

IFFTT

🔗 : ifttt.com/home

A tripartite neutral automated process provider. This tool cross-platform multi-terminal support, I use relatively little, but can solve my part of the cross-platform process problems, this piece of you explore ~

Smart people are bound to use “automated” thinking to solve problems, so I believe you should understand the importance of using automated tools.

💻 Break through dimensional wall tools

Finally, let’s talk about non-software “tools.” I still think you should spend more time on your equipment as Coder, just like Kevin is better than a regular hairdresser with a Dyson hair dryer.

  • My main machine, must be performance leverage, if the economy allows, I still support Mac (high match) and Apple ecology ~
  • Give yourself a 4K screen (preferably a company), looking at the mood will be better, if you have deep pockets, get an Apple PRO DISPLAY XDR, to kneel down.

  • Use iPad & ApplePencil to try the art of digital notes, paint, find inspiration, and organize your thoughts.

  • Automatic lifting table & ergonomic chair: a little better for the body, spine 🙂 sitting buttocks become bigger, fatter, is an indisputable fact 😿

  • HHKB keyboard ⌨️, recently used for a period of time, after getting used to the layout, feel typing faster… Maybe it’s the power of money that makes the code even sweeter 🎶 (just kidding)

  • .

🎓 epilogue

Of course, the tools of 👆 are just the tip of the iceberg in the world of collective intelligence.

These tools to improve the efficiency of the gain is often a preliminary look at is very small, but you must know, will accumulate over time and the gain amplifier, do a simple calculation, 100 times a day you because the inside of the tool efficiency optimization, every time even optimization of 5 s, a year down, the time saved (Alfred can directly calculate time) :

Is it shockingly up to 50 hours, 2 days alive!! Limited by space, if you think of this article is to help, welcome to thumb up collection reproduced (how to become a B standing three connect) ha ha, if subsequent have the time, I’ll share my information management and knowledge management is how to do, want to be able to bring you some real help.