网站架构改版

2024年2月17日，对系列文章的网站架构进行重大改版，因改动之处较多，工作量巨大，特做系列文档重构备注。

已完成：

1. JavaScript编程语言参考
2. Graphviz入门教程
3. NetBeans专题 （table中的pre的排版问题涉及不少细节，值得列个专题）
4. WebGL入门教程
5. Mermaid入门教程
6. Web Components参考
7. CSS参考

11月21日，支持多级嵌套的对象属性。

2026年1月28日，鉴于Safari, Chrome等主流浏览器已无一再支持section之下的h1的文档大钢算法 (document outline algorithm)，故专门编写header-font-size.css，以避免各浏览器的用户代理样式单处理不一致的问题。

SVG 2.0
参考

2024年7月5日，加入SVG参考。

2026年1月2日，添加在SVG中引用变量。1月4日更新。

1月4日，修订绘制SVG基本图形，详细阐述了绘制虚线参数，并且当将虚线描边应用于绘制圆上时，产生了意想不到的效果。并在此基础上制作动画。

1月5日，添加使用 g 元素分组，分类说明使用g可以达成的效果。

1月6日，修订SVG基础，详细而全面地列举了如何确定svg尺寸大小的所有场合。

1月7日，SVGGrid增加对svg的viewBox的支持，添加SVG Playground，以方便测试、调试各种SVG源代码。

1月8日，添加应用技巧篇中的使用 path 绘图，详细解析绘制飞机、回形针及放大镜的核心细节。

1月12日，修订SVG Paths，通过表格全面总结path的d属性的所有子命令的语法及使用方法。

1月16日，修订SVG Paths及使用 path 绘图，给出如何根据一个圆的半径来求出c命令中的Y轴偏移值的公式，以便利用c命令来精准地绘制一个半圆圆弧，并依此绘制逼真的阴阳鱼图形。

1月19日，修订坐标系，添加preserveAspectRatio属性值为meet的内部算法。

1月20日，修订使用 path 绘图，添加新图形。

1月20日，添加Configurable SVG Grids，通过完全手工精准控制比例转换，将两套坐标系合二为一，故在非常小的viewBox范围内，仍能清晰地使用背景网格的辅助功能。21日，可通过界面设置网格，以及手工输入path元素的d属性值。22日，在界面中可对标尺间距进行设置。24日，加入应对min-x及min-y非零值的情况。

1月28日，修订SVG基础及Paths，讨论了各浏览器在实现SVG 2.0规范时的不一致性，同时给出应对所有浏览器的方案。

1月11日，全面改写SVG Path Editor，全线支持path的d属性的所有子命令（包括使用相对值的子命令），拖动整个路径图形后在完全遵从原命令格式的基本上根据是否使用相对值来自动更新各子命令的数值。加入预加载特定数据的功能。

• 13日，完成各子命令的交互圆圈节点拖动的重构。
• 14日，拖动圆圈节点时在自动构建的字符串中高亮显示正在发生变化的数值。
• 17日，高亮显示鼠标悬停的各种类型的边界线。
• 18日，可直接编辑d属性值，按TAB键确认输入，后续再拖动节点以调节参数。对于程序员来讲，这是最便捷的修改方式。
• 25日，修正A, a命令中当参数类型为boolean时不能正确转换数值的问题；修正因编辑框中自动输入诸如&nbsp;, <br>等特殊文本而导致文本解析错误的问题。
• 26日，修正当选择path时直接选中circle而导致不能正确触发path的mouseup事件的问题。
• 27日，加入对viewBox的支持，当前设定为0 0 30 30，故能完美操控超小型图像。保留转换过程中的浮点数，但显示为整数。
• 28日，使用CSS来设置SVG各元素的呈现属性值，控制点的虚线根据viewBox的设置自动转换。

Web组件功能更新

1. 2024年2月18日，trim-pre组件添加对white-space属性的监听功能，以允许在按默认配置创建实例后再根据当前页面的需求，对其中一部分组件进行更精细的调节。
2. 2月19日，graphviz-editor组件添加default-settings属性，以提供暗黑模式的默认值。
3. grv-fig组件
   • 2月20日，创建轻量级grv-fig组件，从而实现在HTML网页中以最快捷的方式直接绘制各类图表。具体运用参见正则表达式。
   • 21日，加入custom-style属性以灵活指定自定义的CSS文件。
   • 23日，加入亮色主题切换功能。查看演示。
4. 3月30日，添加CanvasEditor组件。
5. 4月1日，对live-editor组件作了大幅修改，增加多个钩子方法。canvas-editor组件得以率先使用这些特性。参见CanvasEditor Test。
6. 4月2日，添加CopyEditor Utils组件，用于将特定内容快速地复制到剪贴板中。适合于桌面编写代码时使用。
7. 4月5日，LiveEditor完善了Console输出，并添加切换显示、隐藏Console区域功能。
8. 4月6日，CanvasEditor组件添加自动应对高分辨率设备功能。
9. 4月16日，CanvasEditor组件添加背景网格功能。
10. 5月9日，LiveEditor增加了JavaScript定制功能。
11. 7月4日，添加SVGEditor组件。
12. 2025年3月20日，LiveEditor增加自动设置输出面板高度的功能。
13. 3月27日，LiveEditor支持将调用者的相对路径自动转换为其绝对路径。
14. 3月30日，LiveEditor支持内置的PageConsole。
15. 4月10日，LiveEditor默认支持本站丰富的CSS样式。支持颜色主题切换，目前绑定为暗黑主题样式。
16. 4月11日，PageConsole修正内置的Treeview控件在显示时有瑕疵的问题，并加入导入第三方代码的功能。
17. 4月21日，LiveEditor添加新的钩子方法doAfterApplyHTMLFromTab，以供子类SVGEditor使用。
18. 9月5日，添加High Lighting all TrimPres in a Page，可在同一网页中自由、灵活、充分地组合使用各种trim-pre标签。9月21日，加入自动高亮、自动运行Mermaid代码、自动响应颜色主题的功能。
19. 9月23日，更新EscCode Demo，esc-code标签增加应对误识标签的功能。
20. 9月27日，High Lighting all TrimPres in a Page集成渲染Graphviz V14.0.0 的功能。
21. 12月7日，实现HexInput。
22. 12月13日，大幅重构LiveEditor的管道架构，使用MutationObserver动态监控所有图像的加载并在加载完毕后向宿主发送消息，使得输出面板在计算自动高度时支持图像的动态加载。并随之更新GrpahvizEditor及WebGLEditor。
23. 12月14日，LiveEditor以同步的方式响应iframe的load事件，且除了使用标准的HTML, CSS及JavaScript标签页外，允许用户自定义标签页及其内容，用户可在子类的doBeforeApplyJSFromTab钩子方法中，在运行标准JavaScript代码之前，读取并应用自定义内容。WebGLEditor应用了这些特性。
24. 12月28日，联调修正SVGEditor设置自动高度的问题。29日，精细规划应对不同场合，以达到编写代码简便及运行效果最佳之间的平衡。在此基础上，逐项检查SVG 参考的各个章节内容。
25. 2026年1月1日，为MermaidEditor及GraphvizEditor的输出面板设置自动高度，每个编辑器输出面板的高度可随编辑内容的修改予以动态精准调整。
26. 1月6日，SVGEditor添加背景网格功能。

CSS
参考

2024年2月26日，散落的CSS文档有了归宿，开始集成为系列文章CSS参考。

3月18日，加入工具色轮。

2025年1月3日，添加Webkit CSS Demos。

2月10日，添加CSS Table。3月10日修订。

2月25日，W3C发布CSS Snapshot 2024。本站随之更新CSS概述。

3月3日，开始整理添加CSS Grid2 Examples。

3月5日，CSS前沿阵地加入@support。

3月6日，修订CSS Colors。4月10日修订。

3月7日，在CSS Animations添加实现图像轮播。

3月9日，添加CSS Backgrounds。3月11日修订。

3月12日，添加按比率最大化缩放子容器。4月8日修订。

3月13日，添加CSS Transforms。

3月14日，添加CSS 新特性。

3月15日，添加CSS 通用技巧。

3月19日，添加 Tutorials 系列之Mac风格暗黑菜单。

3月27日，添加亮色主题设计演示。

3月27日，重新全面设计Unicode 查询表的版面，自动响应操作系统颜色主题变化，添加放大显示鼠标悬停所在字符的功能，同时纳入BMP平面外的麻将拼图及扑克牌的字符集。

4月7日，添加设置列表样式。4月10日修订。

4月14日，添加CSS Writing Modes。对于中华古代诗词及古籍的展现，效果无可伦比。15日修订。

4月18日，修订CSS Animations。

4月19日，添加CSS Masking Module，轻松实现各种图形的布尔运算。

11月14日，添加Manipulation of CSS With JavaScript，22日修订。

11月30日，添加CSS Transitions。

【重磅消息】9月18日，W3C发布CSS Snapshot 2025。

12月9日，将原来的内容较多、篇幅较长的教程CSS Grid整合进CSS参考中，并进行逐节修订。对于过长文档来说，自动生成全文纲要的功能不可或缺，在阅读时可有效避免只见树叶、不见森林此一叶障目的弊端。12月10日修订。

12月18日，修订CSS亮黑主题切换，添加使用Nested CSS来实现类似于light-dark函数效果的内容。

12月21日，修订垂直水平居中标签。

12月22日，修订CSS Buttons，阐明了设置一个精致按钮的基本步骤。

12月23日，添加Editable Styles，让用户在线修改CSS样式。

12月27日，添加CSS Polygons，使用CSS绘制各种基本几何图形。31日，加入调用CSS函数直接绘制图形的内容。2026年1月1日，涵盖了所有的基本图形。

JavaScript
参考

2023年10月15日，开始将散落的JavaScript文档集成为JavaScript参考。

2024年2月25日，更新WebAssembly 快速入门。

3月6日，修订正则表达式多个章节，由此本部分的主要内容已均有涵盖。

3月6日，在线正则表达式上线。每次输入均能立即动态依序加亮显示所有的匹配结果。使用Web Worker技术，主线程无阻滞。支持HTML转义。

3月17日，添加数组方法分类索引。

4月9日，更新Web Workers。

11月5日，添加Proxy。

11月6日，添加键盘事件，以及JS类库。

11月9日，更新WebAssembly 快速入门，以及键盘事件。

11月13日，修订WebAssembly 快速入门，WebAssembly成为独立的专题，且NetBeans一键运行实现更便捷的方式。

11月15日，添加Wasm Text。2025年1月12日修订。

11月19日，添加xterm.js。24日修订。

11月26日，初步实现一个PageConsole，将终端请至Web页面。

11月30日，修订Object一章中的遍历对象属性。

12月8日，更新处理二进制数据。

12月21日，将MDN Streams Examples转制为在本站可运行及查看源代码的demos。

12月25日，更新Stream。

12月28日，更新URL，以及fetch函数。2025年8月26日，添加使用fetch加载JavaScript文件的内容。

2025年1月2日，更新Service Workers。

1月4日，PageConsole开始按Web标准Console Standard予以实现。4日实现格式化字符串；6日实现分组；8日实现表格及断言；9日实现error, info, 及warn。

1月8日，添加HTML Table DOM。

1月12日，添加Wat to Wasm，简单、直白地在线编译并运行Wasm Text。23日修订。

1月17日，更新Wasm Functions。

1月24日，更新Floating Numeric Instructions。

1月28日，更新程序流程控制指令。

1月30日，添加各种进制工具类。2月6日，经综合比较二进制的原码、反码及补码的特点及优劣后，舍弃了JavaScript的默认算法，改用二进制原码来表现负数的二进制。

2月8日，更新Wasm Memories。

2月9日，修订Numeric Instructions，加入值域一节。

2月16日，更新Vector Instructions。

2月16日，添加数值的表示与转化。

2月18日，应用编译原理相关理论，开始尝试实现一个通过JavaScript来编译的在线编译器。24日，通过流的方式，实现了词条扫描。

2月25日，添加Bas64编码机制。3月1日更新。

2月26日，更新生成斐波那契数列。

3月14日，更新Clipboard一节。

3月15日，初步实现Web Clipboard，一个超级方便的剪贴板书写工具。27日更新。

8月13日，添加手势触控事件。8月22日更新。

8月15日，更新JavaScript快速导览。

8月25日，更新Caches。

8月26日，添加Web Storage专题系列。27日添加对象的持续化。

8月27日，更新函数，添加获取函数或对象方法的源代码一节。

8月30日，更新Promise。

12月8日，修订Prototype。

12月31日，修订sort, toSorted，加入IP地址的排序算法。

工具类
测试

1月30日，实现BinUtils.js。2月6日修订。

2月11日，实现DOMUtils.js。9月16日修订。

4月2日，实现ArrayUtils.js。

4月26日，实现SVGPathUtils.js。

10月27日，实现SourceCodeFormatter.js。

12月8日，修订ColorUtils.js。

12月24日，实现styleTags.js，用以便捷地创建使用多行字符串作为CSS样式内容的各种HTML标签。25日，加入一个返回Promise的pStyleTags。

12月25日，开始实现WCAGColorContrast类，依据WCAG的标准来自动生成高对比度、高清晰度的不同对比色的一组颜色。

通用工具

10月24日，添加比例方程。

12月15日，添加CSS ZenGarden Color Palettes，从Zen Garden各种精美的设计中自动提取所使用的颜色并以调色板的形式予以显示，鼠标悬停则放大显示作者所使用的原始颜色值，以便我们在选定自己网站的主色调时参考借鉴。

18日，可通过分页控件来显示所有221种设计的调色板。

19日，分页控件添加随机次序功能。每当Shuffle按钮打勾时，都会重新生成一次新的随机次序。翻页时则使用当前的随机次序；若不打勾，则使用正常次序。

这个实用、灵活、绚丽的小程序整合使用了以下的技术：

1. CSS Color Scheme
2. CSS Flex, CSS Grid
3. Nested CSS
4. CSS Transitions, CSS Transforms
5. 使用正则表达式来提取各种复杂的颜色值
6. CSS不同颜色转换
7. 对每一个颜色值计算出统一的亮度值、并依此获取不同颜色的对比度
8. 功能齐全的自定义分页控件
9. 跨域资源的合法读取及使用
10. 事件驱动开发
11. 使用HTMLtemplate来构建相对复杂的模板内容

通过这个小程序，我们可以很方便地领略到各位大师是如何创造性地使用极少颜色数量的调色板来创建出极具视觉冲击力的页面效果的。

人工智能 AI
专题

2月4日，添加国内 AI 2024年成就与突破。

2月5日，添加国内 AI 模型索引。

2月10日，添加AI 概述，以及AI 学习资料。

2月15日，添加DeepSeek使用技巧。

5月20日，添加pollinations.ai，并结合DeepSeek直接生成唐诗《静夜思》的配图。

10月25日，添加神经网络编程。11月7日更新。

12月8日，添加DeepSeek学习资源。

HTML
参考

3月30日，添加HTML参考。

11月15日，添加iframe，12月2日修订，加入在 iframe 中玩转 Color Scheme一节。

Canvas 2D
参考

2024年3月22日，添加潜心研发的JavaScript库geoGrp。色轮工具即利用此库来实现。目前，正对geoGrp已经实现的APIs逐一测试、完善、优化，已完成部分则及时记入文档。

3月30日，加入Canvas参考。

4月10日，实现CanvasGrids, 查看演示。在绘制较复杂的图形时使用价值较高。

4月10日，加入Mouse Events。

4月12日，更新统一应对标准设备与高清设备，加入使用prototype来重定义方法，以及使用Scale变换。并使用后者改写了CanvasEditor。

4月13日，更新CSS Color Names in Black，通过计算自动设定canvas的最佳高度，并在不同设备下取得最佳视觉效果。

4月14日，添加可拖曳的图形。查看演示。在前面基础上实现了可拖曳的bezier曲线。

4月15日，添加Quadrtic Bezier曲线的内容，添加可拖曳的quadratic曲线工具。

4月17日，更新绘制文本。

4月30日，更新渐变色。

5月10日，更新使用Scale变换，及三角函数。

5月30日，更新颜色混合模式。

8月4日，加入Fill Rule。

8月10日，更新使用Scale变换，以及Color Wheel（修正了鼠标在高分辨率设备下不能精准定位的问题）。

2025年3月29日，添加将Unicode字符转换为PNG图像。

3月29日，在Canvas 2D 概述中添加两套尺寸大小的最终解决方案的内容。

4月3日，添加getImageData。

4月4日，添加Canvas 临摹，并生成可下载SVG的链接。4月8日添加HTML转换为SVG一节。

4月11日，以PageConsole为载体，改写geoGrp，完善内部应用devicePixelRatio细节以应对复杂环境，以及集成操作像素数据的功能。

4月14日，添加geoGrp 像素操作。4月17日更新。

11月5日，修订动画基本原理。

11月20日，添加阴影，21日修订。

Markdown

9月14日，添加Rendering Markdown，在HTML上直接渲染Markdown文档。

9月15日，实现Markdown渲染服务。利用此服务，渲染《Markdown极简语法》md-syntax-quick.md。

9月26日，为精准应对不同的代码块，添加Markdown Indented Code Blocks Testing，以及Markdown Unndented Code Blocks Testing。27日，增加渲染Graphviz源代码功能。

Mermaid
入门教程

2023年9月4日，添加Mermaid入门教程。

Mermaid借鉴了Markdown的语法，通过声明的方式来制作图表。其在制作UML各类图表时非常方便。同时，Mermaid支持制作暗黑模式的图表。

2024年2月19日，Mermaid CDN 所提供的 ESM 恢复正常，本站的Mermaid入门教程得以恢复正常使用。

2025年2月20日，换用一个新CDN，消除浏览器终端中出现的警示信息；通过自定义CSS全面解决了因整合原因而导致节点排版不居中的问题。

9月20日，修订Mermaid快速起步。

Read more →

Python语言
参考

2024年11月3日，加入Python语言参考。初步介绍了Brython及PyScript这两个在Web上可直接使用Python的JavaScript库。

11月5日，修订PyScript。

2025年8月22日，加入Pyodide。24日更新。

8月24日，修订Python快速导览，在网页上直接运行Python代码，以直观的方式展现Python的特点。30日，改用Brython来在线编译Python代码，编译速度提升显著，丝滑流畅。

8月30日，修订Brython。

9月7日，修订Python快速导览。

9月8日，添加Python函数。9月9日修订。

9月10日，添加Python类。9月14日修订。

9月20日，修订PyCharm。

思维导图在线编辑器

7月5日，开始逐步实现思维导图在线编辑器。

7月10日，在实现过程中，发现尽管是一个如此小型的应用程序，也涉及众多对象。若不考虑设计模式，代码难以排错、维护及升级。故而借鉴了WebGL入门教程应用框架中好的经验，通过引入多个类，构建了整个应用程序的框架，重写了所有的核心代码。待重构完成后再与界面功能整合回来。

7月13日，完成视图的平移与缩放。

7月15日，完成子节点的折叠、展开并根据其状态自动编排，高亮显示鼠标悬停节点。

7月16日，实现将只有一个根节点、任意子节点的任意JSON数据结构的内容（可包含节点折叠信息）渲染为可交互思维导图的功能。

7月17日，可通过键盘快捷键，进行画布的平移、缩放，节点的折叠与展开，以及在各节点中的导航。7月27日，在节点导航时屏蔽浏览器的默认键盘快捷键设置，以避免浏览器自动返回历史网址而造成编辑内容的丢失。

7月19日，添加原地编辑节点内容及删除所选节点的功能。

7月21日，对于已有的任意变换，仅使用平移即可高效、统一地完成所有节点的视图居中。

7月27日，拖曳节点，根据视觉提示动态、精准确定目标位置以移动相应节点及其子节点。自动过滤不合逻辑的拖曳操作。通过深复制，实现节点的自由拷贝。

7月28日：

1. 应用程序可在无任何节点的状态下运行
2. 从一个JSON文件加载数据。数据加载完毕，触发自定义事件，以便不同的事件监听者自行更新状态
3. 优化Scene的渲染代码，避免冗余渲染
4. 重构Controls所有代码，对所有快捷键重新分类归组，统一使用鼠标事件参数中的code属性值
5. 允许复制一次，多次粘帖各不相同的副本

7月29日，实现了一组与文件相关的功能。我们可以编辑自己特定领域的内容并及时保存了。

1. 新建：舍弃当前正在编辑的内容，新建一个根节点，标题为中心主题。
2. 保存：

   为防止正在编辑内容时突然掉电，将当前编辑内容保存到浏览器的本地存储空间中 (LocalStorage)。为节省宝贵的存储空间，只保存所有节点的标题以及是否折叠的状态，且仅以字符串的形式保存。

   下次访问时，所保存的数据依然存在。

   根据 Web 应用程序的特性，如果先后编辑了多个文件并进行了多次的保存操作，则只保存当前正在编辑内容的一份数据，目的仅在于防掉电。编辑完后，可自行下载，以在本地中永久保存。

3. 加载：从浏览器的本地存储空间加载最后一次保存的内容。
4. 下载：

   将当前编辑的内容，以JSON的格式自动下载到系统所指定的下载路径中，文件名为MindMapData.json。若下载多次，当前下载的文件名将自动变成MindMapData-1.json，依此类推。

   下载后，可自行在下载路径中将其文件名重新命名为有意义的文件名称。

5. 上传：弹出一个指定上传文件的界面，选择相应的JSON文件以上传。编辑器根据其内容予以渲染，并可进行编辑。

7月30日：

1. 加入全屏运行功能，在思维导图内容较复杂时非常有用。
2. 在网址中添加参数?jsonFile=./data/test.json，将参数中的相对路径转为相对于调用者的绝对路径后，直接渲染不同的JSON文件。应用程序化身为思维导图渲染 Web 服务。

   例如，渲染红楼梦人物关系图，渲染梅花易数快速入门，等等。

7月31日：

1. 提供免费的跨域外链渲染服务，例如，渲染 Github 上的JSON文件。（因 Gitee Pages 已停用，故使用 Github Pages 上的文件。）
2. 节点颜色随时间而自动转变。白天为白色，夜间为淡一点的乳白色。
3. 增加展开及折叠所选节点的所有子节点的功能。
4. 自动缩放显示比例，以将所有展开节点在画布中居中显示。

   如果所有展开节点的内容太多，将导致字体变得太小，此时可适当折叠一些节点的内容后再缩放匹配视图。

8月1日：

1. 精准排除操作系统及 Safari 浏览器无法屏蔽的快捷键。
2. 自动编排各节点位置时，避免创建冗余变量。
3. 创建根节点时，确保各状态变量依序就绪。
4. 解决根节点与只有一行的子节点的精准对齐问题。
5. 提供节点固有坐标 (intrinsic coordinates) 到画布坐标的自动转换。
6. 添加新节点时，如果新节点的位置超出画布外，自动居中新节点后再编辑。

8月6日：

1. 引入Layouts,LayoutsManager等类，专门负责布局事务。为实现多种布局做好准备。
2. 大幅重构所有与布局相关的代码。
3. 修复编辑标题、拖动节点时布局编排的多处小问题。

8月9日：

1. 添加树形控件的布局。
2. 使用键盘快捷键快速切换不同的布局。
3. 但切换到新布局后，原来默认布局下的键盘导航及鼠标拖曳均显得有些别扭。显然，这些操作也与布局相关，需重构至布局管理者的职责，以进行精细控制。

8月10日：

1. 为树形布局添加直观的上下光标键导航。

8月11日：

1. 选择新节点，或在节点导航过程中，如果所选节点超出画布区域，自动将所选节点对齐至画布相应的边界。从而实现以下效果：
   1. 始终将所选节点自动拉进视口中。
   2. 连续导航时，自动建立起所有可视节点的滚动区域。
2. 修复节点偶尔不能展开的问题。

应用程序鼠标操作及键盘快捷键：

运行核心代码。核心代码成为一个完美的思维导图渲染器，从而弥补了HTML无法直接渲染可交互的思维导图的不足。

因所涉及的类较多，各个JavaScript模块已从HTML中分离出来而独立存储，因此在开发阶段，可能需要额外刷新一次浏览器以避免浏览器仍使用旧版本的缓存。

梅花易数App

2023年6月3日，梅花易数 App的按公历时间起卦功能基本完成。支持动态点击查看八卦、六十四卦的内容，并附上占卦总诀、体用总诀、卦气衰旺等在解卦过程中非常实用的内容。

6月19日，起卦方式可支持按公历时间、按农历时间、按单数、按双数、按八卦、按万物方位，共计6种起卦方式。

6月25日，在按农历时间起卦版面中加入观梅占及牡丹占两个经典案例。点击这两个链接，可自动将相应的农历时间填写至表单中，再点击提交按钮，即可起卦。结合本站自动生成的卦象，可十分直观地领悟邵康节先生在应用梅花易数时的高深技巧。更多经典案例正在添加中。

7月4日，增加用户登录功能，登录后可保存自己的梅花易数卦例，非常适合及时起卦、事后验证，及编写感悟。

2024年2月13日，修正梅花易数入门教程中不能正常绘制八卦图像的错误。

2025年5月4日，在按两个数字起卦中新增邻夜扣门借物占经典案例。

6月15日，在农历算法中新增Temporal的简要介绍。

中华古典名著

2025年5月17日，新增《三国演义》（一百二十回全），提供最佳的中华竖版古籍阅读体验（在 Mac OSX 或 iOS 系统上则以繁体字显示）。

5月21日，新增三国英雄人物检索。5月25日，在检索中为2位英雄生成AI肖像：

5月22日，新增《红楼梦》（一百二十回全）。

C语言
参考

2024年8月23日，加入C语言参考。

8月24日，添加指针。8月27日更新。

9月6日，添加结构、链表，及其string.h标准库中的部分内容。9月12日更新。

9月8日，添加C字符串。并以字符串为例，实现内存自动清理的功能。

Online Vector Editor

8月3日，加入Online Vector Editor。

现在不乏各类的矢量编辑软件。但使用起来总体感觉功能虽然强大，但软件易用性不强。故此产生了创建此类应用的想法。目的是让矢量图形的创建与编辑成为简单而有趣的工作。

当前版本号为0.1 beta，实现了以下基本功能：

1. 可创建的图形包括：矩形、圆、椭圆、直线、正多边形
2. 图形创建时支持Spacebar移动、Shift键约束的操作
3. 每个图形可独立更改其填充颜色、描边颜色，及其相应的核心属性
4. 图形可自由拖动
5. 可通过对象列表面板统一管理所有的图形
6. Delete键可删除图形

交互式Treeview

2月3日，利用HTML 5的details标签实现了一个交互式的 Treeview 控件。基本特征使用纯CSS 3实现，节点的动态选择使用JavaScript实现。并自动适配了 Safari 及 Chrome 浏览器的不同特性。

代码极其简单，但结果非常实用。查看演示效果。

2月6日，在上面的基础上实现了glTF文件查看器。有此支持，在全面解析.glTF文件时特别方便。

2月8日，开始与Graphviz相结合而制作的glTFObj Graphviz。目前仅能支持Box.glb的硬编码绘图。确定好版面及格式后，即可进一步实现根据所选自动绘图。

2月12日，glTFObj Auto Graphviz改用新算法自动生成相应的图像。目前已按层级自动生成所需的表格。

GraphViz
入门教程

2023年7月10日开始编写GraphViz入门教程。这种方式是程序员作图的至爱，因为它允许我们通过编写代码的方式，而不是使用PhotoShop等制图软件来作图。

GraphViz是通过声明式的语法来生成图表（diagram）的一种技术，简单、灵活且强大。掌握这门技术后，在需要图表时可唾手可得，非常方便。

有多种类似于GraphViz的声明式作图技术，如Mermaid, PlantUML等。后者非常适合于绘制诸如时序图、用例图、类图等专门的图表。其中PlantUML的部分功能实现需要GraphViz的支撑。而GraphViz则是一个通用的图表绘制工具，原则上您可以使用它来绘制任何类型的图表。

【 最后更新：2023年7月28日 】

Read more →

CSS Grid
入门教程

CSS Grid是极富创造性的一种页面布局编排机制，是CSS不断进化过程中的集大成者。它丢弃了HTML中table标签的呆板机制，却紧密地结合CSS各种最新技术，从CSS的角度，重新实现了table的功能，并有过之而无不及。它已经成为Web前端开发人员必须掌握的技术之一。

CSS Grid的内容较多，学习起来有一定的难度，本教程通过丰富的实例，并借助于本站自行开发的强大的LiveEditor的实时运行功能，清晰地演示了CSS Grid的各项关键技术，能较为有力地帮助我们系统学习与掌握CSS Grid技术。