今天abc看了啥🤔

现在我也不知道这频道发了啥了，各位慢慢吃瓜，将就着看

联系我请去 @abc1763613206

友链儿
@cyberElaina
@rvalue_daily
@billchenla

Search: #前端

  1. 今天abc看了啥🤔

    #TypeScript #前端 #新动态它来了（！）Announcing TypeScript 7.0 | TypeScript：微软正式发布 TypeScript 7.0，使用 Go 语言重写了编译器（tsc），带来近 10 倍的构建速度提升与更低的内存占用，全面进入原生高性能时代

    Forwarded from cosine - 前端人の日常频道
    #TypeScript #前端 #新动态
    它来了（！）
    Announcing TypeScript 7.0 | TypeScript：微软正式发布 TypeScript 7.0，使用 Go 语言重写了编译器（tsc），带来近 10 倍的构建速度提升与更低的内存占用，全面进入原生高性能时代。

    AI 摘要：
    • Go 语言原生重写：TypeScript 7.0 将原有的 JS/TS 编译器使用 Go 进行了完整的原生移植，支持多线程并行处理，完整构建速度相较于旧版本提升了 8 到 12 倍。
    • 内存消耗优化：得益于 Go 的底层内存管理，在 VS Code、Sentry 等大型项目构建中，内存占用下降了 10% 到 26% 不等。
    • 编辑器体验秒开：新版完全适配 LSP 并进行了并发优化，在 VS Code 中打开大型项目并显示首个错误的时间从 17.5 秒缩短至 1.3 秒，反馈循环极大缩短。
    • 无缝迁移与兼容：项目保留了原编译器的结构和数万个测试用例，确保编译结果与旧版本完全一致，开发者直接升级依赖即可无缝享受性能红利。
    Microsoft News
    Announcing TypeScript 7.0
    Announcing TypeScript 7.0
    Today we are proud to announce the availability of TypeScript 7, a 10x faster native port of TypeScript! Since its early days, TypeScript has promised to

    TypeScript前端新动态

  2. 今天abc看了啥🤔

    #优质博文 #CSS #动画 #前端In-N-Out Animations: Popovers (Part 2/3) | Master.dev：利用 CSS 新特性给 Popover API 元素添加平滑的进出场动画

    Forwarded from cosine - 前端人の日常频道
    #优质博文 #CSS #动画 #前端
    In-N-Out Animations: Popovers (Part 2/3) | Master.dev：利用 CSS 新特性给 Popover API 元素添加平滑的进出场动画。

    AI 摘要：文章展示了如何将 Dialog 动画的“3-2-1”级联规则（利用 @starting-style 和 :popover-open）复用到原生 popover 上，实现从 display: none 展开时的平滑过渡。此外还介绍了针对 prefers-reduced-motion 的减弱动画适配，以及解决 Safari 浏览器在退场动画中丢失锚点定位的兼容小妙招。


    In-N-Out Animations: View Transitions (Part 3/3) | Master.dev：使用 View Transitions API 优雅解决 DOM 节点真实增删时的进出场动画难题。

    AI 摘要：针对元素在 DOM 中真正被创建或销毁时（传统动画的 Hard Mode）的退场动画，文章介绍了使用 View Transitions API 的解决方案。通过 document.startViewTransition 结合 ::view-transition-new() / ::view-transition-old() 和 @keyframes，即可用极简的代码实现极其丝滑的淡入淡出及位移效果。
    master.dev
    In-N-Out Animations: Popovers (Part 2/3)
    In-N-Out Animations: Popovers (Part 2/3)
    Using our 3, 2, 1 state system, we can make popovers animate on

    优质博文CSS动画前端

  3. 今天abc看了啥🤔

    #优质博文 #CSS #前端 #动画 #courseA First Look at Scroll-Triggered Animations：Chrome 146 率先支持了纯 CSS 的滚动触发动画，让开发者不用 JS 也能实现类似 Intersection Observer 的元素入场动画

    Forwarded from cosine - 前端人の日常频道
    #优质博文 #CSS #前端 #动画 #course
    A First Look at Scroll-Triggered Animations：Chrome 146 率先支持了纯 CSS 的滚动触发动画，让开发者不用 JS 也能实现类似 Intersection Observer 的元素入场动画。

    AI 摘要：文章介绍了 Chrome 146 引入的新特性：滚动触发动画（Scroll-Triggered Animations）。不同于与滚动进度完全绑定的 Scroll-Driven 动画，Scroll-Triggered 允许在元素滚动到设定的视口阈值（如完全进入视口）时，直接触发并播放一段常规的、有固定时长的 CSS 动画。通过新属性 timeline-trigger 和 animation-trigger，开发者可以轻松控制动画的触发时机和播放行为（如仅播放一次或随着滚动进出反复触发），进一步减少了对 JavaScript 监听的依赖。
    CSS-Tricks
    A First Look at Scroll-Triggered Animations | CSS-Tricks
    A First Look at Scroll-Triggered Animations | CSS-Tricks
    Let's poke at the differences between scroll-driven and scroll-triggered animations.

    优质博文CSS前端动画course

  4. 今天abc看了啥🤔

    #前端 #供应链攻击 #npm #安全 #新动态想必大家都看麻了x早用 pnpm 早超生，俩周以内的依赖更新不装（（Active Supply Chain Attack Compromises @antv Packages on npm：npm 上的 AntV 可视化库包被植入恶意代码，构成活跃的供应链攻击

    Forwarded from cosine - 前端人の日常频道
    #前端 #供应链攻击 #npm #安全 #新动态
    想必大家都看麻了x
    早用 pnpm 早超生，俩周以内的依赖更新不装（（
    Active Supply Chain Attack Compromises @antv Packages on npm：npm 上的 AntV 可视化库包被植入恶意代码，构成活跃的供应链攻击。

    AI 摘要：2026 年 5 月，Socket Research Team 发现 @antv 系列 npm 包遭到供应链攻击，攻击者发布恶意版本，通过 postinstall 脚本窃取环境变量和 npm token，影响 @antv/g6、@antv/util 等多个核心包，建议用户立即版本锁定并轮换密钥。

    [以下是方便搜索索引的大纲(AI 生成)，请读原文]
    1. 攻击事件概览
    • 2026 年 5 月 11–19 日期间，大量 @antv 子包集中发布恶意版本，时间戳显示攻击窗口集中。
    • Socket 安全团队通过实时包监控（package monitoring）发现异常发布行为并发出警报。

    2. 攻击手法与技术细节
    • 恶意代码嵌入 postinstall 钩子，安装时自动执行，窃取系统环境变量、npm token 及敏感配置。
    • 攻击者利用泄露的维护者凭据或通过社会工程学获取 npm 发布权限。

    3. 受影响包范围
    • 涉及 @antv/scale、@antv/attr、@antv/component、@antv/g6 等数十个包的多个版本。
    • 所有在 2026-05-11 至 2026-05-19 时间窗口内发布的版本均为恶意版本。

    4. 紧急缓解措施
    • 锁定依赖版本，避免使用上述时间窗口内的版本。
    • 运行 npm audit 或使用 Socket 工具扫描项目并移除受影响包。
    • 立即轮换所有可能泄露的 npm token、环境变量及 API 密钥。
    • 关注 AntV 官方后续安全公告，升级到修复后的版本。
    Socket
    Mini Shai-Hulud Hits @antv Ecosystem, 639 Compromised npm Pa...
    Mini Shai-Hulud Hits @antv Ecosystem, 639 Compromised npm Pa...
    Active npm supply chain attack compromises @antv packages in a fast-moving malicious publish wave tied to Mini Shai-Hulud.

    前端供应链攻击npm安全新动态

  5. 今天abc看了啥🤔

    #优质博文 #CSS #前端 #新动态Gap decorations: Now available in Chromium | Chrome for Developers：CSS 终于原生支持给 Flex/Grid 间隙加分割线了，再也不用手写各种伪元素和 Border Hack 啦！Chrome 149 正式引入 CSS Gap Decorations

    Forwarded from cosine - 前端人の日常频道
    #优质博文 #CSS #前端 #新动态
    Gap decorations: Now available in Chromium | Chrome for Developers：CSS 终于原生支持给 Flex/Grid 间隙加分割线了，再也不用手写各种伪元素和 Border Hack 啦！Chrome 149 正式引入 CSS Gap Decorations。

    AI 摘要：Chrome 149 正式引入 CSS Gap Decorations，新增 row-rule 和 column-rule 属性。开发者现在可以像使用 column-rule 处理多列布局一样，直接为网格（Grid）和弹性盒（Flex）布局的间距添加分割线。该功能支持复杂的样式重复（repeat()）、动画效果以及交叉点断开控制（rule-break），极大简化了 UI 分割线的实现逻辑。
    Chrome for Developers
    Gap decorations: Now available in Chromium  |  Blog  |  Chrome for Developers
    Gap decorations: Now available in Chromium  |  Blog  |  Chrome for Developers
    A new way to style gaps in CSS from Chrome and Edge 149.

    优质博文CSS前端新动态