實用資源庫和工具，極大縮減開發時間
在這篇文章中，我不會與大家談論大型的前端框架，如 React、Angular、Vue 等，也沒有涉及那些流行的代碼編輯器，如 Atom、VS Code、Sublime，我只想與大家分享一個有助於提升開發人員效率的工具列表合集。
或許，一些朋友已經對文中的一些工具有所了解，但如果你發現了一些對你有幫助的新工具，那麽，我將倍感欣慰。
由於這個列表中包含了不同類別的資源，為了便於大家查看，我已將其進行了重新的分類，來 Enjoy 吧！
JavaScript 庫
-
Particles.js ?- 一個用於在網頁上創建漂亮的浮動粒子的 JS 庫；
地址：
http://vincentgarreau.com/particles.js/
-
Three.js ?- 用於在網頁上創建 3D 物體與空間的 JS 庫；
地址：https://threejs.org/
-
Fullpage.js - 易於實現全屏滾動功能的庫；
地址：
https://alvarotrigo.com/fullPage/#firstPage
-
Typed.js - 實現打字機效果；
地址：
http://www.mattboldt.com/demos/typed-js/
-
Waypoints.js - 滾動到元素觸發事件的庫；
地址：
http://imakewebthings.com/waypoints/
-
Highlight.js - 頁面上語法高亮顯示；
地址：https://highlightjs.org/
-
Chart.js - 純 JS 制作漂亮的圖表；
地址：http://www.chartjs.org/
-
Instantclick - 鼠標懸停預先加載頁面資源，大大加速你的網站響應速度；
地址：http://instantclick.io/
-
Chartist - 開源響應式圖表庫；
地址：
http://gionkunz.github.io/chartist-js/index.html
-
Motio - 基於 sprite 的動畫和平移庫；
地址：
http://darsa.in/motio/#!introduction
-
Animstion - 頁面切換動畫的 jQuery 插件；
地址：http://git.blivesta.com/animsition/
-
Barba.js - 創建頁面間流暢平滑的過渡效果；
地址：https://github.com/luruke/barba.js
-
TwentyTwenty - jQuery 視差插件；
地址：
http://zurb.com/playground/twentytwenty
-
Vivus.js - 可以執行 SVG 路徑動畫的輕量級 JS 庫；
地址：
https://github.com/maxwellito/vivus#vivusjs
-
Wow.js - 頁面滾動時展現動畫效果；
地址：
http://mynameismatthieu.com/WOW/
-
Scrolline.js - 頁面滾動時顯示滾動進度的 jQuery 插件；
地址：
https://github.com/anthonyly/Scrolline.js
-
Velocity.js - 用於加速 JavaScript 動畫；
地址：http://velocityjs.org/
-
Animate on scroll - 頁面滾動時增添元素動畫的小型庫；
地址：http://michalsnik.github.io/aos/
-
Handlebars.js - JavaScript 模板引擎；
地址：http://handlebarsjs.com/
-
jInvertScroll - 輕量級的 jQuery 水平視差插件；
地址：
http://www.pixxelfactory.net/jInvertScroll/
-
One page scroll - 實現蘋果風格單頁滾動效果的 jQuery 插件；
地址：
https://github.com/peachananr/onepage-scroll
-
Parallax.js - 輕量級的視差引擎，能夠對智能設備的方向作出反應；
地址：
https://github.com/wagerfield/parallax
-
Typeahead.js - 搜索框自動補全的 JS 庫；
地址：
http://twitter.github.io/typeahead.js/
-
Dragdealer.js - 基於拖動的 JavaScript 組件；
地址：
http://skidding.github.io/dragdealer/
-
Bounce.js - 快速創建漂亮的 CSS3 動畫效果；
地址：http://bouncejs.com/
-
Pagepiling.js - 創建全屏滾動效果；
地址：
https://github.com/alvarotrigo/pagePiling.js
-
Multiscroll.js - 創建兩列垂直反向滾動效果的 jQuery 插件；
地址：
http://aerolab.github.io/midnight.js/
-
Favico.js - 動態圖標插件；
地址：http://lab.ejci.net/favico.js/
-
Midnight.js - 固定頭部切換效果；
地址：
http://aerolab.github.io/midnight.js/
-
Anime.js - JavaScript 動畫引擎；
地址：http://animejs.com/
-
Keycode - 獲取鍵盤按鍵的 JS 鍵碼值；
地址：http://keycode.info/
-
Sortable - 用於拖拽排序的 JavaScript 庫；
地址：http://rubaxa.github.io/Sortable/
-
Flexdatalist - 支持<datalist>的 jQuery 自動完成插件；
地址：
http://projects.sergiodinislopes.pt/flexdatalist/
-
Slideout.js - 實現滑出式 Web App 導航菜單；
地址：https://slideout.js.org/
-
Jquerymy - 實時、復雜的雙向數據綁定 jQuery 插件；
地址：http://jquerymy.com/#/
-
Cleave.js - 自動格式化表單輸入框的文本內容；
地址：http://nosir.github.io/cleave.js/
-
Page - 構建單頁應用的小型客戶端路由庫；
地址：
http://smalljs.org/client-side-routing/page/
-
Selectize.js - 基於 jQuery 的<select> UI 控件，用於創建tag標簽輸入框和 select 下拉框；
地址：
http://selectize.github.io/selectize.js/
-
Nice select - 創建漂亮下拉框的 jQuery 插件；
地址：
http://hernansartorio.com/jquery-nice-select/
-
Tether - 使用絕對定位創建兩個互相相關元素的 JS 庫；
地址：http://tether.io/
-
Shepherd.js - 創建新手引導的 JS 庫；
地址：
https://github.com/HubSpot/shepherd
-
Tooltip - 工具提示插件；
地址：https://github.com/HubSpot/tooltip
-
Select2 - 基於 jQuery 的替代選擇框；
地址：https://select2.github.io/
-
IziToast - 輕量的跨瀏覽器響應式消息通知插件；
地址：http://izitoast.marcelodolce.com/
-
IziModal - 炫酷的 jQuery 模態窗口插件。
地址：http://izimodal.marcelodolce.com/
CSS 庫與設計資源
-
Animate.css? - 強大的 CSS3 動畫庫；
地址：
https://daneden.github.io/animate.css/
-
Flat UI Colors - 漂亮的扁平化配色；
地址：https://flatuicolors.com/
-
Material Design Lite - 基於谷歌 Material Design 的前端框架；
地址：https://getmdl.io/index.html
-
Colorrrs? - 隨機顏色生成器；
地址：
https://www.webpagefx.com/web-design/random-color-picker/
-
Section separators - CSS 區域分割；
地址：
https://tympanus.net/Development/SectionSeparators/
-
Topcoat - 專註為簡潔、快速的 Web 應用提供 CSS 開發的工具；
地址：http://topcoat.io/
-
Create Ken Burns Effect - 利用 CSS3 實現的 Ken burns 特效；
地址：
https://www.kirupa.com/html5/ken_burns_effect_css.htm
-
DynCSS - 用於分析 CSS -dyn-屬性規則，並使其具備動態屬性；
地址：
http://www.vittoriozaccaria.net/dyn-css/
-
Magic animations - 具備特殊動效的 CSS3 動畫；
地址：
https://www.minimamente.com/example/magic_animations/
-
CSSpin - 豐富的 CSS 加載動畫；
地址：https://webkul.github.io/csspin/
-
Feather icons - 簡單、漂亮的開源圖標庫；
地址：https://feathericons.com/
-
Ion icons - 專為 Ionic 框架設計的圖標字體；
地址：http://ionicons.com/
-
Font Awesome - 可縮放的矢量圖標字庫；
地址：http://fontawesome.io/
-
Font Generator - 在線字體生成器；
地址：http://brandmark.io/font-generator/
-
On/Off FlipSwitch - 在線創建純 CSS3 動畫開關效果；
地址：https://proto.io/freebies/onoff/
-
UIkit - 輕量級的模塊化前端框架；
地址：https://getuikit.com/
-
Bootstrap - 著名的前端框架；
地址：http://getbootstrap.com/
-
Foundation - 著名的前端框架。
地址：http://foundation.zurb.com/
有用的產品/鏈接
-
<head> Cheatsheet - 可以寫入到<head>標簽的內容清單；
地址：
https://github.com/joshbuchea/HEAD
譯者註 - 中文翻譯版
地址：
http://www.css88.com/archives/8052
-
Ghost - 基於 Node.js 的簡易博客平臺；
地址：https://ghost.org/
-
What runs - 用於網站技術分析的 Chrome 插件；
地址：https://www.whatruns.com/
-
Learn anything - 用於分解項目的強大思維導圖。
地址：
https://learn-anything.xyz/learn-anything
以上就是我個人常用的一些前端工具、框架、庫的列表，希望對大家有所幫助。如果你也願意分享一些新的發現，可以在推特上隨時聯系我。
這個話題到這裏就算是說完了，我自己是名j前端程序員，建了一個千人群每天分享前端基礎到項目學習資料和學習方法：249244868，歡迎初學和進階中的小夥伴。需要更多精彩內容，敬請關註小編！
轉載於：
英文原文：67 useful tools, libraries and resources for saving your time as a web developer
作者：Ognjen Gatalo
實用資源庫和工具，極大縮減開發時間