2015 的工具包，持續邁向 2016！

以下是小弟新年時為了整理電腦所整理的清單。現在的工作主要為前端開發 React/Vue，偶而兼職後端 Rails。打勾的持續使用與推薦的，沒打勾的可能軟體不差但使用習慣關係好像沒那麼常開啟。作業系統是 OSX 分享給大家。

[UPDATE]
補上一些簡易的心得

OSX 一般軟體

• ✔︎CoconutBattery - 電池資訊

• ✔︎Bartender 2 - OSX Menu bar icon 整合

• ✔︎OmniDiskSweeper - 空間清理

• ✔︎WiFi Explorer - Wifi 強度偵測

• ember - 擷取畫面與管理

• ✔︎Monosnap - 截圖簡易編輯
  常常在需要說明或發問的時候，這類工具實在幫上大忙 ★★★★★

• appzapper - 軟體移除

• growl - 通知管理

• LunchBar - 快速搜尋啟動

• ✔︎Alfred - 快速搜尋啟動
  加上 powerpack 之後比原生 spotlight 還強大還可整合 google 例如 dirfw 地址等等 ★★★★★

• ✔︎CheatSheet - 長按 command 顯示快捷鍵
  不用再一直查詢快捷鍵了 ★★★★★

• ✔︎AppCleaner - 軟體移除

• ✔︎Divvy - 視窗佈局快速切換
  對於我習慣單一螢幕開發，而 OSX 卻沒有類似 windows 那樣碰邊可 resize 的功能。外加 demo 時也很方便 ★★★★★

• Moom - 視窗佈局快速切換

• ✔︎Dr. Cleaner - 記憶體, 硬碟空間清理

• ✔︎Dropbox - 雲端硬碟

• ✔︎Chrome - 瀏覽器

  • Postman

  • Bitly - 短網址

  • Momentum - Dashboard

  • Pocket - 連結備份儲存

  • Wappalyzer - 網站技術分析

  • Open SEO Stats - PageRank

• ✔︎Firefox - 瀏覽器

  • SQLite Manager

  • Awesome screenshot

• Vivaldi - 瀏覽器 for 閱讀

• ✔︎LibreOffice - 文件編輯

• ✔︎VLC - 影音

• Skitch - 畫面擷取

• ✔︎Spotify - 串流音樂

• ✔︎TeamViewer - 遠端遙控

• ✔︎VMWare Fusion - 虛擬作業系統

• ✔︎The Unarchiver - 壓縮

• ✔︎Transmit - FTP, SFTP, AWS
  最好用的 FTP 軟體 of osx ★★★★★

• ✔︎uTorrent - BT

• ✔︎ScreenFlow - 錄螢幕

管理服務

• ✔︎Wunderlist - Todo

• ✔︎Trello - 看板

• ✔Sunrise - 日曆

• asana - 團隊任務管理

• ✔︎番茄土豆 - 番茄鐘

• producteev - 團隊任務管理

開發

• ✔︎Atom - 開發編輯器

  • UI Theme - Native

  • Syntax Theme - Solarized Dark

  • CTRL + Shift + M = Markdown Preview
    免費套件又多，唯一的缺點就是開那種單行大檔(bundle file)會死

• ✔︎VSCode - For Javascript and debug

• ✔︎vim + MacVim - 開發編輯器

• ✔︎Dash - 開發 API 文件快速查閱
  節省一直開瀏覽器 tab 的機會，查詢速度極快 ★★★★★

• ✔︎iTerm2 - 終端機軟體

• ✔︎ohmyzsh - zsh 工具
  省去慢慢設定非常好用，大推 ★★★★★

• ✔︎Chrome canary - 開發版 Chrome，有 Mobile debug tools

• ✔︎Hex Fiend - 編輯 HEX

• ✔︎Kaleidoscope - 檔案比對 diff

• ︎Sequel Pro - MySQL GUI

• ✔︎MySQLWorkbench - MySQL GUI

• Navicat - PostgreSQL, MySQL GUI

• ✔︎Postico - PostgreSQL GUI

• MongoVUE - MongoDB GUI(window)

• ✔︎robomongo - Best MongoDB GUI

• ✔︎TextWrangler - 文字編輯器 with 編碼 BOM etc

• ✔︎Homebrew - 軟體，函式庫安裝管理

• ✔︎Xcode - OSX 整合開發編輯器

• Github app - git GUI

• ✔︎fabric kit - 追蹤 Crash 等工具

• ✔︎homebrew-services - 啟動 brew 安裝服務整合指令
  省去被一堆指令，類似於在 unix like 這樣啟動/停止服務 ★★★★★

• ✔︎SourceTree - git GUI

• forward - ssh tunneling 讓其他人直接連到本機開發中網站

• ✔︎ngrok - ssh tunneling 讓其他人直接連到本機開發中網站

• rubular - Regex 測試

• ✔︎regexr - Regex 測試

• ✔︎caniuse - 瀏覽器支援測試

• devdocs - API 文件會整

• Website Grader - 網頁測試分析工具

• norse - DDOS 地圖

• ✔︎PageSpeed - 網頁測試分析工具

• instabug - Bug 回報溝通

設計

• OmniGraffle - Stencil + Wireframe

• ✔︎origami - 設計動態 Prototyping

• ✔︎PixelStick - 測量螢幕精準 px

• ✔︎Rulers - 測量 px

• ✔︎Sip - Color Picker

• ✔︎Sketch - 繪圖設計工具

• ✔︎[Adobe Illustrator CC 2015]() - 向量圖工具

• ✔︎[Adobe Photoshop CC 2015]() - 繪圖設計工具

• Pencil - 單機 wireframe

• ✔︎Cacoo - Online wireframe

• balsamiq - 單機 wireframe

• colourco - 色票

• ✔0to255 - 色票

• ✔fontsquirrel - 字體

• ✔马克鳗 - 標記，測量

• siteinspire - 靈感

• deviantart - 靈感

• dribbble - 設計靈感

• brandcolors - 各大品牌 color palettes

社群

• ✔Slack

• ✔Line

• ✔KakaoTalk

• ✔WeChat

• ✔Skype

• ✔gitter - Github 交流

網路服務類

• intercom - User feedback

• RunScope - API 監視

• getgalileo - API 監視

• ✔jsfiddle - JS 線上 Demo

• keybr - 英打練習

• 財報狗

• ✔gtmetrix - 網頁開發分析

• ✔imgur - 圖片分享

• statcounter - 趨勢分析

• zapier - 服務串連工具

• ifttt - 服務串連工具

• prezi - 簡報服務

• ✔codepen - 線上 HTML, CSS, JS

• jsbin - 線上 HTML, CSS, JS

• droplr - 快速上傳圖片分享

• tailorbrands - 快速 logo 產生

• mailgun - 寄信服務

• defonic - 白噪音

• ✔urban - 新世代英文單字查詢

• calendly - 協同日曆

• teachable - 銷售課程

• ✔quizlet - 語言學習, 背單字

• Bussiness Canvas

Atom 偏好設定

Use Preview Tabs

說明

點一下是預覽檔案，點兩下才開啟 Tab

設定

1. 開啟 Preferences

2. 選取 Packages

3. 搜尋 tabs

4. 點 Settings

5. 勾選 Use Preview Tabs

關閉自動補齊加入 Buffers

說明

自動補齊會把之前打過的字加入，很惱人。

設定

1. 開啟 Preferences

2. 選取 Packages

3. 搜尋 autocomplete-plus

4. 點 Settings

5. 關閉 Include Completions From All Buffers

快捷鍵

• shortcut

擴充套件

• highlight-selected

• Sublime-Style-Column-Selection

• advanced-open-file

• atom-ternjs

• color-picker

• emmet

• git-log

• vim-mode

• vim-surround

• file-icons

• autoclose-html

• language-slim

• language-babel

• linter

• docblockr

[2016-03-10 UPDATE]

應觀眾要求補上工位照

[2016-09-22 UPDATE]

FiraCode 字體

本文参与了 SegmentFault「我是工具控」分享，如果你也手持利器，那就一起来分享吧。