鼠标气泡 宝宝日记的页面中规中矩，一直想加点活泼的元素，苦于没有找到理想的参考样式。 前天，在博友Design小院那里看到了鼠标气泡的效果，感觉很喜欢。寻迹找到了控件原作者的网站90's Cursor Effects。动效如下： 在源代码基础上主要做了两处修改： 增加气泡随机透明度，更显真实； 原配色在暗黑模式下过于显眼，改为牡丹粉红 #eea2a4。 完成的动效如下： 已实装于宝宝日记时间轴、宝宝日记详情页。 2022-08-24
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
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
过时浏览器兼容 博友璟雯与橙留言提醒，QQ浏览器查看本站是空白（对话详见留言）。 我在虚拟机 win10 上装了 QQ 浏览器检查发现 js 报错，不支持 replaceAll 等新方法。 QQ 浏览器的 Chrome 内核版本是 70： 获取到的 ua 是： Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3883.400 QQBrowser/10.8.4559.400 replaceAll 方法需要 85 以上的 Chrome 内核才支持，详见caniuse： 本来打算将涉及到的新方法都自己实现一下兼容方法，但是后来发现 QQ 浏览器连 arr.shift 都报方法不存在，只能作罢了。 最终方案是根据 ua 判断... 2022-02-22
position: sticky 刷到蜻蜓的墓园的博客，时光页面的年月用了元素固定。 我注意到滑动时固定和释放很顺滑，没有拖帧，而这是我的时光页面一直没解决的问题。 当时是参考jquery.pin改写的 js，没错，是jQuery 时代的方法了，原理就是根据可视范围，切换 position 为 fixed、absolute。慢速滑动时效果是完美的，但是快速滑动时就会有拖帧。 我研究了蜻蜓的墓园源码，发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面 改的过程中遇到个坑，“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性，否则不生效。 2022-02-05
debian 10 开发环境部署 本地用 Vagrant + VirtualBox 创建、管理虚拟机，部署与阿里云ECS 硬件和软件配置相近的开发环境（LNMP）。 安装 vim su apt-get install vim vim /etc/vim/vimrc #去掉 syntax on 前的注释，增加： set number set tabstop=4 set softtabstop=4 colorscheme desert #如果中文乱码，则增加： set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936 set termencoding=utf-8 set encoding=utf-8 安装 sudo apt-get install sudo vim /etc/sudoers #增加： shagon ALL=(ALL:AL... 2020-02-13
rtrim 的坑 线上报 500 错误，定位到是 json 解析失败，特定内容存在乱码，而造成乱码的是原因是 rtrim 截取中文字符时末位可能乱码。 替代方法： function r_trim($content, $tail) { $len = mb_strlen($tail, 'utf-8'); return $tail == mb_substr($content, -$len, $len, 'utf-8') ? mb_substr($content, 0, -$len, 'utf-8') : $content; } 2019-02-01
