简介 github-translator 是我最近做的一个小工具。它是一款将非英文的 GitHub issue 和 GitHub discussion 自动翻译成英文的 GitHub Action。https://github.com/lizheming/github-translate-action 已启用该 Action，感兴趣的同学可以直接上仓库测试一下。 使用 使用其实很简单，在你的项目仓库中新建 .github/workfl…
有些你不知道是正常的……因为他们基本都没怎么被浏览器实现 🥶 CSS Toggles https://tabatkins.github.io/css-toggle/ 纯 CSS 实现状态切换一般使用 Checkbox 或者 Radio 配合选择器来实现。实现起来麻烦不说，而且 CheckBox/Radio 的位置限制了你可控制的范围，用起来很不方便。 iframe { width: 100%; height: 300px; borde…
2022-09-13
Figma 是一款专业的在线 UI 设计工具，它因为个人使用免费、在线跨平台、多人协作、蓬勃的 Figma Community 社区组织而广受欢迎。目前设计团队都在使用 Figma 进行 UI 设计交付。 能被 SaaS 化的终将被 SaaS 化 Figma 本身是 Web 服务，其客户端也是使用 Electron 进行的封装。所以它的插件系统是前端友好型，和日常前端开发没有什么太大的区别。 插件原理 Figma 的插件也采用了双线…
2022-06-18
2023-07-12 更新：《关于豆瓣图片无法直接使用的说明》 简介 doumark-action 是我前段时间造的一个轮子。它是一款 GitHub Action，支持在 GitHub 中同步你的豆瓣书影音数据到本地的文件或者 Notion 中。我利用它，定时同步我的豆瓣观影数据到我的博客仓库中，并利用 Hugo 读取文件数据渲染成页面，观影 是最终的效果。 使用 使用其实很简单，在你的博客仓库中新建 .github/workflow…
2022-03-14
我在之前的文章 《Hugo 主题 Eureka 自定义》 中有讲到我现在用的博客主题就是 Eureka。不过主题虽然好看，但是性能跑分却比较低。遂趁着周末时间给优化了一下，遂有本文。 打开控制台看了下资源的加载，之前没注意，这会才发现首页竟然后 10M 这么多资源要加载，怪不得性能不好呢。 JS 资源 JS 资源中大头是 FontAwesome，主题中直接使用了引用了所有图标的集成版地址 @fortawesome/fontawesom…
2022-02-13
前段时间组里的小伙伴让我帮忙排查一个线上问题，我觉得排查流程比较有意思，想着记录一下看看是否能对其它同学有所帮助，遂有此文。 事情的起因是前几天线上突然收到一个报警，错误内容是 TypeError: C.fn is not a function。相关同学尝试排查无果后又回滚了最近上线的变更也没有排查到问题。虽然最终确认了复现路径，但是在本地却无法复现。 🔍 初步排查 在线上复现该错误后，点击错误堆栈的文件跳转，快速定位到线上出错的代码…
2022-02-07
在 React 组件中，我们会在 useEffect() 中执行方法，并返回一个函数用于清除它带来的副作用影响。以下是我们业务中的一个场景，该自定义 Hooks 用于每隔 2s 调用接口更新数据。 import { useState, useEffect } from 'react'; export function useFetchDataInterval(fetchData) { const [list, …
2022-01-23
我最近做的一个新项目是一个典型的中后台项目，采用的是 React + React Router + Antd 方案。正常情况下我们需要定义路由配置，在页面中定义面包屑的数据，页面写完之后需要在左侧菜单中增加页面的路由。写多了之后，我会觉得同一个路由的相关信息在不同的地方重复声明，实在是有点麻烦，为什么我们不统一在一个地方定义，然后各个使用的地方动态获取呢？ 单独配置 首先我们看看每个功能单独定义是如何配置的，之后我们再总结规律整理成一份…
2021-10-06
前言 我们的后台系统都是基于 Antd Design 开发的。最近做的新系统里有比较多的场景需要使用到附件上传的功能，我们针对 Antd 的 <Upload /> 组件在项目里进行了业务的封装。过程中也碰到些问题，遂总结于本文中。 基本使用 我们主要是用到了它多文件上传和功能。 import React from 'react'; import { Upload } from 'antd…
2021-07-24
