需求​

把花纹填充到图片中可以让您的图片更具艺术感和创意。

在这篇文章中，我们将介绍如何使用 ChatGPT 来为图片添加花纹和纹理。

比如把下面的花纹填充到扇子图片中：

步骤​

1. 打开 ChatGPT， 在输入框中上传图片。并输入 @DALL・E （一个 ChatGPT 的用于生成图片的插件）选中后，输入以下文本：​

把图 1 的花纹图片填入图 2 中的扇子中。

2. 点击“生成”按钮，等待 ChatGPT 生成结果。​

补充​

如果不选择 @DALL・E 直接使用 ChatGPT 也可以，但效果好像不如 @DALL・E。

下面是不选择 @DALL・E 的效果：

背景​

使用 ChatGPT 生成带有中文的图片的图片时，中文会出现乱码的问题。本教程将介绍如何解决这个问题。

比如，我让 ChatGPT 生成一个带有中文的图片，输入如下：

请生成一张猫的照片，并在照片上加上中文字 “猫咪”

生成的图片如下：

步骤​

1. 下载中文字体，比如有名的 Noto Serif SC​

下载地址：Noto Serif SC

如果你想显示日语韩语等其他语言，可以下载 Noto Serif CJK 字体。

下载解压后会得到以下几个像 NotoSerifSC-xxx.otf 这样的字体文件。

xxx 部分表示的是字体的粗细，可以根据自己的需要选择。

这次我们用的是 NotoSerifSC-Regular.otf。

2. 打开 ChatGPT，上传字体文件，输入你的 prompt​

请生成一张猫的图片
在图片上加入“我的猫咪” 字样
请使用附件中的字体。

点击 3️⃣ 下载图片。

3. 生成图片​

4. 扩展​

上面生成的图片，没有指定文字的位置和颜色。现在默认好像是用黑色并显示在图片的底部中间。

如果你想指定文字的位置和颜色，可以在 prompt 中加入更多的信息。

比如：

请生成一张小猫的图片，
在图片上的左上角加入“我的猫咪” 文字，文字颜色用白色
文字请使用附件中的字体

生成的图片就会是这样：

前言​

Docusaurus 是一个由 Facebook 开发的开源项目，用于构建静态网站。

它是一个基于 React 的静态网站生成器，可以帮助您快速创建网站。

Docusaurus 还提供了一个易于使用的博客插件，可以帮助您创建博客。

Docusaurus 默认不提供 RSS 导航菜单，在本文中，我们将介绍如何为 Docusaurus 博客添加 RSS 导航菜单。

怎么给 Docusaurus 博客 添加 RSS 导航菜单​

module.exports = {
  ...
  themeConfig: {
    ...
    navbar: {
      items: [
          // blog rss
          {
            href: '/blog/rss.xml',
            label: 'RSS',
            position: 'right',
            target: '_blank', // Open the link in a new tab/window
          },
      ],
...

补充说明​

BTW, 如果用 to 选项的话，点击 RSS 链接会报页面无法找到的 404 错误，

因为 Docusaurus 会把 to 选项的值当作一个页面的路径，而不是一个链接。

module.exports = {
  ...
  themeConfig: {
    ...
    navbar: {
      items: [
          // blog rss
          {
            to: '/blog/rss.xml',
            label: 'RSS',
            position: 'right',
          },
      ],
...

问题​

有 2 个数组，互相可能有重复的元素，如何合并这两个数组并去重？

比如有两个数组：

type User struct {
    ID   int // ID 作为唯一标识 (ID相同则认为是同一个元素)
    Name string
}

old := []User{
    {ID: 1, Name: "a"}, // only in old
    {ID: 2, Name: "b"}, // 重复
}

new := []User{
    {ID: 2, Name: "c"}, // 重复
    {ID: 3, Name: "d"}, // only in new
}

合并后的结果应该是：

c := []User{
    {ID: 1, Name: "a"}, // only in old
    {ID: 2, Name: "c"}, // 重复 (保留 new 中的)
    {ID: 3, Name: "d"}, // only in new
}

解决方案（一般化）​

package main

import "fmt"

type User struct {
    ID   int
    Name string
}

// contains Check if an element exists in a slice.
//  keyFunc is used to uniquely identify the elements.
func contains(slice []any, item any, keyFunc func(any) any) bool {
    for _, element := range slice {
        if keyFunc(element) == keyFunc(item) {
            return true
        }
    }
    return false
}

// mergeSlices Merges two slices and removes duplicates.
//
//  keyFunc  is used to uniquely identify the elements.
//  if an element exists in both old and new, the element in new takes precedence.
//  old and new are assumed to have no duplicate elements.
// The order is not guaranteed.
func MergeSlices(old, new []any, keyFunc func(any) any) []any {
    var merged []any

    // copy new to merged
    merged = append(merged, new...)

    for _, item := range old {
        if !contains(merged, item, keyFunc) {
            merged = append(merged, item)
        }
    }

    return merged
}

func main() {
    old := []any{
        User{ID: 1, Name: "a"},
        User{ID: 2, Name: "b"}, // 重複
    }
    new := []any{
        User{ID: 2, Name: "c"}, // 重複
        User{ID: 3, Name: "d"},
    }

    mergedUsers := MergeSlices(old, new, func(item any) any {
        return item.(User).ID
    })
    fmt.Printf("Merged Users:%+v", mergedUsers) // Merged Users:[ {ID:1 Name:a} {ID:2 Name:c} {ID:3 Name:d}]
}

背景和需求​

我在写博客或者周报的时候，一般会这样管理我的分支：

• 1). 创建带日期的分支，比如 blog/2024-01-28, weekly/2024-01-28。
• 2). 然后在这个分支上写好博客或者周报。
• 3). 创建 PR，合并到 main 分支。
• 4). 合并到 main 分支后，会触发 CD 自动部署。

步骤 3) 很容易忘记，所以我想通过 GitHub Actions 来自动化这个过程。

方案​

创建一个 Github Actions 的 Workflow，每天定时检查分支名，

发现有当天的日期的分支 weekly/xxxx-xx-xx 的时候，自动创建 PR 并合并到 main 分支。

实现​

准备工作​

1. 在 Github 中创建一个 Personal Access Token （PAT），用于创建和合并 PR。（BTW，到期时间最大只能设置 2 年） 1.1. 设置 PAT 的仓库权限： Repository access → Only select repositories → 选择你的仓库。 1.2. 设置 PAT 的仓库访问权限： Permissions → Repository permissions。
2. 在仓库中创建一个 secret，用于存放 Personal Access Token。

创建 Workflow​

在仓库中创建 .github/workflows/merge-pr.yml 文件，内容如下：

name: Merge Weekly Posts Branches
on:
  schedule:
    - cron: "00 00 * * *"
  workflow_dispatch:

jobs:
  merge_weekly_branch:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Git
        run: |
          git config --global user.email "[email protected]"
          git config --global user.name "GitHub Actions"

      - name: Create and merge PR
        env:
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} # Personal Access Token
        run: |
          # Get the current date in the format 'YYYY-MM-DD'
          current_date=$(date +%Y-%m-%d)

          # Construct the branch name
          branch_name="weekly/${current_date}"
          # Fetch the branch to ensure it exists locally
          git fetch origin ${branch_name}

          # Check if the branch exists
          if [[ -n "$(git ls-remote origin $branch_name)" ]]; then
            git checkout ${branch_name}
            # Create a pull request using GitHub CLI
            gh pr create --base main --head $branch_name --title "weekly post PR" --body "This is a PR for weekly post changes."

            # Wait for a few seconds to allow GitHub to process the PR creation
            sleep 15
            # Merge the pull request using GitHub CLI
            gh pr merge --squash
          else
            echo "Weekly branch '${branch_name}' does not exist."
          fi

Problem​

I was trying to run a Makefile in VSCode and I got the following error:

Makefile:4: *** missing separator.  Stop.

Solution​

The problem is that the Makefile is using tabs instead of spaces. To fix this, you can:

1. Open the Makefile in VSCode
2. Open the command palette with Ctrl + Shift + P or View > Command Palette. If you are using a Mac, you can use Cmd + Shift + P
3. Search for Convert Indentation to Tabs

If you want to prevent this from happening in the future, you can:

1. Open settgings in VSCode with Ctrl + , or File > Preferences > Settings. If you are using a Mac, you can use Cmd + ,
2. Search for Insert Spaces
3. Uncheck the box for Editor: Insert Spaces

问题​

如何计算字符串中的（所见）字符数是一个常见的问题。

在 Golang 中，我们可以使用utf8.RuneCountInString()函数来计算字符串中的字符数。

中文这样的多字节字符也可以正确计算。

示例​

package main

import (
    "fmt"
    "unicode/utf8"
)

func main() {
    str := "abc世界"
    fmt.Println(utf8.RuneCountInString(str)) // 5
}

但是如果字符串中包含 👉🏻 这样的 emoji 字符，那么有些情况下这个函数就无法正确计算了。

package main

import (
    "fmt"
    "unicode/utf8"
)

func main() {
    emojiWorld := "🌍"
    fmt.Println(utf8.RuneCountInString(emojiWorld)) // 1  ✅ 没有问题

    emojiHand := "👉"
    fmt.Println(utf8.RuneCountInString(emojiHand)) // 1  ✅ 没有问题

    emojiHandBlack := "👉🏿"
    fmt.Println(utf8.RuneCountInString(emojiHandBlack)) // 2 ❌ 有问题 期望是 1。 同一种 emoji，但是不同的皮肤颜色的字符数不一样

    emojiOne := "1️⃣"
    fmt.Println(utf8.RuneCountInString(emojiOne)) // 3 ❌ 有问题 期望是 1。
}

emoji 可以从这里emojipedia复制。

原因​

这是因为有些 emoji 是多个 unicode 字符 (Code Points) 组合而成的，而 utf8.RuneCountInString() 函数只会计算 unicode 字符的数量。

比如 1️⃣ 这个 emoji，它是由 3 个 Code Points 组成的，分别是：

Rendered by Markdown Table

解决方案​

所以我们需要计算的是 Grapheme Clusters（字符簇）的数量，而不是 Code Points 的数量。

使用第三方库 rivo/uniseg​

package main

import (
    "fmt"

    "github.com/rivo/uniseg"
)

func main() {
    emojiWorld := "🌍"
    fmt.Println(uniseg.GraphemeClusterCount(emojiWorld)) // 1  ✅ 没有问题

    emojiHand := "👉"
    fmt.Println(uniseg.GraphemeClusterCount(emojiHand)) // 1  ✅ 没有问题

    emojiHandBlack := "👉🏿"
    fmt.Println(uniseg.GraphemeClusterCount(emojiHandBlack)) // 1  ✅ 没有问题

    emojiOne := "1️⃣"
    fmt.Println(uniseg.GraphemeClusterCount(emojiOne)) // 1  ✅ 没有问题
}

补充​

其实不只是 emoji，还有一些泰语，阿拉伯语的字符也是由多个 unicode 字符组成的。

Reference​

Go で文字数をカウントする 在 Go 中计算字符数

文字数をカウントする 7 つの方法

Go: Unicode と rune 型

背景​

在 labstack/gommon 的代码中 看到了这个库 valyala/fasttemplate, 于是就去 调查了一下。

什么是 fasttemplate​

fasttemplate 是一个高效的 Go 模板引擎，比 Go 标准库的模板引擎 text/template 快很多，

而且比 strings.Replace, strings.Replacer 和 fmt.Fprintf 都要快。

具体可以看一下 fasttemplate 的 benchmark。

fasttemplate 的使用​

基础用法​

    template := "http://{{host}}/?q={{query}}&foo={{bar}}{{bar}}"
    t := fasttemplate.New(template, "{{", "}}")
    s := t.ExecuteString(map[string]interface{}{
        "host":  "google.com",
        "query": url.QueryEscape("hello=world"),
        "bar":   "foobar",
    })
    fmt.Printf("%s", s)

    // Output:
    // http://google.com/?q=hello%3Dworld&foo=foobarfoobar

高阶用法​

    template := "Hello, [user]! You won [prize]!!! [foobar]"
    t, err := fasttemplate.NewTemplate(template, "[", "]")
    if err != nil {
        log.Fatalf("unexpected error when parsing template: %s", err)
    }
    s := t.ExecuteFuncString(func(w io.Writer, tag string) (int, error) {
        switch tag {
        case "user":
            return w.Write([]byte("John"))
        case "prize":
            return w.Write([]byte("$100500"))
        default:
            return w.Write([]byte(fmt.Sprintf("[unknown tag %q]", tag)))
        }
    })
    fmt.Printf("%s", s)

    // Output:
    // Hello, John! You won $100500!!! [unknown tag "foobar"]

背景&目的​

项目中使用的第三方服务（Shopify）的 API 隔几个月就会发布新版本。

为了及时对应 API 变化，我们希望在该服务的 API 的 RSS 有更新时，能够及时收到通知。

但是 Lark（飞书）并没有提供 RSS 订阅的功能，所以我们需要通过其他方式实现。

实现方法​

通过 Zapier 将 RSS 新文章通知发送到 Lark（飞书）Webhook。

Zapier 是一个在线的自动化工作流程工具，可以将不同的应用程序连接起来，实现自动化工作流程。

实现步骤​

0. 前提条件​

• Lark（飞书）中创建一个接受通知的 Group，并设置 Webhook，用于接收通知。

1. Zapier 中创建一个 Zap​

分 2 步：

• 1️⃣ 添加 RSS by Zapier, 填入 Shopify API RSS 地址, 用于获取 RSS 新文章通知。(图 1)

• 2️⃣ 添加 Code by Zapier, 通过编写代码将 RSS 新文章发送到 Lark（飞书）Webhook。(图 2)

  • 如果是付费用户的话，可以使用 Webhook by Zapier 替代 Code by Zapier，省得写代码。
  • 代码语言支持 JavaScript 和 Python，这里用的是 JavaScript。

图 1 图 2

图 2 中的设置如下：

• 1️⃣ 添加变量 Webhook，用于存放 Lark（飞书）Webhook 地址。
• 2️⃣ 添加变量 Data，用于存放 RSS 新文章通知。 具体存放什么东西可以自己选择，这里存放的是 Title 和 Link等。
• 3️⃣ 代码如下：

// 获取设置的变量
let Webhook = inputData.Webhook.trim();
let Method = "POST";

// 发送给 Webhook 的 JSON 对象 （注意格式要符合 Lark（飞书）Webhook 的要求）
let JSONObject = {
  msg_type: "text",
  content: { text: inputData.Data },
};

// creates the Method, Headers, and Body of the HTTP POST Request
let Options = {
  method: Method,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  body: JSON.stringify(JSONObject),
};

const Request = await fetch(Webhook, Options); // HTTP POST Request
const Response = await Request.json(); // HTTP POST Response

output = { Response, Request, Webhook, Method };

References​

Make a HTTP POST Request to Fire a Webhook with Headers and Parameters via a Zap Code Step

0. Manim 是什么？​

Manim 是一个用于创建数学动画的库，它是由 3Blue1Brown 的Grant Sanderson @X开发的。

Manim 的目标是提供一个用于创建数学动画的简单、快速且强大的工具。

它是一个用 Python 编写的开源项目，它的代码托管在 GitHub 上。

1. 最简单快速的安装方法： 利用 GitHub Codespaces​

1). 打开(或者 fork)我配置好的仓库 wifecooky/manim-devcontainer,​

1️⃣ 点击右上角的 Code 按钮， 2️⃣ 选择 Open with Codespaces，等待构建完成后，就可以在浏览器中使用 Manim 了。

2). 测试一下​

1️⃣ : 打开 example_scenes.py 文件。

2️⃣ : 在 terminal 运行 manim -ql example_scenes.py SquareToCircle。

3️⃣ : 等待运行完成，就可以在 media/videos 目录下看到生成的视频了。

2. 本地最快速的安装方法： 利用 Docker​

0). 安装 Docker​

已经安装过的请跳过这一步。

1). 拉取 Manim 镜像​

docker pull manimcommunity/manim

2). 使用 Docker 启动本地 JupyterLab​

docker run -it -p 8888:8888 manimcommunity/manim jupyter lab --ip=0.0.0.0

3). 打开 JupyterLab 链接并创建一个新的 Notebook​

4). 测试一下​

1️⃣ : 在 Notebook 中运行以下代码

%%manim -qm -v WARNING SquareToCircle

class SquareToCircle(Scene):
   def construct(self):
      square = Square()
      circle = Circle()
      circle.set_fill(PINK, opacity=0.5)
      self.play(Create(square))
      self.play(Transform(square, circle))
      self.wait()

Reference​

Manim easy Installation for all operating systems (Windows, Linux, Mac OS)

docker manimcommunity/manim