简单的新网站

很早的时候，大约在上高中，就向往过有一个自己的网站，只是很简单的就行

直到大学毕业，学习 Web 开发，那时做了个人网站的第一个版本

现在仍是喜欢个人网站简单一些，最近重新实现了网站

不管看起来，还是实现方式上都很简单，页面上几乎没有添加任何不必要的元素与功能

界面与交互

对整个网站，想要实现的是：页面简洁、内容层次清晰、交互反馈明显

页面本身简单，主要通过间距、对齐来布局，以较大面积的空白从视觉上分隔页面内各部分内容

鼠标指向链接时，有一个下划线变化的动画，为啥选这个动画呢？

  • 动画效果简单，但足够明显、容易感知
  • 网站中的链接主要有两类，正文中的链接和导航链接。两类链接交互时动画完全相同（都为链接），只是默认样式不同（正文中链接默认有主题色、下划线，导航链接为了简洁默认没有），这样实现了统一与区别
  • 正文中链接默认带下划线是有想到：下划线是最常见的链接样式，符合认知习惯、方便移动端识别、也可以照顾有颜色识别障碍的来访者（尽管概率极低极低）

在 html 元素上添加了两条简单但有大作用的 CSS 定义：

  1. scroll-behavior 设为 smooth，在链接页内跳转时添加页面平滑滚动的过渡
  2. scroll-padding-top 设置链接跳转后的页面上边距，以避免跳转后目标内容离页面上边缘过近或出现遮挡的情况

点击图片可放大显示，与 Medium 处理图片方式一样，放大后页面向下继续滚动，图片自动还原，通过易用的 medium-zoom 实现

Pure

点击图片放大，页面向下滚动自动还原

文字排版

对成篇文字，想要实现的是：易于阅读、层次分明、界限清晰

主要通过字体颜色、字体大小、上下边距来实现

一、怎样确定的字体颜色？

纯白背景，纯黑字体，清晰是清晰，但在屏幕上密集显示出来容易感觉有些刺眼

文字和背景间的对比柔和些更易于阅读，先是添加了一个浅色背景

多次尝试后，发现当正文字体颜色对比率稍超过 WCAG - 颜色对比 中的增强对比率（AAA） 7:1 时是一个较好的平衡点，可以让正文字体足够清晰，同时不会有刺眼感

二、怎样确定的字体大小？

想要实现的是：不同层级的标题与正文字体大小层级分明

  1. 以浏览器默认字体大小为 1rem，即为正文字体大小
  2. 能接受的最大字体大小为 2rem，即为一级标题（h1）字体大小
  3. 最多会用到 3 级标题，要让三级标题（h3）和正文仍有足够的字体大小层级对比，设为 1.4 rem
  4. 二级标题（h2）取一级标题和三级标题字体大小中间值为 1.7 rem

为了更好地区分二级与三级标题，分别加上了下划线与下虚线

三、怎样确定的内容上下间距？

想要的是实现的：章节、段落等内容间界限清晰

这里根据不同内容间逻辑上的亲疏关系来确定间距，即关系越紧密，相互间的间距应越小

从正文到一级标题，间距由近到远依次为：

  1. 细想下，行与行之间最紧密，所以距离最小，但要大到易于阅读，行高设为 1.7
  2. 段落间距要大于行间距，但不能大到段落间看上去有些松散，在行高基础上加了 1 rem 的下边距
  3. 标题下边距稍大于段落间距
  4. 标题上边距要大得足够到，标题与下面段落作为一整个小节后，与上下小节明显分开
  5. 上一级标题（h2）的上下边距要大于下一级标题（h3）的上下边距

开发细节

使用了最新的 Ruby 2.7 和 Rails 6.0，且不断保持更新，更多技术细节可看 Rails skeleton

使用了功能丰富又好用的 kramdown 来渲染 markdown 内容

有结合 Rouge 添加代码语法高亮

1
2
3

def say_hi
  puts 'hi'
end

访问速度优化

部署使用的 Cloudflare、Heroku、Amazon S3 云存储 都是国外服务，国内访问起来可能会很慢

尝试尽量优化访问速度，检查网络请求，发现这么简单的网站传输资源仍超过 350 KB，使用 webpack-bundle-analyzer 分析资源大小占比，发现占比较大的主要是 Font Awesome 图标， Bootstrap 及关联的 jQuery、Popper.js

但实际上图标只使用了不到 10 个，Bootstrap 也只使用了基础样式，意识到都没必要使用完整的库

于是，对用到的 Font Awesome 图标，下载对应的 SVG 文件，以 inline_svg 显示达到同样的效果；Bootstrap 样式只 import 必要的一些文件，同时去掉没用到的 jQuery、Popper.js

另外其他的库 Clipboard 和 medium-zoom 也只 import 压缩后的 min 版本

这样下来，传输资源减少到 50 kb，网站访问速度提升很多

日志检查

开发过程中，发现即使是再简单的功能，检查服务器运行日志仍是很有必要的，比如查看日志时发现并修复了一些意料外的问题

  • 不必要的 HTTP 请求

    点击目录链接在页面内跳转时会进行全新的 HTTP 请求，搜索了下是 Turbolink 的问题

  • 不必要的数据库查询

    每次访问都会因为认证而进行数据库查询，修改为请求的 Cookie 有相应的字段 :user_credentials 才进行查询

拖延

网站整体很简单，实际开发时间并没有多少，但整个开发周期却有些长

即使是这样一个小项目，也经历了拖延，想了下在以下情况下很容易拖延：

1、没有截止日期

没有明确的上线时间，就没有什么紧迫感
没有设为高优先级，偶尔想起的时候才做一点

对不紧迫的事情，最好仍设定一个截止日期，以更好的完成

2、不知道具体做什么

一开始没有想清楚把网站具体做成什么样

整体布局、页面细节，经常是一边做一边尝试、慢慢调整

遇到不知道怎么做才好时就停下来，一停就好长时间

做之前还是要大致规划好，想清楚，再开始做才更有效率

小结

尽管网站简单，整个做下来还是学到了一些新东西

在做的过程中，会发现知识盲区，会遇到意外问题，这些在真正做之前是很难想到的

以此为契机的学习，更有针对性，效果更好

不做什么也不会发生，做着做着就超乎想像