十五周刊 - 103

动态裁剪字体

使用 font-min 可以按照指定的文字，对字体文件进行裁剪。

js
1import Fontmin from 'fontmin';
2
3const fontmin = new Fontmin()
4    .use(Fontmin.glyph({
5        text: '天地玄黄 宇宙洪荒',
6        hinting: false         // keep ttf hint info (fpgm, prep, cvt). default = true
7    }));

利用这个特性可以解决生成 og 时，中文字体过大的问题，具体方案可以参考 这篇文章。

使用 View Transitions 实现带动画的主题切换

Demo 以及代码在这里。

使用上面的示例代码注意加上 css:

css
1::view-transition-old(root),
2::view-transition-new(root) {
3  animation: none;
4}

这个代码也被我借鉴到了我的个人网站上，你可以点击右上角的切换主题试试效果。

Next.js 官方教程

https://nextjs.org/learn

这是 Vercel 官方出品的 Next.js 入门教程，比较全面。

除了前端相关，还有一些后端知识，比如数据库、登录、接口分页等。

代码生成图片分享工具 Chalk

https://chalk.ist/

支持高亮行，支持多文件。这个多文件还挺有意思的，可以用来做代码片段分享。

类似 shadcn 的动画库 Aceternity UI

https://ui.aceternity.com/components/floating-navbar

类似 shadcn 的理念，主打一个复制粘贴即可使用的动画库。基于 Tailwind 以及 Framer Motion。

复制粘贴的好处是我们可以按心意随意调整，我这个个人网站大量使用了这个库，非常赞。

精益副业：程序员如何优雅地做副业

https://github.com/easychen/lean-side-bussiness

我做了什么

个人网站升级

元旦假期，我重构了我的个人网站，技术栈从原先的 Astro 换成了 Next.js。

这次没有再使用第三方模板，而是自己从零开始搭建，样式上使用了 Tailwind + Shadcn + Aceternity。

首页使用了 Bento 设计，然后将几个常用的内容做成了卡片。这样以后也能随时扩展。

仓库地址在这里：https://github.com/haydenull/blog

尝试使用 Logseq WhiteBoard 进行周回顾

白板的可以将季度目标，周目标，以及本周每天的日记平铺到一起，非常适合周回顾。