停滞的（网络）开发 - 第一部分

停滞不前的Web开发：第一部分

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

阳光、大海和沙滩：这就是我今年的生日。几个月的积蓄让我一路来到了马略卡岛，在那里我第一次品尝了鱿鱼，还畅饮了我最爱的新饮品：普罗塞克桑格利亚（配方见下文）。真是太幸福了。

然而，此刻我正坐在西米德兰兹郡中心一座阴雨绵绵的小城里。毫不夸张地说，这真是一次截然不同的体验。正是在从曼彻斯特机场返回的火车上，我萌生了这个新系列的想法。关注我推特的朋友们应该已经知道它的内容了：

我写这个系列的初衷很简单，就是想表达友善和建设性的意见。这不会成为一个贬低其他开发者或他们作品的平台。相反，我希望它能成为一个展示真实代码示例并说明“我喜欢这个，但我会用不同的方式实现——以下是我的改进方法”的平台。

考虑到这一点，本系列文章的合乎逻辑的第一人选就是：我自己。

开始这个过程最公平的方式就是证明我完全有能力承受我将要“付出”的一切，并且享受我这个最可笑的网站。

所以，请坐好放松，准备欣赏一些老式的、令人尴尬的网页设计吧。由本人友情提供。

停滞不前的Web开发：第一部分

我的第一个网站

场景很简单：创建一个关于我自己的网站。可以算是我的第一个作品集。当时我在“实际工作中”对HTML最深入的运用，也就是修改一下我的Tumblr博客主题。

结果如下：

现在，我有很多方法可以把这个网站批得体无完肤（而且在随后的几年里我也确实这么做了）。但是，正如我承诺的那样，我会保持友善和建设性的态度，即使是对以前的自己也是如此——我必须承认，在没有任何技术知识的情况下，我竟然能把这么个东西拼凑起来，这确实有点了不起。

首先我想说的是，幕后有很多事情正在发生，我对此感到高兴。

所有图片都带有alt标签，标签中包含易于理解且有用的图片描述。

<img src="images/2004-square.jpg" width = "170" height = "170" alt = "a picture of Katie Adams as a young child, wearing aviator glasses and a pearl necklace">

标签不仅可以alt保证网站的可访问性，还可以提高搜索引擎优化 (SEO) 的效率。

简单介绍一下背景，这张照片是在小学集会上拍的，当时我扮演气象员。我妈妈尽力把我打扮成这样。我想，当时在场的家长和老师们一定觉得我这身打扮既可爱又讨喜。然而现在，如果我再这样打扮，他们就觉得我“过时了”，也“不用再参加学校集会了”。

回到正题！我的所有图片都会根据浏览设备的屏幕尺寸自动调整大小。为了适应不同的屏幕，我还提供了不同质量的图片版本。后者是通过 ` picture<img>` 标签和 `<img> source` 标签结合 `<image> srcset` 属性实现的。

<picture>
<source srcset = "images/2004.jpg" media="(min-width: 990px)">
<source srcset = "images/2004-crop.jpg" media="(min-width: 768px)">
<img src="images/2004-square.jpg"  width = "170" height = "170" 
alt = "a picture of Katie Adams as a young child, wearing aviator glasses and a pearl necklace">
</picture>

每张图片都经过压缩。这可以加快网页在手机和其他小型设备上的加载速度。

你可知道？

如果网站加载时间超过 10-20 秒，普通用户就会离开。更可怕的是，对于40% 的用户来说，前3 秒至关重要，如果网站加载时间再长一些，他们就会离开。

网站上的所有图标也都是SVG格式（没错，包括那个丑陋的灯泡logo）。此外，顶部导航栏中选中的选项会用阴影效果突出显示。或许这种突出显示方式不够美观，但不可否认的是，用户显然已经知道自己位于“首页”。

作为折衷方案，我没有在网站中使用 Modernizr（尽管项目简报中建议这样做）。坦白说，是因为我当时不了解它的工作原理，而且也没有时间去学习。不过，我收到的反馈指出，我用 JavaScript 也实现了类似的效果。

我在 HTML 文档中插入了一个p标签，表明 JavaScript 已禁用。我的第一行 JavaScript 代码就从 DOM 中移除了这个标签。学习新工具/功能时，请记住：你可能比自己想象的更了解它。

现在来说说不太愉快的事情。哎呀，我该从何说起呢？

配色方案还有很大的改进空间。理论上来说，它效果不错——例如，深绿色背景上的白色文字清晰易读——但任何优秀的设计师都会认同，在兼顾易用性和美观性方面，细节处理得不够到位。

如果我要更新网站，使其更美观，最简单的方法就是在 CSS 文件中声明变量。变量会存储你赋予它们的任何值；在本例中，它们将存储我们配色方案的十六进制代码，这样将来对整个网站的任何修改都可以轻松地应用。

在像这样的简单项目中，可以在 CSS 文件的顶部声明变量，这样更改就可以向下传递。

:root {
  --mainColour: #76BC46;
  --accentColour: #C14868;
}

.nav {
  background-color: var(--mainColour);
}

不过，如果你使用的是其他框架，务必找到最适合项目的方法。例如，像 SASS 和 SCSS 这样的 CSS 预处理器或许值得考虑。我最近在一个 VueJS 项目中使用了 SCSS；这涉及到创建一个 variables.scss 文件，并在其中声明全局值，例如字体系列值和配色方案的十六进制代码。这样，以后如果需要更新这些值，我只需要修改一处代码即可！

建议：保持变量命名的一致性，以维护代码的简洁性。不要在项目进行到一半时突然从驼峰命名法切换到连字符命名法！你会感谢自己当初的决定。

网页顶部的导航栏也是固定的，这意味着当用户向下滚动页面时，它仍然会保持在页面顶部。关于如何最好地实现这种效果，一直存在很多争论。我最终决定在position:fixed导航栏上使用 `<div>` 标签，将页面内容划分到一个 `<div>` 标签内div，然后降低 `<div>` 标签的高度，将其推到导航栏下方，并更改其margin-top值。

虽然这不是实现此效果的最差方法，但有一种方法可以减少渲染的代码量。

#navBar
{
  position: sticky;
}

现在，使用position:stickyCSS 非常容易，就像我之前没用过的那样。然而，它目前还没有得到广泛的支持。至少，不如其他方法那么普及position:fixed。至于最佳实践，就留给比我聪明得多的人来讨论吧。

关于这篇文章，我还有很多可以深入探讨的内容。多亏能和开发者本人交流，写作过程才变得轻松许多（虽然这也让我在图书馆里引来了一些异样的目光）。以后的文章会尽量精简，变成一个个易于理解的知识点。

如果你能提出与我给出的建议不同的替代方案，或者想参与到这场个人点评中来，请给我一些反馈！这只会让我变得更好。

最后，正如我承诺的那样：

普罗塞克桑格利亚酒配料

• 普罗塞克
• 橙汁
• 芬达
• 新鲜水果
• 冰

别问我比例问题。我至今还没弄明白，恐怕永远也弄不明白。