Profile image
Posts

Going Multilingual: English and Chinese Content with Language Switching

Jun 12

Adding multilingual support — a language context provider, bilingual post pages, translated listing titles, and seeding Chinese content.

Theming the Site: CSS Variables, Theme Presets, and a Settings Page

Jun 11

Building a complete theme system — CSS custom properties for semantic colors, migrating all components to tokens, fixing WCAG contrast, adding 5 theme presets, and a dedicated settings page.

Adding Video Support: YouTube Integration and Feature Flags

Jun 6

Adding a second content type — video listings with YouTube API integration, lazy-loaded metrics, category filtering, and feature flags to toggle the whole thing.

Integrating Tweets: Twitter API, Seed Data, and the Unicode Page

Jun 6

Building a tweets page with the Twitter API v2, seed data fallback, ISR revalidation, and a bonus unicode character reference page.

Polishing the Experience: Animations, Loading States, and Accessibility

Jun 5

Adding the finishing touches — scroll-based reveal animations with Framer Motion, shimmer loading skeletons, and an accessibility audit.

Creating the Blog: MDX Content, Posts, and Category Filtering

Jun 1

The core of the site — setting up MDX content processing, building the blog detail page, post listings, category filtering, series navigation, and the catch-all route.

Building the Layout Shell: Navigation, Footer, and Shared Components

May 25

How I built the shared layout with a noise overlay, gradient background, glass navigation bar, and profile image.

Setting Up the Foundation: Next.js, Tailwind, and Contentlayer

May 25

How I set up the project scaffolding for my personal website — from initializing Next.js with TypeScript to configuring Contentlayer for MDX content.

搭建 React 17 源码本地调试环境

Apr 11, 2022

通过这种方式只能调试编译之后的代码,不能实现原汁原味的源代码调试体验。查阅一些社区的实现,记录下步骤,方便后续查阅。

Promise 必知必会

Jan 17, 2022

🚩 异步 行为(action):现在开始执行的行为,但它们会在稍后完成(例如,setTimeout 函数就是一个这样的函数;例如加载脚本和模块)

[Discarded] 小米手机欧版MIUI通用卡刷教程

Jan 12, 2022

记录小米手机 MI6 刷欧版 MIUI 的完整流程,包括数据备份、解锁、刷入 Recovery、刷入 ROM 和跳过 Google 验证等步骤。

TypeScript - ES6 中的 Class 继承

Nov 13, 2021

typescript 中的 class 继承是基于 ES6 中 class 的扩展。因此可以类比 vanillajs 中基于原型的继承和 ES6 中的 class 继承的变化。其实,ES6 中的 class 继承其实就是 vanillajs 的语法糖,但又不仅仅是语法糖。

从 0 到 1 搭建 React UI 组件库

Oct 18, 2021

虽然参与了项目组的组件库架构设计和讨论,但是终究不是在自己完全愿景下实施。总想着自己造一个的组件库,于是就有了下面从 0 到 1 包含源起,构建,测试,测试,站点,发布等部分。

从 0 到 1 入门动态规划

Aug 14, 2021

贪心算法的基本思路如下:

现代 JavaScript 教程 — JavaScript 编程语言篇

Jun 8, 2021

摘自现代 JavaScript 教程;总结自己觉得重要/疏忽/未知的部分,闲来无事时看看,抓耳挠腮时看看。长篇预警!

如何使用 JavaScript 实现二叉树,二叉平衡树和红黑树

Dec 20, 2020

此文仅记录学习树相关的知识以及实现逻辑和代码片段。包含二叉树,二叉查找树,平衡二叉查找树(AVL 树,红黑树),均已 es6 语法实现。查阅前默认你已经具备树相关的的基本概念,如果对某个部分感兴趣建议直接跳转到相应部分,have fun!

Good Git Commit Message

Aug 18, 2020

git commit 是当次 committing 更改的简短描述。良好的 commit message 不仅仅有利于与和他人合作,而且能很方便的追踪工作记录。

Promises implementation with ES6 class

Aug 9, 2019

参考 Promises/A+ 规范,使用 ES6 class 实现 Promise 的核心功能,包括 new Promise()、.then() 等。

Vanilla JavaScript Inherited

Aug 9, 2019

ECMAScript 继承主要是依靠原型链来实现

Posts
Categories
Playground

Built with Next.js, MDX, Tailwind and Vercel