呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页: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
收藏不等于有用,6 条准则助我高效管理书签 | 少数派
AI 摘要:这篇文章介绍了如何通过6个准则高效管理浏览器书签。准则包括:设定收藏标准、使用单层目录和标签、简化命名格式、方便检索、即时分类和使用阅读清单。作者强调避免无效收藏,删除无用和失效的书签,并通过简洁的命名和标签管理,使书签更加直观和易于查找。文章还推荐了整理书签的工具和插件,帮助读者优化书签管理,提高日常工作和生活效率。
感觉推荐的挺有用的,以下是原文摘出来总结的
1. 推荐一个 Chrome 浏览器插件「批量清理书签插件 Bookmarks clean up」,用于首步整理,清理无效书签和重复书签
2. 面对新书签,制定明确的收藏标准,如果不能肯定回答以上问题,那么这个书签可能就不需要被收藏。并且作者提供了自己的收藏标准
3. 使用单层目录和标签对书签分类,(按照用途分类/按照频率分类:如每日使用、偶尔使用等/按照项目分类:如不同的工作项目、学习课程等)要方便记忆。
按固定格式命名,· <分类> | <描述> <标签1> <标签2> <标签3>
或者,让 AI 帮你重命名书签,「能不动手就动脑」。
4. 好的命名大家都会(不,我不会QAQ),但缺少一个好用的搜索工具,默认的书签搜索很不方便。浏览器无鼠标操作的插件 Vimium-c-全键盘操作浏览器。
#优质博文 #阮一峰的科技周刊 #前端 #在线网站 #tools
科技爱好者周刊(第 318 期):创业咖啡馆的记忆
1. 怎么写 CSS 的打印样式(英文) 📓 本文是一篇教程,介绍网页打印样式的 CSS 写法。涵盖了页面布局控制、页眉页脚处理及通过 JavaScript 生成打印友好内容等技术。 #css
2. 使用 Caddy 部署 Web 应用程序(英文) 📓 一篇长文,介绍 Caddy 如何当作 Web 服务器的初学者教程。#caddy #部署 #docker
3. 好的重构 vs 坏的重构(英文) 📓 有些时候,重构之后的代码比之前还难懂。本文逐一举例,分析怎样的重构是好的,怎样是坏的。
4. 哨兵值是什么(英文)📓 这篇短文通过牙膏的例子,解释什么是编程使用的哨兵值(sentinel value)。
5. common-intellisense 📓 VS Code 插件,为多种常用的前端 UI 库提供注释和类型提示。 #vscode
6. Franzelio 一个有意思的网页小游戏,在网页上画线,反弹小球,发出的声音组成旋律。
科技爱好者周刊(第 318 期):创业咖啡馆的记忆
1. 怎么写 CSS 的打印样式(英文) 📓 本文是一篇教程,介绍网页打印样式的 CSS 写法。涵盖了页面布局控制、页眉页脚处理及通过 JavaScript 生成打印友好内容等技术。 #css
2. 使用 Caddy 部署 Web 应用程序(英文) 📓 一篇长文,介绍 Caddy 如何当作 Web 服务器的初学者教程。#caddy #部署 #docker
3. 好的重构 vs 坏的重构(英文) 📓 有些时候,重构之后的代码比之前还难懂。本文逐一举例,分析怎样的重构是好的,怎样是坏的。
4. 哨兵值是什么(英文)📓 这篇短文通过牙膏的例子,解释什么是编程使用的哨兵值(sentinel value)。
5. common-intellisense 📓 VS Code 插件,为多种常用的前端 UI 库提供注释和类型提示。 #vscode
6. Franzelio 一个有意思的网页小游戏,在网页上画线,反弹小球,发出的声音组成旋律。
#碎碎念 #demo #canvas #webgl #前端
NB,真酷啊这个折射效果
https://vxtwitter.com/fserb/status/1794058245901824349
Source Twitter @fserb
NB,真酷啊这个折射效果
https://vxtwitter.com/fserb/status/1794058245901824349
For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas.
One of them is the ability to have HTML elements in a canvas.
Here's a ThreeJS demo with a live HTML texture.
Source Twitter @fserb
#优质博文 #javascript #前端
The web's clipboard, and how it stores data of different types
Web 的剪贴板,以及它如何存储不同类型的数据
AI 摘要:网页剪贴板能够存储多种数据类型(如纯文本、HTML、PNG 图片等),不同应用根据支持的 MIME 类型选择合适的格式进行粘贴。自 2017 年引入的异步
The web's clipboard, and how it stores data of different types
Web 的剪贴板,以及它如何存储不同类型的数据
AI 摘要:网页剪贴板能够存储多种数据类型(如纯文本、HTML、PNG 图片等),不同应用根据支持的 MIME 类型选择合适的格式进行粘贴。自 2017 年引入的异步
Clipboard API 限制了可读写的 MIME 类型,仅支持 text/plain、text/html 和 image/png,无法直接处理自定义类型。而旧的 Clipboard Events API 则允许在用户触发的可信事件中读写更多自定义数据类型。实际应用中,如 Google Docs 和 Figma 通过特定方法(例如 execCommand("copy") 和嵌入 base64 字符串)实现了自定义数据的剪贴板传输。不同浏览器对自定义数据类型的处理各异,限制了跨应用程序的共享。尽管 Raw Clipboard Access 提案因安全问题未被广泛采用,Chromium 在 2022 年实现的 Web Custom Formats(Pickling)为未来支持自定义数据类型提供了可能。总体而言,当前跨浏览器支持自定义剪贴板数据类型仍有限,但通过合理使用现有 API 和关注新提案,开发者可以在保障安全的前提下,实现更灵活的剪贴板操作。#碎碎念
NB,我好喜欢这首歌的风格啊
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
《归龙潮》长命锁PV | 有心没心,何者能活?
@归龙潮:
手机游戏 - 「我用自己的心换了什么?」
「商业机密~没有心,才能活得更好,赚的更多。」
「所以,你也想典当自己的心么?」
➤《归龙潮》全平台公测预下载现已开启!
✦公测开启时间:9月13日10:00
✦立即前往下载:https://www.biligame.com/detail/?id=109978
✦预下载指引:https://www.bilibili.com/opus/975737550873296953
NB,我好喜欢这首歌的风格啊
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
《归龙潮》长命锁PV | 有心没心,何者能活?
@归龙潮:
手机游戏 - 「我用自己的心换了什么?」
「商业机密~没有心,才能活得更好,赚的更多。」
「所以,你也想典当自己的心么?」
➤《归龙潮》全平台公测预下载现已开启!
✦公测开启时间:9月13日10:00
✦立即前往下载:https://www.biligame.com/detail/?id=109978
✦预下载指引:https://www.bilibili.com/opus/975737550873296953
What’s new in React 19
人 工 摘 要
React 19 带来了许多新特性,提升了性能和开发体验。主要更新包括:
1. 服务器组件 (Server Components):通过服务器渲染组件,加快初次加载时间,减少客户端 JavaScript 传输量,改善 SEO。
2. Actions:新的函数取代传统事件处理程序,支持在客户端和服务器执行。
3. 新的 hook :如
useActionState 、 useOptimistic 等,简化状态管理与表单处理。4. 改进的资源预加载:优化页面加载速度。
5. ref as a prop: 不再需要 forwardRef,不再需要
<Context.Provider> 。您可以直接使用 <Context> 。7.
useDeferredValue 中添加了 initialValue 选项。提供后, useDeferredValue 将使用该值进行初始渲染并安排在后台重新渲染,返回 deferredValue 。8. React 19 将原生提升和渲染标题、链接和元标签,甚至是嵌套组件。不再需要第三方解决方案来管理这些标签。
9. React 19 允许使用优先级
precedence 控制样式表的加载顺序。这使得将样式表放在组件附近更容易,React 只会在使用时加载样式表。10. 更好的错误报告
- 通过删除重复的错误消息来改进错误处理。(以前,React 会抛出两次错误。一次是最初的错误,第二次是自动恢复失败,然后是错误信息。 )
- 通过记录单个不匹配错误而不是多个错误来改善水合错误。错误消息还包括有关如何修复错误的信息。