在本文中,我们不去谈 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 — 一个强大的用于分析某个主题的思维导图
如果你有什么好的工具、框架、库,欢迎推荐分享给我呦~ ~ ~
相关推荐
标题 "前端开发者的IED工具" 暗示我们讨论的主题是专为前端开发者设计的集成开发环境(Integrated Development ...在选择和学习这类工具时,了解其核心特性和如何最大化利用这些特性,是每个前端开发者必备的技能。
这份“Chrome开发者工具中文手册”旨在帮助用户深入理解和充分利用这个工具集,提升前端开发效率。 1. **元素检查与样式编辑**: - 使用`Elements`面板可以实时查看和修改网页的HTML结构,通过选择器定位元素,...
在早期版本的微信开发者工具中,集成的npm模块功能允许开发者引入和管理第三方JavaScript库,这在构建复杂功能或复用已有代码时非常有用。npm(Node Package Manager)是Node.js的包管理器,拥有大量的开源项目供...
"截图工具和屏幕标尺"这一主题涵盖了前端开发者日常工作中经常用到的两类实用工具。本文将深入探讨这些工具的功能、用途及其对前端开发的重要性。 首先,我们来谈谈屏幕标尺。在网页设计和开发中,准确地测量元素的...
总的来说,这个前端开发工程师取色小工具是一个高效、精准的色彩管理助手,它提供了颜色识别和记录功能,适应于各种开发需求,同时具备用户友好和国际化的特点。对于前端开发者和UI设计师来说,它无疑是一个实用且必...
本文将深入探讨“一个轻量、可拓展、针对手机网页的前端开发者调试面板”——vConsole,以及它如何在Vue、React等框架中发挥作用,以及其作为微信小程序官方调试工具的角色。 **vConsole:移动前端调试的得力助手**...
总结,《前端开发人员手册2017版》是一本全面覆盖2017年前端开发生态的宝典,从基础到高级,从工具到实践,为开发者提供了丰富的学习资源和实战指导。无论你是刚入门的新手还是希望更新知识的老兵,都能从中受益。...
总之,"Jeefo_resource"作为一个前端开源库,为Jeefo框架带来了强大的资源管理能力,使得开发者能够更高效、更智能地处理Web应用中的各种资源,提升了项目的可维护性和用户体验。通过深入学习和使用这个库,开发者...
IE开发人员工具 F12调试工具 就是为前端开发人员开发页面而设计的工具 提供一系列的小工具 让你可以方便的查找 调试页面的BUG 包括HTML代码 CSS代码和JavaScript代码 同时 他也提供了一些虽然比较鸡肋 但是还能...
设计师通常会使用Adobe Photoshop等专业软件来选取和编辑颜色,但这对于前端开发者来说,打开大型软件只是为了取个颜色确实有些不便。"前端超级好用的屏幕取色工具"正是为了解决这个问题而诞生的,它能够帮助开发者...
为了提高沟通效率和准确性,前端标注工具应运而生,其中Dorado是一款备受瞩目的专业前端标注工具。Dorado能够帮助开发者快速获取设计图上的关键信息,方便地将设计概念转化为实际代码,从而提升整体开发流程的效率。...
同时,这些工具大多数都是轻量级的,可以直接在浏览器中运行,无需安装额外的软件,节省了开发者的时间和资源。 在实际工作中,HTML开发者可以结合这两款工具,TakeColor用于选取和调试颜色,jruler用于测量元素...
了解这些框架的基本概念、API和生命周期方法是每个前端开发者必须掌握的技能。 2. **构建工具**:像Webpack和Gulp这样的构建工具能够自动化处理项目中的编译、打包、压缩等任务。Webpack是一个模块打包器,通过配置...
综上所述,“前端开源库-mdi”是关于使用Material Design Icons这一前端图标库的知识点,它为开发者提供了丰富的图标资源,支持多种格式和集成方式,是实现Material Design风格界面的重要工具。通过合理利用MDI,...
在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具,比如前端爬虫检测,如果检测到用户打开了控制台就认为是潜在的爬虫用户,再通过其它策略对其进行处理。本篇文章主要讲述几种前端JS检测开发者工具是否...
这个资源库是 Vue 开发者的强大后盾,它为开发者提供了一个从零开始的全方位学习平台。无论是对前端开发一无所知的新手,还是希望提升技能的资深工程师,都能在这个资源库中找到适合自己的学习材料。这里不仅有深入...
了解如何使用HTML标签创建各种元素,如标题、段落、链接、图片和表格,是每个前端开发者的基本功。 2. CSS(层叠样式表):CSS用来控制网页的布局和外观,包括颜色、字体、尺寸、对齐方式等。通过选择器、盒模型、...