`

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

阅读更多
在本文中,我们不去谈 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

    前端开发者手册.pdf

    Chrome 开发者工具中文手册

    这份“Chrome开发者工具中文手册”旨在帮助用户深入理解和充分利用这个工具集,提升前端开发效率。 1. **元素检查与样式编辑**: - 使用`Elements`面板可以实时查看和修改网页的HTML结构,通过选择器定位元素,...

    前端开发者手册完整版PDF最新版本

    这是任何人都可以用来学习前端的实践手册, 它概述并讨论了前端工程的实践: 该如何学习...第二部分为成为一个前端开发人员确定了自主学习的直接资源 第三部分:前端开发工具 第三部分会简单地讨论一些前端开发工具的使用

    微信Web开发者工具-Windows32

    为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。版本号:1.02.1808080

    chrome-inspect离线开发者工具包@194530_@196351.rar

    在实际开发中,Chrome Inspect 是一个不可或缺的工具,它极大地提高了前端开发者的工作效率,无论是在调试复杂的JavaScript问题,还是优化网页性能,都提供了直观且强大的支持。使用离线开发者工具包,开发者可以在...

    outils前端业务代码工具库

    这个工具库被发布到npm(Node Package Manager),意味着前端开发者可以非常方便地通过npm安装并引入到自己的项目中,避免了在多个项目之间重复编写和复制相同的辅助函数。npm的使用也使得版本管理和依赖管理变得...

    智能卡开发者工具包

    1. **SDK(Software Development Kit)**: SDK是开发环境的核心,提供了开发、编译、调试智能卡应用所需的库、API、头文件和工具。它可能包括针对不同智能卡操作系统的特定版本,例如Java Card或ISO/IEC 7816标准。 ...

    微信开发者工具,包含使用npm模块功能,最新版本的开发者工具没有这个功能了

    在早期版本的微信开发者工具中,集成的npm模块功能允许开发者引入和管理第三方JavaScript库,这在构建复杂功能或复用已有代码时非常有用。npm(Node Package Manager)是Node.js的包管理器,拥有大量的开源项目供...

    截图工具和屏幕标尺,前端必备

    "截图工具和屏幕标尺"这一主题涵盖了前端开发者日常工作中经常用到的两类实用工具。本文将深入探讨这些工具的功能、用途及其对前端开发的重要性。 首先,我们来谈谈屏幕标尺。在网页设计和开发中,准确地测量元素的...

    史上最全的前端开发工具

    本资源“史上最全的前端开发工具”显然是一个综合性的资料库,包含了多版本、多语言的前端API和教程,这对于前端开发者来说是一份极其宝贵的资源。下面将详细介绍其中可能涵盖的一些关键知识点: 1. HTML(超文本...

    前端跨界开发指南:JavaScript工具库原理解析与实战.docx

    JavaScript 工具库如jQuery、React、Vue等,它们的核心原理在于对JavaScript原生API的封装和优化,提供了诸如DOM操作、事件处理、动画效果、Ajax请求等常用功能,同时引入模块化、异步编程和面向对象或函数式编程的...

    前端开发工程师取色小工具

    总的来说,这个前端开发工程师取色小工具是一个高效、精准的色彩管理助手,它提供了颜色识别和记录功能,适应于各种开发需求,同时具备用户友好和国际化的特点。对于前端开发者和UI设计师来说,它无疑是一个实用且必...

    ZensUI为前端开发者提供了一个易上手的语义化的高兼容性的前端UI框架

    前端UI框架是开发者用于构建用户界面的一系列预设组件和工具集合,它们通常基于HTML、CSS和JavaScript。这些框架提供了一套统一的设计规范和最佳实践,帮助开发者减少重复工作,提高代码质量和开发效率。ZensUI便是...

    Vue开发者工具,Chrome插件

    通过这个工具,开发者可以查看和操作组件实例,追踪状态变化,进行性能分析,甚至在开发过程中热重载Vue组件,极大地提升了开发和调试的效率。 总之,Vue DevTools是Vue.js开发不可或缺的助手,它结合了Chrome的...

    前端超级好用的屏幕取色工具

    设计师通常会使用Adobe Photoshop等专业软件来选取和编辑颜色,但这对于前端开发者来说,打开大型软件只是为了取个颜色确实有些不便。"前端超级好用的屏幕取色工具"正是为了解决这个问题而诞生的,它能够帮助开发者...

    前端标注工具dorado

    为了提高沟通效率和准确性,前端标注工具应运而生,其中Dorado是一款备受瞩目的专业前端标注工具。Dorado能够帮助开发者快速获取设计图上的关键信息,方便地将设计概念转化为实际代码,从而提升整体开发流程的效率。...

    前端开发者手册中文版.zip

    前端开发者手册中文版.zip,Front-end Developer HandBook. Read online//dwqs.gitbooks.io/frontenddevhandbook/content/

    前端打包工具的演进ppt

    **痛点**:尽管Vite在性能方面表现优秀,但由于其相对年轻,与其他库和工具的兼容性还有待加强。此外,对于一些复杂的定制需求,Vite的配置选项可能不如Webpack那样丰富。 #### 结论 前端打包工具的发展历程清晰地...

    HBuilder前端开发工具

    总结来说,HBuilder作为一款优秀的前端开发工具,凭借其强大的功能和人性化的设计,深受开发者喜爱。无论是初学者还是经验丰富的开发者,都能从中受益,提升开发效率,打造更优质的Web应用。在日常工作中熟练运用...

    前端铺子开发者小程序在线课堂+工具组件小程序uniapp移动端

    前端铺子 是一个基于 Vue、uniApp、 ColorUi、uView 的web移动端解决方案, 它使用了最新的前端技术栈,完美支持微信小程序,包含功能:自定义TabBar与顶部、地图轨迹回放、 金融量化、抽奖、电子签名、图片编辑器...

Global site tag (gtag.js) - Google Analytics