67 个拯救前端开发者的工具、库和资源

蔚落 2022-06-08 04:45 197阅读 0赞

# 67 个拯救前端开发者的工具、库和资源 #

> 本文转载自：[众成翻译][Link 1]  
> 译者：[myvin][]  
> 审校: [huangxiaolu][]  
> 链接：[http://www.zcfy.cc/article/4174][http_www.zcfy.cc_article_4174]  
> 原文：[https://hackernoon.com/67-useful-tools-libraries-and-resources-for-saving-your-time-as-a-web-developer-7d3fb8667030][https_hackernoon.com_67-useful-tools-libraries-and-resources-for-saving-your-time-as-a-web-developer-7d3fb8667030]

![t0126fbd5eceeae6cdc.jpg1][]

在本文中，我不会去谈 React、Angular、Vue 等等这些大的前端框架，也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集。

这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。

这个列表包含许多种类的资源，所以这里我将它们分组整理。

### Javascript 库 ###

[**Particles.js **][Particles.js]— 一个用来在 web 中创建炫酷的浮动粒子的库

[**Three.js**][Three.js] — 一个用来在 web 中创建 3d 物体和 3d 空间的库

[**Fullpage.js**][Fullpage.js]— 快速实现全屏滚动特性

[**Typed.js**][Typed.js] — 打字机效果

[**Waypoints.js **][Waypoints.js]— 滚动到某个元素位置时触发一个功能

[**Highlight.js** ][Highlight.js]— web 语法高亮

[**Chart.js**][Chart.js] — 使用 JavaScript 创建漂亮的图表

[**Instantclick**][Instantclick] — 能够明显加速网站加载时间，鼠标 hover 时预加载资源

[**Chartist**][Chartist] — 另一个图表库

[**Motio **][Motio]— 一个基于动画和平移的雪碧图库

[**Animsition**][Animsition] — CSS 实现动画过渡的 jQuery 插件

[**Barba.js**][Barba.js] — 流式页面过渡

[**TwentyTwenty **][TwentyTwenty]— 一个对比图片的可视化 diff 工具

[**Vivus.js**][Vivus.js] — 在 SVG 上绘制动画

[**Wow.js** ][Wow.js]— 滚动时展现动画

[**Scrolline.js**][Scrolline.js] — 页面滚动时显示滚动进度

[**Velocity.js**][Velocity.js] — 快速流畅的 JavaScript 动画

[**Animate on scroll**][Animate on scroll] — 漂亮的页面滚动元素动画

[**Handlebars.js**][Handlebars.js] — Javascript 模板

[**jInvertScroll**][jInvertScroll] — 视差滚动

[**One page scroll**][One page scroll] — 又一个页面滚动库

[**Parallax.js**][Parallax.js] — 对智能设备方向变化做出响应的视差引擎

[**Typeahead.js **][Typeahead.js]— 搜索补全

[**Dragdealer.js**][Dragdealer.js] — 炫酷拖拽

[**Bounce.js **][Bounce.js]— 创建炫酷的 CSS3 动画

[**Pagepiling.js**][Pagepiling.js] — 全屏滚动

[**Multiscroll.js **][Multiscroll.js]— 两列垂直反向滚动

[**Favico.js**][Favico.js] — 动态 favicon

[**Midnight.js **][Midnight.js]— 固定头部切换效果

[**Anime.js **][Anime.js]— 动画库

[**Keycode**][Keycode] — 获取键盘按键的 JavaScript keycode

[**Sortable**][Sortable] — 拖拽插件

[**Flexdatalist **][Flexdatalist]— 自动补全

[**Slideout.js **][Slideout.js]— 移动应用侧滑导航

[**Jquerymy**][Jquerymy] — 使用 jQuery 实现双向数据绑定

[**Cleave.js **][Cleave.js]— 实时格式化输入内容

[**Page**][Page] — 客户端单页应用路由

[**Selectize.js**][Selectize.js] — 用来添加 tag 的 Hybrid 选择框

[**Nice select **][Nice select]— 创建漂亮的选择框的 jQuery 库

[**Tether**][Tether] — 使用固定定位来创建相关元素

[**Shepherd.js **][Shepherd.js]— 为应用创建新手引导

[**Tooltip**][Tooltip] — tooltip 提示框

[**Select2**][Select2] — Jquery 选择框插件

[**IziToast**][IziToast] — 通知弹窗实现

[**IziModal **][IziModal]— 模态框实现

### CSS 库 / 设计相关 ###

[**Animate.css**][Animate.css] — 动画库

[**Flat UI Colors **][Flat UI Colors]— 扁平化设计配色

[**Material design lite**][Material design lite]— 基于 Google material design 的框架

[**Colorrrs **][Colorrrs]— 随机颜色生成器

[**Section separators**][Section separators] — CSS 实现区域分割

[**Topcoat**][Topcoat] — 框架

[**Create ken burns effect **][Create ken burns effect]— 使用 CSS3 动画实现 Ken burns 特效

[**DynCSS**][DynCSS] — 给 CSS 添加 function，动态化 CSS

[**Magic animations**][Magic animations] — CSS3 实现动画特效

[**CSSpin**][CSSpin] — css spinners 合集

[**Feather icons**][Feather icons] — Icon 集合

[**Ion icons**][Ion icons] — Icon 集合

[**Font awesome**][Font awesome] — Icon 集合

[**Font generator**][Font generator] — 组合多个字体创建混合字体

[**On/Off switch**][On_Off switch] — 使用 CSS 创建 on/off 开关、radio 按钮

[**UI Kit**][UI Kit] — 框架

[**Bootstrap**][Bootstrap] — 框架

[**Foundation **][Foundation]— 框架

### 有用的产品/链接 ###

[**cheatsheet**][cheatsheet] — 可以写在中的所有标签

[**Ghost **][Ghost]— 基于 Node.js 的博客平台

[**What runs**][What runs] — 一个用于网站技术分析的 Chrome 插件

[**Learn anything **][Learn anything]— 一个强大的用于分析某个主题的思维导图

--------------------

这是我个人有时在使用的一些工具/框架/库的一个列表。很高兴在[**twitter**][twitter] 上和我联系，并分享你的发现。

[Link 1]: http://www.zcfy.cc
[myvin]: http://www.zcfy.cc/@myvin
[huangxiaolu]: http://www.zcfy.cc/@huangxiaolu
[http_www.zcfy.cc_article_4174]: http://www.zcfy.cc/article/4174
[https_hackernoon.com_67-useful-tools-libraries-and-resources-for-saving-your-time-as-a-web-developer-7d3fb8667030]: https://hackernoon.com/67-useful-tools-libraries-and-resources-for-saving-your-time-as-a-web-developer-7d3fb8667030
[t0126fbd5eceeae6cdc.jpg1]: http://p0.qhimg.com/t0126fbd5eceeae6cdc.jpg1
[Particles.js]: http://vincentgarreau.com/particles.js/
[Three.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]: http://www.chartjs.org/
[Instantclick]: http://instantclick.io/
[Chartist]: http://gionkunz.github.io/chartist-js/index.html
[Motio]: http://darsa.in/motio/#!introduction
[Animsition]: http://git.blivesta.com/animsition/
[Barba.js]: https://github.com/luruke/barba.js
[TwentyTwenty]: http://zurb.com/playground/twentytwenty
[Vivus.js]: https://github.com/maxwellito/vivus#vivusjs
[Wow.js]: http://mynameismatthieu.com/WOW/
[Scrolline.js]: https://github.com/anthonyly/Scrolline.js
[Velocity.js]: http://velocityjs.org/
[Animate on scroll]: http://michalsnik.github.io/aos/
[Handlebars.js]: http://handlebarsjs.com/
[jInvertScroll]: http://www.pixxelfactory.net/jInvertScroll/
[One page scroll]: https://github.com/peachananr/onepage-scroll
[Parallax.js]: https://github.com/wagerfield/parallax
[Typeahead.js]: http://twitter.github.io/typeahead.js/
[Dragdealer.js]: http://skidding.github.io/dragdealer/
[Bounce.js]: http://bouncejs.com/
[Pagepiling.js]: https://github.com/alvarotrigo/pagePiling.js
[Multiscroll.js]: https://github.com/alvarotrigo/multiscroll.js
[Favico.js]: http://lab.ejci.net/favico.js/
[Midnight.js]: http://aerolab.github.io/midnight.js/
[Anime.js]: http://animejs.com/
[Keycode]: http://keycode.info/
[Sortable]: http://rubaxa.github.io/Sortable/
[Flexdatalist]: http://projects.sergiodinislopes.pt/flexdatalist/
[Slideout.js]: https://slideout.js.org/
[Jquerymy]: http://jquerymy.com/#/
[Cleave.js]: http://nosir.github.io/cleave.js/
[Page]: http://smalljs.org/client-side-routing/page/
[Selectize.js]: http://selectize.github.io/selectize.js/
[Nice select]: http://hernansartorio.com/jquery-nice-select/
[Tether]: http://tether.io/
[Shepherd.js]: https://github.com/HubSpot/shepherd
[Tooltip]: https://github.com/HubSpot/tooltip
[Select2]: https://select2.github.io/
[IziToast]: http://izitoast.marcelodolce.com/
[IziModal]: http://izimodal.marcelodolce.com/
[Animate.css]: https://daneden.github.io/animate.css/
[Flat UI Colors]: https://flatuicolors.com/
[Material design lite]: https://getmdl.io/index.html
[Colorrrs]: https://www.webpagefx.com/web-design/random-color-picker/
[Section separators]: https://tympanus.net/Development/SectionSeparators/
[Topcoat]: http://topcoat.io/
[Create ken burns effect]: https://www.kirupa.com/html5/ken_burns_effect_css.htm
[DynCSS]: http://www.vittoriozaccaria.net/dyn-css/
[Magic animations]: https://www.minimamente.com/example/magic_animations/
[CSSpin]: https://webkul.github.io/csspin/
[Feather icons]: https://feathericons.com/
[Ion icons]: http://ionicons.com/
[Font awesome]: http://fontawesome.io/
[Font generator]: http://brandmark.io/font-generator/
[On_Off switch]: https://proto.io/freebies/onoff/
[UI Kit]: https://getuikit.com/
[Bootstrap]: http://getbootstrap.com/
[Foundation]: http://foundation.zurb.com/
[cheatsheet]: https://github.com/joshbuchea/HEAD
[Ghost]: https://ghost.org/
[What runs]: https://www.whatruns.com/
[Learn anything]: https://learn-anything.xyz/learn-anything
[twitter]: https://twitter.com/ognjengt