CSS 实现类似 Google Photos 的图片布局

Skyone
科技爱好者
今天在 medium 看到一篇关于 Google Photos 的文章,里面详细的介绍了谷歌的一名工程师是如何设计 Google Photos 的布局的,文章地址:Building the Google Photos Web UI。
观察了一下 Google Photos 的布局,发现它的布局非常的有意思,有以下特点:
- 一行图片的宽度始终刚好占满容器宽度
- 图片全部保持原始比例,不会被拉伸
- 图片的高度不一,但是每一行的高度是一样的
- 图片顺序不会被改变
感觉很神奇,但是那篇文章里的实现方法太过复杂,虽然性能非常好,但是我觉得可以用更简单的方法来实现,于是就有了这篇文章。
Next.js 避免暗黑模式闪烁

Skyone
科技爱好者
不知道大家有没有遇到过这样的问题,就是在 Next.js 中使用暗黑模式时,页面会闪烁一下,这是因为 Next.js 会在服务端渲染时并不知道用户是否选择了黑暗模式(比如我一般将这个变量存在 window.localStorage
里),所以所以在用户接收到页面之前,页面会先显示一下默认的样式,然后再根据用户的选择来渲染暗黑模式的样式,这样就会导致页面闪烁。
在使用 CSS in JS 的时候这种闪烁尤为明显,例如 MUI 的官网。一般网站都会默认使用亮色主题,但我又倾向于使用暗黑模式,所以经常看到这种闪烁。我认为这真的很影响用户体验,至少我自己看得很难受。
使用 Traefik 作为 Docker 的反向代理

Skyone
科技爱好者
本文主要介绍如何使用 Traefik 作为 Docker 的反向代理,以及如何使用 Traefik 配置自动 HTTPS。但是,在写这篇文章时有感而发,先聊聊我对建网站,或者说自学 linux 的一些历程吧。想直达重点的点这里跳转。
还记得最开始使用云服务器的时候,租了个阿里云的学生机,当时就想建个博客玩玩,一顿搜索,发现网上全在推荐使用 WordPress。但是当时还是小白啊,只会 ls
cat
的那种,安装 PHP 和 Apache 几乎是不可能的,再加上网上一堆教程动不动就手动编译安装,我当时连 yum
都不会用,怎么可能编译安成果嘛。
在浏览器中编译运行 React

Skyone
科技爱好者
一直很好奇 React 官网的在线编辑器是如何实现的,于是稍微研究了一下,通过 TypeScript 和 Babel 实现在浏览器中编译 React。
这个项目本身也是使用 TypeScript, Webpack 和 Babel 构建的,源码在 react-online - Skyone Git。
ArchLinux安装GNOME桌面

Skyone
科技爱好者
在上一篇文章中,我记录了如何安装ArchLinux,这篇文章写一下如何安装GNOME桌面,以及一些常用软件。
众所周知,ArchLinux是一个滚动更新的发行版,所以在安装完系统后,需要手动安装桌面环境和一些常用软件。
Linux下的桌面环境有很多,比如GNOME、KDE、Xfce、LXDE、LXQt等等, 这里我选择安装GNOME桌面,因为GNOME不需要太多配置,而且我也比较喜欢GNOME类似的设计风格。此外,GNOME还包含一个基于flatpak的应用商店,当想使用一些基于KDE的应用又不想破坏系统的时候,可以使用flatpak安装。
除了桌面环境,还需要安装一些常用软件,比如浏览器、音乐播放器、视频播放器、输入法等等。
话不多说,让我们开始吧。
安装 ArchLinux & Windows 双系统

Skyone
科技爱好者
Windows 10 用了也有好几年了,最近用的有点腻了,这次折腾一下 ArchLinux。搞个双系统,也顺便检验一下自己的 Linux 水平。
都说 ArchLinux 安装有点难度,需要手动安装所有系统组件,但是我觉得还好,只要按照 Wiki 上的步骤一步一步来,就不会出什么问题。之前一直拿 ArchLinux 的 LiveCD 模式在虚拟机里面折腾,这次直接在实体机上安装 ArchLinux 并包含桌面环境。
将Markdown渲染成HTML并自定义标记

Skyone
科技爱好者
Markdown是一种几乎万能的标记语言,它能让我们以简单的语法写出很好看的文章。但是markdown源码只是一串纯文本字符串,我们需要将他渲染成HTML、word、PDF等格式才能更好的供人阅读。下面我将记录一下我是如何使用 remark
一系列的库实现将 markdown 渲染成 HTML,并提供自定义标记。
静态编译node.js-v16踩坑记

Skyone
科技爱好者
想静态编译一个 Node.js 打包成 Google Distroless 容器,但编译的时候遇到一些问题,不过为了照顾没有编译过源代码的同学,还是一步一步介绍。最终成果:
注:本文仅面向Linux系统
使用picoprobe调试树莓派PICO(附调试包)

Skyone
科技爱好者
看了下网上的树莓派调试的资料,要么使用 stlink,要么使用树莓派4B,要么按官方的来,使用一个树莓派PICO调试另一个,但连编译后的openocd都不给一个嘛。。。。。
今天来写一篇:在 Windows 下使用一个树莓派PICO调试另一个,基于官方的 picoprobe
准备材料:
- 树莓派 PICO 两片
- USB 线一根
- 杜邦线若干
使用CMake构建lua并嵌入C程序

Skyone
科技爱好者
Lua 是一个小巧的解释型语言,优点很明显:非常小,因此很适合嵌入一些编译型语言中,使之可拓展性大大增强。
但是网上许多文章都是基于 lua 5.1 ,而且不支持 Windows 平台,于是我准备使用 CMake 弄一个全平台的。
提示
如果不需要编译 lua 库文件,windows 下只需要把代码全拖进VS直接编译即可,但这样就不能使用MinGW编译了