小技巧 ​

网页撑满全屏 ​

相比于常规的vh，以下方式能实现类似dvh的效果。页面高度会随着地址栏的出现与消失而动态变化，但同时又能一直保持撑满全屏显示。

在外层元素上添加：

main {
  min-height: 100%;
  display: grid;
}

全面屏iPhone的Safe Area ​

CSS实现边框合并 ​

使用<table>标签时可以通过设置border-collapse: collapse合并表格边框。对于非<table>布局，可以对单元格使用margin-right, margin-bottom实现类似的效果：

.cell {
  border: 1px solid #bfbfbf;
  margin-right: -1px;
  margin-bottom: -1px;
}

获取隐藏元素样式 ​

众所周知，display: none的元素无法获取到它的实际width, height。对display: none的元素使用getComputedStyle时，会显示原始css值。比如

<div class="hidden">
  This is a hidden element.
</div>

<style>
.hidden {
  display: none;
  width: fit-content;
}
</style>

通过window.getComputedStyle(document.getElementsByClassName('hidden')[0])获取到的width是fit-content。如果想要获取实际宽高，可以参考我写的这篇文章 ➡️ 获取隐藏元素（display: none）的样式

使用Cloudflare Workers实现域名代理 ​

同时使用对象与数组解构 ​

美化你的类型 ​

type 
Prettier
<
T
> = {
  [
K
 in keyof 
T
]: 
T
[
K
]
};

通过这个类型使你的类型提示显示完整的{ type: string; name: string; count: number }而不是Foo & Bar，例如：

type 
Prettier
<
T
> = {
  [
K
 in keyof 
T
]: 
T
[
K
]
};

type 
Foo
 = {
  
type
: string;
}

type 
Bar
 = {
  
name
: string;
  
count
: number;
}

type 
FooBar
 = 
Foo
 & 
Bar
;
type 
PrettyFooBar
 = 
Prettier
<
FooBar
>;