值得網頁設計師&前端收藏的實用工具列表

原文地址：http://www.uisdc.com/tool-list-web-developers#

 

不管你是經驗豐富的前端，仍是剛剛起步的設計師，這些爲真正的網頁設計師和開發者所準備的實用工具、在線服務、資源和代碼片斷，都是爲你而生的，合理的運用可以讓你的網頁設計與開發事半功倍。

此次總結的工具總計有40款，它們基本上能夠分爲8個大類

·靈感與閱讀：這類素材一般是設計案例和酷站，它們啓發靈感，給你經驗 ·網絡社區：聚集Web開發者和設計師的優秀社區 ·網頁測速工具：一些最好的網站測速工具 ·溝通和項目管理：適宜進行溝通和管理的工具，包括網頁端和移動端 ·代碼共享和編輯器：最好的Markdown編輯器，代碼分享工具 ·CSS/HTML：可以讓你的網頁更漂亮的工具，幫你建立更清晰的CSS代碼 ·框架：最流行最好用的網頁開發框架 ·Git客戶端：好用不解釋

接下來，Enjoy！

靈感與閱讀

Web Development Reading List

這是一個純手工精心挑選的Web開發相關資源的列表，而你須要作的就是訂閱它，關注它，使用它。

WEB TOOLS WEEKLY

Web Tools Weekly 是一個專一與前端開發和網頁設計工具的新聞簡報。

Web Operations Weekly

一樣的，Web Operations Weekly 也是一個新聞簡報，每週更新，內容主要關於網絡運營、網絡基礎設施、網絡性能和工具等。

Freshbrewed.co

這個網站聚集了最新的文章、技術和最值得閱讀和收藏的網頁設計開發最佳實踐。

網絡社區

Front-end Front

前端開發者能夠在 Front-end Front 提問、分享有趣的內容、展現本身的開發項目。

Refind

Refind 替你收納網絡上最好的網站與連接，你天天均可以在這裏看到最好的設計項目，獲取靈感。

LinkedIn PHP Developer Group

若是你精通PHP、Mysql、Drupal、Joomla、Zend、Cake、MVC，那麼這個Linkedin社區很是適合你。

網頁測速工具

Website Speed Test

這是一款頗爲實用的網站測速工具，其中還包含了頁面預覽功能。

Google Chrome DevTools

Google Chrome DevTools 是內至於谷歌瀏覽器的網頁製做和調試工具，你能夠用它來遍歷、調試和監測。

Pingdom

Pingdom 的使用方法很簡單，輸入網站URL就能夠測試它的加載時間。

Google PageSpeed Insights

這款測速工具能夠參考最佳實踐來分析和優化你的網站。

WebPageTest

藉助普通瀏覽器你就可使用WebPage Test 針對全球範圍內任何網站進行免費的鏈接測速。

GTmetrix

GTmetrix 是一個免費的網頁鏈接測速工具，藉助PageSpeed 和 YSlow ，GTmetrix 能夠幫你針對頁面進行評分。

溝通和項目管理

Slack

Slack 是一款在線的集成團隊溝通工具，它能夠經過實時聊天、協同、歸檔來管理你的團隊、資源和項目。

Glip

Glip 是一款實時對話/視頻溝通工具，可進行任務管理、文件分享、內容搜索的多功能應用。

Jira

Jira 是一款爲敏捷軟件開發團隊提供的靈活的項目管理工具。

Trello

Trello 是一款跨平臺的任務分配和項目管理工具，不管是團隊協同仍是製做任務清單都手到擒來。

Asana

Asana 是Facebook旗下的團隊協同、任務分配和項目管理工具，使用起來便捷，上手也很快。

代碼共享和編輯器

Codeshare

這是一個開發者免費分享代碼片斷的工具。

Dabblet

這是一個交互式的CSS測試和代碼共享工具，它還支持保存到Github，以及許多便利的編輯功能。

Beyond Compare

經過簡單但強大的命令來幫你對比文件和文件夾，幫你專一於值得關注的差別。

StackEdit

StackEdit 是一款基於PageDown的全功能開源MarkDown編輯器，Stack Overflow 和其餘的Stack exchange 網站經常會用到它的Markdown 庫。

Mou

這是MacOSX平臺上最好的Markdown編輯器之一，實時預覽、同步滾動、自動保存、自動皮拍、自定義主題等多種強大而實用的功能被歸入其中。最重要的是，它對於中文的支持至關不錯。

MarkdownPad

MarkdownPad 是Windows 平臺下的一款全功能 Markdown編輯器。

Sublime Text

Sublime Text 是一款高度可定製的、界面漂亮的代碼編輯器，功能非同凡響，性能也至關不錯，愈來愈多的開發者和設計師開始着迷於Sublime Text。

Dillinger

Dillinger 是一款基於雲端、支持移動端、可離線存儲的基於AngularJS和HTML5的Markdown編輯器。

Texts

Texts 是一款符文布編輯器，主要存在於Windows 和iOS平臺。

ByWord

ByWord 一樣也是一款Markdown編輯器，它旨在提供更加流暢有趣的編輯體驗。

CSS/HTML

Sass

Sass 是目前最成熟、最穩定，同時保持功能強大和專業性的CSS擴展語言。

Stylus

若是已經有Node.JS，安裝Stylus 是一件很是輕鬆的事情，它爲Node.js提供強大、功能豐富、性能優異的CSS語言支持。

Less

Less 是一款CSS的與處理器，它是CSS語言的延伸，強化了功能，提供了許多額外的支持。

框架

Bootstrap

Bootstrap 是最流行的HTML/CSS/JS 框架，能夠幫你建立響應式、移動端優先的頁面和項目。

Semantic UI

Semantic UI 是一款開發框架，讓你可使用HTML建立漂亮、響應式的佈局。

Foundation

Foundation 是一系列響應式前端框架，能夠幫你更加輕鬆地設計漂亮的響應式網頁、APP頁面和炫酷的電子郵件。

Uikit

Uikit 是一款輕量級、模塊化的前端框架，旨在幫助開發者快速設計強大的網頁界面。

Git客戶端

SourceTree

SourceTree 是一款覆蓋Windows和Mac兩大平臺的免費的Git與Mercurial客戶端。你能夠藉助SourceTree 管理全部的本地文件、託管和儲存庫。

Tower 2

Git Tower 是Mac平臺上最優秀的Git客戶端，將Git的強大功能和易用性結合到一塊兒是Mac用戶選擇Git Tower的主要理由。

Gogs

Gogs 讓幾乎能夠在任何Go能夠運行的平臺上進行編譯：Windows、Mac、Linux、ARM，等等。Gogs 對於性能的要求並不高，即便是在樹莓派上均可以流暢運行。

GitKraken

GitKraken 是一款漂亮直觀的Git客戶端，它能夠在Windows、Mac和Linux上運行。

GitLab

GitLab 能夠幫你託管我的或者公共的免費軟件開發項目。

【技多不壓身的設計師纔有高薪資！】

1. 平面設計：《超讚！設計師徹底自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成爲優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！爲設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》