常用的前端开发者的工具、库和资源入门基础知识_工具基础知识教程

这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。Javascript 库Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库Three.js — 一个用来在 web 中创建 3

常用的前端开发者的工具、库和资源入门基础知识

这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。

常用的前端开发者的工具、库和资源入门基础知识_工具基础知识教程

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 — 一个基于动画和平移的雪碧图库

Animstion — 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 — 框架

有用的产品/链接

<head>cheatsheet — 可以写在<head>中的所有标签

Ghost — 基于 Node.js 的博客平台

What runs — 一个用于网站技术分析的 Chrome 插件

Learn anything — 一个强大的用于分析某个主题的思维导图


这是我个人有时在使用的一些工具/框架/库的一个列表。

海计划公众号
(0)
上一篇 2020/04/05 01:56
下一篇 2020/04/05 01:56

您可能感兴趣的内容

  • Js把CSV与Excel转为Json菜鸟攻略_json攻略教程

    有两个 JavaScript 插件可用于读取和处理 CSV 和 Excel 文件,之后仅对自己的脚本进行编码即可。CSV 表示 :用逗号分隔值,这是一种文件格式,用于存储表格数据,如电子表格或数据库等。 可以将 CSV 格式的文件导入或导出到将数据存储在表中的程序中。JSON: JavaScript 对象符号在本教程中,我们将探索并演示如何把数据以 CSV

    2020/03/24
  • hugo小白常识_静态站点生成器

    hugo小白常识 官方网址:https://gohugo.io GitHub:https://github.com/gohugoio/hugo 简介描述:静态站点生成器 Hugo是…

    2020/03/11
  • CSS定位Position属性小白攻略_属性小白知识

    用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题;这就要用到Position属性。 Position属性有四个值:static、fixed、absolute和relative。后面两个值在布局中的定位里是经常用到的,顾名思义:● absolute是指绝对定位即将对象从文档流中拖出,使用left,right,top,bottom等属

    2020/03/20
  • JS对象Object常用方法整理入门指南_对象教程视频

    查看对象的方法,继续控制台输出,如图:hasOwnProperty():返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。let object1 = new Object();
    object1.property1 = 42;object1.hasOwnProperty(‘property1’); // true
    object1.

    2020/03/22
  • 优秀程序员的代码经验总结使用指南_经验入门教程

    这是一篇值得收藏起来,隔三差五就拿来重读的文章!因为作者向你保证,他“遇到的所有糟糕的代码,都是因为没采纳这些实践经验。而任何一段优秀的代码,都采纳了至少部分实践经验。”还等什么?赶快看看这些经验就是什么吧?我已经写了20年代码了,在此期间曾与17个团队共事过,使用不同的语言做过数百个项目。这些项目从最简单的博客网站,到支持每秒3000多次请求的API,还有

    2020/03/26
  • npm使用国内淘宝镜像的方法基础入门_npm小白帮助

    npm使用国内淘宝镜像的方法基础入门 npm的服务器在国外,拉取npm包的列表、下载包这个过程会比较缓慢。凡是包管理工具基本都有这个问题,例如maven、pip等,这些问题都可以通…

    2020/03/19
  • 「译」无处不在的微浏览器攻略教程_浏览器新手入门

    你已经在各个地方见到了它 —— Tweet 里提及到的网站的小型缩略预览图,Slack 频道或者 Whatsapp 群聊里详细的网站描述。这些链接的预览图对大多数人来说司空见惯,因此我们很少留意网站设计对生成的预览的影响。然而,在吸引新用户和增加参与度上,这些预览图可以说是最重要的 —— 可能比 SEO 还重要。而令人担忧的是,大多数网站分析对这种类型的流量

    2020/03/31
  • PHP异常处理机制入门百科_异常菜鸟攻略

    1、异常概述异常(Exception)是一种错误处理机制,用于在指定的错误发生时改变脚本的正常流程。当异常被触发时,当前代码状态被保存,代码执行被切换到预定义的异常处理器函数(如果有)根据情况,处理器也许会从保存的代码状态重新开始执行代码,终止脚本执行,或从代码中另外的位置继续执行脚本2、异常的基本使用当异常被抛出时,其后的代码不会继续执行,PHP 会尝试查

    2020/03/31
  • Js数组拍平/扁平化的实现总汇基础知识教程_数组小白教程

    Js数组拍平/扁平化的实现总汇基础知识教程 题目: 请写出一个数组拍平函数。效果如下:  var arr=[‘a’, [‘b’, ‘c’], 2, [‘d’, ‘e’, …

    2020/03/20
  • fontsup菜鸟教程_免费下载字体、字体搜索查询。

    fontsup攻略教程 官方网址:https://fontsup.com/ 简介描述:免费下载字体、字体搜索查询。 Fontsup.com is a database contai…

    2020/03/06
  • mongodb shell 运行js脚本的四种方式基础知识入门_js脚本基础知识入门

    1. 交互式 mongo shell大部分的 mongodb 教程,在第一章都会讲解这种方式。mongo 127.0.0.1:27017
    use test
    db.users.findOne()2. mongo –eval 运行一段脚本不进入交互模式,直接在 OS 的命令行下运行一段mongodb脚本。mongo 127.0.0.1:27017/test –

    2020/04/05
  • jquery.barrager.js小白基础_专业的jquery网页弹幕插件

    jquery.barrager.js小白基础 GitHub:https://github.com/yaseng/jquery.barrager.js 简介描述:专业的jquery网…

    2020/03/11
  • 封装的一个Ajax小框架指南攻略_ajax小白常识

    封装的一个Ajax小框架指南攻略 在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架:   /** * fr…

    2020/03/20
  • 接手代码太烂,要不要辞职?基础指南_代码小白常识

    来自:闰土小叔(微信号:running_hacker),作者:小叔不浪何以撩天下事情是这样的,前几天在朋友圈,我看到一朋友发表了一条说说:“入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构。关键是,离职的那位仁兄走之前,还跟我在QQ上说,老哥辛苦了,我

    2020/04/03
  • 通过框架设计理解React、Angular、Vue区别基础教程_框架小白帮助

    我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们可以从框架设计上入手试着分析它们。一、职责范围职责范围就是框架设计之初要考虑的范围,是一手全包还是只封装底层核心代码?简单说就是这个框架可以为你做多少事情1.small

    2020/03/23
  • Enkel基础知识入门_在线RSS多源合并订阅工具

    Enkel基础知识入门 官方网址:https://enkel.fyi/ 简介描述:在线RSS多源合并订阅工具 「Enkel」是国外的一家免费内容订阅服务网站,支持把多个源合并成一个…

    2020/03/10