67 個節約開發時間的前端開發者的工具、庫和資源

在本文中，我不會去談 React、Angular、Vue 等等這些大的前端框架，也不會談 Atom、VS code、Sublime 等等這些已經很出名的代碼編輯器，我只是想簡單的分享一套我認為有助于提升開發者工作流的工具集。

這套工具集中的大部分你可能見過，也可能沒見過，如果有哪個/些讓你眼前一亮，那么我的分享就很值了。

這個列表包含許多種類的資源，所以這里我將它們分組整理。

Javascript 庫

Particles.js — 一個用來在 web 中創建炫酷的浮動粒子的庫

Three.js — 一個用來在 web 中創建 3d 物體和 3d 空間的庫

Fullpage.js— 快速實現全屏滾動特性

Typed.js — 打字機效果

Waypoints.js — 滾動到某個元素位置時觸發一個功能

Highlight.js — web 語法高亮

Chart.js — 使用 JavaScript 創建漂亮的圖表

Instantclick — 能夠明顯加速網站加載時間，鼠標 hover 時預加載資源

Chartist — 另一個圖表庫

Motio — 一個基于動畫和平移的雪碧圖庫

Animsition — CSS 實現動畫過渡的 jQuery 插件

Barba.js — 流式頁面過渡

TwentyTwenty — 一個對比圖片的可視化 diff 工具

Vivus.js — 在 SVG 上繪制動畫

Wow.js — 滾動時展現動畫

Scrolline.js — 頁面滾動時顯示滾動進度

Velocity.js — 快速流暢的 JavaScript 動畫

Animate on scroll — 漂亮的頁面滾動元素動畫

Handlebars.js — Javascript 模板

jInvertScroll — 視差滾動

One page scroll — 又一個頁面滾動庫

Parallax.js — 對智能設備方向變化做出響應的視差引擎

Typeahead.js — 搜索補全

Dragdealer.js — 炫酷拖拽

Bounce.js — 創建炫酷的 CSS3 動畫

Pagepiling.js — 全屏滾動

Multiscroll.js — 兩列垂直反向滾動

Favico.js — 動態 favicon

Midnight.js — 固定頭部切換效果

Anime.js — 動畫庫

Keycode — 獲取鍵盤按鍵的 JavaScript keycode

Sortable — 拖拽插件

Flexdatalist — 自動補全

Slideout.js — 移動應用側滑導航

Jquerymy — 使用 jQuery 實現雙向數據綁定

Cleave.js — 實時格式化輸入內容

Page — 客戶端單頁應用路由

Selectize.js — 用來添加 tag 的 Hybrid 選擇框

Nice select — 創建漂亮的選擇框的 jQuery 庫

Tether — 使用固定定位來創建相關元素

Shepherd.js — 為應用創建新手引導

Tooltip — tooltip 提示框

Select2 — Jquery 選擇框插件

IziToast — 通知彈窗實現

IziModal — 模態框實現

CSS 庫 / 設計相關

Animate.css — 動畫庫

Flat UI Colors — 扁平化設計配色

Material design lite— 基于 Google material design 的框架

Colorrrs — 隨機顏色生成器

Section separators — CSS 實現區域分割

Topcoat — 框架

Create ken burns effect — 使用 CSS3 動畫實現 Ken burns 特效

DynCSS — 給 CSS 添加 function，動態化 CSS

Magic animations — CSS3 實現動畫特效

CSSpin — css spinners 合集

Feather icons — Icon 集合

Ion icons — Icon 集合

Font awesome — Icon 集合

Font generator — 組合多個字體創建混合字體

On/Off switch — 使用 CSS 創建 on/off 開關、radio 按鈕

UI Kit — 框架

Bootstrap — 框架

Foundation — 框架

有用的產品/鏈接

cheatsheet — 可以寫在中的所有標簽

Ghost — 基于 Node.js 的博客平臺

What runs — 一個用于網站技術分析的 Chrome 插件

Learn anything — 一個強大的用于分析某個主題的思維導圖

這是我個人有時在使用的一些工具/框架/庫的一個列表。很高興在twitter 上和我聯系，并分享你的發現。

譯者：myvin
譯文：http://www.zcfy.cc/article/4174
原文：https://hackernoon.com/67-useful-tools-libraries-and-resources-for-saving-your-time-as-a-web-developer-7d3fb8667030

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com