十五周刊 - 103
3 分钟阅读

十五周刊 - 103

2024 第 1 周周报

欢迎来到十五周刊,我们每周都会分享有价值的前端技术文章,让你随时掌握前端的最新动态。此外,我们还会介绍一些实用的软件工具,帮助你提升工作效率。同时,我们也会分享一些个人生活感悟,希望通过分享,能够给你的生活带来一些启示和思考。希望你会喜欢我们的内容。

动态裁剪字体

使用 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 实现带动画的主题切换

Tweet not found

The embedded tweet could not be found…

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 进行周回顾

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