Posts

All the articles I've posted.

• [译] 任务、微任务、队列与调度

  Published:2026年6月2日 |  at 08:00

  本文深入解析浏览器事件循环中的任务（macrotask）与微任务（microtask）的执行顺序，以及它们在不同浏览器中的调度差异。

• [译] 触发变更检测，但不要太频繁

  Published:2026年5月30日 |  at 16:45

  本文解释 Angular 中基于 zone 的变更检测为何会在微任务队列清空后触发，并说明为什么用微任务合并比多次 setTimeout() 更适合手动调度 CD 周期。

• [译] CLDR：你的 locale 真相来源

  Published:2026年5月30日 |  at 16:30

  CLDR 是 Angular 本地化格式的事实来源。本文通过真实 issue 演示如何判断显示问题到底是 bug 还是数据规范使然。

• [译] 默认具备 Tree-shaking 能力

  Published:2026年5月30日 |  at 16:10

  构建 Angular 库时，如何利用 providedIn: 'root' 与 useFactory 让抽象服务默认具备 Tree-shaking 能力，避免把未使用的代码带进最终产物。

• [译] Resource: async loading with signals

  Published:2026年5月30日 |  at 14:35

  谁说你需要效果？

• [译] 了解 Angular 中的私有属性降级

  Published:2026年5月30日 |  at 14:33

  以及有关 browserslist 和 Esbuild 集成到 Angular 的更多信息

• [译] 用 input() 信号替换 @Input 设置器

  Published:2026年5月30日 |  at 14:32

  了解输入设置器的注意事项

• [译] v18 中的混合变更检测

  Published:2026年5月30日 |  at 14:31

  无区域有助于基于区域。

• [译] Angular 17.1 预览版中为所有人提供无区域变更检测

  Published:2026年5月30日 |  at 14:30

  你准备好了吗？

• [译] 模板中继器的默认性能

  Published:2026年5月30日 |  at 14:29

  这是关于@for

• [译] Angular v17 中变更检测的状态

  Published:2026年5月30日 |  at 14:28

  全球本地化：全球化为本地化

• [译] 信号和订阅

  Published:2026年5月30日 |  at 14:27

  我需要取消订阅吗？

• [译] ESBuild-based builder, to infinity and beyond

  Published:2026年5月30日 |  at 14:26

  v17 构建者方面的新增内容

• [译] 了解 Angular 的可延迟视图 - 第 1 部分。 2

  Published:2026年5月30日 |  at 14:25

  里面的魔法

• [译] Understanding Angular's deferrable views - Part. 1

  Published:2026年5月30日 |  at 14:24

  @defer 是街区里的新酷孩子

• [译] 延迟加载 Angular 的动画模块

  Published:2026年5月30日 |  at 14:23

  主包中的内容减少了几 kB

• [译] 在 Angular 中延迟加载服务并考虑测试

  Published:2026年5月30日 |  at 14:21

  我们应该能够模拟我们延迟加载的内容

• [译] 查找、调试并修复 Angular 中的内存泄漏

  Published:2026年5月30日 |  at 14:20

  了解可帮助您调查内存泄漏的工具。

• [译] Angular 声明式模板如何实现高性能渲染

  Published:2026年5月30日 |  at 09:30

  本文从 Angular Ivy 编译产物入手，解释声明式模板如何通过创建/更新模式、节点复用、OnPush 与脏检查、以及插值记忆化来减少 DOM 操作。

• [译] 理解 effect

  Published:2026年5月29日 |  at 20:07

  本文介绍 Angular v19 中 Root effect 与 View effect 的差异、调度时机，以及它们在渲染与测试中的实际影响。

• [译] Angular Input 与 Output 的不对称性

  Published:2026年5月29日 |  at 19:35

  本文探讨了 Angular 中 input() 与 output() 看似对称却本质不同的设计：input 是基于状态的通信（信号），而 output 是基于事件的通信（Observable），理解这一差异有助于正确使用 Angular 的响应式原语。

• [译] Signal 决策图

  Published:2026年5月26日 |  at 23:45

  一张帮助你在 Angular 中选择合适的 Signal 原语的决策图。

• [译] 无生命周期钩子的 Angular —— 使用现代 API 构建组件

  Published:2026年5月26日 |  at 13:00

  探索如何使用 Angular 最新的信号（Signals）、DestroyRef、afterRender 等现代 API 替代传统的生命周期钩子，编写更简洁、可维护的组件。

• [译] inject 函数不是服务定位器——除非你把它用成了服务定位器

  Published:2026年5月26日 |  at 00:00

  深入探讨 Angular 中 inject() 函数与服务定位器模式的区别，理解注入上下文的基础原理，以及如何避免将 inject() 误用为服务定位器。

• Signals 内在原理：从 Vue Reactivity 到 Angular Signals 的响应式编程统一模型

  Published:2026年5月25日 |  at 00:00

  把 Vue 2/3、Angular Signals、Solid.js 与 TC39 Signals Proposal 放进同一张坐标系：依赖追踪、变化传播、副作用调度。理解不同框架响应式系统背后的共同模型，而不是只记 API。

• Node.js 工程化 2026：告别 ts-node，原生 TypeScript 运行时时代已到

  Published:2026年5月2日 |  at 02:00

  Node.js 已内置 Type Stripping，可直接运行满足条件的 TypeScript 文件；ts-node 不再是唯一选择。本文讲解现代 Node.js 项目结构、内置 TS 支持与其局限、Bun/Deno 的现实评估，以及 tsup、Vitest、zod 的最佳实践。

• 2026 年 React 入门路线：抛弃 dva/umi，拥抱 React 19 + Vite + Ant Design 5

  Published:2026年5月2日 |  at 01:00

  2019 年的 CRA + dva + umi 方案早已过时。本文给出 2026 年 React 入门的正确路线：React 19 + Vite + Ant Design 5 + Zustand + React Router v7，配合完整的工程化配置。

• Vue 3 六年回望：从 2020 年的激进 RFC 到 2026 年的稳健生态

  Published:2026年5月2日 |  at 00:00

  Vue 3 从 2020 年发布到 2026 年已走过六年。本文回顾 Vue 3 的设计决策、生态演进、Vue 2 EOL 的落幕，以及 2026 年 Vue 生态的现实选型建议。

• 前端构建工具十年：从 Gulp 到 Vite，再到 Rolldown 的时代终章

  Published:2026年5月1日 |  at 23:00

  从 2014 年的 Grunt/Gulp 任务流，到 Webpack 的模块打包时代，再到 Vite 的 ESM 革命和 Rolldown 的 Rust 重写——一篇文章看懂前端构建工具十年演化史。

• VuePress 退场，VitePress 登场：2026 年技术文档站的最优解

  Published:2026年5月1日 |  at 22:00

  VuePress 1/2 时代的终结与 VitePress 的崛起。本文详解 VitePress 核心优势、从 VuePress 的迁移路径、Giscus 评论系统接入，以及搜索、国际化、自定义主题等实战配置。

• 从 Travis CI 迁移到 GitHub Actions：2026 年的前端自动化部署实战

  Published:2026年5月1日 |  at 21:00

  Travis CI 曾是开源项目的 CI 首选，但 2021 年的收费政策变化让大量项目流失。本文详解如何把 .travis.yml 迁移到 GitHub Actions，并介绍 pnpm 缓存、Secrets、矩阵构建等实用技巧。

• Lerna 已死，Monorepo 未亡：pnpm workspace + Changesets + Turborepo 实战

  Published:2026年5月1日 |  at 20:00

  Lerna 2022 年停维护后，现代 Monorepo 的最优解是什么？本文手把手讲解 pnpm workspace + Changesets + Turborepo 的完整实战配置，以及如何从 Lerna 平滑迁移。

• Zone.js 谢幕，Signals 登场：Angular 17-19 变更检测完全指南

  Published:2026年5月1日 |  at 19:00

  深入讲解 Angular Signals 体系：signal()、computed()、effect() 的核心 API，Zoneless 模式的开启方式，以及如何将存量 Zone.js 组件渐进式迁移到 Signals 架构。

• 从 OAuth 2.0 到 OAuth 2.1：PKCE、BFF 与现代前端认证的正确姿势

  Published:2026年5月1日 |  at 18:00

  回顾 2020 年 OAuth 2.0 方案的安全隐患，深入讲解 OAuth 2.1 的核心变化、PKCE 流程、BFF 模式，以及如何用 NestJS + Passport 构建安全的现代认证网关。

• Angular SSR、Hydration 与 BFF：从零理清架构知识点

  Published:2026年4月18日 |  at 11:23

  Angular 的易混知识点

• Angular 升级指南（三）：Angular 19-22 新特性详解

  Published:2026年4月17日 |  at 12:00

  Angular 19-22 标志着框架的成熟期--Signals 全面稳定、Zoneless 正式落地、Signal Forms、Angular Aria 无障碍组件、默认 OnPush 等特性让 Angular 焕然一新。

• Angular 升级指南（二）：Angular 16-18 新特性详解

  Published:2026年4月11日 |  at 20:10

  Angular 16-18 是框架的变革期——Signals 响应式系统诞生、新控制流语法、@defer 延迟加载、esbuild 构建器、SSR 水合等重磅特性逐步落地。

• Angular 升级指南（一）：Angular 13-15 新特性详解

  Published:2026年4月11日 |  at 20:00

  从 Angular 13 到 15，框架经历了 Ivy 全面接管、Typed Forms、Standalone Components 等里程碑式变革。本文逐版本梳理每个新特性的使用方式与升级要点。

• HTTP/3 科普：QUIC、0-RTT、队头阻塞、连接迁移，一次讲清楚

  Published:2026年4月11日 |  at 08:00

  从前端开发者的视角出发，系统讲解 HTTP/3 背后的核心概念：QUIC 协议、0-RTT 握手、队头阻塞、连接迁移，以及它对实际项目的影响。

• 从自研到开源：使用 Prometheus 实现可扩展的网络探测与 HTTP/3 就绪

  Published:2026年4月10日 |  at 08:00

  本文翻译自 Slack 工程博客，介绍了 Slack 如何从自研网络探测系统迁移到 Prometheus Blackbox Exporter，并扩展支持 HTTP/3 (QUIC) 探测的全过程。

• AI 智能体能构建真正的 Stripe 集成吗？

  Published:2026年4月7日 |  at 08:00

  本文翻译自 Stripe 官方博客，Stripe 构建了一个包含 102 个真实集成任务的基准测试，来检验 AI 编码智能体能否构建生产级别的 Stripe 集成。

• One Month with OpenClaw - An Honest Review

  Published:2026年4月2日 |  at 10:30

  After spending 600 RMB per month on AI tools for a month, here's what I learned about AI assistants and myself.

• Daily English Reading: The New Era of Space Exploration

  Published:2026年3月31日 |  at 04:00

  B2-level English reading about space exploration, Mars missions, and commercial spaceflight

• Daily English Reading: The Future of Remote Work

  Published:2026年3月30日 |  at 04:00

  B2-level English reading about remote work trends and digital collaboration

• Daily English Reading: Mental Wellness in Modern Life

  Published:2026年3月29日 |  at 04:00

  B2-level English reading about mental health and well-being in contemporary society

• Daily English Reading: Green Technology and Sustainable Living

  Published:2026年3月28日 |  at 04:00

  B2-level English reading about sustainable technology and eco-friendly lifestyle

• Daily English Reading: Digital Privacy in the Modern Age

  Published:2026年3月27日 |  at 04:00

  B2-level English reading article about digital privacy and data protection with audio narration

• Daily English Reading - The Science of Sleep

  Published:2026年3月26日 |  at 04:00

  Today's B2 level English reading article about the science of sleep, its importance for health, and tips for better rest, with audio and Chinese translation.

• Daily English Reading - Digital Detox

  Published:2026年3月25日 |  at 04:00

  Today's B2 level English reading article about digital detox - why unplugging from technology can improve your mental health and productivity, with audio and Chinese translation.

• Daily English Reading: The Rise of AI Companions

  Published:2026年3月24日 |  at 04:00

  B2-level English reading article about AI companions and how technology is reshaping human connection with audio narration

• 我的 OpenClaw 探索之路 - 从踩坑到真香

  Updated:2026年3月23日 |  at 11:39

  从「API 费用爆炸」到「订阅真香」——我是如何走上 OpenClaw 自托管之路的，以及这一周的实战记录

• Daily English Reading: Climate Action in 2026: Progress and Challenges

  Published:2026年3月23日 |  at 04:00

  B2-level English reading article about climate change and environmental action with audio narration and Chinese translation

• 10年前端考古：从 Vue 到 AI，我的 GitHub 学习轨迹

  Published:2026年3月22日 |  at 18:00

  回顾10年来在 GitHub 上留下的98个仓库，记录从 Vue 新手到 AI 全栈的成长历程。

• Daily English Reading: The Science of Mental Wellbeing in Modern Life

  Published:2026年3月22日 |  at 04:00

  B2-level English reading article about mental health and wellbeing with audio narration and Chinese translation

• Daily English Reading: How AI is Transforming Our Daily Lives in 2026

  Published:2026年3月21日 |  at 04:00

  B2-level English reading article about artificial intelligence with audio narration and Chinese translation

• 五百年后，他生活在上海

  Published:2026年3月20日 |  at 16:00

  一个「大话西游」式的现代都市短篇系列。五百年前他大闹天宫，五百年后他挤早高峰地铁、在出租屋里算外卖、在年会上抽到裁员通知。

• Daily English Reading - Forever Chemicals

  Published:2026年3月20日 |  at 04:00

  Today's B2 level English reading article about PFAS (forever chemicals) and their impact on health and environment, with audio and Chinese translation.

• Daily English Reading - How Sleep Affects Your Brain

  Published:2026年3月19日 |  at 04:00

  Today's B2 level English reading article about how sleep affects your brain, with audio and Chinese translation.

• How to Nap Like a Pro - How to Nap

  Published:2026年3月18日 |  at 14:00

  GQ Wellness article about how to nap properly.

• English Teacher 4

  Published:2025年11月24日 |  at 08:09

  跟着Roy学习英语已经有很长一段时间了，总的来说我的想法，菲教适合入门，开口，仅此而已。

• One year in Shanghai

  Published:2025年10月21日 |  at 18:00

  找到自己的舒适区，然后再稍微努力一点点。

• work with AI

  Published:2025年8月25日 |  at 04:00

  和 AI 一起工作。

• Start from Shanghai

  Published:2025年4月28日 |  at 02:20

  After six months at Accenture, I am enjoying my work with Angular 18 and learning Agile methodologies. I aim to obtain an AWS SAA certification. Personally, I've secured a Shanghai Residence Permit for my child's kindergarten while balancing family responsibilities as Tina starts a new job.

• Angular Upgrade from 13 to 17

  Published:2024年7月15日 |  at 04:23

  复杂的事情可以拆分小的任务，这样更具有可行性。

• AI Changed My Life

  Published:2024年5月14日 |  at 03:34

  ChatGPT彻底的改变了我的工作流程，成为了我的得力助手。

• Crowded Subway

  Published:2024年2月1日 |  at 16:23

  用身体挡住别人，用手机遮掩尴尬，攒满一身的戾气，影响一天的状态。

• Blog in Progress

  Published:2024年1月20日 |  at 22:19

  人生就是不停地折腾，向着更好的自己前进，直到自己累了。

• 兜兜转转记笔记

  Published:2024年1月15日 |  at 22:19

  记得小学老师总是提到“好记性不如烂笔头”，我想我从中获益了。

• 探索 Astro：2024 年前端开发社区的魅力

  Published:2024年1月2日 |  at 02:32

  第一次了解到 Astro 是通过一个Netfily 2023年12月的前端技术栈年度总结，发现它的使用占比升高了很多， 于是就比较好奇，究竟哪个特点吸引了那么多开发者使用它。 首先被它吸引是由于它做出来的网站样式非常酷，不得不说，作为前端我可能格外关注网站的样式。

• Annual Summary 19-23

  Published:2023年12月30日 |  at 20:12

  我的5家公司，我曾经走过的路，虽有坎坷，但总算收获不少。

• English Teacher 3

  Published:2023年12月5日 |  at 20:09

  截止到现在 2024年1月22日09:05:19，已经成功推荐5个学生（Conrad, Leo, Klay, A girl, Robert）跟Roy学习。

• English Teacher 2

  Published:2023年12月3日 |  at 18:09

  有时自己有种想拯救苍生的情节，那么就从身边的人开始。

• English Teacher 1

  Published:2023年12月1日 |  at 18:09

  有的时候过来人的一句话，就会对你的生活产生巨大的改变，感恩每个遇到的人。

• [译] Passport 文档（四）操作

  Published:2020年11月22日 |  at 08:00

  Passport 暴露一个 `login()` 函数在 `req`（也有 `logIn()` 这个别名）上，它能够在建立登录 session 时使用。 ```js

• [译] Passport 文档（三）基本与摘要

  Published:2020年11月15日 |  at 08:00

  连同定义 HTTP 的身份验证框架，[RFC 2617](http://tools.ietf.org/html/rfc2617) 也定义了基本和摘要认证方案。这两种方案都使用用户名和密码作为凭证来认证用户，并且通常用于保护 API 端点。

• [译] Passport 文档（二）提供者

  Published:2020年11月8日 |  at 08:00

  Facebook 策略允许用户使用他们的 Facebook 账户登录一个 web 应用。在内部，Facebook 认证使用 OAuth 2.0 进行工作。 Facebook 支持通过 [passport-facebook](https://github.com/jaredhanson/passpor

• [译] Passport 文档（一）入门

  Published:2020年11月1日 |  at 08:00

  Passport 是 NodeJS 的认证中间件。他的唯一设计目的是：验证请求。书写模块化的、封装代码是一种美德，所以 Passport 将除了验证请求之外的功能都分发给应用程序来实现。关注点分离使代码能够更加整洁、可维护，同时也使 Passport 能够极易集成到应用中。

• Passport 相关汇总

  Published:2020年10月15日 |  at 08:00

  权限管理是所有系统都会有的一部分，所以我们要了解一下 nodejs 中权限部分是怎么做的，都涉及哪些模块。 Passport 是一个简单、低调的 nodejs 身份验证中间件。它是弹性的、模块化的，能够集成到任何基于 express 的 web 应用。支持一系列权限策略：账号密码、Facebook、

• OAuth 2.0 详解

  Published:2020年10月1日 |  at 08:00

  OAuth 2.0 是一种授权机制，主要用来颁发令牌。 给快递员一个7天的授权码，这样不提供自己的密码即可让快递员进入小区，这样的授权机制是安全的，当时间到了之后如果仍然有需求可以二次授权，否则就自动过期

• Angular 版本升级指南

  Published:2020年9月15日 |  at 08:00

  - Removal of View Engine: Angular 13 fully transitioned to Ivy, removing the older View Engine, which simplifies the framework and improves performanc

• Zone.js 原理

  Published:2020年9月1日 |  at 08:00

  Zone.js, View Engine, and Ivy are all related to Angular, a popular web application framework.

• Angular Ivy vs View Engine

  Published:2020年8月15日 |  at 08:00

  view engine from Angular 2. ivy introduced in Angular 9. https://designtechworld.medium.com/ivy-compiler-vs-view-engine-b607c3897d3d

• Angular 变更检测

  Published:2020年8月1日 |  at 08:00

  浏览器渲染：模型 -> 视图。 模型可以是JavaScript中的原始数据类型、对象、数组或其他数据对象。视图可以是页面的表单、段落、按钮，这些页面元素使用 DOM 来表示。

• Vue 3 对比默认构建包大小

  Published:2020年6月1日 |  at 08:00

  2.0 项目创建 ```js vue create vue2-demo ``` 3.0 项目创建过程 ```js vue create vue-next-demo

• Vue 3 新特性

  Published:2020年5月1日 |  at 08:00

  1. 通过yarn dev构建好 vue.global.js 文件 2. 通过http-server或者类似工具，启动一个server环境。 3. 注意 index.js 中的内容和文章有出入。

• [译] 2020 年关于 Vue 3 你需要知道的事

  Published:2020年4月1日 |  at 08:00

  现在 VueJS 是最热的框架之一，它在2019的周下载量翻了一倍。 2020年Vue3发布时，它将更加流行。 现在Vue团队的重点在使它能够适合所有开发者，新版本将更强大、更有效率。同时有很多的内部优化将让我们用的更爽。

• [译] Vue 3 的开发进展

  Published:2020年3月1日 |  at 08:00

  来自重写中的下一个版本的 Vue.js 课程。 在去年，Vue 团队一直在 Vue.js 的下一个主要版本工作，我们希望在 2020 年上半年能够发布。（在写这篇文章的时候工作仍在继续）。在 2018 年底 Vue 新版本的想法就已经成型，当时 Vue 2 代码库已经有两年半的历史了。在通用软件的生

• [译] Angular 拦截器的 10 种用法

  Published:2020年1月1日 |  at 08:00

  有许多种方式使用拦截器，我确定我们大多数人使用的很浅显。在这篇文章中，我将介绍在 Angular 中我最喜欢的 10 种使用拦截器的方式。 我使例子尽可能的简洁。我希望他们能够启发你们去思考使用拦截器的新方式。这篇文章不是关于拦截器教学的，因为已经有很多好的文章了。但是，在开始倒数之前，让我们以一些

• [译] core-js@3, babel 展望未来

  Published:2019年12月1日 |  at 08:00

  core-js@3 和 babel 补丁相关功能的重大变化详解

• [译] Node.js 架构和 12 个最佳实践

  Published:2019年11月15日 |  at 08:00

  虽然 Node.js 才诞生 11 年，但是已经是过去 10 年来最流行的 web 开发框架之一。我是一个终极粉丝，感谢 Node.js，让我能够在浏览器外部写 JavaScript 代码，去创建一个非阻塞的、流畅的、快速的、健壮的、可扩展的服务端应用程序。

• React + Ant Design 入门

  Published:2019年11月1日 |  at 08:00

  要说为啥要学习React，可能是因为难以抗拒Ant Design的美。 根据Ant Design的文档，先尝试quick start，发现没有配置webpack等构件工具的情况下难以运行起来。所以从推荐的umi/dva/antd开始

• [译] @vue/cli-plugin-typescript

  Published:2019年10月25日 |  at 08:00

  翻译 @vue/cli-plugin-typescript README， [原 README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/README.md)

• [译] @vue/cli-plugin-eslint

  Published:2019年10月20日 |  at 08:00

  - **`vue-cli-service lint`** ``` Usage: vue-cli-service lint [options] [...files]

• [译] Vue CLI 插件开发指南

  Published:2019年10月15日 |  at 08:00

  已经提了 merge request [https://github.com/vuejs/vue-cli/pull/5345](https://github.com/vuejs/vue-cli/pull/5345)

• Vue.js 深入响应式原理

  Published:2019年10月1日 |  at 08:00

  ```js <input v-model="message"/> export default { data(){ message: '' } } ``` 修改message的值，DOM就会改变，究竟如何做到的呢。

• Vue.js 组件化

  Published:2019年9月15日 |  at 08:00

  生命周期函数会被合并为数组。 这种合并思想值得借鉴，本身有一套默认配置，合并传入的配置，达到定制化的目的。 放一张经典的生命周期图 _init src/core/instance/init.js

• Vue update 过程

  Published:2019年9月8日 |  at 08:00

  ```js src/core/instance/lifecycle.js src/platforms/web/runtime/index.js src/platforms/web/runtime/patch.js

• Virtual DOM 详解

  Published:2019年9月1日 |  at 08:00

  直接操作DOM会影响性能，所以才产生了虚拟DOM。 一个对象，两个前提，三个步骤。 Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM数的基本。

• Vue render 函数

  Published:2019年8月22日 |  at 08:00

  template ```js <div id="app"> {{ message }} </div> ``` render ```js render: function(createElement){

• Vue 实例挂载的实现

  Published:2019年8月15日 |  at 08:00

  Vue中我们是通过$mount实例方法去挂载vm的，$mount方法在多个文件中都有定义，如 ```js $mount src/platform/web/entry-runtime-with-compiler.js

• new Vue 发生了什么

  Published:2019年8月8日 |  at 08:00

  src/core/instance/index.js ```js function Vue (options) { if (process.env.NODE_ENV !== 'production' &&

• Vue.js 数据驱动

  Published:2019年8月1日 |  at 08:00

  Vue.js的核心思想是数据驱动。 视图是由数据驱动生成的，我们对视图的修改，不会直接操作DOM，而是通过修改数据。 - 简化代码量 - 利于维护 简洁的模板语法来声明式的将数据渲染为DOM：

• Vue.js 从入口开始

  Published:2019年7月22日 |  at 08:00

  ``` src/platforms/web/entry-runtime-with-compiler.js src/platforms/web/runtime/index.js

• Vue.js 源码构建

  Published:2019年7月15日 |  at 08:00

  Vue.js源码是通过Rollup构建的，配置在build目录下。 使用Runtime only时，需要借助如webpack的vue-loader工具把.vue文件编译成JavaScript，因为这是在编译阶段做的，所以Runtime only只包含运行时的Vue.js代码，因此代码体积也更轻量。

• Vue.js 源码目录设计

  Published:2019年7月8日 |  at 08:00

  src下的源码 ```js src |-- compiler |-- core |-- platforms |-- server |-- sfc |-- shared

• Vue.js 技术揭秘 - Flow

  Published:2019年7月1日 |  at 08:00

  Flow是Facebook出品的JavaScript静态类型检查工具，Vue.js的源码利用了Flow做静态类型检查，当然新版的Vue.js中使用了TypeScript来做这个事情。

• Egg.js 入门

  Published:2019年6月15日 |  at 08:00

  ``` npm init egg --type=simple ``` yarn init 不好使。 之前曾经在本地创建过mysql的环境，但是很久不用也就没有启动了，但是这次无论如何也不能成功启动起来。

• TypeScript 入门

  Published:2019年6月1日 |  at 08:00

  JavaScript 类型化逐渐成为了主流。 - [ ] [文档学习](https://github.com/llccing-demo/Typescript-simple)

• Three.js 高级几何体

  Published:2019年5月15日 |  at 08:00

  - ConvexGeometry 凸面体 - LatheGeometry 扫描体 - TubeGeometry 管状几何体 - ExtrudeGeometry 拉伸几何体

• SQL 聚合查询 GROUP BY

  Published:2019年5月15日 |  at 08:00

  五个常用的聚合函数 - COUNT - SUM - AVG - MAX - MIN - **计算行数** ```SQL SELECT COUNT(*) FROM `Product`

• SQL SELECT 查询基础

  Published:2019年5月8日 |  at 08:00

  ```SQL SELECT * FROM Product; ``` ```SQL SELECT product_id AS '商品别名', product_name AS '商品名字',

• Three.js 几何体

  Published:2019年5月1日 |  at 08:00

  **常见几何体** - PlaneGeometry 平面 - CircleGeometry 圆形 - ShapeGeometry 塑形 - CubeGeometry 立方体

• SQL CREATE 建表

  Published:2019年5月1日 |  at 08:00

  数据库选的是 MySQL，语法是 MySQL 语法。 ```SQL CREATE DATABASE shop; ``` ```SQL CREATE TABLE Product(

• Three.js 材质

  Published:2019年4月15日 |  at 08:00

  简单材质 - MeshBasicMaterial 网格基础材质 - MeshDepthMaterial 网格深度材质 - MeshNormalMaterial 网格法向材质

• Three.js 光源

  Published:2019年4月1日 |  at 08:00

  - Three.js库里有哪些可用的光源？ - 什么时候用什么样的光源？ - 如何调整和配置各种光源的行为？ - 如何创建镜头炫光？ - AmbientLight 环境光

• Webpack 学习笔记

  Published:2019年3月15日 |  at 08:00

  书籍的作者是个[孩子](http://resume.wuhaolin.cn/)，像我一样的孩子，不过比我小一岁，大家同是16年毕业，人家是真的优秀。 这本书知识点是挺全的，就是过于简单，没有深入的内容，字里行间透露着青涩，像我一样的青涩。

• CSS Grid 布局详解

  Published:2019年3月1日 |  at 08:00

  网格布局是最强大的CSS布局方案。 它将网页分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，也存在重大区别，

• PAC 代理自动配置

  Published:2019年2月15日 |  at 08:00

  Proxy Auto Config，代理自动配置，PAC 类似配置文件，通过这个文件，浏览器或者其他UA可以对每一个 URL 配置代理服务。 尝试的手机是 小米CC9 Pro，发现不太行，不生效，向参考文章中第一篇作者提问了，但是没有获得有价值的信息。

• VuePress 评论系统

  Published:2019年2月1日 |  at 08:00

  没有评论的blog，不是一个好的blog。 当然vuepress是用来做产品使用文档的，而不是blog，所以自身就没有评论交互的基因在，但是这个可以改，已经有人提issue反馈这个问题了。

• JavaScript 面试题集

  Published:2019年1月15日 |  at 08:00

  ```js a(typeof[1,2]); // object a(typeof 'string'); // string var f = true; a(typeof f); // boolean

• Lerna Monorepo 管理

  Published:2019年1月15日 |  at 08:00

  :::tip 一个管理有多个包的JavaScript项目的工具。 ::: 主要是从 [vue-next](https://github.com/vuejs/vue-next) 项目了解到这个工具，并且发现 [vuepress](https://github.com/vuejs/vuepress) 这

• CSS 面试题集

  Published:2019年1月1日 |  at 08:00

  :::tip 利用CSS进行元素的水平居中，比较简单，行内元素设置其父元素的text-align:center，块级元素设置其本身的 margin-left和margin-right为auto即可。设置垂直居中则有些麻烦，现整理记录如下。

• 组件的重写

  Published:2018年12月15日 |  at 08:00

  现在开发后台管理系统，你不用个组件库都不好意思跟人打招呼。 做了很多后台管理系统，并且一直和UI、测试同学，针对组件库的事甩锅给组件的开发者。 **甩** UI：“这个按钮太大了，改小一点。”

• Gzip 压缩优化

  Published:2018年12月1日 |  at 08:00

  **gzip**是一种文件格式，也是用来压缩、解压文件的应用程序。这个程序是Jean-loup Gailly和Mark Adler创建的，它被用来替代早期Unix系统上的压缩工具，并且计划给GNU（GNU's Not Unix）用，“gzip”中的“g”就是来自GNU。

• Vue CLI 2 迁移到 Vue CLI 3

  Published:2018年11月15日 |  at 08:00

  - vue-cli3 已经升级到 webpack4，性能优化、构建速度提升。 - 将 webpack 的复杂配置隐藏到依赖中，减少复杂配置。 - eslint 配置，cli3 中加入了 Airbnb 等规则，这次构建使用了 Airbnb 的规则，使代码更加规范，同时会提升 js 的编写能力。

• Travis CI 持续集成

  Published:2018年11月1日 |  at 08:00

  编码只是软件开发的一小部分，更多的时间往往花在构件和测试。 Travis只支持GitHub，不支持其他代码托管服务。 没有Travis CI的情况下，每次写完需要执行下列操作。

• 前端架构演进

  Published:2018年10月15日 |  at 08:00

  tips: 前端架构这个单词到底是什么，我迷茫了。 web front end architecture the structure of the web front end

• 响应式 Web 设计

  Published:2018年10月1日 |  at 08:00

  主要是应用在官网的设计， CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当浏览器窗口变化的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 定义浏览器的分隔点，可以参考bootstrap或者其他更细致的方案。

• Promise 完全指南

  Published:2018年9月15日 |  at 08:00

  异步编程的解决方案，比传统的回调函数和事件更合理和强大。 Promise 最早由社区提出、实现，ES6 将其写入了语言标准，统一了用法，原生提供了 Promise 对象。

• 表单验证的设计模式

  Published:2018年9月15日 |  at 08:00

  缺点： - 多人协作时，会覆盖。 - 创建了全局变量影响性能。 优点：避免了全局变量，一旦出现覆盖现象，会全部覆盖。 问题：当别人想用你的方法时，不能复制一份，或者说别人不能通过new的方式继承这些方法。

• Generator 异步应用

  Published:2018年9月1日 |  at 08:00

  异步操作，一个任务不是连续完成的，先执行一段，转而执行其他任务，等做好了准备，再回过头执行第二段。 ES6之前的异步操作，大致以下四种： - 回调函数 - 事件监听

• 面向对象编程 OOP

  Published:2018年9月1日 |  at 08:00

  :::tip 面向对象编程（Object-Oriented Programming） ::: 这样将我们将要用到的属性和方法都封装到抽象的Book类里面了,当使用功能方法时,不能直接使用Book类，需要使用new关键字来实例化新的对象。

• 设计模式开篇

  Published:2018年8月20日 |  at 08:00

  Singleton 单例模式 Abstract Factory 抽象工厂模式 Builder 生成器模式 Factory Method 工厂方法模式 Prototype 原型模式

• Generator 函数详解

  Published:2018年8月15日 |  at 08:00

  Generator函数是ES6提供的一种异步变成解决方案,语法行为与传统函数完全不同。 Generator函数有多种理解角度，语法上，可以将Generator函数理解为状态机，封装了多个内部状态。

• ES6 函数的扩展

  Published:2018年8月1日 |  at 08:00

  - 函数参数的默认值 ```js // demo1 // ES5 function log(x, y) { y = y || 'World'; console.log(x, y);

• 排序算法详解

  Published:2018年8月1日 |  at 08:00

  ```js /** * 冒泡排序 * 入门级排序 * * 2018年09月16日23:14:17 */ let a = [123, 3, 3, 0, 31, 23, -12, 898, -2, 4, 5, 1, 2];

• Drag & Drop API

  Published:2018年7月15日 |  at 08:00

  <iframe height="265" style="width: 100%;" scrolling="no" title="js-basic-drag" src="https://codepen.io/llccing/embed/GRRePmw?height=265&theme-id=defau

• Cookie 详解

  Published:2018年7月1日 |  at 08:00

  一个cookie就是存储在用户浏览器中的一小段文本文件。cookie是纯文本的形式。浏览器将其储存并且根据一系列规则在每个请求中将该信息返回致服务器。web服务器可以用cookie来识别用户（定向投放广告）。多数需要登录的站点通通常会在认证通过后设置一个cookie，之后通过这个cookie做校验。

• 计算盒模型的各种尺寸

  Published:2018年6月15日 |  at 08:00

  上来一张图 offsetWidth/offsetHeight 返回元素的宽度/高度，不包含滚动内容的宽度/高度包括元素的边框、内边距和滚动条。 offsetLeft/offsetTop

• AJAX 详解

  Published:2018年6月1日 |  at 08:00

  Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to u

• arguments 对象

  Published:2018年5月15日 |  at 08:00

  箭头函数中不可用，可以使用arguments对象在函数中引用函数的参数。 <iframe height="265" style="width: 100%;" scrolling="no" title="js-basic-argumetns" src="https://codepen.io/llcci

• apply 与 call

  Published:2018年5月1日 |  at 08:00

  call方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。 apply使用一个指定的this值和一个参数数组或类数组来调用一个函数。 这两个函数的第一个参数都是指定的this值，apply的第二个参数是array，而call的第二个到第N个参数就是第二个到第N个参数。

• Set 与 Map 数据结构

  Published:2018年4月15日 |  at 08:00

  ES6新提供的数据结构Set。类似数组，但是所有成员都是唯一的，没有重复值。 属性 - Set.prototype.constructor: 构造函数 - Set.prototype.size: 返回实例成员总数

• ES6 对象的扩展

  Published:2018年4月1日 |  at 08:00

  ES6 允许直接写入变量和函数，作为对象的属性和方法，这样的书写更加简洁。 ```js var foo = 'bar'; var baz1 = { foo }; console.log(baz);

• 前端工程师的职业规划

  Published:2018年4月1日 |  at 08:00

  1. 分级：初级、中级、资深、架构师、项目负责人 2. 能力层次： 前端能力（50%），后端能力（25%），业务能力（25%）T字型。 3. 综合素质：软技能、项目经验，沟通组织

• ES6 字符串的扩展

  Published:2018年3月15日 |  at 08:00

  - 字符的 Unicode 表示法 - codePointAt() - String.fromCodePoint() - 字符串的遍历器接口 - at() - normalize()

• rem 适配方案

  Published:2018年3月1日 |  at 08:00

  rem和em都是相对单位，CSS3引入rem。 :::tip em作为font-size的单位时，代表父元素的字体大小。**em作为其他属性的单位时，代表自身字体大小。**

• let 和 const

  Published:2018年3月1日 |  at 08:00

  ```js 'use strict'; { let a = 10; var b = 1; } console.log(a); // Uncaught ReferenceError: a is not defined

• 常用的布局实现

  Published:2018年2月15日 |  at 08:00

  - 左右布局 - 上左右布局 - 上左中右布局 <iframe height="265" style="width: 100%;" scrolling="no" title="layout-float" src="https://codepen.io/llccing/embed/vYYyoQM?he

• inline-block 详解

  Published:2018年2月1日 |  at 08:00

  1. 能够设置宽高 2. inline-block各个元素，高度不同时，以文本基线对齐，通过vertical-align:top;实现顶部对齐 <iframe height="265" style="width: 100%;" scrolling="no" title="float vs inlin

• Annual Summary 16-18

  Published:2018年1月23日 |  at 22:14

  16年毕业，初八就到了北京，人生地不熟，如何闲鱼翻身进大厂成为打工人呢。

• CSS 选择器

  Published:2018年1月15日 |  at 08:00

  ```css body { color: blue; } ``` ```css .btn { font-size: 14px; } ``` ```css .dialog .title {

• 2018 Web 开发实用指南

  Published:2018年1月1日 |  at 08:00

  偶然间看到的视频，视频中主要介绍现在的web开发比较常用的软件、框架（UI/JS）以及全栈工程师可以掌握的几个点。 <iframe style="margin: 0 auto;" width="560" height="315" src="https://www.youtube.com/embed/

• 前端基础设施 (Gulp)

  Published:2017年6月1日 |  at 08:00

  * 自动清除缓存，自动刷新，加速开发调试过程 [browserSync](https://www.browsersync.io/) or [browserSync国内](http://www.browsersync.cn/)

• jQuery 源码解读

  Published:2017年6月1日 |  at 08:00

  最开始用jQuery是在第一份实习工作时，那个时候感觉jQuery非常nb，$()选择器简直不要特别方便。 现在的工作中也一直在使用，不过在前端框架（Angular、React）异常崛起的现在，加之ES6标准的实施，

• jQuery 实践

  Published:2017年3月1日 |  at 08:00

  有个这样的一个需求，表格中有许多要输入的input，input有长度的控制，和数字控制。 开始想到的做法是用jQuery valudate，一个表单验证插件，后台考虑到表格中所有的input都要进行控制，而jQuery validate需要绑定id，或者每个input加上相应的类来控制，就会变得非常

• Bootstrap 入门

  Published:2017年1月1日 |  at 08:00

  <iframe height="265" style="width: 100%;" scrolling="no" title="bootstrap tooltip" src="https://codepen.io/llccing/embed/PooKqvM?height=265&theme-id=0