FE-Cookbook

在从事前端开发的时光中，从日常大牛的博客、动态中能零零散散看到不少好的技术文章，同时也看了不少前端书籍，包括《JavaScript 高级程序设计》、《JavaScript 语言精粹》、《HTML5高级程序设计》、《You Don't Know JS》系列、《CSS揭秘》等等，也针对很多方面的问题进行了细致的探索和查漏补缺，比如 CSS3 弹性盒布局、Hybrid App 唤起实现、Web 加载渲染性能、WebAssembly 等等，因此想通过这个项目把个人持续关注的前端相关内容汇总收集，一方面方便自己和其他同学日后查看、另一方面希望与有同样兴趣的同学一起将该项目完善壮大。

本项目持续更新中，如果觉得有用欢迎给项目添加 Star；如果觉得有任何需要改进或者需要完善的地方，欢迎贡献代码提请 PR，针对无冲突的内容我会快速合并。希望为前端圈贡献一些自己的力量。

根据个人理解，本项目分为以下六个部分，见目录

Outline / 目录

• JavaScript - JavaScript 相关的知识汇总，包括读书笔记、知识点整理和语言实现细节等；
• HTML - HTML 语言规范、读书笔记与新兴 API 介绍；
• CSS - CSS 语言规范、读书笔记与专题讲解等；
• Node.js - NodeJS 相关技术细节与实现、读书笔记等；
• Tools & Codes - Web 开发前沿技术与工程打包细节等内容整理；
• QA - 校招/社招前端笔试面试题汇总，计划纳入上百道题，正在持续更新中；
• LeetCodeOJ - 用 JavaScript 刷算法题的一个项目集锦；

JavaScript

• JavaScript 高级程序设计笔记: 根据《JavaScript 高级程序设计》一书整理的知识点，将 JavaScript 及浏览器等相关内容梳理了一遍。
• You Don't Know JS 章节要点整理: 《You Don't Know JS》一书共六本，根据每个章节总结的知识点进行罗列，可以快速阅览 JavaScript 不为人知的一些设计细节，中文书籍见 GitBook。

HTML

• HTML5高级程序设计读书笔记: 根据《HTML5高级程序设计》一书整理的有关 HTML5 新兴 API 相关的知识点。

关键概念

• World Wide Web
• 渲染性能

CSS

CSS3

• CSS3 知识点整理

关键概念

• 学习 CSS 布局
• 深入理解 CSS3 弹性盒布局模型
• Color - MDN
• 移动端 1px 细线解决方案总结
• CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
• 学习使用：before和：after伪元素
• Android 浏览器文本垂直居中问题

Node.js

• 深入浅出 NodeJs 读书笔记：完善中
• 深入理解 Node.js：核心思想与源码分析

Tools & Codes

前端相关基础技术文章

1. Understanding JavaScript’s async await
2. 6 Reasons Why JavaScript’s Async/Await Blows Promises Away
3. An Introduction to Source Maps
4. Babel 入门教程
5. How to use SVG as a Placeholder, and Other Image Loading Techniques
6. Understanding Node.js Event-Driven Architecture
7. Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More
8. JSON Web Tokens vs. Session Cookies In Practice
9. ES6 In Depth: Modules
10. Why (and how) to use eslint in your project
11. Speed up Your Node.js App with Native Addons
12. Ten Things A Serious JavaScript Developer Should Learn
13. Await and Async Explained with Diagrams and Examples
14. But really, what is a JavaScript test?
15. What the Fu*k JavaScript: A list of funny and tricky JavaScript examples
16. Modern JavaScript Explained For Dinosaurs
17. Modern JavaScript for Ancient Web Developers
18. The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery) — SitePoint
19. The Cost Of JavaScript - Addy Osmani
20. JavaScript Start-up Performance - Addy Osmani
21. How JavaScript works: memory management + how to handle 4 common memory leaks
22. How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await
23. How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code
24. Understanding V8’s Bytecode
25. How JavaScript works: an overview of the engine, the runtime, and the call stack
26. Build a state management system with vanilla JavaScript
27. Inside look at modern web browser (part 2)
28. [Paper] Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications
29. Mouse events basics

Web 开发教程与最佳实践

• HTTP协议入门
• How to center in CSS
• 正则表达式30分钟入门教程
• 在安卓设备上使用 Chrome 远程调试功能
• 关于通过H5页面唤Native户端的介绍
• 前端性能优化最佳实践
• The Cost Of JavaScript
• SSL/TLS协议运行机制的概述 | 图解SSL/TLS协议
• The 12-Factor App - 简体中文 | 原版
• JavaScript 运行机制详解：再谈Event Loop
• web worker详解
• A simple interactive ES6 Feature list
• Airbnb Javascript Styleguide
• How I rediscovered my love for JavaScript after throwing 90% of it in the trash.
• 80 Linux Monitoring Tools
• The Modern JavaScript Tutorial
• Abortable fetch
• Removing jQuery from GitHub.com frontend

Web 开发利器与书籍

• The birth and death of JavaScript
• cssreference.io - A free visual guide to CSS.
• JavaScript equality table
• Color Picker
• Simple Icons, SVG icons for popular brands
• Web Page Test - Test a website's performance
• Web Manifest Validator - Test the validity of a Web Manifest
• Modern-js-cheatsheet: Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
• Exploring ES2018 and ES2019
• Git Cheat Sheet
• PreLoaders - Loading 动画收集网站
• Modernizr - 针对浏览器中的 HTML5 和 CSS3 功能支持度检测库
• Webpack Visualizer
• Source Map Explorer

Web 开发打包与未来技术

• webpack | webpack 学习与起步教程 | webpack 配置文件样例
• JSLint - The JavaScript Code Quality Tool
• WebAssembly - A new portable, size- and load-time-efficient format suitable for compilation to the web.
• wasm-pack - rust -> wasm workflow tool!
• Dependency injection
  • Dependency injection in JavaScript
  • 控制反转

会议

• ELECTRON & DESKTOP JS http://www.covalenceconf.com/

WebAssembly 中文教程资源

• WebAssembly 系列（一）生动形象地介绍 WebAssembly
• WebAssembly 系列（二）JavaScript Just-in-time (JIT) 工作原理
• WebAssembly 系列（三）编译器如何生成汇编
• WebAssembly 系列（四）WebAssembly 工作原理
• WebAssembly 系列（五）为什么 WebAssembly 更快
• WebAssembly 系列（六）WebAssembly 的现在与未来

示例代码

• Google 官方 PWA 天气预报程序代码 - 根据 Google 官方教程指导实现的天气预报 PWA 程序代码

QA

• 校招/社招前端笔试面试百题汇总：由于从校招实习到校招提前批，一直在学习前端相关的基础知识并针对具体遇到的细节进行查漏补缺，零零散散发现很多内容值得反复回顾，所以将自己看到过认为还比较经典的题目汇总到这里，供大家参考。
• 用 JavaScript 刷 LeetCode

计算机科学技术文章

• Docker 核心技术与实现原理
• 关系型数据库工作原理

Contribute

非常欢迎为该项目增加内容，共同完善前端技术整理。请 Fork 之后提交代码后发起 PR。

LICENSE

Apache 2.0

Contact

Joe Jiang, Email