#优质博文 #前端 #debug #javascript
专业前端都这么使用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每日一题

微信公众平台

专业前端都这么使用console?

console对于前端人员来讲肯定都不陌生，相信大部分开发者都会使用console来进行调试，但它能做的绝不

#前端 #优质博文
利用 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 中的应用

介绍一些你可能没用过的SVG小技巧。SVG 渐变边框在 CSS 中的应用

推荐无聊的群友
打开 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

为了应对运营商考核上下行比率，恩山无线论坛用户和某云盘使用恶意软件从 Bittorrent 网络无限吸血以提高下载量 - V2EX

NAS - @studyingss - # 前言一个朋友前段时间做种的时候，偶然发现一个很奇怪的中国 ip 的对等点，从他那里下载了数百倍于文件本身大小的量，但是仍在持续发起请求。搜索之后发现不止他遇到了这个情况，不少人发现**

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #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 投稿）

#碎碎念
频道主去天津玩儿顺便看老爸，这周末停更🤔

#优质博文 #独立开发
为什么开发者应该多关注海外市场
角度犀利，直接指出了独立开发的根源问题，这个作者其他文章也挺有意思的

AI 摘要：这篇文章主要探讨了国内开发者为什么应该更多地关注海外市场，提出国内市场存在的四大问题：个人或小团队难以存活、需求验证成本高、推广渠道和门槛问题、商业化选择有限。作者通过对比国内外市场的环境，强调了海外市场对独立开发者更为友好，例如海外市场的推广渠道多样且开放、用户付费意愿强烈等。文章最后强调，面向海外市场的产品开发能为开发者带来更多的机会和可能性。

via 掘金 强生