github.com/MuYunyun/blog @main

This is my personal blog created using create-react-doc to write and record my daily thoughts. I would be grateful if you could point out any mistakes by clicking on the link 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

Let's embark on a journey through the world of data structures together! There's no doubt that this adventure will be incredibly interesting and enjoyable. Before we begin, I want to emphasize two valuable points:

1. Keep your interest and persistence in learning.
2. Remember that thoughtful understanding is more important than simply taking 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 progressively introduce the world of React. It will cover the principles of React, how to gracefully design React components, and how to build a simple React application 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 explore the colorful world of frontend development.

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

Let's have some fun! This Raspberry Pi journey will unlock your server, Linux, and Nginx skills.

Thanks for the pi project specially.

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

Sponsor

If you enjoy this project, you are welcome to either watch or star it✨. Alternatively, you can show your support by buying me a cup of coffee.

Thanks

I would like to thank my dear rabbit🐰 for her support.