杜郎俊赏 - dujun.io

波浪下划线

本站对文字的重点标记,经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大,同时大圆点标记过于醒目,抢夺阅读视线。 text-emphasis: filled circle; text-emphasis-position: under; 效果如:对照文字、着重号标记的文字 二、虚线下划线 着重号用了没多久,就改成虚线下划线了。 border-bottom: 2px dotted; 效果如:对照文字、虚线下划线标记的文字 三、波浪下划线 虚线下划线没什么问题,但是今天突然觉得平庸了,决定改成波浪线。 代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下: padding: 8px 0; background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px...
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

989封面
mac系统浏览器,隐藏文本光标(除输入框外)。css 如下: * { caret-color: transparent; } input:focus-within, textarea:focus-within { caret-color: auto; } 应用前效果(录自友站 Vian): 应用后效果:
2022-06-28

仿微信语音播放 svg

决定优化语音播放的动效,网上找了一圈没有满意的,最后自己用微信程序包中的 svg 来改。 svg 如下: 效果如下:
2022-04-08

移除了第三方统计。起因是发现在偶然情况下,会造成手机端页面重新渲染时卡顿——电脑端无异常,可能是手机算力问题? 为什么把卡顿定位到第三方统计的问题呢,因为预发环境下不能复现。预发与线上只有第三方统计有区别。 移除第三方统计以后,就要自己开发一套简单的统计报表了。移植了 pv、ip、来源等常规统计,能满足我自己的需求了。 至此,不再有数据暴露给第三方了(除云服务器本身)。
2022-03-10

圆形头像和方形头像

本站的评论列表头像展示样式,从圆形到方形反复了几次。最终还是改成方形了。 圆形头像和方形头像适用场景很容易区分: 圆形头像 聚焦主要面部特征,吸引注意力,有动感有活力。 适用于生人网络、泛娱乐,如 QQ、抖音、B站、微博。 方形头像 展现更多环境信息,沉稳大气。 适用于熟人网络、严肃社交,如微信、支付宝。 作为独立博客,本应算是生人网络,但还是决定用方形头像。因为博友的回访,对评论内容的认真,都是互联网最初美好的样子。
2022-02-28

avatar 和 favicon

在博友𝑭𝒐𝒏𝒈.的网站注意到一个设计,在文章内容中的链接前加了小图标,受此启发,我完善一下相关样式。目前实现的完整路径是: avatar(带邮箱地址的评论) 抓取 Gravatar 头像(官网被墙,使用国内源 如果是 QQ 邮箱,尝试抓取 QQ 头像(博友 对于有网址的尝试抓取 favicon favicon 抓取根目录的 favicon.ico 文件 解析 html,抓取 apple-touch-icon、shortcut icon 链接前缀图标 博友网址显示 avatar 其他网址显示 favicon 无图标的显示默认图标
2022-02-28

抓取 favicon 作为头像

注意到璟雯与橙没有用 gravatar,给我的头像设置了本站的 favicon。受此启发,我也想到还有很多博友不是 wordpress 系建站的。因此增加了抓取 favicon 作为头像的功能,已上线: 首先尝试抓取根目录的 favicon.ico 文件; 然后尝试解析 html 中 shortcut icon; 使用第三方 api 作为最后的补充方法,我找到的是 https://api.faviconkit.com/domain/size Replace domain with the domain name. Replace size with the size, in pixels. For example, to get the Stackoverflow icon, you’d use this URL: https://api.faviconkit...
2022-02-22

过时浏览器兼容

outdated-browsers-compatibility封面
博友璟雯与橙留言提醒,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

作为博客网站,数据量不会很大,redis 有点重,所以测试用鸟哥的yac替代,但发现 yac 存在几个问题: cli 和 fpm 数据不共享 并发读写有很大概率取不到数据 替换计划作罢。
2022-02-20

分页: 1 2 3 4