[Saasfly前端小报] 想明白这点,就知道 TailwindCSS 适不适合你

129 阅读11分钟

国内

前端框架

2023 年的前端渲染框架

前端渲染框架在开发中发挥着重要的作用,可以提供网页构建、静态站点生成和自动代码分割等功能,帮助开发者构建高性能、可扩展和易于维护的应用程序,提高开发效率和用户体验。常见的前端渲染框架包括Astro、Next.js、Remix、Nuxt、Gatsby、SvelteKit、Eleventy和Enhance。根据state of js 2022的表现,目前使用最广泛且评价最好的框架是Next.js,而Astro、SvelteKit和Gatsby等新兴框架也有后来居上的趋势,而老牌框架Nuxt则逐渐失去了一些市场份额。本文主要介绍了一些前端框架的口碑和使用体验,并对这些框架进行了比较。作者提到了Next.js、Astro、SvelteKit和Gatsby等框架的口碑,其中Next.js和Gatsby的口碑较好,而Astro的口碑较差。作者对这些框架进行了实际使用的对比,包括npm安装速度、客户端JS大小和node_modules大小等方面。作者还提到了npm audit工具用于检测项目中的安全漏洞,并指出一些框架隐藏了报告。最后,作者鼓励读者根据项目需求和团队技能水平选择合适的框架,并提供了参考链接。

Server-driven UI

使用 API 发送 UI

本文介绍了通过API发送UI页面的方案,即服务器驱动的UI。服务器驱动的UI是一种新的UI开发方法,通过API在服务器端动态生成UI并发送到客户端。相比传统的UI开发方式,服务器驱动的UI更加灵活,可以根据用户行为、A/B测试结果或新功能发布等因素实时更改。一些科技公司如Instagram、Lyft和Airbnb已经开始实施这种方法。文章详细介绍了服务器驱动的UI的工作原理、优势和如何在项目中实现。服务器驱动的UI可以提供更快的迭代速度和更个性化的用户体验,使后端开发人员能够参与前端开发。然而,服务器驱动的UI也面临一些挑战,需要以不同的方式思考UI开发并保持流畅的用户体验。文章还以Instagram为例,说明了服务器驱动的UI在该应用中的作用。通过服务器驱动的UI,Instagram能够立即更新UI,修复错误,并更快地迭代其产品,提高产品开发的敏捷性和响应性。采用服务器驱动的UI带来了许多优势,可以显著提升开发过程和最终用户体验。

图可视化

图可视化探索与实践

本文介绍了图可视化的背景和图模型的概念,以及使用TypeScript实现DFS的示例代码。还涉及了图数据结构和相关算法的应用场景、前端技术探索、@antv/graphin库的使用和节点拖拽、全屏功能的实现。

RPA + 智能问答

RPA+智能问答实现微信端智能客服

本文介绍了通过RPA+智能问答实现微信端智能客服的背景和思考。文章还介绍了RPA的特点和实现步骤,包括知识助手的沉淀、可视化答案的展示、RPA自动化的监控和配置、微信和知识库的打通等。作者总结了实现方案和结果,表示微信智能客服已在监控多个群,为商家提供快速高效的解决方案,突破了微信端的限制,提升了服务体验,并进行了7*24小时的监控和自动化智能运维。

React

译:React 并发模式的基本原理

介绍 React 并发模式的基本原理

react-dnd 从入门到手写低代码编辑器

react-dnd 入门

Tailwind

想明白这点,就知道 TailwindCSS 适不适合你

本文讨论了前端开发中的设计系统和TailwindCSS,强调了学习TailwindCSS需要了解设计系统的概念,并且需要接受一个自上而下的开发流程。作者预测TailwindCSS的接受程度将逐年提升。另外,文本还描述了一个名为ChitChat的消息应用程序的界面。

小程序生态

支付宝小程序云效能:四大基于小程序生态的解决方案

支付宝小程序云效能是一款基于小程序生态的效能解决方案产品,为企业提供一站式研发协同平台,包含代码托管、流水线、云端研发、云测和制品库等子产品。支付宝小程序云效能提供了四大基于小程序生态的解决方案,分别是经典CI/CD自动化交付、云端研发极速交付、代码质量与安全、移动端自动化测试。其中,经典CI/CD自动化交付方案提供可视化的流水线编排,支持多环境、多服务并发部署;云端研发极速交付方案提供内置多种语言的标准研发环境,无需搭建环境,与云托管深度集成,实现代码一键部署;代码质量与安全方案提供代码评审和代码门禁功能,保证小程序服务端代码的质量与安全;移动端自动化测试方案提供丰富的自动化测试能力,包含安装卸载测试、功能性测试、兼容性测试、稳定性测试等。

调试

聊聊网页断点调试及其扩展

本文从抖音开发者工具支持断点调试能力需求引入,概述了浏览器断点调试的基本原理,也介绍了 Vscode Web 代码断点调试能力,详细介绍了各模块中各 CDP 消息通信逻辑。阅读本文可以掌握前端各种调试方法的基本原理。

低代码

网易云音乐 Tango 低代码引擎正式开源!

Tango是一个用于快速构建低代码平台的低代码设计器框架,它可以通过几行代码来搭建一个基本的低代码平台前端系统。Tango的低代码设计器可以直接读取前端项目的源代码,并以源代码为中心,执行和渲染前端视图,并为用户提供低代码可视化搭建能力。Tango的低代码引擎支持可视化视图与源码双向同步,双向互转,为开发者提供LowCode+ProCode无缝衔接的开发体验。

设计

设计如何助力知道产品打造持续消费体验

百度知道在其18周年之际拓展了【知识笔记】新场域,通过简单、沉浸式的交互,简化信息获取途径,让用户将注意力集中在深度消费优质内容上。设计师从内容分发框架、交互优化和视觉传达优化三个方面进行了设计方向探索,助力百度知道拓展了【知识笔记】新场域,提供了简化、沉浸式的知识获取体验,满足用户的深度消费需求。

这次终于要对忍了很久的腾讯云下手了

本文介绍了对腾讯云产品列表菜单进行优化的思路和改版说明,包括问题分析和优化方案。作者提到了菜单的大小问题,建议进行窗口自适应。在细节原型制作中,作者确定了菜单的初始宽度为980px,并进行了相关交互的拓展。最后,作者提到了未来的优化思路和反馈渠道。

数据库

从数据库发展历程到数据结构设计探析

本文针对数据存储相关名词概念进行了解释,重点介绍了数据库技术的发展史,并又从数据结构设计层面进行了部分技术实战能力的外延扩展,阐述了拉链表、位运算、环形队列等相关数据结构在软件开发领域的应用,希望本文给你带来收获。

国外

Browser

New to the web platform in August

2023年8月,Firefox、Safari和Chrome发布了稳定版本,带来了一些有趣的新功能。其中包括Firefox 116的Audio Output Devices API,允许重定向音频输出到蓝牙耳机等设备;Chrome 116的CSS Motion Path,允许通过指定路径来动画化图形对象;以及Chrome 116的Document Picture-in-Picture API,允许创建始终置顶的窗口并填充任意HTMLElements。

Astro

Astro 3.0

Astro 3.0是一个支持View Transitions API的主要网络框架,可以实现网页上的渐变、淡入淡出、滑动等效果,提升页面导航的流畅性。此外,Astro 3.0还提升了渲染性能,大多数组件的渲染速度比Astro 2.9快30%,在某些情况下甚至可以提高75%。Astro 3.0还引入了图像优化、累积布局移位(CLS)的支持以及对无服务器的SSR的增强。Astro 3.0还对内部JSX构建支持进行了改进,引入了React Fast Refresh功能。Astro 3.0在构建输出方面也进行了多项改进,包括自动压缩HTML输出和将小块的CSS内联到HTML中。

Biome

Announcing Biome

Biome是Rome的分支项目,由之前维护Rome的团队创建和维护。Biome提供了一套完整的Web工具链,并将继续延续Rome的遗产。Biome的官方资源包括Github组织、官方代码仓库、官方Discord服务器和官方Twitter账号。

Design

Case Study: Rebuilding TechCrunch layout with modern CSS

这篇文章作者前前后后写了一个月,通过 case study 的形式来学习技术

React

React State Management: A Guide 2023

React中的状态管理以及一些内置的状态管理工具和可用于状态管理的外部库。如何使用这些库,并通过示例了解了它们最适合的用例,以及何时使用内置工具是最佳解决方案。

Why does React re-render and when do we need to worry about it?

React 在什么时候 re-render?什么会触发 re-render?什么情况下应该做优化?

人工智能

大厂推文

淘宝 | 基于Stable Diffusion的AIGC服饰穿搭实践

本文介绍了基于Stable Diffusion技术的虚拟穿搭试衣的研究探索工作,以及基于Stable Diffusion的应用程序Stable Diffusion Web UI的本地部署过程。通过使用LoRA、ControlNet、Inpainting、SAM等工具和处理流程,实现了更优质的服饰虚拟穿搭体验。

当大模型不是问题时,如何应对 LLM 的工程化落地挑战?

作者讨论了在大模型不再是问题的情况下,如何应对LLM的工程化落地挑战,包括使用开源模型降低成本,LLM + LoRA微调成为主流方式,以及LLaMA 2、Code LLaMA 2等模型不断刷新这种可能性。作者还讨论了LLM应用的工程化落地,优化语言间的交互,设计技术架构,建模与优化Prompt,构建更好的模型上下文等问题。作者还讨论了LLM服务作为API与FFI的角度,以及与企业现有基础设施的结合。作者提到了不同编程语言的AI基础设施,如Python、Java、Kotlin和Rust,并介绍了FFI作为接口方式的应用。此外,作者还提到了一些常用的基于FFI库的推理模型,如Tiktoken、Tokenizers和ONNX Runtime。最后,作者讨论了LLM应用的技术架构和不同业务场景下的三种模式。

腾讯 | 用强化学习构建个性化的二维码

本文介绍了使用强化学习构建个性化二维码的方法,通过强化学习和课程学习对现有的ControlNet进行finetune,以提高生成图像的融合效果和识别成功率。作者还介绍了强化学习的基本概念和马尔可夫决策过程(MDP)的重要性。文章详细介绍了Stable Diffusion(SD)算法和去噪过程,并将其建模为一个强化学习场景。最后,作者提到了未来的工作方向。