呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
推荐无聊的群友
打开 https://net.ljxnet.cn/
自定义链接 https://app.123pan.com/app/android/v1/123pan_2.3.12_240327_release.apk
线程拉到64点开始
打开 https://net.ljxnet.cn/
自定义链接 https://app.123pan.com/app/android/v1/123pan_2.3.12_240327_release.apk
线程拉到64点开始
https://www.v2ex.com/t/1029736
有 v2ex 网友发了总结
有 v2ex 网友发了总结
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 295 期）：巧妙的灯泡钟
1. 微信早期的消息收发架构（中文） 📓 本文是一篇简化的介绍，讲解微信刚刚建立时，怎么做到消息的收发。（@ryantang1991 投稿）
2. OPFS API 及工具介绍（中文） 📓 网页脚本如果要跟本地文件系统交互，是很不方便的。目前，浏览器有一个 OPFS API，为网页提供一个虚拟的本地文件系统，本文介绍它的用法。（@hughfenghen 投稿）
3. 如何用 CSP 防止 XSS 注入攻击（英文） 📓 本文讲解怎么使用浏览器的 CSP（内容安全策略），防止网页被 XSS （跨站点脚本注入攻击）。 #web安全
4. Superjson 🧰 安全地将JavaScript表达式序列化为JSON的超集，其中包括Dates、BigInts等。【完美修复了Next.js在 getServerSideProps 和 getInitialProps 中的序列化限制】 #nextjs
5. text2video 🧰 一个开源的文本转图文视频的软件。（@bravekingzhang 投稿） #AI
6. simple-mind-map（思绪思维导图） 🧰 一个开源的 Web 思维导图，试用 Demo。（@wanglin2 投稿）
7. Mist 🧰 这个工具可以在图片上面添加水印底纹，使得该图片无法再被 AI 模型作为训练材料。
8. 中国古代历史人物可视化 🧰 输入一个古代人物名（共收录52000+人物），就可以显示该人物的社会关系、亲戚关系和生平足迹图，上图是李白的生平足迹图，参见介绍文章。（@inspurer 投稿） #趣站
9. CSS 框架排名 🧰 这个网页按照 GitHub 的星星数量，为 CSS 框架排名。 #css
10. Lamucal 🧰 这个网站可以为任何歌曲生成和弦、节拍、歌词、旋律和标签，使用了 Hybrid-Net 模型。（@liufeigit 投稿)
11. Z2H 字贴 🧰 一个在线的字帖生成网站，支持中文和英文。（@liamwang 投稿）
科技爱好者周刊（第 295 期）：巧妙的灯泡钟
1. 微信早期的消息收发架构（中文） 📓 本文是一篇简化的介绍，讲解微信刚刚建立时，怎么做到消息的收发。（@ryantang1991 投稿）
2. OPFS API 及工具介绍（中文） 📓 网页脚本如果要跟本地文件系统交互，是很不方便的。目前，浏览器有一个 OPFS API，为网页提供一个虚拟的本地文件系统，本文介绍它的用法。（@hughfenghen 投稿）
3. 如何用 CSP 防止 XSS 注入攻击（英文） 📓 本文讲解怎么使用浏览器的 CSP（内容安全策略），防止网页被 XSS （跨站点脚本注入攻击）。 #web安全
4. Superjson 🧰 安全地将JavaScript表达式序列化为JSON的超集，其中包括Dates、BigInts等。【完美修复了Next.js在 getServerSideProps 和 getInitialProps 中的序列化限制】 #nextjs
5. text2video 🧰 一个开源的文本转图文视频的软件。（@bravekingzhang 投稿） #AI
6. simple-mind-map（思绪思维导图） 🧰 一个开源的 Web 思维导图，试用 Demo。（@wanglin2 投稿）
7. Mist 🧰 这个工具可以在图片上面添加水印底纹，使得该图片无法再被 AI 模型作为训练材料。
8. 中国古代历史人物可视化 🧰 输入一个古代人物名（共收录52000+人物），就可以显示该人物的社会关系、亲戚关系和生平足迹图，上图是李白的生平足迹图，参见介绍文章。（@inspurer 投稿） #趣站
9. CSS 框架排名 🧰 这个网页按照 GitHub 的星星数量，为 CSS 框架排名。 #css
10. Lamucal 🧰 这个网站可以为任何歌曲生成和弦、节拍、歌词、旋律和标签，使用了 Hybrid-Net 模型。（@liufeigit 投稿)
11. Z2H 字贴 🧰 一个在线的字帖生成网站，支持中文和英文。（@liamwang 投稿）
为什么开发者应该多关注海外市场
角度犀利，直接指出了独立开发的根源问题，这个作者其他文章也挺有意思的
AI 摘要：这篇文章主要探讨了国内开发者为什么应该更多地关注海外市场，提出国内市场存在的四大问题：个人或小团队难以存活、需求验证成本高、推广渠道和门槛问题、商业化选择有限。作者通过对比国内外市场的环境，强调了海外市场对独立开发者更为友好，例如海外市场的推广渠道多样且开放、用户付费意愿强烈等。文章最后强调，面向海外市场的产品开发能为开发者带来更多的机会和可能性。
via 掘金 强生
#博客更新
优化 JavaScript 的乐趣和好处【译文】
是我写的这篇文章的翻译，挺用心的ww
Hexo博客链接 🔗 https://ysx.cosine.ren/optimizing-javascript-translate
xLog链接 🔗 https://x.cosine.ren/optimizing-javascript-translate
RSS订阅 📢 https://x.cosine.ren/feed/xml
优化 JavaScript 的乐趣和好处【译文】
是我写的这篇文章的翻译，挺用心的ww
Hexo博客链接 🔗 https://ysx.cosine.ren/optimizing-javascript-translate
xLog链接 🔗 https://x.cosine.ren/optimizing-javascript-translate
RSS订阅 📢 https://x.cosine.ren/feed/xml
Optimizing Javascript for fun and for profit
antfu 推荐 - 「关于使用JavaScript进行微优化的非常酷的交互式博客文章，作者romgrk」
AI 摘要：这篇文章总结了多种优化 JavaScript 性能的技巧。首先强调了避免不必要的工作，如使用 memoization、懒加载等技术。接着讨论了避免字符串比较、优化对象结构以保持代码效率、减少数组和对象方法的使用、避免间接引用、优化内存访问以减少缓存未命中，以及减少大对象的使用等方法。文章也提到了
eval 的合理使用和字符串操作的优化。这些技巧旨在提高代码运行速度，但作者也提醒读者，在追求性能优化时，应先进行基准测试，以确保所做的优化是有效且必要的。via romgrk
#碎碎念 #趣站 #webGL
提前体验小米 su7神里绫华冰系痛车（x）真牛啊
https://gamemcu.com/su7/
【让所有人都能上手体验小米SU7！-哔哩哔哩】 https://b23.tv/ohd8fix
提前体验小米 su7
https://gamemcu.com/su7/
【让所有人都能上手体验小米SU7！-哔哩哔哩】 https://b23.tv/ohd8fix
#优质博文 #前端 #工程化 #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
#优质博文 #course #前端 #动画
Amazing Button Click Animation With Framer Motion's New Animation Sequences
无意中发现的挺好的交互式 framer-motion 教程，介绍了如何使用Framer Motion的新序列动画功能创建点击按钮时的精彩动画效果。从构建一个基础按钮开始，逐步添加动画，包括让按钮上的文字逐个上移，以及添加星星飞溅效果。通过使用Framer Motion的useAnimate()钩子和动画序列，可以实现复杂的动画效果，如文字逐个动画和按钮的弹跳效果。
Amazing Button Click Animation With Framer Motion's New Animation Sequences
无意中发现的挺好的交互式 framer-motion 教程，介绍了如何使用Framer Motion的新序列动画功能创建点击按钮时的精彩动画效果。从构建一个基础按钮开始，逐步添加动画，包括让按钮上的文字逐个上移，以及添加星星飞溅效果。通过使用Framer Motion的useAnimate()钩子和动画序列，可以实现复杂的动画效果，如文字逐个动画和按钮的弹跳效果。
www.frontend.fyi
Amazing Button Click Animation With Framer Motion's New Animation Sequences – Frontend.FYI
#优质博文 #前端 #tools #资源推荐 #npm
7 Tools to Choose the Right NPM Package
摘要：这篇文章介绍了7个免费工具，帮助开发者比较并选择最适合项目的NPM包。这些工具包括：
1. GitHub/GitHub Insights 提供包的受欢迎程度和维护情况的指标
2. BundlePhobia 估计包的性能影响，提供了有趣的指标，如 Bundle size （缩小和缩小+Gzip）和 Download time （3G和4G）。
3. NPM Trends 展示NPM包的下载趋势和GitHub统计数据，可同时比较很多个包
4. NPM Compare 提供更详细的多个包比较，如 Version Average ， Maintainers 的数量， Open issues 的数量和 Monthly Downloads 的数量，最后给出总分。
5. Moiva 结合多个数据源（NPM，Github，Snyk，BundlePhobia）的比较工具
6. Snyk Advisor 测量包的健康状况，从 Popularity, Maintenance, Security, Community 四个维度
7. Openbase 提供包的综合评价，此外，Openbase 提供了替代建议包和相关的教程视频。(但是这个工具没了，悲，可以用 kandi 替代)
这些工具的数据可以结合使用，以全面评估每个包的健康状况
via Medium Alexis Regnaud
7 Tools to Choose the Right NPM Package
摘要：这篇文章介绍了7个免费工具，帮助开发者比较并选择最适合项目的NPM包。这些工具包括：
1. GitHub/GitHub Insights 提供包的受欢迎程度和维护情况的指标
2. BundlePhobia 估计包的性能影响，提供了有趣的指标，如 Bundle size （缩小和缩小+Gzip）和 Download time （3G和4G）。
3. NPM Trends 展示NPM包的下载趋势和GitHub统计数据，可同时比较很多个包
4. NPM Compare 提供更详细的多个包比较，如 Version Average ， Maintainers 的数量， Open issues 的数量和 Monthly Downloads 的数量，最后给出总分。
5. Moiva 结合多个数据源（NPM，Github，Snyk，BundlePhobia）的比较工具
6. Snyk Advisor 测量包的健康状况，从 Popularity, Maintenance, Security, Community 四个维度
7. Openbase 提供包的综合评价，此外，Openbase 提供了替代建议包和相关的教程视频。(但是这个工具没了，悲，可以用 kandi 替代)
这些工具的数据可以结合使用，以全面评估每个包的健康状况
via Medium Alexis Regnaud
Medium
7 Tools to Choose the Right NPM Package
A list of 7 free tools that will help you compare and choose the best NPM package for your project.
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 294 期）：崖门海战的感想
1. Web 组件如何适配 JS 框架（英文） 📓 Web 组件是浏览器原生的组件格式，本文介绍怎么将这种格式用于各种 JS 前端框架。
2. CSS 的悬挂标点属性（英文） 📓 如果标点正好在行首或行尾，是否要跟上下文对齐？这就要用到 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 读者」😀
科技爱好者周刊（第 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.
