520 什么鬼

又是一年一度的 520,爱人先爱己,我又给自己买了件小手办,是崩铁的黑塔转圈圈,准备放在公司,就是看备注改了说是 7 月左右才有货,这才隔了一两天就截止掉 5 月份的出品了啊,手办预售就是太折磨人了,也不知道什么时候发货了...

既然是 520 那也自然少不了舔狗们创造的各种有趣的段子,在各种群吃了不少瓜。往常都有说去垃圾桶捡垃圾碰碰运气的,可能已经被很多人知道了,那些收到舔狗礼物的女生宁愿出掉也不扔了。其中同事给我分享了一个奇葩女,她就是收到了某可怜舔狗的花,结果在群里问有没有谁收,毫无疑问自然没有。这还不是最有意思的,后续还说了一句“连花店都不要”,花店多备货都卖不出去了还要你的二手货,人家商家也不是傻的啊。

鉴于看了不少视频和刷到不少段子,我想趁机发布一篇有关胖猫事件的博客正文,这么一看也确实有很长时间没发布过文章了,写到了快一点半,原神已经没有时间玩了。

记录日常

下午和前同事去看了《间谍过家家 代号:白》,世界观设定方面就是在第二季之后,因此看过之前的两季番剧会更好。主要剧情和前面邮轮的类似,这次的浮夸可谓是做到底了,直接“一家三口灭了整个军团”。过程依旧是比较搞笑,强烈推荐去看看。

晚上又是日常去亲戚家做客,写了两篇日记,看了看推和 RSS 订阅,还在漫展群偶然扩列了一位老师。她的头像是轻音的呆唯,还好这是我熟悉的,也是以这个作为话题简单的聊了聊。

回到家洗澡之后没着急睡觉,而是去更新了一下小窝的页面内容,包括但不限于“关于我”、“心愿”,随着新版网站上线,一些内容很久都没得到更新了。

用 GPT 写了一个和编辑器搭边的小需求

工作任务发现有一个细节交互没做,需求是点击某个空白处自动定位到可编辑段落的最后一个字,参考此前写给小窝后台编辑器的经验无效(因为是基于 Textarea 做的),特此请教 GPT 写了一个,基本符合我的需求,只要把点击按钮的逻辑改成对应元素就可以了。

<div id="trigger">点击这里</div>

<p id="editable" contentEditable="true">这是一个可编辑的段落,点击上面的 div 将光标放在这里。</p>

<script>
  document.getElementById('trigger').addEventListener('click', function() {
    var editableElement = document.getElementById('editable');

    // 确保元素是可编辑的
    if (editableElement.isContentEditable) {
      // 将光标放置在最后一个字之后
      var range = document.createRange();
      var sel = window.getSelection();
      range.selectNodeContents(editableElement);
      range.collapse(false); // 将collapse设置为false,以将光标放置在末尾
      sel.removeAllRanges(); // 清除现有的范围
      sel.addRange(range); // 添加新的范围
    }
  });
</script>

这个代码的核心就是这个 createRange 建立一个块选区域,限定在 editableElement 里面然后修改光标位置,替换掉此前选择的块选区域。

有朋友给我留言找 Bug,看到了熟悉的博客,但有了新的发现

今天有位朋友给我发邮件留言,说我的 方块播放器 在小米浏览器上有不能显示的问题。我推测大概率是兼容性的问题,让他提交了一下浏览器 UA,后续跟踪。

这位朋友的网站使用了一个很熟悉的主题,叫 niRvana,曾经是一个付费的 WordPress 主题,曾经群里有个大佬还有偿找我移植过来 Typecho,但是它 JS 源码做了混淆加密,后续就没后续了... 但他这个是 Typecho,看了下并非是之前的作者开发的,而是另外一个人模仿界面复刻的。

才是之前那个主题的原作者,熟悉的头像和页面布局,看了下他的博客,他也纯手工做了一个叫 nvPress 的博客系统,这就有意思了。看上去这个系统更多的设计是为了配合他主题的功能,都写在这个后端系统了。这个前后分离的架构自然存在前端 SSR 的问题,查看源代码发现他这个有 SSR 的内容,但又不完全像是一个 SSR 应用(不知道是不是自己搞了个渲染 Vue 的服务),不知道他背后的实现原理,这样做的实际收录情况又如何。先放收藏夹吃个灰吧!

Sitemap 生成 / 技术服务于业务

今天没有继续搞邮件相关的逻辑,而是去弄网站 Sitemap 的生成了,这也是小窝需要增加的一项任务。目前技术实现上比较离谱的地方是这玩意是后端生成的,而不是前端,也就是说前端和后端必须约定好具体使用哪个 URL 格式才行。

相较于使用 Nuxt,PHP 生成自然是更便捷高效的办法,毕竟它直连数据库,还不需要搞单独的接口就可以一次性拿到所有不同类型的数据不是么,这虽然不太“优雅”,但是它实现起来很快啊,对后端影响不大,也不需要额外改造前端的代码。

期间询问了 @Innei 他网站的实现细节,得知他因工作方面的问题而情绪低落。有群友也提了一脚,“想不被裁得搞业务,专注于技术迟早被裁”,虽然很难听,但是很中肯不是么。客户有需求,产品能留存住人才能生存,不然为什么连推特都开始做求职平台了呢。产品没有持续性的收入也留不到人,团队就要裁员,这也是合乎情理的。

公司产品的技术选型真的不需要太高级,太花哨,用熟悉的工具好且快的完成功能创造营收,才是正解。如果想在新技术上开荒,拿自己的个人项目来玩玩就好,玩成熟了再去分析是否确实能对项目有利(性能、代码抽象、可读性等),那么再看情况引入进去优化也不迟。

详情

PHP 发送电子邮件的后续

晚上收到前几天买的摄像头了,第一时间试了一下开直播,主要是继续写邮件功能,整了一个 HTML 模板,优化了一下后端部分的代码。期间遇到了一位路人老哥 @烤肉拌饭 进入直播间,还小聊了一些前后端的事。

目前已经从草稿代码变成最小可用 Demo 了,还得看具体业务实现的效果如何,毕竟评论需要审核才可以显示,我还是好奇这里应该做成审核通过后去发送邮件,还是只要有人回复评论就发送邮件...

PHP 发送电子邮件的尝试

今天继续折腾小窝任务主要看了看发送邮件的逻辑,由于 PHP 内置函数 mail 并不支持使用第三方带验证的 IMAP/SMTP 邮箱服务器(假设运行 PHP 的服务器就是邮箱服务器,才能使用这个函数),这里选择使用了第三方库 PHPMailer 来实现这个功能。小窝后端的代码没有使用 Composer 包管理器,于是这次也安排上了,安装过程主要遇到了一个函数被禁用的问题。

根据项目 读我文件 给的 Demo,初步尝试连接被服务器拒绝,看上去主要是密码验证的问题,需要开启允许使用第三方客户端,以及生产单独的安全密码。

本以为不会再遇到什么问题了,结果发现邮件被退信,看了一篇有关退信的说明,结果并没有出现里面的错误,最后发现是纯英文的邮件才会有问题,可能是阿里误判以为这是一个垃圾信息?

然后就是中文乱码的问题,根据这条提问得到解决。

一封测试邮件就已经成功发出了,接下来细化代码实现,完善 HTML 模板的内容,这个评论回复邮件的功能应该就可以做完了。

1
2
3
...
5
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君