呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #移动端适配 #RWD
将响应式网页设计推向极致 - Taking RWD To The Extreme
via Frontend Focus#679
将响应式网页设计推向极致 - Taking RWD To The Extreme
摘要:Tomasz Jakut 回顾了网页设计的发展历程,回顾了表格布局风靡一时、Flash 游戏塑造网络文化的时代。 然后,响应式网页设计(RWD)出现了——这常常让人感觉像是历史的终结,至少对网页设计来说是这样。 毕竟,我们仍在创建响应式网站,这才是真正的网页布局方式(The True Way)。 然而,今年,也就是 2025 年,是伊桑-马科特(Ethan Marcotte)发表文章 15 周年,这篇文章永远地改变了网页开发。 以 "网络 "年计算,这是一个完整的时代。 所以,也许在 RWD 之后发生了一些事情,但它是如此明显,以至于几乎不为人所知。 让我们试着揭开它的面纱。
通过DeepL翻译
via Frontend Focus#679
将响应式网页设计发挥到极致--自从伊森-马科特(Ethan Marcotte)首次撰文介绍响应式网页设计(Responsive Web Design)以来,已经过去了 15 年(!),在此期间,我们获得了各种新的强大 CSS 布局工具(如 Flexbox 和 Grid)。 这些布局系统反过来又开创了一个声明式、固有网页设计的新时代,浏览器比以往任何时候都更有能力处理布局。
Source by pixiv 雨野
原始标签: #BanGDream #豊川祥子 #插画 #Ave_Mujica #衣装
自定义标签: #mujica #丰川祥子 #祥子
尺寸: 2912x4653
@CosineGallery | 网站| 本图链接 2232
#前端 #优质博文 #javascript #性能优化
There are a lot of ways to break up long tasks in JavaScript.
有很多方法可以在JavaScript中分解长任务
via Alex MacArthur
There are a lot of ways to break up long tasks in JavaScript.
有很多方法可以在JavaScript中分解长任务
AI 摘要:这篇文章讨论了长任务(Long Tasks)对网页性能的影响,以及如何优化用户体验。长任务是指执行时间超过 50ms 的 JavaScript 任务,会阻塞主线程,导致页面卡顿,影响交互响应。文章介绍了如何使用Performance API识别长任务,并提出了优化策略,如将任务拆分成更小的部分 (如使用setTimeout
、requestIdleCallback
)、 Web Workers以及避免不必要的重排和重绘。此外,作者还提供了一些实用工具,如 Chrome DevTools,用于分析和优化长任务,以提升页面的流畅度和响应速度。
我们在这里介绍的方法并不详尽,但我认为这些方法很好地体现了在分解长任务时应该考虑的各种权衡。不过,根据需要,我自己可能只会采用其中的一个子集。
If I can do the work off from the main thread, I'd choose a web worker, hands-down. They're very well supported across browsers, and their entire purpose is to offload work from the main thread. The only downside is their clunky API, but that's eased by tools like Workerize and Vite's built-in worker imports.
如果能从主线程中卸载工作,我会毫不犹豫地选择网络 Worker。网络 Worker 在各种浏览器中都得到了很好的支持,而且它们的全部目的就是从主线程中卸载工作。唯一的缺点是 API 比较笨拙,但 Workerize 和 Vite 内置 Worker 导入等工具可以缓解这一问题。
If I need a dead-simple way to break up tasks, I'd go for scheduler.yield(). I don't love how I'd also need to polyfill it for non-Chromium users, but the majority of people would benefit from it, so I'm up for that extra bit of baggage.
如果我需要一个简单的方法来分解任务,我会选择 scheduler.yield()。我不喜欢还需要为非 Chromium 用户 polyfill 它,但大多数人都会从中受益,所以我愿意承受额外的负担。
If I need very fine-grained control over how chunked work is prioritized, scheduler.postTask() would be my choice. It's impressive how deep you can go in tailoring that thing to your needs. Priority control, delays, cancelling tasks, and more are all included in this API, even if, like .yield(), it needs to be polyfilled for now.
如果我需要非常细粒度的控制工作优先级,那么scheduler.postTask()将是我的选择。令人印象深刻的是,您可以为您的需求量身定制这种东西多么深刻。优先控制,延迟,取消任务以及更多内容都包含在此API中,即使现在.yield()它需要暂时进行polyfilled。
If browser support and reliability are of the utmost importance, I'd just choose setTimeout(). It's a legend that's not going anywhere, even as flashy alternatives hit the scene.
如果浏览器支持和可靠性至关重要,我只选择setTimeout() ,它是一个不会消失的传奇,即使华而不实的替代品层出不穷。
via Alex MacArthur
#正则 #开源 #tools #前端
Human Regex 具有英语语法的人类友好的正则表达构建器
via Node Weekly#566
Human Regex 具有英语语法的人类友好的正则表达构建器
Human-Friendly Regular Expression Builder with English-Like Syntax — After 8 years of Perl, regexes are my bread and butter, but I’d say most developers aren’t big fans 😉 This library offers a more natural fluent-style option. Magic Regexp and Super Expressive are other options in this space.
使用类英语语法的,对用户友好的正则表达式构建器 —— 八年Perl经验之后,正则表达式已经成为我的家常便饭了,但我认为大多数开发者们可不是很喜欢 😉 这个库提供了一个更自然流畅的风格选项。
via Node Weekly#566
#优质博文 #AI #前端
构建可扩展的智能体系统:工程化方法与实践(一)
via 微信公众号 哔哩哔哩技术
构建可扩展的智能体系统:工程化方法与实践(一)
AI 摘要:本文探讨了智能体(Agent)系统在AI软件开发中的作用,并以代码审查(Code Review)任务为例,展示如何从概念到实践构建一个可扩展的智能体系统。
当前的大语言模型(如GPT-4、LLaMA)在工程优化和规模扩展上取得进展,但仍受幻觉、不可靠性等问题的限制。智能体系统通过模块化设计、自主决策、可编程约束和自适应学习,有望提升AI的可靠性和可扩展性。
文中介绍了主流Agent开发框架,包括LangChain(链式调用)、AutoGPT(自主规划)、MetaGPT(多智能体协作)等,并详细阐述了Code Review Agent的开发实践。最初的代码审查方法较为简单,后来通过Prompt Engineering优化AI输出质量,最终采用LangChain框架构建更高效的智能体,实现更精准的代码分析与优化。
via 微信公众号 哔哩哔哩技术
答应我,下次不要再分头行动了,好吗?【动态壁纸】
@SAW272:
同人·手书 - 我永远喜欢善良米塔
〰〰〰〰〰〰〰〰〰〰
🔝> @SAW272:
想要视频同款?来我的工房看看吧>> https://b23.tv/mall-EcFq-1D6zs2
又支持了,萌萌萌,3块钱买不了吃亏买不不了上当
#米塔 #善良米塔
#动态壁纸 #付费 #壁纸
@SAW272:
同人·手书 - 我永远喜欢善良米塔
〰〰〰〰〰〰〰〰〰〰
🔝> @SAW272:
想要视频同款?来我的工房看看吧>> https://b23.tv/mall-EcFq-1D6zs2
又支持了,萌萌萌,3块钱买不了吃亏买不不了上当
#米塔 #善良米塔
#动态壁纸 #付费 #壁纸
#tools #userbot #bot #ai #开源 #tweet
RainbowBird (@luoling8192):因为 telegram 中文搜索很差劲,所以我昨天用 cursor 做了一个 telegram userbot,可以导出聊天记录到 pgvector 数据库里面,然后就可以做到如图所示的语义化搜索了。有需要的朋友可以点个✨
目前支持:机器人模式,客户端模式,导入导出聊天记录等
https://github.com/luoling8192/telegram-search
https://fixupx.com/luoling8192/status/1888827521371898078
RainbowBird (@luoling8192):因为 telegram 中文搜索很差劲,所以我昨天用 cursor 做了一个 telegram userbot,可以导出聊天记录到 pgvector 数据库里面,然后就可以做到如图所示的语义化搜索了。有需要的朋友可以点个✨
目前支持:机器人模式,客户端模式,导入导出聊天记录等
https://github.com/luoling8192/telegram-search
https://fixupx.com/luoling8192/status/1888827521371898078
#优质博文 #tools #工具推荐
1. Canva 如何建立图像搜索(英文) #搜索 #图像
本文介绍 Canva 公司如何使用向量嵌入,建立相似图片搜索。
下面是另外一篇类似的文章《基于 pgvector 和 Next.js 构建语义电影搜索》,也是使用向量嵌入。
2. 同一个 GitHub 用户如何用不同身份 SSH 登录(英文) #github #ssh
有时,同一个 GitHub 用户使用不同的 SSH 密钥,去登录不同的仓库。本文教你这时怎么写 SSH 配置文件。
3. Lightpanda #无头浏览器 #tools
轻量级的无头浏览器,可以接入 Playwright / Puppeteer,占用资源和执行速度号称是 Chrome 的十分之一。
4. changedetection.io
一个开源的服务,用来检测指定网页的某个部分是否发生变化。比如,网页上面的商品价格发生变化,它就会通知你。 【好多这种服务了 但是mark一下】
5. Voice-Pro #AI #语音
AI 语音工具,具有多种功能(语音识别、翻译、语音克隆、文本转语音),属于 Whisper 模型的 Web UI。
6. Hacker News Wrapped #趣站
该网站可以输入一个 Hacker News 论坛的用户名,它会用 DeepSeek 模型总结该用户的特点,描述非常准确而且传神。
7. GenSFX #AI #音效
免费的 AI 音效生成网站。
8. Beej 的 Git 指南(Beej's Guide to Git)
著名教程作者 Beej 的最新 Git 教程,基于他向大学学生的课堂讲义。
via #阮一峰的科技周刊 336
1. Canva 如何建立图像搜索(英文) #搜索 #图像
本文介绍 Canva 公司如何使用向量嵌入,建立相似图片搜索。
下面是另外一篇类似的文章《基于 pgvector 和 Next.js 构建语义电影搜索》,也是使用向量嵌入。
2. 同一个 GitHub 用户如何用不同身份 SSH 登录(英文) #github #ssh
有时,同一个 GitHub 用户使用不同的 SSH 密钥,去登录不同的仓库。本文教你这时怎么写 SSH 配置文件。
3. Lightpanda #无头浏览器 #tools
轻量级的无头浏览器,可以接入 Playwright / Puppeteer,占用资源和执行速度号称是 Chrome 的十分之一。
4. changedetection.io
一个开源的服务,用来检测指定网页的某个部分是否发生变化。比如,网页上面的商品价格发生变化,它就会通知你。 【好多这种服务了 但是mark一下】
5. Voice-Pro #AI #语音
AI 语音工具,具有多种功能(语音识别、翻译、语音克隆、文本转语音),属于 Whisper 模型的 Web UI。
6. Hacker News Wrapped #趣站
该网站可以输入一个 Hacker News 论坛的用户名,它会用 DeepSeek 模型总结该用户的特点,描述非常准确而且传神。
7. GenSFX #AI #音效
免费的 AI 音效生成网站。
8. Beej 的 Git 指南(Beej's Guide to Git)
著名教程作者 Beej 的最新 Git 教程,基于他向大学学生的课堂讲义。
via #阮一峰的科技周刊 336