外观
浏览器小工具
这个域名下顺手做了几个纯前端的小页面,不依赖后端,代码都在页面里。
光标测试
https://www.yurit.top/cursor-test/
CSS 里 cursor 属性的所有取值,鼠标悬停上去直接看效果。写前端的时候老是记不住 grab 和 grabbing、col-resize 和 ew-resize 的区别,做了这个页面对照。
有明暗两套主题,选择会记在 localStorage 里。
键盘测试
https://www.yurit.top/keyboard-test/
按键盘上的键,页面上对应的键会亮。按过的留标记,一眼看出哪个键没响应。
顺带能看:
- 同时按住几个键——测键盘的无冲能力。薄膜键盘常见上限 6 键,机械键盘多数是全键无冲
- 每个键的
key/code/keyCode,写键盘事件处理的时候查 - 按下到松开的毫秒数
几个键测不到是正常的:Win 键和 PrtSc 被系统接管,Fn 是键盘固件层的,浏览器根本收不到事件。
页面拦截了除 F5 / F11 / F12 之外的所有按键默认行为,所以 Tab、空格、Ctrl+W 都能测,不会跳走或者关标签页。
it-tools
首页挂的是开源项目 it-tools,几十个开发常用的小工具:JSON 格式化、Base64、UUID、时间戳转换、正则测试、hash 之类。全部在浏览器里跑,不上传数据。
部署就是把构建产物放进静态目录,注意它自带的 Service Worker 会劫持同域名下的其它路径,处理方法见 1Panel 站点管理的坑。