呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
业务需要，看了看ToC的移动端适配的一些文章
1、如何使用 React-Responsive 进行响应式设计？（英文）
这篇文章是一个关于使用 React 和 react-responsive 库进行响应式网页设计的指南。它介绍了设计响应式网页布局时需要考虑的因素，展示了如何创建和测试一个简单的响应式网页，并推荐了使用 BrowserStack 进行实时设备云测试和自动化测试。（里面提到的 BrowserStack Responsive 我试了试，挺好用的喵）
2、响应式网站最佳实践的 7 个技巧（英文）
这篇质量也很不错，值得一看，7个技巧分别是确定目标优先级、易于发现的CTA（Call to Action）、使用SVG和响应式图片、可点击区域的尺寸、使用轻量级框架、移动优先的设计方法、跨浏览器测试、文章还列出了20个响应式网站的例子，供读者参考。（ps: 这里也是推了自己这个网站，Lambdatest）
3、使网站适合移动设备的 10 个最佳技巧（英文）
跟上文有一些重合，补充了：使用大字体、采用简洁的设计、使用视口元标签、使用媒体查询、简化表单、持续测试
感想：设计上确实之前有一些没想到，调试上考虑找一些类似BrowserStack这样（如图）的测多个设备的工具比较看看。
#前端 #阮一峰的科技周刊 #优质博文 #资源推荐
科技爱好者周刊（第 260 期）：你的旅程不会停在 Day 1
1. SafeLine（雷池）：开源的 WAF（应用程序防火墙），挡在网站之前对 Web 流量进行安全清洗。
2. ReviewGPT：为你的文章进行打分、评价，提出修改意见，甚至还可以扮演莎士比亚、金庸等知名作家，帮助你重新撰写。
3. 语音转字幕工具：仅需浏览器，AI 自动生成语音字幕，免费且可本地离线运行。（不知道好不好用）
4. 苹果 HDR 二维码（英文）: 一个很有趣的演示，苹果设备打开这个网页，上面有两个二维码，如果有一个更明亮，就说明当前设备支持 HDR（高动态成像）。
科技爱好者周刊（第 260 期）：你的旅程不会停在 Day 1
1. SafeLine（雷池）：开源的 WAF（应用程序防火墙），挡在网站之前对 Web 流量进行安全清洗。
2. ReviewGPT：为你的文章进行打分、评价，提出修改意见，甚至还可以扮演莎士比亚、金庸等知名作家，帮助你重新撰写。
3. 语音转字幕工具：仅需浏览器，AI 自动生成语音字幕，免费且可本地离线运行。（不知道好不好用）
4. 苹果 HDR 二维码（英文）: 一个很有趣的演示，苹果设备打开这个网页，上面有两个二维码，如果有一个更明亮，就说明当前设备支持 HDR（高动态成像）。
GitHub
GitHub - chaitin/SafeLine: SafeLine is a self-hosted WAF(Web Application Firewall) / reverse proxy to protect your web apps from…
SafeLine is a self-hosted WAF(Web Application Firewall) / reverse proxy to protect your web apps from attacks and exploits. - chaitin/SafeLine
🌐uitoolz - 一个包含 1000+ 设计资源的网址导航
现如今 AI 时代，小白也可以利用工具设计出好看的作品
fffuel - 一个设计工具合集网站
UI Goodies - 一个 UI 设计资源导航网站
Godly - 一个收集了 2000+ 个优秀设计网站的网站
📮投稿 📢频道 💬群聊
#博客更新
RN 学习小记之使用 Expo 创建项目
嗯，这篇属于随便写了点，然后感觉写都写了发一下的那种。
AI 生成的摘要：本文介绍了学习React Native的过程和资料收集，适合有前端基础和开发环境的人群。其中包括了RN相关资料、安卓开发环境的搭建、以及使用Expo进行RN开发的介绍和演示。最后提供了启动项目的方法。
Hexo博客链接🔗https://ysx.cosine.ren/react-native-note-1
xLog链接🔗 https://x.cosine.ren/react-native-note-1
RSS订阅 📢 https://x.cosine.ren/feed/xml
RN 学习小记之使用 Expo 创建项目
嗯，这篇属于随便写了点，然后感觉写都写了发一下的那种。
AI 生成的摘要：本文介绍了学习React Native的过程和资料收集，适合有前端基础和开发环境的人群。其中包括了RN相关资料、安卓开发环境的搭建、以及使用Expo进行RN开发的介绍和演示。最后提供了启动项目的方法。
Hexo博客链接🔗https://ysx.cosine.ren/react-native-note-1
xLog链接🔗 https://x.cosine.ren/react-native-note-1
RSS订阅 📢 https://x.cosine.ren/feed/xml
RN 学习小记之使用 Expo 创建项目 - cos
由于业务需要，开始学习 RN 以备后面的需求，而虽然之前有用过 RN 但是项目搭建等都是封装好的脚手架，对本身其实了解不算太多，于是打算记录一下个人从头搭建 RN 项目的一个过程。顺带进行一个资料收集。 适合：有前端基础，有前端基本开发环境，想了解一下 Expo 搭建 RN…
#资源推荐 #网页工具
网页图片提取下载：这是个网页图片提取和下载的工具，只需要把网站链接粘贴到输入框，然后点击 Extract 按钮，它就会自动分析网页上的所有图片，可以单独下载某张图片，也可以多选并打包下载成一个 zip 文件。
来源： https://t.me/NewlearnerChannel/11236
https://extract.pics/网页图片提取下载：这是个网页图片提取和下载的工具，只需要把网站链接粘贴到输入框，然后点击 Extract 按钮，它就会自动分析网页上的所有图片，可以单独下载某张图片，也可以多选并打包下载成一个 zip 文件。
来源： https://t.me/NewlearnerChannel/11236
extract.pics
extract.pics is a free tool to extract, view and download images from any public website by using a virtual browser. Now with an easy-to-use API.
▎Telegram 文章排版指南 2.0
原文链接：我怎样发布Telegram频道信息？
时隔一年，我终于更新了排版指南2.0。本文初次撰写时间为2022年7月8日，最后更新时间为2023年6月13日，更新了一些频道运营的工具并且结合最新功能进行说明。
赏心悦目的排版会令人舒适，在小小的文本框输入诸多文字，如何排版才能看起来清晰明了？运营 APPDO 数字生活指南 一年之久，对频道的文本有了一套自己的处理模式，想借此机会分享出来，希望本文能对大家Telegram频道的文本编辑工作和提高字体与排版审美有所帮助。
审美因人而异，因此没有固定的标准。欢迎各位朋友提出各自的见解，分享自己的频道。
频道 @AppDoDo
#前端 #阮一峰的科技周刊 #优质博文 #资源推荐 #组件库 #chatgpt
科技爱好者周刊（第 259 期）：如何免费使用 ChatGPT
1、STDF：基于 Svelte 与 Tailwind 的移动页面组件库。这下不得不看了
2、没了，这期没什么特别感兴趣的
科技爱好者周刊（第 259 期）：如何免费使用 ChatGPT
1、STDF：基于 Svelte 与 Tailwind 的移动页面组件库。这下不得不看了
2、没了，这期没什么特别感兴趣的
GitHub
GitHub - dufu1991/stdf: Mobile web component library based on Svelte and Tailwind
Mobile web component library based on Svelte and Tailwind - GitHub - dufu1991/stdf: Mobile web component library based on Svelte and Tailwind
#博客更新
Floating UI 使用经验分享 - Dialog
”关于写完毕设后就写好了一半但一直忙于各种事咕咕咕到现在这件事“
AI 生成的摘要：本文介绍了如何使用 Floating UI 创建对话框组件。对话框是一个浮动元素，显示需要立即关注的信息，它与弹出框有类似的交互，但有两个主要区别。本文还介绍了如何创建一个名为 Dialog 的 React 组件，它使用了 @floating-ui/react 库来创建一个可交互的浮动对话框。该组件具有多种参数和功能，包括控制对话框是否打开的布尔值、关闭对话框的方法、应用于对话框的 CSS 类名等。
Hexo博客链接🔗 https://ysx.cosine.ren/floating-ui-experience-dialog
xLog链接🔗 https://x.cosine.ren/floating-ui-experience-dialog
RSS订阅 📢 https://x.cosine.ren/feed/xml
Floating UI 使用经验分享 - Dialog
”关于写完毕设后就写好了一半但一直忙于各种事咕咕咕到现在这件事“
AI 生成的摘要：本文介绍了如何使用 Floating UI 创建对话框组件。对话框是一个浮动元素，显示需要立即关注的信息，它与弹出框有类似的交互，但有两个主要区别。本文还介绍了如何创建一个名为 Dialog 的 React 组件，它使用了 @floating-ui/react 库来创建一个可交互的浮动对话框。该组件具有多种参数和功能，包括控制对话框是否打开的布尔值、关闭对话框的方法、应用于对话框的 CSS 类名等。
Hexo博客链接🔗 https://ysx.cosine.ren/floating-ui-experience-dialog
xLog链接🔗 https://x.cosine.ren/floating-ui-experience-dialog
RSS订阅 📢 https://x.cosine.ren/feed/xml
Floating UI Experience Sharing - Dialog - cos
Previous article: Floating UI Experience Sharing - Popover In this article, I will share how to use Floating UI to create another common…
如何让ChatGPT了解自己所有插件的功能
ChatGPT 390 个插件数据
还怪好用的
GPT-4 聊天记录：https://chat.openai.com/share/4a8879fe-608c-4968-a7b4-00e115f9105e
这篇文章是关于ChatGPT插件的发展和应用。文章指出，ChatGPT插件的数量已经达到了390个，增长超过400%。其中，112个插件是在6月11日这一天发布的。尽管早期的插件质量参差不齐，但随着更多新插件的加入，各种创新的插件组合也被发现。
文章中提到了一个热门的应用，即使用AI自动收集资料并写出一本电子书。这个应用使用了一个新的AI Agents插件，该插件可以自动分解复杂任务、制定步骤并按顺序执行。再配合上两个联网插件负责收集资料，就可以实现自动写书的流程。
此外，文章还讨论了如何让ChatGPT了解自己所有插件的功能。作者通过爬虫和数据清洗脚本等手段，获取所有插件的名称和功能描述，然后通过联网插件或分批发送数据的方式，让ChatGPT了解自己的插件。
最后，文章提到了一个自动写书的插件组合，这个组合使用了AI Agents、WebRequest和WebPilot三个插件。作者测试了这个插件组合，并发现它可以成功地生成中文内容。
