# 冷石Boy

> 冷石Boy的独立开发与个人博客：分享 Flutter、前端与后端技术笔记、独立开发实践，以及一些有用的小工具。 A personal blog by coldstoneboy with 71 technical articles (Flutter, JavaScript, Dart, DevOps, data structures and more), mostly in Chinese.

## 2026

- [一套模型六种原生：Native Shell 全平台 UI 框架](https://coldstoneboy.cn/blog/native-shell-intro.md): Longbridge 的 Native Shell 用一套应用模型跑六个平台：Rust 优先、TSX 并行、双线程引擎、签名包动态下发。
- [AI Agent 开发的三大模式](https://coldstoneboy.cn/blog/agent-mode.md): 从是什么、为什么、怎么用三个问题拆解 Build、Plan、Goal 三种 AI Agent 开发模式。
- [使用 CNB 平台自动同步代码到 GitHub](https://coldstoneboy.cn/blog/cnb.md): 在国内网络环境下直接向 GitHub 推送代码很困难。借助腾讯的 CNB 构建平台，把代码推送到 CNB 即可自动同步到指定的 GitHub 仓库，本文介绍具体实现。
- [解决 Windows 下 MoonBit 构建错误](https://coldstoneboy.cn/blog/moonbit-build-error.md): 记录一次 Windows 下 MoonBit 构建报错的排查与解决过程。

## 2022

- [一种英雄联盟召唤师战力值算法](https://coldstoneboy.cn/blog/lol-summoner-power.md): 研究如何计算一个玩家在对局开始前的战力值
- [开源小事一则](https://coldstoneboy.cn/blog/flutter-tree-2.md): 这两天更新了一个两年前的 Flutter 插件，有感而发。

## 2021

- [关于新拟物设计 Neumorphism](https://coldstoneboy.cn/blog/about-neumorphism.md): 前段时间发现了一种叫新拟物的 UI 设计 Neumorphism，感觉很新鲜。于是研究的一番，本文将分享新拟物设计的相关知识。
- [使用 Context 避免深层属性传递](https://coldstoneboy.cn/blog/react-context-hooks.md): 最近在项目发现了一些看起来很神奇的代码，一个组件 A 的方法通过 props 传到组件 B，然后到组件 C，再到组件 D，再到组件 E，最后到组件 D，
- [浏览器插件发布指南](https://coldstoneboy.cn/blog/extention.md): 介绍浏览器插件（Chrome、Edge、Firefox）的发布流程与注意事项，帮助独立开发者将扩展上架到各大浏览器应用商店。
- [学习抽象语法树 AST](https://coldstoneboy.cn/blog/learn-ast.md): 作为一个前端切图仔，工作中少不了用上 Babel，ESLint，Prettier 这些工具，但是这些工具背后的工作原理却不求甚解😅
- [JS 检查元素是否在视口内](https://coldstoneboy.cn/blog/js-check-element.md): 分享两个监测元素是否在视口内的方法
- [JS 文件转换](https://coldstoneboy.cn/blog/js-file-transform.md): 最近需要将 base64 格式的图片转化成 JS 里的 File 对象进行上传，于是学习了一下这方面的知识

## 2020

- [画一颗圣诞树🎄](https://coldstoneboy.cn/blog/christmas-tree.md): 用 HTML canvas 实现一个动态的圣诞树页面，JUST FOR FUN，附带初始化与绘制的完整代码。
- [Slate 介绍分析与实践](https://coldstoneboy.cn/blog/slate-intro.md): Slate 是一个使用 TypeScript 开发富文本编辑器开发框架，诞生于 2016 年。
- [认识 Range 和 Selection 对象](https://coldstoneboy.cn/blog/selection-and-range.md): 浏览器的 Range 和 Selection 对象
- [什么是 peerDependencies](https://coldstoneboy.cn/blog/npm-peerdependencies.md): package.json 里面的 peerDependencies 是什么意思
- [学习观察者模式](https://coldstoneboy.cn/blog/design-patterns-observer.md): 观察者模式是一种行为设计模式，允许你定义一种订阅机制，可在对象事件发生时通知多个 “观察” 该对象的对象。
- [Flutter 绘制图形 Circle Packing](https://coldstoneboy.cn/blog/flutter-generative-artistry-03.md): 本文讲解使用 Flutter 实现 Generative Artistry 教程里面的第六个图形 Circle Packing（圆形填充）
- [阿里的三道面试题](https://coldstoneboy.cn/blog/ali-interview-questions.md): 前段时间做了三道阿里的在线面试题，分享一下
- [使用 Github Action 发布 Flutter 插件](https://coldstoneboy.cn/blog/github-action-publish-flutter-plugin.md): 本文说明如何使用 Github Actions 自动发布 Flutter 插件到 pub.dev
- [Flutter 绘制三角网格 Triangular mesh](https://coldstoneboy.cn/blog/flutter-generative-artistry-02.md): 本文实现 Generative Artistry 教程的第 4 篇图形 Triangular mesh 效果如下
- [Flutter 绘制瓷砖线 Tiled Lines](https://coldstoneboy.cn/blog/flutter-generative-artistry-01.md): 前几天发现了一个使用 绘制图形的教程 generative artistry 感觉很有意思，尝试用 Flutter 实现。
- [用 Flutter 实现探探卡片布局](https://coldstoneboy.cn/blog/flutter-tinder-card.md): 前几天写了一个 Fluter 插件 tcard，用来实现类似于探探卡片的布局。
- [最好的你](https://coldstoneboy.cn/blog/leetcode-1014.md): LeetCode 1014 最佳观光组合
- [Flutter 绘制图表（二）饼状图🍪](https://coldstoneboy.cn/blog/flutter-pie-chart.md): 本文讲解如何使用 Flutter 绘制饼状图
- [Flutter 绘制图表（一）柱状图📊](https://coldstoneboy.cn/blog/flutter-bar-chart.md): 本文讲解如何使用 Flutter 绘制一个带有动画效果的柱状图表
- [选择适合的 Flutter 动画控件](https://coldstoneboy.cn/blog/flutter-animation-decision.md): 如何在 Flutter 中选择合适的动画 Widget 中文翻译
- [从零开始的 Flutter 动画](https://coldstoneboy.cn/blog/flutter-animation-from-zero.md): Flutter 中的动画
- [在 Flutter 里使用 Stream](https://coldstoneboy.cn/blog/flutter-stream.md): 在 Flutter 中有两种处理异步操作的方式 Future 和 Stream，Future 用于处理单个异步操作，Stream 用来处理连续的异步操作
- [Flutter 是如何渲染的？](https://coldstoneboy.cn/blog/how-flutter-render.md): 总结一下关于 Flutter 渲染方面的知识
- [PlantUML 类图及 Flowchart 流程图绘制入门](https://coldstoneboy.cn/blog/learn-classchart-flowchart.md): 学习 PlantUML
- [记录两个使用 Flutter 的 DropdownButton 问题](https://coldstoneboy.cn/blog/flutter-dropdown-problem.md): 记录两个关于 DropdownButton 的问题
- [数据结构与算法之二叉树](https://coldstoneboy.cn/blog/das-tree.md): 二叉树是一种非线性的数据结构，以分层的方式存储数据。在二叉树上进行添加，查找和删除数据非常快。
- [如何使用 Gitlib 持续发布 Flutter 应用](https://coldstoneboy.cn/blog/flutter-gitlab-pineline.md): 本文介绍如何使用 Gitlib CI/CD 构建发布 Flutter 应用
- [使用 Github Actions 持续发布 Flutter 应用](https://coldstoneboy.cn/blog/flutter-github-actions.md): 本文讲解如何使用 Github Actions 构建并发布 Flutter 应用
- [MySQL 入门笔记 📒](https://coldstoneboy.cn/blog/mysql-getting-start.md): 工作需求学习一下 MySQL 数据库
- [使用 Codemagic 持续部署 Flutter 应用](https://coldstoneboy.cn/blog/flutter-cicd.md): Codemagic 持续部署 Flutter 应用
- [为 Flutter 应用添加搜索功能](https://coldstoneboy.cn/blog/flutter-show-search.md): 使用 SearchDelegate 给 Flutter 应用添加搜索功能

## 2019

- [Flutter 创建自定义路由过渡动画](https://coldstoneboy.cn/blog/flutter-route-transition.md): Flutter 应用进行路由跳转的时候有默认的过渡动画，但是自定义的跳转动画会让应用更具特色
- [Egg.js 上传接口开发总结](https://coldstoneboy.cn/blog/egg-api-dev.md): 总结一下之前用 Egg.js 开发的文件上传接口的任务
- [使用 Flutter 实现一个走马灯布局](https://coldstoneboy.cn/blog/flutter-carousel.md): 走马灯是一种常见的效果，本文讲一下如何用 PageView 在 Flutter 里实现一个走马灯
- [分享两道面试题](https://coldstoneboy.cn/blog/two-interview-question.md): 前几天遇到两个前端面试题，要写代码的那种，然后我都没做对...记录一下
- [使用 FFmpeg 转换视频格式](https://coldstoneboy.cn/blog/simple-use-ffmpeg.md): 用 B 站下载助手 下载下来的视频格式是 flv，用 QuickTime 看不了也不能导入 iMovie 进行编辑，所以需要转换一下视频格式
- [对 Egg.js 进行单元测试](https://coldstoneboy.cn/blog/eggjs-test.md): 优秀的代码需要有单元测试进行质量保证，每个测试用例都给应用的稳定性提供了一层保障，本文说一下如何对使用 egg.js 写的接口进行单元测试
- [Docker ARG vs ENV](https://coldstoneboy.cn/blog/docker-arg-vs-env.md): 构建 Docker 镜像的的时候有两种环境变量 ARG 和 ENV,
- [前端代码规范](https://coldstoneboy.cn/blog/code-standard.md): 良好的代码规范有利于提高项目开发效率以及减少阅读代码的困难，本规范结合了 chaoxi 多个流行的代码规范以及前人的开发经验而成，参考规范进行开发提高代码质量
- [使用 Intl 对象进行日期时间格式化](https://coldstoneboy.cn/blog/js-intl.md): 本文主要说明如何使用浏览器自带的 Intl 对象进行日期时间的格式化
- [数据结构与算法之集合](https://coldstoneboy.cn/blog/dsa-set.md): 集合是一种包含不同元素的数据结构，集合中的元素称之为成员。集合有两个重要的特性，一是集合中的成员是无序的，其次集合中不存在相同的成员。
- [使用 Provider 管理 Flutter 应用状态  下](https://coldstoneboy.cn/blog/flutter-provider-todos-02.md): 为了存储数据可以将数据存到手机的存储里面或者存到远程服务器上，本文就实现如何使用 dio 将数据存到服务器
- [使用 Provider 管理 Flutter 应用状态  上](https://coldstoneboy.cn/blog/flutter-provider-todos-01.md): 本文说明如何使用 Provider 来管理这种应用的全局性的数据
- [数据结构与算法之哈希表](https://coldstoneboy.cn/blog/dsa-hash.md): 哈希表是一种常用的数据结构，可以快速的插入和取用，但是查询数据效率低下
- [在 Egg.js 中使用 redis 缓存提升性能](https://coldstoneboy.cn/blog/egg-redis-cache.md): Redis 是一款开源的，基于 BSD 许可的，高级键值缓存和存储系统
- [数据结构与算法之字典](https://coldstoneboy.cn/blog/dsa-dictionary.md): 字典是一种以键值对形式存储数据的数据结构，键用来查找，值用来保存数据
- [数据结构与算法之链表](https://coldstoneboy.cn/blog/dsa-linklist.md): 链表是一组节点组成的集合，每个节点都使用一个对象的引用指向它的下一个节点，指向节点的引用叫做链
- [如何在 Egg.js 中使用 Sequelize 的事务 Transaction](https://coldstoneboy.cn/blog/egg-sequelize-transaction.md): Egg.js 框架中使用事务
- [数据结构与算法之队列](https://coldstoneboy.cn/blog/das-queue.md): 队列是一种列表，只能在队尾插入元素，在队首删除元素。
- [关于 Flutter 的安卓打包](https://coldstoneboy.cn/blog/flutter-android-build.md): Flutter 打包安卓应用有 flutter build apk 和 flutter build appbundle 两种方式，本文说明这两种方式的区别与适用场景。
- [数据结构与算法之栈](https://coldstoneboy.cn/blog/dsa-stack.md): 栈是一种高效的数据结构，因为它只能在栈顶添加或删除，这样的操作很快，它是被称之为后入先出（LIFO，last in first out）的数据结构。
- [数据结构与算法之列表](https://coldstoneboy.cn/blog/datastructure-list.md): 列表是一种常用的数据结构，如代办事项，十佳榜单等。当不需要在一个很长的序列中查找元素，或者对其排序时，列表显得尤其有用
- [在服务器上搭建 npm 私服](https://coldstoneboy.cn/blog/create-privite-npm-server.md): 部门需要建一个 npm 私服，我查了一下发现有一个很好用的开源工具 Verdaccio，有 3 中方式可以在自己的服务器上搭建，以 Centos 为例
- [在 Centos 中安装 java8](https://coldstoneboy.cn/blog/centos-install-java8.md): 由于要在服务器上安装 Jenkins 所以首先要安装 java
- [理解 Flutter 应用和部件的生命周期](https://coldstoneboy.cn/blog/understand-flutter-lifecycle.md): 在 Flutter 里面部件以及应用本身都有自己的生命周期，本文分别说明它们的生命周期
- [对于 Workbox Strategies几种策略的解释](https://coldstoneboy.cn/blog/about-workbox-strategies.md): 将自己的网站接入 PWA 需注册 serviceWorker，通常使用 Google 的 Workbox 工具。本文说明 Workbox 提供的几种请求响应策略及其用途。
- [使用 Travis CI 部署 Hugo 博客到 Github Pages](https://coldstoneboy.cn/blog/hugo-travis-github-page.md): 原本使用的是 Netlify 去部署博客的，域名解析也是通过 Netlify 的 DNS 服务器，但是发现博客在别人的电脑上打不开...
- [对于 PWA 应用的 manifest.json 文件的解释](https://coldstoneboy.cn/blog/about-manifest.md): 网站要支持 PWA，需要一个 manifest.json 文件。本文解释 W3C Web App Manifest 草案中各个字段的含义。
- [让 Hugo 博客支持 PWA](https://coldstoneboy.cn/blog/add-pwa-support-to-hugo.md): 让用 Hugo 搭建的博客支持 PWA 很简单，只需 2 个步骤即可
- [了解 <link> 标签上 rel=prexxx 的作用](https://coldstoneboy.cn/blog/understand-link-prexxx.md): 在 HTML 中 <link> 标签指定了当前文档与外部资源之间的关系，本文说明 rel 属性分别设置为 dns-prefetch、preconnect、prefetch、preload、prerender 时的作用。
- [浏览器请求耗时阶段解释](https://coldstoneboy.cn/blog/request-timimg.md): 对于一个浏览器网络请求耗时阶段解释
- [Dart 语言中的 final 与 const 的区别](https://coldstoneboy.cn/blog/dart-final-vs-const.md): 在 Dart 中有 final 和 const 两个关键字，貌似都是表示常量的，但是它们还是有区别的
- [关于应用的 Code Signing](https://coldstoneboy.cn/blog/code-signing.md): Flutter 项目代码签名

## Optional

- [Blog homepage](https://coldstoneboy.cn/): site entry with latest posts and projects