十五周刊 - 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 官方教程
这是 Vercel 官方出品的 Next.js 入门教程,比较全面。
除了前端相关,还有一些后端知识,比如数据库、登录、接口分页等。
代码生成图片分享工具 Chalk
支持高亮行,支持多文件。这个多文件还挺有意思的,可以用来做代码片段分享。
类似 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 进行周回顾
白板的可以将季度目标,周目标,以及本周每天的日记平铺到一起,非常适合周回顾。