呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 278 期）：棘手的 AI 版权
1. 来自腾讯的 2D 图形库 TGFX 🧰 TGFX 的开发目的，就是要替代 Skia。 它起源于腾讯的动效解决方案 PAG。当时，腾讯内部很多项目，都有很强的动画效果需求，而且要求跨平台，所以就有了 PAG 这个专门制作动效的工具。
PAG 的核心就是图形库，最早用的是 Skia，但后来发现两个问题：首先，Skia 有历史包袱，打包体积大，性能也比较保守；其次，中国开发者看重的一些问题，开发团队往往不能（或不愿）跟进。
最终，PAG 团队下定决心，换掉 Skia，开发自己的图形库 TGFX。
2. 如何发布一个 TypeScript 软件包？（英文） 📓 TypeScript 语言写的软件包，怎么发布到 npm 上面？#工程化
3. C++ Fiber 基础知识（英文） 📓 React 引入了 Fiber，这个词到底是什么意思？它其实来自 C++，本文就介绍 C++ Fiber 的基本知识，前半部分都是通俗的讲解。#react #cpp
4. 自适应文本框的 CSS 实现（英文） 📓 用户输入文本，如何让网页输入框随着文字的增加，自动增加高度？不用 JS，只用 CSS。【省流:新特性 ｀form-sizing: normal;｀ 】#css
5. ripsecrets 🧰 这个工具用于检查代码仓库，有没有泄漏密钥。它可以配置在 CI/CD 流程里面自动运行。#ci
6. screenshot-to-code 🧰 一个开源的 Web 应用，用户上传一张网页截图，它会通过 OpenAI，给出该网页的 HTML/Tailwind/JS 代码实现。 #chatgpt
7. PageSpyWeb 🧰 一个开源的远程调试工具，提供类似浏览器控制台的界面，进行远程调试。
8. IPS 🧰 一个命令行工具， 查询和处理 IP 地理位置数据库。
9. GWS 🧰 一个开源的高性能 WebSocket 实现，包括服务器和客户端，用 Go 语言编写。#ws
10. ChatGot 🧰 在一个窗口内，同时跟多个模型互动，可以让 GPT 输出文字，然后用 @midjourney 生成图片。#chatgpt
11. 网页 AI 评审 🧰 这个 Web 工具对用户提供的网址，进行 AI 评审，给出页面的设计问题和改进建议。
它是免费的，但是用户多的时候，会停止服务。如果 AI 表现好，以后设计稿评审和代码评审都可以交给它了 #ai
12. AITDK 🧰 用户输入文章的主题，该网页工具会自动生成 SEO 友好的标题、描述、关键词和常见问题解答。#ai
13. Bubble 🧰 该仓库收集各种可以放在 GitHub Profile 和 Readme 上面的小组件。
14. Bing 图像创建器 🧰 微软官方的 AI 文生图服务。#ai
15. YesChat.ai 🧰 该网站提供最新 AI 模型（GPT4V、Dalle3、Claude 2）的免费体验，不过每天有次数限制。
科技爱好者周刊（第 278 期）：棘手的 AI 版权
1. 来自腾讯的 2D 图形库 TGFX 🧰 TGFX 的开发目的，就是要替代 Skia。 它起源于腾讯的动效解决方案 PAG。当时，腾讯内部很多项目，都有很强的动画效果需求，而且要求跨平台，所以就有了 PAG 这个专门制作动效的工具。
PAG 的核心就是图形库，最早用的是 Skia，但后来发现两个问题：首先，Skia 有历史包袱，打包体积大，性能也比较保守；其次，中国开发者看重的一些问题，开发团队往往不能（或不愿）跟进。
最终，PAG 团队下定决心，换掉 Skia，开发自己的图形库 TGFX。
2. 如何发布一个 TypeScript 软件包？（英文） 📓 TypeScript 语言写的软件包，怎么发布到 npm 上面？#工程化
3. C++ Fiber 基础知识（英文） 📓 React 引入了 Fiber，这个词到底是什么意思？它其实来自 C++，本文就介绍 C++ Fiber 的基本知识，前半部分都是通俗的讲解。#react #cpp
4. 自适应文本框的 CSS 实现（英文） 📓 用户输入文本，如何让网页输入框随着文字的增加，自动增加高度？不用 JS，只用 CSS。【省流:新特性 ｀form-sizing: normal;｀ 】#css
5. ripsecrets 🧰 这个工具用于检查代码仓库，有没有泄漏密钥。它可以配置在 CI/CD 流程里面自动运行。#ci
6. screenshot-to-code 🧰 一个开源的 Web 应用，用户上传一张网页截图，它会通过 OpenAI，给出该网页的 HTML/Tailwind/JS 代码实现。 #chatgpt
7. PageSpyWeb 🧰 一个开源的远程调试工具，提供类似浏览器控制台的界面，进行远程调试。
8. IPS 🧰 一个命令行工具， 查询和处理 IP 地理位置数据库。
9. GWS 🧰 一个开源的高性能 WebSocket 实现，包括服务器和客户端，用 Go 语言编写。#ws
10. ChatGot 🧰 在一个窗口内，同时跟多个模型互动，可以让 GPT 输出文字，然后用 @midjourney 生成图片。#chatgpt
11. 网页 AI 评审 🧰 这个 Web 工具对用户提供的网址，进行 AI 评审，给出页面的设计问题和改进建议。
它是免费的，但是用户多的时候，会停止服务。如果 AI 表现好，以后设计稿评审和代码评审都可以交给它了 #ai
12. AITDK 🧰 用户输入文章的主题，该网页工具会自动生成 SEO 友好的标题、描述、关键词和常见问题解答。#ai
13. Bubble 🧰 该仓库收集各种可以放在 GitHub Profile 和 Readme 上面的小组件。
14. Bing 图像创建器 🧰 微软官方的 AI 文生图服务。#ai
15. YesChat.ai 🧰 该网站提供最新 AI 模型（GPT4V、Dalle3、Claude 2）的免费体验，不过每天有次数限制。
GitHub
GitHub - Tencent/tgfx: A lightweight 2D graphics library for rendering texts, geometries, and images with high-performance APIs…
A lightweight 2D graphics library for rendering texts, geometries, and images with high-performance APIs that work across various platforms. - Tencent/tgfx
#优质博文 #前端 #react
- React 中的 Refs，从操作 DOM 到指令式 API
- 原文：Refs in React: from access to DOM to imperative API
很好的译文x2。这篇文章探讨了在 React 中使用 Refs 的重要性，尤其是在需要直接操作DOM的少数情况下。文章详细介绍了 React 中 Refs 的使用方法和场景。
Refs 在 React 中用于访问实际的 DOM 元素，是一个可变对象，React 会保留其在重新渲染时的引用。文章通过几个实例演示了如何使用 useRef 访问 DOM，例如在 React 中处理表单输入焦点或滚动到特定元素。同时，文章探讨了如何将 ref 作为 prop 从父组件传递给子组件，以便在多个表单中重用输入组件。此外，也介绍了 forwardRef 的使用，它允许将 ref 从父组件传递给函数组件。
文章还探讨了使用 useImperativeHandle 实现指令式 API 的方法，这对于实现例如输入字段动画效果等功能特别有用。最后，还提到了一种不使用 useImperativeHandle 而直接操作 ref 的方法，这为 React 开发提供了更多的灵活性。
顺藤摸瓜看看原作者其他文章：Developer Way
via 掘金@佛系社长
- React 中的 Refs，从操作 DOM 到指令式 API
- 原文：Refs in React: from access to DOM to imperative API
很好的译文x2。这篇文章探讨了在 React 中使用 Refs 的重要性，尤其是在需要直接操作DOM的少数情况下。文章详细介绍了 React 中 Refs 的使用方法和场景。
Refs 在 React 中用于访问实际的 DOM 元素，是一个可变对象，React 会保留其在重新渲染时的引用。文章通过几个实例演示了如何使用 useRef 访问 DOM，例如在 React 中处理表单输入焦点或滚动到特定元素。同时，文章探讨了如何将 ref 作为 prop 从父组件传递给子组件，以便在多个表单中重用输入组件。此外，也介绍了 forwardRef 的使用，它允许将 ref 从父组件传递给函数组件。
文章还探讨了使用 useImperativeHandle 实现指令式 API 的方法，这对于实现例如输入字段动画效果等功能特别有用。最后，还提到了一种不使用 useImperativeHandle 而直接操作 ref 的方法，这为 React 开发提供了更多的灵活性。
顺藤摸瓜看看原作者其他文章：Developer Way
via 掘金@佛系社长
#优质博文 #前端 #react #性能优化
为什么你可以删除 90% 的 useMemo 和 useCallback
很好的译文，探讨了 React 中 useMemo 和 useCallback 钩子函数的使用及其误用。作者指出，大多数情况下，开发者无需频繁使用这些钩子。useMemo 和 useCallback 的主要作用是在组件重渲染时缓存数据，以避免重复计算或生成非原始数据类型（如对象或函数）。然而，实践中它们常被滥用，如用于缓存简单的对象创建或数组操作。
文章进一步说明，许多开发者错误地认为，如果 props 没有变化（例如被缓存），组件就一定不会重渲染。然而，如果组件的父组件重渲染，子组件也会随之重渲染，这是 React 的基本工作方式。此外，作者指出，useMemo 和 useCallback 在初次渲染时会增加开销，尽管这种开销看似微小，但在初始渲染过程中累加起来可能会导致明显的性能问题。
总的来说，文章建议开发者在使用 useMemo 和 useCallback 时应更加审慎，只在确实需要避免重渲染或昂贵计算的特定场景中使用它们，以提高代码的效率和可读性
via 掘金@佛系社长
为什么你可以删除 90% 的 useMemo 和 useCallback
很好的译文，探讨了 React 中 useMemo 和 useCallback 钩子函数的使用及其误用。作者指出，大多数情况下，开发者无需频繁使用这些钩子。useMemo 和 useCallback 的主要作用是在组件重渲染时缓存数据，以避免重复计算或生成非原始数据类型（如对象或函数）。然而，实践中它们常被滥用，如用于缓存简单的对象创建或数组操作。
文章进一步说明，许多开发者错误地认为，如果 props 没有变化（例如被缓存），组件就一定不会重渲染。然而，如果组件的父组件重渲染，子组件也会随之重渲染，这是 React 的基本工作方式。此外，作者指出，useMemo 和 useCallback 在初次渲染时会增加开销，尽管这种开销看似微小，但在初始渲染过程中累加起来可能会导致明显的性能问题。
总的来说，文章建议开发者在使用 useMemo 和 useCallback 时应更加审慎，只在确实需要避免重渲染或昂贵计算的特定场景中使用它们，以提高代码的效率和可读性
via 掘金@佛系社长
#后端 #优质博文 #权限管理 #系统设计 #CAS
如何设计一个权限管理系统
摘要: 这篇文章深入探讨了权限管理系统的设计。文章首先强调了身份认证和权限管理在系统安全中的重要性。详细讲述了CAS（Central Authentication Service）身份认证系统的工作原理，包括票据类型（如TGT、ST）和主要服务（如KDC、AS、TGS）。接着，文章探讨了基于角色的权限管理模型（RBAC），介绍了RBAC的几种模型，如基本模型、引入用户组的模型和角色分级模型。文章还提供了数据库表的设计建议，并讨论了如何使用Shiro框架实施身份认证和权限管理，包括权限体策略和权限校验的过程。
via 知乎专栏
如何设计一个权限管理系统
摘要: 这篇文章深入探讨了权限管理系统的设计。文章首先强调了身份认证和权限管理在系统安全中的重要性。详细讲述了CAS（Central Authentication Service）身份认证系统的工作原理，包括票据类型（如TGT、ST）和主要服务（如KDC、AS、TGS）。接着，文章探讨了基于角色的权限管理模型（RBAC），介绍了RBAC的几种模型，如基本模型、引入用户组的模型和角色分级模型。文章还提供了数据库表的设计建议，并讨论了如何使用Shiro框架实施身份认证和权限管理，包括权限体策略和权限校验的过程。
via 知乎专栏
#优质博文 #前端 #react
为什么我更推荐命令式 Modal
AI摘要：Modal 模态对话框在中台业务中非常常见。声明式 Modal 是一种常见的定义方式，可以通过组件库内置的组件来实现。在声明式 Modal 中，需要手动控制 Modal 的打开状态，并将状态和 UI 绑定在一起。随着业务的增加，页面上可能会出现多个 Modal 和 Button，导致代码变得冗长且难以维护。为了解决这个问题，可以将 Modal 抽离到外部组件中，但这样会导致父组件的状态堆积。另一种解决方案是将 Modal 和 Button 直接耦合在一起，但这样无法单独复用 Modal。为了解耦 Modal，需要编写大量代码并且状态变得混乱。后续可能还会遇到无法在父组件中直接控制 Modal 的问题，可以通过将状态下沉到外部 Store 或者 Context 中来解决。
via 静かな森 - innei.in
为什么我更推荐命令式 Modal
AI摘要：Modal 模态对话框在中台业务中非常常见。声明式 Modal 是一种常见的定义方式，可以通过组件库内置的组件来实现。在声明式 Modal 中，需要手动控制 Modal 的打开状态，并将状态和 UI 绑定在一起。随着业务的增加，页面上可能会出现多个 Modal 和 Button，导致代码变得冗长且难以维护。为了解决这个问题，可以将 Modal 抽离到外部组件中，但这样会导致父组件的状态堆积。另一种解决方案是将 Modal 和 Button 直接耦合在一起，但这样无法单独复用 Modal。为了解耦 Modal，需要编写大量代码并且状态变得混乱。后续可能还会遇到无法在父组件中直接控制 Modal 的问题，可以通过将状态下沉到外部 Store 或者 Context 中来解决。
via 静かな森 - innei.in
innei.in
为什么我更推荐命令式 Modal
Modal 模态对话框。 在中台业务中非常常见。 什么是声明式 Modal 组件库中一般都会内置这类组件，最为参见的声明式 Modal 定义。 例如 Antd 5 中的声明式 Modal 是这样定义的。 const App: React.FC = () => { const [isMo
https://twitter.com/nicks_twt/status/1723994531341779053
daily inspiration — app search 🔎✨
via Twitter @nicks_twt
#阮一峰的科技周刊 #前端 #优质博文
科技爱好者周刊（第 277 期）：工作台副屏的最佳选择
#资源推荐 #tools
1. KDesign 🧰 金蝶的企业级产品设计系统，包括设计规范、设计资源、前端组件库。 #组件库
2. ChatGPT Next Web 🧰 一个开源的 ChatGPT 中文网页版，做得非常精致，可以自己部署。这里是 Demo。【这个老早就在用了】#AI #chatgpt
3. Caravaggio 🧰 一个图像处理服务器，可以根据 URL 参数将原图转换成不同大小、格式等，适合用作图像 CDN 的源服务器。
4. TIL（今天我学到的） 📓 一个开源笔记库。大家可以学习他做笔记的方式，内容按主题分类，放在 GitHub 上面。
科技爱好者周刊（第 277 期）：工作台副屏的最佳选择
#资源推荐 #tools
1. KDesign 🧰 金蝶的企业级产品设计系统，包括设计规范、设计资源、前端组件库。 #组件库
2. ChatGPT Next Web 🧰 一个开源的 ChatGPT 中文网页版，做得非常精致，可以自己部署。这里是 Demo。【这个老早就在用了】#AI #chatgpt
3. Caravaggio 🧰 一个图像处理服务器，可以根据 URL 参数将原图转换成不同大小、格式等，适合用作图像 CDN 的源服务器。
4. TIL（今天我学到的） 📓 一个开源笔记库。大家可以学习他做笔记的方式，内容按主题分类，放在 GitHub 上面。
bot 初始化完成
后端 "pub_index"（session: "alice"）总消息数: 404
总计 1 个对话被加入了索引：
- cosine - 前端人の日常频道 (1338193436) 共 404 条消息
后端 "pub_index"（session: "alice"）总消息数: 404
总计 1 个对话被加入了索引：
- cosine - 前端人の日常频道 (1338193436) 共 404 条消息
#优质博文 #前端 #tailwind #css
原文：Speeding up the JavaScript ecosystem - Tailwind CSS
作者：Marvin Hagemeister
译者：Deepl
校对：云谦
译：加速 JavaScript 生态系统 - Tailwind CSS
原文：Speeding up the JavaScript ecosystem - Tailwind CSS
作者：Marvin Hagemeister
译者：Deepl
校对：云谦
译：加速 JavaScript 生态系统 - Tailwind CSS
