在本文中，我不会去谈 React、Angular、Vue 等等这些大的前端框架，也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集。 这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。 这个列表包含许多种类的资源，所以这里我将它们分组整理。 [h2]Javascript 库[/h2] [url=http://vincentgarreau.com/particles.js/]Particles.js [/url]— 一个用来在 web 中创建炫酷的浮动粒子的库 [url=https://threejs.org/]Three.js[/url] — 一个用来在 web 中创建 3d 物体和 3d 空间的库 [url=https://alvarotrigo.com/fullPage/#firstPage]Fullpage.js[/url]— 快速实现全屏滚动特性 [url=http://www.mattboldt.com/demos/typed-js/]Typed.js[/url] — 打字机效果 [url=http://imakewebthings.com/waypoints/]Waypoints.js [/url]— 滚动到某个元素位置时触发一个功能 [url=https://highlightjs.org/]Highlight.js [/url]— web 语法高亮 [url=http://www.chartjs.org/]Chart.js[/url] — 使用 JavaScript 创建漂亮的图表 [url=http://instantclick.io/]Instantclick[/url] — 能够明显加速网站加载时间，鼠标 hover 时预加载资源 [url=http://gionkunz.github.io/chartist-js/index.html]Chartist[/url] — 另一个图表库 [url=http://darsa.in/motio/#!introduction]Motio [/url]— 一个基于动画和平移的雪碧图库 [url=http://git.blivesta.com/animsition/]Animsition[/url] — CSS 实现动画过渡的 jQuery 插件 [url=https://github.com/luruke/barba.js]Barba.js[/url] — 流式页面过渡 [url=http://zurb.com/playground/twentytwenty]TwentyTwenty [/url]— 一个对比图片的可视化 diff 工具 [url=https://github.com/maxwellito/vivus#vivusjs]Vivus.js[/url] — 在 SVG 上绘制动画 [url=http://mynameismatthieu.com/WOW/]Wow.js [/url]— 滚动时展现动画 [url=https://github.com/anthonyly/Scrolline.js]Scrolline.js[/url] — 页面滚动时显示滚动进度 [url=http://velocityjs.org/]Velocity.js[/url] — 快速流畅的 JavaScript 动画 [url=http://michalsnik.github.io/aos/]Animate on scroll[/url] — 漂亮的页面滚动元素动画 [url=http://handlebarsjs.com/]Handlebars.js[/url] — Javascript 模板 [url=http://www.pixxelfactory.net/jInvertScroll/]jInvertScroll[/url] — 视差滚动 [url=https://github.com/peachananr/onepage-scroll]One page scroll[/url] — 又一个页面滚动库 [url=https://github.com/wagerfield/parallax]Parallax.js[/url] — 对智能设备方向变化做出响应的视差引擎 [url=http://twitter.github.io/typeahead.js/]Typeahead.js [/url]— 搜索补全 [url=http://skidding.github.io/dragdealer/]Dragdealer.js[/url] — 炫酷拖拽 [url=http://bouncejs.com/]Bounce.js [/url]— 创建炫酷的 CSS3 动画 [url=https://github.com/alvarotrigo/pagePiling.js]Pagepiling.js[/url] — 全屏滚动 [url=https://github.com/alvarotrigo/multiscroll.js]Multiscroll.js [/url]— 两列垂直反向滚动 [url=http://lab.ejci.net/favico.js/]Favico.js[/url] — 动态 favicon [url=http://aerolab.github.io/midnight.js/]Midnight.js [/url]— 固定头部切换效果 [url=http://animejs.com/]Anime.js [/url]— 动画库 [url=http://keycode.info/]Keycode[/url] — 获取键盘按键的 JavaScript keycode [url=http://rubaxa.github.io/Sortable/]Sortable[/url] — 拖拽插件 [url=http://projects.sergiodinislopes.pt/flexdatalist/]Flexdatalist [/url]— 自动补全 [url=https://slideout.js.org/]Slideout.js [/url]— 移动应用侧滑导航 [url=http://jquerymy.com/#/]Jquerymy[/url] — 使用 jQuery 实现双向数据绑定 [url=http://nosir.github.io/cleave.js/]Cleave.js [/url]— 实时格式化输入内容 [url=http://smalljs.org/client-side-routing/page/]Page[/url] — 客户端单页应用路由 [url=http://selectize.github.io/selectize.js/]Selectize.js[/url] — 用来添加 tag 的 Hybrid 选择框 [url=http://hernansartorio.com/jquery-nice-select/]Nice select [/url]— 创建漂亮的选择框的 jQuery 库 [url=http://tether.io/]Tether[/url] — 使用固定定位来创建相关元素 [url=https://github.com/HubSpot/shepherd]Shepherd.js [/url]— 为应用创建新手引导 [url=https://github.com/HubSpot/tooltip]Tooltip[/url] — tooltip 提示框 [url=https://select2.github.io/]Select2[/url] — Jquery 选择框插件 [url=http://izitoast.marcelodolce.com/]IziToast[/url] — 通知弹窗实现 [url=http://izimodal.marcelodolce.com/]IziModal [/url]— 模态框实现 [h2]CSS 库 / 设计相关[/h2] [url=https://daneden.github.io/animate.css/]Animate.css[/url] — 动画库 [url=https://flatuicolors.com/]Flat UI Colors [/url]— 扁平化设计配色 [url=https://getmdl.io/index.html]Material design lite[/url]— 基于 Google material design 的框架 [url=https://www.webpagefx.com/web-design/random-color-picker/]Colorrrs [/url]— 随机颜色生成器 [url=https://tympanus.net/Development/SectionSeparators/]Section separators[/url] — CSS 实现区域分割 [url=http://topcoat.io/]Topcoat[/url] — 框架 [url=https://www.kirupa.com/html5/ken_burns_effect_css.htm]Create ken burns effect [/url]— 使用 CSS3 动画实现 Ken burns 特效 [url=http://www.vittoriozaccaria.net/dyn-css/]DynCSS[/url] — 给 CSS 添加 function，动态化 CSS [url=https://www.minimamente.com/example/magic_animations/]Magic animations[/url] — CSS3 实现动画特效 [url=https://webkul.github.io/csspin/]CSSpin[/url] — css spinners 合集 [url=https://feathericons.com/]Feather icons[/url] — Icon 集合 [url=http://ionicons.com/]Ion icons[/url] — Icon 集合 [url=http://fontawesome.io/]Font awesome[/url] — Icon 集合 [url=http://brandmark.io/font-generator/]Font generator[/url] — 组合多个字体创建混合字体 [url=https://proto.io/freebies/onoff/]On/Off switch[/url] — 使用 CSS 创建 on/off 开关、radio 按钮 [url=https://getuikit.com/]UI Kit[/url] — 框架 [url=http://getbootstrap.com/]Bootstrap[/url] — 框架 [url=http://foundation.zurb.com/]Foundation [/url]— 框架 [h2]有用的产品/链接[/h2] [url=https://github.com/joshbuchea/HEAD]cheatsheet[/url] — 可以写在中的所有标签 [url=https://ghost.org/]Ghost [/url]— 基于 Node.js 的博客平台 [url=https://www.whatruns.com/]What runs[/url] — 一个用于网站技术分析的 Chrome 插件 [url=https://learn-anything.xyz/learn-anything]Learn anything [/url]— 一个强大的用于分析某个主题的思维导图 这是我个人有时在使用的一些工具/框架/库的一个列表。很高兴在[url=https://twitter.com/ognjengt]twitter[/url] 上和我联系，并分享你的发现。 译者：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