半吊子全栈开发者的日常

重构博客友链页面 & 友链朋友圈开源

先来看看效果友情链接 - PRIN BLOG

自我感觉还是不错的友链的博客们有什么更新都可以实时展示在页面上一目了然作为博主不用打开 RSS 阅读器就可以查看新文章作为访客也可以快速找到更多自己感兴趣的内容比起原来全是链接的页面看起来也让人更有点击欲望了

从临时起意到开发完成总共两个晚上最速传说就是我

> READ MORE...

真的不可以在 React 组件内部嵌套定义子组件吗

最近在 Code Review 时看到有同事写了这样的代码

function TodoList() {
  const [list, setList] = useState([]);

  const TodoItem = useCallback((props) => {
    return <li>{props.text}</li>;
  }, []);

  return <ul>{list.map((item, index) => <TodoItem key={index} text={item} />)}</ul>;
}

有经验的 React 开发者肯定一下子就看出问题了在组件内部嵌套定义组件会导致子组件每次都重新挂载因为每次渲染时创建的函数组件其实都是不同的对象

但是他又有包了 useCallback 让引用保持一致好像又没什么问题……

这波骚操作让我突然有点拿不准了所以今天咱们一起来验证一下useMemo 或者 useCallback 包裹嵌套定义的子组件对 React 渲染会有什么影响以及如果有影响应该如何用更合适的方法重构

> READ MORE...

使用 TikZ 在 Hexo 博客中愉快地画图

一转眼就到 2024 年了大家新年快乐

前段时间在写文章时需要一些配图于是就使用了 TikZ 来绘制TikZ 是一个强大的 宏包可以使用代码的形式绘制出各种各样精美的矢量图

xf(x)f(x)=xf(x)=sinxf(x)=120exA0B0ABC0D0CDf0ag0h0bfhk0cdkg

如果你的阅读器看不到上面的 SVG 格式图片可以点这里查看 PNG 格式 example-tikz-graph

上面的图对应的 TikZ 代码可以在这里找到然而画是画爽了想把它贴到博客里时却犯了难——目前竟然没有什么好办法可以直接在博客里使用 TikZ

> READ MORE...

详解 PixiJS Filter 中的参数与坐标系

除草啦除草啦再不更新博客就要变成热带雨林啦🌿

最近在给一个 PixiJS 程序编写 WebGL Shader被各种参数和坐标系搞得晕头转向痛定思痛整理了一下 PixiJS Filter 系统中的各种概念以供后续参阅

在 WebGL 中我们可以通过编写顶点着色器 (Vertex Shader) 和片元着色器 (Fragment Shader) 来实现各种各样的渲染效果而在 PixiJS渲染引擎为我们屏蔽了绝大多数的底层实现通常情况下用户是不需要自己调用 WebGL API 的如果有编写自定义着色器代码的需求一般是使用 Filter 来实现

> READ MORE...

逆向拼多多上的关灯神器实现蓝牙遥控开关灯

依稀记得以前在某个友链博主那边看到过一篇文章讲的是因为他们寝室所有人都懒得下床关灯所以就用树莓派和舵机做了个远程遥控关灯的小玩意儿当时我就感叹果然懒才是第一生产力

自从今年初开始出来租房住突然就感觉睡前关灯变得好麻烦好麻烦我的房间里是有好几盏灯的床头的开关只能控制其中的两盏剩下的开关在另一个地方另外还有一个总开关位于进门的门厅处于是我就陷入了两难之境

  • 不用总开关每天睡前把灯一一关掉第二天回家又得一一开回来
  • 直接用总开关开关离床太远关完灯要摸黑上床早上起来又得先过去开灯

不爽太不爽了现在都讲究智能家居我这他喵的是智障家居啊……

> READ MORE...

在 M1 Mac 上运行 macOS 虚拟机

Apple M1 芯片问世一年有余时至今日在 M1 Mac 上运行 WindowsLinux 虚拟机的方法都已经比较成熟了然而 macOS 本身的虚拟化却并非如此直到 Monterey 发布于 M1 Mac 上运行 macOS 虚拟机才成为可能

最近有几个小实验需要在 macOS 虚拟机上跑本来以为去 Parallels Desktop 上开一个就完事了搜了一下才发现其实事情没那么简单……实际配置过程中也是踩了几个坑所以顺带记录一下

> READ MORE...

GitHub 全家桶Actions 自动构建多架构 Docker 镜像并上传至 Packages (ghcr.io)

前段时间把 GitHub 的用户名修改成了 @prinsss准备把其他地方的账号也修改一下的时候却发现 Docker Hub 的 username 不能改只能砍掉重练npm 也是

想想反正我 Docker Hub 上也没上传什么东西不如就用 GitHub 自家的 Container registry 来托管镜像吧

这里有个小插曲其实我挺早之前就想要改名了但当时在忙秋招考虑到改名后可能会有一些后续要处理擦屁股所以只是创建了一个 organization 把名字占住等有时间了再正式改名然而后来我把组织删了想要修改 GitHub 账户的用户名时却提示 prinsss 这个名称 unavailable我确定它是没被占用的因为我还能再用这个名字创建组织不知道是不是触发了内部的什么保留机制

最后还是发工单找客服解决了而且等了一个多星期才回复也是挺无语的原来的 printempw 这个名字我也保留了所以 printempw.github.io 这个域名还是可以访问的目前是两边同步更新后续再慢慢迁移

> READ MORE...

使用 ESLint + Prettier + Commitlint 规范代码风格与提交流程

最近因为课程需要开了几个多人协作的新项目感觉有必要在团队中强制一下代码规范免得提交上来的东西对 leader 血压不好前后端都是 TypeScript 的所以就用流行的 ESLint + Prettier 组合拳配合 Standard 规范EditorConfig 同步编辑器配置再加上 commitlint 规范提交信息最后用 Git Hooks 实现自动化检查

配置虽然不难但还是有点繁琐的所以记录一下如果忘了下次可以翻回来看

> READ MORE...

使用国内镜像加速 Laravel Sail 构建

Laravel Sail 是什么简单来说就是一个基于 Docker 的开发环境其核心就是一个 docker-compose.yml 配置文件和 sail 脚本定义了 PHPMySQLRedis 等一系列容器然后把程序放里面跑

至于好处嘛主要就是使用方便运行环境统一不会弄乱系统同样是 Laravel 开发本机安装 LNMPValetHomestead 这些方法我都用过但现在我肯定首选 Laravel Sail容器化是真滴爽

不过 Laravel Sail 好是挺好想要在墙内顺利使用还是要费点功夫的

> READ MORE...

博客主题可以自动切换深色模式啦

有时候我也很佩服自己这么简单的一个功能写写也就几个小时一年多前就想搞了竟然给我拖到现在才装上去拖延症恐怖如斯

以前我对深色模式其实不怎么感冒主要感觉开了也没啥用就系统界面变黑了其他 App 里还是白色的等于没开不过这几年大部分应用的适配都跟上来了体验也就好起来了晚上玩手机看着不那么刺眼挺好的

现在浏览器网页也支持检测用户的系统主题色所以我也凑个热闹给博客加上了自动切换浅色/深色主题的功能适配过程还是挺顺利的记录一下供参考

> READ MORE...