1.推荐团队博客
推荐团队
推荐博客
- 汤姆大叔博客
- 张鑫旭博客
- 阮一峰博客
- 廖雪峰官网
- 牧云云博客
- 前端小智
- 小胡子哥的个人网站
- Jerry Qu
- fouber github
- 木易杨 github
（前端进阶系列） - xiaozhi github（小智GitHub博客）
- 境枫博客（语雀）
2.推荐文章教程
资源清单
- 守候：个人分享--web前端学习资源分享
- 前端学习笔记总结清单，应有尽有
- 前端最实用书签【看完可以提涨薪啦】
- Wscats github 学习笔记与文章
- 前端进击的巨人(内容包括：前端进击的巨人系列、JavaScript设计模式系列、读书笔记系列)
- JavaScript 秘密花园【书籍总结】
- 《JavaScript权威指南》JavaScript核心概念归纳整理【书籍总结】
- 前端资源系列（4）-前端学习资源分享&前端面试资源汇总
- 程序员练级攻略（2018）：前端基础和底层原理 （css、js、浏览器原理、网络协议文章总结）
- web前端最全各类资源
- JavaScript 完全手册（2018版）
- 超硬核 Web 前端学霸笔记，学完就去找工作！
- 前端进阶积累(常看)
JavaScript
- 阮一峰：Javascript 面向对象编程系列（内容包括：封装、构造函数封装、非构造函数封装）
- 腾讯全端 AlloyTeam 团队 Blog JavaScript设计模式（设计模式）
- 龙恩：Javascript常用的设计模式详解（设计模式）
- 汤姆大叔：深入理解JavaScript系列（设计模式）
- 老姚：《JavaScript 正则表达式迷你书》（正则表达式全攻略）
- 编写自己的代码库（javascript常用实例的实现与封装）
- 一行能装逼的JavaScript代码（主要考察JS的类型转换，如：(!(~+[])+{})--[~+""][~+[]] + ~~!+[]]+({}+[])[[~!+[]]~+[]]）
- 前端大文件上传(主要包括：文件编码上传、文件切片、断点续传等方式)
- JS数据类型分类和判断(数据类型的判断：typeof、instanceof、Object.prototype.toString)
- 探索怎样让 JS - API 具有更好的实用性
- 探索怎么样的参数能让 JS - API 更灵活
- 重构 - 设计API的扩展机制
- 字符编码ASCII、Unicode 、UTF-8 及实例汉字与Unicode码的相互转化（编码）
- Unicode与JavaScript详解（编码）
- 执行上下文详细图解
- 这一次，彻底弄懂 JavaScript 执行机制
- 阮一峰：JavaScript 运行机制详解：再谈Event Loop（主要讲为什么JavaScript是单线程、任务队列、Event Loop）
- 前端10个灵魂拷问 吃透这些你就能摆脱初级前端工程师！
- web前端图片懒加载实现原理
- JavaScript学习总结（五）原型和原型链详解（原型、原型链知识）
- 原型及原型链
- JS中的new()到底做了些什么？
- 从ES6重新认识JavaScript设计模式(一): 单例模式(设计模式)
- 深拷贝的终极探索（99%的人都不知道）
- 微信小程序，监听用户登录事件（微信小程序）
- 小tips: 纯前端JS读取与解析本地文本类文件
- ArrayBuffer：类型化数组
- ECMAScript 位运算符
- JavaScript 内存泄漏教程
- 探寻 JavaScript 精度问题以及解决方案
- JavaScript 中的数据格式转换一例：reduce的应用
- Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
- 可能是最详细的UMD模块入门指南
- 为什么是 JSONP
- Javascript Lazyload延迟加载特效
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
- 前后分离模型之封装 Api 调用（对jquery ajax的再次封装→更换API调用接口，使用axios封装→去除jquery,使用 Promise 接口改善设计）
- JavaScript字符串操作方法大全，包含ES6方法（记住了split()方法可以传递第二个参数）
- axios 中文文档 翻译（比较完整的中文翻译，axios的github地址）
- 前端异常监控(异常监控及上报)
- 异常监控：教你如何优雅的处理前端异常(异常监控及上报)
- Sentry的前端异常监控方案(异常监控及上报)
TypeScript
ES6、ES7、ES8
- 30分钟掌握ES6/ES2015核心内容（上）
- 30分钟掌握ES6/ES2015核心内容（下）
- ES6之常用开发知识点：入门（一）
- 【async/await】用 async/await 来处理异步
- 如何在 JS 循环中正确使用 async 与 await
- 用 ES6 写全屏滚动插件
vue
- Vue2 几种常见开局方式
- Vue.js——60分钟组件快速入门
- 揭密 Vue 的双向绑定(自定义v-model)
- vuex最简单、最直白、最全的入门文档
- Vue源码解析(五)-vuex
- Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)
- 手摸手，带你用vue撸后台 系列(花裤衩-系列文章包括基础篇、登录权限、实战、webpack4配置等内容)
- Vue.js写一个SPA登录页面的过程（该实现就是登录成功后在cookie中添加一个登录状态）
- vue后端管理系统模板vue-admin-template（后台模板）
- vue-manage-system 后台管理系统开发总结 （后台模板）
- 处理 Vue 单页面 Meta SEO的另一种思路: vue-meta-info
- Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
- vue非父子组件怎么进行通信
- 关于Vue实例的生命周期created和mounted的区别
- vue-cli + webpack 多页面实例配置优化方法(多页面应用配置，动态设置多入口文件JS)
- vue-cli4 全面配置(持续更新)
- 参考ElementUI的文档实现方案，实现自己组件库的说明文档（vue-cli2实现markdown预览）
- vue-cli3项目展示本地Markdown文件的方法（vue-cli3实现markdown预览）
- vue-worker的使用（github地址）
- 手把手教你如何在生产环境检查 Vue 应用程序
- 基于Vue的前端架构，我做了这15点
- 面试题：你能写一个Vue的双向数据绑定吗？
- [160行代码仿Vue实现极简双向绑定[详细注释]](https://segmentfault.com/a/11...)
- vue实现右键菜单vue-contextmenu、js实现自定义contextmenu（右键菜单）
- 插件：vue-tooltip（提示）、vue-lazyload（图片懒加载）、vue-calendar（日期插件）
- Vue利用canvas实现简易移动端手写板
- 基于vue的下拉刷新&滚动刷新指令
- Vue.js写一个音乐播放器
- vue的源码解析（passive特性，感觉是面试加分项） （Chrome提出的一个新的浏览器特性,检查浏览器是否可以使用该特性,提升滚动流畅度,其中addEventListener第三个参数可以接受一个对象，参考MDN:EventTarget.addEventListener()）
- Vue组件之Tooltip(提供大致思路实现一个Tooltip)
- Vue 路由组件传参的 8 种方式(通过params、query、hash、props、vuex、本地存储等传参)
- 《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用》系列
- Vue通过Render向子组件中传递作用域插槽
- Vue 组件通信的 8 种方式
- Vue Genesis(Vue Genesis 是源于 Followme 5.0诞生的一个轻量级的 Vue SSR 插件)
- 关于vue的keep-alive需要条件性缓存的解决
- [Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]](https://segmentfault.com/a/11...)
html(5)
- 文件各种上传，离不开的表单
- [[HTML5] Blob对象及扩展分片上传文件](https://www.cnblogs.com/hhhya...)
- H5图片压缩与上传
- HTML5 postMessage 和 onmessage API 详细应用
- MessageChannel 消息通道
- 视频H5 video最佳实践
- 移动端开启摄像头、视屏录制：MediaDevices.getUserMedia()、MediaRecorder()、HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试
- Canvas-图片旋转
css(3)
- 纯css 实现footer sticker (实现footer一直在页面底部)
- 从网易与淘宝的font-size思考前端设计稿与工作流
- 不得不收藏的——IE中CSS-filter滤镜小知识大全
- CSS实现水平垂直居中的1010种方式（史上最全）
- 个人总结（css3新特性）
- 为什么很多web项目还是使用 px，而不是 rem？
- 极速适配 iPhone X 秘笈(针对新出的iphone X手机进行的适配方案)
- 【布局】图解CSS3 Flexbox属性
- 【布局】阮一峰之Flex 布局教程：实例篇
- 【CSS进阶】CSS 颜色体系详解
- 如何用纯CSS创作一张纪念卓别林的卡片
- 如何用自己喜欢的 CSS 风格重置网站的样式
- 理解Shadow DOM(一)
jquery
webpack
- 教你一步步从零构建webpack开发多页面环境(webpack1.x)
- vue-cli的webpack模板项目配置文件分析(脚手架：vuecli2)
- 入门 Webpack，看这篇就够了 (webpack3及以前版本配置，webpack入门)
- webpack从此不再是我们的痛点 — 核心基础(webpack3)
- webpack3插件CommonChunkPlugin分离ElementUI和Echarts
- 详解webpack-CommonsChunkPlugin的配置和用法（webpack3.x对应的提取公共模块CommonsChunkPlugin插件的使用）
- webpack中的externals应该怎么使用？
- webpack4核心模块tapable源码解析
- 如何编写一个WebPack的插件原理及实践
- webpack-缓存
- 了解babel：polyfill、loader、 preset-env及 core之间的关系
- 详解babel8.X版本用法填坑（babel-loader ， @babel/core , @babel/plugin-stransform-runtime, @babel/preset-env）
- babel-preset-env与stage-x的使用指南
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)(webpack4)
- webpack 中那些最易混淆的 5 个知识点
- WEBPACK + JSP 构建多页应用(把内存中的文件输出到磁盘插件write-file-webpack-plugin)
git
nodejs
- 阮一峰：npm scripts 使用指南
- Node模块--chalk (chalk 包的作用是修改控制台中字符串的样式)
- Node portfinder (获取当前可用的port)
- 阮一峰：CommonJS规范
- 深入浅出 Node.js（三）：深入 Node.js 的模块机制
- http-proxy-middleware使用方法和实现原理（源码解读）(http-proxy-middleware实际就是将http-proxy封装，使用起来更加方便简单,新版本的http-proxy-middleware使用方式参考github,代理方法名：createProxyMiddleware)
- Express基于 Node.js 平台，快速、开放、极简的 Web 开发框架
- PM2来部署nodejs服务器永久开启(pm2 是一个带有负载均衡功能的Node应用的进程管理器)
- Browsersync说明文档(Browsersync让浏览器实时、快速响应文件变化并自动刷新)
优化、技巧
- 4个错误使用JavaScript数组方法的案例
- 高效遍历匹配Json数据，避免嵌套循环(转)
- 挑战月薪30K | 前端性能优化的12 条建议（干货收藏）
- 前端性能优化设计12问 （思否课程）
- 前端性能优化 24 条建议（2020）
- 前端装逼技巧 108 式（一）—— 打工人
- js 这种多个if的写法如何优化
- 如何实现高性能的在线 PDF 预览
前端微服务
- qiankun(qiankun 是一个基于 single-spa 的微前端实现库)【微前端】
- 基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇
- 记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南
- 目标是最完善的微前端解决方案 - qiankun 2.0
- qiankun微前端实战看这篇就够了 - Vue项目篇
- 手把手实践qiankun微前端的开发和部署（入门参考）- github示例地址
- 云音乐大前端团队:基于 qiankun 的微前端应用实践
- 每日优鲜大前端团队:每日优鲜供应链前端团队微前端改造
- 从零开始写一个微前端框架-数据通信篇
- 深度：从零编写一个微前端框架
- 从零到一实现企业级微前端框架，保姆级教学
小程序开发
- Vant Weapp 轻量、可靠的小程序 UI 组件库(Vant 是有赞前端团队开源的移动端组件库,Vant官方提供了 Vue 版本和微信小程序版本)
- Mpvue中使用Vant Weapp组件库
- Vant自定义微信小程序的tabbar
- 一行代码让微信小程序支持cookie：weapp-cookie
- wxParse(wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析;已经停止维护)
网络协议、安全
- HTTP Keep-Alive模式
[需细读] - 看完这篇文章，我奶奶都懂了https的原理
- 你真的会使用XMLHttpRequest吗？
- 预测最近面试会考 Cookie 的 SameSite 属性
- 前端开发如何独立解决跨域问题（代理与反向代理）
- 通讯相关：STOMP Over WebSocket
- 反向代理和正向代理区别
- Tomcat的HTTP与AJP协议
- 基于Token的WEB后台认证机制 (基JSON Web Token（JWT）的Token认证机制实现、Token认证的安全问题)
- 基于 Token 的身份验证
- HTML a标签打开新标签页避免出现安全漏洞，请使用“noopener”(a标签中使rel="noopener"避免把window变量带到新窗口而出现的安全漏洞)
- 99%的人都理解错了HTTP中GET与POST的区别(重大区别：GET产生一个TCP数据包；POST产生两个TCP数据包)
- HTTP状态码之101（协议转换）
- 浅析http状态码301、302、303、307、308区别及对SEO优化网址URL劫持的影响
- 前端安全系列（一）：如何防止XSS攻击？
- 前端安全系列（二）：如何防止CSRF攻击？
测试框架
xml
- XML to HTML(w3c教程：xml转为html)
- XSL 语言(XML 样式表)
- JavaScript实现将xml转换成html table表格的方法
Nginx
- Nginx中的Rewrite的重定向配置与实践
- Nginx目录和配置语法(nginx系列)
问题探索
- 解决input type=file打开时慢、卡顿问题
- “无限加载更多”带来的移动端性能瓶颈
- 为什么element ui 的export default 可以 import 解构赋值？
- 前后端分离，前端如何判断登录状态？（由该问题可引申出token认证、Cookie认证相关优缺点，哪种方式更适合前后端分离的场景）
插件效果
- jQuery超级简单的绿色拖动验证码功能
- jQuery打印插件jqprint
- jQuery瀑布流插件 Masonry、jquery瀑布流布局(masonry.js) （瀑布流效果）
- 利用jqueryRotare实现抽奖转盘
- jQuery左右箭头和鼠标控制的板块滚动
- jquery图片层叠旋转木马切换
- jQuery鼠标悬停导航底部动画效果、导航线运动效果 （导航线效果）
- 基于Framework7实现的H5手机移动端三级联动城市选择器-01 （根据px计算）（省级联动效果）
- LArea移动端省市区城市三级联动选择控件-02 （基于em计算）（省级联动效果）
- 移动端网页轻量级日期控件LCalenda （根据em计算）（日期控件）
- jQuery日历插件(也适用于手机上下滑动选择时间) 、Jquery滑动日期输入控件 （日历控件）
- jQuery/CSS3实现拼图效果的相册插件
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
- jQuery和CSS3简单的背景图片3D视觉差特效 、Sequence.js – 视差滚动特效图片滑块、上下互动视觉差特效 （视觉差效果）
- iOS百度外卖的头像波浪效果实现
- 使用Move.js创建CSS3动画
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法、模拟滚动条例子（模拟滚动条）
- particles.js（鼠标移动画折线效果）
- jQuery全屏滚动插件fullPage.js演示
- Swiper中文网 （Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7））
- jquery.SuperSlide.js官网、案例效果地址 （网站上常用的SuperSlide基本都有！也有移动端的TouchSlide.js）
- Velocity.js（不依赖jquery的轻量级JS动画库，包含了.animate() 的全部功能）
- layui弹出层组件（layer是一款近年来备受青睐的web弹层组件，截至到2017年9月13日，已运用在超过 30万 家 Web 平台）
- 360度全景 krpano 、krpano HTML5全景漫游（全景效果）
- HTML5 canvas signature_pad手写签名 （手绘签名源码）
- html2canvas（网页保存为canvas）
- 网易云-滑动拼图 体验地址：https://id.163yun.com/login?r...
- 表单异步校验：async-validator
- SpreadJS-HTML5纯前端表格控件
- 原生JS实现DOM粒子爆炸效果
- js脚本房贷计算器
面试汇总
- 蚂蚁、字节、滴滴面试经历总结
- 104道 CSS 面试题，助你查漏补缺
- 关于JS作用域的问题
- 备战面试/笔试 —— 前端程序员不可不知的HTTP知识
- JavaScript：面试频繁出现的几个易错点
- 腾讯web前端开发工程师笔试题及答案
- 世界各地程序员共同总结的前端面试题
- 从一道百度面试题到分析输入url到页面返回的过程（或者查询返回过程）
- Vue面试中，经常会被问到的面试题/Vue知识点整理
- css&html面试知识点
- web前端面试题一（从需求：一个输入框，用户输入时有联想搜索，每次用户输入都会触发请求，过多的请求会造成服务器的压力，如何去解决这个问题？由浅入深提问面试者并不断优化实现方式）
- 字节跳动最爱考的前端面试题：计算机网络基础
- 字节跳动最爱考的前端面试题：JavaScript 基础
- 字节跳动最爱考的前端面试题：CSS 基础
- 「面试题」20+Vue面试题整理
- vue面试题收集
游戏开发
- 泡泡龙游戏HTML5
- createjs： html游戏引擎，createJs框架介绍、createjs 使用记录、createjs开发入门
- 实现2048慕课学习网站
- 原生JS+Canvas实现五子棋游戏
- “倔驴”一个h5小游戏的实现和思考（码易直播）——总结与整理
- canvas开发玉兔吃月饼
- 100行JS实现HTML5的3D贪吃蛇游戏
- js开发实现简单贪吃蛇游戏（20行代码）
- js实现贪吃蛇小游戏（容易理解）
- JavaScript版—贪吃蛇小组件
3.推荐技术社区
- 极客时间
- 掘金（活跃社区，里面有很好的技术文章、小册）
- 慕课网
- SegmentFault（活跃的一个社区，有问答、文章、讲堂，质量也很不错）
- stackoverflow（一个问答社区，基本上各种问题都能在上面获得解答）
- 泰课在线
- 瓢城Web俱乐部
- 风变编程
- 网易云课堂(网易公司（163.com）旗下专注职业技能提升的在线学习平台)
- 知乎（虽然不是单纯的IT社区，但是里面有很多大牛和高质量的专栏！）
- github
- PHP之道
- html5trick (html5资源教程网站)
- 蓝桥云课(原名：实验楼-WEB，提供web开发、nodeJS等上千门培训课程)
4.开发杂谈
- 个人建议-怎样写出一篇好文章
- 天天写业务代码，如何成为技术大牛？
- 如何高效的学习技术-编码砖家
- 大公司里怎样开发和部署前端代码？
- 从破解某设计网站谈前端水印(详细教程)
- 不能说的秘密——前端也能玩的图片隐写术
- 饿了么基于Vue2.0的通用组件开发之路（分享会记录）
- 如何解决web大流量、高并发的问题
- 前端网老姚浅谈：怎么学JavaScript？
- 浏览器的工作原理：新式网络浏览器幕后揭秘
- 编辑框用 Ctrl+V 粘贴图片是如何实现的？
- IT技术人员的自我修养
- Tomcat配置
- 前后分离架构的探索之路 (探索前后分离的过程和心得感想,要记住：你是一个工程师，你不是一个页面仔！)
- Vue作者尤雨溪的深度访谈，你不得不看
5.推荐书籍
- 《JavaScript高级程序设计》：红皮书，非常适合系统性的学习 JavaScript
- 《JavaScript权威指南》：犀牛书，JS经典书籍
- 《JavaScript 语言精髓与编程实践》：作者-周爱民，绿宝书，本书不建议新手阅读
- 《JavaScript DOM编程艺术》：快速上手 DOM 操作书籍
- 《JavaScript 忍者秘籍》：作者是jQuery库的创建者，第2版涵盖了 ES6、7 的内容
- 《你不知道的 JavaScript（上卷）》： Github 开源书籍，目前已有 132k 个 Star ，作者将其学习 JavaScript 以来的经验记录为笔记并开源，适合中级及以上程序员阅读
- 《你不知道的 JavaScript（中卷）》：略
- 《你不知道的 JavaScript（下卷）》：略
- 《JavaScript 语言精粹》：蝴蝶书，普及JavaScript开发思维的一本书籍
- 《JavaScript 设计模式与开发实践》：腾讯员工曾琛写的一本书，讲常用的14中设计模式
- 《javascript框架设计》：作者-司徒正美
- 《编写可维护的JavaScript》：乌龟书
- 《ES6标准入门》：作者-阮一峰，这本书已开源（ES6标准入门）
- 《锋利的jquery》：jQuery入门书籍，比较经典
- 《HTML5与CSS3权威指南》：略
- 《HTML5 Canvas核心技术》：内容主要讲解图形、动画与游戏开发
- 《深入浅出Node.js》：作者-朴灵
- 《Webpack实战 入门、进阶与调优》：作者-居玉皓
6.常用工具
- apiDoc文档生成工具（开发文档生成器，支持Java, JavaScript, PHP,CoffeeScript,Elixir,Erlang,Perl,Python,Ruby,Lua）
- jsdoc文档生成器（jsdoc一个根据javascript文件中注释信息，生成JavaScript应用程序或库、模块的API文档 的工具）
- W3Cschool在线各种工具（包括代码工具、格式化美化工具、站长辅助工具、CSS在线工具、编码转码工具）
- windows:RegexBuddy；Mac：Expressions(正则表达式生成工具)
- Node.js ES2015/ES6, ES2016 and ES2017 support（查询node版本对JS的支持程度）
- carbon- 一个能生成漂亮的代码分享图的在线工具
- 关于uni-app的ui库、ui框架、ui组件(uniapp)
- mcg-helper代码生成工具（简单总结了一篇前端入门使用的随笔：web前端使用mcg-helper代码生成工具学习笔记）
- Gitbook简易教程
- gitbook实现编写API文档生成html、pdf格式
- Fiddler抓包工具
7.其它资源
- 神州英才卓越领导力培训总结
- 【工具】在线生成电子印章
- 【网址】天眼查（查公司，查老板，查关系）
- ppt免费模板-第一PPT（免费ppt模板下载）
- 【综合】录制屏幕gif动画小软件：Screen to Gif
- 【综合】前端快速查询语句：linq.js
- 【学习】XSLT 教程 （ofd需要）
- 博客园皮肤样式一（博客园皮肤参考）
- ofd.js相关(跟pdf.js类似来解析pdf文件) 演示地址
Phantomjs结合nodejs下载网页及相关资源文件
webAssembly相关
[重点查看]- 专利检索工具：soopat、佰腾、润桐、incopat、万象云、大为、智慧牙
- 悟空CRM(悟空CRM-11.0 JAVA版Spring前端源码，采用vue+elementUI 技术框架。前端源码需打包后使用)
- 5 大 DevOps 工具，你用过几个？(定期发布代码、自动化部署、并将持续集成 / 持续交付作为发布过程的一部分)
- Tampermonkey一款免费的浏览器扩展和最为流行的用户脚本管理器（适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox）
- 用户脚本Greasy Fork（用户脚本是一段代码，它们能够优化您的网页浏览体验）
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。