天給大家整理出來了web前端工程師初級階段需要掌握的內(nèi)容，很全面，希望大家好好閱讀，看看自己掌握的知識點和文章里面寫的還相差多少。

什么是初級web前端工程師？

初級前端工程師：首先要知道的就是如何處理各種瀏覽器的兼容處理（比如說在IE瀏覽器中的createElement有什么不同等等內(nèi)容），現(xiàn)在基本上每個公司在招聘的時候都會要求熟練html5, css3, javascript，這個熟練的意思就是信手拈來。

在下面會說初級前端工程師應該具體的學習哪些知識，然后就是要了解各種css的預處理器和后處理器， 還有會使用常見前端的MV*框架（angularjs, backbone，reactjs等等）并知道這些框架的原理，另外就是要熟練使用nodejs，要會使用基于node的各種前端構建工具 （grunt，gulp等等），熟練使用github或gitlab，對模塊化、組件化、工程化、語義化有一個比較深入的了解，最后要知道如何開發(fā)移動端 的頁面，如何去優(yōu)化一個頁面的性能。

初級web前端工程師的技術體系

1、HTML部分

首先是要掌握一些常用標簽的使用和他們的各個屬性，這些常用的標簽我總結(jié)了一下有以下這些：

• html：頁面的根元素。
• head：頁面的頭部標簽，是所有頭部元素的容器。
• body：頁面的主體標簽，頁面展現(xiàn)的內(nèi)容就放置在這里面。
• title：頁面的標題。
• meta：位于文檔的頭部，提供頁面的元信息，包括關鍵字、描述等等。
• link：定義文檔與外部資源的關系，最常用的用途就是引入樣式表。
• script：腳本標簽，可以把js腳本代碼放置在這個標簽內(nèi)，也可以使用這個標簽的src屬性引入一個外部標簽。
• style：樣式標簽，可以把css代碼寫在這個標簽中。
• a：超鏈接，href屬性代表要鏈接到的地方，target屬性代表打開方式。
• img：圖像標簽，src屬性表示圖片的位置。
• form：表單元素，它內(nèi)部的input、select、textarea等標簽都是比較重要的。
• div：定義文檔中的分區(qū)或節(jié)，可以使用div來進行頁面的布局等操作。
• 另外還有ul、li、p、button、iframe、p、table等標簽也很常用，nav、section、article、header、aside、footer等語義化標簽也需要了解一下。

除了要了解上面這一些標簽之外，還需要對一些新的HTML5的API有一定的了解：

• audio、video標簽。
• Canvas：定義圖形，比如圖表和其他圖像。
• input標簽的accept屬性，email、phone、url等類型。
• getElementByClassName根據(jù)class名來獲取一個元素結(jié)點。
• Multiple file selection多文件選擇屬性。
• html的import、template
• process標簽，webGL等內(nèi)容。

還有一些要知道的知識點：

1.doctype的作用。

2.unicode、utf8等編碼的原理和區(qū)別。

3.如何進行頁面性能優(yōu)化。

4.png、jpg、webp、gif等圖片格式的不同的優(yōu)勢。

5.HTML行內(nèi)元素與塊級元素的區(qū)別。

6.移動web端開發(fā)常用head標簽。

7.web語義化。

8.瀏覽器中的緩存原理

2、CSS部分

關于css這一塊，我的看法就是網(wǎng)上下載一個chm格式的css的參考手冊，然后根據(jù)手冊里面寫的一個個的都敲一下。

css大體分為下面這幾塊知識點：

① 定位布局

1.position屬性的7個值（static | relative | absolute | fixed | center | page | sticky）分別有什么作用和不同？

2.實現(xiàn)品字形布局或者是三欄布局（左右寬度固定，中間適應屏幕）。

3.浮動與清除浮動的方法，flex布局，grid布局。

② 盒子模型

1.margin、padding、border這三個屬性。

2.伸縮盒相關內(nèi)容。

3.Multi-column Layout Module多列布局模型。

③ 文本字體

1.強制換行與不換行，清除空白。

2.文本對齊、大小（如何設置chrome小于12px的字體）、縮進、轉(zhuǎn)換。

3.單位（em、rem、px等），顏色（rgb、rgba，hls）。

④ 變換、過渡和動畫

1.transform的各種取值的作用與兼容性。

2.transition過渡的動畫類型，貝塞爾曲線的原理。

3.animation動畫的各種設置，@keyframes規(guī)則。

4.瀏覽器的重繪與重排。

⑤ 選擇器

1.選擇器的分類，權值和優(yōu)先級。

2.有哪些屬性可以被繼承，哪些屬性沒法繼承。

3.偽類和偽元素分別是什么，有什么作用。

上面這些都是基礎的東西，除了這些基礎的內(nèi)容之外需要了解Less、Sass、stylus等css預處理器，這將會大幅度提升你的css開發(fā)效率，也需要了解一下Autoprefixer、PostCSS等css后處理器。

3、JavaScript部分

在這里就不說js的基礎知識了，我把js按照語法的層次和使用的層次分為了兩大塊。

按照語法的層次來說：

首先是javascript的面向?qū)ο蠓矫娴膬?nèi)容：在javascript中實現(xiàn)封裝、繼承和多態(tài)。

① 封裝：在js中可以通過閉包、作用域和作用域鏈來實現(xiàn)封裝，ES6的const、let的作用。

② 繼承：基于原型鏈的繼承、基于構造函數(shù)的繼承、組合式繼承、寄生式繼承等，外加ES6的class關鍵字，prototype和__proto__。

③ 多態(tài)：在javascript中多態(tài)是使用arguments來實現(xiàn)的，關于arguments會引申出來很多內(nèi)容：

1.arguments的caller、callee等方法的作用。

2.方法的apply和call的作用和不同。

3.使用Array.prototype.slice.call來把一個數(shù)組對象轉(zhuǎn)化為數(shù)組。

4.array的各種方法，如shift、splice、push、filter、map、reduce、forEach等等。

然后是Js的設計模式，比如說那三種工廠模式啊，建造者模式啊等等。

最后是在不同情況下的this分別都代表什么。

按照使用的層次來說：

首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、postMessageAPI、websocket、服務器代理等等。

然后是tcp協(xié)議、udt協(xié)議以及http協(xié)議的協(xié)議頭、狀態(tài)碼等內(nèi)容。瀏覽器的緩存，客戶端存儲方面的內(nèi)容：localstorage、sessionstorage、indexDB、cookie等等。

最后是一些新的js的API，例如文件讀取（fileReader）、fetch、Promise、Web Sockets等等內(nèi)容，可以去caniuse上面看一下有哪些新的東西。

、常用軟件

效率工具

• Alfred - Mac 上應該安裝的第一個效率神器。

截圖

• snipaste - 新生代截圖工具。【薦】。
• Xnip- Mac上方便好用的截圖工具，支持滾動截圖；最大的優(yōu)點是，截圖可以自帶陰影，效果不錯。#。【薦】
• Annotate - 款非常強大的圖片注釋軟件，可對屏幕截圖或者現(xiàn)有圖片進行批注。同時，在基礎的圖片注釋功能上還增加了“局部高亮”、“Emoji 表情”、 ”GIF 動圖錄制與注釋“、“與 Dropbox/CloudApp 同步數(shù)據(jù)“等功能，雖然沒有 Skitch 的圖片管理功能，也沒有 Napkin 的圖片拼貼功能，但從注釋操作的需求上看，它的確算是 No.1。#
• 截圖(Jietu) - 截圖附帶強大的標注功能，騰訊作品。支持截圖生成二維碼。支持視頻錄制，可以錄制成gif、mp4、mov等格式。 # #
• Skitch - 截圖附帶強大的標注功能。
• Snip - 高效的截圖工具，支持滾動截屏，騰訊作品。
• snappy - 官網(wǎng)地址：http://snappy-app.com/。新出來的一款截圖工具，截圖之后可生成懸浮窗。##

gif錄制

• Licecap - 是一款屏幕錄制工具輸出GIF，錄制過程中可以隨意改變錄屏范圍，錄制的文件也非常小。支持 Mac 和 Windows 平臺。開源 【薦】。錄制結(jié)束后，如果覺得文件過大，可以在這個網(wǎng)站https://ezgif.com/optimize上進行壓縮。
• Kap - 輕量 GIF 錄屏小工具。開源。

壓縮／解壓

• BetterZip 3 - 壓縮解壓縮工具。支持格式 ZIP、TAR、TGZ、TBZ、TXZ (new)、7-ZIP、RAR。[薦]
• The Unarchiver - 壓縮／解壓工具。

輸入法

• 搜狗輸入法 - 搜狗輸入法。【薦】
• 百度輸入法 - 支持拼音五筆輸入。
• 清歌五筆輸入法 - 為 iOS 和 Mac 專門打造的五筆輸入法。
• WBIM - 五筆輸入法。
• Rocket - Emoji標簽輸入。
• 顏文字 - 顏文字輸入。
• RIME - 中州韻輸入法引擎。開源。
• 哈利路亞英文輸入法 - 智能英文輸入法，具備自動補全，自動糾錯功能。

下載工具

至今為止，我還沒找到一個靠譜、好用的下載工具。

• 迅雷 - 限速嚴重，沒有會員基本沒法兒用。
• Transmission - 免費的BitTorrent客戶端 開源。
• aria2 - 一款支持多種協(xié)議的輕量級命令行下載工具。開源。
• JDownloader - 下載工具，下載文件的一鍵式托管。
• You-Get - 網(wǎng)絡富媒體命令行下載工具。開源。
• Free Download Manager - 功能強大的下載加速器。
• FOLX - Folx 是一個Mac osx 系統(tǒng)風格界面的下載管理工具。
• ENFI下載器 - 使用P2P下載技術，支持HTTP，BT，磁力鏈等各種協(xié)議，高速下載讓你擺脫限速的困擾，從此告別低速。

NTFS移動硬盤讀寫

其實，macOS 系統(tǒng)本身是已經(jīng)原生支持 NTFS 磁盤格式的讀與寫的，只不過 NTFS 畢竟是老對手 微軟 Windows 產(chǎn)品下的技術，礙于版權和商業(yè)上的原因，蘋果只好把 NTFS 的“寫入”功能給屏蔽掉，變成系統(tǒng)的隱藏特性。

• Paragon NTFS for Mac - NTFS移動硬盤讀寫工具。[薦]
• NTFS for Mac 助手 - 輕松實現(xiàn) Mac 電腦讀寫 NTFS 磁盤。[薦]。
• Mounty - 免費讓 Mac 原生支持移動硬盤/U盤 NTFS 讀寫的驅(qū)動應用。團長把這個軟件試用了一段時間，發(fā)現(xiàn)容易導致文件丟失，所以，請慎用。#

日歷工具

• Fantastical - 日歷應用程序，你將管理好生活。[薦]。

GTD 時間管理

• OmniFocus - 著名 GTD，上手之后秒殺同類。79.99美元。#

密碼管理

• 1password - 全平臺的帳號密碼管理軟件。[薦]
• LastPass - 密碼管理器和安全的數(shù)字筆記。
• KeePassX - 一個免費的，開源的，體積小的密碼管理器。
• MacPass - 開源的密碼管理器。

窗口管理

• Magnet - 窗口分屏工具。【薦】

• ShiftIt - 窗口位置和大小管理軟件。 [開源][薦]
• Moom - 多任務多窗口的軟件。
• Slate - 窗口管理器，可用JavaScript寫配置。[開源]
• Amethyst - 窗口管理器（自動保持窗口大小的窗口）。開源
• Spectacle - 簡單的移動和調(diào)整大小的窗口，和可定制的鍵盤快捷鍵。

• Fenetre- 窗口置頂工具。（我試了下，并不是那么好用）

瀏覽器

• Safari - Mac預裝自帶瀏覽器。
• Chrome - Chrome瀏覽器谷歌出品。
• Firefox - 火狐瀏覽器。
• Opera - Opera 瀏覽器。
• QQ瀏覽器 - QQ瀏覽器－騰訊出品。
• 傲游云瀏覽器 - 傲游云瀏覽器。
• Vivaldi - Opera開發(fā)商出品新的瀏覽器。
• ōryōki - 小的web瀏覽器。這是一個試驗性的項目，目前正在開發(fā)中。

翻譯工具

• 有道翻譯 - 有道詞典桌面版。
• 辭海詞典 - 學單詞、背單詞、辭海詞典。
• eudic - 歐路詞典。
• iTranslate - 支持全世界超過 80 種語言發(fā)音和輸出。

Magic mouse 鼠標增強

• BetterTouchTool - 觸控板、Magic mouse 鼠標增強工具。比如，這個工具可以讓Magic mouse實現(xiàn)「輕點代替點按」。【薦】。#、#、#

其他實用工具

• f.lux - 降低屏幕的色溫，減弱藍光，保護眼睛。【薦】
• Itsycal - 一款簡潔實用的開源日歷工具。可以直接在 menubar 上展示今天是幾號；點擊后，還自動框選出了本月的時間范圍。好處是，可以在最短的時間內(nèi)查看日歷，基本可以替代原生的時間了。開源。【薦】

其他工具

• 12306ForMac - Mac版12306 訂票/撿票 助手。開源
• AirServer - 將手機投影到電腦上。
• CheatSheet - CheatSheet 是一款Mac上的非常實用的快捷鍵快速提醒工具。
• WWDC - Mac OS的非官方的WWDC APP。[開源]
• xScope - 測量、檢查和測試屏幕上的圖形和布局的工具。搜索你的蘋果和網(wǎng)絡，快速打開應用程序。
• Todoist - 跨平臺的任務管理器與移動應用程序。
• TaskPaper - 漂亮的純文本任務列表。
• Wunderlist - 奇妙清單跨平臺的任務管理器與移動應用程序。
• Ukelele - Unicode鍵盤布局編輯器。
• Karabiner - 一個強大的和穩(wěn)定的OS X的鍵盤定制。[開源
• Keytty - 讓你通過鍵盤使用鼠標。
• AppCleaner - 一個小應用程序，讓你徹底卸載不需要的應用程序。
• BetterZip 3 - 壓縮解壓縮工具支持格式 ZIP、TAR、TGZ、TBZ、TXZ (new)、7-ZIP、RAR。[薦]
• Numi - 漂亮的計算器應用。
• Day-O 2 - 菜單日歷更換內(nèi)置日歷。
• OnyX - 多功能實用工具來驗證磁盤和文件，運行清潔和系統(tǒng)維護任務，配置隱藏選項等。
• SSH Tunnel - 管理你的SSH。
• Mounty - NTFS 分區(qū)讀寫組件。
• Paragon NTFS - 在Mac OS X中完全讀寫、修改、訪問Windows NTFS硬盤、U盤等外接設備的文件。
• Tuxera NTFS - Mac上的NTFS文件系統(tǒng)驅(qū)動。
• gfxCardStatus - 控制Mac獨立顯卡與集成顯卡之間的切換。
• openEmu - 模擬器，可以玩魂斗羅之類，放松回到小時候。[開源]
• Hammerspoon - 功能強大的自動化工具，Lua 腳本驅(qū)動，支持窗口管理。[開源]
• DaisyDisk - 磁盤空間使用掃描工具。
• iStat pro - 免費的Mac OS電腦硬件信息檢測軟件。
• BitBar - 支持使用各種語言將信息展示到Mac OS的菜單欄。開源
• ClipMenu - 一個剪貼板操作的管理器。
• Paste - 智能剪貼板歷史片段管理。
• ControlPlane - 自定義Mac情景模式。某些場景讓Mac自動靜音或是自動打開Mail客戶端等等。開源
• Caffeine - 實用工具，菜單欄按鈕，點擊休眠。
• HTML5 Player - Chrome插件解決中國視頻網(wǎng)站播放視頻電腦發(fā)熱的情況。
• Monity - 幫助用戶實時監(jiān)控系統(tǒng)的一款非常漂亮的軟件。
• iStats - iStats 是一個可以讓你快速查看電腦 CPU 溫度，磁盤轉(zhuǎn)速和電池等信息的命令行工具。[開源]
• InsomniaX - 合上蓋子不眠不休，繼續(xù)聽歌下載。
• NoSleep - 合上蓋子不休眠，可根據(jù)是否連接電源單獨設置。
• FinderQuicklook-Plugins - Finder快速預覽文件插件。Path Finder - 強大的Finder替代者，擁有很多特性。TotalFinder - 強大的Finder替代者，界面風格像Chrome。【薦】XtraFinder - 給Finder添加有用的新特性。

二、小工具

Mac系統(tǒng)清理、內(nèi)存管理

• DaisyDisk - 磁盤分析工具。了解磁盤使用狀況，并進行準確的分析。DaisyDisk 的視覺系屬性大大超過了功能性。 #
• MacBooster - 磁盤、內(nèi)存清理工具。【薦】

數(shù)據(jù)恢復

• DiskWarrior - 恢復文件系統(tǒng)損壞時，磁盤工具進行選擇。
• Data Rescue - 多種情況下的全面和專業(yè)的數(shù)據(jù)恢復。
• Stellar Phoenix Mac Data Recovery - 一個功能強大的恢復文件面向Mac的工具。
• R-Studio for Mac - 可恢復分區(qū)被格式化、損壞或被刪除的文件。

文件傳輸

• Android File Transfer - Google 官方推出的，讓Android設備連接電腦，進行文件管理。
• handshaker - 錘子科技推出的，以前名叫SmartFinder. #

遠程協(xié)助

• TeamViewer - 遠程協(xié)助及在線協(xié)作和會議功能的軟件，商業(yè)軟件個人使用免費。[薦]
• RealVNC 是一款免費的遠程控制跨多平臺的程序。

虛擬機

• Parallels Desktop - 雖然好用但是收費機制，更新花錢、花錢、花錢。[hot]
• Virtual Box - 免費、免費、免費，帶NTFS讀寫，不用買ParagonNTFS，省100塊。
• VMWare Fusion - 強大的虛擬機，商業(yè)軟件。
• Veertu - Mac上最輕便的虛擬機，只有跑Windows才會收費。比較新，很多功能不支持。

三、辦公軟件

筆記軟件 & 知識管理

• 印象筆記 - 記錄一切。[薦]
• 為知筆記 - 支持Markdown，搜集整理圖片鏈接導入文檔。[薦]
• Notion - 新生代筆記軟件。
• 有道云筆記 - 支持多目錄，Markdown，iWork/Office預覽。
• Quiver - 程序猿的筆記本。
• leanote - 螞蟻筆記，支持Markdown的一款開源筆記軟件，支持直接成為個人博客。
• Inkdrop - Markdown愛好者的筆記本應用程序。

網(wǎng)盤

• Dropbox - 非常好用的網(wǎng)絡文件同步工具，提供在線存儲服務。[薦]
• 百度網(wǎng)盤 - 百度云客戶端。
• 堅果云 - 堅果云客戶端。
• 騰訊微云 - 騰訊云客戶端。
• owncloud - 私有云網(wǎng)盤。
• Mega - 免費的云服務，提供50GB的免費存儲空間。
• 億方云 - 硅谷團隊打造，個人免費。
• Seafile - 是由國內(nèi)團隊開發(fā)的國際化的開源云存儲軟件項目。

思維導圖軟件

• XMind - 思維導圖軟件。[薦]
• MindNode -

社交

• WeiboX - 微博第三方Mac應用。

團隊協(xié)作

• Textual - 最受歡迎的世界與我們相關的KPI應用 for OS X。
• Gitter - 關于GitHub的項目交流，支持 Markdown，對開發(fā)者極為友好。
• 簡聊 - 企業(yè)級即時溝通工具，已經(jīng)下線了，可以自己搭建一套系統(tǒng)玩兒。
• 釘釘 - 企業(yè)級辦公通訊免費平臺。
• Slack - 團隊協(xié)作，溝通工具。
• 零信 - 隨時隨地工作，跨平臺。
• 今目標 - 一款面向中小企業(yè)的互聯(lián)網(wǎng)工作平臺。
• BearyChat - 互聯(lián)網(wǎng)團隊協(xié)作，溝通工具。
• Bitpost - 私人分散消息，開源。它是一個p2p的去中心化和無須第三方提供信用擔保協(xié)議。
• Teambition - 團隊協(xié)作。提供管理任務、安排日程、查找文件、即時討論等團隊所需要的一切協(xié)作功能。
• 日事清 - 個人日程管理，團隊協(xié)作工具。日程安排，計劃分配，筆記總結(jié)等。
• Coding.net - 代碼托管，項目管理，WebIDE，演示部署，開啟云端開發(fā)模式，讓開發(fā)更簡單。

Email

其實Mac自帶的郵件客戶端已經(jīng)很好用了。

• 網(wǎng)易郵箱大師。[薦]。#

• Spark - 新推出的快速郵件客戶端支持Mac和iPhone。[薦]
• Airmail - 快速的郵件客戶端支持Mac和iPhone。
• Foxmail - 快速的郵件客戶端。
• MailTags - 管理和組織郵件，日程和標簽進行分類郵件。
• N1 - 可以擴展的開源收費郵件客戶端。
• Postbox - 這個貌似也非常強大哦，關鍵是簡潔漂亮的收費郵件客戶端。
• Polymail - 簡單，功能強大，長得好看的新晉郵件客戶端。
• CloudMagic Email - 界面非常簡潔的一個郵件客戶端。
• ThunderBird - Mozilla 公司出品的強大的Email客戶端程序。

四、閱讀與寫作

閱讀相關

• WorkFlowy - 很可能是極簡主義者夢想中的筆記應用。[薦]

Markdown 編輯器

• Ulysses- 專業(yè)文本編輯工具，支持 Markdown。[薦]
• Bear
• MacDown - 一款開源的Markdown編輯器，深受Mou的影響。
• MWeb - 專業(yè)的 Markdown 寫作、記筆記、靜態(tài)博客生成軟件。[hot]
• Mou - 免費 Markdown 編輯神器。
• Marp - Markdown 制作幻燈片編輯器。
• TextNut - Markdown編輯器，富文本之間自由切換。
• Typora - 基于 Electron 的“讀寫一體” Markdown 編輯器。[hot]
• EME - 最近剛出的一款Markdown編輯器，界面很像Chrome瀏覽器的界面，很簡約。
• LightPaper - 簡單的Markdown文本編輯器。
• Cmd Markdown - Cmd Markdown 編輯閱讀器，支持實時同步預覽，區(qū)分寫作和閱讀模式，支持在線存儲，分享文稿網(wǎng)址。

Markdown 圖片上傳

• PicGo - Markdown 圖片上傳工具。[薦]。#
• iPic - Markdown 圖片上傳工具。60元/年。

電子書相關

• Kindle App - 亞馬遜 Kindle App 電子書閱讀器。
• Calibre - 丑陋的軟件，但強大的軟件電子書管理和轉(zhuǎn)換。開源 。[薦]
• Sigil - 開源、多平臺EPUB編輯器。[薦] 。EPub 電子書制作教程：# # #
• Knotes - 高效、優(yōu)雅的 Kindle 標注管理器。

pdf閱讀

• MarginNote - 在閱讀時做標注，記筆記，并可以利用思維導圖(Mindmap)和大綱工具(Outline)對筆記進行組織。但就是比較貴。【薦】
• PDF Expert - 極致的 PDF 閱讀標注工作體驗。
• PDFelement - 采用類似word界面和工具條設計,無需改變工具操作習慣。國產(chǎn)良心軟件。
• iAnnotate - 可以說是所有 PDF 標記類 app 中的No.1了。僅限 iOS 平臺使用，沒有Mac平臺。

RSS

• Feeds 2 - 監(jiān)控任何RSS。
• ReadKit - 書簽RSS管理客戶端。
• Reeder 3 - RSS 服務訂閱。[hot]
• Leaf - RSS 客戶端程序。[hot]
• Vienna - 開源的RSS/Atom 新聞閱讀客戶端。

其他

• OpenOffice - 是一套開源、跨平臺的辦公室軟件套件。
• Spillo - 功能強大，美觀、快速網(wǎng)絡書簽網(wǎng)頁閱讀。
• iChm - 讀chm文件的軟件。
• Chmox - 讀chm文件的軟件。
• CHM Reader - 讀chm文件的軟件。

五、圖像處理&設計

設計工具

• Photoshop - 最強大的位圖處理軟件。
• Pixelmator Pro - 強大的圖像處理軟件，可能替代PS的最佳選擇。
• Acorn - 一個像PS，全面的功能集的圖像編輯器。
• Affinity Designer - 矢量圖像設計工具，可能的Adobe Illustrator的替代。
• Affinity Photo - 光柵圖像設計工具，可以替代Adobe PS圖象處理軟件。
• Blender - 全功能可擴展的跨平臺3D內(nèi)容套件。開源
• Sketch Toolbox - 一個超級簡單的Sketch插件管理器。開源
• inklet - 將Mac上的觸摸板變成繪圖板。
• Monodraw - 一款文本圖像編輯器。
• SketchBook - 出眾的繪圖軟件。
• Tayasui Sketches - 專業(yè)的繪圖軟件。
• Nik Collection - 專業(yè)照片后期制作工具Google收購后免費。
• Paintbrush - 位圖圖像編輯器。開源
• Krita - 一個開源的位圖形編輯軟件，包含一個繪畫程式和照片編輯器。 開源
• Vectr - 免費圖形編輯器。這是一個簡單而強大的Web和桌面跨平臺工具，把你的設計變成現(xiàn)實。
• Principle - 使用它很容易設計動畫和交互式用戶界面。[star 5]
• MagicaVoxel - 輕量級的8位像素編輯和交互路徑追蹤渲染器。
• ScreenToLayers - 輕松導出桌面分層文件PSD文件。開源

原型設計

• Sketch - 混合矢量/位圖布局應用，特別適用于用戶界面，Web和移動設計。[薦]
• Axure RP 8 - 畫原型圖工具，團隊協(xié)作SVN方便好用。[薦]
• Justinmind - 功能更豐富團隊協(xié)作方便。
• MockFlow - 用于網(wǎng)頁設計和可用性測試的在線原型設計套件。
• Mockplus - 更快更簡單的原型設計工具。
• OmniGraffle - 可用來繪制圖表、流程圖、組織結(jié)構圖、思維導圖以及插圖或原型。
• Scapple - 一款實用的思維導圖軟件。
• Framer - 做交互原型的工具。![hot][hot Icon] [star 5]
• Balsamiq Mockups - 一個快速的網(wǎng)頁設計原型工具，幫助你更快、更聰明的工作。
• Marvel - 簡單設計，原型設計和協(xié)作。
• MindNode - 簡潔的風格與人性化的操作，繪制思維腦圖。[薦]
• iThoughtX - 進階用戶喜歡用它畫腦圖。[薦]。#

其它工具

• Notes - 簡潔的筆記應用。 開源
• TinyPNG4Mac - 圖片壓縮專用開源工具。開源
• Image2icon - 將你的圖片轉(zhuǎn)換成圖標。
• ImageAlpha - 壓縮PNG圖片，去掉無效的透明。開源
• ImageOptim - 壓縮圖片，刪除EXIF信息。開源
• Sip - 收集，整理和分享你的顏色拾色器。
• Frank DeLoupe - 支持 Retina 的屏幕拾色器。
• ColorSchemer - 專業(yè)的配色、調(diào)色軟件。
• IconKit - App圖標自動生成器。
• GIPHY Capture - 免費軟件的捕捉和分享圖片在桌面上。
• Iconjar - 圖標管理軟件，帶組織和搜索功能。[star 5]
• RightFont - 字體管理工具。[star 4]
• Solarized - 干凈清爽的顏色主題，支持iTerm、Intellij IDEA、Vim等。

圖片管理

• Eagle - 圖片管理必備工具。30天試用期。

Eagle 可以輕松管理大量圖片素材，滿足圖片素材「收藏、整理、查找」的各種場景，支持 Mac 與 Windows 系統(tǒng)。號稱圖片管理中的印象筆記。

六、視頻&音頻

視頻播放器

• IINA - 目前為止，Mac 上最好用對的視頻播放器，沒有之一。風格很接近系統(tǒng)原生應用。【薦】

音頻和視頻

• Kodi - 一款一流的免費開源媒體中心軟件，可用于播放視頻、音樂，查看圖片，玩游戲等.!開源。
• MPV - 一個免費、開源和跨平臺的媒體播放器。開源。
• VOX Player - 免費全能音樂播放器，擼碼之余聽聽歌是一種享受。[薦]。
• Radiant Player - Google Play音樂播放器。開源。
• Sonora - 一個很小的音樂播放器。開源。
• Audacity - 免費開源的編輯音頻的軟件。開源。
• Audio Hijack - 一個記錄任何應用程序的音頻，包括網(wǎng)絡電話Skype，網(wǎng)絡流從Safari，以及更多。
• Stringed 2 - 音頻編輯處理工具。
• Mixxx - 免費的DJ軟件，給你一切你需要的表演組合，名副其實的替代Traktor。開源。
• Cog - 一個免費的開源音頻播放器。![開源][OSS Icon]
• VLC - 開源的跨平臺多媒體播放器及框架，可播放大多數(shù)多媒體文件。開源。
• XLD - 解碼/解碼/轉(zhuǎn)換/播放各種“無損”音頻文件。開源。
• HandBrake - 高性能的視頻編碼和轉(zhuǎn)換工具，具有很好的圖形用戶界面。開源。
• MPlayerX - 媒體播放器。![開源][OSS Icon] 。
• Shotcut - 免費開源視頻編輯器。 開源。
• ScreenFlow - 屏幕和視頻編輯軟件。
• ArcTime - 跨平臺字幕制作軟件。
• Perian - 讓QuickTime播放所有常見格式的免費插件。開源 。[薦]

七、開發(fā)工具

版本控制分類

• Git - 版本控制工具，官網(wǎng)提供數(shù)十種GUI客戶端 for Mac。
• SVN - 版本控制工具。

版本控制-GUI

• SourceTree - 強大的Git跨平臺客戶端。[薦]
• Tower2 - 最強大的Git客戶端。[薦]
• GitHub Desktop - 使用GitHub的GUI應用。
• Gitbar - 開源，在你的菜單欄上顯示GitHub貢獻統(tǒng)計。
• Oh My Star - GitHub的star功能弱，比如分類，本地組織你的GitHub star!
• GitUp - 一個簡單功能強大的git客戶端，開源。
• Hub - 將GitHub接口和git命令進行包裝，開源。
• Versions - Mac上最好的SVN管理工具。
• Cornerstone - Mac上最佳的SVN管理工具。

版本控制系統(tǒng)

• GitLab - 一個用于倉庫管理系統(tǒng)的開源項目。
• GitHub GitHub代碼托管，項目管理，演示部署，瞧，您現(xiàn)在就訪問GitHub。
• Coding.net - 代碼托管，項目管理，WebIDE，演示部署，開啟云端開發(fā)模式，讓開發(fā)更簡單。
• phabricator phabricator支持Git、SVN、HG 基于 PHP + Mysql 的開放源代碼軟件開發(fā)平臺。
• Gogs - 一款極易搭建的自助 Git 服務Golang版本。
• Gerrit Gerrit 是一個免費、開放源代碼的代碼審查軟件，使用網(wǎng)頁界面。
• Gitblit Java版本Git代碼托管，項目管理。

FTP客戶端

• FileZilla - 跨平臺的FTP，F(xiàn)TPS和SFTP客戶端。[薦]
• Transmit - 一個FTP客戶端，支持FTP + SFTP + S3【薦】。
• Flow - 支持簡單的 FTP + SFTP 客戶端。
• Yummy FTP - 專業(yè)快速，可靠的FTP客戶端。
• Cyberduck - 免費FTP，SFTP，S3和WebDAV客戶端 & OpenStack Swift Client。

編輯器

• Visual Studio Code - 微軟推出的免費/開源編輯器，TypeScript支持杠杠的。薦
• Sublime Text - 一個比較簡潔大方帶插件管理系統(tǒng)的流行編輯器，Sublime常用插件。[薦]
• Atom - GitHub推出的開源編輯器。
• Brackets - Adobe推出的Brackets免費/開源編輯器。開源
• Emacs - Emacs是基于控制臺的編輯器和高度可定制的。
• LightTable - 下一代代碼編輯器。開源
• TextMate - 文本編輯器軟件，與BBedit一起并稱蘋果機上的emacs和vim，這是以前。
• BBEdit - 強大的文件編輯器，用于編輯文件，文本文件及程序源代碼。
• Coda2 - 編寫Web應用長得漂亮的編輯器。
• Vim - Vim古老命令行中使用的編輯器。Vundle.vim - Vim插件管理工具。開源vim-plug - 一個簡約的vim插件管理器。開源WebVim - 傾向于開發(fā)JavaScript和Web的vim。vim-web - 一個前端開發(fā)工程師的vim。開源Neovim - 提高Vim可擴張靈活性。開源Spacevim - 模仿Spacemacs的使用方式。Spf13 - 一套全方位的配置項目。
• Vimr - Vim客戶端，升級Vim體驗。開源
• HBuilder - HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。
• Tincta - 一個免費的文本編輯器。
• IntelliJ IDEA - 一款Java開發(fā)集成環(huán)境。(學生免費)[薦]
• Webstorm - 是jetbrains公司旗下一款JavaScript開發(fā)工具。學生免費，點擊這里 查看更多。一些很好的插件NodeJS - 集成Node.js，你肯定需要它，很多功能需要它。EditorConfig - 幫助開發(fā)者在不同的編輯器和IDE之間定義和維護一致的代碼風格。Material Theme UI - Google為React開發(fā)的主題。
• Deco IDE - React Native IDE 支持控件拖拽界面實時變更。開源
• Xamarin Studio - 免費的跨平臺的C# IDE。支持iOS、Android和.net開發(fā)。開源 ![Freeware][Freeware Icon]
• NetBeans IDE - 免費、開源的IDE，主要用于java開發(fā)，可支持多種語言和框架。開源 ![Freeware][Freeware Icon]
• Eclipse - 流行的開源IDE，主要用于Java，但為多種語言和平臺的插件支持。

開發(fā)者工具

• WeFlow - 一個基于 tmt-workflow 前端工作流的開發(fā)工具。開源。
• Koala - 預處理器語言圖形編譯工具，支持Less、Sass、CoffeeScript、Compass framework 的即時編譯。開源。
• CodeKit - 自動編譯Less、Sass、Stylus、CoffeeScript、Jade & Haml等文件。
• Hosts.prefpane - 編輯 hosts 文件的工具。開源。
• iHosts - 唯一上架 Mac App Store 的 /etc/hosts 編輯神器。
• SwitchHosts - 一個管理、切換多個 hosts 方案的工具。開源 。
• Gas Mask - 編輯 hosts 文件的工具，更簡單方便。開源。
• Kaleidoscope - 一款很強大的文本文件和圖像比較工具，同時和 git、svn 等版本控制工具能夠完美的結(jié)合。
• Fanvas - 把swf轉(zhuǎn)為HTML5 canvas動畫的系統(tǒng)。開源。
• EnvPane - 圖形終端查看環(huán)境變量的應用工具。開源。
• Dash - 強大到你無法想象的API離線文檔軟件。[薦]。
• Dlite - 簡單的使用Docker的一個軟件。開源
• SnippetsLab - 管理和組織你的代碼片段。
• StarUML - 強大的軟件建模軟件。
• Vagrant Manager - 管理你本地服務。開源。
• zeplin - 前端與設計協(xié)同工作專用工具。
• Go2Shell - 從Finder打開命令行。
• MJML - 簡化設計回應電子郵件的方式。開源。
• TeXstudio - 集成創(chuàng)建LaTeX文檔的寫作環(huán)境。 開源。
• Vagrant - 用來構建虛擬開發(fā)環(huán)境的工具。 開源。[薦]

代碼比對

• DiffMerge - 可視化的文件比較（也可進行目錄比較）與合并工具。
• Beyond Compare - 對比兩個文件夾或者文件，并將差異以顏色標示。無限期試用。license連接：#
• Kaleidoscope - Kaleidoscope 是一款很強大的文件和圖像比較工具，支持任何文本文件和 jpeg、tiff、png、psd 等格式的圖像文件，同時和 git、svn 等版本控制工具能夠完美的結(jié)合。[薦]。

正則編輯器

• Patterns - 正則表達式編輯器。
• Reginald - 正則表達式測試應用程序，使用 RegexKitLite。開源 。
• Regex - 感覺是用過最漂亮的正則表達式測試工具。
• Reggy - 正則表達式編輯器。開源。
• RegExRX - 正則表達式的開發(fā)工具。

數(shù)據(jù)庫

• Sequel Pro - 一個MySQL數(shù)據(jù)庫管理軟件。開源
• MySQL Workbench - MySQL數(shù)據(jù)庫官方管理軟件。
• Postico - 現(xiàn)代PostgreSQL客戶端，漂亮功能多。
• ElectroCRUD - MySQL數(shù)據(jù)庫CRUD應用程序。開源
• Base 2 - 一個用于管理SQLite數(shù)據(jù)庫的軟件。
• Postgres.app - Mac上最簡單的方法的使用PostgreSQL關系型數(shù)據(jù)庫管理系統(tǒng)。!開源
• PSequel - PostgreSQL數(shù)據(jù)庫GUI軟件。
• Robomongo - 基于Shell的MongoDB圖形化客戶端管理軟件。開源。
• MongoBooster - MongoDB圖形化管理軟件，內(nèi)嵌MongoShell，ES6語法，流暢查詢及智能感知。
• Mongo Management Studio - MongoDB圖形化客戶端管理軟件。
• MongoChef - MongoDB圖形化客戶端管理軟件。
• Chrome MySQL Admin - 一個Chrome插件，是MySQL開發(fā)的跨平臺、可視化數(shù)據(jù)庫工具。開源。
• JackDB - 直接的SQL訪問你所有的數(shù)據(jù)，無論在哪里。![開源][OSS Icon] ![Freeware][Freeware Icon]
• medis - 漂亮的Redis管理軟件。開源。
• RedisDesktopManager - Redis跨平臺的GUI管理工具。開源 。
• MDB Explorer - Mac上查看編輯Access數(shù)據(jù)庫的工具。
• Datum - SQLite - Sqlite3數(shù)據(jù)庫管理軟件。
• mongoDB.app - 在Mac 上最簡單的使用MongoDB 開源。
• DataGrip - 是jetbrains公司旗下一款數(shù)據(jù)庫管理工具。點擊這里 學生免費。
• Tableau Public - 數(shù)據(jù)可視化工具。

測試工具

• Charles - 一個代理工具，允許你查看所有的HTTP和HTTPS流量。
• Insomnia 3.0 - 漂亮的HTTP請求測試工具。
• Cocoa Rest Client - 比Postman看起來漂亮的客戶端，測試HTTP/REST endpoints。開源
• Paw - 先進的 HTTP 客戶端。
• Cellist - HTTP調(diào)試客戶端。
• Integrity - 輕松找到無效鏈接。
• Postman - Postman 幫助我們快速測試API。[薦]

軟件打包工具

• Finicky - Web應用程序轉(zhuǎn)化為蘋果的應用程序。開源
• nw.js - 使用HTML和JavaScript來制作桌面應用。開源
• Electron - 前身是 AtomShell，使用 JS、HTML 和CSS 構建跨平臺的桌面應用程序。開源
• react-desktop - 為 macOS Sierra帶來React UI組件。開源
• React Native Desktop for Mac - 用 React Native 技術構建 OS X 下的桌面應用程序。開源
• React Native Desktop for Ubuntu - 用 React Native 技術構建 Ubuntu 下的桌面應用程序。開源
• AppJS - 使用 JS、HTML 和CSS 構建跨平臺的桌面應用程序。開源
• HEX - 使用 JS、HTML 和CSS 構建跨平臺的桌面應用程序，有道出品。開源
• AlloyDesktop - 同上，騰訊出品，給個差評。開源
• MacGap - 桌面WebKit打包HTML、CSS、JS應用。開源
• ionic - 一個用來開發(fā)混合手機應用的，開源的，免費的代碼庫。 開源

命令行工具/終端/SSH 遠程連接

• iTerm2 - 免費的終端工具，直接替代自帶的Terminal，有非常多驚人的特性。開源 。[薦]
• SecureCRT - 一款支持SSH、Telnet等多種協(xié)議的終端仿真程序。[薦]
• Royal TSX - 全平臺終端軟件。#。[薦]
• cool-retro-term - 懷舊的命令行終端。開源。
• Oh my zsh - 擁有大量的有用的功能，助手，插件，主題，等特性的命令行工具插件。開源。
• Glances - 在命令行中查看你系統(tǒng)運行狀態(tài)的工具。開源。
• Cakebrew - Homebrew 的客戶端軟件。擺脫命令方便安裝、查看、卸載軟件。開源。
• ndm - 查看本地NPM安裝的包客戶端軟件。擺脫命令方便安裝、查看、卸載軟件。開源 。
• Black Screen - 來自 21 世紀的強大終端。開源。
• Fish Shell - 智能且用戶友好的命令行終端。
• oh-my-fish - 和Oh my zsh相似，建立在Fish Shell框架上。
• bash-it - 一個社區(qū)的bash的框架。
• color-retro-term - 一款復古風格的終端，非常酷炫。
• HyperTerm - 一款基于Node開發(fā)的終端軟件，逼格很高。開源。
• itunes-remote - 通過終端控制您的iTunes。開源。
• mycli - 為MySQL命令行客戶端，提供語法高亮和提示功能的工具！ 開源。
• LNav - 日志文件閱讀器. 開源。
• tmux 終端登錄遠程主機的命令行工具。開源
• mas - 一個簡單的命令行界面的蘋果應用商店。 開源。
• ShellCraft - 強大的SSH/Telnet客戶端。

|DEMO8 大使

文檔誤刪恢復不回來了?文檔版本太多不知道哪個是需要的了?是時候換在線文檔平臺來解救自己了。只需一個賬號，電腦上、郵件中、U盤里凌亂的文檔都會成為歷史。那么在哪個使用哪個平臺的工具呢?不會科學上網(wǎng)Google Docs就別想了，今天小編就來介紹幾個在DEMO8發(fā)布的在線文檔平臺。

看云：云端Markdown文檔+書籍

「看云」是一個文檔創(chuàng)作、分發(fā)和托管服務平臺，致力于提供良好的在線文檔創(chuàng)作和閱讀體驗，讓企業(yè)和個人可以更方便、更輕松地管理及分享自己的文檔。看云包括兩部分，即Markdown+UBB編輯器和看云廣場。

看云使用了獨立開發(fā)的Markdown編輯器，界面布局在保證不失功能性的前提下進行了極簡設計。如上圖，編輯器的編輯區(qū)和預覽區(qū)相對應，這種設計便于熟練掌握Markdown語言的用戶寫作時判斷語法使用是否正確。對于不會Markdown語言的用戶，編輯器提供了使用方便的工具欄。工具欄包含了用戶常用到的所有編輯功能，可以說是按鈕化的Markdown語言。

看云在閱讀體驗上下了不少功夫，其具有響應式設計的閱讀方式，支持全屏閱讀和鍵盤翻頁。如上圖，看云廣場為用戶提供了用看云編輯器制作的計算機技術類書籍，書籍中的代碼可一鍵復制，同時也支持下載為PDF/CHM，便于在其他設備上離線閱讀。

DocQ ：云端Office+文庫

「DocQ」是武漢快云網(wǎng)絡技術有限公司開發(fā)的一款在線的辦公協(xié)作軟件，之所以稱之為軟件是因為除了網(wǎng)頁端，DocQ還有桌面端軟件。網(wǎng)頁端DocQ完美支持 HTML5，需用支持 HTML5 的瀏覽器訪問。DocQ 支持在線編輯 Word，Excel，PowerPoint和PDF。

在DocQ平臺上，需要修改的文檔可以隨時隨地查看、更新和保存在云端。其優(yōu)秀的設計在于用戶進行團隊協(xié)作時無需發(fā)送文件，將點擊分享會生成的文檔鏈接發(fā)給團隊成員即可。DocQ做了充足的設計來保證文檔的安全。一方面，系統(tǒng)會自動記錄用戶的每次修改，誤刪文檔可隨時還原。另一方面，對于重要的文檔在分享時還能添加密碼，保證重要信息不會丟失。

工作太忙怎能從零開始！DocQ文庫為用戶準備了大量文檔模板，用戶無需從頭寫起，套用模板改個名字就能完成任務。DocQ文庫和百度文庫又有什么區(qū)別呢?在線的優(yōu)勢在這就十分突出了。DocQ文庫的文檔拿來即用，而百度文庫的文檔則需要下載下來。

一起寫：云端word、表單

「一起寫」提供了簡單而有效的編輯工具，讓用戶可以輕松地創(chuàng)建、編輯文檔。一起寫的目標是讓用戶的文檔規(guī)整和有序。

在一起寫平臺，所有文檔被有序整理，無論在移動端還是網(wǎng)頁端都能隨時隨地查看編輯文檔。通過搜索功能，用戶可在存儲的海量文件里面輕松找到所需要的文檔。在多人協(xié)作方面，一起寫支持多用戶在同一個視圖內(nèi)同時更改和評論同一份文檔，這種協(xié)作方式對團隊效率的提升是可預見的。平臺上文檔版本太多會搞錯?錯！一起寫的的文檔永遠只有一個版本，通過時光機器可以恢復到任意歷史版本。

一起寫的表單具有多種表單組成元件，可用來制作各種樣式的調(diào)查問卷。如上圖，用戶可按照自己的需求增減組件來設計問卷，而且調(diào)查對象的人數(shù)不會受限制。表單結(jié)合微信平臺可通過好友分享快速開展意見調(diào)查，收集數(shù)據(jù)更加簡單效率。在表單編輯中用戶可以查看實時的收集數(shù)據(jù)和用戶反饋。

互聯(lián)網(wǎng)的出現(xiàn)給社會帶來了太多的變革，10年前的你肯定不會相信有這么一天吃飯買東西不用外出，坐在家里從網(wǎng)上下單就行……不再使用office軟件，所有的文檔都會在網(wǎng)上編輯。歡迎移步DEMO8觀看「在線文檔」專輯，我們還有更多專輯在預見著工作方式的變革，數(shù)據(jù)分析工具專輯、團隊協(xié)作/聊天工具專輯……

直升梯：「在線文檔」專輯

發(fā)現(xiàn)更多情懷新品，移步DEMO8.com????歡迎關注DEMO8微信訂閱號(LetsDemo8)或點這里下載APP