面条实验室

折腾些什么玩意。

群组 @miantiao_chat

面条实验室

  1. 面条实验室

    最近尝试把部署在 Cloudfalre, Vercel, Netlify 上的项目迁移到自己的 VPS 通过 Docker 运行，但是默认打包出来的镜像有 1G 多

    最近尝试把部署在 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 镜像最小化打包方案 | 面条实验室
    Vite SSR 项目 Docker 镜像最小化打包方案 | 面条实验室

    • 👍4
    • ❤️1

  5. 面条实验室

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

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

    已经收录到 Awesome Homelab

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

    • 👍3

  6. 面条实验室

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

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

    https://s.mt.ci/landingfolio
    Landingfolio
    The Best Landing Page Design Inspiration, Templates and More
    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.

    • 👍1

  9. 面条实验室

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

    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.
    GitHub - ccbikai/DNS.Surf: Querying DNS Resolution Results in Different Regions Worldwide.
    Querying DNS Resolution Results in Different Regions Worldwide. - ccbikai/DNS.Surf

    • 👍2

  16. 面条实验室

    在给 BroadcastChannel 做 no-JS 的时候，遇到几个有趣点：1. 防剧透模式和移动端搜索框隐藏展示，使用的 CSS ":checked 伪类" 和 "+ 紧邻兄弟组合器" 实现的，可以参考：

    在给 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吧。

    • 👍10
    • ❤️1

  18. 面条实验室

    开源了，有兴趣的可以部署下

    面条实验室
    使用 Astro + Telegram Channel + SepiaTemplate 做了一个微博客。 浏览器端做到了 0 JS, 也可以加入 no-JS Club 了。 https://memo.miantiao.me/
    开源了，有兴趣的可以部署下。 https://github.com/ccbikai/BroadcastChannel/blob/main/README.zh-cn.md
    GitHub
    BroadcastChannel/README.zh-cn.md at main · miantiao-me/BroadcastChannel
    BroadcastChannel/README.zh-cn.md at main · miantiao-me/BroadcastChannel
    Turn your Telegram Channel into a MicroBlog. Contribute to miantiao-me/BroadcastChannel development by creating an account on GitHub.

1px