awesome-frontend

A curated list of amazingly awesome frontend libraries, resources and shiny things.
https://github.com/JingwenTian/awesome-frontend

Last synced: 7 days ago
JSON representation

6. 在线工具
- 24.3 Web Sockets
  - frontend-dev-bookmarks
  - 30-seconds-of-code
  - awesome-vue
  - Kraken.io - Online Image Optimizer
  - TinyJPG - Compress JPEG images intelligently
  - IcoMoon App
  - Glyphter - The SVG Font Machine
  - Free Perfect Icons - 矢量图 svg 图标下载
  - Codrops - Useful resources
  - project-guidelines - JavaScript工程项目的一系列最佳实践策略
  - react-in-patterns - React 模式
  - javascript-algorithms - JavaScript 算法与数据结构
  - css-protips - CSS 专业技巧
  - Airbnb Engineering & Data Science - Airbnb 前端开源项目
  - LEARN REGEX THE EASY WAY - 正则表达式学习
  - Front-End Developer Handbook 2016
  - Front-End Developer Handbook 2017
  - 前端工程师手册
  - 前端工程师手册 - 包括前端开发实践、学习前端开发、前端开发工具
  - D3 in Depth - 可视化引擎 D3 的教程
  - Canvas: Draw on the web - HTML5 Canvas 教程
  - Front-End Developer Handbook 2018
  - Front-End Developer Handbook 2017
  - 33-js-concepts - 每个 JavaScript 工程师都应懂的33个概念「[翻译](https://github.com/stephentian/33-js-concepts)」
  - clean-code-javascript - javascript 编码风格指南
  - Front-End-Checklist - The perfect Front-End Checklist for modern websites and meticulous developers http://frontendchecklist.com
  - Airbnb 的 JavaScript 编码规范
  - joshbuchea/HEAD - HTML 网页的 head 元素指南
  - Front-End-Performance-Checklist - 前端性能优化清单
  - 30-seconds-of-css
  - frontend-guidelines - Some HTML, CSS and JS best practices.
  - Front-end-tutorial - 前端涉及的所有知识体系
  - vue-design - Vue技术内幕
  - awesome-javascript
  - <head> cheatsheet - <head> 标签的内容清单
  - JavaScript Standard Style
  - Front-end Code Standards & Best Practices
  - Glyphter - The SVG Font Machine
  - storybooks/storybook - 各大公司的 UI 组件库的 Storybook 展示 https://storybook.js.org/examples/
1. 开发工具
- 24.3 Web Sockets
  - VSCode
  - Sublime Text
14. 代码高亮插件/代码编辑器
- 13.20 视差滚动(Parallax Scrolling)
5. 浏览器扩展(Chrome Extensions)
- 24.3 Web Sockets
13. 页面交互
- 13.6 进度条/加载动画(Loading)
  - loading.io - 一个 Loading 图标的网站
  - loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架
  - sonic.js
  - css-loaders
  - spin.js
  - Sausage - 跟踪滚动条并记录当前阅读所处节点
  - nanobar - Very lightweight progress bars.
  - fakeLoader.js
  - progress.js
  - jquery-ajax-progress
  - HubSpot/pace - Pace 是一个页面加载进度条工具
  - waitMe - 很漂亮的loading效果
- 13.1 Slider
  - TouchSlide - 触屏滑动特效(焦点图,Tab切换)
  - iscroll - Smooth scrolling for the web
  - Swiper - Most modern mobile touch slider
  - better-scroll - inspired by iscroll, and it supports more features and has a better scroll perfermance
  - PhotoSwipe
  - Swipe - the most accurate touch slider
  - OwlCarousel - create beautiful responsive carousel slider
  - iSlider - 移动端滑动组件
  - TouchSlide - 触屏滑动特效(焦点图,Tab切换)
  - jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
  - Glide.js - 轻量级滑块组件
  - slick - the last carousel you'll ever need
- 13.4 图片轮播(幻灯片)/图片展示
  - ImageLightbox.js - 灯箱效果
  - Intense Images - 全屏查看图片
  - react-slick - React 实现的轮播图插件
  - Holder.js - Client-side image placeholders.
  - ResponsifyJS - 让图像完全响应式而不会牺牲图像的主要部分
  - responsive-images.js
  - watermarkjs - 一个在浏览器中添加图片水印的 JS 库
  - zoom.js - 一个 jQuery 图片放大插件
  - prettyPhoto
  - FlickerPlate - A cool jQuery plugin that lets you flick through content.
  - RowGrid.js - 在径直的行里放置图片
  - JQuery Panorama Viewer - 全景视图
  - Picturefill - 一个响应式图片 JS 插件
  - Turntable.js - 轻易实现图像的3D旋转
  - Picturefill - 一个响应式图片 JS 插件
  - Turntable.js - 轻易实现图像的3D旋转
  - FlexSlider
- 13.5 图片剪裁/图片处理/图片转换
  - DD_belatedPNG.js - 让IE6支持透明PNG图片
  - html2canvas - HTML转图片(实现纯JS网页截图)
  - smartcrop.js - 智能图片裁剪库
  - dom-to-image - HTML转图片
  - CSSgram - CSS 实现的 Instagram 滤镜库
  - FocusPoint.js 实现图片的响应式裁剪
  - rasterizeHTML.js - HTML转图片(网页截图)
  - merge-images - 多张图片合成一张图片的浏览器 JS 库，使用了 Canvas
  - cropperjs - 图片裁切
  - instagram.css - 另一个 CSS 实现的 Instagram 滤镜库
  - Jcrop - Image Cropping Plugin for jQuery
  - imgareaselect
  - jQuery.eraser - 图像擦除插件
  - antimoderate - 图片模糊库
  - domvas - HTML转图片
  - react-image-crop - React 的图片剪裁插件
  - croppic - an image cropping jquery plugin
  - vue-cropper - Vue.js 的图片剪裁插件
  - react-cropper - React 的图片剪裁插件
- 13.18 隐藏或展示页面元素
  - Headroom.js - 在不需要页头时将其隐藏
  - oriDomi - 像指一样折叠Dom元素
  - Readmore.js - 内容显示与隐藏插件
- 13.17 拖拽组件
  - dragula - 一个让拖放操作变简单的 JS 库
  - react-dnd - React 拖拽组件
  - Draggabilly - 专注于拖拽功能的 JS 库
  - GridList - 可拖拉的响应式列表库
- 13.3 懒加载/加载监听/预加载
  - lazySizes
  - layzr.js - 一个小巧快速的图片懒加载库
  - imagesLoaded
  - Echo.js
  - PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
  - waitForImages - 图片加载监听库
  - lazyload.js
  - bindWithDelay - jQuery Plugin For Delayed Event Execution
  - TypeWatch - 停止输入时调用
  - jquery_lazyload
- 13.9 滚动侦测(ScrollSpy)
  - ScrollMagic - 像进度条一样使用滚动条
  - Waypoints
  - jquery-scrollspy(1)
  - jquery-scrollspy(2)
- 13.11 平滑滚动插件(Smooth Scroll)
  - elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件
  - scrollUp
  - jquery.scrollTo - 平滑滚动到页面指定位置
  - smooth-scroll
  - jquery-smooth-scroll
- 13.20 视差滚动(Parallax Scrolling)
  - parallax.js
  - skrollr
  - jparallax
- 13.14 转场效果
  - Animsition - 页面切换时的过渡效果
- 13.12 全屏滚动/全屏切换
  - onepage-scroll
  - pagePiling.js - 全屏滚动效果
  - zepto.fullpage - 专注于移动端的fullPage.js
  - screenfull.js - 切换全屏模式
  - fullPage.js
- 13.16 触控事件
  - Hammer.js
  - jquery.event.move.js
- 13.13 分屏滚动
  - multiscroll.js - 分屏滚动效果
- 13.19 滚动条(Scrollbar)
  - nanoScrollerJS
  - jScrollPane
  - tinyscrollbar
  - jquery.scrollbar
  - perfect-scrollbar
- 13.15 固定元素(Sticky)
  - jquery.pin - 固定页面元素
  - sticky - jQuery Plugin for Sticky Objects
  - stickUp
  - Slinky.js - 堆叠头部创建滑动导航列表
- 13.2 瀑布流
  - Bricklayer
- 13.7 侧滑插件(offcancas)
  - pushy - a responsive off-canvas navigation menu
  - Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单
- 13.10 滚动加载更多/下拉刷新(Pull to Refresh)
  - jScroll
  - web-pull-to-refresh
  - pulltorefresh
  - RubberBand.js - add pull-to-refresh functionality to any page.
- 13.8 菜单(Menu)
  - SuperFish - 基于jQuery的级联下拉菜单
  - metisMenu - A jQuery menu plugin
12. 日期格式化 & 时间轴
- 10.10 样式修正
  - Moment.js - 日期处理
  - date-utils - Date Pollyfills for Node.js and Browser
  - timeago.js
  - Smart Time Ago - 显示相对时间
  - timeline.js
3. 模拟数据( Mock )
- 24.3 Web Sockets
  - JSONPlaceholder
  - Mock.js - 一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试
  - lowdb - A small local JSON database powered by lodash
  - yapi - YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台
0. 前端自动化(Workflow)
- Duo
- Sea.js
- Duo
- Duo
- Duo
- node-prune - Remove unnecessary files from node_modules
- Component
- Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具集
- Webpack - module bundler
- Yeoman - a set of tools for automating development workflow
- F.I.S - 前端集成解决方案
- analyze-css - CSS 选择器的复杂度和性能分析器
- use-gulp
- LABjs - 文件加载器
- css-modulesify - CSS模块加载器
- Stylus - Expressive, dynamic, robust CSS
- Sea.js
- Duo
1. 前端UI框架(Frameworks)
- Amaze UI
- Framework7
- Pure CSS
- Bootstrap
- UIkit
- topcoat
- Materialize - 一个基于 Material Design 的 CSS 框架
- alibaba/ice - 飞冰是一套基于 React 的中后台应用解决方案
- Fries
- mui
- mustard-ui - 一个简洁、好看的 CSS 框架，压缩后只有5.28KB
- Semantic UI
- taro-ui - 一款基于 Taro 框架开发的多端 UI 组件库
- App.js
- ionic framework
- jQuery Mobile
- wired-elements - 一个有手绘效果的网页组件库
- Foundation
- Office UI Fabric - 微软 Office 前端团队的框架
- Layui - 经典模块化前端UI框架
2. JavaScript 框架汇总
- Vanilla JS
- Can.js
- Flapjax - 一个支持FRP的JavaScript框架
- meili/minui - 基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化
- functional.js
- Angular
- Flutter - Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面
- underscore.js
- Sprint.js - 一个高性能、小体积的 DOM 操作库
- ant-design - A UI Design Language
- ant-design-pro - An out-of-box UI solution for enterprise applications
- Vuex - 一个专门为 Vue.js 应用设计的状态管理架构
- Lo-Dash - A JavaScript utility library
- mousetrap - Simple library for handling keyboard shortcuts in Javascript
- Zepto.js
- react
- AlloyLever - 移动web开发者工具面板
- jQuery
- ember.js
- Backbone.js
- Vux - 基于 Vue 和 WeUI 的 UI 组件库
- vue-i18n
- vuetify - vue2.0组件库
- dcloudio/uni-app - 使用 Vue.js 开发跨平台应用的前端框架 http://uniapp.dcloud.io
- NervJS/taro - 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用
- ant-design-mobile - A configurable Mobile UI
- Lazy.js - a functional utility library for JavaScript
- Tencent/weui-wxss - WeUI for 小程序为微信小程序量身设计
- Mint UI：基于 Vue.js 的移动端组件库
- knockout
- Meituan-Dianping/mpvue - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
- youzan/vant-weapp - 轻量、可靠的小程序 UI 组件库 https://youzan.github.io/vant-weapp
- Tencent/wepy - 小程序组件化开发框架
- KeyboardJS - A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.
- Way.js - 双向数据绑定库
- vueComponent/ant-design-vue - An enterprise-class UI components based on Ant Design and Vue.
- iView - 一套基于 Vue.js 的高质量 UI 组件库
- Weex - Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架
- Avalon
- KISSY
- didi/chameleon - 一套代码运行多端，一端所见即多端所见 https://CML.JS.org
- jquery.hotkeys
- Ractive.js
- vonic - 基于 Vue.js 和 Ionic 的移动 UI 组件库
- Min.js - Super minimal selector and event library
- jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用
- at-ui - 一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站产品
- Keys.js - 应用快捷键
- Vue.js - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)
- Electron - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
- simple-hotkeys
- Vanilla JS
- Flapjax - 一个支持FRP的JavaScript框架
- Fn.js
- boiler - a utility library that makes tasks in JavaScript easier
- zhuanzhuanfe/fancy-mini - 小程序代码库，封装一些常用的功能模块和ui组件。
- skel.js - A lightweight responsive framework
- electron-react-boilerplate - Electron应用程序样板(基于React、Redux、React Router、Webpack、React Transform HMR用于应用程序快速开发)
- Underscore.string.js字符串操作库
- Bacon.js - A small functional reactive programming lib for JavaScript.
- PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API
3. 前端游戏框架
- Egret Engine
- three.js
- EaselJS
- p2.js - web 物理引擎
- cocos2d-html5
- Quintus
- AlloyStick
- LimeJS
- The-Best-JS-Game-Framework
- CanvasEngine
- Stage.js
4. ui组件库(CSS Framework)
- NEC - 更好的CSS方案
- NEJ - 更好的JS解决方案
- light7 - A Light and easy to use UI Lib
- Spectre.css - 轻量、响应式的现代 CSS 框架
- magic-of-css
- FrozenUI - 腾讯移动端组件库
- GMU - 基于zepto的ui组件库，适用于移动端
- jQuery WeUI - WeUI的jQuery版本
- WeUI - 微信官方UI库
- Primer - The CSS toolkit and guidelines that power GitHub
- Pure CSS Components
5. 基础模版
- MetaHandler.js：移动端适配各种屏幕无痛工具脚本
- 参考: 使用Flexible实现手淘H5页面的终端适配
- flexible demo 1
- flexible demo 2
- Modernizr
- HTML5 BOILERPLATE
- Free Wall - 创建桌面，移动和平板的动态网格布局
- lib-flexible: 移动端自适应方案
- -prefix-free - Break free from CSS prefix hell
- Enquire.js - Awesome Media Queries in JavaScript
- es6-promise - Promise 对象的兼容
- cssFx - 为CSS3自动生成浏览器前缀
- ieBetter.js - make ie browser like a morden browser main for ie6~ie8
- responsive-page
- pageResponse
- Responsive - 响应式布局
- HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法
- Normalize.css
- flexible demo 1
- flexible demo 2
10. 表单处理
- 10.1 表单验证(Form Validator)/表单提示
- 10.5 上传组件
- 10.6 日期选择
  - GMU 日历组件
  - API文档
  - DEMO
  - Mobiscroll
  - Both Date and Time picker widget based on twitter bootstrap
  - price-calendar - 价格日历
  - airbnb/react-dates - Airbnb 的日期选择器
  - PriceCalendar - 酒店价格日历
  - price_calendar - 含有商品价格的日历控件
  - Pikaday - 日期选择器
  - tui.calendar - A JavaScript calendar that everything you need.
- 10.2 < input > 相关
  - cleave.js - 格式化你的输入内容
- 10.3 < select > 相关
- 10.9 自动完成插件
  - At.js - 一个Twitter/微博样式的@自动完成插件
  - typeahead.js - a fast and fully-featured autocomplete library
  - algolia/autocomplete.js - 自动补全插件
- 10.10 样式修正
  - autosize - 使文本框自动适应所输入的内容
- 10.8 标签插件(Tag)
- 10.4 单选框/复选框相关
  - Switchery - iOS 7 style switches for your checkboxes
- 10.7 取色
  - average-color - Get Average Color of Image
16. 动画(Animate)
- 13.20 视差滚动(Parallax Scrolling)
  - NEC动画库
  - animations - CSS3 ANIMATION CHEAT SHEET
  - Bootstrap Hover Image Gallery
  - SVGA - 全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式
  - SVGA - 全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式
  - imagehover.css - 为图片添加悬停效果
  - Hover.css - 很多鼠标Hover态的效果
  - SpinKit
  - anime.js - Javascript 动画引擎
  - Velocity.js - 加速JavaScript动画
  - csshake - CSS classes to move your DOM
  - Odometer - 数字之间的垂直切换
  - Effeckt.css - A Performant Transitions and Animations Library
  - Bounce.js - 一个用于制作漂亮 CSS3 关键帧动画的 JS 库
  - jQuery Interactive 3D - Create a 3D interactive object using images
  - Transit - CSS transitions and transformations for jQuery
  - WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)
  - iHover - 图片悬停效果
  - iconate.js：将 icons 增加动画效果的 JS 库
  - stroll.js - CSS3 list scroll effects
  - Move.js - 简化CSS3动画的JS库
  - lenticular.js - 响应倾斜或鼠标事件创建图片动画
  - Sticker.js - create a Sticker Effect
  - AlloyFinger - 腾讯 AlloyTeam 出品的超级小的 Web 手势库
  - Blast.js - 把动画和样式注入到文本中
  - jQuery Easing - 动画效果扩展
  - magic - CSS3 Animations with special effects
  - ScrollMe – 在网页中加入各种滚动动画效果
  - animations - CSS3 ANIMATION CHEAT SHEET
  - SVGA - 全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式
  - ImageCaptionHoverAnimation
  - animate.css - A cross-browser library of CSS animations.
  - AnimateScroll - A Simple jQuery Plugin for Animating Scroll
  - scrollReveal.js - 元素进入可视区域自动触发设置好的动画
  - AniJS - A Library to Raise your Web Design without Coding
18. 模板引擎
- 13.20 视差滚动(Parallax Scrolling)
  - Handlebars.js
  - Dust.js - Linkedin维护的项目
  - mustache.js
  - nunjucks - A powerful templating engine
  - json2html
  - EJS - JavaScript Templates
  - doT.js
  - Hogan.js - JavaScript templating from Twitter.
  - JSRender
  - Juicer - A Light Javascript Templete Engine.
  - Tempo
  - artTemplate
  - baiduTemplate
26. 按钮
- 24.3 Web Sockets
  - Flipside - 一个能过渡到对话框的按钮
  - react-particle-effect-button - 一个 React 组件，按钮点击后会像粒子状消解
  - Buttons - A CSS button library
  - ButtonComponentMorph
  - jquery.onoff - Interactive, accessible toggle switches for the web.
  - ProgressButtonStyles
  - CreativeButtons
  - CSS3 buttons
28. 内容提取(Readability)
- 24.3 Web Sockets
29. 颜色(CSS Colors)/SVG/Canvas
- 24.3 Web Sockets
  - SVGeneration
  - SVGeneration
  - chroma.js - 一个处理颜色的 JS 库
  - Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素
  - rgbaster.js - 主题色提取
  - Seen.js - 渲染3D场景为SVG或者HTML Canvas
  - SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
  - SVGeneration
  - jquery-color - 可以动态改动颜色
32. 布局(Layout)
- 24.3 Web Sockets
  - jQuery UI Layout
  - split-pane
37. HTTP请求相关
- 24.3 Web Sockets
39. 加密/转码
- 24.3 Web Sockets
  - RSA in JavaScript - 用RSA加密实现Web数据加密传输
  - harmankang/Lab62 - 一个简单的人类可读的随机 ID 生成库
  - nanoid - 一款非常小巧的唯一ID生成工具
  - dropbox/zxcvbn - 评估密码强度的 JS 库，强度越强，密码越不容易破解
  - crypto-js - JavaScript library of crypto standards.
  - ulid - 生成UUID类库
ES6入门
- 24.3 Web Sockets
2. 调试工具
- 24.3 Web Sockets
  - Weinre
  - Rythem
  - FECS - 基于 Node.js 的前端代码检查工具
  - JSON Server - 模拟 API
  - swagger-ui - 基于REST的API测试/文档
  - graphqurl - curl for GraphQL with autocomplete, subscriptions and GraphiQL.
  - csscss - 用于检查css代码冗余
  - Rythem
  - FECS - 基于 Node.js 的前端代码检查工具
27. 富文本编辑器/Markdown编辑器/Markdown解析器
- 24.3 Web Sockets
  - Redactor Text Editor
  - bustle/mobiledoc-kit - 基于mobiledoc数据格式开发所见即所得的 (WYSIWYG) 编辑器
  - Editor.md - 开源在线Markdown编辑器
  - stackedit
  - ianstormtaylor/slate - 一个完全可定制的富文本编辑器
  - TinyMCE
  - facebook/lexical - Facebook开源的可扩展的文本编辑器框架
  - Simditor - 简单快速的富文本编辑器
  - ProseMirror/prosemirror-view - In-browser semantic rich text editing
  - notadd/neditor - 基于 ueditor的更现代化的富文本编辑器，支持HTTPS
  - quilljs/quill - 富文本编辑器
  - Markdown Plus
  - marked - markdown解析器
  - bootstrap-markdown
  - CKEditor - 可视化 HTML 编辑器
  - wangEditor - 支持移动端的轻量级web富文本框
  - BachEditor - 一个有情怀的编辑器
  - micromarkdown.js - 轻量级的md解析器
  - Redactor Text Editor
19. 通知组件/弹框组件/模态窗口
- 13.20 视差滚动(Parallax Scrolling)
36. 移动端优化(Optimizing Mobile Performance)
- 24.3 Web Sockets
22. 文档/表格/PDF
- 13.20 视差滚动(Parallax Scrolling)
20. 提示控件(Tooltips)
- 13.20 视差滚动(Parallax Scrolling)
15. 字体图标 ( Font Icon )
- 13.20 视差滚动(Parallax Scrolling)
  - FortAwesome/Font-Awesome - 提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式
  - simple-icons/simple-icons - PNG and SVG icons for popular brands
  - bytedance/IconPark
  - lipis/flag-icon-css - 所有国家国旗的 icon 库
25. 音频/视频
- 24.3 Web Sockets
  - videojs/video.js - HTML5 & Flash video player
  - mediaelement/mediaelement - HTML5 `<video>` and `<audio>` player
  - clappr/clappr - 开源的Web视频播放器
  - sampotts/plyr - A simple HTML5, YouTube and Vimeo player
  - video-dev/hls.js - JavaScript HLS client using Media Source Extension
  - davatron5000/FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
  - videojs/http-streaming - HLS, DASH, and future HTTP streaming protocols library for video.js
  - captbaritone/webamp
  - Chimeejs/chimee - 奇舞团开源的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式 http://chimee.org/
  - jaysalvat/buzz - A Javascript HTML5 Audio library
  - dfcb/BigVideo.js - The jQuery Plugin for Big Background Video
  - paypal/accessible-html5-video-player - PayPal 开源的 HTML5 视频播放器
  - surmon-china/vue-video-player - 适用于 Vue 的 video.js 播放器组件
  - bdougherty/BigScreen - A simple library for using the JavaScript Full Screen API
  - vodkabears/Vide - 视频背景组件
  - jplayer/jPlayer - HTML5 Audio & Video for jQuery
  - MediaElement.js
ES6转码器(ES6 to ES5)
- 24.3 Web Sockets
  - traceur-compiler - Traceur is a JavaScript.next-to-JavaScript-of-today compiler
  - babelify - 将babel引入到Gulp, Grunt, npm run等构建过程
  - Babel - 一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
8. 路由和链接(Routing And URLs)
- jquery-pjax - pushState+ajax
- qs - A querystring parser with nesting support
- page.js - Micro client-side router
- History.js - gracefully supports the HTML5 History/State APIs
- jquery-address - Deep Linking
- query-string - Parse and stringify URL query strings
- URI.js
- SpeakingURL
- director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)
- Roadcrew.js
- path.js
- crossroads.js
- StateMan - 一个处理深层次单页系统的路由库
- hash.js
- uparams - An URL params parser
41. 实用工具/其他插件
- 24.3 Web Sockets
  - jsdiff - js diff 算法
  - jquery.qrcode.js - 生成二维码的 jQuery 插件
  - qrcodejs - JS生成QRCode的库
  - Async.js - 异步操作
  - favico.js - 动态改变浏览器标签栏中的网站图标
  - github-contributions-chart - 类 Github 的贡献日历网格
  - JavaScript Cookie
  - Gremlins.js - Monkey 测试库
  - MixitUp - 动画过滤和排序
  - ajv-validator/ajv - 校验json-schema数据格式
  - cure53/DOMPurify - HTML过滤防止 XSS 攻击
  - jquery-cookie
  - KityMinder - 脑图编辑工具
  - nakedpassword - 用脱衣女帮助检测密码强度
  - leizongmin/js-xss - 根据白名单过滤 HTML(防止 XSS 攻击)
  - prettyprint.js - An in-browser JavaScript variable dumper
  - RulersGuide.js - 类似PhotoShop标尺的js库
  - swfobject
  - pageguide - 网页向导
  - Shepherd - 为应用创建用户指南
  - JQuery Tip Cards - 创建卡片交互的cards布局
  - Fallback.js - JavaScript library for dynamically loading CSS and JS files.
  - RoughDraft.js - 简单快速的创建交互式的 HTML 模型的原型工具
33. 演示/幻灯片
- 24.3 Web Sockets
7. 网格系统
- Flexbox Grid
- grid
- MasonJS - creating a perfect grid
23. 目录树插件
- 13.20 视差滚动(Parallax Scrolling)
11. 图表绘制/图形库(Graphics)
- 10.10 样式修正
  - apexcharts.js - Interactive and Modern SVG Charts
  - Chartist.js
  - alibaba/BizCharts - 阿里巴巴桌面端商业统计图表解决方案
  - mapbox/mapbox-gl-js - MapboxGL 基于 WebGL 使用矢量切片和 Mapbox 样式渲染交互式地图
  - ecomfe/zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！
  - antvis/f2 - 蚂蚁金服移动端可视化解决方案
  - canvg/canvg - Javascript SVG parser and renderer on Canvas
  - Kujiale-Mobile/Painter - 小程序生成图片库
  - Bonsai - 一个功能强大的JavaScript图形库
  - intro-to-d3 - a D3.js tutorial
  - D3.js - A JavaScript visualization library for HTML and SVG.
  - Vis.js
  - Coutour.js
  - apache/incubator-echarts - 百度开源可视化库
  - Highcharts
  - Chart.js - Simple HTML5 Charts using Canvas
21. 对话框/遮罩层/弹出层(lightbox)
- 13.20 视差滚动(Parallax Scrolling)
31. 文本处理
- 24.3 Web Sockets
17. 本地存储
- 13.20 视差滚动(Parallax Scrolling)
35. 邮件模板(Email Templates)
- 24.3 Web Sockets
  - responsive-html-email-template
38. 下载组件
- 24.3 Web Sockets
  - download
  - Downloadify
34. 国际化(i18n)
- 24.3 Web Sockets
6. 排版
- chinese-copywriting-guidelines - 中文文案排版指南
- typo.css
24. 前后端交互
- 24.1 Ajax模块
  - isomorphic-fetch - Isomorphic WHATWG Fetch API, for Node & Browserify
  - reqwest - browser asynchronous http requests
  - qwest - 第三方的Ajax库
  - jsonp - A simple JSONP implementation
  - then-request
  - superagent
  - browser-request
  - ajax - Standalone AJAX library
  - minAjax.js
  - whatwg-fetch
  - fetch - A window.fetch JavaScript polyfill
  - minAjax.js
- 24.2 SSE (Server-Sent Events)
  - EventSource
13.21 缩放 (Zooming)
- 13.20 视差滚动(Parallax Scrolling)
  - jQuery Zoom - mouseover时图片缩放效果
  - zoom.js - 一款效果很独特的页面内容缩放插件
30. 选项卡(Tabs)
- 24.3 Web Sockets
4. 接口管理
- 24.3 Web Sockets
  - RAP - Web接口管理工具，开源免费，接口自动化，MOCK数据自动生成，自动化测试，企业级管理
9. UA 识别
- detector
- ua-parser-js
- platform.js
40. 调试
- 24.3 Web Sockets
  - debug - A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers
Uncategorized
- Uncategorized
  - awesome-php

Programming Languages

JavaScript 315 HTML 46 TypeScript 33 CSS 25 Vue 6 CoffeeScript 5 SCSS 4 PHP 4 Shell 1 Ruby 1

Categories

13. 页面交互 116 2. JavaScript 框架汇总 61 10. 表单处理 46 6. 在线工具 39 16. 动画(Animate) 35 5. 浏览器扩展(Chrome Extensions) 25 41. 实用工具/其他插件 23 1. 前端UI框架(Frameworks) 20 5. 基础模版 20 27. 富文本编辑器/Markdown编辑器/Markdown解析器 19 0. 前端自动化(Workflow) 18 25. 音频/视频 17 11. 图表绘制/图形库(Graphics) 16 31. 文本处理 15 8. 路由和链接(Routing And URLs) 15 18. 模板引擎 13 24. 前后端交互 13 22. 文档/表格/PDF 12 3. 前端游戏框架 11 19. 通知组件/弹框组件/模态窗口 11 4. ui组件库(CSS Framework) 11 ES6入门 10 29. 颜色(CSS Colors)/SVG/Canvas 9 2. 调试工具 9 14. 代码高亮插件/代码编辑器 8 26. 按钮 8 20. 提示控件(Tooltips) 8 17. 本地存储 7 21. 对话框/遮罩层/弹出层(lightbox) 6 39. 加密/转码 6 12. 日期格式化 & 时间轴 5 30. 选项卡(Tabs) 5 34. 国际化(i18n) 5 33. 演示/幻灯片 5 3. 模拟数据( Mock ) 4 15. 字体图标 ( Font Icon ) 4 28. 内容提取(Readability) 3 7. 网格系统 3 23. 目录树插件 3 9. UA 识别 3 37. HTTP请求相关 3 ES6转码器(ES6 to ES5) 3 36. 移动端优化(Optimizing Mobile Performance) 3 1. 开发工具 2 13.21 缩放 (Zooming) 2 32. 布局(Layout) 2 6. 排版 2 38. 下载组件 2 4. 接口管理 1 Uncategorized 1 40. 调试 1 35. 邮件模板(Email Templates) 1

Sub Categories

24.3 Web Sockets 220 13.20 视差滚动(Parallax Scrolling) 112 10.10 样式修正 22 13.5 图片剪裁/图片处理/图片转换 19 13.4 图片轮播(幻灯片)/图片展示 17 13.6 进度条/加载动画(Loading) 12 13.1 Slider 12 24.1 Ajax模块 12 10.6 日期选择 11 10.5 上传组件 11 13.3 懒加载/加载监听/预加载 10 10.1 表单验证(Form Validator)/表单提示 10 13.11 平滑滚动插件(Smooth Scroll) 5 13.19 滚动条(Scrollbar) 5 13.12 全屏滚动/全屏切换 5 13.9 滚动侦测(ScrollSpy) 4 13.10 滚动加载更多/下拉刷新(Pull to Refresh) 4 10.8 标签插件(Tag) 4 13.17 拖拽组件 4 13.15 固定元素(Sticky) 4 13.18 隐藏或展示页面元素 3 10.9 自动完成插件 3 10.3 < select > 相关 3 13.16 触控事件 2 13.8 菜单(Menu) 2 13.7 侧滑插件(offcancas) 2 13.14 转场效果 1 10.4 单选框/复选框相关 1 Uncategorized 1 13.13 分屏滚动 1 10.2 < input > 相关 1 13.2 瀑布流 1 24.2 SSE (Server-Sent Events) 1 10.7 取色 1

Keywords

javascript 86 css 27 jquery 21 react 17 vue 15 html 13 html5 12 ui 10 mobile 10 svg 10 frontend 9 nodejs 9 jquery-plugin 8 canvas 8 animation 7 editor 6 sass 6 typescript 6 framework 5 ui-kit 5 dom 5 es6 5 ios 5 hls 5 html5-video 5 video 5 css-framework 5 web 5 ui-components 5 image 4 angular 4 vue-components 4 vue3 4 javascript-library 4 responsive 4 performance 4 antd 4 ant-design 4 data-visualization 4 android 4 reference 4 web-development 4 modal 4 swipe 3 component 3 gallery 3 drag-and-drop 3 ui-design 3 components 3 rich-text-editor 3