呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#优质博文 #前端 #新标准 #html
原生 details 支持手风琴模式了！
AI摘要：HTML的
via 微信公众号 前端侦探
原生 details 支持手风琴模式了！
AI摘要：HTML的
details 元素最近新增了一个 name 属性，这一更新带来了手风琴模式的支持。details 元素通常与 summary 元素配合使用，提供了原生的展开和收起效果。通过CSS自定义，可以去除 summary 前的黑色三角形，并支持嵌套以实现树形结构目录。新增的 name 属性允许将多个 details 元素关联起来，实现手风琴效果，即打开一个元素时关闭其他元素。由于兼容性问题，可能需要通过 JavaScript 进行兼容性处理。目前，可以通过检测 'name' in document.createElement('details') 来确认浏览器是否支持此新特性。尽管这一特性可以通过 JavaScript 实现，但其提供了一种无需额外脚本即可实现的原生方法。via 微信公众号 前端侦探
#优质博文 #前端
Frontend predictions for 2024
AI 生成的摘要：2023年前端领域的发展迅猛，焦点包括抢夺和创新服务器端渲染（SSR）市场、AI的快速发展、新的Web渲染器和JavaScript引擎的大量涌现，以及众多新兴力量挑战现有主流技术。SSR技术由Vercel大力推动，引发了业界对使用SSR服务的广泛关注。同时，AI的应用在前端流程中也逐渐增多，例如ChatGPT和GitHub Copilot已成为日常编程的辅助工具。此外，浏览器引擎和JS引擎的发展也是焦点之一，包括新的Ladybird浏览器和Hermes JS引擎的革新。跨平台框架方面，React Native优势明显，Flutter面临挑战，同时有新技术如Dioxus（基于Rust的GUI应用开发框架）出现。在UI框架方面，大型框架仍占主导地位，但Svelte和其他框架通过创新特性寻求突破。构建系统方面，新一代构建工具如SWC和Esbuild越发受到青睐。而在开发工具方面，对现有工具的不满导致新工具的出现。预计2024年将看到工具和框架的更多整合，AI技术将更深入地融入日常开发流程中。
via Whatever, Jamie
Frontend predictions for 2024
AI 生成的摘要：2023年前端领域的发展迅猛，焦点包括抢夺和创新服务器端渲染（SSR）市场、AI的快速发展、新的Web渲染器和JavaScript引擎的大量涌现，以及众多新兴力量挑战现有主流技术。SSR技术由Vercel大力推动，引发了业界对使用SSR服务的广泛关注。同时，AI的应用在前端流程中也逐渐增多，例如ChatGPT和GitHub Copilot已成为日常编程的辅助工具。此外，浏览器引擎和JS引擎的发展也是焦点之一，包括新的Ladybird浏览器和Hermes JS引擎的革新。跨平台框架方面，React Native优势明显，Flutter面临挑战，同时有新技术如Dioxus（基于Rust的GUI应用开发框架）出现。在UI框架方面，大型框架仍占主导地位，但Svelte和其他框架通过创新特性寻求突破。构建系统方面，新一代构建工具如SWC和Esbuild越发受到青睐。而在开发工具方面，对现有工具的不满导致新工具的出现。预计2024年将看到工具和框架的更多整合，AI技术将更深入地融入日常开发流程中。
via Whatever, Jamie
Buttondown
Frontend predictions for 2024
It's been a remarkable year for frontend. We've seen a gold rush to capture – and invent – the server-side rendering (SSR) market; the advancing tentacles of...
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 285 期）：为什么 PPT 不如备忘录
1. 负数的取模问题（英文） 📓 计算机编程有取模运算（mod），获取整除的余数。问题是负数的模怎么算？比如-13除以3的余数，一些编程语言是1，另一些编程语言是-2。
2. Triangle Patterns 🧰 三角渐变图案的生成工具。
3. Bluestone Markdown（青石） 🧰 一个所见即所得的 Markdown 桌面编辑器，集成了 Mermaid 图形与 Katex 公式，支持明亮和暗黑风格。
4. resume-json-pdf 🧰 通过 JSON 文件，在线生成 PDF 简历。
这里还有一个类似的工具 Faultier-CV，通过 Markdown 格式编写简历，并能实时预览。 【感觉还得是木及简历】#简历制作
5. schedule-x 🧰 谷歌日历的开源模仿品。
6. fabritor 🧰 一款基于 fabric.js 的创意图片编辑器，支持自己部署。
7. Nostalgist.js 🧰 一个在浏览器中运行怀旧游戏主机模拟器的 JavaScript 库，比如运行任天堂FC 模拟器、世嘉 MD 模拟器、街机模拟器等等。
8. stt 🧰 离线运行的本地语音识别转文字工具，基于 fast-whipser 模型。
9. HTTPS Certification generator 🧰 这个在线工具可以一键生成 IP 地址的自签名 HTTPS 证书，适合用于开发环境。
10. cmd-wrapped 🧰 这个工具可以读取你的命令行操作的历史记录，生成一份年度总结。支持 Zsh 和 Bash，并可指定年份。
11. 中国历朝代视频讲解 📓 一个开源网站，将 BiliBili 上面综合数据最高的一些中国历史视频，以时间轴的方式呈现。
12. YUERGS 🧰 作者为了解决自学吉他过程遇到的痛点，开发了这个网站，支持吉他谱滚动播放、吉他调音、查和弦、节拍器、扒歌等相关功能。
13. 文本编辑器实时协同的原理和实现（英文） 📓 文本编辑器如何支持多人实时编辑？本文以示例讲解原理。
科技爱好者周刊（第 285 期）：为什么 PPT 不如备忘录
1. 负数的取模问题（英文） 📓 计算机编程有取模运算（mod），获取整除的余数。问题是负数的模怎么算？比如-13除以3的余数，一些编程语言是1，另一些编程语言是-2。
2. Triangle Patterns 🧰 三角渐变图案的生成工具。
3. Bluestone Markdown（青石） 🧰 一个所见即所得的 Markdown 桌面编辑器，集成了 Mermaid 图形与 Katex 公式，支持明亮和暗黑风格。
4. resume-json-pdf 🧰 通过 JSON 文件，在线生成 PDF 简历。
这里还有一个类似的工具 Faultier-CV，通过 Markdown 格式编写简历，并能实时预览。 【感觉还得是木及简历】#简历制作
5. schedule-x 🧰 谷歌日历的开源模仿品。
6. fabritor 🧰 一款基于 fabric.js 的创意图片编辑器，支持自己部署。
7. Nostalgist.js 🧰 一个在浏览器中运行怀旧游戏主机模拟器的 JavaScript 库，比如运行任天堂FC 模拟器、世嘉 MD 模拟器、街机模拟器等等。
8. stt 🧰 离线运行的本地语音识别转文字工具，基于 fast-whipser 模型。
9. HTTPS Certification generator 🧰 这个在线工具可以一键生成 IP 地址的自签名 HTTPS 证书，适合用于开发环境。
10. cmd-wrapped 🧰 这个工具可以读取你的命令行操作的历史记录，生成一份年度总结。支持 Zsh 和 Bash，并可指定年份。
11. 中国历朝代视频讲解 📓 一个开源网站，将 BiliBili 上面综合数据最高的一些中国历史视频，以时间轴的方式呈现。
12. YUERGS 🧰 作者为了解决自学吉他过程遇到的痛点，开发了这个网站，支持吉他谱滚动播放、吉他调音、查和弦、节拍器、扒歌等相关功能。
13. 文本编辑器实时协同的原理和实现（英文） 📓 文本编辑器如何支持多人实时编辑？本文以示例讲解原理。
Torstencurdt
Modulo of Negative Numbers
The modulo operator returns the remainder of a division. But things get a little more tricky when you throw negative numbers into the mix.
#碎碎念 #前端 #年度总结
整理了一下我的2023前端技术栈，感觉web3技术栈基本都很统一：
其他组件自己写 or NPM 找优秀的能高度自定义的组件（
ui 库不常用 用的话就
WebGL 用
埋点用
web3相关
常用hooks/函数
持久化存储
整理了一下我的2023前端技术栈，感觉web3技术栈基本都很统一：
react + ts + next.js 老三样eslint + prettier 格式化代码tailwind css & tailwind-merge & tailwind-variants & clsx 写样式axios + react-query 管理网络请求jotai 状态管理（从 recoil 转过来的）framer-motion 动画库 / 之前有用过 gsap 也不错floating-ui 浮动元素库其他组件自己写 or NPM 找优秀的能高度自定义的组件（
swiper , rc-slider , react-toastify 等）react-table 写表格，高度自定义ui 库不常用 用的话就
radix-ui / mui / headless-uiWebGL 用
three.js埋点用
react-ga4web3相关
wagmi & viem & decimal.js / big.js常用hooks/函数
react-use / ahooks / lodash-es / dayjs & 自己写持久化存储
localforage 或者用 react-use 里的 useLocalforage 或者自己写▫️Lusion Labs - 一个收集炫酷前端网页的网站
▫️Handsome-css-lib - 收集网上仅靠 CSS 与 HTML 就可以实现的动效UI
📮投稿 📢频道 💬群聊
#资源推荐 #AI
mark一下，回头看看效果
一句话克隆你的声纹，还可以精细控制情感、口音、节奏、停顿和语调！
⚜️ research.myshell.ai/open-voice
来自 MyShell 的开源 TTS - OpenVoice，可以实现 Zero-shot 方式的跨语言即时声音克隆。官方表示计算成本只有商用 API 的几十分之一。
mark一下，回头看看效果
一句话克隆你的声纹，还可以精细控制情感、口音、节奏、停顿和语调！
来自 MyShell 的开源 TTS - OpenVoice，可以实现 Zero-shot 方式的跨语言即时声音克隆。官方表示计算成本只有商用 API 的几十分之一。
#优质博文 #前端 #组件库 #资源推荐
Ant Design 家族再添新成员，全家族一览！
文章介绍了Ant Design家族的新成员及其产品线。Ant Design是蚂蚁金服的企业级产品设计体系，包含多个组件库和解决方案：
1. Ant Design：基于React的UI组件库，用于开发企业级中后台产品。包括表格、按钮、表单等，使用TypeScript开发。
2. Ant Design Pro：企业级中后台前端/设计解决方案，基于React和Ant Design，提供多功能布局和设计组件。
3. Ant Design Web3：基于Ant Design的Web3 React组件库，用于构建去中心化应用（DApp），支持与不同区块链的交互。
4. Ant Design Pro Components：基于Ant Design的高级模板组件，用于快速制作CRUD页面。
5. Ant Design Mobile：Ant Design的移动端React实现，提供40+高质量基础组件。
6. Ant Design Mini：面向小程序的UI组件库，支持支付宝小程序、微信小程序等。
7. Ant Design Charts (Antv)：数据可视化组件库，支持多种图表类型和视觉效果。
8. Ant Design Landing：针对产品首页的解决方案，提供丰富的模板。
9. Ant Motion：Ant Design中提炼的动效语言，提供动效解决方案。
10. Scaffolds：实用的脚手架集合。
每个产品都专注于不同的开发需求，共同构成一个完整的企业级前端解决方案体系。
via 公众号 前端充电宝
Ant Design 家族再添新成员，全家族一览！
文章介绍了Ant Design家族的新成员及其产品线。Ant Design是蚂蚁金服的企业级产品设计体系，包含多个组件库和解决方案：
1. Ant Design：基于React的UI组件库，用于开发企业级中后台产品。包括表格、按钮、表单等，使用TypeScript开发。
2. Ant Design Pro：企业级中后台前端/设计解决方案，基于React和Ant Design，提供多功能布局和设计组件。
3. Ant Design Web3：基于Ant Design的Web3 React组件库，用于构建去中心化应用（DApp），支持与不同区块链的交互。
4. Ant Design Pro Components：基于Ant Design的高级模板组件，用于快速制作CRUD页面。
5. Ant Design Mobile：Ant Design的移动端React实现，提供40+高质量基础组件。
6. Ant Design Mini：面向小程序的UI组件库，支持支付宝小程序、微信小程序等。
7. Ant Design Charts (Antv)：数据可视化组件库，支持多种图表类型和视觉效果。
8. Ant Design Landing：针对产品首页的解决方案，提供丰富的模板。
9. Ant Motion：Ant Design中提炼的动效语言，提供动效解决方案。
10. Scaffolds：实用的脚手架集合。
每个产品都专注于不同的开发需求，共同构成一个完整的企业级前端解决方案体系。
via 公众号 前端充电宝
#博客更新 #年度报告
2023，稀松平常的一年
是2023的年度总结，很偷懒啦，唉。
AI 生成的摘要：这篇文章是作者对2023年的回顾总结。作者分享了自己在北京实习、回学校、买电动车、吃美食、住房情况、爱好娱乐等方面的经历。同时，作者还提到了自己在做流麻和买胶带方面的兴趣，并分享了自己追的番剧和国漫。此外，作者还介绍了自己在维护TG频道和开发小项目方面的折腾经历。
Hexo博客链接 🔗 https://ysx.cosine.ren/2023-life-review
xLog链接 🔗 https://x.cosine.ren/2023-life-review
RSS订阅 📢 https://x.cosine.ren/feed/xml
2023，稀松平常的一年
是2023的年度总结，很偷懒啦，唉。
AI 生成的摘要：这篇文章是作者对2023年的回顾总结。作者分享了自己在北京实习、回学校、买电动车、吃美食、住房情况、爱好娱乐等方面的经历。同时，作者还提到了自己在做流麻和买胶带方面的兴趣，并分享了自己追的番剧和国漫。此外，作者还介绍了自己在维护TG频道和开发小项目方面的折腾经历。
Hexo博客链接 🔗 https://ysx.cosine.ren/2023-life-review
xLog链接 🔗 https://x.cosine.ren/2023-life-review
RSS订阅 📢 https://x.cosine.ren/feed/xml
