同步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
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
