创建一个有趣、快速、安全且可持续的网站

在过去的几个月里，我一直在写（有人会说是说教！）有关安全性、性能、可访问性和前端开发的其他方面。

然后我发现，我自己的网站已经有近 10 年没有更新了，并没有真正达到我现在的标准！

在这篇文章中，我将向您展示如何重写我的网站并获得完美的 Lighthouse 分数：

在开始之前，我为网站设定了一些目标：

好玩

我希望这个网站既引人入胜又充满趣味。内容非常简单，所以我想用一种另类的方式呈现。最终我设计了一个圆形导航：

在移动设备上，我展示了圆圈的一部分：

这种趣味性是通过两个工具实现的。
第一个是颜色工具（点击右上角的彩色方形图标即可切换），它包含色相、饱和度和亮度滑块，以及下载您创建的主题的 CSS 的选项：

另一个工具是多边形工具（点击左上角的六边形图标即可切换）。
此工具有两个滑块：一个用于添加多边形的边，另一个用于设置中点：

结合这两个工具，您可以创造出像这样的疯狂结果：

在左下角，有一个调色板图标，可以启用高对比度黑白模式：

最后，在右下角，有一个按钮可以切换过渡和动画的开启/关闭。为什么？我在这里写过。

有效的

如今，许多网站都缺乏有效的标记。这很糟糕。大多数浏览器会尝试“弄清楚”发生了什么，并“自动更正”标记错误。这需要浏览器进行额外的“计算”，并且可能会导致爬虫无法正确地索引页面。我使用Validity来测试标记的有效性。

无障碍

我没有用真正的屏幕阅读器测试过这个网站，只用了 Windows 自带的屏幕阅读器。此外，为了使其更易于访问，我采取了多项措施：

文档大纲

我使用HTML5 Outliner来测试页面的轮廓：

键盘友好

您无需指针设备即可浏览网站。focus-visible当您使用键盘时，我使用自定义样式来呈现轮廓（即使在圆形导航中也是如此）。您可以使用来“打开”文章Enter，使用来关闭它Escape——此外，我还添加了焦点捕获功能，以便您可以在文章内循环切换链接。

该工具使用<input type="range">，可以使用箭头键进行更新。

禁用动画

如前所述，您可以禁用动画和过渡。

视觉缺陷

在Chrome Dev Tools的“渲染”选项卡中，您可以模拟视觉缺陷。

逐一测试所有这些，看看是否有任何一个是不可读的。

这是绿色盲：

我之所以将色相滑块纳入主设计，是为了方便有视觉障碍的用户。希望无论用户有何种视觉障碍，都能选择自己喜欢的调色板。

主导航在模糊视线下仍可读：

放大后，文本也应该可以读懂：

快速地

整个网站的最小化 HTML、CSS 和 JavaScript 的总大小约为 11kb。

我没有使用构建工具，它都是硬编码的。

大多数逻辑都在CSS 自定义属性中。

例如，颜色工具中的所有颜色都是使用calc()CSS 自动生成的，基于色调、饱和度和亮度滑块的值。

我使用Montserrat字体，但将字体文件托管在我自己的服务器上，避免了往返Google Fonts 的麻烦。字体已预加载：

<link rel="preload" href="assets/fonts/montserrat-v15-latin-regular.woff2" crossorigin="anonymous" as="font" type="font/woff2">

安全的

我使用内容安全策略：

<meta http-equiv="Content-Security-Policy" content="
  default-src;
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  font-src 'self';
  connect-src 'self';
  media-src 'self';
  object-src 'none';
  frame-src;
  form-action;
  base-uri;
  manifest-src 'self';
">