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