67 個(gè)節(jié)省開發(fā)者時(shí)間的實(shí)用工具矩父、庫與資源
在這篇文章中，我不會(huì)與大家談?wù)摯笮偷那岸丝蚣芘琶梗?React窍株、Angular、Vue 等攻柠，也沒有涉及那些流行的代碼編輯器球订，如 Atom、VS Code瑰钮、Sublime冒滩，我只想與大家分享一個(gè)有助于提升開發(fā)人員效率的工具列表合集。
或許浪谴，一些朋友已經(jīng)對(duì)文中的一些工具有所了解开睡，但如果你發(fā)現(xiàn)了一些對(duì)你有幫助的新工具，那么苟耻，我將倍感欣慰篇恒。
由于這個(gè)列表中包含了不同類別的資源，為了便于大家查看凶杖，我已將其進(jìn)行了重新的分類胁艰，來 Enjoy 吧！
JavaScript 庫
- Particles.js ?- 一個(gè)用于在網(wǎng)頁上創(chuàng)建漂亮的浮動(dòng)粒子的 JS 庫；
- Three.js ?- 用于在網(wǎng)頁上創(chuàng)建 3D 物體與空間的 JS 庫腾么；
- Fullpage.js - 易于實(shí)現(xiàn)全屏滾動(dòng)功能的庫奈梳；
- Typed.js - 實(shí)現(xiàn)打字機(jī)效果；
- Waypoints.js - 滾動(dòng)到元素觸發(fā)事件的庫解虱；
- Highlight.js - 頁面上語法高亮顯示攘须；
- Chart.js - 純 JS 制作漂亮的圖表；
- Instantclick - 鼠標(biāo)懸停預(yù)先加載頁面資源饭寺，大大加速你的網(wǎng)站響應(yīng)速度阻课；
- Chartist - 開源響應(yīng)式圖表庫叫挟；
- Motio - 基于 sprite 的動(dòng)畫和平移庫艰匙；
- Animstion - 頁面切換動(dòng)畫的 jQuery 插件；
- Barba.js - 創(chuàng)建頁面間流暢平滑的過渡效果抹恳；
- TwentyTwenty - jQuery 視差插件员凝；
- Vivus.js - 可以執(zhí)行 SVG 路徑動(dòng)畫的輕量級(jí) JS 庫；
- Wow.js - 頁面滾動(dòng)時(shí)展現(xiàn)動(dòng)畫效果奋献；
- Scrolline.js - 頁面滾動(dòng)時(shí)顯示滾動(dòng)進(jìn)度的 jQuery 插件健霹；
- Velocity.js - 用于加速 JavaScript 動(dòng)畫；
- Animate on scroll - 頁面滾動(dòng)時(shí)增添元素動(dòng)畫的小型庫瓶蚂；
- Handlebars.js - JavaScript 模板引擎糖埋；
- jInvertScroll - 輕量級(jí)的 jQuery 水平視差插件；
- One page scroll - 實(shí)現(xiàn)蘋果風(fēng)格單頁滾動(dòng)效果的 jQuery 插件窃这；
- Parallax.js - 輕量級(jí)的視差引擎瞳别，能夠?qū)χ悄茉O(shè)備的方向作出反應(yīng)；
- Typeahead.js - 搜索框自動(dòng)補(bǔ)全的 JS 庫杭攻；
- Dragdealer.js - 基于拖動(dòng)的 JavaScript 組件祟敛；
- Bounce.js - 快速創(chuàng)建漂亮的 CSS3 動(dòng)畫效果；
- Pagepiling.js - 創(chuàng)建全屏滾動(dòng)效果兆解；
- Multiscroll.js - 創(chuàng)建兩列垂直反向滾動(dòng)效果的 jQuery 插件馆铁；
- Favico.js - 動(dòng)態(tài)圖標(biāo)插件；
- Midnight.js - 固定頭部切換效果锅睛；
- Anime.js - JavaScript 動(dòng)畫引擎埠巨；
- Keycode - 獲取鍵盤按鍵的 JS 鍵碼值；
- Sortable - 用于拖拽排序的 JavaScript 庫现拒；
-
Flexdatalist - 支持
<datalist>的 jQuery 自動(dòng)完成插件乖订； - Slideout.js - 實(shí)現(xiàn)滑出式 Web App 導(dǎo)航菜單；
- Jquerymy - 實(shí)時(shí)具练、復(fù)雜的雙向數(shù)據(jù)綁定 jQuery 插件乍构；
- Cleave.js - 自動(dòng)格式化表單輸入框的文本內(nèi)容；
- Page - 構(gòu)建單頁應(yīng)用的小型客戶端路由庫；
-
Selectize.js - 基于 jQuery 的
<select>UI 控件哥遮，用于創(chuàng)建tag標(biāo)簽輸入框和 select 下拉框岂丘； - Nice select - 創(chuàng)建漂亮下拉框的 jQuery 插件；
- Tether - 使用絕對(duì)定位創(chuàng)建兩個(gè)互相相關(guān)元素的 JS 庫眠饮；
- Shepherd.js - 創(chuàng)建新手引導(dǎo)的 JS 庫奥帘；
- Tooltip - 工具提示插件；
- Select2 - 基于 jQuery 的替代選擇框仪召；
- IziToast - 輕量的跨瀏覽器響應(yīng)式消息通知插件寨蹋；
- IziModal - 炫酷的 jQuery 模態(tài)窗口插件。
CSS 庫與設(shè)計(jì)資源
- Animate.css? - 強(qiáng)大的 CSS3 動(dòng)畫庫扔茅；
- Flat UI Colors - 漂亮的扁平化配色已旧；
- Material Design Lite - 基于谷歌 Material Design 的前端框架；
- Colorrrs? - 隨機(jī)顏色生成器召娜；
- Section separators - CSS 區(qū)域分割运褪；
- Topcoat - 專注為簡潔、快速的 Web 應(yīng)用提供 CSS 開發(fā)的工具玖瘸；
- Create Ken Burns Effect - 利用 CSS3 實(shí)現(xiàn)的 Ken burns 特效秸讹；
-
DynCSS - 用于分析 CSS
-dyn-屬性規(guī)則，并使其具備動(dòng)態(tài)屬性雅倒； - Magic animations - 具備特殊動(dòng)效的 CSS3 動(dòng)畫璃诀；
- CSSpin - 豐富的 CSS 加載動(dòng)畫；
- Feather icons - 簡單蔑匣、漂亮的開源圖標(biāo)庫劣欢；
- Ion icons - 專為 Ionic 框架設(shè)計(jì)的圖標(biāo)字體；
- Font Awesome - 可縮放的矢量圖標(biāo)字庫殖演；
- Font Generator - 在線字體生成器氧秘；
- On/Off FlipSwitch - 在線創(chuàng)建純 CSS3 動(dòng)畫開關(guān)效果；
- UIkit - 輕量級(jí)的模塊化前端框架趴久；
- Bootstrap - 著名的前端框架丸相；
- Foundation - 著名的前端框架。
有用的產(chǎn)品/鏈接
-
<head> Cheatsheet - 可以寫入到
<head>標(biāo)簽的內(nèi)容清單彼棍；（譯者注：中文翻譯版地址） - Ghost - 基于 Node.js 的簡易博客平臺(tái)灭忠；
- What runs - 用于網(wǎng)站技術(shù)分析的 Chrome 插件；
- Learn anything - 用于分解項(xiàng)目的強(qiáng)大思維導(dǎo)圖座硕。
以上就是我個(gè)人常用的一些前端工具弛作、框架、庫的列表华匾，希望對(duì)大家有所幫助映琳。如果你也愿意分享一些新的發(fā)現(xiàn)，可以在推特上隨時(shí)聯(lián)系我。
感謝你的閱讀萨西。若你有所收獲有鹿，歡迎點(diǎn)贊與分享。
注：
- 本文版權(quán)歸原作者所有谎脯，僅用于學(xué)習(xí)與交流葱跋；
- 如需轉(zhuǎn)載譯文，煩請(qǐng)按下方注明出處信息源梭，謝謝娱俺！
英文原文：67 useful tools, libraries and resources for saving your time as a web developer
作者：Ognjen Gatalo
譯者：IT程序獅
譯文地址：http://www.reibang.com/p/c95e400e43b6
更多文章：
