呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #跨端 #tailwind #rn #css #color #follow
React Native 实践:Colors

AI 摘要:这篇文章讲述了 Follow Mobile 的颜色体系。Follow Mobile 使用 React Native 和 Expo 开发,并通过 NativeWind 工具来实现类似 TailwindCSS 的样式系统。文中详细介绍了准备工作,包括安装 NativeWindCSS、配置 Babel 和 Metro、创建 PostCSS 样式入口等。接着介绍了选择颜色体系,搬用了苹果的颜色规范,并提供了相应的颜色值参考。然后讲解了如何使用 NativeWind 的变量注入功能,将颜色定义从顶层传入且在 TailwindCSS 中配置使用。这些方法被用于组件中设置颜色和颜色过渡动画。最后文章提到,这个方案已被抽取为通用库,供大家使用。

via innei
#优质博文 #跨端 #rust #wasm
大前端:如何突破动态化容器的天花板?

最终我们获得了一个如上图的高性能、安全的动态化容器,可以以Wasm的方式支持原生级别的性能,也可以将JavaScript 的前端工程的性能提升一截。

从某个角度看,像是我们把RN用Rust重写了,添加了Wasm解释器的支持。但用熟悉WebView架构的视角看,也可以看作是一个WebEngine Lite,只是试图绘制暂时用的系统UI。


文章写的挺有意思的。

AI 摘要:美团金服大前端团队在动态化容器性能提升方面做出了重要进展,提出了新的容器解决方案 Recce。长期以来,动态化容器因其复杂性,往往牺牲性能,导致用户体验下降。团队指出,现有容器方案如 React Native 和 WebView 在性能上存在明显短板,特别是在大规模视图节点处理时。

Recce 通过优化逻辑解释器的执行效率和通信效率,使页面加载速度提升了300%。团队选用了 Wasm 作为主要解释器,并结合 Rust 语言构建高性能的UI框架,避免了传统 JavaScript 框架的性能瓶颈。此外,Recce 还保留了 React Native 的优良特性,利用系统 UI 框架来优化渲染过程。

via 掘金 美团技术团队

突然掉落群友邀请码: nasuCk_v0T
#优质博文 #ReactNative #跨端 #tailwind #rn
原来 React Native 已经如此成熟了

【能用 tailwind 了确实爽,前阵子试了试】

AI 摘要:React Native 的最新发展和优势
作者详细介绍了 React Native 的最新进展和成熟度,特别是以下几个关键点:

1. Hermes 引擎:提升了 JavaScript 的解析和编译效率,使应用程序运行更快。
2. JSI 通信方式:通过 C++ 实现的轻量级工具,减少了 JS 和 Native 之间的通信成本。
3. Fabric 渲染引擎:提高了 UI 渲染性能,支持高频交互和同步渲染。
4. Hades 垃圾回收器:在后台并行执行垃圾回收,减少程序运行延迟。
5. Expo 框架:提供了完整的应用层框架和沙箱能力,降低了开发门槛。
6. React Native IDE:VSCode 插件,简化了开发和调试过程。
7. Tailwindcss 集成:实现了一致的开发体验,简化了样式编写。

总结认为,React Native 生态系统已经非常成熟,并且未来发展可期。


via 微信公众号 这波能反杀
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools

科技爱好者周刊(第 292 期):所有代码都是技术债

1. 为什么我选择 Tauri 而不是 Electron(英文) 📓 作者本来使用 Electron 开发跨平台桌面应用,后来改成了 Tauri。本文讲述了原因,以及他的感受。 #跨端 #electron #tauri 【好文】
2. text-wrap 的换行控制(英文) 📓 长文本的自动换行,由 CSS 的 text-wrap 属性控制。本文讨论如何使用这个属性,让标题产生更美观的自动换行。 #css
3. Ente 🧰 一个云相册软件,Google Photos 和 iCloud Photos 的替代品,以前是闭源产品,最近刚刚开源。它的主要特点是提供端对端加密。其他的云相册软件,还有 ImmichPhotoPrism
4. Earthly 🧰 一个开源的 CI/CD 框架,可以在本地架设自动构建服务。
5. 日语短文排版小工具 🧰 一个在线工具,生成漂亮的日文排版,支持横竖版式、自动假名标注、深浅两种主题、字体配置、高亮、下划线、字体等。(@miusuncle 投稿)
6. Web-Check 🧰 开源的网站分析工具, 可以分析网站的 IP 信息、SSL 链、DNS 记录、Cookie、域名信息、服务器位置、网站性能等,查看 Demo
7. ImageTools 🧰 AI 一键抠图(去除背景)的在线工具。(@handsometong 投稿) #AI
8. zz-plan 🧰 甘特图/横道图的在线制作工具。(@lizhichao 投稿)
9. Rsdoctor 🧰 一个 JS 构建器的分析工具,能够查看构建产物的模块关系,并分析构建器对代码的更改,支持 Rspack 和 Webpack。(@easy1090 投稿)
10. ast-grep VSCode 🧰 一个 VSCode 插件,是一种结构搜索/替换工具,可以更精确、更高效地搜索和替换代码元素。(@HerringtonDarkholme 投稿)
#vscode 【如图,还挺方便的】
 
 
Back to Top