编程技术一览，程序员练级攻略

第一步：《与孩子一起学编程》

第二步：在 CodeAbbey 做一些在线编程的练习

第三步：做个网页 Getting started with the Web

一、入门语言 Python

第一步：《Python 编程快速上手》

第二步：《Python 编程：从入门到实践》

二、入门语言 JavaScript

第一步：JavaScript - MDN

第二步：JavaScript Tutorial - W3 schools

第三步：廖雪峰的 JavaScript 教程

三、操作系统入门 Linux

第一步：Linux 教程

四、编程工具 Visual Studio Code

第一步：VS Code 中文文档

五、Web 编程入门

1, 前端基础

学习 CSS 和 HTML，还有前面学习过的 JavaScript。

注意 ：不需要学习文档中的所有内容，重点了解 CSS 和 HTML 是怎么相互作用展示数据的 ；不用记忆，这两个文档（CSS，HTML）是用来查找知识的。

简单学习使用 JS 操纵 HTML，理解 DOM 和动态网页，W3Schools 的 JavaScript HTML DOM 的教程。

2, 后端基础

第一步：学习 PHP

第二步：以 PHP 官方文档 作为学习和查资料的手册

3, 学习要点

第一步，学习 HTML 基本语法

第二步，学习 CSS 如何选中 HTML 元素并应用一些基本样式

第三步，学会是用浏览器（Edge，Firefox），对好看的网页进行动态修改

第四步，在一台 Linux 机器上，配置 LNMP - Ubuntu/Nginx/PHP/MySQL（LAMP - Ubuntu/Apache/PHP/MySQL）

第五步，让后台 PHP 和前台 HTML 进行数据交互，对服务器响应浏览器请求形成初步认识，并实现一个表单提交和反显的功能

第六步，链接 PHP 和 MySQL

4, 学习目的

感受编程，只是为了入门，不必特别精通，做到：

1. 知道 JS 和 Python 的不同即可
2. 知道相关文档和知识在哪里

项目功能：

1. 用户登录和注册（不需密码找回）
2. 用户发布博客/帖子（纯文本即可，不需支持富文本）
3. 用户评论博客/帖子（纯文本即可，不需支持富文本）

项目技术点注意：

1. 用户登录的密码不应保存为明文，应用 MD5+Salt 来保存
2. 用户登录后，对于自己的博客/帖子可以有「重新编辑」或「删除」功能，但无权编辑和删除其他用户的博客/帖子
3. 数据库的设计，需要三张表：用户表、文章表和评论表，它们之间是怎么关联的（如何建表）

可以再进一步研究的功能：

• 图片验证码
• 上传图片
• 阻止用户在发文章或评论时输入带有 HTML 或 JS 的东西
• 防范 SQL 注入。参见文档 PHP

The Key To Accelerating Your Coding Skills:

1. 找到自己的 inflection point of coding，不再别人手把手教我
2. 对于初学者来说，最重要的就是对细节的关注度，代码的每个错误都会反映在输出结果的错误消息上
3. 调试错误消息非常重要。事实上，经验不足或丰富的开发者都面对同样的错误消息。区别在于，（处理错误消息）经验丰富的开发者能够更快速地定位错误并解决
4. 教程只能教给我很有限的知识，真正的自信来自于，苦苦思考一个没有答案的问题，最终凭借自己的思考解决
5. 我永远不会知道，所有能帮助我解决问题的内容（You will never know everything you need to know to solve all your problems.）。假设自己已经学完需要的任何内容是不符合实际的
6. 有经验的开发者，为还未解决的问题寻找答案，因为这给他们学习更多内容的机会

一、编程技巧《代码大全》

二、编程语言

第一步，Head First Java

第二步，Java 核心技术·卷 I

第三步，Spring in Action

第四步，Spring Boot in Action，能看懂多少就看多少

三、操作系统 《鸟哥的 Linux 私房菜》 简体第四版

四、网络协议 HTTP - MDN

要点：

1. HTTP 头
2. HTTP 请求方法
3. HTTP 返回码
4. HTTP 的 Cookie、缓存、会话；链接管理

五、数据库设计

第一步，数据库设计那些事儿

第二步，MySQL 官方文档或《MySQL 必知必会》

六、前端方面

第一步，JS 库 jQuery

第二步，CSS 库 Bootstrap

在这过程中的重点：

1. 使用 JS Ajax 请求后端的 API 接口
2. JS 的 Promise 模式（参考资料：ECMAScript 6 入门 by 阮一峰）

七、字符编码

参考资料：

• 关于字符编码，你所需要知道的（ASCII,Unicode,Utf-8,GB2312…）
• The history of Character Encoding
• Character encoding
• Awesome Unicode
• Awesome Code Points

• 编程 IDE：IDEA

• 版本控制 Git

  • Backlog Git Tutorial
  • Pro Git
• 调试前端程序：各浏览器的 DevTools，Chromium & Chrome、Edge、FireFox
• 数据库设计工具：MySQL WorkBench

业务需求：

• 用户只有登陆后才可生成投票表单
• 投票项可单选，或多选
• 其他用户投票后显示当前投票结果（但是不能刷票）
• 投票页面需要倒计时提示
• 投票结果需要用不同颜色不同长度的横条，并显示百分比和人数

技术需求：

• Java Spring Boot 实现，后端不返回 HTML，只返回 JSON 数据给前端
• 由前端的 jQuery 来处理并操作相关的 HTML 动态生成在前端显示的页面
• 前端的页面是响应式的，用 完成

进阶功能：

• 在微信中，通过微信授权后记录用户信息，以防止刷票
• 不用刷新页面，动态看到投票结果
• 使用一些图表库，把图表画得更好看一些

• How To Ask Questions The Smart Way STFW（Search the fxxking web）以及 RTFM（Read the fxxking manual）
• X-Y PROBLEM，X-Y 问题
• 在 StackOverflow 上如何问问题：FAQ for Stack Exchange sites

书籍推荐：

1. 代码大全
2. 重构：改善既有代码的设计
3. 修改代码的艺术 Working Effectively with Legacy Code
4. 代码整洁之道
5. 程序员的职业素养

Code Review:

1. Code Review Best Practic
2. How Google Does Code Review
3. LinkedIn's Tips for Highly Effective Code Review

Unit Test:

1. JUnit 5 User Guide
2. You Still Don't Know How to Do Unit Testing
3. Unit Testing Best Practices: JUnit Reference Guide
4. JUnit Best Practices

Open Web Application Security Project® (OWASP)：OWASP 是一个开源的、非盈利的全球性安全组织，致力于应用软件的安全研究。其被视为 Web 应用安全领域的权威参考。2009 年，国际信用卡数据安全技术 PCI 标准将其列为必要组件，美国国防信息系统局、欧洲网络与信息安全局、美国国家安全局等政府机构所发布的美国国家和国际立法、标准、准则和行业实务守则参考引用了 OWASP。

• OWASP 十大 Web 弱点防护守则
• Secure Coding Practice Guidelines
• SEI CERT Coding Standards
• Hardening Your HTTP Security Headers
• Overly defensive programming

关于测试：

• 《完美软件：对软件测试的各种幻想》
• 《Google 软件测试之道》

上线检查 Checklist:

• Serverside checklist
• Single Page App Checklist

运维（监控线上运行软件）：Monitoring 101: Collecting the right data

入门书：

• Java 核心技术·卷 I
• Spring 实战
• Spring Boot 实战

进阶书：

• Effective Java 3rd（如何编写高效的代码） Guava: Google Core Libraries for Java（这个库不但是 JDK 的升级库，其中有如：集合（collections）、缓存（caching）、原生类型支持（primitives support）、并发库（concurrency libraries）、通用注解（common annotations）、字符串处理（string processing）、I/O 等库，其还是 Effective Java 这本书中的那些经验的实践代表）
• Java 并发编程实战
• Java 性能权威指南（进一步钻研，阅读《深入理解 Java 虚拟机》）
• Java 编程思想
• 精通 Spring 4.x

• 👍👍The C Programming Language
• C 语言程序设计现代方法
• C 陷阱与缺陷 C Traps and Pitfalls，by Andrew Koenig
• C++ Primer 中文版
• Effective C++，More Effective C++
• 了解编译器：深度探索 C++ 对象模型
• C++ FAQ
• Linux C 编程一站式学习
• Pointers on C，By Kenneth A. Reek（1998）
• Expert C Programming: Deep C Secrets，by Peter van der Linden
• Thinking in C++，by Bruce Eckel
• A Tour of C++
• The C++ Programming Language
• The C++ Standard Library - A Tutorial and Reference
• Overview of the New C++

入门：Go by Example、Go 101、The Go Programming Language（GO 语言简介（上）- 语法、GO 语言简介（下）- 特性）

• Effective Go

• Go 语言最突出之处是并发编程，Unix 老牌黑客罗勃·派克（Rob Pike）在 Google I/O 上的两个分享，可以让你学习到一些并发编程的模式

  • Go Concurrency Patterns（幻灯片、演讲视频）
  • Advanced Go Concurrency Patterns（幻灯片、演讲视频）
• Go 精华文章列表
• Go 相关博客列表
• Go Talks
• Awesome Go

书籍推荐：

• 设计模式
• Head First 设计模式

学习面向对象的设计模式时，不要执着于 23 个设计模式，明白两个原理：

• Program to an 'interface', not an 'implementation'

  • 使用者不需要知道数据类型、结构、算法的细节
  • 使用者不需要知道实现细节，只需要知道提供的接口
  • 利于抽象、封装，动态绑定，多态。符合面向对象的特质和理念

• Favor 'object composition' over 'class inheritance'

  • 继承需要给子类暴露一些父类的设计和实现细节
  • 父类实现的改变会造成子类也需要改变
  • 我们以为继承主要是为了代码重用，但实际上在子类中需要重新实现很多父类的方法
  • 继承更多的应该是为了多态

• 书籍

  • 算法/算法图解
  • 算法导论
  • 编程珠玑

• 实践

  • LeetCode

• 其他

  • List of algorithms
  • Data Structure Visualizations

书籍：

• 数据结构与算法分析
• 数据库系统概念
• 现代操作系统
• 计算机网络
• 计算机程序的构造和解释
• 编译原理

• 用这些系统知识操作一下文件系统，实现一个可以拷贝目录树的小程序
• 用 fork / wait / waitpid 写一个多进程的程序，用 pthread 写一个多线程带同步或互斥的程序。比如，多进程购票的程序
• 用 signal / kill / raise / alarm / pause / sigprocmask 实现一个多进程间的信号量通信的程序
• 学会使用 gcc 和 gdb 来编程和调试程序（参看我的《用 gdb 调试程序》一、二、三、四、五、六、七）
• 学会使用 makefile 来编译程序（参看我的《跟我一起写 makefile》一、二、三、四、五、六、七、八、九、十、十一、十二、十三、十四）
• Socket 的进程间通信。用 C 语言写一个 1 对 1 的聊天小程序，或是一个简单的 HTTP 服务器。

然后，当你读完《Unix 网络编程》后，千万要去读一下 "C10K Problem （中文翻译版）"。提出这个问题的人叫丹·凯格尔（Dan Kegel），目前在 Google 任职。

C10K 问题本质上是 操作系统处理大并发请求的问题 。对于 Web 时代的操作系统而言，对于客户端过来的大量的并发请求，需要创建相应的服务进程或线程。这些进程或线程多了，导致数据拷贝频繁（缓存 I/O、内核将数据拷贝到用户进程空间、阻塞）， 进程 / 线程上下文切换消耗大，从而导致资源被耗尽而崩溃。这就是 C10K 问题的本质。

了解这个问题，并了解操作系统是如何通过多路复用的技术来解决这个问题的，有助于你了解各种 I/O 和异步模型，这对于你未来的编程和架构能力是相当重要的。

另外，现在，整个世界都在解决 C10M 问题，推荐看看 The Secret To 10 Million Concurrent Connections -The Kernel Is The Problem, Not The Solution 一文。

实现语言可以用 C、C++ 或 Java。

1）一个 telnet 版本的聊天服务器：

• 每个客户端可以用使用 telnet ip:port 的方式连接到服务器上
• 新连接需要用用户名和密码登录，如果没有，则需要注册一个
• 然后可以选择一个聊天室加入聊天
• 管理员有权创建或删除聊天室，普通人员只有加入、退出、查询聊天室的权力
• 聊天室需要有人数限制，每个人发出来的话，其它所有的人都要能看得到

2）一个简单的 HTTP 服务器：

• 解释浏览器传来的 HTTP 协议，只需要处理 URL path
• 然后把所代理的目录列出来
• 在浏览器上可以浏览目录里的文件和下级目录
• 如果点击文件，则把文件打开传给浏览器（浏览器能够自动显示图片、PDF，或 HTML、CSS、JavaScript 以及文本文件）
• 如果点击子目录，则进入到子目录中，并把子目录中的文件列出来

3）一个生产者 / 消费者消息队列服务：

• 消息队列采用一个 Ring-buffer 的数据结构
• 可以有多个 topic 供生产者写入消息及消费者取出消息
• 需要支持多个生产者并发写
• 需要支持多个消费者消费消息（只要有一个消费者成功处理消息就可以删除消息）
• 消息队列要做到不丢数据（要把消息持久化下来）
• 能做到性能很高

系统知识小结

• 编程语言：C/C++、Java、Go
• 算法和数据结构
• 计算机相关系统：操作系统、网络系统、数据库系统。它们代表计算机基础构成的三大件——计算、存储、网络。

如果你能够走到这里，把前面的那些知识都了解了（不用精通，因为精通是需要时间和实践来慢慢锤炼出来的，所以，你也不用着急），那么你已经是一个合格的程序员了，而且你的潜力和可能性是非常非常高的。

如果经历过这些比较枯燥的理论知识，而且你还能有热情和成就感，那么我要恭喜你了。因为你已经超过了绝大多数人，而且还是排在上游的比较抢手的程序员了。我相信你至少可以找到年薪 50 万以上的工作了。但是，你还需要很多的经验或是一些实践，以及一些大系统大项目的实际动手的经验。

左耳听风-编程范式部分：

• 编程范式游记（1）- 起源
• ……

其他内容：

• Programming paradigm
• Six programming paradigms that will change how you think about coding，这篇文章讲了默认支持并发（Concurrent by default）、依赖类型（Dependent types）、连接性语言（Concatenative languages）、声明式编程（Declarative programming）、符号式编程（Symbolic programming）、基于知识的编程（Knowledge-based programming）等六种不太常见的编程范式
• Programming Paradigms for Dummies: What Every Programmer Should Know，这篇文章的作者彼得·范·罗伊（Peter Van Roy）是比利时鲁汶大学的计算机科学教师。他在这篇文章里分析了编程语言在历史上的演进，有哪些典型的、值得研究的案例，里面体现了哪些值得学习的范式
• 斯坦福大学公开课：编程范式，这是一门比较基础且很详细的课程，适合学习编程语言的初学者。它通过讲述 C、C++、并发编程、Scheme、Python 这 5 门语言，介绍了它们各自不同的编程范式。以 C 语言为例，它解释了 C 语言的基本要素，如指针、内存分配、堆、C 风格的字符串等，并解释了为什么 C 语言会在泛型编程、多态等方面有局限性

• Don't repeat yourself(DRY)
• KISS principle(KISS)
• Program to an interface, not an implementation
• You aren't gonna need it(YAGNI)
• Law of Demeter(LoD)

• 面向对象的 S.O.L.I.D 原则

  • SRP（Single Responsibility Principle）- 职责单一原则
  • OCP（Open/Closed Principle）- 开闭原则
  • LSP（Liskov substitution principle）- 里氏代换原则
  • ISP（Interface Segregation Principle）- 接口隔离原则
  • DIP（Dependency Inversion Principle）- 依赖倒置原则
• Common Closure Principle(CCP) - 共同封闭原则
• Common Reuse Principle(CRP) - 共同重用原则
• Inversion of Control (IoC)，Inversion of Control Containers and the Dependency Injection pattern
• Low Coupling, High Cohesion，Cohesion and Coupling
• Convention over configuration - 惯例优于配置原则
• Separation of Concerns(SoC) - 关注点分离
• Design by contract (DbC) - 契约式设计
• Acyclic Dependencies Principle(ADP) - 无环依赖原则

• 领域驱动设计
• UNIX 编程艺术
• Clean Architecture
• The Twelve-Factor App 中文版
• Avoid Over Engineering
• Instagram Engineering's 3 rules to a scalable cloud application architecture
• How to Design a Good API & Why it Matters

• 关于 Restful API 的设计，你可以学习并借鉴一下下面这些文章

  • Best Practices for Designing a Pragmatic RESTful API
  • Ideal REST API design
  • HTTP API Design Guide
  • Microsoft REST API Guidelines
  • IBM Watson REST API Guidelines
  • Zalando RESTful API and Event Guidelines
• The Problem With Logging，一篇关于程序打日志的短文，可以让你知道一些可能以往不知道的打日志需要注意的问题
• Concurrent Programming for Scalable Web Architectures，这是一本在线的免费书，教你如何架构一个可扩展的高性能的网站。其中谈到了一些不错的设计方法和知识

• HTML5、CSS3（Canvas、SVG、WebGL、CSS 图形变换）、ES6
• JavaScript 核心原理
• 浏览器工作原理
• 网络协议 HTTP
• 前端性能调优
• 框架学习
• UI 设计

一、HTML5

• HTML 5 权威指南
• HTML5 Canvas 核心技术
• Awesome HTML5

二、Canvas - MDN

• Awesome Canvas

三、SVG - MDN

• Awesome SVG

四、WebGL - MDN

• Awesome WebGL

五、CSS3

• CSS - MDN
• Sass 和 Less 预处理工具
• Awesome CSS Frameworks

几个公司的 CSS 实践：

• CodePen's CSS
• GitHub's CSS
• Medium's CSS is actually pretty f***ing good.
• CSS at BBC Sport
• Refining The Way We Structure Our CSS At Trello

读物：

• A Scalable CSS Reading List
• More Eric Meyer on CSS，by Eric A. Meyer
• CSS: The Definitive Guide，by Eric A. Meyer
• HTML and CSS: Design and Build Websites，by Jon Duckett
• CSS Mastery: Advanced Web Standards Solutions，by Simon Collison, Andy Budd, Cameron Moll

六、JS

读物：

• JavaScript 语言精粹 JavaScript: The Good Parts
• Secrets of the JavaScript Ninja，中文翻译版为《JavaScript 忍者秘籍》
• Effective JavaScript

• 学习 ES6

  • ES6 in Depth 中文版
  • ES6 入门教程
  • ECMAScript 6 Tools
  • Modern JavaScript Cheatsheet
• You Don't Know JS Yet

• 编程范式相关

  • Glossary of Modern JavaScript Concepts: Part 1
  • Glossary of Modern JavaScript Concepts: Part 2

• 德米特里·索什尼科夫（Dmitry Soshnikov）个人网站上三篇讲 JavaScript 内在的文章

  • JavaScript. The Core: 2nd Edition
  • JavaScript. The Core (older ES3 version)
  • JS scope: static, dynamic, and runtime-augmented
• Alexander Zlatkov
• Addy Osmani

• 其他相关文章

  • JavaScript has a Unicode problem
  • JavaScript Algorithms
  • JavaScript 30 秒代码
  • What the f*ck JavaScript?
  • JavaScript Patterns for 2017

七、浏览器原理

• How browsers work
• How Browsers Work: Behind the scenes of modern web browsers

• Virtual DOM

  • How to write your own Virtual DOM
  • Write your Virtual DOM 2: Props & Events
  • How Virtual-DOM and diffing works in React
  • The Inner Workings Of Virtual DOM
  • 深度剖析：如何实现一个 Virtual DOM 算法

  • 以及两个 Vitual-DOM 实现，供参考

    • A Virtual DOM and diffing algorithm
    • Maquette，Pure and simple virtual DOM library

八、网络协议

• Web 性能权威指南，High Performance Browser Networking

• HTTP/2

  • http2 explained http2 explained 中文版
  • HTTP/2 for a Faster Web
  • Nginx HTTP/2 白皮书

  • HTTP/2 的两个 RFC

    • RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2)，HTTP/2 的协议本身
    • RFC 7541 - HPACK: Header Compression for HTTP/2，HTTP/2 的压缩算法

• 新的 HTML5 支持 WebSocket

  • HTML5 WebSocket: A Quantum Leap in Scalability for the Web，这篇文章比较了 HTTP 的几种链接方式，Polling、Long Polling 和 Streaming，并引入了终级解决方案 WebSocket
  • Stack Overflow: My Understanding of HTTP Polling, Long Polling, HTTP Streaming and WebSockets
  • WebSocket Basics: An Introduction，一个 WebSocket 的简单教程
  • Awesome WebSockets

  • 一些和 WebSocket 相关的想法

    • Introducing WebSockets: Bringing Sockets to the Web
    • Websockets 101
    • The State of Real-Time Web in 2016
    • WebSockets, caution required!

• Web Performance in Action
• Designing for Performance
• High Performance JavaScript
• High Performance Web Sites: Essential Knowledge for Front-End Engineers
• Why does speed matter?
• 前端权威性能指南（中文版）
• PageSpeed Insights Rules
• Best Practices for Speeding Up Your Web Site
• 重点推荐一个性能优化的案例学习网站 WPO Stats，WPO 是 Web Performance Optimization 的缩写，这个网站上有很多很不错的性能优化的案例分享

文章案例：

• A Simple Performance Comparison of HTTPS, SPDY and HTTP/2
• 7 Tips for Faster HTTP/2 Performance
• Reducing Slack's memory footprint
• Driving user growth with performance improvements
• 10 Javascript Performance Boosting Tips from Nicholas Zakas
• 17 Statistics to Sell Web Performance Optimization
• Native Responsive Images
• Getting started with the Picture element
• Improve Page Load Times With DNS Prefetching
• Jank Busting for Better Rendering Performance
• How to Use the Allocation Profiler Tool，谷歌官方教你如何使用 Chrome 的开发工具来分析 JavaScript 内存问题

常用性能工具：

• PageSpeed
• GTmetrix，是一个将 PageSpeed 和 YSlow 合并起来的一个网页分析工具
• 更多的性能优化工具和资源

其他：

• Forget Google and Use These Hosted JavaScript Libraries in China

框架比较：

• Angular vs. React vs. Vue: A 2017 comparison
• React or Vue: Which Javascript UI Library Should You Be Using?
• React vs Angular vs Vue.js — What to choose in 2021? (updated in 2021)

一、React.js 框架

1）入门

• 官方教程
• All the fundamental React.js concepts, jammed into this one article
• Learn React Fundamentals 🆓 and Advanced Patterns ⚛️ 🎁
• Thinking in React

2）提高

• 状态

  • Common React.js mistakes: Unneeded state，React.js 编程的常见错误——不必要的状态
  • State is an antipattern，关于如何做一个不错的组件的思考
  • Thinking Statefully
  • Tips to learn React + Redux in 2019

  • "State Architecture Patterns in React" 系列文章

    • State Architecture Patterns in React: A Review
    • Part 2: The Top-Heavy Architecture, Flux and Performance
    • Part 3: Articulation Points, zine and An Overall Strategy
    • Part 4: Purity, Flux-duality and Dataflow

• 函数式编程

  • Professor Frisby's Mostly Adequate Guide to Functional Programming 中文版
  • Master the JavaScript Interview: What is Functional Programming?
  • The Rise and Fall and Rise of Functional Programming (Composing Software)
  • Functional UI and Components as Higher Order Functions
  • Functional JavaScript Reverse-engineering the Hype
  • Some Thoughts on Function Components in React

• 设计相关

  • React Patterns
  • React Higher Order Components in depth
  • Presentational and Container Components
  • Controlled and uncontrolled form inputs in React don't have to be complicated
  • Function as Child Components
  • Writing Scalable React Apps with the Component Folder Pattern
  • Reusable Web Application Strategies: three patterns for running the same app in multiple spots
  • Characteristics of an Ideal React Architecture

• 实践和经验

  • 9 things every React.js beginner should know
  • Best practices for building large React applications
  • Clean Code vs. Dirty Code: React Best Practices
  • How to become a more productive React Developer
  • 8 Key React Component Decisions

• 资源列表

  • Awesome React
  • React/Redux Links
  • ReactJS Examples, Demos, Code

二、Vue.js 框架

• Why 43% of Front-End Developers want to learn Vue.js
• Replacing jQuery With Vue.js: No Build Step Necessary
• 10 things I love about Vue
• Vue on 2018 — Interview with Evan You, author of the Vue.js framework

1）入门

• Vue3 Guide
• 新手向：Vue 2.0 的建议学习顺序 by 尤雨溪

2） 其他文章

• How not to Vue
• Vue.js Component Communication Patterns
• The Ultimate AJAX Guide For Vue.js Apps
• How To (Safely) Use A jQuery Plugin With Vue.js
• 7 Ways to Define a Component Template in Vue.js
• Use Any JavaScript Library With Vue.js
• Dynamic and async components made easy with Vue.js
• Awesome Vue.js

• 7 steps to become a UI/UX designer
• Don't Make Me Think
• Simple and Usable Web,Mobile,and Interaction Design
• Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules
• Designing Interfaces: Patterns for Effective Interaction Design
• The Psychology Principles Every UI/UX Designer Needs to Know
• 18 designers predict UI/UX trends for 2018
• The Evolution of UI/UX Designers Into Product Designers

一、原子设计（Atomic Design）

• Atomic Design 原子设计 ┃ 构建科学规范的设计系统

• [[https://medium.com/uxeastmeetswest/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88-atomic-design%E7%B0%A1%E4%BB%8B%E5%8F%8A%E5%B7%A5%E4%BD%9C%E5%AF%A6%E4%BE%8B-42e666358d52][網頁設計

  Atomic Design 簡介及工作實例]]
  

• Atomic Design by Brad Frost
• atomic design
• Create atomic design systems with Pattern Lab
• Atomic Design with React

二、设计语言和设计系统

1）Fluent Design System

Fluent Design System 中文翻译为流畅设计体系，是微软于 2017 年开发的设计语言。

微软于 2017 年 5 月 11 日的 Microsoft Build 2017 开发者大会上公开了该设计体系。

• What's new and coming for Windows UI: XAML and composition，从概念上讲了一下 Fluent Design System 的各个部分
• Introducing Fluent Design，介绍了 Fluent Design System 的各个部分

还有 Build 2018 上的一些微软的 YouTube 分享。

• Fluent Design: Evolving our Design System : Build 2018
• Microsoft Build 2018 - Fluent Design System Demo
• Microsoft Build 2018 - Fluent Design System Evolution
• Fluent Design System inside of Microsoft: Office : Build 2018

2）Material Design

• Material Design 于 2014 年的 Google I/O 大会 上发布
• Comparison of Material Design implementations

• 可供使用的 Material UI 的工程实现

  • Material Design Lite
  • Materialize
  • 基于 Google Material Design 的 React 组件实现
  • MUI is a lightweight CSS framework that follows Google's Material Design guidelines

3）其他公司

• Apple Design
• IBM Design Language
• Lightning Design System by Salesforce
• Facebook Design

三、动画效果设计

• Codepen
• 动画效果设计方法：Twelve basic principles of animation 对该法则的解读

• 动画设计指南和相关文章

  • 6 Animation Guidelines for UX Design
  • Designing Interface Animation
  • Animation principles in motion design
  • Creating Usability with Motion: The UX in Motion Manifesto
  • Integrating Animation into a Design System
  • Great UI/UX Animations 是设计师丹尼尔（Daniel）收集的一些很不错的动画

四、相关资源

1）文章资源

• Smashing Magazine
• Designer News
• Web Designer News
• r/web_design
• Marvel Blog
• Medium.design
• Design & UX
• ALL ARTICLES FOR Creative by the Next Web 新闻

2）设计收集

• Awwwards - Website Awards - Best Web Design Trends
• Dribbble
• One Page Love
• Behance
• The latest mobile UI design

• NASA C Style
• C Coding Standard
• C Programming/Structure and style
• Linux kernel coding style
• Making The Best Use of C，GNU 的编码规范

• C++ Core Guidelines，这个文档是各种 C++ 的大拿包括原作者在内在持续讨论更新的和 C++ 语言相关的各种最佳实践
• Google C++ Style Guide

• Effective Go

• Code Conventions for the Java TM Programming Language，Java 官方的编程规范
• Google Java Style Guide

• JavaScript The Right Way，一个相对比较容读的 JavaScript 编程规范，其中不但有代码规范，还有设计模式，测试工具，编程框架，游戏引擎……
• Google JavaScript Style Guide
• Airbnb JavaScript Style Guide() {
• JavaScript Style Guide，jQuery 的代码规范
• clean-code-javascript，《代码整洁之道》一书中的 JavaScript 的实践

较简单的 JS 编程规范

• JavaScript Style Guides And Beautifiers
• JavaScript Style Guide - W3Schools
• Code Conventions for the JavaScript Programming Language

• PHP Standards Recommendations，PHP 编码规范及标准推荐
• PHP The Right Way，除了编码规范之外的各种 PHP 的最佳实践，还包括一些设计模式，安全问题，以及服务部署，Docker 虚拟化以及各种资源
• Clean Code PHP，《代码整洁之道》的 PHP 实践

• PEP 8 – Style Guide for Python Code，Python 官方的编程规范
• Google Python Style Guide
• The Hitchhiker's Guide to Python!，这不只是 Python 的编程规范，还是 Python 资源的集散地

• Ruby Style Guide - Airbnb
• The Ruby Style Guide

• Rust Style Guidelines
• Rust Style Guide

• Scala Style Guide，Scala 官方的编程规范
• Databricks Scala Guide
• Scala Best Practices

• Shell Style Guide

• Coding conventions

• Objective-C Conventions
• Google Objective-C Style Guide
• NYTimes Objective-C Style Guide

• API Design Guidelines
• swift-style-guide，一个 Swift 的相关编程规范的教程
• The Official raywenderlich.com Swift Style Guide
• LinkedIn 的官方 Swift 编程规范
• Metova's Swift Style Guide
• Xmartlabs' Swift Style Guide

• Google Markdown style guide
• Markdown Style Guide

• Google JSON Style Guide
• JSON Style Guide

• Git Style Guide
• Git Coding Guidelines

• RegexHQ
• Learn regex the easy way

• Computer Networks, 5th Edition，Andrew S. Tanenbaum / David J. Wetherall
• 渥汰华大学的一个课程讲义
• Computer Network Tutorials

• Linux Advanced Routing & Traffic Control
• Red Hat Enterprise Linux Network Performance Tuning Guide
• Awesome Pcap Tools
• Making Linux TCP Fast，TCP 调优论文

• Linux 网络栈底层

  • Monitoring and Tuning the Linux Networking Stack: Receiving Data
  • Monitoring and Tuning the Linux Networking Stack: Sending Data

想要学习网络协议最好的方式就是学习通讯相关的 RFC。读 RFC 有几个好处，一方面可以学习技术，另一方面，可以通过 RFC 学习到一个好的技术文档是怎么写的，还能看到各种解决问题的方案和思路。

对于第 2 层链路层，需要了解 ARP：

• RFC826 - An Ethernet Address Resolution Protocol

Tunnel 相关的协议：

• RFC1853 - IP in IP Tunneling
• RFC2784 - Generic Routing Encapsulation (GRE)
• RFC2661 - Layer Two Tunneling Protocol "L2TP"
• RFC2637 - Point-to-Point Tunneling Protocol (PPTP)

对于第 4 层，最需要了解的是 TCP/IP 了。和 TCP 相关的 RFC 相当多，这里给一系列经典的 RFC。这些 RFC 都引用在了 CoolShell 上的《TCP 的那些事儿（上）》和《TCP 的那些事儿（下）》两篇文章中。如果看不懂 RFC，也可以去看上述的文章。

• RFC 793 - Transmission Control Protocol - 最初的 TCP 标准定义，但不包括 TCP 相关细节
• RFC 813 - Window and Acknowledgement Strategy in TCP - TCP 窗口与确认策略，并讨论了在使用该机制时可能遇到的问题及解决方法
• RFC 879 - The TCP Maximum Segment Size and Related Topics - 讨论 MSS 参数对控制 TCP 分组大小的重要性，以及该参数与 IP 分段大小的关系等
• RFC 896 - Congestion Control in IP/TCP Internetworks - 讨论拥塞问题和 TCP 如何控制拥塞
• RFC 2581 - TCP Congestion Control- 描述用于拥塞控制的四种机制：慢启动、拥塞防御、快重传和快恢复。后面这个 RFC 被 RFC 5681 所更新。还有 RFC 6582 - The NewReno Modification to TCP's Fast Recovery Algorithm 中一个改进的快速恢复算法
• RFC 2018 - TCP Selective Acknowledgment Options - TCP 的选择确认
• RFC 2883 - An Extension to the Selective Acknowledgement (SACK) Option for TCP - 对于 RFC 2018 的改进
• RFC 2988 - Computing TCP's Retransmission Timer - 讨论与 TCP 重传计时器设置相关的话题，重传计时器控制报文在重传前应等待多长时间。也就是经典的 TCP Karn/Partridge 重传算法
• RFC 6298 - Computing TCP's Retransmission Timer - TCP Jacobson/Karels Algorithm 重传算法

我个人觉得 TCP 最牛的不是不丢包，而是拥塞控制。对此，如果你感兴趣，可以读一下经典论文《Congestion Avoidance and Control》。

关于 Linux 下的 TCP 参数，仔仔细细地读一下 TCP 的 man page。

对于第 7 层协议，HTTP 协议是重点要学习的。

• （重点推荐）HTTP 权威指南

HTTP 1.1 的原始 RFC 是 1999 年 6 月的 RFC 2616，但其在 2014 后很快被下面这些 RFC 给取代了。

• RFC 7230 - Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
• RFC 7231 - Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
• RFC 7232 - Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests
• RFC 7233 - Hypertext Transfer Protocol (HTTP/1.1): Range Requests
• RFC 7234 - Hypertext Transfer Protocol (HTTP/1.1): Caching
• RFC 7235 - Hypertext Transfer Protocol (HTTP/1.1): Authentication

关于 HTTP/2：

• http2 explained http2 explained 中文版
• HTTP/2 for a Faster Web
• Nginx HTTP/2 白皮书

• HTTP/2 的两个 RFC

  • RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2)，HTTP/2 的协议本身
  • RFC 7541 - HPACK: Header Compression for HTTP/2，HTTP/2 的压缩算法

上 Wikipedia 的 Internet Protocol Suite 上看看，这是一个很不错的网络协议的词条汇集地。顺着这些协议，可以找到很多有用的东西。

• Cassandra 相关

  • 沃尔玛实验室有两篇文章值得一读。

    • Avoid pitfalls in scaling your Cassandra cluster: lessons and remedies
    • Building Object Store — Storing Images in Cassandra at Walmart Scale
  • Yelp: How We Scaled Our Ad Analytics with Apache Cassandra，Yelp 的这篇博客也有一些相关的经验和教训。
  • Discord: How Discord Stores Billions of Messages，Discord 公司分享的一个如何存储十亿级消息的技术文章。
  • Cassandra at Instagram，Instagram 的一个 PPT，其中介绍了 Instagram 中是怎么使用 Cassandra 的。
  • Netflix: Benchmarking Cassandra Scalability on AWS — Over a million writes per second，Netflix 公司在 AWS 上给 Cassandra 做的一个 Benchmark。

• HBase 相关

  • Imgur Notifications: From MySQL to HBase
  • Pinterest: Improving HBase Backup Efficiency
  • HBase File Locality in HDFS
  • Apache Hadoop Goes Realtime at Facebook
  • Storage Infrastructure Behind Facebook Messages: Using HBase at Scale
  • GitHub: Awesome HBase

针对于 HBase 有两本书你可以考虑一下。

• 首先，先推荐两本书，一本是偏实践的《HBase 实战》，另一本是偏大而全的手册型的《HBase 权威指南》。
• 当然，你也可以看看官方的 The Apache HBase™ Reference Guide

• 另外两个列数据库：

  • ClickHouse - fast open-source OLAP DBMS
  • Scaling Redshift without Scaling Costs at GIPHY

• Data Points - What the Heck Are Document Databases?
• eBay: Building Mission-Critical Multi-Data Center Applications with MongoDB
• The AWS and MongoDB Infrastructure of Parse: Lessons Learned
• Migrating Mountains of Mongo Data
• Couchbase Ecosystem at LinkedIn
• Resurrecting Amazon SimpleDB
• Github: Awesome MongoDB

• Learn Redis the hard way (in production) at Trivago
• Twitter: How Twitter Uses Redis To Scale - 105TB RAM, 39MM QPS, 10,000+ Instances
• Slack: Scaling Slack's Job Queue - Robustly Handling Billions of Tasks in Milliseconds Using Kafka and Redis
• GitHub: Moving persistent data out of Redis at GitHub
• Instagram: Storing Hundreds of Millions of Simple Key-Value Pairs in Redis
• Redis in Chat Architecture of Twitch (from 27:22)
• Deliveroo: Optimizing Session Key Storage in Redis
• Deliveroo: Optimising Redis storage, part two
• GitHub: Awesome Redis

• What is Time-Series Data & Why We Need a Time-Series Database
• Time Series Data: Why and How to Use a Relational Database instead of NoSQL
• Beringei: High-performance Time Series Storage Engine [cite/t:@Facebook]
• Introducing Atlas: Netflix's Primary Telemetry Platform [cite/t:@Netflix]
• Building a Scalable Time Series Database on PostgreSQL
• Scaling Time Series Data Storage - Part I [cite/t:@Netflix]
• Design of a Cost Efficient Time Series Store for Big Data
• GitHub: Awesome Time-Series Database

• 首先是 IBM Devloperworks 上的两个简介性的 PPT。

  • Intro to graph databases, Part 1, Graph databases and the CRUD operations
  • Intro to graph databases, Part 2, Building a recommendation engine with a graph database
• 然后是一本免费的电子书《Graph Database》。

• 接下来是一些图数据库的介绍文章。

  • Handling Billions of Edges in a Graph Database
  • Neo4j case studies with Walmart, eBay, AirBnB, NASA, etc
  • FlockDB: Distributed Graph Database for Storing Adjacency Lists at Twitter
  • Google, IBM back new open source graph database project, JanusGraph
  • Amazon Neptune

• Elasticsearch: The Definitive Guide 这是官网方的 ElasticSearch 的学习资料，基本上来说，看这个就够了。

• 接下来是 4 篇和性能调优相关的工程实践。

  • Elasticsearch Performance Tuning Practice at eBay
  • Elasticsearch at Kickstarter
  • 9 tips on ElasticSearch configuration for high performance
  • Elasticsearch In Production - Deployment Best Practices
• 最后是 GitHub 上的资源列表 GitHub: Awesome ElasticSearch。

下面分享一些与 Docker 相关的最佳实践。

• Best Practices for Dockerfile，Docker 官方文档里的 Dockerfile 的最佳实践。
• Docker Best Practices，这里收集汇总了存在于各个地方的使用 Docker 的建议和实践。
• Container Best Practices，来自 Atomic 项目，是一个介绍容器化应用程序的架构、创建和管理的协作型文档项目。
• Eight Docker Development Patterns，八个 Docker 的开发模式：共享基础容器、共享同一个卷的多个开发容器、开发工具专用容器、测试环境容器、编译构建容器、防手误的安装容器、默认服务容器、胶黏容器（如英文链接不能访问，可阅读 中文版本）。

• Kubernetes Best Practices by Sachin Arote，AWS 工程师总结的最佳实践。
• Kubernetes Best Practices by Sandeep Dinesh，Google 云平台工程师总结的最佳实践。