2022.02.26
TypeScript 如何从数组元素的值中定义 Union Type
本文处理下面这个 TypeScript 开发场景：
有一个配置（configs）数组，数组中每一项都是一个对象，我希望定义一个 Type，是由数组中的每个对象中的某个属性值组成的联合类型（union type）。
这是一个 config...
2022.02.12
JavaScript 模块动态导入及适用场景
我们在使用 Vue 或 React 等框架构建应用程序时，经常需要编写大量组件，我们并没有将这些组件都写到一个文件中，而是将组件分开，放在各自文件中，这样便是为每个组件创建一个模块。
以 React 为例，通常在某个模块中使用其他模块时，是...
2022.01.19
如何处理 git dangling commit 的问题
这是一篇自用快速操作指南，非技术研究。
在执行 git rebase 的时候，突然出现了以下错误。
Auto packing the repository in background for optimum performance.
See...
2021.11.18
使 PWA 更像 Native App 的 6 个技巧
你在开发 PWA 吗？此篇介绍几个通过 JavaScript 和 CSS 就可以使你的 PWA 更接近 Native 应用的小技巧。
1.为 PWA standalone 模式设置空标题。
网页的 Title 在浏览器访问场景下有着重要的...
2021.11.08
使用 CSS `gap` 实现更灵活的元素组布局
你会经常用 margin 或 padding 来处理一组 HTML 元素的布局吗？如果是的话，这篇文章可能会为你打开另一个思路。
我们经常遇到的一个开发场景是，一堆标签等间距排列。
如何控制它们之间的间距呢？可能会想到的一个方案是：
.t...
2021.10.29
使用 :focus-visible 处理 UI 设计和可访问性的关系
在前端开发过程中，经常会遇到的情况之一是，当使用表单控件如 Button，Input 等时，会发现其有一个浏览器设置的默认聚焦（Focus）样式。
不得不说最新的 Firefox 的默认样式还蛮好看的。🤩
什么元素会具有焦点呢？
&...
2021.09.17
'👩👩👧👧'.length === 11 ? Emoji 有多长
事情的起因是这样的，前端给服务端(Golang)一段文本，服务端将文本中的链接进行解析，然后将解析的结果返回给前端。
"test:https://google.com"
{
offset: 5,
len...
2021.07.22
OffsetHeight 与虚拟列表的缝隙问题
名词
元素：指虚拟列表中的单个项目（Item）。
平移: 指 CSS translate。
背景
我在项目中有使用一个虚拟列表。简单概括是通过获取元素的 offsetHeight 然后通过 transform: translate 来实现的...
2021.05.02
CSS 超出文本显示省略号与检测截断方法
遇到了一个需求：一段文本为文件名，当触发超出文本时，显示后缀在最后。即[我是一个名字很长的....pdf] 如何实现呢？
2021.04.25
两个 git clone 小技巧
`-b develop --single-branch` 和 `--depth=1`
2021.03.28
SaaS 系统 Landing Page 设计的两种策略
你是一个“设计师”，在做一个 SaaS 系统，希望通过 Landing Page 来增加用户注册量，设计了一个充满心思与华丽视觉的页面，希望用户能够在看到这样的页面后，能够被其吸引，注册、付费... ...
但是，请注意，不要陷入自嗨，不要...
2021.02.25
软件工程师的一天
软件工程师的一“生”？误。一天 👨💻
2021.01.21
如何用 CSS 打造实力与颜值并存的网页滚动条
滚动条是网页可用性和可访问性的重要元素之一。你可以通过滚动条来知道页面的长度和当前所在位置。滚动条作为一种工具，应具有功能性：可见，适当大小且具有交互性。我们根据网页性质和大概的访问者属性，可以选择是否使用自定义滚动条，来在减少滚动条占用的...
2021.01.13
从分享者找到创作者
分享者与创作者同样重要。
从你认可的人那里去获得更多好的信息。一个人的创作的内容往往是有限的，但是「分享」使得创作发挥更大的价值。如果你没有机会直接找到创作者，找到你认可的正在分享他人内容的人也不错。通过他们可以帮你找到于你来说有价值的内容...
2020.12.30
2020 年回顾
你好，见字如面。对自己过去一年做一个回顾吧。
换工作
今年对所有人来说都是无比艰难的一年。疫情突然而至，打乱了原本平静的生活。而我也在居家办公的时期，有了一次不出家门换工作的体验。云离职，云入职，同样的“办公区”（我在客厅有一个独立的办公区...
2020.12.05
Slash - 一款使你「完成」的 Todo 应用
Get more done than ever before
---- From Slash homepage
我最近使用了 Slash 这款应用。相较于市面上的其他 Todo 应用，它有一些我认为可以思考的设计细节，我将挑其中的几点讨...
2020.12.03
CSS `grid-template-rows: masonry` 轻松实现原生瀑布流布局
🌠 CSS 新属性 grid-template-rows: masonry 轻松实现瀑布流布局，CSS 越来越强大了！（目前在 FirefoxNightly 可用）
💡 小技巧：你可以用 @supports 来写面向未来的 CSS，当...
2020.11.25
Markdown 小技巧
当文章中充满大量的链接使用时，会使源文本不易阅读，链接地址过长时尤为明显。此时可以使用键或引用来设置链接地址
# Bad ❌
使用 [Gridea][https://gridea.dev] 之后，你会惊叹：可以，写博客的那个劲儿又回来了！
...
2020.11.23
Mailbrew - 像 RSS，但是更好
自定义你的阅读源，然后通过邮件或 Web 来进行每日阅读
2020.11.03
教程：Ubuntu 20.04 如何安装 Nginx
本教程适用于 Ubuntu 系统安装 Nginx
安装
sudo apt update
sudo apt install nginx
安装之后，Nginx 服务会自动开启。可以执行下面命令查看服务状态
sudo systemctl s...