weekly

第 97 期 09/26 纯前端容器 Lath & Commenting on Preview

image.png Source: Lath(纯前端容器)打造页面间的无缝平滑连接体验

技术热闻

Introducing Commenting on Preview Deployments

Today, we’re taking a step toward making Preview Deployments even more collaborative with new commenting capabilities now in Public Beta. With Preview Deployments, you get a live link with the actual user experience for every pull request.

First Batch of Color Fonts Arrives on Google Fonts

https://developer.chrome.com/blog/colrv1-fonts/

COLRv1 is a binary vector format (unlike the bitmap color fonts of yore), which means fonts can scale without becoming pixelated. And by layering glyphs and then reusing those layers in similar glyphs, file sizes stay compact. COLRv1, which is already available in both Chrome, Android, and the Google Fonts API.

Summer of open source: building more efficient AI with PyTorch

This post on creating efficient artificial intelligence (AI) is the second in the “Summer of open source” series. 对 PyTorch 和 AI 感兴趣的同学可以深入阅读。

大前端

CSS

CSS-in-JS 的库是如何工作的?

笔者近期学习 Material UI 的过程中,发现 Material UI 的组件都是使用 CSS-in-JS 的方式编写的,联想到之前在社区里看到过不少批判 CSS-in-JS 的文章,对此有些惊讶。CSS-in-JS 的库是如何工作的?是什么让 Material UI 选择了 CSS-in-JS 的方式开发组件库?

精读《State of CSS 2022》

CSS 2022 新特性很大一部分是将 HTML 原生能力暴露出来,赋能给业务自定义

JS

JavaScript APIs You Don’t Know About

In this article, Juan Diego covers the least known yet extremely useful APIs, such as the Page Visibility API, Web Sharing API, Broadcast Channel API and Internationalization API.

ECMAScript 双月报告:Hashbang Grammer 提案成功进入到 Stage 4

本次会议中,Hashbang Grammer 提案成功进入到 Stage 4,将在 ECMAScript 2023 中被作为正式语言特性加入到 JavaScript 当中。

Vue

A brief history of Vue Script Setup

In this article, we’ll guide you through how the Script Setup came to be, touch on how it differs from its predecessors, and we’ll use it to build a single file Vue component to get some practice putting it to work.

一文解析 Pinia 和 Vuex ,带你全面理解这两个 Vue 状态管理模式

本文将通过Vue3的形式对两者的不同实现方式进行对比

React

React I Love You, But You’re Bringing Me Down

I’ve been very transparent about my feelings. Now I’d like you to do the same. Do you plan to address the points I’ve listed above, and if so, when? How do you feel about library developers like me? Should I forget about you, and move on to something else? Or should we stay together, and work on our relationship?

性能

Lath(纯前端容器)打造页面间的无缝平滑连接体验

https://lath.dev/

Lath 是一个纯前端的容器,它能够把任何一个普通的 Web 页面变为可丝滑连接与其关联页面的集合,也就是可以将任何页面变为一个 SPA 单页 Web 应用。

云音乐 iOS 启动性能优化「开荒篇」 https://mp.weixin.qq.com/s/XVd9QNvXgJx_9K3XHAcaSA 随着云音乐用户基数的不断扩大和深度使用,越来越多的用户反馈启动速度慢,况且启动速度过慢更甚至会降低用户的留存意愿。因此,云音乐 iOS App 急需要进行一个专项针对启动性能进行优化。

Wasm

使用 WebAssembly 打造定制 JS Runtime

让Web Assembly来跑 Runtime,然后在 Runtime 里再跑JS,完成了一整个 JS Runtime 定制的流程。

低代码

RETHINKING LOW-CODE/NO-CODE AND OPEN SOURCE, PART 1

Low-code/no-code solutions may streamline a specific approach, using today’s technology, to quickly deliver prototypes or Minimum Viable Products, but software is never finished.

房产运营活动的开发演进过程

为了解放这部分页面的开发,希望能通过拖拉拽组件的方式就可以生成页面,像小时候玩积木一样,因此我们将我们的低代码平台命名为积木系统。但要完成积木系统的建设,需要两大组成部分:组件库与页面编辑平台。

跨端

大终端领域的新物种-KUN

我们并不希望去做一个仅仅基于Flutter渲染带裁剪的Web浏览器。相反,我们试图去完美融合Web生态和Flutter生态。

主题

前端主题切换方案

现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能,效果也是十分炫酷,在平时的开发场景中也有越来越多这样的需求,这里大致罗列一些常见的主题切换方案并分析其优劣,大家可根据需求综合分析得出一套适用的方案。

桌面端

语雀桌面端技术架构实践

文章会分为四部分,首先会简单介绍语雀桌面端,然后介绍当前语雀桌面端的应用架构以及关键点,之后介绍架构中的几个架构重点项,最后再进行总结。

行业资讯

Unity 3D人机交互解决方案,开启智能座舱元宇宙初体验

Unity 正在成为打造新一代智能汽车的嵌入式 HMI 开发工具。目前,国内诸如蔚来、小鹏、理想等造车新势力均已使用 Unity 进行智能座舱的 3D HMI 设计开发。

31页PPT:平台VS自营、美团闪购VS京东到家

本篇报告重点分析平台和自营模式,平台型业态上重点比较了美团闪购与京东到家,相应地我们重点推荐美团和达达集团,建议从供给端角度去看不同企业竞争优势,以及未来的盈利潜力。

产品

万字解析无代码领头羊Webflow的增长之路

Vlad认为WYSIWYG(What You See Is What You Get 所见即所得)的编辑器在过去由于种种限制,始终没有找到很好的PMF(Product-Market Fit 产品和市场的契合点),但是Webflow找到了。

游戏世界观构建思路——从核心体验出发

从事游戏世界观设计的过程中,有两个问题曾让我感到困扰。第一个问题,关于世界观工作本身。第二个问题,关于世界观的传达。也许问题的根源在于,我们是否真正意识到了:我们在做的是游戏的世界观。

设计

百度直播丨塑造亲和力的直播间虚拟助理形象

本文将带你探究形象美学,解读如何围绕业务场景与身份及功能,去科学地创造具有亲和力的直播间虚拟助理形象。

启发

科技爱好者周刊(第 224 期):Figma 为什么赢了 Sketch

这个收购价高得吓人。今天就想谈谈 Figma 的高估值,以及为什么 Sketch 输给了它?虽然 Figma 是网页应用,但它不是用 JavaScript 写的,而是用 Rust 写的,再编译成浏览器能理解的 WebAssembly 字节码格式,从而达到接近原生应用的性能。 image.png

欢迎加入,一起共建「前端周刊」