呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #前端 #工程化 #ws #websocket
站点的实时人数是如何实现的？
AI 摘要：这篇文章介绍了如何实现网站实时在线人数的功能，包括当前正在阅读某篇文章的人数。作者选择了 WebSocket技术，使用 Socket.IO （WebSocket 的上层封装） 进行实现。实时人数统计基于 WebSocket 连接数，但为避免重复计数（同一用户打开多个页面），采用了在客户端生成唯一 SessionId 的方法，并将其存储在 LocalStorage 中。服务端则通过传递的 SessionId 进行去重，确保在线人数的准确性。此外，文章还详细讨论了如何利用 Socket.IO 的 Room 功能实现文章实时阅读人数的统计和读者阅读进度的实时展示。所有实现代码均已开源。
via innei
站点的实时人数是如何实现的？
AI 摘要：这篇文章介绍了如何实现网站实时在线人数的功能，包括当前正在阅读某篇文章的人数。作者选择了 WebSocket技术，使用 Socket.IO （WebSocket 的上层封装） 进行实现。实时人数统计基于 WebSocket 连接数，但为避免重复计数（同一用户打开多个页面），采用了在客户端生成唯一 SessionId 的方法，并将其存储在 LocalStorage 中。服务端则通过传递的 SessionId 进行去重，确保在线人数的准确性。此外，文章还详细讨论了如何利用 Socket.IO 的 Room 功能实现文章实时阅读人数的统计和读者阅读进度的实时展示。所有实现代码均已开源。
via innei
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #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
