海岛心hey

Hi, 我是海岛心hey,这里是我的个人网站,记录关于产品、设计、前端

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.07.22

OffsetHeight 与虚拟列表的缝隙问题

名词 元素:指虚拟列表中的单个项目(Item)。 平移: 指 CSS translate。 背景 我在项目中有使用一个虚拟列表。简单概括是通过获取元素的 offsetHeight 然后通过 transform: translate 来实现的...
2021.03.28

SaaS 系统 Landing Page 设计的两种策略

你是一个“设计师”,在做一个 SaaS 系统,希望通过 Landing Page 来增加用户注册量,设计了一个充满心思与华丽视觉的页面,希望用户能够在看到这样的页面后,能够被其吸引,注册、付费... ... 但是,请注意,不要陷入自嗨,不要...
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.11.25

Markdown 小技巧

当文章中充满大量的链接使用时,会使源文本不易阅读,链接地址过长时尤为明显。此时可以使用键或引用来设置链接地址 # Bad ❌ 使用 [Gridea][https://gridea.dev] 之后,你会惊叹:可以,写博客的那个劲儿又回来了! ...
2020.11.03

教程:Ubuntu 20.04 如何安装 Nginx

本教程适用于 Ubuntu 系统安装 Nginx 安装 sudo apt update sudo apt install nginx 安装之后,Nginx 服务会自动开启。可以执行下面命令查看服务状态 sudo systemctl s...
Powered by Gridea