UI engineers build on a Mac development environment, where Android and iOS have full official ides, so most of the tools listed here are for Web UI development.

Abstract

  • The development tools
  • Environment depends on
  • Auxiliary tool
  • other

The development tools

iTerm2

A replacement system terminal tool, optimized for all kinds of operations, download here

ITerm2 was released in the Version3 Beta on 02/21, 2016, with a number of new features, such as integration of a number of Shell enhancements, session recovery (iTerm2 upgrades, strong back to continue the original tasks, similar to TMUx), Command line view, password management, etc.

The imgcat script is not integrated into iTerm2. Here are a few different installation options, and NPM is recommended:

npm install -g imgcat
Copy the code

The password manager function is also quite useful, using the system’s “keystring access” function to store account and password information. The password manager is activated to take advantage of the Triggers function for iTerm2, which is itself a handy feature that Triggers an action when a particular keyword appears in the iTerm2 interface. So we can check if there are password related keywords on the screen, just call up the password manager. Triggers setup entry: Preferences – Profiles – Advanced – Triggers

Detailed downloads and features of the new version can be found here, plus a Chinese translation of the new features.

Zsh + Oh My Zsh

The Mac comes with Zsh, which is much more powerful than the default shell Bash. The only drawback is that the configuration is quite complex, but Oh My Zsh solves this problem. Oh My Zsh is essentially a framework for managing Zsh configuration, basically installing Oh My Zsh directly. No additional configuration is required to get started with Zsh.

Zsh is Bash compatible, so it costs almost nothing to migrate from Bash to Zsh, and if you already have aliases in ~/.bashrc, just copy them directly to ~/.zshrc. But Zsh has a number of handy features over Bash:

  • Powerful historical recording function. For example, you can enter D on the command line and press Enter to list the recently accessed directory. You can directly enter the corresponding serial number to jump to the directory. Enter grep and use the up and down keys to view all grep commands
  • Intelligent spelling correction, such as typing the wrong letters of a command or not paying attention to case, is automatically corrected by Zsh
  • Zsh can complete command parameters, plugin content, and press Tab to trigger completion. You can also use Ctrl + N /p/f/b to switch the completion result
  • Default aliases, Oh My Zsh are few but useful, including.. And… These commonly used aliases, Git alias Settings, etc.
  • Handy little details like automatically displaying the branch where git Repository is located and highlighting the current folder name (although Oh My Zsh offers dozens of themes to choose from)

Installing and using Oh My Zsh can be found here.

Vim configuration

Vim already comes with the Mac, so it’s just a matter of following Web development conventions.

  • The.vimrc configuration file is placed in ~/.vimrc
  • Place the color scheme to ~/.vim/colors
  • Plugin manager, placed in ~/.vim/ Autoload

Git Clone can be used in ~/.vim/bundle to install git plugins. Common plug-ins:

  • Emmet code completion, formerly Zen-coding
  • Powerline enhances the status bar to display file code, language type and other information directly in the Vim status bar
  • Vim – Commentary code comments, which can be quickly commented with shortcut keys
  • NERD Tree file management plug-in
  • CTRLP. Vim quickly open files in the project, Cmd + P function similar to Sublime Text, you can query and locate all files under the project, opened buffers, tags in buffers, recently accessed files and almost anything you want to locate.

Sublime Text

Sublime Text 3 installation address

The installation Package Control

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
Copy the code

After Package Control is installed, you can use Package Control to Install the plug-in. Use Shift + Command + P to open Package Control, then type “Install Package”, Then install Emmet, CSS Format and other common plug-ins.

Here is another recommended Material style Theme, which can be found by searching for the Theme name in “Install Package”. After installing the theme, restart Sublime. If the theme does not take effect, you can manually enable the theme in Preference -> settings-user:

{
  "theme": "Material-Theme.sublime-theme",
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
}Copy the code

Finally, you can add some common configurations:

{
  "word_wrap": true, // 自动换行
  "font_size": 14 // 字号
}Copy the code

The browser

  • Chrome
  • Firefox
  • Opera
  • Safari, which comes with the system
  • IE, virtual machine, or another Windows machine, or what?

Xcode

There’s nothing to say, App Store install.

For UI engineers, you can use Reveal App. It is an App that allows you to directly View View hierarchy and debug View on simulators and real machines. You can also directly modify UI-related attribute values (color, distance) without refreshing them immediately. website

Android Studio

Scrap Eclipse, Android Studio is really much more powerful.

You need the JDK, of course.

Sketch

Interface development essentials

PhotoShop

I don’t think there’s much to talk about

Environment depends on

Auxiliary tool

Snip

Screenshot software is simple and practical. It is recommended to download it from the official website instead of using the App Store version, because the version of the official website can have the function of scrolling screenshot.

As for the scrolling screenshot function, there is a pit here. Directly enabling “Enable scrolling Screenshot” in Snip does not take effect. You need to check Snip in System Preferences -> Security and Privacy -> Privacy -> Accessibility (before checking, click the unlock button in the lower left corner of the Settings interface).

Mark eel

This is a highly efficient tool for marking the quality of your design. It is supported on both Mac and Windows, but currently only supports PSD, PNG, BMP, and JPG formats. It seems there is no plan to support Sketch.

Tree

There are a number of tools called Tree, in this case the Tree under BREW, that can output directory structure as a concatenated Tree, which is very convenient when writing project documents. If you already have The aforementioned Homebrew installed, just type it on the command linesudo brew install treeCan be installed.

Wunderlist

Very easy to use TODO App, support a wide range of platforms, official website.

Evernote

Note tools support a wide range of platforms, powerful, can be very convenient to record content, and even direct search of the text in the picture function.

Dash

A developer document collection app that allows you to search for frequently used documents directly offline, with both Google and StackOverflow results.

Charles

The only “working” packet capture tool on Mac is similar to Fiddler on Windows. For more advanced functions, please refer to “Fiddler and Charles’s Special Uses”.

The Unarchiver

Rar format files can be compressed and decompressed, Mac native without RAR support, download.

CleanMyMac

Clear the system, uninstall software, and view system resource consumption.

other

  • On the Mac, moving the mouse/trackpad to the four corners of the screen triggers an action, including the “Put the monitor to sleep” feature, which, in combination with “wake up after sleep by entering a password,” can be used to turn off the screen with a simple mouse swipe when you’re in a hurry to get out of your seat.
  • Here is a list of the most common Mac shortcuts.
  • Wallpaper 10 wallpaper.com
  • Tips for using a Mac can be found here