1.举荐团队博客

举荐团队

  • w3cplus
  • w3school
  • 前端察看
  • 腾讯Web前端Alloy团队
  • qq前端月报
  • 淘宝前端团队fed

举荐博客

  • 汤姆大叔博客
  • 张鑫旭博客
  • 阮一峰博客
  • 廖雪峰官网
  • 牧云云博客
  • 前端小智
  • 小胡子哥的集体网站
  • Jerry Qu
  • fouber github
  • 木易杨 github（前端进阶系列）
  • xiaozhi github（小智GitHub博客）

2.举荐文章教程

资源清单

  • 守候：集体分享--web前端学习资源分享
  • 前端学习笔记总结清单，包罗万象
  • 前端最实用书签【看完能够提涨薪啦】
  • Wscats github 学习笔记与文章
  • 前端进击的伟人(内容包含：前端进击的伟人系列、JavaScript设计模式系列、读书笔记系列)
  • JavaScript 机密花园【书籍总结】
  • 《JavaScript权威指南》JavaScript外围概念演绎整顿【书籍总结】
  • 前端资源系列（4）-前端学习资源分享&前端面试资源汇总
  • 程序员练级攻略（2018）：前端根底和底层原理 （css、js、浏览器原理、网络协议文章总结）

JavaScript

  • 阮一峰：Javascript 面向对象编程系列（内容包含：封装、构造函数封装、非构造函数封装）
  • 腾讯全端 AlloyTeam 团队 Blog JavaScript设计模式（设计模式）
  • 龙恩：Javascript罕用的设计模式详解（设计模式）
  • 汤姆大叔：深刻了解JavaScript系列（设计模式）
  • 老姚：《JavaScript 正则表达式迷你书》（正则表达式全攻略）
  • 编写本人的代码库（javascript罕用实例的实现与封装）
  • 一行能装逼的JavaScript代码（次要考查JS的类型转换，如：(!(~+[])+{})--[~+""][~+[]] + ~~!+[]]+({}+[])[[~!+[]]~+[]]）
  • 前端大文件上传(次要包含：文件编码上传、文件切片、断点续传等形式)
  • 摸索怎么让 JS - API 具备更好的实用性
  • 摸索怎么样的参数能让 JS - API 更灵便
  • 重构 - 设计API的扩大机制
  • 字符编码ASCII、Unicode 、UTF-8 及实例汉字与Unicode码的互相转化（编码）
  • Unicode与JavaScript详解（编码）
  • 执行上下文具体图解
  • 这一次，彻底弄懂 JavaScript 执行机制
  • 前端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()办法能够传递第二个参数）

TypeScript

  • 了不起的 TypeScript 入门教程（1.2W字）

ES6、ES7、ES8

  • 30分钟把握ES6/ES2015核心内容（上）
  • 30分钟把握ES6/ES2015核心内容（下）
  • ES6之罕用开发知识点：入门（一）
  • 【async/await】用 async/await 来解决异步
  • 如何在 JS 循环中正确应用 async 与 await

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的区别
  • 在多页面我的项目下应用Webpack+Vue(多页面利用配置)
  • vue-cli + webpack 多页面实例利用 (多页面利用配置)
  • vue-cli + webpack 多页面实例配置优化办法 (多页面利用配置)
  • 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()）

html(5)

  • 文件各种上传，离不开的表单
  • [[HTML5] Blob对象及扩大分片上传文件](https://www.cnblogs.com/hhhya...
  • H5图片压缩与上传
  • HTML5 postMessage 和 onmessage API 具体利用
  • MessageChannel 音讯通道
  • 视频H5 video最佳实际
  • 挪动端开启摄像头、视屏录制：MediaDevices.getUserMedia()、MediaRecorder()、HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,通过Android测试

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 格调重置网站的款式

jquery

  • 一个小时学会jQuery（jQuery入门经典总结）
  • jQuery中的extend办法源码

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 个知识点

git

  • 手把手教如何将本地我的项目上传到Github（包会）
  • 一个小时学会Git
  • 每天99%的工夫在应用的Git命令

nodejs

  • 阮一峰：npm scripts 使用指南
  • Node模块--chalk (chalk 包的作用是批改控制台中字符串的款式)
  • Node portfinder (获取以后可用的port)
  • 阮一峰：CommonJS标准
  • 深入浅出 Node.js（三）：深刻 Node.js 的模块机制

优化、技巧

  • 4个谬误应用JavaScript数组办法的案例
  • 高效遍历匹配Json数据，防止嵌套循环(转)
  • 挑战月薪30K | 前端性能优化的12 条倡议（干货珍藏）
  • 前端性能优化设计12问 （思否课程）
  • 前端性能优化 24 条倡议（2020）
  • 前端装逼技巧 108 式（一）—— 打工人

前端微服务

  • qiankun(qiankun 是一个基于 single-spa 的微前端实现库)【微前端】
  • [基于 qiankun 的微前端最佳实际（万字长文） - 从 0 到 1 篇]()
  • [记一次 微前端 qiankun 我的项目 实际 !!! 防踩坑指南]()
  • [指标是最欠缺的微前端解决方案 - qiankun 2.0]()

网络协议、平安

  • 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数据包)

测试框架

  • 阮一峰：测试框架 Mocha 实例教程
  • 契约测试框架Pact：中文参考指南 Pact.js之github地址

xml

  • XML to HTML(w3c教程：xml转为html)
  • XSL 语言(XML 样式表)
  • JavaScript实现将xml转换成html table表格的办法

问题摸索

  • 解决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...://dun.163.com/dashboard&h=yd
  • 表单异步校验：async-validator
  • SpreadJS-HTML5纯前端表格控件

面试汇总

  • 蚂蚁、字节、滴滴面试经验总结
  • 104道 CSS 面试题，助你查漏补缺
  • 对于JS作用域的问题
  • 备战面试/口试 —— 前端程序员不可不知的HTTP常识
  • JavaScript：面试频繁呈现的几个易错点
  • 腾讯web前端开发工程师口试题及答案
  • 世界各地程序员独特总结的前端面试题
  • 从一道百度面试题到剖析输出url到页面返回的过程（或者查问返回过程）
  • Vue面试中，常常会被问到的面试题/Vue知识点整顿
  • css&html面试知识点
  • web前端面试题一（从需要：一个输入框，用户输出时有联想搜寻，每次用户输出都会触发申请，过多的申请会造成服务器的压力，如何去解决这个问题？由浅入深发问面试者并一直优化实现形式）

游戏开发

  • 泡泡龙游戏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配置
  • 前后拆散架构的摸索之路 (摸索前后拆散的过程和心得感想,要记住：你是一个工程师，你不是一个页面仔！)

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格局

7.其它资源

  • 神州英才卓越领导力培训总结
  • 【工具】在线生成电子印章
  • 【网址】天眼查（查公司，查老板，查关系）
  • ppt免费模板-第一PPT（收费ppt模板下载）
  • 【综合】录制屏幕gif动画小软件：Screen to Gif
  • 【综合】前端疾速查问语句：linq.js
  • 【学习】XSLT 教程 （ofd须要）
  • 博客园皮肤款式一（博客园皮肤参考）
  • ofd.js相干(跟pdf.js相似来解析pdf文件) 演示地址

  • Phantomjs联合nodejs下载网页及相干资源文件

    • 参考地址
    • PhantomJS下载地址
    • Phantomjs 应用阐明

  • webAssembly相干[重点查看]

    • 几张图让你看懂WebAssembly
    • 字节码联盟成立 以欠缺WebAssembly在浏览器之外生态性