推荐目录
-
作为前端开发者，你没有必要学 Rust？
-
携程后台低代码平台的探究与实践
-
转转Flutter实践之路
-
我逆向了GitHub Copilot，这是代码实现
-
新一代前端发展的困境与破局
国内
微信小程序
微信团队为了优化小程序跳转频繁的问题，从基础库2.20.1开始支持半屏小程序能力，提升交互体验。现在支持一点一拉即可从半屏小程序展开成全屏，同时使用过的半屏小程序也会显示在最近使用的小程序列表中，方便用户快速触达。开发者只需在接口配置中设置allowFullScreen参数，即可支持已打开的半屏小程序展开全屏。
携程 - 低代码
本文介绍了携程市场内容PGC团队搭建的低代码平台PGClowcode的背景、方案调研、落地过程中遇到的问题以及解决方案，并介绍了该平台提供的能力。PGClowcode平台通过其架构和技术实现，提供了低代码开发、可视化拖拽和多角色协同等功能，为应用的开发和部署提供了便利。
转转 - Flutter
本文介绍了作者对Flutter技术的实践之路，包括可行性验证、基建一期建设、小范围试验、基建二期建设、大范围推广和前端生态的探索等阶段。作者总结了对Flutter技术的评估，认为在开发效率、UI一致性和性能表现等方面，Flutter是符合预期的，但学习成本相对较高。团队计划在接下来的时间里投入更多资源，逐渐建立Flutter的基础设施。
字节 - 构建工具 RSPack
介绍了构建工具的对比以及 RSPack 的设计思路、探索历程以及未来思考。
京东设计 - AIGC海报
【AIGC】只要10秒，AI生成IP海报，解放双手
本文介绍了使用AI生成IP海报的方法和技巧，包括云端部署和本地部署两种方式，以及训练集的处理步骤和训练参数的设置。文章还介绍了训练过程中需要注意的稳定性、泛化性和收敛性，以及运用SD稳定生成高质量IP海报的方法。最后，文章提到了在创作过程中的几个重要概念和步骤，包括发散幅度、随机种子、尺寸、批次和批数。
网易云音乐 - AIGC
云音乐CMS平台通过Tempo框架的改造，实现了免发布部署、在线配置和插件加载等新特性，提升了平台的个性化定制能力和移动办公能力。通过AIGC的实践，取得了一系列的成果和改进。Tempo是一个具备自动升级特性的主应用，通过免发布部署能力，使得已接入Tempo的主应用可以直接享受升级后的最新公共特性能力，而无需关注升级所带来的发布部署成本。云音乐公技前端团队构建了一个低成本接入LLM服务的产品方案，帮助业务快速地、低成本地构建知识库、智能问答、AI驱动产品功能等一系列能力。Tempo支持多端自适应能力，并将用户的登录态与云音乐权限管理系统（PMS）做了打通处理，使得在Popo内打开CMS平台应用链接时可以直接免登成功。Tempo还提供了在线配置能力和插件加载的能力，降低了主应用因升级依赖而带来的研发部署成本。
腾讯 - GitHub Copilot
Github Copilot 是一种基于机器学习的代码自动补全工具。它使用了来自 GitHub 的大量代码作为训练数据，并使用 OpenAI 的语言模型来生成代码。Copilot 还可以学习用户的编码习惯，并根据上下文推断出正确的代码片段。在实际使用中发现大部份提示还是非常好用的，能够较为准确的推测出用户意图，甚至是基于项目其他文件的上下文进行推理。比较好奇这里是怎么做到的，于是探索了这个 VSCode 插件的详细实现。
AI对齐
大模型&低代码
本文介绍了大语言模型在低代码平台中的应用实践。首先从直观角度解释了大模型的基本原理，包括输入输出的过程以及选词策略。然后介绍了大模型在应用落地中的几种方案，包括文档问答、生成数据模型和生成页面。对于文档问答，通过向量搜索和生成器的方式实现，可以根据用户问题查找相关文档并生成回答。生成数据模型可以通过指令微调的方式，根据用户需求自动生成表结构定义。生成页面则可以通过微调模型，根据用户描述生成页面配置。文章还提到了大模型应用中存在的问题，如幻觉问题、窗口大小限制等。最后，介绍了评估大模型效果的方法和继续预训练的重要性。
Harmony Next & Flutter
本文讨论了华为鸿蒙和Flutter之间的联系，介绍了Harmony Next的发布和对开发者的影响，以及Harmony计划支持的第三方跨平台框架。华为表示将支持React Native、Flutter、Taro、Weex、uni-app等框架。文章还提到了鸿蒙的策略和鸿蒙Next的升级问题。此外，文章还讨论了华为的鸿蒙操作系统在中国市场的份额和鸿蒙与Flutter的联系。
Rust
作为前端开发者，学习Rust并不是必须的。尽管Rust在前端领域有一定的应用，但学习Rust存在一些挑战。然而，基于Rust的前端工具如Rspack、SWC、Oxc和Rspress具有颠覆性，可以提升开发效率。保持开放心态和宽阔视野是重要的。
本文讨论了前端开发者是否有必要学习Rust，指出学习Rust可以为前端开发者带来更多机会和不同的视野，同时也提到了学习Rust的困难和需要根据个人情况来决定。
前端发展
Android 14
从 Android 14 看 Framework 开发新趋势
本文主要讨论了Google在Android 14框架代码中引入的新技术栈，包括编译系统的变化和Settings模块的改变。文章强调了学习Jetpack Compose和Android应用架构最佳实践的重要性，并提供了相关学习资源的链接。作者还提到了依赖注入在应用架构中的重要性，介绍了Google推进的基于Hilt的依赖注入框架。
容器化
具体实践
-
介绍了gitlab-action的在前端npm领域的基本配置
-
介绍了前端Dockerfile文件的编写，以及pnpm在docker的优化方案，如何利用buildx生成前端多架构镜像
-
介绍了生产场景下前端环境变量的使用
-
介绍了前端React项目技术架构方案
浏览器 vs 图形引擎
本文介绍了浏览器渲染引擎和图形引擎的比较，以及WebKit作为一个开源的Web浏览器引擎的特点和组件。文章还讨论了浏览器的渲染过程，包括解析、布局、绘制和合成，并介绍了硬件加速绘图技术和合成技术的应用。此外，还介绍了3D图形引擎的功能和与浏览器渲染的相似之处。最后，提到了懂车帝作为一个汽车领域的前端技术团队，他们的技术栈和招聘信息。
C端设计趋势
C端设计已经不再只是以用户为中心，而是需要转变思路以应对市场需求的冲击。C端产品越来越不纯粹，功能越来越多，变得复杂。C端产品也开始从“工具-社区”模式转变为“工具-平台”模式，利用流量进行商业化。B站商业化能力孱弱，增加了广告投放和商业化运作。大型产品们的发展经验使许多小产品从一开始就放弃了打磨用户体验的打算。许多产品在重要位置添加短视频曝光，引导用户去观看。品牌化设计、平面化设计和运营化设计是C端应用设计的趋势和视觉特征。移动端UI设计中的趋势和发展方向包括固定的二级页面、H5设计和加载、主题和内容的切换、大转盘和开盲盒等活动。模态弹窗在C端产品中的使用已经不再是用于操作或特殊情况通知，而是用于强行引导用户关注运营相关内容。运营化设计在产品中的重要性越来越高。UI设计和运营设计的界限变得越来越模糊。视觉发展方向的要点是具体使用哪种风格不重要，不同应用和场景适用的风格是不同的，设计师需要自己去摸索。设计师应该以市场和商业效益为导向，而不是个人喜好。
用户体验
这段文本主要讨论了前端开发中追求用户体验的各个方面，包括稳定性、性能、视觉样式和产品方案。作者强调了体验优化的重要性以及如何提高用户体验。
设计模式
本文介绍了策略模式在数据接收和发送场景中的应用，以及如何通过策略模式解决客户端代码与策略的具体实现紧密耦合的问题。通过使用策略模式，可以根据运行时条件动态地选择一个具体的策略类，并通过这个策略类来改变对象的行为，从而实现不同的数据接收和发送方式。同时，结合工厂模式，可以更好地解决客户端代码与策略的具体实现紧密耦合的问题。
责任链模式是一种行为设计模式，可以通过创建一条由多个处理节点组成的链，每个节点都有机会处理请求，并决定是否将请求传递给下一个节点。使用责任链模式可以解耦请求的发送者和接收者，提高代码的灵活性和可维护性。责任链模式适用于需要动态处理请求、不明确指定接收者或需要按顺序执行多个处理者的场景。通过使用责任链模式，可以更加灵活和优雅地处理请求，降低代码之间的耦合度，提高代码的可维护性和可扩展性。在具体实现上，可以声明处理者接口并描述请求处理方法的签名，确定如何将请求数据传递给方法，创建抽象处理者基类以消除重复的样本代码，并依次创建具体处理者子类并实现其处理方法。客户端可以自行组装链或从其他对象处获得预先组装好的链，并触发链中的任意处理者。责任链模式的应用示例是请假场景，根据请假天数的不同，不同的审批人可以处理请求。相比于使用大量的if-else语句，使用责任链模式可以提供更好的代码灵活性和可维护性。
国外
CSS
A Couple of New CSS Functions I’d Never Heard Of
这段文本介绍了CSS中的一些属性和函数，包括light-dark()、xywh()、inset()、round()、offset-path、perspective()等。文本还提到了这些函数的浏览器支持情况。
CSS prefers-reduced-transparency
从Chrome 118版本开始，引入了一个新的媒体查询功能，名为prefers-reduced-transparency。非不透明的界面可能会给各种类型的视觉缺陷带来困扰或视觉障碍，因此可以通过这个媒体查询来减少或移除界面的透明度。Windows、macOS和iOS都有系统偏好设置来调整透明度。在浏览器中使用这个新的媒体查询，CSS可以根据用户指定的减少透明度的需求来调整界面。在代码示例中，一个CSS变量保存了一个透明度值，然后与HSL一起使用来创建一个半透明的蓝色背景。媒体查询检查用户是否偏好减少透明度，如果是，则将透明度变量调整为接近不透明的值。这个媒体查询与其他偏好媒体查询很好地配合，使设计师和开发人员能够在调整用户界面时保持创意。减少透明度的用例包括在图像上叠加半透明标题、移除叠加层并在图像下方显示相同的标题内容等。
这段文本讨论了关于"现代"CSS的概念以及如何定义和描述它。作者注意到在文章标题中经常出现“现代”一词，并提到了一些与CSS相关的新特性和技术，如CSS Grid、层叠样式表、条件伪选择器和新的颜色空间。作者认为现在是写作CSS的最激动人心的时刻。然而，作者也提到了对于CSS这种技术来说，难以考虑到永久性和持久性。作者引用了Stevie Nicks的歌词来表达这种不确定性。作者还回顾了过去使用“CSS3”来指代新的CSS特性的时代，并提到了现在可能不再涉及网格布局，而更多地涉及清除浮动等问题。作者认为我们不需要回到过去的系统，但是需要找到一种方式来描述CSS爆发出最丰富的特性集的这个特定时刻。作者提出了一些可能的想法，如以时代或以十年为单位来描述。最后，作者提到了2020年的CSS如何改变了我们在网页上编写颜色的方式。
Speeding up the JavaScript ecosystem - Tailwind CSS
本文主要讨论了Tailwind CSS的性能优化和工作原理。作者通过性能分析发现了一些可以改进的地方，并提出了改进的建议。文章介绍了Tailwind CSS的工作原理，包括类名的解析和生成规则的过程。作者还讨论了有效的Tailwind类名和如何优化解析器。最后，作者通过使用正则表达式来提取潜在的Tailwind类名，并对搜索空间进行了逐步缩小的过程，成功提高了提取速度。
VSCode
Visual Studio Code的2023年10月发布版本的介绍，这个版本有很多更新，其中一些主要亮点包括：
- 更多音频提示 - 新增了用于指示清除、保存和格式化活动的音频提示。
- Activity栏位置 - 将Activity栏移到顶部以实现紧凑显示。
- 隐藏编辑器选项卡 - 显示多个、单个或不显示编辑器选项卡。
- 最大化编辑组 - 快速展开活动的编辑器组。
- Python改进 - 在终端中更好地运行代码，更容易创建虚拟环境。
- FastAPI教程 - 学习使用VS Code开发Python FastAPI应用程序。
- Java Gradle支持改进 - 提供更好的对Java Gradle项目的支持。
- 预览：GitHub Copilot - 聊天"代理人"，生成提交消息，支持终端。
这些更新旨在改善Visual Studio Code的功能和用户体验。用户可以从官方网站或其他途径下载该版本，并尝试其中的新功能和改进。
Docusaurus 3.0
AI - 发布
Grok是xAI发布的第一个AI模型，它被建模成了《银河系漫游指南》中的AI，并旨在回答几乎任何问题，甚至能提出问题建议。
Service Worker - WinterJS
WinterJS是一个用Rust编写的JavaScript Service Workers服务器，使用SpiderMonkey运行时来执行JavaScript。WinterJS不仅可以编译为WebAssembly，还可以完全在Wasmer上运行。WinterJS通过WASIX的能力实现了极快的速度。WinterJS可以通过Rust本地运行，也可以通过Wasmer运行。WinterJS的源代码可以在GitHub上找到。WinterJS的JavaScript服务工作者也可以部署到Wasmer Edge上。在构建WinterJS的过程中，我们选择了适用于Wasm环境的JavaScript运行时，并分析了一些JS运行时的挑战。
Stack Overflow & Svelte
Why Stack Overflow is embracing Svelte
关于Stack Overflow网站对Svelte的采用以及关于Cookie设置的内容。Stack Overflow网站使用Svelte来改善其网站的功能和个性化。性能Cookie可以帮助网站统计访问量和流量来源，以便衡量和改善网站的性能。
