67 个节省开发者时间的实用工具、库与资源（前端向）

悠悠 2022-06-08 09:12 195阅读 0赞

在这篇文章中，我不会与大家谈论大型的前端框架，如 React、Angular、Vue 等，也没有涉及那些流行的代码编辑器，如 Atom、VS Code、Sublime，我只想与大家分享一个有助于提升开发人员效率的工具列表合集。

或许，一些朋友已经对文中的一些工具有所了解，但如果你发现了一些对你有帮助的新工具，那么，我将倍感欣慰。

由于这个列表中包含了不同类别的资源，为了便于大家查看，我已将其进行了重新的分类，来 Enjoy 吧！

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

## JavaScript 库 ##

*  [Particles.js][]  - 一个用于在网页上创建漂亮的浮动粒子的 JS 库；
 *  [Three.js][]  - 用于在网页上创建 3D 物体与空间的 JS 库；
 *  [Fullpage.js][] - 易于实现全屏滚动功能的库；
 *  [Typed.js][] - 实现打字机效果；
 *  [Waypoints.js][] - 滚动到元素触发事件的库；
 *  [Highlight.js][] - 页面上语法高亮显示；
 *  [Chart.js][] - 纯 JS 制作漂亮的图表；
 *  [Instantclick][] - 鼠标悬停预先加载页面资源，大大加速你的网站响应速度；
 *  [Chartist][] - 开源响应式图表库；
 *  [Motio][] - 基于 sprite 的动画和平移库；
 *  [Animstion][] - 页面切换动画的 jQuery 插件；
 *  [Barba.js][] - 创建页面间流畅平滑的过渡效果；
 *  [TwentyTwenty][] - jQuery 视差插件；
 *  [Vivus.js][] - 可以执行 SVG 路径动画的轻量级 JS 库；
 *  [Wow.js][] - 页面滚动时展现动画效果；
 *  [Scrolline.js][] - 页面滚动时显示滚动进度的 jQuery 插件；
 *  [Velocity.js][] - 用于加速 JavaScript 动画；
 *  [Animate on scroll][] - 页面滚动时增添元素动画的小型库；
 *  [Handlebars.js][] - JavaScript 模板引擎；
 *  [jInvertScroll][] - 轻量级的 jQuery 水平视差插件；
 *  [One page scroll][] - 实现苹果风格单页滚动效果的 jQuery 插件；
 *  [Parallax.js][] - 轻量级的视差引擎，能够对智能设备的方向作出反应；
 *  [Typeahead.js][] - 搜索框自动补全的 JS 库；
 *  [Dragdealer.js][] - 基于拖动的 JavaScript 组件；
 *  [Bounce.js][] - 快速创建漂亮的 CSS3 动画效果；
 *  [Pagepiling.js][] - 创建全屏滚动效果；
 *  [Multiscroll.js][] - 创建两列垂直反向滚动效果的 jQuery 插件；
 *  [Favico.js][] - 动态图标插件；
 *  [Midnight.js][] - 固定头部切换效果；
 *  [Anime.js][] - JavaScript 动画引擎；
 *  [Keycode][] - 获取键盘按键的 JS 键码值；
 *  [Sortable][] - 用于拖拽排序的 JavaScript 库；
 *  [Flexdatalist][] - 支持 <datalist> 的 jQuery 自动完成插件；
 *  [Slideout.js][] - 实现滑出式 Web App 导航菜单；
 *  [Jquerymy][] - 实时、复杂的双向数据绑定 jQuery 插件；
 *  [Cleave.js][] - 自动格式化表单输入框的文本内容；
 *  [Page][] - 构建单页应用的小型客户端路由库；
 *  [Selectize.js][] - 基于 jQuery 的 <select> UI 控件，用于创建 tag 标签输入框和 select 下拉框；
 *  [Nice select][] - 创建漂亮下拉框的 jQuery 插件；
 *  [Tether][] - 使用绝对定位创建两个互相相关元素的 JS 库；
 *  [Shepherd.js][] - 创建新手引导的 JS 库；
 *  [Tooltip][] - 工具提示插件；
 *  [Select2][] - 基于 jQuery 的替代选择框；
 *  [IziToast][] - 轻量的跨浏览器响应式消息通知插件；
 *  [IziModal][] - 炫酷的 jQuery 模态窗口插件。

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

## CSS 库与设计资源 ##

*  [Animate.css][]  - 强大的 CSS3 动画库；
 *  [Flat UI Colors][] - 漂亮的扁平化配色；
 *  [Material Design Lite][] - 基于谷歌 Material Design 的前端框架；
 *  [Colorrrs][]  - 随机颜色生成器；
 *  [Section separators][] - CSS 区域分割；
 *  [Topcoat][] - 专注为简洁、快速的 Web 应用提供 CSS 开发的工具；
 *  [Create Ken Burns Effect][] - 利用 CSS3 实现的 Ken burns 特效；
 *  [DynCSS][] - 用于分析 CSS -dyn-属性规则，并使其具备动态属性；
 *  [Magic animations][] - 具备特殊动效的 CSS3 动画；
 *  [CSSpin][] - 丰富的 CSS 加载动画；
 *  [Feather icons][] - 简单、漂亮的开源图标库；
 *  [Ion icons][] - 专为 Ionic 框架设计的图标字体；
 *  [Font Awesome][] - 可缩放的矢量图标字库；
 *  [Font Generator][] - 在线字体生成器；
 *  [On/Off FlipSwitch][On_Off FlipSwitch] - 在线创建纯 CSS3 动画开关效果；
 *  [UIkit][] - 轻量级的模块化前端框架；
 *  [Bootstrap][] - 著名的前端框架；
 *  [Foundation][] - 著名的前端框架。

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

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

*  [<head> Cheatsheet][head_ Cheatsheet] - 可以写入到 <head> 标签的内容清单；（译者注：中文翻译版[地址][Link 1]）
 *  [Ghost][] - 基于 Node.js 的简易博客平台；
 *  [What runs][] - 用于网站技术分析的 Chrome 插件；
 *  [Learn anything][] - 用于分解项目的强大思维导图。

以上就是我个人常用的一些前端工具、框架、库的列表，希望对大家有所帮助。如果你也愿意分享一些新的发现，可以在博客上随时联系我。

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

感谢你的阅读。若你有所收获，欢迎点赞与分享。

[Particles.js]: http://link.zhihu.com/?target=http%3A//vincentgarreau.com/particles.js/
[Three.js]: http://link.zhihu.com/?target=https%3A//threejs.org/
[Fullpage.js]: http://link.zhihu.com/?target=https%3A//alvarotrigo.com/fullPage/%23firstPage
[Typed.js]: http://link.zhihu.com/?target=http%3A//www.mattboldt.com/demos/typed-js/
[Waypoints.js]: http://link.zhihu.com/?target=http%3A//imakewebthings.com/waypoints/
[Highlight.js]: http://link.zhihu.com/?target=https%3A//highlightjs.org/
[Chart.js]: http://link.zhihu.com/?target=http%3A//www.chartjs.org/
[Instantclick]: http://link.zhihu.com/?target=http%3A//instantclick.io/
[Chartist]: http://link.zhihu.com/?target=http%3A//gionkunz.github.io/chartist-js/index.html
[Motio]: http://link.zhihu.com/?target=http%3A//darsa.in/motio/%23%21introduction
[Animstion]: http://link.zhihu.com/?target=http%3A//git.blivesta.com/animsition/
[Barba.js]: http://link.zhihu.com/?target=https%3A//github.com/luruke/barba.js
[TwentyTwenty]: http://link.zhihu.com/?target=http%3A//zurb.com/playground/twentytwenty
[Vivus.js]: http://link.zhihu.com/?target=https%3A//github.com/maxwellito/vivus%23vivusjs
[Wow.js]: http://link.zhihu.com/?target=http%3A//mynameismatthieu.com/WOW/
[Scrolline.js]: http://link.zhihu.com/?target=https%3A//github.com/anthonyly/Scrolline.js
[Velocity.js]: http://link.zhihu.com/?target=http%3A//velocityjs.org/
[Animate on scroll]: http://link.zhihu.com/?target=http%3A//michalsnik.github.io/aos/
[Handlebars.js]: http://link.zhihu.com/?target=http%3A//handlebarsjs.com/
[jInvertScroll]: http://link.zhihu.com/?target=http%3A//www.pixxelfactory.net/jInvertScroll/
[One page scroll]: http://link.zhihu.com/?target=https%3A//github.com/peachananr/onepage-scroll
[Parallax.js]: http://link.zhihu.com/?target=https%3A//github.com/wagerfield/parallax
[Typeahead.js]: http://link.zhihu.com/?target=http%3A//twitter.github.io/typeahead.js/
[Dragdealer.js]: http://link.zhihu.com/?target=http%3A//skidding.github.io/dragdealer/
[Bounce.js]: http://link.zhihu.com/?target=http%3A//bouncejs.com/
[Pagepiling.js]: http://link.zhihu.com/?target=https%3A//github.com/alvarotrigo/pagePiling.js
[Multiscroll.js]: http://link.zhihu.com/?target=https%3A//github.com/alvarotrigo/multiscroll.js
[Favico.js]: http://link.zhihu.com/?target=http%3A//lab.ejci.net/favico.js/
[Midnight.js]: http://link.zhihu.com/?target=http%3A//aerolab.github.io/midnight.js/
[Anime.js]: http://link.zhihu.com/?target=http%3A//animejs.com/
[Keycode]: http://link.zhihu.com/?target=http%3A//keycode.info/
[Sortable]: http://link.zhihu.com/?target=http%3A//rubaxa.github.io/Sortable/
[Flexdatalist]: http://link.zhihu.com/?target=http%3A//projects.sergiodinislopes.pt/flexdatalist/
[Slideout.js]: http://link.zhihu.com/?target=https%3A//slideout.js.org/
[Jquerymy]: http://link.zhihu.com/?target=http%3A//jquerymy.com/%23/
[Cleave.js]: http://link.zhihu.com/?target=http%3A//nosir.github.io/cleave.js/
[Page]: http://link.zhihu.com/?target=http%3A//smalljs.org/client-side-routing/page/
[Selectize.js]: http://link.zhihu.com/?target=http%3A//selectize.github.io/selectize.js/
[Nice select]: http://link.zhihu.com/?target=http%3A//hernansartorio.com/jquery-nice-select/
[Tether]: http://link.zhihu.com/?target=http%3A//tether.io/
[Shepherd.js]: http://link.zhihu.com/?target=https%3A//github.com/HubSpot/shepherd
[Tooltip]: http://link.zhihu.com/?target=https%3A//github.com/HubSpot/tooltip
[Select2]: http://link.zhihu.com/?target=https%3A//select2.github.io/
[IziToast]: http://link.zhihu.com/?target=http%3A//izitoast.marcelodolce.com/
[IziModal]: http://link.zhihu.com/?target=http%3A//izimodal.marcelodolce.com/
[Animate.css]: http://link.zhihu.com/?target=https%3A//daneden.github.io/animate.css/
[Flat UI Colors]: http://link.zhihu.com/?target=https%3A//flatuicolors.com/
[Material Design Lite]: http://link.zhihu.com/?target=https%3A//getmdl.io/index.html
[Colorrrs]: http://link.zhihu.com/?target=https%3A//www.webpagefx.com/web-design/random-color-picker/
[Section separators]: http://link.zhihu.com/?target=https%3A//tympanus.net/Development/SectionSeparators/
[Topcoat]: http://link.zhihu.com/?target=http%3A//topcoat.io/
[Create Ken Burns Effect]: http://link.zhihu.com/?target=https%3A//www.kirupa.com/html5/ken_burns_effect_css.htm
[DynCSS]: http://link.zhihu.com/?target=http%3A//www.vittoriozaccaria.net/dyn-css/
[Magic animations]: http://link.zhihu.com/?target=https%3A//www.minimamente.com/example/magic_animations/
[CSSpin]: http://link.zhihu.com/?target=https%3A//webkul.github.io/csspin/
[Feather icons]: http://link.zhihu.com/?target=https%3A//feathericons.com/
[Ion icons]: http://link.zhihu.com/?target=http%3A//ionicons.com/
[Font Awesome]: http://link.zhihu.com/?target=http%3A//fontawesome.io/
[Font Generator]: http://link.zhihu.com/?target=http%3A//brandmark.io/font-generator/
[On_Off FlipSwitch]: http://link.zhihu.com/?target=https%3A//proto.io/freebies/onoff/
[UIkit]: http://link.zhihu.com/?target=https%3A//getuikit.com/
[Bootstrap]: http://link.zhihu.com/?target=http%3A//getbootstrap.com/
[Foundation]: http://link.zhihu.com/?target=http%3A//foundation.zurb.com/
[head_ Cheatsheet]: http://link.zhihu.com/?target=https%3A//github.com/joshbuchea/HEAD
[Link 1]: http://link.zhihu.com/?target=http%3A//www.css88.com/archives/8052
[Ghost]: http://link.zhihu.com/?target=https%3A//ghost.org/
[What runs]: http://link.zhihu.com/?target=https%3A//www.whatruns.com/
[Learn anything]: http://link.zhihu.com/?target=https%3A//learn-anything.xyz/learn-anything