67 個(gè)節(jié)約開發(fā)時(shí)間的前端開發(fā)者的工具、庫(kù)和資源

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

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

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

Javascript 庫(kù)

Particles.js — 一個(gè)用來在 web 中創(chuàng)建炫酷的浮動(dòng)粒子的庫(kù)

Three.js — 一個(gè)用來在 web 中創(chuàng)建 3d 物體和 3d 空間的庫(kù)

Fullpage.js— 快速實(shí)現(xiàn)全屏滾動(dòng)特性

Typed.js — 打字機(jī)效果

Waypoints.js — 滾動(dòng)到某個(gè)元素位置時(shí)觸發(fā)一個(gè)功能

Highlight.js — web 語法高亮

Chart.js — 使用 JavaScript 創(chuàng)建漂亮的圖表

Instantclick — 能夠明顯加速網(wǎng)站加載時(shí)間，鼠標(biāo) hover 時(shí)預(yù)加載資源

Chartist — 另一個(gè)圖表庫(kù)

Motio — 一個(gè)基于動(dòng)畫和平移的雪碧圖庫(kù)

Animsition — CSS 實(shí)現(xiàn)動(dòng)畫過渡的 jQuery 插件

Barba.js — 流式頁(yè)面過渡

TwentyTwenty — 一個(gè)對(duì)比圖片的可視化 diff 工具

Vivus.js — 在 SVG 上繪制動(dòng)畫

Wow.js — 滾動(dòng)時(shí)展現(xiàn)動(dòng)畫

Scrolline.js — 頁(yè)面滾動(dòng)時(shí)顯示滾動(dòng)進(jìn)度

Velocity.js — 快速流暢的 JavaScript 動(dòng)畫

Animate on scroll — 漂亮的頁(yè)面滾動(dòng)元素動(dòng)畫

Handlebars.js — Javascript 模板

jInvertScroll — 視差滾動(dòng)

One page scroll — 又一個(gè)頁(yè)面滾動(dòng)庫(kù)

Parallax.js — 對(duì)智能設(shè)備方向變化做出響應(yīng)的視差引擎

Typeahead.js — 搜索補(bǔ)全

Dragdealer.js — 炫酷拖拽

Bounce.js — 創(chuàng)建炫酷的 CSS3 動(dòng)畫

Pagepiling.js — 全屏滾動(dòng)

Multiscroll.js — 兩列垂直反向滾動(dòng)

Favico.js — 動(dòng)態(tài) favicon

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

Anime.js — 動(dòng)畫庫(kù)

Keycode — 獲取鍵盤按鍵的 JavaScript keycode

Sortable — 拖拽插件

Flexdatalist — 自動(dòng)補(bǔ)全

Slideout.js — 移動(dòng)應(yīng)用側(cè)滑導(dǎo)航

Jquerymy — 使用 jQuery 實(shí)現(xiàn)雙向數(shù)據(jù)綁定

Cleave.js — 實(shí)時(shí)格式化輸入內(nèi)容

Page — 客戶端單頁(yè)應(yīng)用路由

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

Nice select — 創(chuàng)建漂亮的選擇框的 jQuery 庫(kù)

Tether — 使用固定定位來創(chuàng)建相關(guān)元素

Shepherd.js — 為應(yīng)用創(chuàng)建新手引導(dǎo)

Tooltip — tooltip 提示框

Select2 — Jquery 選擇框插件

IziToast — 通知彈窗實(shí)現(xiàn)

IziModal — 模態(tài)框?qū)崿F(xiàn)

CSS 庫(kù) / 設(shè)計(jì)相關(guān)

Animate.css — 動(dòng)畫庫(kù)

Flat UI Colors — 扁平化設(shè)計(jì)配色

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

Colorrrs — 隨機(jī)顏色生成器

Section separators — CSS 實(shí)現(xiàn)區(qū)域分割

Topcoat — 框架

Create ken burns effect — 使用 CSS3 動(dòng)畫實(shí)現(xiàn) Ken burns 特效

DynCSS — 給 CSS 添加 function，動(dòng)態(tài)化 CSS

Magic animations — CSS3 實(shí)現(xiàn)動(dòng)畫特效

CSSpin — css spinners 合集

Feather icons — Icon 集合

Ion icons — Icon 集合

Font awesome — Icon 集合

Font generator — 組合多個(gè)字體創(chuàng)建混合字體

On/Off switch — 使用 CSS 創(chuàng)建 on/off 開關(guān)、radio 按鈕

UI Kit — 框架

Bootstrap — 框架

Foundation — 框架

有用的產(chǎn)品/鏈接

cheatsheet — 可以寫在中的所有標(biāo)簽

Ghost — 基于 Node.js 的博客平臺(tái)

What runs — 一個(gè)用于網(wǎng)站技術(shù)分析的 Chrome 插件

Learn anything — 一個(gè)強(qiáng)大的用于分析某個(gè)主題的思維導(dǎo)圖

這是我個(gè)人有時(shí)在使用的一些工具/框架/庫(kù)的一個(gè)列表。很高興在twitter 上和我聯(lián)系，并分享你的發(fā)現(xiàn)。

譯者：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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com