这个个人主页真酷，最古老的 UI , 运行着最先进的 Web 技术 https://s.mt.ci/phuctm97

VPS 替代 Vercel 目前最舒服的方案:
1. VPS 安装 Dokploy 躲在 Cloudflare 后面用于计算和数据库
2. 通过 GitHub Actions 将代码打包成 Docker 镜像存在 GitHub 容器注册表
3. Dokploy 运行 Docker 镜像并绑定域名，可在镜像打包完成通过 Webhook 触发更新
4. 定时备份数据库到 R2(S3)，保存一个月

最近尝试把部署在 Cloudfalre, Vercel, Netlify 上的项目迁移到自己的 VPS 通过 Docker 运行，但是默认打包出来的镜像有 1G 多。花时间优化了一下，降到了 135 MB。

示例项目是一个 Vite SSR 项目（Astro），有兴趣的可以看看

https://chi.miantiao.me/posts/vite-ssr-docker-image-minimal-build/

chi.miantiao.me

Vite SSR 项目 Docker 镜像最小化打包方案 | 面条实验室

在 Twitter 上被 AI 嘲讽了？ 来让 AI 吹捧一下你的 GitHub 吧

https://s.mt.ci/praise-me

用漫画来解释 HTTPS 是怎么工作的，挺有趣，初学者可以看看

https://s.mt.ci/how-https-works

shell.how 可以解释 shell 命令行是怎么运行的，不过背后的工具被 Amazon 收购后就归档了

https://s.mt.ci/shell-how

看到 @VersunPan 推荐 Terminus (一个 Homelab 管理系统), 看了下介绍，架构很吸引人，而且 UI 也很棒，还内置了漂亮的应用，准备在攒的新设备上试一下。

已经收录到 Awesome Homelab

https://www.awesome-homelab.com/products/beclab/Terminus

Landingfolio 精选了 1000 个 Landing Page, 如果没啥灵感，可以去看看

https://s.mt.ci/landingfolio

Landingfolio

The Best Landing Page Design Inspiration, Templates and More

Looking for landing page inspiration? We've got you covered. Landingfolio features the best landing page designs, templates, component and more on the web. Get inspired by real landing page examples.

97 个免费 Tailwind Components，设计还行，可直接复制粘贴使用

https://s.mt.ci/tailbits-components

冲着好看入手了 CMF Watch， 还是为设计买单了

就是表圈上的几个字有些多余

Vercel 的 Edge 函数支持自定义部署区域，再通过 DoH 查询 DNS 记录就可以获取到 DNS 在全球各地的解析结果。

于是我用这个特性搞了 DNS.Surf , 但是 Vercel Edge 函数计费很迷很容易把免费额度用完，干脆直接开源了吧。有兴趣的可以自己部署

https://github.com/ccbikai/DNS.Surf

GitHub

GitHub - ccbikai/DNS.Surf: Querying DNS Resolution Results in Different Regions Worldwide.

Querying DNS Resolution Results in Different Regions Worldwide. - ccbikai/DNS.Surf

上周用调用模型生成内容，HTML 偷懒直接扔给模型，浪费不少钱。

这周用 sanitize-html 净化 HTML 后，再用 turndown 转成 Markdown，能省一点是一点。

之前看到的 Landing Page 都是花里胡哨的风格，这次看到一个 shacdcn-ui 风格的 ConvertFast UI。

开源的，分享一下：

https://s.mt.ci/convert-fast-ui

从 Ctrl+C & Ctrl+V 程序员升级到了 Tab 程序员👨‍💻

Resend 马上要发布一个叫 Forward 的产品。

这个 Landing Page 设计的很酷，很有极客风格

https://s.mt.ci/resend-forward

Resend

Resend Forward

An entire week of new feature announcements that will change the way you communicate with your users.

You have been granted access to GitHub Models limited public beta

在给 BroadcastChannel 做 no-JS 的时候，遇到几个有趣点：

1. 防剧透模式和移动端搜索框隐藏展示，使用的 CSS ":checked 伪类" 和 "+ 紧邻兄弟组合器" 实现的，可以参考： https://www.tpisoftware.com/tpu/articleDetails/2744

2. 过渡动画使用的 CSS View Transitions , 参考 https://liruifengv.com/posts/zero-js-view-transitions/

3. 图片灯箱用的 HTML 的 popover 属性，参考: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/popover

4. 访问统计使用一个 1px 的透明图片做 LOGO 背景，上古技术了，现在几乎没有访问统计软件支持了

5. 禁止浏览器端 JS 运行，使用的 Content-Security-Policy 的 script-src 'none' 参考： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

Tpisoftware

CSS：利用Checked原理實現Toggle Switch

表單常會帶有一些控制元件，讓使用者填寫更加直覺，例如：checkbox，今天就來介紹如何使用純CSS將checkbox變成Toggle Switch吧。

BroadcastChannel 将你的 Telegram Channel 转为微博客

https://github.com/ccbikai/BroadcastChannel

GitHub

GitHub - miantiao-me/BroadcastChannel: Turn your Telegram Channel into a MicroBlog.

Turn your Telegram Channel into a MicroBlog. Contribute to miantiao-me/BroadcastChannel development by creating an account on GitHub.