ZHANGYU.dev
shiki, twoslash and MDX components
Integrate @shikijs/twoslash, @shikijs/transforms, add mdx components.
I wrote a new blog using Next.js App router
Rebuilding my blog with React Server Components and GitHub Discussions for a cutting-edge, backend-free, visually appealing experience.
The Principles Behind Front-end Routing
Explanations of the history package in JavaScript, including pushState and replaceState methods, and a brief overview of how React Router uses history for navigation.
Swift Concurrency 学习笔记
Swift 5.5 introduces Swift Concurrency with async/await syntax similar to web frontend async, simplifying asynchronous programming.
为React Native编写原生模块
Guide to creating React Native modules in TypeScript with Swift/Kotlin, iOS/Android, and data exchange.
前端路由的实现原理
A brief overview of the history library and its usage in React Router, explaining pushState, replaceState, and history event handling.
fastlane自动化打包React Native笔记
Fastlane is a Ruby-based automation tool for packaging iOS and Android apps, simplifying certificate management and deployment processes.
Yarn 2的Monorepo开发实践
Monorepo manages multiple packages in a single repository, Yarn workspace simplifies package management for monorepos efficiently.
Vue3响应式 源码解析（一）
Explanation of the principle of responsive Proxy in JavaScript, including how to collect dependencies, trigger watches, and handle various operations. Vue 3's reactivity system is also briefly discussed.
React 单元测试入门指南
Unit testing is essential for writing component libraries. Popular testing libraries in React are Enzyme and react-testing-library. This article focuses on using react-testing-library with Jest for testing.
一文搞懂React中props导致的更新
Discussion when React components update, ways to avoid unnecessary updates, and the usage of useCallback and useMemo.
React中Props的浅对比
Explanation of how props comparison is done in React's PureComponent and functional components using React.memo. Shallow comparison logic in shallowEqual function.
把Github当作数据库，搭建博客
Sharing a convenient way to build a blog without a server, using Github, with custom frontend, comments, tags, and CDN.
React中Diff算法源码浅析
React's Diff algorithm, also called reconcilation algorithm, handles element changes like addition, movement, deletion during the update process.
React事件机制源码浅析
React v17 introduces significant changes to the event mechanism compared to v16. It analyzes event delegation, event types, synthetic events, and event triggering process.
浅析React中的EffectList
React organizes effects into an EffectList during Fiber tree construction to efficiently manage component lifecycle methods and side effects.
有关Hook实现getDerivedStateFromProps的小思考
Comparison between getDerivedStateFromProps in class components and its absence in function components, with workarounds using hooks.
useMemo和useCallback源码浅析
Briefly explains the code implementation of useMemo and useCallback hooks in React version 17.0.1. useMemo memoizes values based on dependencies, while useCallback memoizes callbacks.
React Context精准更新
The method uses bitwise operations for precise Context updates based on specific values without causing all components to refresh.
React Context源码浅析
In React, the valueStack in Fiber nodes stores Context information, with old values pushed and popped to maintain hierarchy between nodes.
React 类组件源码浅析
Detailed analysis of class components in React, covering Fiber node creation, instance creation and updates, scheduling updates, component lifecycles, and commit phases.
useEffect和useLayoutEffect源码浅析
Analysis of the source code for useEffect and useReducer in React 17.0.1, focusing on how effects are created and handled in function components.
useState和useReducer源码浅析
React v17.0.1 source code analysis of synchronous application creation with ReactDOM.render, focusing on Hooks and updating state.
浅析React中Mount时Fiber树的创建流程
Description of ReactDOM.render mount process, focusing on Fiber nodes' operations including beginWork and completeWork functions in React 17.0.1.
如何使用Proxy拦截Map和Set的操作
Proxy can intercept regular object operations using set and get functions. Custom interceptors can be used to intercept calls to Map or Set methods.
如何利用Proxy实现一个响应式对象
ES6 Proxy creates object proxy with get and set interceptors for observer patterns and dependency tracking.
又双叒叕搞了个新博客
The author's blog was lost due to expired server, now using GitHub for a simple, serverless blog with Next.js.
SwiftUI 开发时钟小组件笔记
SwiftUI clock widget development notes including timeline updates, configuration, data sharing, background limitations, widget size, position, and app deployment experiences.
《你不知道的JavaScript》(上卷)笔记
Description scope, scope lookup, dynamic scope changes, 'this' binding rules, immutability, [[Get]] and [[Put]] operations, and property existence in JavaScript.
《css世界》读书笔记
Explanation of block and inline elements, height, width, padding, margin, vertical-align, line-height, float, BFC, overflow, absolute/relative positioning, clip, and layering in CSS.
《CSS选择器世界》读书笔记
Sharing notes on CSS selector specificity levels, tips for increasing specificity, and usage examples of various CSS pseudo-classes and selector attributes.
60行代码，造一个动画库轮子
Explanation the core method for animating in JavaScript using requestAnimationFrame, followed by a tutorial on creating a basic animation library.
从零搭建一个qiankun微前端demo
Introducing micro-frontends to manage multiple H5 pages efficiently with qiankun, including setup steps for both regular and Umi.js projects.
工程师等级划分（节选）与我的感悟
Silicon Valley engineers prioritize brain over brawn, aiming for independent problem-solving. Distinguishing levels highlight engineering excellence and product acumen.
回顾我的2019，踏足2020
Reflection on 2019: Challenges in personal growth, book goals, coding projects, and health. Setting ambitious goals for 2020.
理解TypeScript中的infer关键字
Providing examples and explanations of using the "infer" keyword in TypeScript for type inference and unpacking, highlighting its utility and complexity.
利用Formik解决表单痛点
Comparison of form handling in jQuery, ant design (for back-end), and Formik in React, with examples and recommendations.
使用Seafile，Ubuntu下搭建个人网盘
Comparing Seafile with iCloud and OneDrive, it's a high-performance open-source cloud storage option with Markdown editing and Docker support.
浅谈策略模式和柯里化的使用
Discussion on using strategy pattern to optimize message handling by removing if-else blocks and utilizing currying for function flexibility in development.
新版博客开发总结
Description the revamp of the blog, version 2.0, detailing its components like Gatsby, React, PWA, layout, animations, and development challenges.
主题更换，自动深色模式的简单实现
Discussion implementing theme switching using CSS variables and functions, including compatibility and using preprocessors like SCSS.
总结自己使用过的Hooks数据流方式
Sharing experiences with React Hooks data flow methods, including useState, useReducer, useContext + useReducer, unstated-next, and UmiJS useModel. Mentions on React-Redux and DvaJS.
Create React App v3 学习笔记
Update on Create React App v3 features, including custom templates, package management options, automatic code formatting, environment variables, Sass support, CSS Modules, HTTPS, and absolute component path settings.
Flutter初次使用的一些总结
Flutter project structure, dependencies, network requests, screen adaptation, modal bottom sheet, image handling, and iOS issues
Jest 学习笔记（一）
Install Jest and Babel for testing with examples of matchers like toBe, toEqual, not, toContain, toThrow, async testing.
JsSIP踩坑笔记
Implemented page calling with WebRTC using JsSIP, requiring understanding of WebRTC principles including NAT traversal and server roles.
GraphQL学习笔记
GraphQL is a query language by Facebook, allowing precise data retrieval without redundancy. Basic concepts, setup, server creation demo.
Less学习笔记（二）函数
Logic functions, string functions like escape and replace, list functions like length and extract, and type functions for checking types.
Linux配置SSH密钥登录
Logging into a Linux server securely through SSH using key authentication, including key generation and server configuration steps.
Less学习笔记（一）基本语法
Notes on using Less for Ant Design Pro development: variable declaration, interpolation, parent selector, extend, merge, mixins, accessing properties/variables.
Mac下全局终端代理 proxychains-ng
Tips for using proxies in terminal: set environment variable ALL_PROXY or use open-source tools like proxychains-ng for global proxy setting.
MediaQueryList全解析
MediaQueryList manages media queries and notifies listeners of changes, with properties like matches, media, onchange, and methods like addListener, removeListener, and compatibility notes.
React-Redux 源码阅读笔记
Description a detailed analysis of react-redux, explaining the principles of Provider, connect, and Subscription, offering insights and queries on connectAdvanced functionality.
Redux的中间件applyMiddleware解析
Reading and analyzing Redux source code, particularly impressed by middleware implementation, leading to improved understanding of TypeScript.
Redux源码阅读笔记
Explanations and code snippets of key Redux functionalities such as createStore, combineReducers, bindActionCreators, compose, and applyMiddleware, emphasizing closure usage in the source code.
RxJS学习笔记（七）回压控制
RxJS introduces control operators like throttle, debounce, distinct, ignoreElements, etc., for managing data flow efficiently.
RxJS学习笔记（六）过滤类操作符
Explanation and examples of filtering, taking, and skipping operations in RxJS, such as filter, take, takeLast, takeWhile, takeUntil, skip, skipWhile, skipUntil, first, and last. Talent discussion included.
RxJS学习笔记（五）辅助类操作符
RxJS mathematical operators count, min, max, reduce work after upstream completion. Conditional boolean operators include every, find, findIndex, isEmpty, defaultEmpty.
RxJS学习笔记（四）高阶Observable的处理
Explanation of high-order Observables, including concatAll, mergeAll, zipAll methods for handling nested Observables in RxJS. Personal reflection and upcoming tech event anticipation.
RxJS学习笔记（三）合并类操作符
Merging operators concat, merge, zip, combineLatest; distinct features highlighted for each. Conclude with race, forkJoin, startWith functionalities.
RxJS学习笔记（二）创建类操作符
Operators in RxJS help solve specific application problems by manipulating Observables with functions like create, transform, filter, merge, error handling, and more.
RxJS学习笔记（一）Observable的创建
Discussion on learning RxJS for deeper understanding, creating Observables, handling infinite data stream, completing Observables, error handling, and unsubscribing.
swift 5.1 入门学习
User expresses confusion in learning and finds comfort in exploring Swift UI over Flutter similarities. Topics included: declarations, optionals, strings, arrays, dictionaries, flow control, functions, closures, classes, enums, structs, protocols, and extensions.
Trojan的搭建
Setting up a Linux VPS with Nginx, domain, SSL, and Trojan for secure web browsing. BBR optimization for Ubuntu.
Typescript 工具泛型
Introduction to TypeScript utility types including keyof, in, mapped types, Partial, Required, Readonly, Pick, Record, Exclude, Extract, Omit, NonNullable, Parameters, ConstructorParameters, ReturnType, and InstanceType.
webpack 4 学习笔记
Overview of working with webpack, loader for file and style, plugins, optimization techniques like Tree Shaking and Code Splitting.