#优质博文 #前端 #typescript
一点小小的类型安全震撼

AI摘要：这篇文章介绍了在 TypeScript 中提高类型安全性的方法，特别是通过自定义类型守卫函数来精确过滤数据类型。作者通过实例展示了如何使用 is 关键字和类型守卫来改进类型推断，进而减少代码冗余和提升类型准确性。文章还探讨了类型守卫的高级用法，包括如何利用 unique symbol 和异常处理来创建更灵活的类型守卫函数，以及如何通过控制流分析从函数体中推断类型谓词。最后，感谢《TypeScript Effective》的作者 danvk 提供的 PR 灵感，并提供了一些有用的TypeScript资源链接。

via YiJie

juejin.cn

一点小小的类型安全震撼 - 掘金

经常写 TypeScript 的都知道，写类型容易，让类型安全难。 在学习 TypeScript 的过程中你可能就见到过 is 这个特殊的语法了，在这里就不对他进行过多的介绍了，我们主要来讲讲一些问题

#前端 #tools #css #资源推荐
scrollbar.app：一站式浏览器滚动条自定义工具

摘要: scrollbar.app 提供了一个直观的界面，允许开发者实时测试和调整浏览器滚动条的样式。通过这个工具，用户可以轻松地修改滚动条的外观，并直接从界面复制所需的 CSS 代码。该工具覆盖了使用特定于供应商的伪元素以及面向未来的 scrollbar-color 属性，使其成为处理浏览器滚动条样式的理想选择。

via 群里看到的

scrollbar.app

Simple CSS scrollbar editor.

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 290 期）：苹果头盔的最大问题

1. Web 终极拦截技巧（中文） 📓 本文介绍 Web 平台常见的拦截 HTTP 通信的方法，以及如何注入拦截代码。
2. 剖析 SSL 证书（英文） 📓 本文通俗地介绍，如何查看 HTTPS 证书的内容，以及证书各部分的简单含义。
3. 响应式视频播放器的 Web 组件（英文） 📓 一篇详细的教程，通过一个响应式视频播放器，教你怎么写 Web 组件（Web Components）。
4. 如何构建一个窃取一切的 Chrome 插件（英文） 📓 作者提醒大家注意，浏览器插件可以读取用户的所有信息，发到远程服务器，因此不要随便安装。她还提供了一个演示。如何无需用户察觉即可捕获包括浏览历史、屏幕截图、Cookies、键盘记录和地理位置在内的各种数据，
「Did you really scrutinize their permissions?」
5. Base32 编码解释（英文） 📓 本文详细解释 Base64、Base32、Base8 等等是如何编码实现的。 【挺有意思的】
6. 开发者需要知道 GPU 知识（英文） 📓 AI 大量使用 GPU 运算，本文介绍开发者需要知道的 GPU 知识。前半部分是概念，后半部分是 GPU 编程，可以只看前半部分。
7. TCPView 🧰 微软的官方工具，用来查看 Windows 系统所有 TCP 和 UDP 连接的详细信息。
8. FontMagic 🧰 字体工具软件，可以将字体文件的某个字形导出为 SVG 格式，还可以转化字体格式，支持 macOS 和 Windows。（@leibnizli 投稿）
9. uv 🧰 Rust 语言写的 Python 包管理器，速度非常快，可以替代 pip 和pip-tools。 #python #后端 #rust
10. Keep Screen On 🧰 打开这个网页，就可以让电脑屏幕保持常亮，对 PC、Mac、Android、iOS 均有效。 #趣站
11. background-erase.xyz 🧰 去除图片背景的免费网站，使用最新的删除图片背景的 AI 模型 RMBG-v1.4，所有计算都在本地完成，不用上传图片。（@janily 投稿）
12. browserscan.net 🧰 该网站检测浏览器指纹、IP 地址、WebRTC 泄露，DNS 泄露等信息。（@BrowserScan 投稿） 【有意思】
13. Localtunnel 🧰 一个 npm 软件包，为你的本地服务分配一个公网的 URL，使得公网可以访问这个本地服务。
14. SirTunnel 🧰 一个开源软件，只需要50行代码，就能建立一条隧道，将你的内网电脑可以被公网访问，这里有一篇教程。
「从本质上讲，它编写了 Caddy 的 API 脚本来动态添加和删除隧道。当您通过 SSH 连接到服务器时，您会调用该脚本，并且在 SSH 连接期间，服务器域的子域会通过 SSH 链接转发流量。」
【有无群友测评一下】

hughfenghen.github.io

Web 终极拦截技巧（全是骚操作） | 风痕 · 術&思

拦截的价值

> 计算机科学领域的任何问题都可以通过增加一个中间层来解决。 —— Butler Lampson

如果系统的控制权、代码完全被掌控，很容易添加中间层；
现实情况我们往往无法控制系统的所有环节，所以需要使用一些 “非常规”（拦截） 手段来增加中间层。

拦截的方法

拦截/覆写 浏览器 API

最常见的场景有通过拦截 console ...

#前端 #css #demo #codepen
Progress of this year. Keep tracking by Andrey

感觉适合博客之类的场景 #progress

#前端 #趣站 #webGL #cocos #投稿
Cocosmos 掌上宇宙

一个实时精确的可交互 3D 宇宙模型，可以无缝视野缩放，效果超级震撼，体验非常丝滑，天文爱好者一定不要错过。

这个是真的牛逼，无愧掌中宇宙的名号，界面动效太酷了，感兴趣的可以看一下项目介绍。

via guang

#前端 #优质博文 #tailwind #css
Tailwind marketing and misinformation engine

AI摘要：这篇文章讨论了Tailwind CSS的发展、推广策略和其中的误导信息。文章指出，Tailwind的创始人Adam Wathan利用了开源社区的尊重精神，通过重新解释CSS最佳实践和引入新术语，来推广其独创的样式语言。文章批评了Tailwind推崇的工具类优先方法，认为这种方法导致代码冗长难维护，并锁定用户在Tailwind生态系统内。文章还批评了Tailwind的闭环系统和对开发者的锁定效应，以及其最新的UI工具包Catalyst如何进一步深化这种依赖。最后，作者提倡回归Web标准和学习CSS基础，以实现更加可维护和标准化的Web开发实践，而不是依赖特定供应商的解决方案​​。

前端原神 tailwind 实锤（x） 我觉得重点（供应商）和例子举的都不太对，但部分观点可取
评论区的讨论更有意思的，可以看看：https://news.ycombinator.com/item?id=39416558

摘一些评论(机翻)：

和许多人一样，我最初也对 Tailwind 持怀疑态度，因为我认为它让代码看起来 "丑陋"。但后来我开始使用它，几乎立刻就注意到了它对工作效率的提升。在使用过程中，我注意到了两件事：

1. 在我不再需要命名之前，我从来不知道自己有多讨厌命名；
2. 保持 id/classes 和 CSS 之间的映射是多么大的精神负担，更不用说整个级联部分了，光是扫一眼代码，你根本无法确定结果会是什么样的 CSS。

第二点可能是 Tailwind 最低调的功能 - 您再也不必担心元素的样式，因为所有内容都在类名中。额外的好处是，它基本上迫使您使用组件编写 UI 代码以防止重复 - 它鼓励最佳实践（请注意，这是我认为 OP 在询问“如何清理东西？”时出错的地方 - “@apply”关键字存在，但并不意味着被过度使用来替代正确的代码重构）。

它并非没有缺陷--你必须学习一种新的语法（在大多数情况下非常直观，例如，"align-items: center "变成了 "items-center"，"margin: 0 "变成了 "m-0 "等）。 它也有自己的缺陷（例如，在构建时，它会通过扫描你的代码来生成 CSS，并提取你使用的类，以防止生成未使用的 CSS，这就导致无法动态构建类名，如 "gap-${value}`"），但我认为这些问题比以其他方式编写 CSS 更重要。

有一点我100%同意作者的观点--在学习Tailwind之前，你应该先学习CSS。这不仅是因为 Tailwind 有一天可能会消失，还因为这会让你更深入地了解东西的工作原理和原因。

理想情况下，我们不必为那些从未重用的东西命名。通常类名只使用一次。为类命名并没有多大好处。

方案 1：

查找视觉错误，打开 devtools，找到最接近的描述性类或 ID（.primary？ 哦不......），打开 IDE，在样式文件夹结构（最有可能但不是唯一查找 CSS 的地方）中全局搜索".primary"。返回 40 个文件。15 分钟后，找到一个看起来可能是正确的文件。10 分钟了解 CSS（这里有很多高级 CSS......）。找到视觉错误的原因，修改一行。30 分钟--工作完成。

方案 2：

找到视觉错误，打开 React Devtools 等软件，找到组件名称，打开集成开发环境，找到组件源文件，找到 HTML，更改实用样式类，5 分钟完成工作。

这些例子都不是凭空捏造的。几周前，我花了 40 分钟才在一个代码库中才找到一条单行代码。这并不夸张。

我曾经确实相信关注点分离，但现在我不再相信了，因为多年来我不得不花时间与“选项 1”代码库作斗争。几乎任何具有普通 CSS 的大型代码库最终都将成为“选项 1”，除非它是单个优秀 CSS 开发人员的工作（罕见技能），或者是一个团队，其中一个优秀的领导者也足够关心 CSS 来强制执行像 BEM 这样的惯例是永久性的（甚至是更罕见的技能）。

如今，任何人在构建任何复杂的东西时，都会使用一些组件抽象（无论是否在客户端）来管理复杂性。如果它已经存在，我们不妨将其用于风格设计。

之所以对关注点分离、级联和（低）特异性产生强烈反对，是因为从长远来看，这些事情对于可维护性来说都是一场彻底的灾难。

在制作 Catalyst 按钮的示例时需要注意一点。如果您写出完成该按钮正在执行的工作量所需的所有样式，那么它也将非常难以理解，而且，它会位于一个完全不同的文件中，与赋予它任何意义的单个文件完全不同 - HTML。

Cults are bad for tech because it prevents out-of-the-box thinking.
邪教对科技不利，因为它阻碍了创新思维。

via Tero Piirainen

nuejs.org

Tailwind marketing and misinformation engine / Nue

The origins of Tailwind and how it is framed to solve the proposed issues of CSS

#前端 #优质博文 #react #nextjs
NextJS/React 加载远程组件

AI 摘要：这篇文章介绍了如何在普通的Markdown中渲染远程组件。作者构想了一个名为RemoteComponentRender的逻辑，通过加载远程组件并将其嵌入到React中进行渲染。为了简化Markdown的语法，作者使用了CodeBlock进行扩展，并提供了一个新的DSL语法来定义远程组件的导入和渲染。文章还介绍了如何将React和ReactDOM附加到全局对象上，并提供了一个基础版的组件实现。最后，文章讨论了远程组件的构建和打包，并提供了一个使用Rollup进行构建的示例配置。

via innei

cn.innei.ren

NextJS/React 加载远程组件

前言 写过文档的大佬们都知道 MDX 这个东西，对原本的 Markdown 进行了扩展，可以在 Markdown 中直接使用框架组件（React，Vue 等等）。 现在也有很多静态生成的博客使用 MDX 去编写博文，在博文中内嵌了 React 组件，在一些需要交互式的场景中，在传统的 Markd

#前端 #css #demo #codepen
Merging Letter Toggle by Jon Kantner

「拨动开关与 FF 或 N 组合可拼写“OFF”或“ON”，字母根据状态合并或拆分。#switch #toggle #input #animation #svg 」

这是我见过最丝滑的svg切换开关动画之一（）

#前端 #css #demo #codepen
Tab bar Animation by Aaron Iker

没见过的 tab bar 切换动画，%%%

#前端 #css #demo #codepen #svg
Hamburger menu - Dice animation by Pedro Ondiviela

非常好的svg菜单切换动画，比上一个还酷