杜郎俊赏 - dujun.io

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

2022-06-28

984封面
看到博友 gd1214b 的文章《Web Feed 倡议书》,增加了 RSS 自动发现功能。 在 里增加: 效果如下:

2022-05-12

仿微信语音播放 svg

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

2022-04-08

iPhone 7屏幕更换

iphone7-screen-repair封面
主力机是 iPhone 12,平时玩游戏用的是备用机 iPhone 7。这台 7 已经用了好几年,换过两次电池,一次屏幕。几天前屏幕又摔破了,漏液晶,花屏、触摸失灵。 纠结了一下,为了主力机的寿命,还是要有备用机。查了 iPhone 7/8 的二手价格后,果断在 pdd 买了个屏幕总成。 开始拆机。上次把前置摄像头排线弄断了。 干脆把前置摄像头和听筒都去掉了,游戏里用不到。 复活,再用五百年。

2022-03-04

圆形头像和方形头像

本站的评论列表头像展示样式,从圆形到方形反复了几次。最终还是改成方形了。 圆形头像和方形头像适用场景很容易区分: 圆形头像 聚焦主要面部特征,吸引注意力,有动感有活力。 适用于生人网络、泛娱乐,如 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

抓取 favicon 作为头像

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

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 以上的...

2022-02-22

Linux Deploy 在安卓手机装服务器

linux-deploy封面
一直想玩树莓派,但怕买来就吃灰。找到一台废旧红米(屏幕碎裂失灵),用 Linux Deploy 装上了 Debian(LNMP环境),模拟本站的预发环境。 几个问题记录: 一、root 本机是红米note2,root 很容易,用官方工具刷开发版就可以了。 二、镜像磁盘大小调整 安装时用了默认,磁盘只有 2G,扩容的方法是用 adb 连接手机,进入shell,执行命令: dd if=/dev/zero bs=1048576 count=3000 >> /mnt/sdcard/linux.img(替换实际路径) e2fsck -f /mnt/sdcard/linux.img resize2fs...

2022-02-10

position: sticky

position-sticky封面
刷到蜻蜓的墓园的博客,时光页面的年月用了元素固定。 我注意到滑动时固定和释放很顺滑,没有拖帧,而这是我的时光页面一直没解决的问题。 当时是参考jquery.pin改写的 js,没错,是jQuery 时代的方法了,原理就是根据可视范围,切换 position 为 fixed、absolute。慢速滑动时效果是完美的,但是快速滑动时就会有拖帧。 我研究了蜻蜓的墓园源码,发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面 改的过程中遇到个坑,“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性...

2022-02-05

分页: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63