呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#优质博文 #前端 #工程化 #rust
前端新玩具 - Oxlint发布: JavaScript linter, 速度快50-100倍
摘要: Oxlint 是由字节跳动开发的一个JavaScript linter，使用Rust编写，速度比ESLint快50-100倍。作为OXC工具集的一部分，它旨在捕获错误或无用的代码，提供超过200条规则，支持.eslintignore和ESLint注释禁用。Oxlint主打零配置开箱即用，增强了诊断功能，易于集成和调整。虽然当前还不支持插件系统，但已有计划整合流行插件规则。Oxlint在Shopify的应用中将75分钟的ESLint运行时间缩减到10秒，显示了其显著的性能优势。
via 微信公众号 前端充电宝
前端新玩具 - Oxlint发布: JavaScript linter, 速度快50-100倍
摘要: Oxlint 是由字节跳动开发的一个JavaScript linter，使用Rust编写，速度比ESLint快50-100倍。作为OXC工具集的一部分，它旨在捕获错误或无用的代码，提供超过200条规则，支持.eslintignore和ESLint注释禁用。Oxlint主打零配置开箱即用，增强了诊断功能，易于集成和调整。虽然当前还不支持插件系统，但已有计划整合流行插件规则。Oxlint在Shopify的应用中将75分钟的ESLint运行时间缩减到10秒，显示了其显著的性能优势。
via 微信公众号 前端充电宝
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 282 期）：电动皮卡 Cybertruck 的 48V 供电
1. 2023年 CSS 发展总结（中文） 📓 Chrome 团队的总结，2023年 CSS 增加了哪些功能。#新标准 #css
2. 如何使用 Fail2ban 保护 SSH（英文）📓 一篇初学者教程，教你如何在 Linux 上使用 Fail2Ban，防止服务器被暴力破解密码。
3. Web Components 比 JavaScript 框架更长久（英文） 📓 作者需要一个页面效果，最终选择了 Web 组件来实现，这样可以与任何框架匹配。否则，换了一个框架，就需要重新实现。
4. 静态资源的缓存标头应该怎么写？（英文） 📓 网站的静态资源，通常不会经常变动，它们的缓存应该怎么写 HTTP 标头
5. 如何将 MP3 文件转为 Opus 格式？（英文） 📓 Opus 是新的音乐编码格式，比 MP3 音频质量更好，而且压缩后体积还更小。
6. 如何使用 GPT-3 解析非结构化数据（英文） 📓 作者演示一个实例，如何用 GPT-3 将公司的招聘帖子转成 JSON 数据。 【看了一下，很好的gpt使用实例，建议阅读】#chatgpt #ai
7. Imagine 🧰 Meta 公司推出的文生图工具，使用 Facebook 和 Instagram 的11亿张图片训练，现在可以免费使用。【试了下，风格比较三次元都，相比起来 chatgpt 的 DALL·E 更二次元】#ai #文生图
8. NotebookLM 🧰 谷歌发布的 AI 笔记工具，用户上传文档，然后可以对文档提问，并且自动生成笔记，目前对美国用户免费开放。参见谷歌的介绍文章。不过，它好像只支持上传英文的 PDF 文件。 #ai
9. Scalar API Reference 🧰 一个开源工具，将 Swagger/OpenAPI 文件转成互动式 API 文档。
10. MD Video 🧰 一个桌面软件，将 Markdown 文档转成一段短视频。【适合水视频？（】
11. bproxy 🧰 一款为前端开发设计的代理工具，可以拦截 HTTP 请求，配置文件是一个 JS 脚本。
12. Trippy 🧰 一个命令行工具，可以代替 traceroute 查看互联网通信的路径，分析网络状况。
科技爱好者周刊（第 282 期）：电动皮卡 Cybertruck 的 48V 供电
1. 2023年 CSS 发展总结（中文） 📓 Chrome 团队的总结，2023年 CSS 增加了哪些功能。#新标准 #css
2. 如何使用 Fail2ban 保护 SSH（英文）📓 一篇初学者教程，教你如何在 Linux 上使用 Fail2Ban，防止服务器被暴力破解密码。
3. Web Components 比 JavaScript 框架更长久（英文） 📓 作者需要一个页面效果，最终选择了 Web 组件来实现，这样可以与任何框架匹配。否则，换了一个框架，就需要重新实现。
4. 静态资源的缓存标头应该怎么写？（英文） 📓 网站的静态资源，通常不会经常变动，它们的缓存应该怎么写 HTTP 标头
5. 如何将 MP3 文件转为 Opus 格式？（英文） 📓 Opus 是新的音乐编码格式，比 MP3 音频质量更好，而且压缩后体积还更小。
6. 如何使用 GPT-3 解析非结构化数据（英文） 📓 作者演示一个实例，如何用 GPT-3 将公司的招聘帖子转成 JSON 数据。 【看了一下，很好的gpt使用实例，建议阅读】#chatgpt #ai
7. Imagine 🧰 Meta 公司推出的文生图工具，使用 Facebook 和 Instagram 的11亿张图片训练，现在可以免费使用。【试了下，风格比较三次元都，相比起来 chatgpt 的 DALL·E 更二次元】#ai #文生图
8. NotebookLM 🧰 谷歌发布的 AI 笔记工具，用户上传文档，然后可以对文档提问，并且自动生成笔记，目前对美国用户免费开放。参见谷歌的介绍文章。不过，它好像只支持上传英文的 PDF 文件。 #ai
9. Scalar API Reference 🧰 一个开源工具，将 Swagger/OpenAPI 文件转成互动式 API 文档。
10. MD Video 🧰 一个桌面软件，将 Markdown 文档转成一段短视频。【适合水视频？（】
11. bproxy 🧰 一款为前端开发设计的代理工具，可以拦截 HTTP 请求，配置文件是一个 JS 脚本。
12. Trippy 🧰 一个命令行工具，可以代替 traceroute 查看互联网通信的路径，分析网络状况。
全球互联网流量增长了 25%。
谷歌是最受欢迎的通用互联网服务， TikTok 跌至第四位。OpenAI 是 AI 类别中最受欢迎的服务，Binance 仍是最受欢迎的加密货币服务。
全球范围内超过三分之二的移动设备流量来自 Android 。Android 在超过 25 个国家/地区的移动设备流量中占有 >90% 的份额;iOS 移动设备流量份额的峰值为 66%。
Starlink 的全球流量增长了两倍。 2022 年中开始在巴西服务后，该国的 Starlink 流量在 2023 年增长了 17 倍以上。
Google Analytics、React 和 HubSpot 是顶级网站上最受欢迎的技术之一。
全球范围内，近一半的 Web 请求使用 HTTP/2，其中 20% 使用 HTTP/3。
NodeJS 是发出自动 API 请求的最流行的语言。
2023 年，全球支持 IPv6 的请求只有三分之一是通过 IPv6 发出的。但印度的比例达到了70%。
排名前 10 位的国家/地区的平均下载速度均超过 200 Mbps，其中冰岛在四个互联网质量测试指标中取得了最佳成绩。
全球超过40%的流量来自移动设备。在 80 多个国家/地区，大部分流量来自移动设备。 更多 来源
📢 频道：@kejiqu
👥 群组：@kejiquchat
#优质博文 #前端 #react #vue
React 还是 Vue？我对 Web 前端现状的看法
摘要: 本文由一位长期的前端开发者撰写，主要对比了React.js和Vue.js这两种流行的前端框架。作者分享了自己使用Vue/Nuxt及React的经验，强调没有完美的框架，每种框架都有各自的优缺点。在市场产品现状方面，国际化产品和SaaS更倾向于使用React。在设计工程师中，React同样占据优势。多用性方面，React在非Web领域的应用更广泛。开发者体验（DX）上，Vue提供了更平滑的学习曲线和更全面的官方文档。生态方面，React和Vue都有各自的优势，React拥有丰富的工具库和社区支持，Vue则在核心团队和社区共建上表现突出。总体上，虽然目前React在多个方面领先，但Vue的发展前景依然可观，需要更多开发者和企业的参与和支持。
via Cali Castle
React 还是 Vue？我对 Web 前端现状的看法
摘要: 本文由一位长期的前端开发者撰写，主要对比了React.js和Vue.js这两种流行的前端框架。作者分享了自己使用Vue/Nuxt及React的经验，强调没有完美的框架，每种框架都有各自的优缺点。在市场产品现状方面，国际化产品和SaaS更倾向于使用React。在设计工程师中，React同样占据优势。多用性方面，React在非Web领域的应用更广泛。开发者体验（DX）上，Vue提供了更平滑的学习曲线和更全面的官方文档。生态方面，React和Vue都有各自的优势，React拥有丰富的工具库和社区支持，Vue则在核心团队和社区共建上表现突出。总体上，虽然目前React在多个方面领先，但Vue的发展前景依然可观，需要更多开发者和企业的参与和支持。
via Cali Castle
cali.so
React 还是 Vue？我对 Web 前端现状的看法
作为一名长期的前端开发者，我想聊聊我对前端框架 React.js 和 Vue.js 的一些个人看法以及不同方面的对比。
#优质博文 #前端 #css #资源推荐 #tools
带圆角的虚线边框？CSS 不在话下
摘要: 本文探讨了使用CSS实现带圆角虚线边框的方法。传统的CSS边框（如
作为更优解，文章介绍了使用SVG来实现圆角虚线边框。利用开源工具 Customize your CSS Border，可以快速生成所需的虚线边框，并将SVG代码嵌入CSS中。这种方法既灵活又能适用于各种场景，是实现复杂虚线边框的理想选择。最后，作者还提供了相关的CodePen示例和GitHub资源，供读者进一步学习和探索。
via 公众号 iCSS前端趣闻
带圆角的虚线边框？CSS 不在话下
摘要: 本文探讨了使用CSS实现带圆角虚线边框的方法。传统的CSS边框（如
border: 2px dashed #aaa; ）无法控制虚线的单段长度和间隙。为解决这一问题，文章首先提出了两种基于渐变的方法：一是利用线性渐变模拟非圆角虚线，二是用重复角向渐变和伪元素结合实现圆角虚线。然而，这两种方法都有局限性，如线段长度不一致和无法创建透明边框。作为更优解，文章介绍了使用SVG来实现圆角虚线边框。利用开源工具 Customize your CSS Border，可以快速生成所需的虚线边框，并将SVG代码嵌入CSS中。这种方法既灵活又能适用于各种场景，是实现复杂虚线边框的理想选择。最后，作者还提供了相关的CodePen示例和GitHub资源，供读者进一步学习和探索。
via 公众号 iCSS前端趣闻
#优质博文 #资源推荐 #tools
给你的 Markdown 挑挑刺——语法检查器入门与进阶
摘要: 本文介绍了Markdown语法检查器的重要性和两种主要类型的检查器：markdownlint和AutoCorrect。markdownlint专注于检查和自动修复Markdown文档中的语法和格式问题，包括规范空格、链接使用和具体样式等。它有网页版、VSCode插件和命令行工具，适合不同用户需求。AutoCorrect则专门处理中文Markdown文档中的中英文间空格问题。文章强调，虽然许多人会使用Markdown，但真正写得好的并不多，这些工具可以帮助提高Markdown文档的质量和一致性。
via 少数派 PlatyHsu
给你的 Markdown 挑挑刺——语法检查器入门与进阶
摘要: 本文介绍了Markdown语法检查器的重要性和两种主要类型的检查器：markdownlint和AutoCorrect。markdownlint专注于检查和自动修复Markdown文档中的语法和格式问题，包括规范空格、链接使用和具体样式等。它有网页版、VSCode插件和命令行工具，适合不同用户需求。AutoCorrect则专门处理中文Markdown文档中的中英文间空格问题。文章强调，虽然许多人会使用Markdown，但真正写得好的并不多，这些工具可以帮助提高Markdown文档的质量和一致性。
via 少数派 PlatyHsu
少数派 - 高品质数字消费指南
给你的 Markdown 挑挑刺——语法检查器入门与进阶 ｜ 少数派会员 π+Prime
会写 Markdown 的人很多，但写得好 Markdown 的人却很少。有没有什么工具能充当「秘书」，检查文件中的 Markdown 语法和风格，并且提出解决方案、自动修复问题，甚至自动补齐中英文之间的「盘古之白」呢？本文介绍的 Markdown 语法检查器（linter）就能做到。
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 281 期）：新基建的政策选择
1. JavaScript 中验证 URL 的新方法（英文） 📓 JS 新增了一个
2. Cloudscape 🧰 一个 React 组件库，专为云产品设计的。 #组件库
3. TinyLD 🧰 一个 JS 库，用来判断一段文字是什么语言（汉语、英语、日语等等）。
4. VineJS 🧰 一个 Node.js 的表单验证库，只用于后端，支持大量验证规则，验证速度快。
5. AI Image Captions 🧰 一个在线工具，可以为图片生成介绍词，用于社交媒体，可以指定语言、风格和长度。 #AI
6. IP 工具箱 🧰 一个开源的本地网站，集成了 IP 相关的各种查询。
7. GoMusic 🧰 音乐迁移助手，将网易云音乐、QQ 音乐的歌单，迁移至 Apple/Youtube/Spotify Music。
8. 33 字幕 🧰 一个 Win/Mac 桌面软件，用于识别/制作音频和视频文件的双语字幕。
9. vue-draggable-plus 🧰 Vue2 & Vue3 的拖拽组件。
10. LLM 可视化 📓 这个网站提供大型语言模型（LLM）原理讲解，每一步讲解都在右侧配上动画。 【这个好牛掰】
科技爱好者周刊（第 281 期）：新基建的政策选择
1. JavaScript 中验证 URL 的新方法（英文） 📓 JS 新增了一个
URL.canParse() 方法，可以验证字符串是否为有效 URL。 #新标准2. Cloudscape 🧰 一个 React 组件库，专为云产品设计的。 #组件库
3. TinyLD 🧰 一个 JS 库，用来判断一段文字是什么语言（汉语、英语、日语等等）。
4. VineJS 🧰 一个 Node.js 的表单验证库，只用于后端，支持大量验证规则，验证速度快。
5. AI Image Captions 🧰 一个在线工具，可以为图片生成介绍词，用于社交媒体，可以指定语言、风格和长度。 #AI
6. IP 工具箱 🧰 一个开源的本地网站，集成了 IP 相关的各种查询。
7. GoMusic 🧰 音乐迁移助手，将网易云音乐、QQ 音乐的歌单，迁移至 Apple/Youtube/Spotify Music。
8. 33 字幕 🧰 一个 Win/Mac 桌面软件，用于识别/制作音频和视频文件的双语字幕。
9. vue-draggable-plus 🧰 Vue2 & Vue3 的拖拽组件。
10. LLM 可视化 📓 这个网站提供大型语言模型（LLM）原理讲解，每一步讲解都在右侧配上动画。 【这个好牛掰】
Stefanjudis
How to validate URLs in JavaScript (2023 edition)
Learn how to validate URLs with the new static JavaScript method `URL.canParse`.
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 280 期）：机器点餐与宅文化
1. Biome 🧰 JS 语言格式化工具 Prettier，提出谁能用 Rust 语言重新实现它，并通过所有测试用例，就能获得2万美元，因为它们自己没有资源做这件事。结果，只过了两个星期，Biome 就赢得了这场比赛。Biome 是一个 JS 工具箱，零配置就能实现 JS 脚本的格式化和 Lint，性能出众。#工程化
【草，太牛了】
2. Gmeek 🧰 超轻量级个人博客模板，将 GitHub 的 issue 转成博客网站。 #建站
3. TQUIC 🧰 腾讯对 QUIC 协议的实现，新开源的 QUIC 库，参考介绍文章。
4. ai-teacher 🧰 一个 ChatGPT 的前端开发示例，可以当作代码参考。 #chatgpt #AI
5. DevOpsGPT 🧰 一个 LLM 应用，根据根据需求生成开发文档，然后生成软件代码。
6. SDXL Turbo 体验站 🧰 免费使用 SDXL Turbo 模型，快速文生图，基本没有等待。
7. 、生成式 AI 初学者教程（Generative AI for Beginners） 📓 微软推出的入门课程，介绍生成式 AI，一共12课。
科技爱好者周刊（第 280 期）：机器点餐与宅文化
1. Biome 🧰 JS 语言格式化工具 Prettier，提出谁能用 Rust 语言重新实现它，并通过所有测试用例，就能获得2万美元，因为它们自己没有资源做这件事。结果，只过了两个星期，Biome 就赢得了这场比赛。Biome 是一个 JS 工具箱，零配置就能实现 JS 脚本的格式化和 Lint，性能出众。#工程化
【草，太牛了】
2. Gmeek 🧰 超轻量级个人博客模板，将 GitHub 的 issue 转成博客网站。 #建站
3. TQUIC 🧰 腾讯对 QUIC 协议的实现，新开源的 QUIC 库，参考介绍文章。
4. ai-teacher 🧰 一个 ChatGPT 的前端开发示例，可以当作代码参考。 #chatgpt #AI
5. DevOpsGPT 🧰 一个 LLM 应用，根据根据需求生成开发文档，然后生成软件代码。
6. SDXL Turbo 体验站 🧰 免费使用 SDXL Turbo 模型，快速文生图，基本没有等待。
7. 、生成式 AI 初学者教程（Generative AI for Beginners） 📓 微软推出的入门课程，介绍生成式 AI，一共12课。
Biome
Format, lint, and more in a fraction of a second.
#优质博文 #前端 #webGL
尝试用 three.js 实现了这个跨窗口的粒子动画
摘要: 本文介绍了作者如何使用 three.js 实现一个复杂的跨窗口粒子动画。作者首先采用了
via 掘金@alphardex
尝试用 three.js 实现了这个跨窗口的粒子动画
摘要: 本文介绍了作者如何使用 three.js 实现一个复杂的跨窗口粒子动画。作者首先采用了
GPGPU 技术，以处理大量粒子而不影响性能。创建 GPGPU 对象和数据纹理来存储 GPU 需要计算的数据，并使用计算着色器来处理变量的计算逻辑。粒子的本体通过 THREE.Points 和自定义的 BufferGeometry 实现，搭配自定义着色器材质 ShaderMaterial。作者还探索了如何制作拉伸球动画，并使用开源的 WindowManager 实现粒子球体的纠缠效果。尽管动画效果尚需优化，但文章展示了 three.js 在复杂动画制作中的强大功能。via 掘金@alphardex
#优质博文 #前端 #webGL
GPU-Accelerated Particles with WebGL 2
摘要: 本文深入探讨如何使用WebGL 2实现GPU加速的粒子系统。WebGL 2基于GL ES 3，提供了许多新特性，其中包括变换反馈（transform feedback）。粒子系统包括一系列独立的实体（粒子），每个粒子通过一组参数（如位置、速度、寿命等）来描述。文章阐述了在GPU上模拟大量粒子的优势，如利用并行处理来更新多个粒子，以及不需要每帧都上传更新数据。通过变换反馈，可以捕获顶点着色器输出的数据，用于后续处理。实现过程中包括两个GL程序：一个用于更新粒子状态，另一个用于渲染粒子。这种方法显著提高了处理粒子系统的效率。
via gpfault.net
--------------
【你问我为啥看这个？别提了说起来都是泪】
GPU-Accelerated Particles with WebGL 2
摘要: 本文深入探讨如何使用WebGL 2实现GPU加速的粒子系统。WebGL 2基于GL ES 3，提供了许多新特性，其中包括变换反馈（transform feedback）。粒子系统包括一系列独立的实体（粒子），每个粒子通过一组参数（如位置、速度、寿命等）来描述。文章阐述了在GPU上模拟大量粒子的优势，如利用并行处理来更新多个粒子，以及不需要每帧都上传更新数据。通过变换反馈，可以捕获顶点着色器输出的数据，用于后续处理。实现过程中包括两个GL程序：一个用于更新粒子状态，另一个用于渲染粒子。这种方法显著提高了处理粒子系统的效率。
via gpfault.net
--------------
【你问我为啥看这个？别提了说起来都是泪】
#优质博文
我在Google的18年：屠龙少年终成恶龙
这篇文章详细描述了一位Google前员工从 2005 年加入公司到 2023 年离职的经历。文章以第一人称视角，从最早的 Google 黄金时代讲起，早期的 Google 将 “不作恶” 一直贯穿到底，是工程师的天堂。随着时间的推移，Google 的文化开始逐渐蒸发。决策考量从用户利益变成了公司利益，后来只考量决策者的个人利益。最后为了确保股价的增长开始裁员。
via 公众号 编程技术宇宙
我在Google的18年：屠龙少年终成恶龙
这篇文章详细描述了一位Google前员工从 2005 年加入公司到 2023 年离职的经历。文章以第一人称视角，从最早的 Google 黄金时代讲起，早期的 Google 将 “不作恶” 一直贯穿到底，是工程师的天堂。随着时间的推移，Google 的文化开始逐渐蒸发。决策考量从用户利益变成了公司利益，后来只考量决策者的个人利益。最后为了确保股价的增长开始裁员。
via 公众号 编程技术宇宙
