Writing / archive
Posts
Long-form notes on software, AI, research and the practical work of building systems.
Full archive
169- ai
LLM 时代，为什么值得为自己做一套工作流工具
Josh Morony 认为，在 LLM 让定制工具变得便宜之后，个人工作流应该优先考虑小而专用的本地工具。本文结合终端、GitHub PR 和第三方插件的取舍，讨论这件事为什么值得做，以及边界在哪里。
- angular
AI 开始写代码以后，Angular 还重要吗？
当 LLM 接管越来越多的代码输入，Angular、React 和前端框架的价值会如何变化？本文结合 Josh Morony 的文章，谈谈我为什么认同其中那种真实而克制的判断。
- ai
AI 写业务代码，我写约束
一个上线中的儿童识字应用，代码几乎全是 AI 写的。我在里面投入最多的不是代码，是一份 4KB 的约束文件。这篇讲那几条禁令分别防住了什么——每一条背后都是一段真实会丢数据的代码路径。
- ai
我用一个 Agent 翻译了 25 篇 Angular 文章
不是「我让 AI 帮我翻译了一篇文章」，而是把翻译这件重复劳动拆成一个可复用的 agent，然后批量交付 25 篇。这篇讲 agent 怎么设计、状态怎么管、质量在哪里掉链子，以及为什么这条流水线现在已经该停了。
- Self-hosted
第三步：给家庭服务器装上会自己长大的 AI 助理
前两篇把一台旧 Mac 变成了远程主机、跑起了全套服务，这篇是第三步：出门在外时，怎么用 Telegram 指挥这台服务器干活。拆解 Hermes Agent 的选型、出站轮询架构、以及国内网络环境下三个真实的坑。
- Mac
让家庭服务器按时睡觉、自动醒来：Mac 远程主机的生命周期管理
把 Mac 变成远程主机之后，如何用睡眠、唤醒、优雅停止、健康检查和异地备份，让 XindaRouter 每天按计划运行并在唤醒后自动恢复。
- architecture
把 Mac 变成远程主机：家庭服务器的完整架构拆解
一台没有公网 IP 的 Intel MacBook Pro，如何承载一套带数据库、缓存、私有 Git、监控和云端 IDE 的完整服务？这篇从一个真实部署出发，拆解 Cloudflare Tunnel、Colima、Docker Compose、LaunchAgent 等每个组件在整体架构里的作用。
- cloudflare
每天 90 亿次请求如何搬家：深入理解 cdnjs 迁移到 Cloudflare Developer Platform
从 cdnjs 的旧架构、五个痛点和一次失败回滚讲起，逐层理解 R2、Workers、Workflows、Queues、Durable Objects 与 Containers 如何共同承载每天 90 亿次请求。
- angular
十年 Angular 项目，团队分开后如何真正拆开代码仓库
一个运行十年的 Angular 项目已经按业务划分目录，但两个团队仍共同修改共享业务代码。如何拆成两个独立仓库，又不把人工协调变成包依赖和跨仓库同步？
- Angular
Daily Tech Insights
Daily technical note about Daily Tech Insights
- angular
[译] Angular v22 正式发布
Angular v22 正式发布！Signal Forms、Angular Aria、异步响应式 API 三大特性同步进入生产就绪状态，全新 @Service 装饰器、injectAsync、路由增强、模板语法大升级，以及面向 AI 时代的 Agent 工具链。
- javascript
[译] 任务、微任务、队列与调度
本文深入解析浏览器事件循环中的任务（macrotask）与微任务（microtask）的执行顺序，以及它们在不同浏览器中的调度差异。
- javascript
[译] 用约 200 行 JavaScript 构建响应式框架
用约 200 行 JavaScript 实现一个支持细粒度响应式的极简前端框架，探索组件模型、Signal、渲染器等核心概念。
- angular
[译] 触发变更检测，但不要太频繁
本文解释 Angular 中基于 zone 的变更检测为何会在微任务队列清空后触发，并说明为什么用微任务合并比多次 setTimeout() 更适合手动调度 CD 周期。
- angular
[译] CLDR：你的 locale 真相来源
CLDR 是 Angular 本地化格式的事实来源。本文通过真实 issue 演示如何判断显示问题到底是 bug 还是数据规范使然。
- angular
[译] 默认具备 Tree-shaking 能力
构建 Angular 库时，如何利用 providedIn: 'root' 与 useFactory 让抽象服务默认具备 Tree-shaking 能力，避免把未使用的代码带进最终产物。
- angular
[译] Resource: async loading with signals
谁说你需要效果？
- angular
[译] 了解 Angular 中的私有属性降级
以及有关 browserslist 和 Esbuild 集成到 Angular 的更多信息
- angular
[译] 用 input() 信号替换 @Input 设置器
了解输入设置器的注意事项
- angular
[译] v18 中的混合变更检测
无区域有助于基于区域。
- angular
[译] Angular 17.1 预览版中为所有人提供无区域变更检测
你准备好了吗？
- angular
[译] 模板中继器的默认性能
这是关于@for
- angular
[译] Angular v17 中变更检测的状态
全球本地化：全球化为本地化
- angular
[译] 信号和订阅
我需要取消订阅吗？
- angular
[译] ESBuild-based builder, to infinity and beyond
v17 构建者方面的新增内容
- angular
[译] 了解 Angular 的可延迟视图 - 第 1 部分。 2
里面的魔法
- angular
[译] Understanding Angular's deferrable views - Part. 1
@defer 是街区里的新酷孩子
- angular
[译] 延迟加载 Angular 的动画模块
主包中的内容减少了几 kB
- angular
[译] 在 Angular 中延迟加载服务并考虑测试
我们应该能够模拟我们延迟加载的内容
- angular
[译] 查找、调试并修复 Angular 中的内存泄漏
了解可帮助您调查内存泄漏的工具。
- angular
[译] Angular 声明式模板如何实现高性能渲染
本文从 Angular Ivy 编译产物入手，解释声明式模板如何通过创建/更新模式、节点复用、OnPush 与脏检查、以及插值记忆化来减少 DOM 操作。
- angular
[译] 理解 effect
本文介绍 Angular v19 中 Root effect 与 View effect 的差异、调度时机，以及它们在渲染与测试中的实际影响。
- angular
[译] Angular Input 与 Output 的不对称性
本文探讨了 Angular 中 input() 与 output() 看似对称却本质不同的设计：input 是基于状态的通信（信号），而 output 是基于事件的通信（Observable），理解这一差异有助于正确使用 Angular 的响应式原语。
- angular
[译] Signal 决策图
一张帮助你在 Angular 中选择合适的 Signal 原语的决策图。
- angular
[译] 无生命周期钩子的 Angular —— 使用现代 API 构建组件
探索如何使用 Angular 最新的信号（Signals）、DestroyRef、afterRender 等现代 API 替代传统的生命周期钩子，编写更简洁、可维护的组件。
- angular
[译] inject 函数不是服务定位器——除非你把它用成了服务定位器
深入探讨 Angular 中 inject() 函数与服务定位器模式的区别，理解注入上下文的基础原理，以及如何避免将 inject() 误用为服务定位器。
- vue
Signals 内在原理：从 Vue Reactivity 到 Angular Signals 的响应式编程统一模型
把 Vue 2/3、Angular Signals、Solid.js 与 TC39 Signals Proposal 放进同一张坐标系：依赖追踪、变化传播、副作用调度。理解不同框架响应式系统背后的共同模型，而不是只记 API。
- nodejs
Node.js 工程化 2026：告别 ts-node，原生 TypeScript 运行时时代已到
Node.js 已内置 Type Stripping，可直接运行满足条件的 TypeScript 文件；ts-node 不再是唯一选择。本文讲解现代 Node.js 项目结构、内置 TS 支持与其局限、Bun/Deno 的现实评估，以及 tsup、Vitest、zod 的最佳实践。
- react
2026 年 React 入门路线：抛弃 dva/umi，拥抱 React 19 + Vite + Ant Design 5
2019 年的 CRA + dva + umi 方案早已过时。本文给出 2026 年 React 入门的正确路线：React 19 + Vite + Ant Design 5 + Zustand + React Router v7，配合完整的工程化配置。
- vue3
Vue 3 六年回望：从 2020 年的激进 RFC 到 2026 年的稳健生态
Vue 3 从 2020 年发布到 2026 年已走过六年。本文回顾 Vue 3 的设计决策、生态演进、Vue 2 EOL 的落幕，以及 2026 年 Vue 生态的现实选型建议。
- vite
前端构建工具十年：从 Gulp 到 Vite，再到 Rolldown 的时代终章
从 2014 年的 Grunt/Gulp 任务流，到 Webpack 的模块打包时代，再到 Vite 的 ESM 革命和 Rolldown 的 Rust 重写——一篇文章看懂前端构建工具十年演化史。
- vitepress
VuePress 退场，VitePress 登场：2026 年技术文档站的最优解
VuePress 1/2 时代的终结与 VitePress 的崛起。本文详解 VitePress 核心优势、从 VuePress 的迁移路径、Giscus 评论系统接入，以及搜索、国际化、自定义主题等实战配置。
- ci-cd
从 Travis CI 迁移到 GitHub Actions：2026 年的前端自动化部署实战
Travis CI 曾是开源项目的 CI 首选，但 2021 年的收费政策变化让大量项目流失。本文详解如何把 .travis.yml 迁移到 GitHub Actions，并介绍 pnpm 缓存、Secrets、矩阵构建等实用技巧。
- monorepo
Lerna 已死，Monorepo 未亡：pnpm workspace + Changesets + Turborepo 实战
Lerna 2022 年停维护后，现代 Monorepo 的最优解是什么？本文手把手讲解 pnpm workspace + Changesets + Turborepo 的完整实战配置，以及如何从 Lerna 平滑迁移。
- angular
Zone.js 谢幕，Signals 登场：Angular 17-19 变更检测完全指南
深入讲解 Angular Signals 体系：signal()、computed()、effect() 的核心 API，Zoneless 模式的开启方式，以及如何将存量 Zone.js 组件渐进式迁移到 Signals 架构。
- oauth
从 OAuth 2.0 到 OAuth 2.1：PKCE、BFF 与现代前端认证的正确姿势
回顾 2020 年 OAuth 2.0 方案的安全隐患，深入讲解 OAuth 2.1 的核心变化、PKCE 流程、BFF 模式，以及如何用 NestJS + Passport 构建安全的现代认证网关。
- angular
Angular SSR、Hydration 与 BFF：从零理清架构知识点
Angular 的易混知识点
- angular
Angular 升级指南（三）：Angular 19-22 新特性详解
Angular 19-22 标志着框架的成熟期--Signals 全面稳定、Zoneless 正式落地、Signal Forms、Angular Aria 无障碍组件、默认 OnPush 等特性让 Angular 焕然一新。
- angular
Angular 升级指南（二）：Angular 16-18 新特性详解
Angular 16-18 是框架的变革期——Signals 响应式系统诞生、新控制流语法、@defer 延迟加载、esbuild 构建器、SSR 水合等重磅特性逐步落地。
- angular
Angular 升级指南（一）：Angular 13-15 新特性详解
从 Angular 13 到 15，框架经历了 Ivy 全面接管、Typed Forms、Standalone Components 等里程碑式变革。本文逐版本梳理每个新特性的使用方式与升级要点。
- http
HTTP/3 科普：QUIC、0-RTT、队头阻塞、连接迁移，一次讲清楚
从前端开发者的视角出发，系统讲解 HTTP/3 背后的核心概念：QUIC 协议、0-RTT 握手、队头阻塞、连接迁移，以及它对实际项目的影响。
- infrastructure
从自研到开源：使用 Prometheus 实现可扩展的网络探测与 HTTP/3 就绪
本文翻译自 Slack 工程博客，介绍了 Slack 如何从自研网络探测系统迁移到 Prometheus Blackbox Exporter，并扩展支持 HTTP/3 (QUIC) 探测的全过程。
- ai
AI 智能体能构建真正的 Stripe 集成吗？
本文翻译自 Stripe 官方博客，Stripe 构建了一个包含 102 个真实集成任务的基准测试，来检验 AI 编码智能体能否构建生产级别的 Stripe 集成。
- ai
One Month with OpenClaw - An Honest Review
After spending 600 RMB per month on AI tools for a month, here's what I learned about AI assistants and myself.
- english-learning
Daily English Reading: The New Era of Space Exploration
B2-level English reading about space exploration, Mars missions, and commercial spaceflight
- english-learning
Daily English Reading: The Future of Remote Work
B2-level English reading about remote work trends and digital collaboration
- english-learning
Daily English Reading: Mental Wellness in Modern Life
B2-level English reading about mental health and well-being in contemporary society
- english-learning
Daily English Reading: Green Technology and Sustainable Living
B2-level English reading about sustainable technology and eco-friendly lifestyle
- english-learning
Daily English Reading: Digital Privacy in the Modern Age
B2-level English reading article about digital privacy and data protection with audio narration
- english-learning
Daily English Reading - The Science of Sleep
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.
- english-learning
Daily English Reading - Digital Detox
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.
- english-learning
Daily English Reading: The Rise of AI Companions
B2-level English reading article about AI companions and how technology is reshaping human connection with audio narration
- openclaw
我的 OpenClaw 探索之路 - 从踩坑到真香
从「API 费用爆炸」到「订阅真香」——我是如何走上 OpenClaw 自托管之路的，以及这一周的实战记录
- english-learning
Daily English Reading: Climate Action in 2026: Progress and Challenges
B2-level English reading article about climate change and environmental action with audio narration and Chinese translation
- github
10年前端考古：从 Vue 到 AI，我的 GitHub 学习轨迹
回顾10年来在 GitHub 上留下的98个仓库，记录从 Vue 新手到 AI 全栈的成长历程。
- english-learning
Daily English Reading: The Science of Mental Wellbeing in Modern Life
B2-level English reading article about mental health and wellbeing with audio narration and Chinese translation
- english-learning
Daily English Reading: How AI is Transforming Our Daily Lives in 2026
B2-level English reading article about artificial intelligence with audio narration and Chinese translation
- short-story
五百年后，他生活在上海
一个「大话西游」式的现代都市短篇系列。五百年前他大闹天宫，五百年后他挤早高峰地铁、在出租屋里算外卖、在年会上抽到裁员通知。
- english-learning
Daily English Reading - Forever Chemicals
Today's B2 level English reading article about PFAS (forever chemicals) and their impact on health and environment, with audio and Chinese translation.
- english-learning
Daily English Reading - How Sleep Affects Your Brain
Today's B2 level English reading article about how sleep affects your brain, with audio and Chinese translation.
- english-learning
How to Nap Like a Pro - How to Nap
GQ Wellness article about how to nap properly.
- english-learning
English Teacher 4
跟着Roy学习英语已经有很长一段时间了，总的来说我的想法，菲教适合入门，开口，仅此而已。
- shanghai
One year in Shanghai
找到自己的舒适区，然后再稍微努力一点点。
- ai
work with AI
和 AI 一起工作。
- shanghai
Start from Shanghai
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
Angular Upgrade from 13 to 17
复杂的事情可以拆分小的任务，这样更具有可行性。
- ai
AI Changed My Life
ChatGPT彻底的改变了我的工作流程，成为了我的得力助手。
- reflection
Crowded Subway
用身体挡住别人，用手机遮掩尴尬，攒满一身的戾气，影响一天的状态。
- blogging
Blog in Progress
人生就是不停地折腾，向着更好的自己前进，直到自己累了。
- note-taking
兜兜转转记笔记
记得小学老师总是提到“好记性不如烂笔头”，我想我从中获益了。
- astro
探索 Astro：2024 年前端开发社区的魅力
第一次了解到 Astro 是通过一个Netfily 2023年12月的前端技术栈年度总结，发现它的使用占比升高了很多， 于是就比较好奇，究竟哪个特点吸引了那么多开发者使用它。 首先被它吸引是由于它做出来的网站样式非常酷，不得不说，作为前端我可能格外关注网站的样式。
- annual
Annual Summary 19-23
我的5家公司，我曾经走过的路，虽有坎坷，但总算收获不少。
- english-learning
English Teacher 3
截止到现在 2024年1月22日09:05:19，已经成功推荐5个学生（Conrad, Leo, Klay, A girl, Robert）跟Roy学习。
- english-learning
English Teacher 2
有时自己有种想拯救苍生的情节，那么就从身边的人开始。
- english-learning
English Teacher 1
有的时候过来人的一句话，就会对你的生活产生巨大的改变，感恩每个遇到的人。
- nestjs
[译] Passport 文档（四）操作
Passport 暴露一个 `login()` 函数在 `req`（也有 `logIn()` 这个别名）上，它能够在建立登录 session 时使用。 ```js
- nestjs
[译] Passport 文档（三）基本与摘要
连同定义 HTTP 的身份验证框架，[RFC 2617](http://tools.ietf.org/html/rfc2617) 也定义了基本和摘要认证方案。这两种方案都使用用户名和密码作为凭证来认证用户，并且通常用于保护 API 端点。
- nestjs
[译] Passport 文档（二）提供者
Facebook 策略允许用户使用他们的 Facebook 账户登录一个 web 应用。在内部，Facebook 认证使用 OAuth 2.0 进行工作。 Facebook 支持通过 [passport-facebook](https://github.com/jaredhanson/passpor
- nestjs
[译] Passport 文档（一）入门
Passport 是 NodeJS 的认证中间件。他的唯一设计目的是：验证请求。书写模块化的、封装代码是一种美德，所以 Passport 将除了验证请求之外的功能都分发给应用程序来实现。关注点分离使代码能够更加整洁、可维护，同时也使 Passport 能够极易集成到应用中。
- nestjs
Passport 相关汇总
权限管理是所有系统都会有的一部分，所以我们要了解一下 nodejs 中权限部分是怎么做的，都涉及哪些模块。 Passport 是一个简单、低调的 nodejs 身份验证中间件。它是弹性的、模块化的，能够集成到任何基于 express 的 web 应用。支持一系列权限策略：账号密码、Facebook、
- nestjs
OAuth 2.0 详解
OAuth 2.0 是一种授权机制，主要用来颁发令牌。 给快递员一个7天的授权码，这样不提供自己的密码即可让快递员进入小区，这样的授权机制是安全的，当时间到了之后如果仍然有需求可以二次授权，否则就自动过期
- angular
Angular 版本升级指南
- Removal of View Engine: Angular 13 fully transitioned to Ivy, removing the older View Engine, which simplifies the framework and improves performanc
- angular
Zone.js 原理
Zone.js, View Engine, and Ivy are all related to Angular, a popular web application framework.
- angular
Angular Ivy vs View Engine
view engine from Angular 2. ivy introduced in Angular 9. https://designtechworld.medium.com/ivy-compiler-vs-view-engine-b607c3897d3d
- angular
Angular 变更检测
浏览器渲染：模型 -> 视图。 模型可以是JavaScript中的原始数据类型、对象、数组或其他数据对象。视图可以是页面的表单、段落、按钮，这些页面元素使用 DOM 来表示。
- vue
Vue 3 对比默认构建包大小
2.0 项目创建 ```js vue create vue2-demo ``` 3.0 项目创建过程 ```js vue create vue-next-demo
- vue
Vue 3 新特性
1. 通过yarn dev构建好 vue.global.js 文件 2. 通过http-server或者类似工具，启动一个server环境。 3. 注意 index.js 中的内容和文章有出入。
- vue
[译] 2020 年关于 Vue 3 你需要知道的事
现在 VueJS 是最热的框架之一，它在2019的周下载量翻了一倍。 2020年Vue3发布时，它将更加流行。 现在Vue团队的重点在使它能够适合所有开发者，新版本将更强大、更有效率。同时有很多的内部优化将让我们用的更爽。
- vue
[译] Vue 3 的开发进展
来自重写中的下一个版本的 Vue.js 课程。 在去年，Vue 团队一直在 Vue.js 的下一个主要版本工作，我们希望在 2020 年上半年能够发布。（在写这篇文章的时候工作仍在继续）。在 2018 年底 Vue 新版本的想法就已经成型，当时 Vue 2 代码库已经有两年半的历史了。在通用软件的生
- angular
[译] Angular 拦截器的 10 种用法
有许多种方式使用拦截器，我确定我们大多数人使用的很浅显。在这篇文章中，我将介绍在 Angular 中我最喜欢的 10 种使用拦截器的方式。 我使例子尽可能的简洁。我希望他们能够启发你们去思考使用拦截器的新方式。这篇文章不是关于拦截器教学的，因为已经有很多好的文章了。但是，在开始倒数之前，让我们以一些
- javascript
[译] core-js@3, babel 展望未来
core-js@3 和 babel 补丁相关功能的重大变化详解
- nodejs
[译] Node.js 架构和 12 个最佳实践
虽然 Node.js 才诞生 11 年，但是已经是过去 10 年来最流行的 web 开发框架之一。我是一个终极粉丝，感谢 Node.js，让我能够在浏览器外部写 JavaScript 代码，去创建一个非阻塞的、流畅的、快速的、健壮的、可扩展的服务端应用程序。
- react
React + Ant Design 入门
要说为啥要学习React，可能是因为难以抗拒Ant Design的美。 根据Ant Design的文档，先尝试quick start，发现没有配置webpack等构件工具的情况下难以运行起来。所以从推荐的umi/dva/antd开始
- vue
[译] @vue/cli-plugin-typescript
翻译 @vue/cli-plugin-typescript README， [原 README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/README.md)
- vue
[译] @vue/cli-plugin-eslint
- **`vue-cli-service lint`** ``` Usage: vue-cli-service lint [options] [...files]
- vue
[译] Vue CLI 插件开发指南
已经提了 merge request [https://github.com/vuejs/vue-cli/pull/5345](https://github.com/vuejs/vue-cli/pull/5345)
- vue
Vue.js 深入响应式原理
```js <input v-model="message"/> export default { data(){ message: '' } } ``` 修改message的值，DOM就会改变，究竟如何做到的呢。
- vue
Vue.js 组件化
生命周期函数会被合并为数组。 这种合并思想值得借鉴，本身有一套默认配置，合并传入的配置，达到定制化的目的。 放一张经典的生命周期图 _init src/core/instance/init.js
- vue
Vue update 过程
```js src/core/instance/lifecycle.js src/platforms/web/runtime/index.js src/platforms/web/runtime/patch.js
- vue
Virtual DOM 详解
直接操作DOM会影响性能，所以才产生了虚拟DOM。 一个对象，两个前提，三个步骤。 Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM数的基本。
- vue
Vue render 函数
template ```js <div id="app"> {{ message }} </div> ``` render ```js render: function(createElement){
- vue
Vue 实例挂载的实现
Vue中我们是通过$mount实例方法去挂载vm的，$mount方法在多个文件中都有定义，如 ```js $mount src/platform/web/entry-runtime-with-compiler.js
- vue
new Vue 发生了什么
src/core/instance/index.js ```js function Vue (options) { if (process.env.NODE_ENV !== 'production' &&
- vue
Vue.js 数据驱动
Vue.js的核心思想是数据驱动。 视图是由数据驱动生成的，我们对视图的修改，不会直接操作DOM，而是通过修改数据。 - 简化代码量 - 利于维护 简洁的模板语法来声明式的将数据渲染为DOM：
- vue
Vue.js 从入口开始
``` src/platforms/web/entry-runtime-with-compiler.js src/platforms/web/runtime/index.js
- vue
Vue.js 源码构建
Vue.js源码是通过Rollup构建的，配置在build目录下。 使用Runtime only时，需要借助如webpack的vue-loader工具把.vue文件编译成JavaScript，因为这是在编译阶段做的，所以Runtime only只包含运行时的Vue.js代码，因此代码体积也更轻量。
- vue
Vue.js 源码目录设计
src下的源码 ```js src |-- compiler |-- core |-- platforms |-- server |-- sfc |-- shared
- vue
Vue.js 技术揭秘 - Flow
Flow是Facebook出品的JavaScript静态类型检查工具，Vue.js的源码利用了Flow做静态类型检查，当然新版的Vue.js中使用了TypeScript来做这个事情。
- nodejs
Egg.js 入门
``` npm init egg --type=simple ``` yarn init 不好使。 之前曾经在本地创建过mysql的环境，但是很久不用也就没有启动了，但是这次无论如何也不能成功启动起来。
- typescript
TypeScript 入门
JavaScript 类型化逐渐成为了主流。 - [ ] [文档学习](https://github.com/llccing-demo/Typescript-simple)
- threejs
Three.js 高级几何体
- ConvexGeometry 凸面体 - LatheGeometry 扫描体 - TubeGeometry 管状几何体 - ExtrudeGeometry 拉伸几何体
- sql
SQL 聚合查询 GROUP BY
五个常用的聚合函数 - COUNT - SUM - AVG - MAX - MIN - **计算行数** ```SQL SELECT COUNT(*) FROM `Product`
- sql
SQL SELECT 查询基础
```SQL SELECT * FROM Product; ``` ```SQL SELECT product_id AS '商品别名', product_name AS '商品名字',
- threejs
Three.js 几何体
**常见几何体** - PlaneGeometry 平面 - CircleGeometry 圆形 - ShapeGeometry 塑形 - CubeGeometry 立方体
- sql
SQL CREATE 建表
数据库选的是 MySQL，语法是 MySQL 语法。 ```SQL CREATE DATABASE shop; ``` ```SQL CREATE TABLE Product(
- threejs
Three.js 材质
简单材质 - MeshBasicMaterial 网格基础材质 - MeshDepthMaterial 网格深度材质 - MeshNormalMaterial 网格法向材质
- threejs
Three.js 光源
- Three.js库里有哪些可用的光源？ - 什么时候用什么样的光源？ - 如何调整和配置各种光源的行为？ - 如何创建镜头炫光？ - AmbientLight 环境光
- tooling
Webpack 学习笔记
书籍的作者是个[孩子](http://resume.wuhaolin.cn/)，像我一样的孩子，不过比我小一岁，大家同是16年毕业，人家是真的优秀。 这本书知识点是挺全的，就是过于简单，没有深入的内容，字里行间透露着青涩，像我一样的青涩。
- css
CSS Grid 布局详解
网格布局是最强大的CSS布局方案。 它将网页分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，也存在重大区别，
- misc
PAC 代理自动配置
Proxy Auto Config，代理自动配置，PAC 类似配置文件，通过这个文件，浏览器或者其他UA可以对每一个 URL 配置代理服务。 尝试的手机是 小米CC9 Pro，发现不太行，不生效，向参考文章中第一篇作者提问了，但是没有获得有价值的信息。
- tooling
VuePress 评论系统
没有评论的blog，不是一个好的blog。 当然vuepress是用来做产品使用文档的，而不是blog，所以自身就没有评论交互的基因在，但是这个可以改，已经有人提issue反馈这个问题了。
- interview
JavaScript 面试题集
```js a(typeof[1,2]); // object a(typeof 'string'); // string var f = true; a(typeof f); // boolean
- tooling
Lerna Monorepo 管理
:::tip 一个管理有多个包的JavaScript项目的工具。 ::: 主要是从 [vue-next](https://github.com/vuejs/vue-next) 项目了解到这个工具，并且发现 [vuepress](https://github.com/vuejs/vuepress) 这
- interview
CSS 面试题集
:::tip 利用CSS进行元素的水平居中，比较简单，行内元素设置其父元素的text-align:center，块级元素设置其本身的 margin-left和margin-right为auto即可。设置垂直居中则有些麻烦，现整理记录如下。
- vue
组件的重写
现在开发后台管理系统，你不用个组件库都不好意思跟人打招呼。 做了很多后台管理系统，并且一直和UI、测试同学，针对组件库的事甩锅给组件的开发者。 **甩** UI：“这个按钮太大了，改小一点。”
- tooling
Gzip 压缩优化
**gzip**是一种文件格式，也是用来压缩、解压文件的应用程序。这个程序是Jean-loup Gailly和Mark Adler创建的，它被用来替代早期Unix系统上的压缩工具，并且计划给GNU（GNU's Not Unix）用，“gzip”中的“g”就是来自GNU。
- vue
Vue CLI 2 迁移到 Vue CLI 3
- vue-cli3 已经升级到 webpack4，性能优化、构建速度提升。 - 将 webpack 的复杂配置隐藏到依赖中，减少复杂配置。 - eslint 配置，cli3 中加入了 Airbnb 等规则，这次构建使用了 Airbnb 的规则，使代码更加规范，同时会提升 js 的编写能力。
- tooling
Travis CI 持续集成
编码只是软件开发的一小部分，更多的时间往往花在构件和测试。 Travis只支持GitHub，不支持其他代码托管服务。 没有Travis CI的情况下，每次写完需要执行下列操作。
- architecture
前端架构演进
tips: 前端架构这个单词到底是什么，我迷茫了。 web front end architecture the structure of the web front end
- css
响应式 Web 设计
主要是应用在官网的设计， CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当浏览器窗口变化的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 定义浏览器的分隔点，可以参考bootstrap或者其他更细致的方案。
- es6
Promise 完全指南
异步编程的解决方案，比传统的回调函数和事件更合理和强大。 Promise 最早由社区提出、实现，ES6 将其写入了语言标准，统一了用法，原生提供了 Promise 对象。
- design-pattern
表单验证的设计模式
缺点： - 多人协作时，会覆盖。 - 创建了全局变量影响性能。 优点：避免了全局变量，一旦出现覆盖现象，会全部覆盖。 问题：当别人想用你的方法时，不能复制一份，或者说别人不能通过new的方式继承这些方法。
- es6
Generator 异步应用
异步操作，一个任务不是连续完成的，先执行一段，转而执行其他任务，等做好了准备，再回过头执行第二段。 ES6之前的异步操作，大致以下四种： - 回调函数 - 事件监听
- design-pattern
面向对象编程 OOP
:::tip 面向对象编程（Object-Oriented Programming） ::: 这样将我们将要用到的属性和方法都封装到抽象的Book类里面了,当使用功能方法时,不能直接使用Book类，需要使用new关键字来实例化新的对象。
- design-pattern
设计模式开篇
Singleton 单例模式 Abstract Factory 抽象工厂模式 Builder 生成器模式 Factory Method 工厂方法模式 Prototype 原型模式
- es6
Generator 函数详解
Generator函数是ES6提供的一种异步变成解决方案,语法行为与传统函数完全不同。 Generator函数有多种理解角度，语法上，可以将Generator函数理解为状态机，封装了多个内部状态。
- es6
ES6 函数的扩展
- 函数参数的默认值 ```js // demo1 // ES5 function log(x, y) { y = y || 'World'; console.log(x, y);
- algorithm
排序算法详解
```js /** * 冒泡排序 * 入门级排序 * * 2018年09月16日23:14:17 */ let a = [123, 3, 3, 0, 31, 23, -12, 898, -2, 4, 5, 1, 2];
- javascript
Drag & Drop API
<iframe height="265" style="width: 100%;" scrolling="no" title="js-basic-drag" src="https://codepen.io/llccing/embed/GRRePmw?height=265&theme-id=defau
- javascript
Cookie 详解
一个cookie就是存储在用户浏览器中的一小段文本文件。cookie是纯文本的形式。浏览器将其储存并且根据一系列规则在每个请求中将该信息返回致服务器。web服务器可以用cookie来识别用户（定向投放广告）。多数需要登录的站点通通常会在认证通过后设置一个cookie，之后通过这个cookie做校验。
- javascript
计算盒模型的各种尺寸
上来一张图 offsetWidth/offsetHeight 返回元素的宽度/高度，不包含滚动内容的宽度/高度包括元素的边框、内边距和滚动条。 offsetLeft/offsetTop
- javascript
AJAX 详解
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
- javascript
arguments 对象
箭头函数中不可用，可以使用arguments对象在函数中引用函数的参数。 <iframe height="265" style="width: 100%;" scrolling="no" title="js-basic-argumetns" src="https://codepen.io/llcci
- javascript
apply 与 call
call方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。 apply使用一个指定的this值和一个参数数组或类数组来调用一个函数。 这两个函数的第一个参数都是指定的this值，apply的第二个参数是array，而call的第二个到第N个参数就是第二个到第N个参数。
- es6
Set 与 Map 数据结构
ES6新提供的数据结构Set。类似数组，但是所有成员都是唯一的，没有重复值。 属性 - Set.prototype.constructor: 构造函数 - Set.prototype.size: 返回实例成员总数
- es6
ES6 对象的扩展
ES6 允许直接写入变量和函数，作为对象的属性和方法，这样的书写更加简洁。 ```js var foo = 'bar'; var baz1 = { foo }; console.log(baz);
- career
前端工程师的职业规划
1. 分级：初级、中级、资深、架构师、项目负责人 2. 能力层次： 前端能力（50%），后端能力（25%），业务能力（25%）T字型。 3. 综合素质：软技能、项目经验，沟通组织
- es6
ES6 字符串的扩展
- 字符的 Unicode 表示法 - codePointAt() - String.fromCodePoint() - 字符串的遍历器接口 - at() - normalize()
- css
rem 适配方案
rem和em都是相对单位，CSS3引入rem。 :::tip em作为font-size的单位时，代表父元素的字体大小。**em作为其他属性的单位时，代表自身字体大小。**
- es6
let 和 const
```js 'use strict'; { let a = 10; var b = 1; } console.log(a); // Uncaught ReferenceError: a is not defined
- css
常用的布局实现
- 左右布局 - 上左右布局 - 上左中右布局 <iframe height="265" style="width: 100%;" scrolling="no" title="layout-float" src="https://codepen.io/llccing/embed/vYYyoQM?he
- css
inline-block 详解
1. 能够设置宽高 2. inline-block各个元素，高度不同时，以文本基线对齐，通过vertical-align:top;实现顶部对齐 <iframe height="265" style="width: 100%;" scrolling="no" title="float vs inlin
- annual
Annual Summary 16-18
16年毕业，初八就到了北京，人生地不熟，如何闲鱼翻身进大厂成为打工人呢。
- css
CSS 选择器
```css body { color: blue; } ``` ```css .btn { font-size: 14px; } ``` ```css .dialog .title {
- web-development
2018 Web 开发实用指南
偶然间看到的视频，视频中主要介绍现在的web开发比较常用的软件、框架（UI/JS）以及全栈工程师可以掌握的几个点。 <iframe style="margin: 0 auto;" width="560" height="315" src="https://www.youtube.com/embed/
- tooling
前端基础设施 (Gulp)
* 自动清除缓存，自动刷新，加速开发调试过程 [browserSync](https://www.browsersync.io/) or [browserSync国内](http://www.browsersync.cn/)
- javascript
jQuery 源码解读
最开始用jQuery是在第一份实习工作时，那个时候感觉jQuery非常nb，$()选择器简直不要特别方便。 现在的工作中也一直在使用，不过在前端框架（Angular、React）异常崛起的现在，加之ES6标准的实施，
- javascript
jQuery 实践
有个这样的一个需求，表格中有许多要输入的input，input有长度的控制，和数字控制。 开始想到的做法是用jQuery valudate，一个表单验证插件，后台考虑到表格中所有的input都要进行控制，而jQuery validate需要绑定id，或者每个input加上相应的类来控制，就会变得非常
- css
Bootstrap 入门
<iframe height="265" style="width: 100%;" scrolling="no" title="bootstrap tooltip" src="https://codepen.io/llccing/embed/PooKqvM?height=265&theme-id=0