同步ajax导致页面卡顿 我的网站在快速切换页面时，有时会卡顿甚至假死。之前我以为是带宽太小的缘故（1Mbps），直到在 MDN 查找 XMLHttpRequest 相关资料时看到这个说明： XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons. XMLHttpRequest 支持同步和异步通信。但是，一般来说，出于性能原因，异步请求应优先于同步请求。 Synchronous requests block the execution of code which causes "freezing" on t... 2022-09-18
鼠标气泡 宝宝日记的页面中规中矩，一直想加点活泼的元素，苦于没有找到理想的参考样式。 前天，在博友Design小院那里看到了鼠标气泡的效果，感觉很喜欢。寻迹找到了控件原作者的网站90's Cursor Effects。动效如下： 在源代码基础上主要做了两处修改： 增加气泡随机透明度，更显真实； 原配色在暗黑模式下过于显眼，改为牡丹粉红 #eea2a4。 完成的动效如下： 已实装于宝宝日记时间轴、宝宝日记详情页。 2022-08-24
波浪下划线 本站对文字的重点标记，经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大，同时大圆点标记过于醒目，抢夺阅读视线。 text-emphasis: filled circle; text-emphasis-position: under; 效果如：对照文字、着重号标记的文字 二、虚线下划线 着重号用了没多久，就改成虚线下划线了。 border-bottom: 2px dotted; 效果如：对照文字、虚线下划线标记的文字 三、波浪下划线 虚线下划线没什么问题，但是今天突然觉得平庸了，决定改成波浪线。 代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下： padding: 5px 0.2em; background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, cu... 2022-08-02
H264需为偶数尺寸 刚才上传一个 mp4 视频时报错（视频见上一篇文章），本地调试发现错误信息为： [libx264 @ 0x55a5429f40c0] height not divisible by 2 (540x771) 搜索相关信息了解到：旧式 H264 编码视频（如 yuv420p 格式）如果长宽中含有奇数会导致转码失败。 因此，强制转换长宽为偶数： $width = 2 * (int)ceil($width / 2); $height = 2 * (int)ceil($height / 2); 之前一直没发现这个问题，大概是因为绝大部分是手机直接拍的视频，都是标准偶数尺寸。 2022-07-22
mac系统浏览器，隐藏文本光标（除输入框外）。css 如下： * { caret-color: transparent; } input:focus-within, textarea:focus-within { caret-color: auto; } 应用前效果（录自友站 Vian）： 应用后效果： 2022-06-28
移除了第三方统计。起因是发现在偶然情况下，会造成手机端页面重新渲染时卡顿——电脑端无异常，可能是手机算力问题？ 为什么把卡顿定位到第三方统计的问题呢，因为预发环境下不能复现。预发与线上只有第三方统计有区别。 移除第三方统计以后，就要自己开发一套简单的统计报表了。移植了 pv、ip、来源等常规统计，能满足我自己的需求了。 至此，不再有数据暴露给第三方了（除云服务器本身）。 2022-03-10
圆形头像和方形头像 本站的评论列表头像展示样式，从圆形到方形反复了几次。最终还是改成方形了。 圆形头像和方形头像适用场景很容易区分： 圆形头像 聚焦主要面部特征，吸引注意力，有动感有活力。 适用于生人网络、泛娱乐，如 QQ、抖音、B站、微博。 方形头像 展现更多环境信息，沉稳大气。 适用于熟人网络、严肃社交，如微信、支付宝。 作为独立博客，本应算是生人网络，但还是决定用方形头像。因为博友的回访，对评论内容的认真，都是互联网最初美好的样子。 2022-02-28
avatar 和 favicon 在博友𝑭𝒐𝒏𝒈.的网站注意到一个设计，在文章内容中的链接前加了小图标，受此启发，我完善一下相关样式。目前实现的完整路径是： avatar（带邮箱地址的评论） 抓取 Gravatar 头像（官网被墙，使用国内源 cravatar.cn、sdn.geekzu.org） 如果是 QQ 邮箱，尝试抓取 QQ 头像（博友 cfanlost 建议） 对于有网址的尝试抓取 favicon favicon 抓取根目录的 favicon.ico 文件 解析 html，抓取 apple-touch-icon、shortcut icon 链接前缀图标 博友网址显示 avatar 其他网址显示 favicon 无图标的显示默认图标 2022-02-28
