我的Web工具箱&資源整理（1）

好久就想把使用的工具及收藏的資源整理一番；一是爲了傳達博客社區的理念：資源共享，而是方便本身及團隊快速獲取。

學習資源：

首推兩個入門級在線參考網站。

       1 w3c school.

       2 Runoob.com(菜鳥教程）。

HTML5：標記語言，是HTML和XHTML的最新版本。

            HTML5 Outliner HTML5在線生成。

 

模板：

      jade:Jade 是一個高性能的模板引擎，它深受 Haml 影響，它是用 JavaScript 實現的，而且能夠供 Node 使用。

      jade API:運行在Nodejs上的模板工具。

    

CSS： CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。CSS3是CSS的最新版本。

•    CSS3：
•    Bootstrap CSS樣式。

 

CSS 預處理器：

              Less:  Lesscss是一種動態樣式語言,屬於CSS預處理語言的一種,它使用相似CSS的語法,爲CSS的賦予了動態語言的特性,如變量、繼承、運算、函數等,更方便CSS的編寫和維護。

•            Less-css中文網:LESSCSS能夠在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。
•            Less:在線編輯器：LESS2CSS

             Sass:  Sass是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

 

JavaScript ：JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言.

•       文檔(document):英文文檔。
•       Javascript祕密花園: 這篇文章的做者是兩位 Stack Overflow 用戶, 伊沃·韋特澤爾 Ivo Wetzel（寫做） 和 張易江 Zhang Yi Jiang（設計）。
•       Javascript小插件下載。
•       JavaScript與HTML代碼美化平臺：JSbeautifier

Javascript庫：

• jQuery：快y速，小巧，功能豐富的JavaScript庫。

  • jQuery: 最火的前端開發框架。

    •         C在線工具： jQuery插件在線演示。
    •      　  jQuery++:jQuery插件。
    •      　 jQuery UI:jQuery ui庫。
    •          jQuery Mobile:支持移動端的開發框架。
    •      　  jQuery API ：jQuery　API中文文檔。
    • 　　 　jQuery在線手冊：
    • 　　　 jQuery視頻教程：jQuery入門級教程。
    •          基於jQuery，很是好用的日期選擇插件 ：Pickadate.js
• zepto :Zepto 是一個輕量級的針對現代高級瀏覽器的 JavaScript 庫， 它與jquery 有着相似的api。 若是你會用 jquery，那麼你也會用 zepto。
• Three.js:
• Ember.js:
• BackBoneJS：爲複雜Javascript應用程序提供模型(models)、集合(collections)、視圖(views)的結構。
• D3.js：D3是基於數據的文檔操做javascript庫,D3可以把數據和HTML、SVG、CSS結合起來,創造出可交互的數據圖表。
• React:：Facebook的Javascript庫爲構建用戶界面而開發。
• jQuery UI：jQuery UI 是以 jQuery 爲基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。
• jQuery Mobile：基於HTML5用於建立移動 web 應用程序的框架。
• Underscore.js：JavaScript實用庫,提供了相似Prototype.js的一些功能,可是沒有繼承任何JavaScript內置對象。
• Moment.js：一個 JavaScript 日期處理類庫，用於解析、檢驗、操做、以及顯示日期。
• Lodash：一個 JavaScript 實用工具庫,提供一致性,模塊化,性能和配件等功能。
• Vue：Vue.js（讀音 /vjuː/, 相似於 view）是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。

 

Angularjs:

 

Node.js:  Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。

•           Nodejs入門 ：菜鳥教程。
•           Express:
•           Express API :Express 4.x 中文API。

SQL：  結構化查詢語言(Structured Query Language)簡稱SQL，是一種特殊目的的編程語言，是一種數據庫查詢和程序設計語言，用於存取數據以及查詢、更新和管理關係數據庫系統；同時也是數據庫腳本文件的擴展名。

 

前端框架：通俗的前端由HTML，CSS，JavasScript等構成。固然爲了適應Web開發日益增加的需求，應運而生許多獨立的前端框架，例如Bootstrap。一個優秀的框架能夠爲前端開發人員在開發過程當中增益，減少開發壓力。

• Bootstrap:    Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷，Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。

  •    Bootstrap中文文檔：Bootstrap 讓前端開發更快速、簡單。全部開發者都能快速上手、全部設備均可以適配、全部項目都適用。
  •    在線編輯器：

                            1 ：Bootply ：被稱爲是Bootstrap的活動平臺。它不可是一個Bootstrap的編輯器和生成器，同時也擁有很是普遍的代碼庫。該編輯器可讓你拖拽Bootstrap組件並能夠編輯你本身的代碼。

                           2：LayoutIt： 是一個簡單可是高效的Bootstrap界面生成器，它可讓你的前端開發更簡單。你能夠從零開始或者使用基本的模板開始。

                           3：Brix ：是一個強大並且時尚的在線Bootstrap生成器，它可以幫助你快速的製做響應式界面和網站。

                          4：Divshot： 不只僅是一款可視化的Bootstrap編輯器，同時也爲開發者提供一個應用級託管環境。

• Foundation： 迄今爲止最好的響應式前端框架，更快、更輕、更多功能、更靈活、更強大！
• Semantic UI：Semantic UI 是一款語義化設計的前端開源框架,其功能強大,使用簡單,爲設計師和開發師提供可複用的完美設計方案。
• uikit：UIKit使用的變量基於LESS,具備體積小、模塊化、可輕鬆地自定義主題及響應式界面。

 

數據庫：

• MySQL：MySQL是一種關聯數據庫管理系統，關聯數據庫將數據保存在不一樣的表中，而不是將全部數據放在一個大倉庫內，這樣就增長了速度並提升了靈活性。
• MongoDB:MongoDB 教程 MongoDB 是一個基於分佈式文件存儲的數據庫。由 C++ 語言編寫。旨在爲 WEB 應用提供可擴展的高性能數據存儲解決方案。

 

素材下載：

•  17素材：
•  CSS 樣式模板。

 

 Web APP:

      Ionic(ionicframework):一款接近原生的Html5移動App開發框架 ， 基於angularjs與Coedova實現APP開發。

    Ionic     (官網）:IONIC 是目前最有潛力的一款 HTML5 手機應用開發框架。經過 SASS 構建應用程序，它提供了不少 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來加強應用。提供數據的雙向綁定，使用它成爲 Web 和移動開發者的共同選擇。Ionic是一個專一於用WEB開發技術，基於HTML5建立相似於手機平臺原生應用的一個開發框架。Ionic框架的目的是從 web的角度開發手機應用，基於PhoneGap的編譯平臺，能夠實現編譯成各個平臺的應用程序。

    

任務批處理工具/包管理器：

任務批量處理工具可將你的工做流程全自動化.例如你能夠建立一個任務，使用JavaScript語言編寫的工具來進行自動化的處理。 而後打包，這樣會大大提升開發效率。 包管理器它能跟蹤全部已安裝的軟件、自動化進行安裝和刪除應用程序、以及確保全部軟件都保持更新以得到最新的加強功能和錯誤修復。

• Grunt:    Grunt是基於Node.js的項目構建工具。它能夠自動運行你所設定的任務。
• Glup:     Gulp.js 是基於 Node.js 構建的一個自動化構建工具,開發者可使用它在項目開發過程當中自動執行常見任務。
• npm:     NPM（node package manager），一般稱爲node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索、發佈等。
• Bower:   Bower是一個客戶端技術的軟件包管理器，它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。
• Webpack:   Webpack一個前端資源加載/打包工具，只須要相對簡單的配置就能夠提供前端工程化須要的各類功能，而且若是有須要它還能夠被整合到其餘好比 Grunt / Gulp 的工做流。

 

開發工具：

• Atom：Atom 更爲先進的文本代碼編輯器 - 由 Github 打造的下一代編程開發利器在代碼編輯器、文本編輯器領域,有着很多的「神器」級的產品。
• Sublime Text：Sublime Text 是一個代碼編輯器（Sublime Text 2和3是收費軟件，但能夠無限期試用），也是HTML和散文先進的文本編輯器。
• Notepad++：Notepad++是 Windows操做系統下的一套文本編輯器(軟件版權許可證: GPL)，有完整的中文化接口及支持多國語言編寫的功能。
• Visual Studio Code ：微軟推出，一個運行於 Mac OS X、Windows和 Linux 之上的，針對於編寫現代 Web 和雲應用的跨平臺源代碼編輯器。
• TextMate：TextMate是Mac下的著名的文本編輯器軟件，與BBedit一塊兒並稱蘋果機上的emacs和vim。
• Coda 2:  OS X下快速，簡潔，功能強大的編輯器【須要付費】.
• WebStorm：jetbrains公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽爲「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。
• Vim：Vim是一個相似於Vi的著名的功能強大、高度可定製的文本編輯器，在Vi的基礎上改進和增長了不少特性。
• Brackets：Brackets 是一個免費、開源且跨平臺的 HTML/CSS/JavaScript 前端 WEB 集成開發環境 (IDE工具)。
• Emacs：著名的集成開發環境和文本編輯器。Emacs被公認爲是最受專業程序員喜好的代碼編輯器之一。

 

icon圖標：  在線透明icon圖標生成工具 ICO。

• Font Awesome：Font Awesome爲您提供可縮放的矢量圖標,您可使用CSS所提供的全部特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。
• IconMonster：免費，高質量, 龐大且資源不斷增加的簡潔的icon圖標庫。
• IconFinder：Iconfinder提供美麗的圖標,服務數以百萬計的設計師,開發商和其餘有創意的專業人員。
• Fontello：一個目測有200+個圖標（數量還在增長）的 Web-font 圖標市場，對於廣大設計師、前端開發者來講是很棒的資源。
• 阿里媽媽矢量圖標庫 ：Iconfont.cn是由阿里巴巴UX部門推出的矢量圖標管理網站，也是國內首家推廣Webfont形式圖標的平臺。網站涵蓋了1000多個經常使用圖標並還在持續更新中
• iconpng： 圖標下載。

 

調試器：

•   firefox,
•   Chrome調試器，
•   nodejs運行環境。

 

代碼託管：

         github

 

版本控制：

•  git  Git是一款免費、開源的分佈式版本控制系統，用於敏捷高效地處理任何或小或大的項目。Git是一個開源的分佈式版本控制系統，能夠有效、高速的處理從很小到很是大的項目版本管。Git 是 Linus Torvalds 爲了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟件。

• GitHub Client：有助於無縫鏈接GitHub和GitHub的企業的項目。
• Coding：Coding 的代碼託管功能除了基本的 Git 倉庫之外，還有保護分支，分屏對比， Code Review 等高級功能。而且整合了 Pages 服務，質量管理，演示平臺等開發工具，提高研發效率。

 

本地開發環境搭建：

根據您運行的是什麼操做系統和計算機配置，有時候進行測試的時候就有可能須要搭建一個快速的本地開發環境。有不少將Apache，Nginx，MySQL和phpMyAdmin進行打包一體化的軟件。這些軟件非常方便咱們來進行本地測試。

• XAMPP：XAMPP（Apache+MySQL+PHP+PERL）是一個功能強大的建站集成軟件包。
• MAMP PRO：MAMP Pro for mac是Mac OS平臺搭建本地服務器環境的組合軟件套裝,包含 Macintosh、Apache、MySQL和PHP 四大開發環境。
• WampServer：Wamp就是Windows Apache Mysql PHP集成安裝環境，即在window下的apache、php和mysql的服務器軟件。
• Vagrant：Vagrant是一個基於Ruby的工具，用於建立和部署虛擬化開發環境。它 使用Oracle的開源VirtualBox虛擬化系統，使用 Chef建立自動化虛擬環境。
• Laragon：Laragon工具就是Laravel的一鍵安裝工具吧，還集成了一整套wamp工具，除去Laravel安裝外，它也是一款不錯的wamp工具，乾淨簡單，便捷迅速。Diff Checkers
• Wnmp：WNMP是Windows下便捷，安全的Nginx+MariaDB+PHP開發環境環境集成套件包。

 

文本對比差別：

• Diffchecker：Diffchecker 是一款很是好用的在線文本對比工具,可以高亮顯示有差別的行和字符。Diffchecker 提供了文件上傳對比功能,還能夠選擇對比的存儲時間。
• Beyond Compare：Beyond Compare是一套由Scooter Software推出的軟件，主要用途是對比兩個文件夾或者文件，並將差別以顏色標示。

 

代碼共享：

• JS Bin：JS Bin可以讓你編輯和測試JavaScript和HTML代碼。你還能夠將編輯後的代碼保存到本地,或將URL地址發給其餘人,讓其協助調試代碼。JS HTML CSS 在線演示
• JSfiddle：jsFiddle是一個在線的shell編輯器,經過流行的JS框架建立自定義的環境,以簡化JS代碼。能夠用於測試示例代碼。
• codeshare：與其餘開發者實時共享代碼。
• Dabblet：Dabblet是一個開源互動測試工具,用於測試CSS和HTML。Dabblet支持實時更新、匿名備份、嵌入網站、與他人共享或者存儲到GitHub。

 

在線演示：

1：JS Bin

  以下圖所示：（很是方便與別人共享代碼，且能實時看效果，本人就很是喜歡）

JS HTML CSS在線演示2 :Liveweave

   以下圖（界面很是漂亮，簡潔，強迫症必定愛不釋手）

 

JS HTML CSS 在線演示3：Plunker

    如圖所示：功能超級強大

 

協助工具：

• Slack：Slack 是聊天羣組 + 大規模工具集成 + 文件整合 + 統一搜索。
• Trello：Trello的目標是提供簡潔清晰的團隊協做工具。介紹若是將Trello用來創建本身的時間管理系統。
• Glip：Glip:在線團隊辦公協做平臺是一個相似於Slack網站的網絡辦公集合體,內置了郵箱、網盤、即時通信應用、協做服務等,把全部和網絡辦公有關的服務和工具都整合在了一塊兒。
• Asana：Asana是一款團隊任務管理軟件 方便人們去制定和跟蹤團隊的項目任務的完成狀況.
• Jira：JIRA是Atlassian公司出品的項目與事務跟蹤工具，被普遍應用於缺陷跟蹤、客戶服務、需求收集、流程審批、任務跟蹤、項目跟蹤和敏捷管理等工做領域。

靈感創意：

• CodePen：全球web前端開發人員的聖地！能夠展現我的的創意和創建一個測試實例來解決bug。
• Dribble：Dribbble是一個面向創做家、藝術工做者、設計師等創意類做品的人羣，提供做品在線服務，供網友在線查看已經完成的做品或者正在創做的做品的交流網站。

 前端項目：

•    託管在github上的項目1;
•    託管在github上的項目2.

 博客發佈：

•    Markdown 是一種輕量級的「標記語言」,它的優勢不少,目前也被愈來愈多的寫做愛好者,撰稿者普遍使用。Markdown 十分輕量,學習成本也不高。

代碼壓縮和自動化：

1.    Grunt
2.    Gulp.

圖片製做：

•    PS軟件(Photoshop CS6).
•    在線PS：在線版本的簡化PS。

圖標製做：

心智圖製做軟件：

•   在線1：Coggle
•   在線2：Popplet
•   中文版（活躍社區）：MindManager

 雲平臺（託管在雲端）：

•   Cloud9  ： Nodejs 大型項目最佳（而且它與github合做，能夠直接從github上clone到雲端進行編寫）：
•   Surge.sh  靜態頁面(我的最喜歡的平臺推薦） ：

 網站測速工具：網站的速度是用戶體驗關鍵因素。網站速度快與慢決定是否能更高的搜索引擎排名，更高的轉換率，更低的跳出率，以及更好的總體用戶體驗和。值得高興的是不少免費軟件能夠用於測試網站速度，幫助咱們找出加載緩慢的問題，方便咱們去解決。

• Google PageSpeed Insights：PageSpeed Insights是一款能夠分析網頁速度瓶頸,讓網頁設計人員開發出速度更快的網站的谷歌瀏覽器插件。
• Google Chrome DevTools：Chrome DevTools 是公認的優秀的前端調試工具，功能強大，使用起來有必定的學習門檻，
• WebPageTest：WebPagetest是一款Web應用程序,它將一個URL以及一系列配置參數做爲輸入,並對那個URL運行性能測試。
• Pingdom：pingdom全面的網站監測服務網站,可測速和ping跟蹤路由,能夠免費監測1個站點,最短1分鐘監測一次。
• GTmetrix：主要優勢在於提供了豐富的詳細的測量結果，並建議如何來優化網頁中每一個元素的，最重要的是會根據網站的具體狀況，直接告訴你致使網站加載速度變慢的根源在哪裏

 

web開發社區：當開發者在開發的過程當中有遇到問題時，除了詢問他人之外，還可使用搜索引擎搜索。社區的重要性就顯而易見了，大部分開發者會在開發社區分享他們經驗，如何避過沒必要要踩的坑。

      （1 國內社區）

• 谷歌開發者社區(GDG)：開放 · 分享 · 創新
• segmentfault：是中國領先的開發者技術社區。 爲編程愛好者提供一個純粹、高質的技術交流的平臺, 與開發者一塊兒學習、交流與成長。
• 全棧社區：中國最大的全棧開發者社區,致力於打造一個問題解答,技術文章分享,全棧人員創業的服務平臺,讓開發更容易,讓創業更簡單.
• github17: 分享本身長期關注的前端開發相關的優秀網站、博客、以及活躍開發者.

     （2 國內社區）

• Stack Overflow：Stack Overflow是一個與程序相關的IT技術問答網站。用戶能夠在網站免費提交問題，瀏覽問題，索引相關內容，在建立主頁的時候使用簡單的HTML。
• Quora :開發者社區。
• Front-end Front：在Front-end Front，前端開發者能夠提出問題，分享有趣的連接，並展現他們的項目做品。
• Hashnode：Hashnode是開發者討論技術問題，分享解決方案，與世界各地的開發者共享資源的彙集地。
• Refind：有着開發者, 黑客, 設計師收集和分享最好的資源的社區。
• Google+ Web Developers Group：Web 開發者,Web設計師和Web開發.
• Google+ Web Developers Group：Java, PHP, Ruby, JavaScript and Python 資源。
• Facebook WordPress Front-end Developers Group：WordPress 前端開發者的分享社區，能夠提問題，分享開發者的項目做品，還有討論WP將來發展趨勢。
• LinkedIn Web Design and Development Professionals Group：與專業網頁設計師，網頁開發者共享Web開發資源
• LinkedIn Web Site Development Group: 網站設計和開發。
• LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
• LinkedIn WordPress Developers Group: WordPress 開發. 使用WP來建立CMS和CMF.
• Webdeveloper.com：幫助Web開發者和設計師學習使用HTML，java和javascript開發網站。
• Sitepoint Forums: Web開發者論壇。
• /r/perfmatters: 討論關於 web 性能
• /r/webdev: 關於Web開發和開發者的新聞

 

Web新聞聚焦：

  （1 國內）

• 掘金：掘金是中國質量最高的技術分享社區，邀請稀土用戶做爲Co-Editor 來分享優質的技術乾貨，從前端到後端開發，從設計到產品，讓每個掘金用戶都能挖掘到有價值的乾貨。
• 開發者頭條：一個以程序員爲中心，基於學習和分享的開發者社區。你能夠閱讀頭條新聞、分享技術文章、發佈開源項目，訂閱技術極客們建立的學習主題和關注編程牛人。
• 極客頭條：技術文章聚合站點，目測如今運營力度減弱。
• 推酷：以技術爲驅動，以聚合挖掘爲核心，打造個性推薦和訂閱，給你一站式的閱讀。 更匯聚優質公開課和線下活動，讓信息知識獲取更便捷。

  （2 國外）

• wdrl.info：精心挑選的Web開發相關資源，每星期進行整合報道。
• Ycombinator news:專爲提升英文閱讀水平的平臺。
• webopsweekly.com： 每週進行報道關於網絡運營，應用部署，網站性能和工具分享類的文章。
• web tools weekly：專一於前端開發和網頁設計工具分享。每個問題都有一個簡短的提示或教程，另外每週都會分享的各類應用程序、腳本、插件和其餘有用的資源。

 

 

   

    一個免費並且高效的web應用託管平臺：Firebase

    webAPP開發    Extjs  ，Sencha官網，實例地址：Sencha

    JavaScript優秀在線課程 Code School

 

    JavaScript在線debug，友好的提示及實時監測能提升編碼的效率：JShint

    如圖所示：

  Stackoverflow社區 JavaScript很火的問答社區，基本我遇到問題在上面能獲得幫助。

                     

  Strapdpwnjs 一款適合前端開發者的Markdown文本編輯器，多種主題可選，界面很漂亮。

  多說：前端一款很流行的評論系統，甚至不須要你管理。直接加上它給的幾行代碼，放在項目中，就能實現多功能評論了。其中我的設計時能夠參考這裏，搭建漂亮的評論區。

  靜態網站生成器1 Static Site Generator  靜態網站發佈服務介紹

  靜態網站生成器2 （github pages) Jekyll

  一名前端工程師的知識圖譜是什麼？（來自知乎社區的問答）

   大神寫的 git入門教程。

   視頻教程   百度雲盤分享- 瓢城web俱樂部創始人李炎恢

   Web設計者和開發者必備的27個Chrome插件

   sublimeGit使用教程

  

  WakaTime ： 一款實用的項目分析系統（程序員裝逼系統），方便分析優化，管理你的全部項目，並能進行分享。

  如圖（多個項目被同時監控）：

 

 項目案例（grunt_less時間記錄分析結果如圖-主要用來裝逼噠，程序員都不炫富，炫時間噠）：

Express 項目生成： 基於Nodejs快速生成一個項目。

 Mongoose:基於nodejs的數據庫

視頻教程：

•             1 百度前端；
•             2 51CTO
•             3 極客
•             4 麥子

 相似本文的前端開發工具庫連接：1 github_JackTian

                                           2 github_foru17

在線工具開源集合： aTool