#优质博文 #前端 #css #小知识
CSS initial-letter属性，嗯……也就这样吧

AI 摘要：这篇文章向我们展示了CSS initial-letter 属性的功能和用法。initial-letter 属性主要用于设置首字母可以占据的文本行数，以改善首字母放大时的多行排版。这个属性支持 1~2 个大于 0 的数值，如果只设置了一个值，那么第二个值会默认等于第一个值。（例如 initial-letter:3 等同于 initial-letter:3 3，也就是占据3行下沉3行）然而， initial-letter 属性有一些限制：它只能应用在 ::first-letter 伪元素中，在中文环境下并没有太大的实用性，支持的 CSS 属性也相对有限，无法满足精确定位的需求。因此，作者认为这个属性的实用价值有限，前端开发者了解基本知识即可。

via zhangxinxu

#css #前端 #demo #小知识 #codepen

CSS Tip 📖

Use CSS shape-outside to wrap text around shapes

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%));
}

jhey 分享了使用CSS shape-outside 属性来围绕形状包裹文本的技巧。通过在两列布局中为每一列设置一个半圆形状，可以实现复杂的文本环绕效果。此方法要求手动分割内容到列中，不支持与 column-count 属性协同工作。尽管有这样的限制，但这种方法适用于某些登陆页等场景，是2024年中浮动布局(float layout)的一个罕见但有效的应用案例。

Origin Post | Codepen

#前端 #资源推荐 #tools #vscode #tailwind #css

vscode 插件推荐：Tailwind CSS ClassName Highlight

vscode插件，高亮有效的 Tailwind 类名（下划线），可以跟非 tailwind 区分开来

Github 地址

#资源推荐 #tools #AI #在线工具
AIRemover 免费 AI 图片背景在线清除工具

AI 摘要： AIRemover 是一款完全免费的在线AI背景去除工具，能够通过智能AI技术模型快速清除图片中不需要的背景。这个工具自动识别前景和背景，无需手动干预，仅需上传图片即可。目前，它能够快速识别人物、商品和动物三种类型的照片，处理完成后用户可以查看前后对比，并下载 PNG 格式的结果图片，而且使用这个工具不需要注册或登录​

via Boss设计

www.bgremove.club

bgremove.club - This website is for sale! - bgremove Resources and Information.

This website is for sale! bgremove.club is your first and best source for all of the information you’re looking for. From general topics to more of what you would expect to find here, bgremove.club has it all. We hope you find what you are searching for!

#优质博文 #前端 #工程化
2024 年，该如何写一个全面兼容的 NPM 库

AI 摘要：这篇文章介绍了如何创建一个全面兼容的 NPM 库，包括 ESM/CJS 格式、不同版本的 Node.js，以及TypeScript 的兼容。作者通过实例展示了从初始化项目、选择打包工具（Vite），到解决特定技术挑战，如保留 "use client" 指令、生成类型定义文件 .d.ts ，以及在 package.json 中配置不同导出格式的过程。此外，还讨论了如何通过使用 rollup-plugin-preserve-directives 和 vite-plugin-dts 插件解决打包和类型声明的问题，以及如何针对旧版本 Node.js 处理非索引导出的兼容性问题。

via innei

innei.in

2024 年，该如何写一个全面兼容的 NPM 库

最近，把 rc-modal 做成了一个库。写代码倒是不难，无非就是把原本的代码封装抽象一下。倒是发包，和作为使用者如何使用这个包难住了。 首先，我们知道现在一个 npm 包如果不做 Pure ESM 的话，你需要考虑兼容 CJS/ESM，node 老版本和新版本（吃不吃 package.json

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 293 期）：一周是一年的2%

1. VS Code 的垂直 Tab 页（英文） 📓 本文介绍如何在 VS Code 编辑器里面，放置一个垂直的边栏，进行标签切换。
2. LapisCV 🧰 基于 Obsidian / Typora 编辑器的 Markdown 简历模板，可以导出 PDF 文件。（@YiNNx 投稿）
3. git-diff-view 🧰 一个 React/Vue 组件，用来显示 git diff 的结果，类似于 GitHub 的样式。
4. AI 时间线 🧰 一个有意思的网站，输入一个关键词，自动生成该词的时间线，上图是输入"github"的生成结果，它的代码仓库在 GitHub。（@zhugezifang 投稿） #趣站
5. Earthworm 🧰 一个开源的 Web 程序，通过连词造句的方式，经过不断重复练习英语，线上体验。（@cuixiaorui 投稿）#趣站
6. Riffusion 🧰 一个免费的 AI 工具，给出一段提示，它会生成相应的歌曲，并且是带有歌词、人声演唱的。 #AI
7. TypeScript 互动教程📓 通过一个个小练习，讲授 TypeScript 语法。#typescript
8. IP 信息查询合集 📓 这个仓库收集可以查询 IP 信息的免费网站。

Weberdominik

Vertical tabs in Visual Studio Code

With vertical tabs it's possible to have an overview over much more open files. Here's how to get it in VS Code.

#优质博文 #前端 #css #tailwind
unocss 究竟比 tailwindcss 快多少？

AI 摘要：文章主要对比了 unocss 和 tailwindcss 两种原子化 CSS 引擎的性能。unocss 的快速性能主要归因于其不需要解析 CSS 抽象语法树，直接通过正则表达式从内容中提取 token 生成样式。根据官方最新的测试结果，unocss 的速度比 tailwindcss 快 3.7 倍。但是当为两者增加解析 CSS 抽象语法树的负重后，作为 vite 插件使用的 unocss 的速度是 tailwindcss 的 2.52 倍。文章强调，最终采用哪种技术取决于项目需求和技术生态。期待 unocss 和 tailwindcss 它们之间相互卷起来。

via 掘金 icebreaker

juejin.cn

unocss 究竟比 tailwindcss 快多少？ - 掘金

unocss 究竟比 tailwindcss 快多少？ 前言 我们知道 unocss 很快，也许是目前最快的原子化 CSS 引擎 (没有之一)。 unocss 解释它为什么这么快的原因，是因为它不用去

#优质博文 #前端 #css #新标准
CSS @scope 他来了

AI 摘要： 这篇文章介绍了新的 CSS 特性 @scope 规则。 @scope 规则可以实现 CSS 选择器的嵌套书写，简化代码编写过程，使得代码更加直观易懂。例如，只有在特定的 nav 标签内的元素才会应用特定的样式，规则内的选择器优先级也会被计算在内。此外，使用 "to" 语法可以排除特定元素，使其不被选择器匹配。然而，虽然 @scope 简化了书写，它并非实现了 CSS 的作用域功能，即不能保证内部的 CSS 选择器不会影响外部的 CSS。因此，例如 Vue 和 React 这样的框架通过为类名增加随机后缀来实现局部 CSS 功能的方法在 @scope 普及后仍有应用场景，尽管其市场可能不再像现在这么大。

「随着Safari TP版本已经支持CSS @scope规则，这个新特性在不久的将来在Web中大放异彩已是必然。」

Can I use @scope

via zhangxinxu

#资源推荐 #tools #设计 #AI
Lummi | AI 人工智能生成图库，完全免费可商用！
网站地址 🔗 https://www.lummi.ai/

Lummi是一个AI人工智能生成的图库，所有图片都完全免费且可商用。该图库有着丰富的色彩搭配和精细的构图设计，甚至有摄影大作的感觉。涵盖各行业的如人物、动物、实物、风景、艺术等主题的图片在库中都能找到，并且是通过AI生成的，特别适合需要寻找免费商用图片的朋友们以及博主们。如果你是Figma的设计师，还可以使用专用的Lummi插件进行图片搜索，操作方便，简化了下载和使用流程，整体体验跟 Unsplash 图库很像

via Boss设计

风向旗参考快讯

英国团队首次使用 Apple Vision Pro 完成外科手术

伦敦私人克伦威尔医院的一个团队在手术中使用 Apple Vision Pro 头显来修复一名男性患者的脊柱。与外科医生一起工作的器械护士佩戴该设备来帮助准备、跟踪手术并选择合适的工具。该设备使他们能够看到现实世界，但他们面前的叠加虚拟屏幕显示重要信息，称为增强现实(AR)。伦敦独立医院首席器械护士 Suvi Verho 表示，这项技术是“游戏规则改变者”，并补充道：“它消除了人为错误，它消除了猜测。”

—— 每日邮报，新闻稿

#碎碎念
之前就觉得 Vision Pro 应该能用在医学领域
开眼了23333

#优质博文 #前端 #资源推荐 #tools
The Evolution of Shiki v1.0

AI 摘要： Shiki v1.0，一个由Nuxt推动发展的语法高亮工具，基于VS Code使用的TextMate语法和主题。与其他在浏览器运行的高亮工具不同，Shiki通过预先高亮代码并将HTML发送给客户端，实现了零JavaScript下的精确和美观的代码高亮显示。为了克服其无法在浏览器中运行和处理动态代码的限制，引入了一个新版本Shikiji，旨在使Shiki运行环境无关、性能高效且完全支持ESM。这个改进使得Shiki不仅可以在任何运行时环境中工作，还可以通过单行代码从CDN导入并在浏览器中运行。此外，通过合并回Shiki，v1.0版本解决了之前版本中的绝大多数开放问题，提高了整个社区的利益​​。

via Anthony Fu

Nuxt

The Evolution of Shiki v1.0 · Nuxt Blog

Shiki v1.0 came with many improvements and features - see how Nuxt drives the evolution of Shiki!

#优质博文 #前端 #开源
一个六岁开源项目的崩溃与新生

「太棒了，致敬一下，还是头一次见到打开来卡这么久的 PR，这工作量哈人」

AI 摘要：RSSHub 开源项表面上项目活跃，有3万星、900 多贡献者、月请求 3 亿多次，然而背后是高昂的服务器费用和繁重的维护工作。该项目在六年前开发，当时流行的许多 Node.js 技术和依赖性，被吹捧为“下一代”，现在已经过时。今天流行的许多新技术，如 JSX、TypeScript 和无服务器，无法应用，项目架构不合理，各路由信息分散，更改困难，增加了工作量和出错机率。为了解决这个问题，该项目已使用现代框架Hono进行了重设计和重写。变化包括从 Koa 切换到 Hono，转向 TypeScript、 ESM 和 JSX，并实施了新的路由标准。这些改进旨在提高可维护性和性能，使 RSSHub 能够专注于开发新功能。

via DIYgod

The Crash and Rebirth of a Six-Year-Old Open Source Project - DIYgod

我有一个维护了六年的开源项目—— RSSHub，它正在面临崩溃

表面上，它有接近 30k Stars、900 多 Contributors、每月 3 亿多次请求和数不清的用户、每月几十刀的赞助、有源源不断的 issue 和 pr、代码几乎每天更新，非常健康和充满活力