节约 Web 开发时间的 67 个工具、库和资源

简评:作者没有讨论大型的前端框架如 React,Angular,Vue 等等,也没有讨论流行的代码编辑器如 Atom,VS Code,Sublime 等等,而是罗列出了一些加速开发者工作流的工具、资源和库。


JavaScript 库

Particles.js  —— 在网页上创建炫酷的漂浮例子的库,在网站首页比较常见。

Three.js —— 在网页上创建 3D 对象和空间的库,常用于网页游戏。

Fullpage.js —— 轻松创建全屏滚动的网页。

Typed.js —— 实现打字机的效果。

Waypoints.js  —— 实现滚动一个元素触发一个函数的最简单的方式。

Highlight.js —— 自动检测语言及高亮语法。

Chart.js —— 纯 JavaScript 实现炫酷图表。

Instantclick —— 大大提升网页加载效率,在鼠标悬停时预加载资源。

Chartist —— 另一个图表库。

Motio —— 实现基于 sprite 的动画和平移效果的库。

Animstion —— css 动画页面切换效果的 JQuery 插件

Barba.js —— 流畅和平滑的页面过渡效果。

TwentyTwenty —— 一个视觉差异工具,突出两个图像之间的差异。

Vivus.js —— 用于在 SVG 上绘制动画的库。

Wow.js —— 滚动时显示动画。

Scrolline.js —— 显示页面的滚动进度条。

Velocity.js —— 快速、平滑的 JavaScript 动画。

Animate on scroll —— 另一个滚动显示动画的库。

Handlebars.js —— JavaScript 模版。

jInvertScroll —— 轻量级的水平视差插件。

One page scroll —— 与 FullPage 类似。

Parallax.js —— 视觉引擎,对智能设备的方向做出反应。

Typeahead.js —— 自动匹配搜索。

Dragdealer.js —— 相当酷的实现拖动效果的库。

Bounce.js  —— 创建炫酷的 CSS3 动画。

Pagepiling.js —— 又一个 one page scroll.

Multiscroll.js  —— 实现多列滚动面板效果。

Favico.js —— 动态图标。

Midnight.js  —— 无缝切换固定标题。

Anime.js  —— 动画库。

Keycode —— 获得按键的 JavaScript 键码。

Sortable —— 拖动排序控件。

Flexdatalist —— 输入补全。

Slideout.js  —— 在网页上实现抽屉效果的侧边导航栏。

Jquerymy —— 使用 jquery 的两种数据绑定方式。

Cleave.js  —— 格式化输入内容。

Page —— 小型客户端路由库。

Selectize.js —— 用于添加标签的选择框。

Nice select —— 用于创建奈斯型选择框。

Tether —— 可以有效地固定绝对定位的元素。

Shepherd.js —— 实现指导用户使用应用的效果。

Tooltip —— 提示信息。

Select2 —— 丰富的自定义选择框。

IziToast —— 容易实现的 JS 通知。

IziModal —— 容易实现的 JS 弹窗。


CSS 库/设计类

Animate.css —— 动画库。

Flat UI Colors —— 简单有效的颜色。

Material design lite —— 基于 Google 的 Material Design。

Materialui.co —— 许多 Material Design 框架的资源。

Colorrrs  —— 随机颜色生成器。

Section separators —— CSS 分割线。

Topcoat —— 简单快速的 CSS 框架。

Create ken burns effect —— 使用 CSS 动画的 Ken Burns 效果。

DynCSS —— 为 CSS 添加函数,让它变成动态的。

Magic animations —— 人如其名。

CSSpin —— CSS 旋转控件集合。

Feather icons —— 图标。

Ion icons —— 图标。

Font awesome —— 图标。

Font generator —— 组合多种字体,生成一个混合体。

On/Off switch —— 开关按钮。

UI Kit —— 轻型的模块化框架。

Bootstrap —— 这个就不谈了。

Foundation  —— 号称最先进的响应式前端框架。


有用的产品/链接

<head> cheatsheet —— 可以进入 <head> 标签的所有内容列表。

Ghost —— 基于 node.js 的简单博客平台。

What runs —— 发现一个网站使用什么技术的 Chrome 插件。

Learn anything  —— 以思维导图形式提供各种学习资源,你值得拥有。


原文链接: 67 useful tools, libraries and resources for saving your time as a web developer


推荐阅读:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己写的一个网页开发常用效果与框架,可以自定义导出自己想要的部分。 1.通过帮助文档help.html查看所有效果与使用方法。 2.通过config.html配置符合你需要并导出js; 内容包含如下: A:效果类; 1.事件-同时兼容手机与pc的3种事件(start、move、end); 2.tab选项卡-各种切换6种; 3.电商产品主图-横向与纵向2种; 4.放大镜-电商主图放大镜、图鼠标悬停旁边出现放大版图效果各一个; 5.跑马灯-文字或图片不断档可支持鼠标悬停时停止; 6.仿alert弹窗-可以自定义样式,手机版pc版个一种; 7.列表下拉加载更多-伪数据加载与ajax异步加载个一种; 8.折叠菜单一个; 9.banner图效果-7种包含手机上支持手指滑动的; 10.时间轴-控制1种; 11.自定义滚动条-横向、纵向各一种; 12.临时禁用滚动条-禁用与启用方法各一个,也能禁用手机滚动条,同时解决px滚动条占用宽度问题。 13.图表等比例-使图片始终保持设定比例缩放等供3种不同形式; 14.回到顶部-点击回到浏览器顶部; 15.漂浮窗-小漂浮窗广告; 16.图集展示-偶尔能用到; 17.滚屏效果-手指上下滑动或鼠标滚轮滚动切换页面,可自己配一些动效!!!!!!; 18.常用表单验证; 19.左滑删除; 20.复选框全选与取消选中; 21.内容拖动!!!!!!; 22.dom输入; 23.单例定时器; 24.ios软键盘弹出fixed定位问题处理!!!!!!; B:架构类; 1.流程控制-主要解决多个ajax调用依赖问题; 2.面向对象的class方法-方便定义类与集成类; 3.require-实现模块化开发,简单实用; 提示:用!!!!!!标注结尾的在某些场景下可能出现bug;
编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值