内嵌抖音视频 抖音开放平台提供了内嵌抖音视频的方法，详见《通过VideoID获取IFrame代码》。 示例代码： 与B站不同，抖音iframe没有做自适应，需要结合自己网站调整样式。下面以我的网站为例。 手机端代码： .douyin { width: min(324px, 100%); margin-inline: auto; overflow: hidden } .douyin iframe { aspect-ratio: .4821 } 电脑端代码： .douyin { width: max(730px, 100%); margin-inline: auto } 写这篇文章的起因是我刷到了上面这条搞笑视频，想写文章分享。之前在风记星辰那里看到过内嵌抖音视频，参考他的样式，并研究了抖音官方文档，实现了期望效果。不过有一个坑是父级元素宽度小于730px会强... 2025-01-12
新增亲子日记封面保护 新增亲子日记封面保护机制：可信设备展示缩略图，陌生设备展示模糊图。可信设备（Cookie标记）包含博主（我本人）、知道日记口令的（我家人）、当前设备发表过评论并被审核通过的。图片表现如下： 老婆跟我抱怨过很多次，首页展示宝宝照片封面有隐私风险，这次解决了这个问题。最初就想到用图片模糊来处理，但碍于影响浏览体验没有下决心。现在想通了，除了我和家人，并没有人会在乎宝宝每天的成长照片。 因为前面已经做了权限验证，所以加一道拦截非常容易。实际开发这个功能的时间花在纠结用哪种模糊效果上，我筛选后的方案分别是Low Poly、毛玻璃和油画。 Low Poly 是我最感兴趣的方案，用了最长的时间来研究和测试。但经过反复验证，应用在小尺寸的封面图上效果很糟糕，将单元调大就毫无细节，调小就有锯齿感，无奈放弃。而毛玻璃效果有令人不适的粗糙感，也淘汰了。最后我选定的方案是油画效果，画面足够模糊，同时细节又足够丰... 2024-11-18
iOS Safari 回退导致 alert 失效 我在文章页增加了解析运行 html 和 js 源码的功能。然后发现一个诡异的问题，在手机端 Safari 按回退和前进键会导致 alert 失效。验证了电脑端和手机端各种浏览器，仅手机端 Safari 复现这个问题。 我查到的解释是： alert/confirm/prompt dialogs will not be displayed if the user has navigated back to a pushState location. Once a user has navigated back (at any point), calling alert(…), confirm(…), or prompt(…) will not display dialog boxes. confirm(…) will always return false, and prompt(…) wil... 2024-11-10
全屏事件触发 resize 事件 我之前发现播放视频时进入全屏会闪退。奇怪的是 Chrome 和 Firefox 存在这个问题，但 Safari 正常。正因为如此对我造成了误导，没有找到问题所在。直到今天发现了这个乌龙。 拖动改变浏览器窗口大小时会造成图文排版变形，所以我监听到 resize 事件就会重新渲染页面——表现之一就是视频进入全屏时“闪退”成了非全屏窗口，video 元素被清除了，重新渲染为缩略图 img。 那么解决这个问题就是监听到 resize 事件时增加一个判断是否全屏。 is_fullscreen = () => !!( document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement... 2024-10-25
也谈网站镜像攻防 近期不少博友遇到网站被恶意镜像的问题。我在 Google 没查到自己的镜像站，不过后台发现很多来源是不良网站的访问，不确定是否跟镜像站有关，因此也谈一下这个话题。 先说结论，网站被镜像易攻难守，没有完美的解决方案。前端可以拦截正常的浏览器访问，但是拦不住爬虫；后端拦不住域名伪造。目前我做了前端拦截 + 防盗链，可以将正常访客引导到主站，但是对搜索引擎爬虫没有找到办法。 接下来从攻防两个视角来分别讨论。 攻 Nginx 实现镜像 server { listen 80; listen 443 ssl http2; #篡改域名 server_name dujun.us.kg; location / { gzip off; proxy_set_header Accept-Encoding ""; #替换网页内容... 2024-09-26
双击全选代码文本 我代码高亮是几年前参考Prism改写的，留有一个遗憾是缺失复制代码文本的功能，因为我一直没有找到理想的交互方式。常见的办法是在右上角放一个常驻或悬停可见的复制按钮，点击后自动将全文复制到剪贴板。我不认可这个设计，一是按钮造成一小块遮挡，二是移动鼠标去找一个按钮进行复制不是很自然的交互，特别是文本较长需要往上回滚的情况下。 我平时习惯双击选中一段文本，按照这个方式增加了双击全选代码文本的功能——仅全选而不自动加入剪贴板，防止误触。 $pre.on('dblclick', () => { let range = document.createRange(), selection = window.getSelection(); range.selectNodeContents($pre[0]); selection.removeAllRanges()... 2024-09-26
乱码导致 json_encode 失败的解决方法 发现访客日志缓存失效，定位到写入 redis 时数据经 json_encode 变成了空字符。调用 json_last_error_msg() 打印出报错信息为："Malformed UTF-8 characters, possibly incorrectly encoded"。 解决办法是增加参数 JSON_INVALID_UTF8_IGNORE，过滤掉乱码字符： json_encode($value, JSON_INVALID_UTF8_IGNORE); 2024-09-19
更换天气信源 [附件] 宝宝日记后台编辑器根据定位自动获取当日天气信息。这项功能开发于 2017 年，当时选定的方案是采集中国天气网页面，通过正则表达式提取相关数据。但现在偶然发现其天气信息与墨迹天气 APP 有差别，我到中国气象局官网验证，与墨迹天气是一致的，也就是说中国天气网数据是错误的。不准确的信源毫无意义，马上决定更换。 经过对比，最终选定和风天气作为新的天气信源，免费版接口支持每天1000次请求。 注册 在官网注册账号（需要邮箱和手机号），创建一个免费订阅，记录 KEY 值。 调用 详见文档：https://dev.qweather.com/docs/api/weather/weather-daily-forecast/ 接口调用 PHP 代码参考： declare(strict_types = 1); /** * 天气 (和风天气) */ class Vendor_Weather { //... 2024-09-11
第一次体验 AI 自然语言编程 我是一个上了年纪的守旧的程序员。现在也开始依赖 AI 工具，主要是翻译、做图、查一些代码语法和示例。但我从未尝试直接用 AI 写代码，或许这是在自己专业领域被挑战的防御心理，一种莫名的排斥。不过今晚破例了，因为我要写一个 shell 代码，而我不熟练，所以抱着试试看的心态，用自然语言向 AI 提了需求。我的提问内容是： 用shell 代码实现下列功能： 接收一个输入值作为用户名，记为 name。 生成一个 10000 到 65535 之间的随机数作为端口号，记为 port，如果当前目录下有子目录名末尾含这个 port，则重新生成一次。 最终的目录名为 www_slim_web_ + name + _ + port。 创建这个目录，进入这个目录并创建一个 docker-compose.yml，模版为： version: '2.4' services: web: image: du... 2024-06-27
frp 服务守护脚本 为了方便开发，我将工控机从公司拿回了家里。在未做任何修改的情况下，原先在公司很稳定的内网穿透，到了家里不定期地就会断开连接——frp 进程未死，但是穿透代理全部关闭。研究了几天也没解决，现在只能推测是家庭宽带不如企业宽带稳定。（家宽故意干扰长连接？限制内网穿透？） 我用守护脚本临时解决这个问题。思路是每分钟检查内网穿透出的 web 服务可用性（http 状态码 为 200），不可用则杀死进程，然后再由 Supervisor 自动拉起服务。另外写入标记文件，避免重复杀进程。脚本如下： #!/bin/bash URL="https://dujun.bf" TIME=`date "+%Y-%m-%d %H:%M:%S"` FAIL_LOG_FILE="/var/log/frp/failed_$(date '+%Y%m%d').log" FLAG_FILE="/var/log/frp/flag_$... 2024-04-11
