在本文中,我们不去谈 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 — 一个强大的用于分析某个主题的思维导图
如果你有什么好的工具、框架、库,欢迎推荐分享给我呦~ ~ ~
相关推荐
前端开发者手册.pdf
这份“Chrome开发者工具中文手册”旨在帮助用户深入理解和充分利用这个工具集,提升前端开发效率。 1. **元素检查与样式编辑**: - 使用`Elements`面板可以实时查看和修改网页的HTML结构,通过选择器定位元素,...
这是任何人都可以用来学习前端的实践手册, 它概述并讨论了前端工程的实践: 该如何学习...第二部分为成为一个前端开发人员确定了自主学习的直接资源 第三部分:前端开发工具 第三部分会简单地讨论一些前端开发工具的使用
为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。版本号:1.02.1808080
在实际开发中,Chrome Inspect 是一个不可或缺的工具,它极大地提高了前端开发者的工作效率,无论是在调试复杂的JavaScript问题,还是优化网页性能,都提供了直观且强大的支持。使用离线开发者工具包,开发者可以在...
这个工具库被发布到npm(Node Package Manager),意味着前端开发者可以非常方便地通过npm安装并引入到自己的项目中,避免了在多个项目之间重复编写和复制相同的辅助函数。npm的使用也使得版本管理和依赖管理变得...
1. **SDK(Software Development Kit)**: SDK是开发环境的核心,提供了开发、编译、调试智能卡应用所需的库、API、头文件和工具。它可能包括针对不同智能卡操作系统的特定版本,例如Java Card或ISO/IEC 7816标准。 ...
在早期版本的微信开发者工具中,集成的npm模块功能允许开发者引入和管理第三方JavaScript库,这在构建复杂功能或复用已有代码时非常有用。npm(Node Package Manager)是Node.js的包管理器,拥有大量的开源项目供...
"截图工具和屏幕标尺"这一主题涵盖了前端开发者日常工作中经常用到的两类实用工具。本文将深入探讨这些工具的功能、用途及其对前端开发的重要性。 首先,我们来谈谈屏幕标尺。在网页设计和开发中,准确地测量元素的...
本资源“史上最全的前端开发工具”显然是一个综合性的资料库,包含了多版本、多语言的前端API和教程,这对于前端开发者来说是一份极其宝贵的资源。下面将详细介绍其中可能涵盖的一些关键知识点: 1. HTML(超文本...
JavaScript 工具库如jQuery、React、Vue等,它们的核心原理在于对JavaScript原生API的封装和优化,提供了诸如DOM操作、事件处理、动画效果、Ajax请求等常用功能,同时引入模块化、异步编程和面向对象或函数式编程的...
总的来说,这个前端开发工程师取色小工具是一个高效、精准的色彩管理助手,它提供了颜色识别和记录功能,适应于各种开发需求,同时具备用户友好和国际化的特点。对于前端开发者和UI设计师来说,它无疑是一个实用且必...
前端UI框架是开发者用于构建用户界面的一系列预设组件和工具集合,它们通常基于HTML、CSS和JavaScript。这些框架提供了一套统一的设计规范和最佳实践,帮助开发者减少重复工作,提高代码质量和开发效率。ZensUI便是...
通过这个工具,开发者可以查看和操作组件实例,追踪状态变化,进行性能分析,甚至在开发过程中热重载Vue组件,极大地提升了开发和调试的效率。 总之,Vue DevTools是Vue.js开发不可或缺的助手,它结合了Chrome的...
设计师通常会使用Adobe Photoshop等专业软件来选取和编辑颜色,但这对于前端开发者来说,打开大型软件只是为了取个颜色确实有些不便。"前端超级好用的屏幕取色工具"正是为了解决这个问题而诞生的,它能够帮助开发者...
为了提高沟通效率和准确性,前端标注工具应运而生,其中Dorado是一款备受瞩目的专业前端标注工具。Dorado能够帮助开发者快速获取设计图上的关键信息,方便地将设计概念转化为实际代码,从而提升整体开发流程的效率。...
前端开发者手册中文版.zip,Front-end Developer HandBook. Read online//dwqs.gitbooks.io/frontenddevhandbook/content/
**痛点**:尽管Vite在性能方面表现优秀,但由于其相对年轻,与其他库和工具的兼容性还有待加强。此外,对于一些复杂的定制需求,Vite的配置选项可能不如Webpack那样丰富。 #### 结论 前端打包工具的发展历程清晰地...
总结来说,HBuilder作为一款优秀的前端开发工具,凭借其强大的功能和人性化的设计,深受开发者喜爱。无论是初学者还是经验丰富的开发者,都能从中受益,提升开发效率,打造更优质的Web应用。在日常工作中熟练运用...
前端铺子 是一个基于 Vue、uniApp、 ColorUi、uView 的web移动端解决方案, 它使用了最新的前端技术栈,完美支持微信小程序,包含功能:自定义TabBar与顶部、地图轨迹回放、 金融量化、抽奖、电子签名、图片编辑器...