#优质博文 #前端 #动画 #工程化 #nextjs #css #react
How I Built My Blog

AI 摘要：Josh W. Comeau 在博客文章中介绍了他如何使用 Next.js（App Router）、React 和 MDX 搭建他的新版博客。技术栈还包括 Linaria 处理 CSS、Shiki 实现代码高亮，以及 MongoDB 支持互动功能（如点赞按钮）。他分享了在迁移过程中遇到的挑战，特别是与 MDX v3 和样式相关的问题。同时，博客使用了 React Spring 和 Framer Motion 实现复杂的动画和自定义组件，提升了交互体验。

via Josh Comeau

Joshwcomeau

How I Built My Blog • Josh W. Comeau

I recently launched a brand new version of this blog, and in this post, I share how it’s built! We’ll examine the tech stack and see how all of the pieces fit together, as well as dig into some of the details to see how they work.

#优质博文 #前端 #css #新标准
时隔两年，Chrome也支持round等CSS数学函数了

AI 摘要：这篇文章介绍了Chrome浏览器对CSS数学函数 mod() 、rem()、round() 的最新支持，尤其重点讲解了 round() 函数的多种用法。通过不同参数设置，round() 函数可以模拟 Math.ceil()、Math.floor() 、Math.round() 和 Math.trunc() 的取整效果。文章还展示了该函数在实际开发中的应用场景，如确保响应式字体大小为整数和模拟 steps() 步阶动画效果。总体而言，round() 函数极具实用性和潜力。

via 张鑫旭

Zhangxinxu

时隔两年，Chrome也支持round等CSS数学函数了 « 张鑫旭-鑫空间-鑫生活

最近Chrome进行了第4批CSS数学函数的支持，包括mod()/rem()/round()，其中round()函数尤为的实用。

#工具推荐 #tools #工程化
这个好，mark 一下
Source Twitter 面条@ccbikai

项目里边创建 .gitignore 文件, 我最喜欢的是 gi node vscode > .gitignore gi 后面带上语言/IDE 等名称就能快速生成一份很全的 .gitignore

Toptal

gitignore.io

Create useful .gitignore files for your project

#follow
ZyHKMIZsFI
follow 邀请码一枚自取喵~领了邀请码记得评论区说一声，希望签到 5 天后能在置顶的消息里评论一下返还一个邀请码，互帮互助~

唯一的要求是：请不要用我的邀请码拿去卖钱，把机会给喜欢 rss 的或者想了解了解 rss 的大伙用~

Telegram

cosine - 前端人の日常频道

#碎碎念 #follow
前些天给某人的也签完到了，晚上8点定时发送再放一个了follow 邀请码（）
5天后能评论还一个邀请码的话就更好了🥰

之前还奇怪为什么腊八不爱吃正餐了，用的网易严选猫粮，一天天的日渐消瘦，还以为是买的鸡肉冻干吃多挑食了。结果今天围着某进口猫粮袋子转圈，喵喵叫老半天，换上之后咔咔狂炫60g（）

总结，网易严选猫粮，橘猫减肥的好帮手（

#碎碎念 #bot #折腾
作为一个发图屯屯鼠，总是在一个时间发一堆图，昨晚突发奇想给我图频 @CosineGallery 的发图 bot @cosPicBot 加了个暂存的功能，再也不用担心一下子发太多了喵🥰

https://github.com/SomeACG/cosine-pic-bot

#优质博文 #书签整理 #tools
收藏不等于有用，6 条准则助我高效管理书签 | 少数派

AI 摘要：这篇文章介绍了如何通过6个准则高效管理浏览器书签。准则包括：设定收藏标准、使用单层目录和标签、简化命名格式、方便检索、即时分类和使用阅读清单。作者强调避免无效收藏，删除无用和失效的书签，并通过简洁的命名和标签管理，使书签更加直观和易于查找。文章还推荐了整理书签的工具和插件，帮助读者优化书签管理，提高日常工作和生活效率。

感觉推荐的挺有用的，以下是原文摘出来总结的
1. 推荐一个 Chrome 浏览器插件「批量清理书签插件 Bookmarks clean up」，用于首步整理，清理无效书签和重复书签
2. 面对新书签，制定明确的收藏标准，如果不能肯定回答以上问题，那么这个书签可能就不需要被收藏。并且作者提供了自己的收藏标准
3. 使用单层目录和标签对书签分类，（按照用途分类/按照频率分类：如每日使用、偶尔使用等/按照项目分类：如不同的工作项目、学习课程等）要方便记忆。
按固定格式命名，· <分类> | <描述> <标签1> <标签2> <标签3>
或者，让 AI 帮你重命名书签，「能不动手就动脑」。
4. 好的命名大家都会（不，我不会QAQ），但缺少一个好用的搜索工具，默认的书签搜索很不方便。浏览器无鼠标操作的插件 Vimium-c-全键盘操作浏览器。

#优质博文 #阮一峰的科技周刊 #前端 #在线网站 #tools
科技爱好者周刊（第 318 期）：创业咖啡馆的记忆

1. 怎么写 CSS 的打印样式（英文） 📓 本文是一篇教程，介绍网页打印样式的 CSS 写法。涵盖了页面布局控制、页眉页脚处理及通过 JavaScript 生成打印友好内容等技术。 #css
2. 使用 Caddy 部署 Web 应用程序（英文） 📓 一篇长文，介绍 Caddy 如何当作 Web 服务器的初学者教程。#caddy #部署 #docker
3. 好的重构 vs 坏的重构（英文） 📓 有些时候，重构之后的代码比之前还难懂。本文逐一举例，分析怎样的重构是好的，怎样是坏的。
4. 哨兵值是什么（英文）📓 这篇短文通过牙膏的例子，解释什么是编程使用的哨兵值（sentinel value）。
5. common-intellisense 📓 VS Code 插件，为多种常用的前端 UI 库提供注释和类型提示。 #vscode
6. Franzelio 一个有意思的网页小游戏，在网页上画线，反弹小球，发出的声音组成旋律。

Betterstack

Deploying Web Apps with Caddy: A Beginner's Guide | Better Stack Community

Explore Caddy's key features: static file serving, reverse proxying, automatic HTTPS, and integrations for log and uptime management