`

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 — 一个强大的用于分析某个主题的思维导图

 

 

如果你有什么好的工具、框架、库,欢迎推荐分享给我呦~ ~ ~

分享到:
评论

相关推荐

    前端开发者的IED工具

    标题 "前端开发者的IED工具" 暗示我们讨论的主题是专为前端开发者设计的集成开发环境(Integrated Development ...在选择和学习这类工具时,了解其核心特性和如何最大化利用这些特性,是每个前端开发者必备的技能。

    Chrome 开发者工具中文手册

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

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

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

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

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

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

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

    一个轻量、可拓展、针对手机网页的前端开发者调试面板

    本文将深入探讨“一个轻量、可拓展、针对手机网页的前端开发者调试面板”——vConsole,以及它如何在Vue、React等框架中发挥作用,以及其作为微信小程序官方调试工具的角色。 **vConsole:移动前端调试的得力助手**...

    前端开发人员手册2017版

    总结,《前端开发人员手册2017版》是一本全面覆盖2017年前端开发生态的宝典,从基础到高级,从工具到实践,为开发者提供了丰富的学习资源和实战指导。无论你是刚入门的新手还是希望更新知识的老兵,都能从中受益。...

    前端开源库-jeefo_resource

    总之,"Jeefo_resource"作为一个前端开源库,为Jeefo框架带来了强大的资源管理能力,使得开发者能够更高效、更智能地处理Web应用中的各种资源,提升了项目的可维护性和用户体验。通过深入学习和使用这个库,开发者...

    IE开发者工具 F12调试工具 详细使用说明文档

    IE开发人员工具 F12调试工具 就是为前端开发人员开发页面而设计的工具 提供一系列的小工具 让你可以方便的查找 调试页面的BUG 包括HTML代码 CSS代码和JavaScript代码 同时 他也提供了一些虽然比较鸡肋 但是还能...

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

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

    前端标注工具dorado

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

    HTML开发像素测量工具

    同时,这些工具大多数都是轻量级的,可以直接在浏览器中运行,无需安装额外的软件,节省了开发者的时间和资源。 在实际工作中,HTML开发者可以结合这两款工具,TakeColor用于选取和调试颜色,jruler用于测量元素...

    前端开发工具以及资源压缩包

    了解这些框架的基本概念、API和生命周期方法是每个前端开发者必须掌握的技能。 2. **构建工具**:像Webpack和Gulp这样的构建工具能够自动化处理项目中的编译、打包、压缩等任务。Webpack是一个模块打包器,通过配置...

    前端开源库-mdi

    综上所述,“前端开源库-mdi”是关于使用Material Design Icons这一前端图标库的知识点,它为开发者提供了丰富的图标资源,支持多种格式和集成方式,是实现Material Design风格界面的重要工具。通过合理利用MDI,...

    JS检测浏览器开发者工具是否打开的方法详解

    在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具,比如前端爬虫检测,如果检测到用户打开了控制台就认为是潜在的爬虫用户,再通过其它策略对其进行处理。本篇文章主要讲述几种前端JS检测开发者工具是否...

    "Vue 开发者全方位学习资源库:从零基础到技能飞跃"

    这个资源库是 Vue 开发者的强大后盾,它为开发者提供了一个从零开始的全方位学习平台。无论是对前端开发一无所知的新手,还是希望提升技能的资深工程师,都能在这个资源库中找到适合自己的学习材料。这里不仅有深入...

    前端工程师必备前端开发资源必备.rar

    了解如何使用HTML标签创建各种元素,如标题、段落、链接、图片和表格,是每个前端开发者的基本功。 2. CSS(层叠样式表):CSS用来控制网页的布局和外观,包括颜色、字体、尺寸、对齐方式等。通过选择器、盒模型、...

Global site tag (gtag.js) - Google Analytics