Five star front-end development MAC common kit configuration guide

“This article gives you a general introduction (front-end development) of the mainstream common MAC suite.”

If you just got a MAC or are ready to get a MAC, don’t come and have a look?

A list of major MAC applications & tools

shortcuts

1 Alfred

Productivity tool. We use it to quickly open applications, files, calculate, look up dictionaries, etc

I’m used to setting Alfred to double-click Command to open it

Normal use

Web Search

Quickly open and search for what you want, and configuration is simple

WorkflowsWorkflow: The legend is to connect to the server quickly through SSH, this install a plug-in is good

2 paste

clipboard

Sometimes you need to copy and paste it repeatedly, or you want to copy and save it first, and then paste it gradually later. In this case, paste is especially useful

Files, text, links, images, color codes, etc

Press Shift + Command + V to see our copy history, etc. Click to copy to the sticky pad

3 magnet

Split screen artifact, support a lot of split screen operation

Most commonly used shortcut operations ↓ :

4 aText

You can quickly configure common shortcuts

Screenshot & screen recording

Screenshot annotation and screen recording are very common features, QQ screenshot recording screen has been quite good, QuickTime recording screen is very good

Here are a few good screenshots and GIF recording software

1 Gifox

Supports window recording, area recording, and frame number adjustment

2 cleanshot

It should be the best screenshot annotation and screen recording software at present, and the price is also the most expensive hahaha,29$(you can get a free prostitute for a week with Setapp)

3 Gif Brewery

If you need to convert videos to GIFs, add subtitles and more, check out GIF Brewery, which also records screens.

For example, to add a copy to an image, go to GIF: ↓

Thinking & Design

Design your own application, do component library UI, do a bit more beautiful graphics, etc., you need to use drawing tools

Sketch, Figma, XD, these are a little bit like vue, React, Angular

I have been using Sketch for a long time. UI Design resources such as wechat, Ant Design,Element and so on are provided with Sketch Design resources, and Sketch itself can be updated and optimized quickly

1 sketch

If you want to design an application for yourself, it is not difficult to learn. There are also ideas like our front-end component library symbol, style library and so on

Of course, the current figma is also very good, XD is also rapidly developing, so you can try it out and see which weapon works well

2 XMind

I have been using Mindnode (Harmony Version) before, because the previous Xmind gave me the impression that the design is mediocre, before I go back to xMIND 2020, how fragrant!!

Look at the picture on the official website: ↓

The module theme provided is very practical and beautiful. The first picture of this article is made with XMind, which is cooperated with Sketch

Writing and note-taking

1 typora

I usually write documents for team project components, write forums and blog (I don’t hahahaha), of course I use MarkDown, and there are thousands of markDown applications. Typora is the best by far

(This logo is remade by myself with Sketch. Please mention it first, so that you won’t wonder why Typora’s logo is not this one when you download it.)

Two things I think are the best about it so far:

No need to write syntax:

Let you focus on writing instead of worrying about the grammar format

Quick introduction of pictures:

Just drag it into Typora, you can set it to be grouped into a folder, and picgo automatically uploads to your own chart bed, so posts can be uploaded directly to blogs, forums, Git repositories, etc

Of course, these are just the tip of the iceberg, there are many details and advantages

I am using Typora to write a booklet: ↓

About learning + writing records will be written separately a detailed article introduction ha, here first introduced

Evernote and Youdao Dictionary

Reading books, doing projects, reading blogs, wechat and tweeting sometimes have some inspiration or key points, etc. We use them to record these fragmentary things before sorting them out. Moreover, they have plug-ins in Chrome, which can easily collect and record what we want

The development of

“This section will post the configuration code.”

1 Homebrew

Homebrew is the indispensable suite manager for Mac OS. Installation software, binary compilation of what, but domestic friends need to switch to some of the domestic resources, otherwise it will be very card

HomeBrew consists of four parts: ↓

HomeBrew	describe
Brew	Homebrew source code repository
Homebrew-core	Homebrew core software repository
Homebrew-bottles	Homebrew precompiled binary package
Homebrew-cask	Provides macOS applications and large binaries

The last installation is the graphical interface, unless you do terminal agent, or often timeout, there are other methods please big guy advice

This is to replace ali cloud source code

# Check the current source of brew.git
cd "$(brew --repo)" && git remote -v
origin https://github.com/Homebrew/brew.git (fetch)
origin https://github.com/Homebrew/brew.git (push)

# Check the current source of homebrew-core-git
cd "$(brew --repo homebrew/core)" && git remote -v
origin https://github.com/Homebrew/homebrew-core.git (fetch)
origin https://github.com/Homebrew/homebrew-core.git (push)

# Change brew.git to ali source
git -C "$(brew --repo)" remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git

# change homebrew-core-git to Ali source
git -C "$(brew --repo homebrew/core)" remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git

# ZSH replace brew Bintray images
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles' >> ~/.zshrc
source ~/.zshrc

# bash replaces brew Bintray images
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles' >> ~/.bash_profile
source ~/.bash_profile

# refresh source
brew update
Copy the code

Of course there are a lot of Tsinghua source ah, the source of science and technology and so on

2 iterm2 + zsh

After homebrew is installed, use it to install iterm2 and ZSH

# installation iterm2
brew cask install iterm2

# installation ZSH
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
Copy the code

Install the oH-my-zsh plugin

# ZSH -syntax-highlighting: Command syntax highlighting
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

# zsh-autoSuggestions: auto-complete feature
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

# Modify the configuration to add plugins
vi ~/.zshrc

Find plugin=(git), modify:
#z is a built-in plugin for quick jumps between directories, but you need to add it yourself
plugin=(git z zsh-syntax-highlighting zsh-autosuggestions)

# update configuration
source ~/.zshrc

Restart iterm2
Copy the code

Iterm about the topic of words, their own online tune your favorite bar, I did not hahaha

This is Powerlevel10k theme + One Dark color: ↓

3 nvm + nrm

NVM is the Node package manager for MAC, which makes it easy to switch between different Node versions for testing, etc

Installation Method 1:

The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bashCopy the code

Ps: If there is a problem with the installation, you can go to github for details: github.com/nvm-sh/nvm

Installation requires configuration of environment variables to use

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Copy the code

Basic Usage Commands

nvm version View the current version
nvm install Install the latest version of NVM
nvm install <version> Install the appropriate version
nvm uninstall <version> Uninstall the formulated version
nvm use <version> # Switch to the specified version of Node
nvm aliasThe node v10.22.0Set the default version to V10.22.0
nvm ls # list all versions installed locally
nvm ls-remote List all versions of the remote installation
nvm current Display the current version
Copy the code

NRM is an NPM source manager that allows you to quickly switch between NPM sources

Installation:

npm install -g nrm
Copy the code

Ps: If you have changed the Node version, you will need to reinstall the node

Basic use:

The NPM source marked with ※ is currently configured
nrm ls
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - #
  npm -------- https://registry.npmjs.org/
* yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - #

# Select Taobao Source
nrm use tabao

The source name is yournpm
nrm add yournpm http://www.yournpm.com

# to delete the source
nrm del yarn

# Test speed
nrm test taobao
Copy the code

4 postman

Old tie, this need not I introduce, haven’t seen the change of profession (escape ~)

5 whistle

Whistle (pronounced “whistle”) is a cross-platform packet capture and debugging agent based on Node. Check out the official github image

finishing

1 vanilla

Top menu bar management

When you’ve got a bunch of messy apps installed, you might want to use it to sort them out. Put the ones you use on the right side and the ones you don’t

2 Lemon Cleaner

If you need to clear unnecessary caches, large files, etc., you can use this app.

---

Is there any good app to introduce to me

Recommendation & Notice

Recommended reading

How to build a small front-end team engineering service environment from zero to one

trailer

Later, I will recommend a 5-star experience writing kit for MD + Mind mapping. Please follow me and look forward to it

Thank you for your attention

Finally, I hope I can get your attention

Your small attention is our great power ah, we will continue to push original and good articles to you

This is the QR code of our official account