weekly
第 93 期 08/29 Clean Architecture in Frontend
Source: 支持英文/汉字/emoji长度计算的输入框实现
大前端
JS
本次的 input 框方案也算解决了困扰前端输入框的一个难题，希望能给大家带来些启发。
本文简要介绍了 Script Error 问题的来龙去脉，但也不局限于 Script Error，对于通用的系统性问题，应该找到系统性解决方案，进而治标治本。
CSS
What was that media query code again?
This site lists popular media queries with a handy copy button for code the snippet you need.
“MEDIA” The HTML Attribute Nobody Seems To Want To Use
To be honest much like META the valid values for media targets should be none of the specifications business. Again, the W3C and WhatWG seem to have forgotten or said to hell with important reasons many things were created in the first place.
TS
Typescript is terrible for library developers TypeScript遭库开发者嫌弃：类型简直是万恶之源
https://erock.prose.sh/typescript-terrible-for-library-developers
本周 redux-saga 的工程师 Eric Bower 却在一篇博客中提出了不同意见，他站在库开发者的角度，直言“我很讨厌 TypeScript”，并列举了五点理由。
React
Advanced React component composition
A deep dive on composition in React. Learn the key principles for designing and building reusable components that scale.
通过构建Demo模型，来说明何时和为什么重新渲染；文末给出了一些优化建议。
现在开发 React 组件基本都是用 hooks 了，hooks 很方便，但一不注意也会遇到闭包陷阱的坑。 相信很多用过 hooks 的人都遇到过这个坑，今天我们来探究下 hooks 闭包陷阱的原因和怎么解决吧。
Building a chat - Browser Notifications with React, Websockets and Web-Push
In this article, you’ve learnt how to send desktop notifications to users, detect if a user is currently active on your page, and read and update a JSON file.This project is a demo of what you can build with Socket.io; you can improve this application by adding authentication and connecting any database that supports real-time communication.
RN
Difference between Pressable and TouchableOpacity
https://reactnative.cn/docs/0.63/pressable
RN在0.63版本的时候就提供了Pressable属性，目前MRN是支持的。近期看到很多国外的写法都是使用 Pressable。翻了下文档，Pressable具备Touchable所有的点击能力。并且能更优雅的控制点击，有需要的可以自行调研。
How I separate the logic and my view in RN
逻辑和视图分离的Demo，可以参考一下。
Flutter
Flutter 作为新一代的跨平台框架，通过自定义渲染引擎的创新大大提高了跨平台的性能和一致性，但也正是因为这点，相比之下 Flutter 在混合开发时对于原生控件的支持成本更高。
跨端动态化
珊瑚海是安居客发起，58无线团队参与共建的跨端解决方案，目标是打造一套在开发、接入和运行维度都能够高效且在大前端都能够广泛支持的跨端技术。目前在安居客、58房产的客户端/H5/PC/小程序的业务上已经大量使用。
代码隔离
回顾痛点，在过往的开发中，开发者们一般使用宏隔离（ isLite or isPad ）来区分不同产物之间的差异，但这种方式严重破坏了整个抖音工程的架构体系，我们的目标愿景是要做一套符合抖音工程架构体系，具备高效、通用、便捷能力的框架规范，让开发同学在标准规则下进行编码工作。
Node.js
用node从零做个管理shell命令的好用工具, 正好温习下commander.js相关内容
带你用node一起动手做一款记录shell命令的小插件，提高使用命令的效率。
快应用
MiniApps 规范的编辑者之一董永清（小米）在 MiniApp 中日韩讨论会分享快应用的演进历程，为 MiniApps 标准化输入用例。
IDE
Fleet Below Deck, Part V – The Story of Code Completion
| This is a multipart series on building Fleet, a next-generation IDE by JetBrains. Now it’s time for us to look at a more familiar function – Code completion – and see how it is implemented in Fleet. | JetBrains 的轻量级编辑器 Fleet 系列文章 |
可视化
在数据可视化中，我们很多时候会使用图来表达数据中所蕴含的信息，图方便让我们清晰的理清各个节点之间的联系，快速提取有用信息。而图布局算法可以使散乱的信息 (信息多以点线的关系承载) 通过一种清晰的方式呈现出来，符合相应的美学标准。不同的图布局也有不同的应用场景，例如树形布局 / Dagre布局，它是一个有向无环图，具有的拓扑性质，可以用作流程表达的场景。
如何构建一个在线绘图工具：Feakin 是如何设计与构建的？
作者开发在线绘图工具的的个人尝试
性能
你知道有多少用户没等到页面首屏出现就离开了吗？性能不佳会对业务目标产生负面影响。比如， BBC 发现他们的网站加载时间每增加一秒，他们就会失去 10% 的用户。高性能站点比低性能站点更能吸引和留住用户，而留住用户对于提高用户转化率至关重要。这篇文章就是以此为背景，介绍字节内部是如何衡量站点性能的，如何依靠性能监控定位线上站点性能问题的。站点性能一般可以分为两类，一类是首屏性能，另一类是运行时性能。前者衡量的是页面从加载开始到可以稳定交互的性能情况，后者衡量的是页面稳定后到页面关闭的性能情况。
调试
Flipper and JS: why we added JavaScript support to a mobile debugging platform
In this post, we will discuss:
- What js-flipper is and how to try it out
- How we use it at Meta
- How you could benefit from it
低代码
现有的低代码平台普遍缺乏面向用户的调试能力，当用户在低代码搭建遇到问题时，排查和解决问题强依赖平台的客服答疑或浏览器原生的调试能力，导致非前端用户使用低代码平台的成本很高。因此我们需要提供更适合低代码平台的调试能力，降低低代码平台的使用成本。
通过本篇文章，你能够学会如何基于 React 技术栈搭建一个最简单的低代码编辑器，以及部分重点功能的实现方式。
架构
Clean Architecture in Frontend
I wanted to share several insights that I found helpful for large-scale front-end applications. I want to talk about ideas that proved reliable in practice. At the same time, I pursue simplicity in my explanations.
VR
面对越来越碎片化的移动端生态，Web标准作为可能是唯一的跨平台工具，在生态中的重要性不言而喻。如果想要学习WebXR，从哪里入手呢？别急，虽然WebXR和WebGPU还都不成熟，但是现有的技术已经可以让我们实现超出你想象的效果了。
Summer of Open Source: Moving Virtual Reality Forward
This post on virtual reality (VR) is the first in the “Summer of open source” series. This series aims to provide a handful of useful resources and learning content in areas where open source projects are creating impact across Meta and beyond.
行业资讯
What’s next for computer vision: An AI developer weighs in
During recent years, computer vision (CV) and AI have become the fastest-growing fields both in market size and industry adoption rate.
MoCapAct: Training humanoid robots to “Move Like Jagger”
MoCap is an animation technique widely used in the entertainment industry for decades. In an effort to level the playing field and make this critical research area more inclusive, Microsoft Research’s Robot Learning group is releasing MoCapAct, a large library of pre-trained humanoid control models along with enriched data for training new ones.
Deep dives & how the Internet works
Here are some deep dive reading suggestions from our Cloudflare Blog for any time, weather or time of the year. There’s also some reading material on how the Internet works, and a glimpse into our history.
8月26日，以“洞见元宇宙，数字新空间”为主题的WMC2022世界元宇宙大会在北京大兴经济开发区通过线上和线下相结合的方式举行。
产品
全民被验证码“白嫖”，白嫖了什么呢？可以进来看一看，真是个绝佳的点子。
游戏立项、制作如何避免踩坑？帕斯亚CEO万字分享产品开发和设计心得
在由腾讯游戏学堂举办的TGDC2022腾讯游戏开发者大会上，重庆帕斯亚科技CEO李岸以“从《星球探险家》到《沙石镇时光》——单机游戏设计经验分享”为题进行了近一个小时的分享。除了分别总结帕斯亚科技已推出的4款游戏开发制作当中的心得体会，他还从内容制作、玩家体验及游戏出海等四个维度，对游戏设计中可能出现的问题进行了非常详尽的分享。
设计
Behind the Design: Lego Star Wars: Castaways
| The world of Lego Star Wars: Castaways contains many wonders — amazing animation, delightful storylines, and pitch-perfect physical comedy. | 超唯美的游戏画面 |
https://mp.weixin.qq.com/s/7D4-hn_rReM6gjCeACZ2Qg
我们通过对IP生命感的分析，认为IP形象的生命感由表及里呈现出「仿真化」「拟人化」「人格化」三个层次。并对IP形象人格定义的方式做了分享。接下来我们将以B端客服工作台为例，以人格特质的设计应用为重点，继续聊一聊如何将设定好的人格特质设计并应用在产品中。
本次研究与实践针对视频场景中视频所呈现的画面，通过精细化的设计，在多样化的手机屏幕中呈现时，能够带给用户更为沉浸的视频观看体验。
本篇文章“京东电器618（数据篇）“ 将从项目背景、技术创新价值、价值再提升”三大方向去讲述。
启发
| 我认为，理智的态度不是去挑战或否定人工智能，幻想人类有胜过它们之处，也不是感到焦虑和绝望。唯一可行的选择就是把它们看成是一个机会，它们是更好更值得学习和使用的工具，我们应该主动去了解这些模型，适应它们，使用它们，尽快将它们转化为自己的生产力。 | 文内有一篇 《物联网的可见光通信》家用电器如何连接手机？现在的方案都是电器内置蓝牙或 WiFi，这样大大增加了成本和复杂性。一家英国创业公司提出了可见光通信方案，家用电器配备 LED 发光二极管，不断闪烁发光传出信息。 |
看看别人的规划，是否对你有参考。
尝试从’知名架构原则’、’工程师的自我修养’、’不能上升到原则的几个常见案例’三大模块，把我个人的经验系统地输出，供其他团队参考。
欢迎加入，一起共建「前端周刊」