呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#优质博文 #前端 #debug #javascript
专业前端都这么使用console?
AI 摘要：本文主要介绍了 JavaScript 中
via 微信公众号 JS每日一题
专业前端都这么使用console?
AI 摘要：本文主要介绍了 JavaScript 中
console 对象的高级用法，以提高前端开发调试效率。首先，介绍了 console.time() 和 console.timeEnd() 用于计算代码块的执行时间。接着，通过 console.profile() 和 console.profileEnd() 分析复杂逻辑的性能瓶颈。此外， console.count() 用于追踪特定代码块或函数的执行次数，而 console.trace() 帮助开发者理解代码执行流程，通过输出调用堆栈。 console.table() 则以表格形式清晰展示对象或数组数据。 console.group() 和 console.groupEnd() 允许开发者将输出信息进行分组，以便更好地组织和理解。最后，文中还讨论了 console.log() 的进阶用法，如支持自定义CSS样式输出和格式化输出内容，这些占位符的使用能使输出信息更加结构化和清晰。这些高级用法不仅仅限于调试，还可以在性能分析和代码优化中发挥重要作用。via 微信公众号 JS每日一题
#前端 #优质博文
利用 SharedWorker 实现跨页面单例 WebSocket
AI 摘要：这篇文章介绍了如何在 Next.js 项目中使用 SharedWorker 和 WebSocket 创建跨页面的单例连接。作者首先探讨了 WebSocket 连接可能给服务器带来的压力，并提出了通过 SharedWorker 共享 WebSocket 实例以减轻这种压力的解决方案。文中详细讲解了 SharedWorker 的基本使用方法，并展示了如何将 WebSocket 连接的代码迁移到 SharedWorker 中，以及如何在页面间共享这个 WebSocket 实例。最后，作者还提供了详细的代码示例，包括如何在 Next.js 中实现和使用这种模式。
via innei
利用 SharedWorker 实现跨页面单例 WebSocket
AI 摘要：这篇文章介绍了如何在 Next.js 项目中使用 SharedWorker 和 WebSocket 创建跨页面的单例连接。作者首先探讨了 WebSocket 连接可能给服务器带来的压力，并提出了通过 SharedWorker 共享 WebSocket 实例以减轻这种压力的解决方案。文中详细讲解了 SharedWorker 的基本使用方法，并展示了如何将 WebSocket 连接的代码迁移到 SharedWorker 中，以及如何在页面间共享这个 WebSocket 实例。最后，作者还提供了详细的代码示例，包括如何在 Next.js 中实现和使用这种模式。
via innei
cn.innei.ren
利好 SharedWorker 实现跨页面单例 WebSocket
在之前的文章中，我详细的介绍了站点的实时人数是如何实现的？，在方案中，我留下了一个悬念，如何使用 SharedWorker 在页面之间共享 Socket 实例，实现跨页面单例 WebSocket。 动机 探索这个问题的背景是无意间在知乎看到了 WebSocket 的一个问题，其中有回答提到 We
#前端 #优质博文 #css #svg
不一样的SVG！SVG在 CSS 中的应用
AI 摘要：本文介绍了SVG在CSS中应用的高级技巧，尤其是如何实现自适应尺寸和渐变边框。文章首先指出SVG通常通过软件生成，并展示了如何在Figma中创建渐变边框。随后，作者发现直接导出的SVG无法自适应尺寸，因此提出了将SVG尺寸和坐标值设置为百分比的解决方案。为了解决圆角描边显示不完整的问题，提出使用CSS的calc函数调整SVG的尺寸和位置。最后，展示了将改造后的SVG直接应用于HTML和CSS中，实现自适应尺寸和虚线渐变圆角边框动画的效果。
via 公众号 前端侦探
不一样的SVG！SVG在 CSS 中的应用
AI 摘要：本文介绍了SVG在CSS中应用的高级技巧，尤其是如何实现自适应尺寸和渐变边框。文章首先指出SVG通常通过软件生成，并展示了如何在Figma中创建渐变边框。随后，作者发现直接导出的SVG无法自适应尺寸，因此提出了将SVG尺寸和坐标值设置为百分比的解决方案。为了解决圆角描边显示不完整的问题，提出使用CSS的calc函数调整SVG的尺寸和位置。最后，展示了将改造后的SVG直接应用于HTML和CSS中，实现自适应尺寸和虚线渐变圆角边框动画的效果。
via 公众号 前端侦探
推荐无聊的群友
打开 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 投稿）
