使用 OpenResty 无痛优化图片体积（AVIF / WebP）
图片体积优化计划两年半之前，我第一次了解到 WebP 可以有效减少图片体积的时候，有一瞬间产生了“把网站中所有资源替换成 WebP”的冲动，但当我打开 caniuse 的时候，发现 Safari 迟迟不支持，况且网站中涉及到图片的地方实在是太多，修改代码不太现实。我当时搜了一些资料，是关于让 Nginx 针对浏览器提供的 Accept 头来分别提供不同格式的文件。这个方法确实有，然而我实在是太懒了，以至于写一段命令将所有图片转个格式都不想写，并且想到以后所有图片都要提供两个版本，实在是太麻烦了！于是这个计划就被搁置了。后来我更多的接触了 OpenResty，这是一个集成了 Lua 的 Nginx，可以利用 Lua 脚本来方便的做一些扩展。我还摸索出了如何利用 Lua FFI 调用 OpenCC API 无..
更多
Flutter 绘制图形 Circle Packing
本文讲解使用 Flutter 实现 Generative Artistry 教程里面的第六个图形 Circle Packing（圆形填充）前言懒癌发作，好久没写博客了…本文讲解使用 Flutter 实现 Generative Artistry 教程里面的第六个图形 Circle Packing（圆形填充）。实现这个图形的思路大致是：创建一个圆。判断这个圆是否与其他圆发生碰撞。没有则不断增大圆的半径，再次进行碰撞检测，直至最大半径。绘制更多的圆形，重复以上。初始化照旧创建一个 CirclePacking 控件以及 CirclePackingPainter。12345678910111213141516class CirclePacking extends StatelessWidget { @overri..
更多golang switch的用法
最近一直在写go, switch说实话用的不算多。但是今天用了下发现go的switch可真不太一样啊。 无需break 该代码只会匹配到 case 0 ，go会帮你隐式break掉。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 func main() { i := 0 switch i { case 0: fmt.Println("0000000000") fmt.Println("0") case 1: fmt.Println("1111111111") fmt.Println("1") c..
更多golang select的用法
golang的select与channel配合使用。它用于等待一个或者多个channel的输出。本篇我们重点讲下select的用法。 golang中的select语句格式如下： 1 2 3 4 5 6 7 8 select { case <-ch1: // 如果从 ch1 信道成功接收数据，则执行该分支代码 case ch2 <- 1: // 如果成功向 ch2 信道成功发送数据，则执行该分支代码 default: // 如果上面都没有成功，则进入 default 分支处理流程 } 可以看到select的语法结构有点类似于switch，但又有些不同。 select里的case后面并不带判断条件，而是一个信道的..
更多
开始使用 Beancount
使用 Beancount 记账已经有将近两个月了，简单写一写我都做了什么。 注：本文只是一个流水账，并不是一个 Beancount 使用教程，如果想详细了解 Beancount 的话，可以参考下面提到的那些文章。 一些背景 Beancount 是什么 如上文所说，Beancount 是一个记账工具，更准确些来讲，是一个复式记账工具。但直到我写这篇文章的时候才发现官方将其定义为“一种复式记账计算机语言”。 简单来讲，它可以让你以纯文本方式记账，并通过一种类 SQL 的语言来对交易进行查询。记账文件还可以配合 Git 进行版本控制。 此外，Beancount 官方提供了一个名叫 fava 的图形化管理工具，它基于 Web，能够提供比原生页面更加丰富的内容，一般记账所需要的信息一目了然。想体验的同学可以在..
更多阿里的三道面试题
前段时间做了三道阿里的在线面试题，分享一下前言前段时间做了三道阿里的在线面试题，分享一下。(一) 身为前端，我很抱歉123456789101112131415根据表达式计算字母数。说明： 给定一个描述字母数量的表达式，计算表达式里的每个字母实际数量 表达式格式： 字母紧跟表示次数的数字，如 A2B3 括号可将表达式局部分组后跟上数字，(A2)2B 数字为1时可缺省，如 AB3。示例： countOfLetters('A2B3'); // { A: 2, B: 3 } countOfLetters('A(A3B)2'); // { A: 7, B: 2 } countOfLetters('C4(A(A3B)2)2'); // { A: 14, B: 4, C: 4 }functi..
更多
使用 Github Action 发布 Flutter 插件
本文说明如何使用 Github Actions 自动发布 Flutter 插件到 pub.dev前言笔者有发布过几个 Flutter 插件，一直在手动更新。手动更新插件有点麻烦且容易失败（需要科学上网），因此研究了下如何使用 Github Actions（Github 提供的一种 CI/CD 服务）自动发布插件到 pub.dev，这样做的好处有避免手动发布，节约上传时间在 Github 合并别人提交的代码后也可以立即发布以下说明如何进行添加流程首先在插件的 .github/workflows 目录内创建一个配置文件 publish.yml。内容如下12345678910111213141516171819name: Publish to Pub.dev# 流程触发时机，当有标签创建时触发，如 v1.0.0..
更多
Flutter 绘制三角网格 Triangular Mesh
本文实现 Generative Artistry 教程的第 4 篇图形 Triangular mesh 效果如下前言本文实现 Generative Artistry 教程的第 4 篇图形 Triangular mesh 效果如下。没按顺序来，因为第二篇 Joy Division 我还没实现 😝创建画布首先创建一个用于绘制的画布，然后实现 TriangularMeshPainter 的 paint 方法。123456789101112131415class TriangularMesh extends StatelessWidget { @override Widget build(BuildContext context) { return CustomPaint( painter:..
更多
Flutter 绘制瓷砖线 Tiled Lines
前几天发现了一个使用 绘制图形的教程 generative artistry 感觉很有意思，尝试用 Flutter 实现。本文实现第一篇教程的图形 Tiled Lines 效果如下。前言前几天发现了一个使用 绘制图形的教程 generative artistry 感觉很有意思，尝试用 Flutter 实现。本文实现第一篇教程的图形 Tiled Lines 效果如下。创建画布首先使用一个 Container 控件创建一个 320*320 大小的绘制区域，添加 CustomPaint 画布和一个继承 CustomPainter的画笔 TiledLinesPainter。关于 CustomPaint 和 CustomPainter 的知识可以查阅这篇文章 使用 Flutter 绘制图表（一）柱状图 📊。1..
更多
当表格排版遇到了合并单元格
我负责的面单平台的需求复杂度已经越来越高了。自从寒假接了一个复杂表格排版的需求后，各类业务对于表格排版的使用场景也开始变多。毕竟，一个可以自动换页排版，并保持每一页都带有首部区域和尾部区域的表格，哪个业务不喜欢呢？（被打）表格的排版先回顾一下之前的需求：有一类专门的面单类型叫“拣货单”，用于给卖家拣货拣货单有三个部分：头部区域（展示 Logo、买家地址等）、表格（展示商品信息）、尾部区域（展示备注和页码）表格可能非常长，需要分页打印（纸张类型分为 A4、A5、A6 三种）第一页的表格之前一定会有一个头部区域每一页的表格之后都要接一个尾部区域，可以配置非第一页的表格之前是否也接一个头部区域表格的数据内容未知，列宽、字体、字号均可以自定义，行高不确定大概的效果嘛，类似于下图（A6，横向，非第一页的表格之前也接..
更多