RuiMM / blog-1

Life is a moment :notebook_with_decorative_cover:

This is my personal blog created with create-react-doc where to write and record some thought daily. It's very thankful to point any wrong place there.

Outline

• Data Structure
• Design Pattern
• React Series
  • Deep Into React
  • Component Design
  • React Stack
  • Build React from scratch
  • Modern Testing
• TypeScript
• FE Cloud
  • JavaScript
  • CSS
  • Node.js
  • FE CLOUD
  • Project Framework
• RaspberryPi
• Sponsor
• Thanks

Data Structure

This section we will start tralvel in the world of data strcture together! There is no doubt the travel is so interestring that you'll enjoy it too! Before your travel of data structure, I want to tell two points it's valueble:

1. Interest and Insist.
2. Thought is more important than action.

Travel Of LeetCode

• Stack
• Queue
• List
• Set
• Dictionary
• Hash Table
• Binary Tree
• Graph

algorithm

• Algorithm And Complexy
• Recursive
• Binary Search
• Greedy Algorithm
• Dynamic Programming

Design Pattern

• Singleton Pattern
• Stralegy Pattern
• Proxy Pattern
• Iterator Pattern
• Publish/Subscribe Pattern
• Command Pattern
• Composite Pattern
• Template Method Pattern
• Flyweight Pattern
• Chain of Responsibility Pattern
• Mediator Pattern
• Decorator Pattern
• State Pattern
• Adapter Pattern
• Observer Pattern

React Series

This section will introduce the world of React progressively. It'll tell the principle of React, how to design React Component gracefully and how to build a simple React from scratch.

Deep Into React

• React16.x 特性剪辑
• Fiber 数据结构
• 深入 Fiber 架构
• 流畅性
• Schedule
• 你不知道的 requestIdleCallback
• React Suspense 解决了什么
• React Hooks 深入系列
• React Hooks 设计模式
• React 暗器百解

Component Design

• 重新认识受控与非受控组件

• Build Mobile First Animation In React

More

• Button
• Icon
• Menu
• Keyboard
• Carousel
• Tabs
• Affix
• AddressPicker
• CheckBox
• Form, oneForm
• SearchBar
• Modal
• Textarea
• 主题色替换方案
• 移动端测试指北

• 组件设计实践

React Stack

• Redux 与 Mobx 适用场景
• MVVM 框架解析之双向绑定 _{(相关项目)}
• 探索从 MVC 到 MVVM + Flux 架构模式的转变 _{(相关项目)}
• redux middleware 源码分析
• 在 React 使用 immutable 数据的优势
• 路由的简易实现
• React 在服务端渲染的实现
• 定制自己的 react-script
• 使用 React 全家桶搭建一个后台管理系统 _{(相关项目)}

Build React from scratch

• 前置准备
• JSX 和 Virtual DOM
• 组件 和 state|props
• 生命周期
• diff 算法
• setState 优化
• ref 的实现
• PureComponent 的实现
• HOC 探索
• onChange 事件以及受控组件

Modern Testing

• React 现代化测试
• Jest 与 react-testing-Library

TypeScript

• TypeScript 基础篇
• TypeScript 中的类型
• TypeScript 中的函数使用
• TypeScript 中的工具类型
• Types vs Interfaces
• TypeScript extends 精读与实践

FE Cloud

This section will talk about colorful frontend world.

JavaScript

• 你不知道的 JavaScript
• 红皮书里的细节
• 探寻 JavaScript 精度问题
• 函数式编程入门
• Decorator
• Promise_{(相关项目)}
• Generator
• Async
• CommonJS 模块与 ES6 模块间的差异
• ES6 继承与 ES5 继承的差异
• 扩展运算符
• 箭头函数
• Reflect

CSS

• INHERITED AND NON-INHERITED

more

• 水平布局解决方案
• 聊聊 BFC
• 过渡与动画

Node.js

• 简版 express.js 的实现
• 简版 koa.js 的实现
• Node.js 异步异闻录 _{(相关项目)}
• 用 Node.js 把玩一番 Alfred Workflow _{(相关项目)}

FE CLOUD

• 基于 SSR 的预渲染首屏直出方案
• SEO 在 SPA 站点中的实践
• Talk about TC39
• 跨域二三事 _{(相关项目)}
• HTTP 小册
• HTML5
• 探寻 webpack 插件机制 _{(相关项目)}
• Babel 执行机制
• npm 与 yarn
• 移动端场景知识
• 原生 JS 实现一个瀑布流插件 _{(相关项目)}
• 实现一个自定义工具类库 _{(相关项目)}
• 走近 Python

Project Framework

• CAS 登入流程
• RPC 在网关项目中的实践
• 解读 IoC 框架 —— InversifyJS

RaspberryPi

Just do it for fun! You will unlock server, linux, nginx skills from this Raspberry Pi travel.

Thanks for the pi project specially.

1. 树莓派简介&烧录系统
2. 内网穿透
3. 基于树莓派搭建家庭服务器
4. 给树莓派安装 Docker 环境
5. 给树莓派部署 RSSHub
6. HTTPS 协议配置
7. 基于树莓派部署 code-server
8. 基于树莓派部署 filebrowser

Sponsor

If you like this project, welcome watch or star✨. Or you can buy me a cup of coffee :)

Thanks

Thank my dear rabbit🐰 for her support.