ZHANGYU.dev

shiki, twoslash and MDX components

Others

Integrate @shikijs/twoslash, @shikijs/transforms, add mdx components.

Read more about shiki, twoslash and MDX components

I wrote a new blog using Next.js App router

ReactNext.js

Rebuilding my blog with React Server Components and GitHub Discussions for a cutting-edge, backend-free, visually appealing experience.

Read more about I wrote a new blog using Next.js App router

The Principles Behind Front-end Routing

JavaScript

Explanations of the history package in JavaScript, including pushState and replaceState methods, and a brief overview of how React Router uses history for navigation.

Read more about The Principles Behind Front-end Routing

Swift Concurrency 学习笔记

Swift

Swift 5.5 introduces Swift Concurrency with async/await syntax similar to web frontend async, simplifying asynchronous programming.

Read more about Swift Concurrency 学习笔记

为React Native编写原生模块

SwiftReact NativeKotlin

Guide to creating React Native modules in TypeScript with Swift/Kotlin, iOS/Android, and data exchange.

Read more about 为React Native编写原生模块

前端路由的实现原理

JavaScript

A brief overview of the history library and its usage in React Router, explaining pushState, replaceState, and history event handling.

Read more about 前端路由的实现原理

fastlane自动化打包React Native笔记

Others

Fastlane is a Ruby-based automation tool for packaging iOS and Android apps, simplifying certificate management and deployment processes.

Read more about fastlane自动化打包React Native笔记

Yarn 2的Monorepo开发实践

JavaScript

Monorepo manages multiple packages in a single repository, Yarn workspace simplifies package management for monorepos efficiently.

Read more about Yarn 2的Monorepo开发实践

Vue3响应式 源码解析(一)

Vue

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.

Read more about Vue3响应式 源码解析(一)

React 单元测试入门指南

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.

Read more about React 单元测试入门指南

一文搞懂React中props导致的更新

React

Discussion when React components update, ways to avoid unnecessary updates, and the usage of useCallback and useMemo.

Read more about 一文搞懂React中props导致的更新

React中Props的浅对比

React

Explanation of how props comparison is done in React's PureComponent and functional components using React.memo. Shallow comparison logic in shallowEqual function.

Read more about React中Props的浅对比

把Github当作数据库,搭建博客

Others

Sharing a convenient way to build a blog without a server, using Github, with custom frontend, comments, tags, and CDN.

Read more about 把Github当作数据库,搭建博客

React中Diff算法源码浅析

React

React's Diff algorithm, also called reconcilation algorithm, handles element changes like addition, movement, deletion during the update process.

Read more about React中Diff算法源码浅析

React事件机制源码浅析

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.

Read more about React事件机制源码浅析

浅析React中的EffectList

React

React organizes effects into an EffectList during Fiber tree construction to efficiently manage component lifecycle methods and side effects.

Read more about 浅析React中的EffectList

有关Hook实现getDerivedStateFromProps的小思考

React

Comparison between getDerivedStateFromProps in class components and its absence in function components, with workarounds using hooks.

Read more about 有关Hook实现getDerivedStateFromProps的小思考

useMemo和useCallback源码浅析

React

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.

Read more about useMemo和useCallback源码浅析

React Context精准更新

React

The method uses bitwise operations for precise Context updates based on specific values without causing all components to refresh.

Read more about React Context精准更新

React Context源码浅析

React

In React, the valueStack in Fiber nodes stores Context information, with old values pushed and popped to maintain hierarchy between nodes.

Read more about React Context源码浅析

React 类组件源码浅析

React

Detailed analysis of class components in React, covering Fiber node creation, instance creation and updates, scheduling updates, component lifecycles, and commit phases.

Read more about React 类组件源码浅析

useEffect和useLayoutEffect源码浅析

React

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.

Read more about useEffect和useLayoutEffect源码浅析

useState和useReducer源码浅析

React

React v17.0.1 source code analysis of synchronous application creation with ReactDOM.render, focusing on Hooks and updating state.

Read more about useState和useReducer源码浅析

浅析React中Mount时Fiber树的创建流程

React

Description of ReactDOM.render mount process, focusing on Fiber nodes' operations including beginWork and completeWork functions in React 17.0.1.

Read more about 浅析React中Mount时Fiber树的创建流程

 如何使用Proxy拦截Map和Set的操作

JavaScript

Proxy can intercept regular object operations using set and get functions. Custom interceptors can be used to intercept calls to Map or Set methods.

Read more about  如何使用Proxy拦截Map和Set的操作

 如何利用Proxy实现一个响应式对象

JavaScript

ES6 Proxy creates object proxy with get and set interceptors for observer patterns and dependency tracking.

Read more about  如何利用Proxy实现一个响应式对象

又双叒叕搞了个新博客

The author's blog was lost due to expired server, now using GitHub for a simple, serverless blog with Next.js.

Read more about 又双叒叕搞了个新博客

SwiftUI 开发时钟小组件笔记

Swift

SwiftUI clock widget development notes including timeline updates, configuration, data sharing, background limitations, widget size, position, and app deployment experiences.

Read more about SwiftUI 开发时钟小组件笔记

《你不知道的JavaScript》(上卷)笔记

JavaScript

Description scope, scope lookup, dynamic scope changes, 'this' binding rules, immutability, [[Get]] and [[Put]] operations, and property existence in JavaScript.

Read more about 《你不知道的JavaScript》(上卷)笔记

《css世界》读书笔记

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.

Read more about 《css世界》读书笔记

《CSS选择器世界》读书笔记

CSS

Sharing notes on CSS selector specificity levels, tips for increasing specificity, and usage examples of various CSS pseudo-classes and selector attributes.

Read more about 《CSS选择器世界》读书笔记

60行代码,造一个动画库轮子

JavaScript

Explanation the core method for animating in JavaScript using requestAnimationFrame, followed by a tutorial on creating a basic animation library.

Read more about 60行代码,造一个动画库轮子

从零搭建一个qiankun微前端demo

JavaScript

Introducing micro-frontends to manage multiple H5 pages efficiently with qiankun, including setup steps for both regular and Umi.js projects.

Read more about 从零搭建一个qiankun微前端demo

工程师等级划分(节选)与我的感悟

Silicon Valley engineers prioritize brain over brawn, aiming for independent problem-solving. Distinguishing levels highlight engineering excellence and product acumen.

Read more about 工程师等级划分(节选)与我的感悟

回顾我的2019,踏足2020

Reflection on 2019: Challenges in personal growth, book goals, coding projects, and health. Setting ambitious goals for 2020.

Read more about 回顾我的2019,踏足2020

理解TypeScript中的infer关键字

TypeScript

Providing examples and explanations of using the "infer" keyword in TypeScript for type inference and unpacking, highlighting its utility and complexity.

Read more about 理解TypeScript中的infer关键字

利用Formik解决表单痛点

JavaScriptReact

Comparison of form handling in jQuery, ant design (for back-end), and Formik in React, with examples and recommendations.

Read more about 利用Formik解决表单痛点

使用Seafile,Ubuntu下搭建个人网盘

Linux

Comparing Seafile with iCloud and OneDrive, it's a high-performance open-source cloud storage option with Markdown editing and Docker support.

Read more about 使用Seafile,Ubuntu下搭建个人网盘

浅谈策略模式和柯里化的使用

JavaScript

Discussion on using strategy pattern to optimize message handling by removing if-else blocks and utilizing currying for function flexibility in development.

Read more about 浅谈策略模式和柯里化的使用

新版博客开发总结

Description the revamp of the blog, version 2.0, detailing its components like Gatsby, React, PWA, layout, animations, and development challenges.

Read more about 新版博客开发总结

主题更换,自动深色模式的简单实现

CSS

Discussion implementing theme switching using CSS variables and functions, including compatibility and using preprocessors like SCSS.

Read more about 主题更换,自动深色模式的简单实现

总结自己使用过的Hooks数据流方式

React

Sharing experiences with React Hooks data flow methods, including useState, useReducer, useContext + useReducer, unstated-next, and UmiJS useModel. Mentions on React-Redux and DvaJS.

Read more about 总结自己使用过的Hooks数据流方式

Create React App v3 学习笔记

React

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.

Read more about Create React App v3 学习笔记

Flutter初次使用的一些总结

Flutter

Flutter project structure, dependencies, network requests, screen adaptation, modal bottom sheet, image handling, and iOS issues

Read more about Flutter初次使用的一些总结

Jest 学习笔记(一)

JavaScript

Install Jest and Babel for testing with examples of matchers like toBe, toEqual, not, toContain, toThrow, async testing.

Read more about Jest 学习笔记(一)

JsSIP踩坑笔记

JavaScript

Implemented page calling with WebRTC using JsSIP, requiring understanding of WebRTC principles including NAT traversal and server roles.

Read more about JsSIP踩坑笔记

GraphQL学习笔记

GraphQL

GraphQL is a query language by Facebook, allowing precise data retrieval without redundancy. Basic concepts, setup, server creation demo.

Read more about GraphQL学习笔记

Less学习笔记(二)函数

CSS

Logic functions, string functions like escape and replace, list functions like length and extract, and type functions for checking types.

Read more about Less学习笔记(二)函数

Linux配置SSH密钥登录

Linux

Logging into a Linux server securely through SSH using key authentication, including key generation and server configuration steps.

Read more about Linux配置SSH密钥登录

Less学习笔记(一)基本语法

CSS

Notes on using Less for Ant Design Pro development: variable declaration, interpolation, parent selector, extend, merge, mixins, accessing properties/variables.

Read more about Less学习笔记(一)基本语法

Mac下全局终端代理 proxychains-ng

Mac

Tips for using proxies in terminal: set environment variable ALL_PROXY or use open-source tools like proxychains-ng for global proxy setting.

Read more about Mac下全局终端代理 proxychains-ng

MediaQueryList全解析

JavaScript

MediaQueryList manages media queries and notifies listeners of changes, with properties like matches, media, onchange, and methods like addListener, removeListener, and compatibility notes.

Read more about MediaQueryList全解析

React-Redux 源码阅读笔记

JavaScriptReact

Description a detailed analysis of react-redux, explaining the principles of Provider, connect, and Subscription, offering insights and queries on connectAdvanced functionality.

Read more about React-Redux 源码阅读笔记

Redux的中间件applyMiddleware解析

JavaScript

Reading and analyzing Redux source code, particularly impressed by middleware implementation, leading to improved understanding of TypeScript.

Read more about Redux的中间件applyMiddleware解析

Redux源码阅读笔记

JavaScript

Explanations and code snippets of key Redux functionalities such as createStore, combineReducers, bindActionCreators, compose, and applyMiddleware, emphasizing closure usage in the source code.

Read more about Redux源码阅读笔记

RxJS学习笔记(七)回压控制

JavaScript

RxJS introduces control operators like throttle, debounce, distinct, ignoreElements, etc., for managing data flow efficiently.

Read more about RxJS学习笔记(七)回压控制

RxJS学习笔记(六)过滤类操作符

JavaScript

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.

Read more about RxJS学习笔记(六)过滤类操作符

RxJS学习笔记(五)辅助类操作符

JavaScript

RxJS mathematical operators count, min, max, reduce work after upstream completion. Conditional boolean operators include every, find, findIndex, isEmpty, defaultEmpty.

Read more about RxJS学习笔记(五)辅助类操作符

RxJS学习笔记(四)高阶Observable的处理

JavaScript

Explanation of high-order Observables, including concatAll, mergeAll, zipAll methods for handling nested Observables in RxJS. Personal reflection and upcoming tech event anticipation.

Read more about RxJS学习笔记(四)高阶Observable的处理

RxJS学习笔记(三)合并类操作符

JavaScript

Merging operators concat, merge, zip, combineLatest; distinct features highlighted for each. Conclude with race, forkJoin, startWith functionalities.

Read more about RxJS学习笔记(三)合并类操作符

RxJS学习笔记(二)创建类操作符

JavaScript

Operators in RxJS help solve specific application problems by manipulating Observables with functions like create, transform, filter, merge, error handling, and more.

Read more about RxJS学习笔记(二)创建类操作符

RxJS学习笔记(一)Observable的创建

JavaScript

Discussion on learning RxJS for deeper understanding, creating Observables, handling infinite data stream, completing Observables, error handling, and unsubscribing.

Read more about RxJS学习笔记(一)Observable的创建

swift 5.1 入门学习

Swift

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.

Read more about swift 5.1 入门学习

Trojan的搭建

Linux

Setting up a Linux VPS with Nginx, domain, SSL, and Trojan for secure web browsing. BBR optimization for Ubuntu.

Read more about Trojan的搭建

Typescript 工具泛型

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.

Read more about Typescript 工具泛型

webpack 4 学习笔记

WebpackJavaScript

Overview of working with webpack, loader for file and style, plugins, optimization techniques like Tree Shaking and Code Splitting.

Read more about webpack 4 学习笔记