前端开发两年间的所有原创博客，笔记，其他技术帖资源整理总结汇总分享，现已更新在：github.com/liuyuqin199…
前端资源汇总分享
资源太多，请使用 <ctrl+F> 搜索关键字
主题
站内资源
- Node
- Npm
- Gulp
- Bower
- Browserify
- Browsersync
- Scss,Less
- ES6
- Babel
- Promise
- Express
- Fontawesome
- Yarn
- ESLint
- Typescript
- PWA
html5
站内资源
css
liuyuqin1991<贡献者>博客资源
站内资源
站外资源
- 箭头消息提示框样式
- Flex 布局教程：语法篇
- Flex 布局教程：实例篇
- 现代CSS进化史
- 关于 CSS 变量，你需要了解的一切
- CSS工程化演进
- 开始使用新的 CSS Typed Object Model
- 前端布局推进剂 - 间距规范化
- 这些 CSS 命名规范，将省下你大把调试时间
- 新的 CSS 特性正在改变网页设计
- 理解伪元素:before和:after
- BEM的定义
- 从10种现在流行的 CSS 解决方案谈谈我的最爱 （上）
- 从10种现在流行的 CSS 解决方案谈谈我的最爱 （中）
- 从10种现在流行的 CSS 解决方案谈谈我的最爱 （下）
- 视口相关单位的应用
- CSS自定义属性
- 无单位数字和行高
- 如何更愉快地使用em
- 如何更愉快地使用rem
- CSS3动画实战之多关键帧实现无限循环动效的时间间隔
- 你所不知道的 CSS 阴影技巧与细节
- CSS 与网络性能
- 有限状态机在 CSS 动画中的应用
- CSS 继承深度解析
- 视频演示如何用纯 CSS 创作一只玉免
- CSS捡屎记
- CSS 火焰
- 剖析CSS-Trick，为我所用
- fixed 定位失效 | 不受控制的 position:fixed
- 探秘 flex 上下文中神奇的自动 margin
- 从原型图到成品：步步深入 CSS 布局
- 更好的纯CSS滚动指示器技术实现
react
liuyuqin1991<贡献者>博客资源
- react fireworks 烟花特效——2018年06月22日
- react 自定义的数字样式滚动效果——2018年06月21日
- create-react-app axios 多个域名环境cors跨域——2018年06月19日
- create-react-app 引入less与sass——2018年06月08日
- react项目框架环境搭建（持续更新中）——2018年06月04日
- create-react-app JS里使用图片——2018年06月04日
- react echarts 拖拽——2017年12月29日
- react ueditor 数据交互——2017年12月19日
- react 动态增加，删除，上下移动dom——2017年12月19日
站内资源
站外资源
- react官方文档
- react基础入门
- 谈谈 react 中的 key
- React 是怎样炼成的
- 基于React实战分享WeatherApp
- React性能优化-虚拟Dom原理浅析
- React 16 加载性能优化指南
- 图解 React
- React 学习路线图 - 2018版
- React组件模式
- 组件、Prop 和 State
- 精读《React 八种条件渲染》
- React从渲染原理到性能优化（一）
- React从渲染原理到性能优化（二）
- React之深入理解 Props 和 State
- React v16.6 发布
- React v16.7 "Hooks" - What to Expect
- React 项目结构和组件命名之道
- 以面试官的角度来看 React 工作面试
- React 2019年路线图发布！Hooks明年第一季度上线
- 我们为什么要写 super(props)?
- React中的五种组件形式
- React 的今天和明天（图文版）第一部分
- React 的今天和明天（图文版）第二部分
- React组件文档解决方案
- 从 loading 的 9 种写法谈 React 业务开发
- React Fiber架构
- react-route与react-router-dom教程
- React Router 使用教程
- 前面有一个Redux，我们去撩(聊)一下它
- 聊一聊Redux的前身Flux
- React-Native从零搭建App
- Airbnb 在 React Native 上下的赌注（一）：概述
- Airbnb 在 React Native 上下的赌注（二）：技术细节
- Airbnb 在 React Native 上下的赌注（三）：建立一个跨平台的移动端团队
- Airbnb 在 React Native 上下的赌注（四）：React Native 退役
- Airbnb 在 React Native 上下的赌注（五）（完结篇）：Airbnb 移动端路在何方？
- Creat React App 2.0 发布
- 大前端时代，如何做好C 端业务下的React SSR？
- 为什么说Suspense是一种巨大的突破
- React Context API 与模式变迁, Webpack 与 Web 优化, AI 界面生成
- 深入了解React，从Mixin到HOC再到Hook
- 2019 React Redux 完全指南
- 十个案例学会 React Hooks
- 深入了解React，从Mixin到HOC再到Hook
- React Hooks高仿B站Web移动端直播
- 深入React fiber 链表和DFS
- 为什么 'XX' 不是一个 Hooks API?
- 可能是你需要的react + typescript 50条规范和经验
- 在 React Hooks 中如何请求数据？
- 在 React 组件中使用 Refs 指南
webpack
站内资源
站外资源
- webpack官方网站
- webpack中文官方网站
- webpack基础入门
- Webpack v4 beta 版本发布
- webpack 4 发布了！
- 看清楚真正的 Webpack 插件
- 基于Webpack4使用懒加载分离打包React代码
- webpack4升级完全指南
- 带你走进webpack世界，成为webpack头号玩家
- Webpack基本架构浅析
- 我当初为什么写webpack
- Webpack4+ 多入口程序构建
- webpack4初探
- 手摸手，带你用合理的姿势使用webpack4（上）
- 手摸手，带你用合理的姿势使用webpack4（下）
- Webpack之treeShaking
- 深度掌握webpack的5个关键点
- webpack loader机制源码解析
- 你配置Webpack 4的方式可能是错的！
- Webpack 打包含动态加载的类库
- Webapck4+Babel7优化70%速度
- Webpack 构建速度优化
- Webpack 是怎样运行的?（一）
- Webpack 是怎样运行的?（二）
gulp
liuyuqin1991<贡献者>博客资源
- gulp插件集合（包含50多种gulp插件）——2017年11月22日
- gulp插件-main-bower-files——2017年11月21日
- gulp插件-gulp-filter——2017年11月14日
- gulp插件-gulp.order——2017年11月09日
- gulp插件-gulp.spritesmith——2017年11月02日
- gulp插件-gulp-usemin——2017年08月25日
ui
站内资源
插件库
站内资源
vue
liuyuqin1991<贡献者>博客资源
站外资源
- [译] Vue让我喜欢的10个方面
- 2018 年你需要知道的 Vue.js 组件库，完善你的应用开发
- 基于vue的browserify的项目模板
- 手摸手，带你用vue撸后台 系列一
- 详解vue中的 Object.create(null)
- VUE组件汇总
- 从零开始搭建脚手架
- 一个Vue页面的内存泄露分析
- Vue CLI 3 配置中 Modern mode 是什么
- Vue高版本中一些新特性的使用
- 尤雨溪：Vue 3.0 计划
- 面试官：自己搭建过vue开发环境吗？
总结
站外资源
- 2017 JavaScript 调查报告概述
- 2017 年 JavaScript 发展状况回顾
- 萌新也能懂的现代 JavaScript 开发
- npm 2017 JavaScript 框架报告之 React 生态系统分析
- npm 2017 JavaScript 框架报告之后端框架
- npm 2017 JavaScript 框架报告之前端框架
- 2017年 JavaScript 明星项目
- 2018 年最值得关注的 JavaScript 趋势
- 2018 前端性能优化清单
- 2018 Web 开发者路线图
- 最受欢迎的五大前端框架比较
- 2018 如何玩转 JavaScript
- 2018 要学习的优秀 JavaScript 库与知识
- 2018年值得关注的10大JavaScript动画库
- 最全最好用的动效落地方法、都帮你总结好了（上）
- 最全最好用的动效落地方法、都帮你总结好了（下）
- 可能是最全的前端动效库汇总
- 2017前端性能优化清单
- 2018年3月前端知识集锦
- 2017年Web前端技术综述
- JavaScript 2018 中即将迎来的新功能
- 2018 年前端开发回顾
- 关于JavaScript, NPM官方发布了2018年的回顾以及2019年的预测
- 给2019前端的5个建议
- 2019 前端性能优化年度总结 — 第一部分
- 2019 前端性能优化年度总结 — 第二部分
- 2019 前端性能优化年度总结 — 第三部分
- 2019 前端性能优化年度总结 — 第四部分
- 2019 前端性能优化年度总结 — 第五部分
- 2019 前端性能优化年度总结 — 第六部分
- ES5 to ESNext — 自 2015 以来 JavaScript 新增的所有新特性
- Vuex、Flux、Redux、Redux-saga、Dva、MobX
- 基于Redux/Vuex/MobX等库的通用化状态OOP
- 关于移动端适配，你必须要知道的
github增速最快项目（暂以时间分类）
站外资源
-
[【本周项目】2019.2.2-2019.2.8（过年休息）]
-
[【本周项目】2019.2.9-2019.2.15（过年休息）]
-
- Fish Redux：Fish Redux 是一个基于 Redux 状态管理的组装式 Flutter 框架，它适用于构建中大型应用。
- code-server：code-server 可以让 VSCode 运行在远程服务器中，并且使用浏览器访问。
- Automatic App Landing Page：Automatic App Landing Page 是一个 Jekyll 主题、用于为移动应用自动生成和部署登录页网站的工具。
-
- Firefox Send：Firefox 出品的端对端加密分享工具。
- React-three-fiber：React-three-fiber 是一个用于 Three.js 的小型 React 渲染器。
- type-fest：一组 TypeScript 的基本类型。
- Traduora：面向团队使用的翻译管理平台。
-
- lax.js：lax.js 是一个简单轻量的 Javascript 插件，当滚动页面时可以帮助创建流畅漂亮的动画。
- wechat-format：wechat-format 是微信公众号排版编辑器，可以将 Markdown 转换成微信特制的 HTML。
- webiny-js：Webiny 是一个无服务的开源 CMS，可以帮助我们方便地构建网站和 Web 应用程序。
- generative.fm：generative.fm是一个在浏览器中播放“生成音乐”的平台。生成音乐是一种新的音乐形式，
-
- YApi： YApi 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台。
- Tailwind CSS：Tailwind CSS 是一个用于快速 UI 开发的 utility-first 的 CSS 框架。
- El Grapho：El Grapho 是一个高性能的 WebGL 图形数据可视化引擎，可以在任何现代浏览器中支持数百万个交互式 node 和 edge。
- nndl.github.io：《神经网络与深度学习》。
-
[【本周项目】2019.4.13-2019.4.19（休息）]
-
[【本周项目】2019.4.20-2019.4.26（休息）]
-
[【本周项目】2019.4.27-2019.5.3（休息）]
-
- Terminal：Windows Terminal 是微软在 Build 大会上推出的新的命令行工具，提供多标签、分割窗口、快捷键等功能，支持 PowerShell、Cmd、WSL 和 SSH 等命令行程序，简化了开发者工作流程。
- flutter_web：使用 Flutter 编写 Web。
- AMis：百度推出的一种基于特定 JSON 格式生成管理信息系统页面的工具，只需配置 JSON 文件便可生成页面。
- Commit messages guide：一个了解 commit 信息重要性和如何更好地编写它的指南。
- cssfx：看到什么喜欢的 CSS 特效，一键复制即可拥有。
-
- RCRE：RCRE 是一个简化复杂工程的前端库，可以帮助我们解决上面的问题。
- Comlink：Comlink 是 Chrome 团队出的帮助更好使用 WebWorker 的工具。
- unform：unform 是一个以性能为中心的库，可以帮助开发者在 React 中利用不受控组件方式和 React Hooks 创建漂亮的表单。
- react-tetris：使用 React、Redux、Immutable 等技术开发一款俄罗斯方块。
-
- Terminus：Terminus 是一个高度可配置的终端，可以运行在 Windows、macOS 和 Linux。具有支持配置主题和颜色、自定义快捷键、切分面板等特点。
- SCAR：一键在 AWS 上部署包含 HTTPS、全局 CDN 和自定义域名等功能的静态网站。
- hacker-laws-zh：对开发人员有用的定律、理论、原则和模式。
- WebGL-Fluid-Simulation：WebGL-Fluid-Simulation 是使用 WebGL 实现的流体特效。
-
- Zdog：Zdog 是基于 canvas 和 SVG 的 3D JavaScript 引擎。使用 Zdog，开发者可以在Web 上设计和渲染简单的 3D 模型。 Zdog 是一个伪 3D 引擎，即几何形状存在于 3D 空间中，但呈现为扁平形状。
- imgsquash：imgsquash 是用 node、react 和 next.js 写的图片压缩工具，易于部署为微服务。
- youtube-dl-interactive：youtube-dl 是款十分强大的视频下载工具，不过交互方式是命令行，参数又贼多，youtube-dl-interactive 将输入参数的过程转变为简单的命令行交互方式，简化了输入复杂参数的过程。
jquery
liuyuqin1991<贡献者>博客资源
- jquery中stopImmediatePropagation和stopPropagation——2018-05-04
- jQuery基础（样式篇，DOM对象，选择器，属性样式）——2017-07-25
- Jquery DataTables buttons扩展-导出excel——2017-07-11
- jquery 自定义input输入监听事件——2016-10-21
- jquery-ui 拖动列表 与 拖拽——2016-08-26
- jquery图片热区jquery.image-maps——2016-08-03
小程序
站外资源
- 记“编写babel插件”与“通过语法解析替换小程序路由表”的经历
- 微信小程序之-NBA在线直播小程序开发
- 微信小程序也要强行热更代码，鹅厂不服你来肛我呀
- 微信小程序朋友圈分享图片生成方案实现
- 小程序 LRU 存储设计
- 简易商城小程序全栈开发(mpvue+koa+mongodb)
- 微信小程序30分钟从陌生到熟悉（上）
- 微信小程序30分钟从陌生到熟悉（下）
- 微信小程序架构原理
- 近两万字小程序攻略发布了（超精华）
- 小程序性能优化的几点实践技巧
- megalo -- 网易考拉小程序解决方案
- 5款小程序框架全面测评
其他框架
站外资源
- 多端统一开发框架 - Taro
- Chameleon跨端框架—一个理想主义团队的开源作品
- Chameleon 开放跨端扩展标准协议
- 前端能力中台化之路—Fusion Design 成长史
- 从头实现一个koa框架
其他前端资源
liuyuqin1991<贡献者>博客资源
- echarts大制作：绚丽地图——2018-11-01
- 遮罩层上滚动，使下方的列表随之滚动——2018-07-27
- handlebars 多状态判断输出，html转义or不转义——2018-04-11
- bootstrap-datepicker 月份选择 完全指南——2018-03-22
- crypto-js aes加解密——2018-02-22
- video.js 视频直播前端展示——2018-02-11
- echarts toolbox修改默认按钮功能——2018-01-18
- echarts 图表通用工厂配置类——2017-12-11
- 百度地图 省市区县 信息展示——2017-09-21
- 腾讯地图 省市区县 信息展示——2017-09-11
- Bootstrapvalidator 前端自定义验证和ajax远程访问后端验证——2017-09-05
- Json数据导出Excel（IE10支持）——2017-08-16
- datatable excelHtml5 自定义列格式（百分比保留两位小数）——2017-08-14
- Handlebars.js if 功能扩展——2017-07-26
- bootstrap中下拉菜单点击后不关闭的方法——2017-07-25
- 三种方法实现js跨域访问（转载）——2017-07-20
- ES6循环数组新方法for-of（转）——2017-07-19
- HTMl5内置存储sessionStorage和localStorage——2017-07-14
站外资源
- 下一代 Web 应用模型 — Progressive Web App
- 最全的常用正则表达式大全
- antV 3.0（G2，F2，G6）发布
- H5动画：轨迹移动
- 从前端技术到体验科技
- 字符编码的故事
- 解决ajax跨域的方法原理详解
- Chrome控制台使用详解
- HTML 5.2 有哪些新内容？
- 构建可靠的前端异常监控服务-采集篇
- 美团点评点餐前后端分离实践
- WebSocket：5分钟从入门到精通
- GraphQL 技术栈揭秘
- 最简单实现跨域的方法：使用nginx反向代理
- Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0
- 滴滴后市场前端技术体系
- 哔哩哔哩的前端之路
- 你所忽略的js隐式转换
- 手把手教你用 SVG 符号和 CSS 变量做出彩色图标
- 原生JS数据绑定
- JavaScript 进阶之深入理解数据双向绑定
- 10 种最常见的 Javascript 错误
- Node 定时器详解
- 手淘过年项目中采用到的前端技术
- 关于 Promise 的 9 个提示
- 前端开发、交互、视觉是怎么合作完成工作的
- 用 JavaScript 实现人脸识别
- 帆布指纹识别
- JS中浮点数精度问题
- JavaScript变量的生命周期：为什么let不被提升
- 高阶函数：利用Filter、Map和Reduce来编写更易维护的代码
- 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
- DNS：为什么很重要&是如何工作的
- H5 分层屏幕适配
- 简单快速理解js中的this、call和apply
- 十倍效能提升——Web 基础研发体系的建立
- WebSocket 学习：基于socket.io实现简单多人聊天室
- 什么时候不该使用es6箭头函数
- 热爱 JavaScript，但是讨厌 CSS ？
- 前端布局基础概述
- Chrome 调试工具使用小技巧
- 关于Google发布的JS代码规范，你需要了解什么？
- passive 事件监听
- JavaScript：理解同步、异步和事件循环
- 一次掌握 JavaScript ES5 到 ES8 数组内容
- JavaScript 数组方法对比
- 深入 JavaScript 数组：进化与性能
- 聊聊 HTTPS 和 SSL/TLS 协议
- ECMAScript 2016, 2017, 和2018中新增功能
- 我是如何在公司项目中使用ESLint来提升代码质量的
- 彻底理解浏览器的缓存机制
- 高阶函数，你怎么那么漂亮呢！
- 玩转HTML5 Video视频WebVTT字幕使用样式与制作
- 超大型 JavaScript 应用的设计哲学
- JS 中的设计模式了解一下？
- YAML 语言教程
- 从JS垃圾回收机制和词源来透视闭包
- Nerv实战 - 京东首页改版小结
- 图说 ES Modules
- 那些好玩却尚未被 ECMAScript 2017 采纳的提案
- Jenkins打造强大的前端自动化工作流
- 那些前端MVVM框架是如何诞生的
- 基于Docker+Consul+Registrator+Nodejs实现服务治理（一）
- 基于Docker+Consul+Registrator+Nodejs实现服务治理（二）
- 如何加密传输和存储用户密码
- ES6之路之模块详解
- console觉醒之路，打印个动画如何
- 手机web前端调试页面的几种方式
- Google I/O 2018 —— Web 系列参会笔记
- 上课啦！了解下 DDoS攻击方式
- 无尽滚动的复杂度
- 如何利用 Chrome 浏览器实现滚动截屏
- 页面可视化搭建工具前生今世
- 从0开始发布一个无依赖、高质量的npm
- 我知道的HTTP请求
- 滑向未来：现代 JavaScript 与 CSS 滚动实现指南
- 深入浅出 SVG
- W3C工作备忘 -- 布局
- 一个安卓设备管理操作平台-STF
- GitHub 的用法与礼仪
- 浏览器之美，你知道多少？
- JS Linter 进化史
- 浅谈 instanceof 和 typeof 的实现原理
- HTTPS 的故事
- HTTPS是如何工作的
- 宋小菜生鲜 B2B 的前端团队搭建
- 浅谈混合应用的演进
- 如何阅读大型前端开源项目的源码
- 谁说前端不需要懂-Nginx反向代理与负载均衡
- 一套比较完整的前端技术选型，需要规整哪些东西，你知道不？
- 如何利用vw+rem进行移动端布局
- 浅析前端安全之 XSS
- 大型网站的 HTTPS 实践：协议层以外的实践
- JavaScript 引擎基础：Shapes 和 Inline Caches
- GraphQL 基于 SPA 架构的工程实践
- 大前端时代前端监控的最佳实践
- 在 web 上使用 JavaScript 模块
- 深入浅出 JavaScript 关键词 -- this
- deno深入揭秘及未来展望
- WebView缓存原理分析和应用
- 接口咋整？前端数据药神来也
- JSON Web Token - 在Web应用间安全地传递信息
- 八幅漫画理解使用JSON Web Token设计单点登录系统
- 洞察 video 超能力系列——玩转 mp4
- 组件开发的单元素模式
- 这个控件叫：Skeleton Screen/加载占位图
- JavaScript 是如何工作的：用 MutationObserver 追踪 DOM 的变化
- 如何不择手段提升scroll事件的性能
- 射鸡狮说圆形的进度条不是我要的效果
- 手把手教你用原生JavaScript造轮子（1）——分页器
- JavaScript 中的私有变量
- 前端性能之JavaScript成本2018版
- 用JS写一个同Excel表现的智能填充算法
- 前端程序员必须掌握之三角函数在前端动画中的应用
- 如何精确统计页面停留时长
- 视口相关单位的应用
- 简单聊聊 GZIP 的压缩原理与日常应用
- 验证码前端性能分析及优化实践
- JavaScript 引擎基础：原型优化
- 一口(很长的)气了解 Babel
- 鸽子传信解释 HTTPS
- immer.js 简介及源码简析
- 精准操控的滚动体验，浅谈新标准 Scroll Snap
- 如何在 JavaScript 中更好地使用数组
- 一文读懂前端缓存
- 2018年如何写一个现代的JavaScript库
- 代码优化策略 — Idle Until Urgent
- 图解浏览器的基本工作原理
- 渔人和Rxjs的故事
- 利用交叉观察器解锁懒加载新姿势
- 深拷贝的终极探索
- 如何让你的网页“看起来”展现地更快 —— 骨架屏二三事
- Lighthouse的使用与Google的移动端最佳实践
- 每个Web开发者都应该知道的SOLID原则
- SVG vs Image, SVG vs Iconfont
- JavaScript 基础：Babel 转译 class 过程窥探
- 新一代页面生命周期API：来自Chrome官方博客的介绍
- JS箭头函数三连问：为何用、怎么用、何时用
- 内存管理速成教程
- 通俗漫画介绍 ArrayBuffers 和 SharedArrayBuffers
- AST抽象语法树——最基础的javascript重点知识
- 用代码做设计
- HTTP/3 要点
- 想写好前端，先练好内功
- 函数式编程：抽象与组合
- JavaScript数组所有API全解密
- 深谈require和import
- 如何编写 Typescript 声明文件
- ESLint 工作原理探讨
- 其实你并不懂 Unicode
- 谈谈代理
- 你不知道的“隐身斗篷”
- JavaScript工程项目的一系列最佳实践策略
- 深入浅出 Javascript Decorators 和 AOP 编程
- 动效不该难
- GraphQL入门指南
- Lerna包管理
- 前端 Form 的表单的一个通用解决方案
- Fusion Next 之 Upload 上传组件设计思路
- 十大经典排序算法（动图演示）
- 如何在浏览器不崩溃的情况下过滤 200 万行数据？
- JavaScript 常见设计模式
- 如何自动搞定全站图片的alt属性？
- 页面可视化搭建工具技术要点
- 精读《Serverless 给前端带来了什么》
- Web渲染概述
- 没有JS的前端：体积更小、速度更快！
- 内网穿透工具的原理与开发实战
- 前端同构渲染的思考与实践
- PNG图片压缩原理
- 浏览器帧原理剖析
- 小菜前端的技术栈是如何规划和演进的
- 在阿里云做前端
- 彻底终结 Javascript 背后的隐式类型转换
- GraphQL和Thrift在Airbnb架构中的配合使用
- 图解 Map、Reduce 和 Filter 数组方法
- 基于色键技术的纯客户端实时蒙版弹幕
- 前端应该知道的web登录
- Chrome运行时性能瓶颈分析
- Javascript 中 Array.push 要比 Array.concat 快 945 倍！
- 你真的了解 Cookie 和 Session 吗
- 正则表达式不要背
- 拆解 JavaScript 中的异步模式
- JavaScript 究竟是如何工作的？（第一部分）
- 页面图片类型选择优化
