#优质博文 #CSS #设计 #前端 #小知识
cool，现在只需要一个 shape-outside 和 shape-image-threshold 就可以实现这样的图像 Alpha 通道环绕效果了。
以及，CSS shade-* 的支持已经 Baseline Widely available 广泛可用了。

Getting Creative With Images in Long-Form Content | CSS-Tricks

AI 摘要：本文探讨了如何在长篇内容（long-form content）中创造性地使用图片。作者认为图片不仅是插图工具，更能影响页面节奏、阅读体验和用户情绪。通过打破网格（grid）、使用全幅图像（full-bleed）、模块化布局（modular grid）、CSS Shapes、创意化图注（caption）以及留白（whitespace）管理，图片可以成为叙事与设计的一部分，从而提升文章的表现力与吸引力。

1. 引言：长内容与图片的关系
• 传统的内联矩形图片容易显得功能化但缺乏灵感
• 图片在长文本中应参与节奏与气氛塑造，而不是“附加元素”

2. 打破与利用 Grid（网格系统）
• 网格让排版平衡、整齐，利于阅读，但可能过于呆板
• 偶尔打破网格：扩大图片尺寸、偏移位置，可突出重点并增加灵动感

3. 图像宽度的处理：Text-width vs Full-bleed
• Text-width（跟随文本宽度）：适合信息图、图表，保持阅读秩序
• Full-bleed（全幅铺满）：制造视觉冲击力，打破阅读节奏，但不可滥用

4. Modular Grid（模块化网格）展示多图
• 通过网格组织多张图片构成整体布局，而非单调堆叠
• 可以混合横幅与竖幅图，用大小对比制造层次感，突出相关性

5. CSS Shapes 与文本环绕
• 传统文本环绕矩形边框，可能与图片形状不匹配
• CSS shape-outside 可让文字依据图片轮廓流动，更加自然、富有- 有表现力
• 利用图片 alpha 通道直接定义形状，减少复杂路径

6. Captions（图注）的再设计
• 不必是小字附注，它们可以是故事叙述的主动元素
• 图注可放置在图片侧边、覆盖图片，甚至作为装饰化的 pull quote

7. Whitespace（留白）的作用
• 紧密留白：制造张力，适合多图组合
• 宽松留白：形成停顿，让内容节奏更舒缓
• 留白是页面呼吸感与层次控制的重要因素

author Andy Clarke

#前端 #css #动画 #tools #小知识

jhey ʕ•ᴥ•ʔ@jh3yy: css animation tip
don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

CSS 动画技巧
不要忽视开发者工具中的动画检查器——它非常适合调试和调整时间线 👇

https://fixupx.com/jh3yy/status/1940905787750256826

FixupX

0:33

jhey ʕ•ᴥ•ʔ (@jh3yy)

css animation tip

don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

Quoting jhey ʕ•ᴥ•ʔ (@jh3yy)

css cyber[popover] 2025 w/ sfx

(jus' javascript for the audio and keyboard shortcuts)

#前端 #react #compiler #小知识

乐呵

2024前端React最新面经:
1、请简述React Compiler原理
2、请简述AST、HIR、SSA的数据结构和作用
3、请列出三个React Compiler Pass并简述其作用

Source Twitter @hd_nvim

X (formerly Twitter)

Herrington Darkholme (@hd_nvim) on X

2024前端React最新面经:
1、请简述React Compiler原理
2、请简述AST、HIR、SSA的数据结构和作用
3、请列出三个React Compiler Pass并简述其作用

#前端 #小知识 #typescript #工程化 #ts

学 typescript 最蛋疼的地方就是 tsconfig 这个配置文件，无限多眼花缭乱看起来不知所云的选项，官方文档也写的不清楚。过一段时间就忘，每次查文档还很痛苦，昨天看到这篇 TSConfig Cheatsheet 觉得非常棒：
https://totaltypescript.com/tsconfig-cheat-sheet

看完了能基本理解这些配置的大体内容，同时还有人根据这篇文章，写了个可视化工具，更方便了：
https://tsconfig.guide

想学习 typescript 的朋友可以收藏看下，我觉得是很棒的资源。

Source Twitter @vikingmute

Total TypeScript

The TSConfig Cheat Sheet

Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.

#前端 #小知识 #调试
https://vxtwitter.com/jh3yy/status/1782176868080210159

使用谷歌开发者工具中的 Sensors 在不使用真机设备的情况下调试设备控制的 CSS 视差效果

vxTwitter / fixvx

jhey ▲🐻🎈 (@jh3yy)

Want to debug device-controlled CSS parallax effects without using a device?

Simulate device orientation in Chrome DevTools 👇

【QRT of jhey ▲🐻🎈 (@jh3yy):】
'Parallax cards with masked blurs v2 ✨

– Device…

💖 2.95K 🔁 337

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 294 期）：崖门海战的感想

1. Web 组件如何适配 JS 框架（英文） 📓 Web 组件是浏览器原生的组件格式，本文介绍怎么将这种格式用于各种 JS 前端框架。
2. CSS 的悬挂标点属性（英文） 📓 如果标点正好在行首或行尾，是否要跟上下文对齐？这就要用到 CSS 的 hanging-punctuation 属性。 #css #小知识
3. Frogmouth 🧰 命令行的 Markdown 阅读器。
4. SSH3 🧰 使用 QUIC + TLS 重新实现的 SSH 加密登陆工具，支持 UDP 端口转发。
5. X-Hiring 🧰 每日自动抓取于 V2EX 和电鸭社区的招聘信息，使用 Google AI 提取摘要。（@hehehai 投稿）
6. pear-rec 🧰 一个在线的 GIF 编辑工具，也可以对 MP4 视频进行解析导入。（@027xiguapi 投稿）
7. Vmail.dev 🧰 使用 Cloudflare email worker 实现的临时邮箱服务，可以自己部署。（@yesmore 投稿）
8. VidHub 🧰 苹果设备的视频播放器，可以管理和播放本地、网盘、NAS、Cloud Drive 来源的视频。（@julycamera 投稿）
9. KanjiVG 🧰 这个项目提供汉字的 SVG 文件下载，可以显示笔划动画。
10. DesignSystemHunt.com 🧰 这个网站收集各种设计系统（design system），已经有130多个。

「有一段时间，我使用 Gentoo（一个需要自己从头编译源码的 Linux 发行版）。当我的宿舍在寒冷的冬夜里太冷时，我就会在它上面重新编译 Open Office。

-- Hacker News 读者」 😀

Jakelazaroff

Web Components Eliminate JavaScript Framework Lock-in | jakelazaroff.com

Web components can dramatically loosen the coupling of JavaScript frameworks. To prove it, we're going to do something kinda crazy: build an app where every single component is written in a different JavaScript framework.

#优质博文 #前端 #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