面条实验室

折腾些什么玩意。

群组 @miantiao_chat

面条实验室

  2. 面条实验室

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

  4. 面条实验室

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

    面条实验室
    使用 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.

  10. 面条实验室

    在咸鱼淘了一个阿里云 AP8220, 在几乎没有刷机资料的情况下，摸索了了两天，终于刷成了 QWRT, 写篇文档记录一下

    在咸鱼淘了一个阿里云 AP8220, 在几乎没有刷机资料的情况下，摸索了了两天，终于刷成了 QWRT, 写篇文档记录一下。

    不过 QWRT 用不习惯，希望有大佬适配下 ImmortalWrt 。

    https://chi.miantiao.me/posts/aliyun-ap8220/
    miantiao.me
    面条实验室
    面条实验室
    折腾些什么玩意

    • 👍1

  11. 面条实验室

    如果你有临时编辑图片的需求，可以试下 EDIT PHOTO 这个网页工具，完全免费

    如果你有临时编辑图片的需求，可以试下 EDIT PHOTO 这个网页工具，完全免费。

    支持剪裁，缩放，滤镜，微调等功能，而且有常用图片的的模板。

    标题就是域名，很好记👍

    https://s.mt.ci/edit-photo
    Edit Photo
    Edit Photo
    No ads, no popups, no cookies, no account. The fastest way to edit photos online

  15. 面条实验室

    中文网字计划这个项目真不错，提供的插件可以扫描整个项目使用的中文字符，生成最小化字体后使用 unicode-range 分包加载

    中文网字计划这个项目真不错，提供的插件可以扫描整个项目使用的中文字符，生成最小化字体后使用 unicode-range 分包加载。

    简单来说就是中文字体支持摇树优化了。

    支持 Next.js Nuxt.js Astro 等框架，几乎所有使用 Vite Webpack 的打包工具都可以使用。

    https://s.mt.ci/chinese-font
    中文网字计划
    ✨中文网字计划-提供便捷实用的全字符集中文渲染方案
    中文网字计划致力于在互联网中提供更加便捷实用的全字符集中文渲染方案。我们通过精巧设计的字体分包方式，将庞大的字体文件切割为多个小型静态分包部署于云端，在全网领域内都可快捷、稳定地进行加载，提高中文字体在网络中的流通体验！

  20. 面条实验室

    如果你不知道 Open Graph Image 怎么设计可以去 OGImage Gallery 找找灵感，这边收集了上千个网站的 OGImage

    如果你不知道 Open Graph Image 怎么设计可以去 OGImage Gallery 找找灵感，这边收集了上千个网站的 OGImage。

    当然你也可以提交你的OGImage。

    https://s.mt.ci/og-image
    www.ogimage.gallery
    OGimage.gallery | The finest hand-picked OG Images ✨
    OGimage.gallery | The finest hand-picked OG Images ✨
    Gallery with the best and most carefully collected OG images.

1px