#前端 #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