培训计划

F2E-Awesome

更新时间：2019-3-16
难度等级：☆ 为初级，☆☆ 为中级，☆☆☆ 为高级。
标签体系：开发工具、HMTL5、CSS、JS、主流框架、优化、Web服务器端、源码学习、前端类库、移动端、PWA、WebAssembly、小程序、Canvas、WebGL、SVG、Graphql、模块化编程、算法、排序、加密、数据结构、数据库、包管理、Python、设计模式、网络协议、函数式编程、DOM、跨域、事件模型、安全、Git、前端规范、Nginx、DNS、CDN、V8 引擎、Linux、Electron、抓包工具、Hadoop、测试、部署、监控、浏览器、数据可视化、前端工程化、物联网、消息队列、开发模式、架构、面试、ECMAScript标准、前端组织、学习网站、技术杂谈

开发工具

Sublime Text ☆☆
VS Code ☆☆☆
Atom ☆☆
WebStorm ☆☆☆

源码学习

前端类库

JS 类库
- jQuery ☆
- zepto ☆
- underscore ☆☆
- lodash ☆☆
UI 库 ☆
- Bulma
- EasyUI
- Bootstrap
- Meterial Design
- Wired Elements(手绘风格 UI 库)
- 移动端
- SUI Mobile
- MUI
软件
- PS ☆
- AI ☆
- 精品 MAC 应用分享 ☆
视觉网站
- Behance ☆☆
- Dribbble ☆☆
原型工具
- Axure ☆
- Sketch ☆

移动端

Native App
- React Native ☆☆
- Weex ☆☆
- NativeScript
Hybird App
- Ionic ☆☆
- Cordova ☆☆
- Phonegap ☆☆
Web App ☆
响应式布局
- rem ☆
webview
- 页面通信 ☆
- 原理 ☆☆
关于 Hbuilder ☆
移动端 Touchend 事件不触发解决方案 ☆
移动Web UI库（H5框架）有哪些 ☆
H5 移动调试全攻略 ☆☆

PWA

官网 ☆☆
第一本 PWA 中文书 ☆☆
PWA（Progressive Web App）初探总结 ☆
讲讲 PWA
React 同构应用 PWA 升级指南 ☆
9 amazing PWA secrets ☆☆☆
awesome-progressive-web-apps 打造 PWA 的资源集合
pwa.rocks 一些优秀的 PWA 集合

WebAssembly

小程序

Canvas

WebGL

SVG

走进 SVG ☆☆
SVG 类库 snap.svg.js ☆☆

Elasticsearch

Graphql

graphql
apollo
apollo-blog 需要翻墙

模块化编程

算法

算法练习 ☆☆
JavaScript 算法与数据结构 ☆☆☆
贪心算法
动态规划
搜索
图论
计算几何
数学
大数问题
矩阵计算

排序

交换排序
- 冒泡排序
- 快速排序
插入排序
- 直接插入排序
- 希尔排序
选择排序
- 直接选择排序
- 堆排序
- 归并排序

加密

初探加密算法 ☆☆☆
算法分析密码: as75 ☆☆☆
程序员实用算法密码: mmap ☆☆☆
对称加密
- DES ☆☆☆
- 3DES ☆☆☆
- TDEA ☆☆☆
- Blowfish ☆☆☆
- RC2 ☆☆☆
- RC4 ☆☆☆
- RC5 ☆☆☆
- IDEA ☆☆☆
- SKIPJACK ☆☆☆
- AES ☆☆☆
非对称加密
- RSA ☆☆☆
- ECC（移动设备用） ☆☆☆
- Diffie-Hellman ☆☆☆
- El Gamal ☆☆☆
- DSA（数字签名用） ☆☆☆
Hash 加密
- MD2 ☆☆☆
- MD4 ☆☆☆
- MD5 ☆☆☆
- HAVAL ☆☆☆
- SHA ☆☆☆

数据结构

分类
- 数组
- 栈
- 队列
- 链表
- 树
  - 二叉树
- 图
- 堆
- 散列表
- 链表
  - 单向链表
  - 双向链表
  - 环链表
Data Structures for Beginners ☆☆

数据库

MySQL ☆☆☆
Redis ☆☆☆
- Redis 教程
- 读完这篇，你一定能真正理解 Redis 持久化
Memcached ☆☆☆
- Memcached 教程
三种基本的存储引擎比较 ☆☆☆

包管理

npm ☆
cnpm ☆
yarn ☆
homebrew ☆
bower ☆

Python

初级 ☆
- Python 入门指南
- Python 官方文档
- Python 笔记
  - 简单语法
  - 常用操作
  - Open 文件操作
  - ...
中级 ☆☆
- 30s Python
- 爬虫
  - Scrapy
- Web 框架
  - Tornado
  - Jinja2
  - Flask
  - Django
高级 ☆☆☆
- Cook Book
- 分布式
  - Celery
- 移动端
  - Kivy
- 数据分析
  - Pandas
- 可视化
  - Matplotlib
  - Seaborn
  - Plotly
  - Bokeh
- 机器学习
  - Tensorflow
  - PyTorch
  - MxNet

设计模式

菜鸟-设计模式 ☆☆
JavaScript 设计模式 ☆
常用的 Javascript 设计模式 ☆☆
23 种设计模式全解析
创建型模式
- 工厂方法
- 抽象工厂
- 建造者
- 原型
- 单例
结构型模式
- 适配器
- 桥接
- 组合
- 装饰器
- 外观
- 享元
- 代理
行为型模式
- 解释器
- 模板方法
- 责任链
- 命令
- 迭代器
- 中介者
- 备忘录
- 观察者
- 状态
- 策略
- 访问者

网络协议

TCP ☆☆☆
UDP ☆☆☆
HTTP 协议入门 ☆
HTTP2 ☆☆☆
HTTPS ☆☆
- 一个故事讲完 HTTPS
- 图文还原 HTTPS 原理
计算机网络的 7 层协议 ☆☆☆

函数式编程

什么是函数式编程思维？ ☆☆☆
我眼中的 JavaScript 函数式编程 ☆☆☆
防抖和节流原理分析
参数个数 Arity
高阶组件 Higher-Order Functions (HOF)
偏应用函数 Partial Application
柯里化 Currying
闭包 Closure
自动柯里化 Auto Currying
函数合成 Function Composition
Continuation
纯函数 Purity
副作用 Side effects
幂等 Idempotent
Point-Free Style
断言 Predicate
约定 Contracts
范畴 Category
JavaScript 函数式编程术语大全
...

DOM

JavaScript HTML DOM ☆☆

跨域

JSONP ☆☆
CORS ☆☆
Nginx ☆☆

事件模型

观察者模式 ☆☆
DOM0 级模型 ☆☆
IE 事件模型 ☆☆
DOM2 级模型 ☆☆
JQuery Event 模型 ☆☆
JS 事件模型 ☆☆

安全

如何防止 XSS 攻击？
Web 安全之 XSS 和 CSRF ☆☆☆
Web 安全的三个攻防姿势 ☆☆☆
XSS 的原理分析与解剖 ☆☆☆
对于 XSS 和 CSRF 你究竟了解多少 ☆☆☆
CSRF 攻击的应对之道 ☆☆☆
SQL 注入 ☆☆☆
HTTPS ☆☆☆
内网渗透 ☆☆☆
DDos 攻击 ☆☆☆
点击劫持 ☆☆
Session 劫持 ☆☆
短信接口攻击 ☆☆

Git

前端规范

Nginx

DNS

CDN

什么是 CDN？ ☆☆

V8 引擎

Linux

ls/cd/rm/cat/chmod/chown/useradd/df/du/ps/top/head/tail ☆☆
Linux ☆☆
掌握 Linux 命令 Grep ☆☆
Linux 实用命令 ☆☆ （小虎）
Mac 下查看端口占用情况 ☆☆
程序员必备的 Linux 基础知识 ☆☆
网络操作
- curl
- netstat
- lsof
- ifconfig
- ssh
- tcpdump
- iptables
grep ☆☆
sed ☆☆
awk ☆☆☆
commander 将介绍如何利Javascript做为服务端脚本
chalk 命令行彩色输出
chokidar node文件监控

Electron

抓包工具

Fiddler ☆☆
Charles ☆☆
HttpWatch ☆☆
spy-debugger ☆☆
模拟请求
- Postman ☆☆

Hadoop生态

测试

单元测试
- Jest☆☆☆
- Jasmine ☆☆☆
- mocha ☆☆☆
- chai ☆☆☆
- Karma ☆☆☆
软件测试
- 你了解软件测试吗？ ☆☆
自动化测试 (程钧沅)
- selenium_webdriver ☆☆
- Appium移动自动化测试 ☆☆
- Appium移动自动化测试 ☆☆
- UI自动化测试 ☆☆☆
  
  网易UI自动化测试框架，开源的，结合AI，自动更新测试用例、自我学习和需求沉淀。智能测试方向！！！！

部署

Docker
- Docker 构建统一的前端开发环境 ☆☆
- 私服推荐 Nexus ☆☆☆
- 大型企业级推荐 harbor ☆☆☆
- Docker 底层技术 ☆☆☆
- 精简 Docker 镜像的五种通用方法
什么是 Kubernetes ☆☆
Jenkins ☆☆☆

监控

浏览器

数据可视化

图表 ☆☆
- echarts
- highcharts
- g2
地图 ☆☆
- Google Map
- Mapbox
- 高德
- 百度
- 腾讯
- 蜂鸟室内地图
埋点统计 ☆☆
- 揭开 JS 无埋点技术的神秘面纱

前端工程化

Web 研发模式演变 ☆☆
我们是如何做好前端工程化和静态资源管理京东 ☆☆☆
百度 fis ☆☆
Scrat ☆☆
Grunt ☆☆
Gulp ☆☆
- Gulp
- Gulp 4
Webpack
- Webpack 4 ☆☆☆
  - Webpack 4 配置最佳实践
- 如何十倍提高你的 webpack 构建效率 ☆☆☆
- webpack 性能优化
  - 减小前端资源大小 ☆☆
  - 利用好持久化缓存 ☆☆☆
  - 监控和分析应用 ☆☆☆
Rollup
Browserify ☆☆
Parcel ☆☆
Babel
什么是 Kubernetes？

物联网

消息队列

消息队列常见的 5 个应用场景
ActiveMQ
RabbitMQ
ZeroMQ
Kafka
- 了解 Kafka ☆☆
- Kafka 入门 ☆☆
- Kafka的架构原理，你真的理解吗？ ☆☆☆
MetaMQ
RocketMQ
消息队列mq总结 ☆☆
缓存淘汰算法--LRU算法 ☆☆☆

这个是各种消息队列的框架的核心算法，都是这个算法的变形

开发模式

DevOps 简介 ☆
猪八戒网的 DevOps 进化论 ☆☆

架构

面试

ECMAScript标准

ECMAScript 标准最新版 ☆☆☆
ECMAScript 标准历史版本 ☆☆☆

前端组织

学习网站

技术杂谈

一个程序员的成长之路 - 剖析别人，总结自己 ☆☆☆

张云龙，全民直播CTO，也是个前端工程师
秒杀系统优化思路 ☆☆☆

尽量将请求拦截在系统上游（越上游越好）, 读多写少的常用多使用缓存（缓存抗读压力）
客户端高可用建设体系

2000万日订单背后：美团外卖客户端高可用建设体系
缓存架构设计 ☆☆☆

微博应对日访问量百亿级的缓存架构设
前端重构方案 ☆☆

规范、技术选型、性能优化、构建工具、开发效率
Taro - 多端开发框架 ☆☆

京东多端统一开发框架 - Taro
你可能不知道的前端知识点 ☆☆
V8 并发标记 ☆☆☆

引擎V8推出“并发标记”，可节省60%-70%的GC时间
JS 的数据结构 ☆☆

谁说前端就不需要学习数据结构了？
简话开源协议 ☆

了解开源协议，选择最合适的协议
把前端监控做到极致 ☆☆

从采集、数据处理、分析、报警 4 个维度进一步阐述如何把前端监控做到极致
设计一个百万级的消息推送系统 ☆☆☆

百万连接其实只是一个形容词，更多的是想表达如何来实现一个分布式的方案，可以灵活的水平拓展从而能支持更多的连接。
蚂蚁金服核心技术：百亿特征实时推荐算法揭秘

文章提出一整套创新算法与架构，通过对TensorFlow底层的弹性改造，解决了在线学习的弹性特征伸缩和稳定性问题，并以GroupLasso和特征在线频次过滤等自研算法优化了模型稀疏性

前端学习方向和内容

培训计划

F2E-Awesome

开发工具

HTML5

CSS

JS

主流框架

优化

Web 服务器端

源码学习

前端类库

移动端

PWA

WebAssembly

小程序

Canvas

WebGL

SVG

Elasticsearch

Graphql

模块化编程

算法

排序

加密

数据结构

数据库

包管理

Python

设计模式

网络协议

函数式编程

DOM

跨域

事件模型

安全

Git

前端规范

Nginx

DNS

CDN

V8 引擎

Linux

Electron

抓包工具

Hadoop生态

测试

部署

监控

浏览器

数据可视化

前端工程化

物联网

消息队列

开发模式

架构

面试

ECMAScript标准

前端组织

学习网站

技术杂谈