评测驱动的刻意练习
最近在复盘 AI Coding 的 Prompt 质量，过程中发现一个问题：我一开始很容易把结论推得太满。
思考
共 70 篇文章。
Pretext深度解析
https://github.com/chenglou/pretext !Pretext 学习从隐藏结构到表征的机制
浏览器渲染性能优化
在高性能前端开发（尤其是涉及 WebGL、大量 DOM 标注的场景）中，理解浏览器的渲染流水线（Rendering Pipeline）是性能优化的基石。本文将结合实战案例，深入探讨如何利用渲染逻辑和 Chrome DevTools 解决页面卡顿问题。
技术拆解-remotion
https://github.com/remotion-dev/remotion
可视化能力构建
第一部分是关于组件能力。我们提供了许多可视化组件，主要落地在公司to B和to C的业务中。业务方通常在我们的平台上进行一站式的可视化配置，完成后以代码形式将这些组件应用到他们的项目中。此外，我们对这些组件进行了上层封装，提供不同主题以适配各业务线，比如海外业务线、首长的业务线、资讯业务线等；同时也
Debug-HXKLine在低端机型卡死
如何避免上来就钻入细节，这里有2个技巧： - 先逮着问题反馈方，问10个问题 - 自己反复使用和测试出问题的页面，详见下一个章节 ### 没有明确现象和问题的范围域 >排查问题和架构设计一样，都应该遵循这个原则：自顶向下，逐步求精。
datav服务端改造方案
本文档旨在分析当前后端项目的结构问题，并基于领域驱动设计（DDD）思想，提出三种可行的重构方案，以提高项目的模块化、内聚性和长期可维护性。
如何突破前端发展的困境
前端不会突然消失，但只会堆页面、追框架的人会越来越被动。更现实的出路，是把业务问题往架构、组件、工具和可衡量价值上推。
技术拆解-PacificVis2025的状态管理与事件机制
本文档分析了 Pacific Vis 2025 可视化项目中使用的状态管理和事件系统模式，并将其与传统的 Flux/Redux 架构模式进行比较。
技术拆解-Recharts
这篇最有价值的地方，是用源码证据把 Recharts 的架构讲清楚：它更像一个 Redux 驱动的可组合声明式图表库，而不是一个可以随手套上“微内核”名词的系统。
招聘成本问题与内向型招聘策略
您提出的关于成本和精力投入的顾虑非常实际，尤其对于一个精干的小团队来说。这确实是推行任何新战略时需要优先考虑的核心问题。让我们来深入探讨这两个方面，并为您提供一套适合小型团队、低成本且高效的执行方案。
可视化业务开发框架解析
一般是把2、3、4提出来做个链接，其目的是为了解决查询、管理问题，提高可维护性，可以理解为是一个微型数据库，算是个cache。
可视化项目架构分析
常规的前端开发，大家借助 Vue/React 等框架，可以极大的提升开发效率和质量，这些框架本身就融入了前端的架构设计在里面，也就是定义了一套程序设计的原则和约束，因此才能保证非功能需求的质量。
Prompt-定制化可视化组件
您是一位资深的前端架构师，专门负责设计企业级数据可视化组件。请基于以下完整的架构指导，为用户设计一个高度定制化、可维护、高性能的单体可视化组件。
VISALL组件库的微内核架构分析
VISALL这个项目本身是基于微内核架构去设计的，但是随着多次版本的迭代，功能越来越多，其架构已经存在一些偏离了,因此准备对其进行系统的分析，找出里面存在的问题，然后我们计划对其进行一次重构。使其更加符合微内核架构的设计理念，以增强其程序质量和可维护性、可扩展性。
OpenDeepWiki的文档生成策略
OpenDeepWiki 是一个基于 .NET 的智能文档生成平台，采用模块化管道架构，主要组件包括：
InversifyJS重构3D项目
Pacific Vis 2025 是一个基于 Three.js 的复杂数据可视化项目，用于展示全球女性投资者相关的社会经济数据。随着项目复杂度的增长，我们面临着严重的架构问题：循环依赖、手动依赖管理、模块间耦合度过高等。本文将分享我们引入 InversifyJS 进行重构的真实经验，包括具体的代码对
从J2EE思考可视化的基建该如何建设
在当今数据驱动的时代，可视化系统已成为企业决策和用户体验的核心组成部分。然而，构建一个健壮、可扩展的可视化平台并非易事。本文将借鉴J2EE（Java 2 Platform, Enterprise Edition）的架构思想，探讨如何构建现代化的可视化基础设施。
AI时代架构师的核心职责
AI 的普及并未削弱架构师的价值，反而要求其从 "代码编写者" 转向 "全局掌控者"，核心职责主要体现在需求与架构的翻译、质量与效率的守护、团队协作的枢纽这几个方面。
技术拆解-时间轴曲线组件
这是一个基于 Stencil 框架的高级时间线组件，实现了蛇形布局和复杂曲线连接效果。组件使用 SVG 遮罩技术、多层渲染架构和渐变色系统，提供了专业级的可视化体验。
一个思维惯性导致的问题
最近的资讯可视化项目，在将测试页面部署到服务器的过程中，我遇到了一些问题，现在记录下来作为经验总结。
本地依赖分包踩坑经历
最近在 HIVIS 可视化组件库项目中，我们遇到了一个典型的本地依赖分包问题。这个问题看似简单，但背后涉及到了现代前端工程化的诸多核心概念：模块解析、构建系统、依赖管理等。
Chrome插件开发技术选型
在过去的几周里，我和我的团队深度参与了一个 Chrome 插件开发项目，从最初的技术选型到最终的 POC 验证，踩了不少坑，也积累了一些经验。今天我想把这些经验分享给正在考虑 Chrome 插件开发的你。
技术拆解-如何编写书签管理的Obsidian插件
最近在使用 Obsidian 做笔记管理时，发现一个痛点：虽然 Obsidian 内置的书签功能能收藏重要文件和文件夹，但访问起来不够便捷，特别是当项目文件越来越多的时候。于是我们决定开发一个书签管理插件，通过一个优雅的仪表板界面，让用户能够快速访问收藏的文件夹、笔记和最近打开的文件。
Gemini CLI 源码分析
不过目前使用起来，感觉还不达成熟。不过因为是开源的，估计过一段时间会好很多，可以当成一个储备的工具先关注着。 目前的重点，还是借助其源码，学习一下AI CLI的实现思路。
技术拆解-大事标记折线图
// - 自定义标记图元（dvMarker，显示事件详情）
FFCreator学习笔记
一些registry.m.jd.com的包报502，但是没管也能继续跑。 ## 依赖 Node版本：v18 ## 技术拆解
LLM开发经验
LLM 适合做的两种事情：抉择+多样性(比如：生成搞笑的风格)。
AI项目开发总结-叙事可视化
比如动画类型。 之前东明的可视化推荐也是这个问题，搞了很多图表，但是场景无法命中。
技术拆解-Mermaid
D3.js 可以参考饼图的代码： mermaid/packages/mermaid/src/diagrams/pie/pieRenderer.ts
D3.js-现金流动态瀑布图
并且y轴的刻度范围是根据当前展示的5个数据来设定的，当前展示的5个数据的最大值和最小值作为y轴的刻度范围。 Y轴的刻度范围也是随着动画的播放而动态变更的。
排查动态柱状图的动画问题
我们基于 ECharts 的竞赛图 封装了一个动态柱状图组件，用于对多周期数据进行动态展示。这是之前的同事封装的，现在业务上线之后，发现当本周期有新数据出现时，效果非常差：
技术拆解-叙事流程图
抽象出了FlowchartStore这个 store 类，提供数据结构和响应的数据处理方法。
技术拆解-3D生长树
此代码实现了一个 3D 生长树效果，使用 Three.js（7.1 版本）进行 3D 渲染。主要思路分为以下几个部分：
AI游戏助手
https://claude.ai/chat/640507fe-f354-48ef-bdcf-f8a6ab4f289a
技术拆解-贪吃蛇
self.bordersize = 20 self.displaywidth = self.width + 2 self.bordersize self.displayheight = self.height + 2 self.bordersize + 40
前端的架构设计
https://www.zhihu.com/question/26646855/answer/68503768
移动端initial-scale导致图表文字过小的问题
投顾部门用到了我们的可视化图表库D3Charts，发现在iOS下文字会变得很小。
可视化组件的状态管理
这里的交互指的并不一定是常规的鼠标交互行为，其代表的是我们将一种事物变更为另一种状态的行为，例如一个列表中文本的搜索、筛选高亮，交互则指的是搜索和筛选的这两种用户行为。
Vue3学习笔记
写代码也更倾向于函数式编程，减少了状态的随意传递，后续维护性会更好一些。
OpenGL学习笔记
名词部分，可以参考WebGL Fundamentals。
牛逼的前端是什么样的
https://2022.stateofjs.com/zh-Hans/
组件与数据流
https://zhuanlan.zhihu.com/p/26426054
WebGL学习笔记
https://www.cnblogs.com/wanbo/p/6754066.html
技术拆解-3D饼图
https://threejs.org/docs/index.html?q=line#manual/en/introduction/Drawing-lines
如何正确的理解技术
这篇文章的起因是最近我在学 Three.js 的时候发现了一个现象：以前我看 Three.js 的书很懵，很多 3D 和图形学的概念看不懂；最近补了一些计算机图形学的基础知识后，回头再看 Three.js 的最后两章，根本不用调试代码，很快就看过去并理解了。
智能短视频-组件设计
比如我们的D3Charts，就是一个组件库；而其他零散的组件，比如动态折线图、柱状图这种，并不算是组件库。
2021读书计划
2020年读的书太少了，读书计划也没有完成。2021继续加油！
技术拆解-时间轴折线图
http://jira002.iwencai.com:8080/browse/DATAV-2055
Flutter安装笔记
我平时喜欢看小说，但是现在的小说APP广告太多了：启动应用有广告，从其他APP切换回来又有广告，体验很不好。因此我想自己写一个简单的文档阅读APP。考虑到现在Flutter挺火的，就准备用这个试一试。因此这里记录下安装Flutter的过程中遇到的一些问题。
动态视频自动生成方案
https://hanabi.data-viz.cn/index?lang=zh-CN
制作Node项目的docker镜像
最近一个项目需要在服务端用到无头浏览器puppeteer，这个工具对于node版本有一定要求，而我们目前的线上node镜像是8.9版本的，无法支持该无头浏览器，因此需要升级node，重新制作镜像。
制作基于CentOS7的Node镜像
前几天基于CentOS6.9的镜像安装无头浏览器Puppeteer，装上后问题很多，无法成功运行，装好这个依赖发现又缺少那个依赖，依赖全部装完后又提示版本不兼容。最终我还是选择放弃CentOS6，改为升级到CentOS7来构建Puppeteer的镜像。
工作乐趣的丢失
我工作已经有九年半了，在此期间，也经历了国内互联网行业的各种变更。总体的感觉，大家在工作中的乐趣正一点点的丢失。造成这个问题的原因有很多，我按照自己的想法总结了下：
数据可视化的TOP10需求
这里的TOP10需求，是我们整个组的，不一定就是可视化相关的需求，因此提效方面的内容也是可以加进来的。
关于2020上半年工作汇报的思考
给基金团队带来多少帮助？ 给资讯团队带来了多少帮助？ 给 F10 带来了多少帮助？ 他们本来开发一个项目要多久，现在由于我的加入，需要多久？
D3Charts-日历图的实现原理
component下的calendar的代码，并没有实现散点图的功能。
疫情地图开发总结
在一知半解的情况下，凭感觉去评估难度、工作量和时间，结果很多细节上的问题都没考虑，估算的时间可能只有真实工作量的三分之一(甚至更少，比如这次我预估半天不到就能搞定，结果搞了整整两天，且第一天还是三个人一起搞)。
2020读书计划
PS：标题为<span style="color:red">红色</span>的书籍，是我还没看完、但是后面会继续看下去。
《阿里巴巴中台战略思想与架构实战》读书笔记
公司在金融市场发展到现在，接下去的路可能是如下三方面(都是营造差异化的竞争力)： 1、中台战略：借助中台，快速试错、大量试错，不因为开发、效率等问题放过任何一个创新点，找到创新点进行突破 2、可视化战略：视觉、交互的升级，公司发展到一定阶段，这部分内容的重要程度会越来越高 3、技术战略：通过AI技术
近期写总结计划过程中的一些想法
企业最关心的（或者说唯一在乎的）事情，就是增加收入、降低成本。 企业实际上需要的不是程序员，而是能够帮助它们增加收入、降低成本的人。 企业雇佣你，是为了让你帮它们完成某个可以增加收入、降低成本的项目，而不是为了让你追求个人的软件成就。
2019读书计划
工作这么多年，一直都没有读书计划。今年因为一些工作上的原因，迫切的感觉到了读书的重要性，因此这里列下我的读书情况，等到年末回头再检验下。
对数
最近有一个需求，要展示某人整个人生阶段中，每一年的支出数据。假设这个人的支出信息如下(为了简化理解和作图，只罗列5年数据)：
FreeCodeCamp学习笔记
记录我通过FreeCodeCamp学习前端技能的一些经历和感想。
CSS学习笔记
记录一些常用的CSS技巧
《管理自己》读书笔记
这是我最近看到的一篇文章，里面的内容恰好和我当前遇到的问题契合度很高，看完感触颇多。
通过XHProf排查PHP代码的性能问题
昨天头儿反馈wiki系统不能用了，晚上我用请求日志里面比较慢的请求重试了下，请求起来都比较快；从zabbix监控和数据库的日志来看，问题时段也没有发现异常，暂时无法定位具体原因。
PHP5加载文件耗费CPU和内存过高的问题
经过检查，排除了1和3，最终发现有两个问题： 1.指标评测会将请求结果先写入本地文件，然后再读取本地文件解析入库，这些本地文件最大的达到了37M 2.程序存在BUG，当计算没有完成时，会不停的重复解析本地文件，执行数据库读写操作 ## 解决方案 死循环问题好解决，修复程序就可以了 本地文件的
近期的产品性能问题及解决方案
解决： 1.首页开启GZIP 2.将定时刷新的请求进行拆分
网站流量统计与问题排查
当时没有先猜原因，而是先从 nginx 访问日志里确认到底是谁在吃流量，再按类型处理：能压缩的压缩，能缓存的缓存，返回了冗余数据的就减少返回内容。下面记的是当时实际遇到的问题、解决步骤和用到的排查命令。