#优质博文 #前端 #css
Balancing Text In CSS

AI 摘要：Ahmad Shadeed 介绍了如何通过 CSS 的 text-wrap 属性实现文本的平衡布局。他详细解释了 text-wrap: balance 和 text-wrap: pretty 的用法，展示了如何在浏览器中自动平衡文本行的长度，以提高页面的美观度和可读性。文章还列举了实际应用场景，如在标题、卡片内容、模态框标题和工具提示中使用文本平衡。此外，Shadeed 讨论了该属性的局限性，并提出了改进建议，如引入 text-wrap-ratio 属性，以提供更精细的控制。

via Ahmad Shadeed

Ishadeed

Balancing Text In CSS

Make text look more balanced with text-wrap in CSS.

#优质博文 #工程化 #前端 #template
Mark 一下给某初学萌新看（）

Setting up a ESLint, Prettier, Husky and lint-staged Integration with TypeScript in Next.js 13 | 14

AI 摘要：这篇文章详细介绍了如何在 Next.js 项目中集成 ESLint、Prettier、Husky 和 lint-staged，确保代码质量和一致性。

主要步骤：
1. 创建 Next.js 项目：使用 npx create-next-app 创建 Next.js 项目并选择 TypeScript。
2. 安装依赖：安装 ESLint、Prettier、Husky、lint-staged 等开发依赖。
3. 配置 Prettier：通过 .prettierrc 文件设置 Prettier 格式化规则，使用 prettier-plugin-tailwindcss 插件进行 Tailwind CSS 格式化。
4. 配置 ESLint：通过 .eslintrc.js 文件设置 ESLint 规则，扩展 Next.js、TypeScript 和 React 规则，确保代码的一致性和可维护性。
5. 配置 Husky：使用 Husky 在提交前运行 `lint-staged`，确保代码在提交前经过格式化和检查。
6. 配置 lint-staged：通过 .lintstagedrc 文件设置 lint-staged 规则，限定仅对已暂存的文件进行格式化和检查。
7. 更新 package.json：添加脚本命令以便执行 lint、prettier 和 Husky 初始化。
8. 测试配置：通过运行 npm run lint 等命令检查设置是否生效。

此设置帮助开发者在提交代码时自动执行格式化和 lint 检查，从而保证代码质量并减少潜在问题。

Medium

Setting up a ESLint, Prettier, Husky and lint-staged Integration with TypeScript in Next.js 13 | 14

Next.js brings exciting updates and improvements, making it even more powerful and user-friendly. In this blog post, we’ll explore how to…

#工具推荐 #前端 #组件库 #tailwind #react #nextjs #motion #落地页 #tools #动画

昨天群里看到的，相当漂亮的落地页酷炫组件库，且适用我的技术栈，加入知识库方便检索。

Aceternity UI 是一个前端UI组件库，专为快速构建美观网站而设计。用户可以通过复制粘贴组件代码，轻松集成到项目中，无需担心样式或动画。由 Next.js、React、TailwindCSS 和 Framer Motion，提供丰富的模板和组件，帮助开发者迅速提升网站外观和功能。

https://ui.aceternity.com/

#优质博文 #astro #tailwind #前端 #工程化
Setup Astro 3.0 with Tailwind CSS Prettier Plugin

AI 摘要：这篇文章介绍了如何在 Astro 3.0 项目中设置 Prettier 来自动排序 Tailwind CSS 类。通过安装 prettier-plugin-astro 和 prettier-plugin-tailwindcss 插件，并更新 .prettierrc 和 VSCode 设置，可以实现代码自动格式化和 Tailwind 类的自动排序。文章详细说明了安装、配置以及验证过程，帮助开发者优化代码风格和提高开发效率。

via Web Reaper

Web Reaper

Setup Astro 3.0 with Tailwind CSS Prettier Plugin

Save time and eliminate styling discussion with auto-formatting and tailwind auto-class-ordering on save by setting up Prettier for Tailwind CSS in your Astro 3.0 projects.

#工具推荐 #astro #组件库 #开源 #趣站
Julian's Web Garden 是一个旨在构建现代、渐进性网站的开源工具集，利用Astro框架的优势。它提供了一套可重用的组件和工具配置，关注通用的网页模式和增强功能，支持HTML、CSS和JavaScript的最佳实践。该项目采用“岛屿架构”思想，允许使用最小化的代码和小型文件，避免传统UI框架的臃肿，同时支持动态JS小组件的插入，确保未来兼容性和代码的高效性。

我是在这里面发现了一个 astro-tooltips 试了一下挺好用的，网页也很好看。

https://code.juliancataldo.com/#julians-web-garden

Julian's Web Garden

Julian's Web Garden | Building blocks for making progressive and future-proof websites.
Components collection features Astro, HTML…

蓝点网订阅频道

Photo

#碎碎念 #插件
又是插件在更新后加坏东西，浏览器插件一定要谨慎更新或者用完就卸😢

#优质博文
还挺有意思的？这么看我完全是P人嘛
不，突然又感觉我是中间派（）

P 人也要时间管理？2024 的实践小结

对于生活变化的包容度更高
在稳定的、有纪律的、高度有秩序的生活中，J 人肯定是效率更高、也能更好地执行任务的。但是生活不会是永远稳定守序、在你个人控制范围内的。

现实生活中突发的事件很多：大到家中的变故、突然的工作机会，小到朋友的邀约、临时的加班，甚至有可能只是因为昨天晚上没睡好早上起床气很不开心，这些都可能让生活偏离原本计划的方向，J 人在遇到这些情况打乱计划时候，很容易陷入焦虑无措，就好像生活的剧本没有按照彩排上演一样。然而，为什么不能给自己的生活一些即兴发挥的空间呢。

三分钟热度也是动力啊
我其实是一个对什么事情都三分钟热度的人——从小就经常被批评「为什么做什么事情都虎头蛇尾的」「为什么今天说要做的事情明天又不干了」。我以前也常常觉得自己这个毛病很不好，学什么都坚持不下来。

但是，我现在认为，不要因为不能坚持就阻碍自己迈出第一步，也不要一开始就给自己定太多的要求和预期。而且，我发现「热度」是循环的。就比如说今天想学吉他，弹了三天不想弹了，但是又过了一个星期别的东西又都不好玩了，要不还是练练吉他。嗯，虽然不能每天坚持，但这「三分钟热度」说来就来，说走就走，说回归就回归，这怎么不算是一种「鬼打墙式的坚持」呢？

突然爆肝时候非常有战斗力
P 人的战斗力真的会在「突如其来的想法」以及紧急的 ddl 中大爆发。有时候一个想法突然出现，我可以突然从下班肝到半夜——或许这项目平时拖拖拉拉一个月才能做好，但是有时候脑子一热一天说不定就全干完了。正所谓，半小时的任务 P 人可能要干 8 小时，8 小时的任务 P 人也可能只要半小时。P 人的能量图就好像锯齿波交流电一样，一阵一阵的，但是有效值其实又和恒温的J人旗鼓相当。

少数派 - 高品质数字消费指南

P 人也要时间管理？2024 的实践小结 - 少数派

我过去一年摸索出了一套 「对于 P 人来说没那么大压力的时间管理方法」，这个方法虽然不适合所有的人，但是希望可以帮助到想要做出一些改变的 P 人以及想要变得松弛的 J 人（？）。