发表于 | 分类于
  1. HTML 文档默认是 static 布局（通过 position 可以改变布局方式），除了 <body></body>，任何一个 DOM 节点也都有 position 值，如果没有设置，那么默认是 static
阅读全文 »

发表于 | 分类于

NPM scripts 是在 package.json 中 scripts 中 one-liner 式的命令。使用 npm run 加上对应的指令就可以运行对应的脚本，例如 npm run build 或者简写为 npm build。

阅读全文 »

发表于 | 分类于

最近的感悟比较抽象，这周最直接的感悟是经验是最直接的文档，直接删掉这行代码，看看哪报错，比去查资料还可靠，甚至还高效。。。实验 + 观察 + 推测 + 验证，进入新的领域，不熟悉生态的情况下，用实验弥补经验，也是一种手段。。。

阅读全文 »

发表于 | 分类于

在使用 Playwright 写单测保护业务功能之前，首先要写出正确的 playwright 单测，这个环节有时候也会花费很多时间，但是好在 playwright 有不少 debug 技巧）。在本地打断点永远是最方便的方式，可以观察单步语句执行浏览器内容的变化。如果单测在本地执行没问题，但是在 CI 环境上失败，有时候仅靠日志不容易找到根本原因，这时候就可以借助回放。首先 playwright 可以配置将测试过程中浏览器的变化生成录像或者 trace 文件（录像和 trace 都可以看到浏览器的操作回放，trace 额外可以看到调用栈），默认保存在 test-results 文件夹（这个文件夹和 playwright.config.ts 在同一目录层级 ），为了提高单测运行效率，也可以设置仅当 retry 时再保存录像。然后可以在 github CI 在单测 job 后配置一个 upload-artifact 的 job，当单测失败时执行，将 test-results 文件夹上传。这样每次有单测失败时，在 github CI 页面就能下载到浏览器跑单测的回放了。

阅读全文 »

发表于 | 分类于

在 git 冲突解决时，如果能够理解双方的提交信息，解决起来自然会游刃有余。但是当冲突的内容非常多的时候，作为后备方案，正确运用 git 可以让我们少学很多东西（逃

阅读全文 »

发表于 | 分类于

Web Component 提供了自定义可以渲染在页面上的 DOM 节点的能力，一个基本的 Web Component 可以按下面的方式定义。它继承了 HTMLParagraphElement，所以可以像一个普通的 HTMLParagraphElement 一样使用。同时，也可以通过自定义的属性和方法来扩展。因此，一个 Web Component 可以是一个完整的组件，包括样式、行为和 DOM 结构，可以像使用普通的 HTML 元素一样使用。

阅读全文 »