嵌套Flex布局下子元素撑开父元素的问题

偶然遇见一个奇怪的嵌套Flex问题,当子Flex元素里面的内容宽度过大时,即使指定了overflow:auto,仍然会撑开父元素,导致布局乱掉。一个简单的示例如下:

HTML如下:

<div class="main"<div class="left"Sidebar</div<div class="right"<div class="label"Label
    </div<div class="overflow"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div</div</div

CSS如下:

.main {
  display: flex;
  width: 100%;
}
.left 

两个键盘事件的兼容问题

最近碰到两个键盘事件的问题,以前一直没怎么注意。

中文输入法的回车问题

很多输入框都支持Enter回车键提交,但是在中文输入法下,用回车输入英文的时候会直接触发Enter提交行为。此时可以使用KeyboardEventisComposing属性可以判断当前是否是处于输入过程中,即是否在compositionstartcompositionend之间,如果isComposingtrue,忽略此时的Enter即可。在FirefoxChrome中都无此问题,但是在Safari下,此时的isComposing会为false,无法正常处理此时的Enter

迫于无奈,只好看下Event中是否还有其他属性可以使用,试试keycode和被抛弃的keyCode

console.log(e.key, e.code, e.keyCode, e.isComposing)

Chrome / Edge 结果如下:

Firefox

在Web Components中使用自定义字体

自定义字体是个好东西啊,FontAwesome/Remixicon等优秀的图标都是用自定义字体来实现的,非常省事好用。如此让人上瘾的东西,可惜碰到了web components之后麻烦就来了。

首先,web components是自隔离的,父页面中的样式是不能作用于组件的,所以按照常规方法是把样式嵌入到组件中。非常遗憾的是,css加载是没问题的,但是它并没有于我们预期想象的一样把图标显示出来。

这个看起来就像是字体缺失,打开网路请求检查一下,的确就是没有字体请求!但是,令人意外的是,如果在父页面中引入自定义字体,在组件内部使用自定义字体,居然是行得通的!

所以这个丑陋的方案就出来了,把他们拆成两个部分:

  1. 字体定义部分放在父页面中,通过父页面来请求自定义字体;
  2. 样式部分放在web components中,因为样式是隔离的。

当然,我们可以通过js来在父页面中注入自定义字体:

const FONT_FACES = `@font-face

在React中分离Shadow DOM样式及使用Sass

Shadow DOM已经比较成熟了,基本上所有的现代浏览器都已经支持了,可以参考Can I Use。在React中使用shadow DOM也不是什么新鲜事,也有一些关于shadow DOM的第三方库,但是在CSS方面,几乎都是使用了styled components的方式。我个人不太喜欢这种css和js混在一起方式,而且这种方式下也没法使用scss了。

开始看了下style-laoder的文档,里面有个选项insert,可以传入一个function,这样你可以在里面进行你想要的操作,比如找到shadow DOM的shadow root,然后把你的style插入进去:

rules: [
  // Other webpack modules
  ...
  {
    test: /\.css$/,
    use: [
      {
        loader: require.resolve('style-loader'),
        options: {
          insertInto: function

useSignal()——前端框架的未来?

Angular以及Qwik的作者MIŠKO HEVERY写了篇文章:useSignal()才是Web框架的未来(useSignal() is the Future of Web Frameworks),也引起一些讨论。包括Qwik在内的多个框架也已经实现了useSignal(),这些框架还有Vue、Preact、Solid以及Svelte等。

实际上signals并不是一个全新的概念,大约十年前的框架Knockout就曾经使用过。那为什么最近突然又重提此项技术?这主要得益于当今更加先进的编译技巧以及与jsx的深度集成,使signals的开发体验变得更好了。

什么是signal

如果了解过React的话,signal其实和useState非常类似,也是一种用来存储应用状态的方式。但是和useState存在一些区别:

useState是返回一个值以及一个set方法,而useSignal则是返回一个getter和一个…

ChatGPT答Server-Sent Events

关于Server-Sent Events,试着问了ChatGPT几个问题,以下内容由ChatGPT回答。

Server-Sent Events相比WebSocket有什么不同?

Server-Sent Events(SSE)和 WebSocket 都是用于实现服务器向客户端实时传输数据的技术,但它们有一些不同之处:

协议:WebSocket 是一种全双工的协议,它允许客户端和服务器之间进行双向通信。相比之下,SSE 是一种半双工协议,只允许服务器向客户端发送数据。

连接:WebSocket 建立一次连接,客户端和服务器之间可以进行多次双向通信。相比之下,SSE 使用普通的 HTTP 连接,并且只能由服务器向客户端发送消息。

数据格式:WebSocket 可以传输各种格式的数据,例如文本、二进制和 JSON 等。SSE 只能传输文本数据,通常采用纯文本格式。

适用场景:WebSocket 适合于需要实时、双向通信的应用场景,例如在线游戏或即时聊天。相比之下,SSE

服务器发送事件(Server-Sent Events)

什么是Server-Sent Events

从名字可以看出,服务器发送事件(Server-Sent Events)是一种服务端向客户端推送消息的方法。服务器发送事件规范(Server-Sent Event)描述了一个内置的类EventSource,它可以用来与服务器保持链接并且可以从服务器接收时间。

WebSocket类似,这个链接是持久的,但是两者有一些不同:

WebSocketEventSource
通信方向双向:客户和服务器都可以交换信息单向:只有服务器能发送数据
消息类型可以发送文本以及二进制消息只能发送文本消息
网络协议WebSocket协议常规HTTP协议

从上表可以看出,Server-Sent Event(以下简称SSE)相比WebSocket是一种更轻量的消息推送方式。SSE使用常规HTTP协议,并且支持断线重连 ,无需额外实现。SSE使用相对来说更简单——在服务器端,只需要按照一定格式返回消息;在客户端中,只需要为一些事件类型绑定监听函数,和处理其他普通的事件没多大区别。…

Damus与Nostr去中心化网络

Damus是什么

这几天Damus可以说是火遍全网——又一个来挑战Twitter的社交应用,不过与Twitter不同的是——Damus是一个去中心化的社交应用,所有消息采用了端到端加密。当然也因此在上架第二天就因违反中国相关法律法规下架了。

在Damus的官网上是这样介绍的:

  1. 完全由用户控制:基于开放的网络协议,没有那个平台可以禁止或者审查,用户可以完全控制自己的数据和言论。
  2. 加密:端到端加密的私人消息。
  3. 无需注册:创建账号无需手机号、Email或者姓名。
  4. 无需服务器:消息通过去中心化的中继进行分发.
  5. 可编程:轻松集成机器人,帮助生活或者业务自动化。
  6. 挣钱:可以给朋友的帖子打赏或者或者收集中本聪币。

Damus App可以说和Twitter是十分相似了,不过这个版本看起来制作还是显得有些粗糙。另外功能方面也不是很完善,比如发帖之后不能删除、点赞或者转推之后不可撤销、图片需要转成链接才能发布等等。

在Twitter上一眼望去都是大量的神秘代码——都是各自的公钥,在Damus上搜索这个公钥,你就可以Follow这个人。…

新冠——躲不过的终究还是来了

家人一个接一个先后感染了,我想着怎么还没轮到我,这不前天开始喉咙有点痒,昨天就发烧了。早上六点多从36.8开始,到八点多37.6,到下午3点就到了38.8,不到四点干到了39.1。不过虽然体温高,但精神倒是挺好的,食欲很不错,特别想吃辣的和甜的,于是点了外卖鸭翅尖、卤藕以及水果茶。但是这阶段阳的人太多了,外卖一个多小时才到,都到了晚饭的时间。一直到吃完外卖都没有吃药,但是吃完外卖之后觉得有点累了,于是躺下。躺下之后再也不想起来了,虽然我也不困,但就是想躺着……

这样一直躺到大概七点半,决定还是吃一颗对乙酰氨基酚,虽然高温让免疫系统杀死了病毒,但是我也得为我的脑细胞考虑下。半小时后体温降到了38.2,三小时后降到了37.6,但是太精神了,睡不着……

也不知道啥时候睡着的,三点多醒了一次,补点水,接着睡。早上不知道几点,迷迷糊糊的感觉全身都湿透了,但实在是太困了,就又睡了,这样迷迷糊糊的睡到早上六点多,量了下体温36.8,除了头还有点晕、喉咙略有点痒以外,几乎没啥其他不适了。…

IE终于要寿终正寝了

IE要寿终正寝的事说了好久好久了,这次似乎来真的了。官方发布消息说将在2023年2月14日永久禁用IE。真是选了个好日子。但是IE的图标仍然会在开始菜单和任务栏上保留,直到2023年6月的Windows强制更新,还是留有不少余地的。但是话又说回来,那些用windows的大企业多半也不会更新。

The retired, out-of-support Internet Explorer 11 desktop application is scheduled to be permanently disabled through a Microsoft Edge update on certain versions of Windows 10 on February 14, 2023. 

IE11 visual references, such as the IE11 icons on the Start Menu and taskbar, will be removed by the June