RubyConf China 2023 笔记

周末参加了 RubyConf China 2023,很奇妙的一段体验!作为一个前端,在同样是脚本语言的 Ruby 会议上听到了 React18,WebAssembly,Rust,Rails,LSP 这些概念,也会有些内容对比到 ts 或者 js,会有“原来 Ruby 程序员是这样思考的”的想法。虽然 Ruby 代码看不懂,拓宽视野还是让我耳目一新。

阅读全文

从源码看 Vue 组件销毁后触发其事件

从一个 bug 说起

记录一个 Vue 组件事件的边界情况。项目中有一个组件,是一个面板,可以通过拖拽改变自身尺寸,也可以被关闭。

阅读全文

怎么让 favicon 动起来

博客一直缺一个 favicon,在标签栏里和其他网页放在一起,就显得很丑,一看就是半成品网页。

想放一个标新立异些的 icon,问了 ChatGPT 也没有什么好的建议,就想放一张动图。

可是现代浏览器里 favicon 如果是 gif 格式,通常只会展示它的第一帧,并不能动起来。

阅读全文

ChatGPT 的流式对话是怎么实现的

背景

网页里 ChatGPT 是逐字输出文字的,很像人类在一个一个打字:
img

阅读全文

如何参与编辑 mdn 中文页面

  1. 拷贝 yari仓库yari 是用于构建 MDN Web Docs 的库
  2. 根据 README 分别拷贝 conenttranslated-content 两个库。可以理解为分别是原文和译文

阅读全文

为什么写博客

  1. Luck = [Doing Things] * [Telling People] https://github.com/readme/guides/publishing-your-work

阅读全文

页面滚动时为什么没有触发 mouseleave 事件

背景

工作中碰到一个带有 tooltips 的按钮。预期是鼠标放在按钮上,显示 tooltips,鼠标移开时不显示。利用 mouseenter 和 mouseleave 实现了这个鼠标交互。

阅读全文

JS 对象到原始值的转换

背景

工作中遇到一个 Long.js 对象,它通过对象的方式存一个 Long 类型的数据。大致长这样:

阅读全文

JS defineProperty

背景

Object.defineProperty,这个方法用于在对象上定义属性,语法是

1
2
3
4
5
6
const a = {}
Object.defineProperty(a, 'b', {
value: 1
})

a.b // 1

阅读全文

JS 的类型判断

typeof

结论:nullfunction 不符合直觉;无法识别 NaNInfinityArray;浏览器实现的对象因浏览器而异

阅读全文