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

發表於2016-05-29

無論你是經驗豐富的前端,還是剛剛起步的設計師,這些為真正的網頁設計師和開發者所準備的實用工具、線上服務、資源和程式碼片段,都是為你而生的,合理的運用能夠讓你的網頁設計與開發事半功倍。

這次總結的工具總計有40款,它們基本上可以分為8個大類

·靈感與閱讀:這類素材通常是設計案例和酷站,它們啟發靈感,給你經驗
·網路社群:彙集Web開發者和設計師的優秀社群
·網頁測速工具:一些最好的網站測速工具
·溝通和專案管理:適宜進行溝通和管理的工具,包括網頁端和移動端
·程式碼共享和編輯器:最好的Markdown編輯器,程式碼分享工具
·CSS/HTML:能夠讓你的網頁更漂亮的工具,幫你建立更清晰的CSS程式碼
·框架:最流行最好用的網頁開發框架
·Git客戶端:好用不解釋

接下來,Enjoy!

靈感與閱讀

Web Development Reading List

Web-Development-Reading-List

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

WEB TOOLS WEEKLY

WEB-TOOLS-WEEKLY

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

Web Operations Weekly

Web-Operations-Weekly

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

Freshbrewed.co

freshbrewed-co

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

網路社群

Front-end Front

Front-end-Front

前端開發者可以在 Front-end Front 提問、分享有趣的內容、展示自己的開發專案。

Refind

Refind

Refind 替你收納網路上最好的網站與連結,你每天都可以在這裡看到最好的設計專案,獲取靈感。

LinkedIn PHP Developer Group

LinkedIn-PHP-Developer-Group

如果你精通PHP、Mysql、Drupal、Joomla、Zend、Cake、MVC,那麼這個Linkedin社群非常適合你。

網頁測速工具

Website Speed Test

Website-Speed-Test

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

Google Chrome DevTools

Google-Chrome-DevTools

Google Chrome DevTools 是內至於谷歌瀏覽器的網頁製作和除錯工具,你可以用它來遍歷、除錯和監測。

Pingdom

Pingdom

Pingdom 的使用方法很簡單,輸入網站URL就可以測試它的載入時間。

Google PageSpeed Insights

Google-PageSpeed-Insights

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

WebPageTest

WebPageTest

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

GTmetrix

GTmetrix

GTmetrix 是一個免費的網頁連線測速工具,藉助PageSpeed 和 YSlow ,GTmetrix 可以幫你針對頁面進行評分。

溝通和專案管理

Slack

Slack (1)

Slack 是一款線上的整合團隊溝通工具,它可以通過實時聊天、協同、歸檔來管理你的團隊、資源和專案。

Glip

Glip

Glip 是一款實時對話/視訊溝通工具,可進行任務管理、檔案分享、內容搜尋的多功能應用。

Jira

Jira

Jira 是一款為敏捷軟體開發團隊提供的靈活的專案管理工具。

Trello

Trello

Trello 是一款跨平臺的任務分配和專案管理工具,無論是團隊協同還是製作任務清單都手到擒來。

Asana

Asana

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

程式碼共享和編輯器

Codeshare

Codeshare

這是一個開發者免費分享程式碼片段的工具。

Dabblet

Dabblet

這是一個互動式的CSS測試和程式碼共享工具,它還支援儲存到Github,以及許多便利的編輯功能。

Beyond Compare

Beyond-Compare

通過簡單但強大的命令來幫你對比檔案和資料夾,幫你專注於值得關注的差異。

StackEdit

StackEdit

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

Mou

Mou

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

MarkdownPad

MarkdownPad

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

Sublime Text

Sublime-Text

Sublime Text 是一款高度可定製的、介面漂亮的程式碼編輯器,功能非同凡響,效能也相當不錯,越來越多的開發者和設計師開始著迷於Sublime Text。

Dillinger

Dillinger

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

Texts

Texts

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

ByWord

ByWord

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

CSS/HTML

Sass

Sass

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

Stylus

Stylus

如果已經有Node.JS,安裝Stylus 是一件非常輕鬆的事情,它為Node.js提供強大、功能豐富、效能優異的CSS語言支援。

Less

Less

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

框架

Bootstrap

Bootstrap (1)

Bootstrap 是最流行的HTML/CSS/JS 框架,可以幫你建立響應式、移動端優先的頁面和專案。

Semantic UI

Semantic-UI

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

Foundation

Foundation

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

Uikit

Uikit

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

Git客戶端

SourceTree

SourceTree

SourceTree 是一款覆蓋Windows和Mac兩大平臺的免費的Git與Mercurial客戶端。你可以藉助SourceTree 管理所有的本地檔案、託管和儲存庫。

Tower 2

Tower-2

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

Gogs

Gogs

Gogs 讓幾乎可以在任何Go可以執行的平臺上進行編譯:Windows、Mac、Linux、ARM,等等。Gogs 對於效能的要求並不高,即使是在樹莓派上都可以流暢執行。

GitKraken

GitKraken

GitKraken 是一款漂亮直觀的Git客戶端,它可以在Windows、Mac和Linux上執行。

GitLab

GitLab

GitLab 可以幫你託管個人或者公共的免費軟體開發專案。

相關文章