一个月前,我在 GitHub 上发布了前端清单。不到两周时间,全球超过 10,000 人为该仓库加了星标。这完全出乎意料,太棒了!

我从 2011 年开始从事前端开发工作,但早在 2000 年 就开始构建网站了。从那时起,就像我们所有人一样,我一直在努力提高代码质量并更快地交付网站。在此过程中,我管理着来自两个不同国家的开发人员。这帮助我制作了一份与这些年来我在网上找到的清单略有不同的清单。
在创建这份清单时,我一直牢记 Atul Gawade 的著作“清单宣言:如何做对事情”。这本书帮助我为工作和生活制定了清单,简化了一些看似过于复杂的事情。
无论您是独自工作还是团队合作,无论是在远程还是现场,我都想分享一些关于使用前端清单以及配套的 网络应用程序 的建议。也许我能说服您将它融入您的开发流程。
#1 确定您的项目和团队需要遵循的规则
每个项目都是不同的。在开始新项目之前,整个团队(即项目经理、设计师、开发人员、质量保证人员等)都需要就可交付成果达成一致。
为了帮助您做出决定,我创建了三个不同的优先级级别:**高**、**中**和**低**。您不一定需要认同这些区别,但它们可能有助于您整理任务。
前端清单应用程序旨在简化创建个性化清单。修改一些 JSON 文件以满足您的喜好,您就可以开始了!
#2 定义在项目开始、进行和结束时需要检查的规则
您不应该只在项目的结束时检查所有这些规则。您和我一样清楚,项目在最后是什么样子!太忙了。前端清单中的大多数项目可以在您开始开发时考虑。您需要决定。在项目开始时向您的团队明确说明何时执行什么操作。
#3 进一步了解每条规则
谁喜欢阅读文档?我们大多数人都不喜欢,但这是必不可少的。如果您想了解规则背后的原因,就无法避免阅读它们。您对每条规则的原因了解得越多,您就会成为越优秀的开发人员。
#4 开始检查!
前端清单应用程序 可以简化您的开发工作。它是一个实时清单,因此,当您完成项目时,您的进度和等级会实时更新。所有内容都保存在localStorage
中,因此您可以随时离开并返回。
该项目是开源的,因此您可以随意 fork 它并按您的意愿使用它。我正在努力确保所有文件都添加了注释。我特别邀请那些对 Pug 感兴趣的人查看一下 views 文件夹。

#5 将自动化测试集成到您的工作流程中
我们都梦想着自动化(还是只有我?)。目前,前端清单只是一个交互式列表,但一些任务可以在您的工作流程中自动化。
查看用于生成项目的 gulpfile。所有任务都是您可以使用 npm、webpack 等使用的包。
#6 在发送给质量保证团队和生产环境之前验证每个页面

如果您热衷于生成干净的代码并关心您的代码质量,那么您应该定期测试您的页面。犯错误和删除一些必要的代码太容易了。或者,您的团队中的其他人可能已经这么做了,但共同承担责任,发现这类问题是您的共同责任。
前端清单可以生成漂亮的报告,您可以将这些报告发送给项目经理或质量保证团队。
#7 最重要的是享受您的工作
有些人可能会看到这么长的清单就感到恶心。查看这样的清单可能会引起焦虑,而且真的不好玩。
但前端清单只是一个帮助您交付更高质量代码的工具。这种代码会影响项目的各个方面:SEO、用户体验、投资回报率,最终影响项目的成功。一个能够在所有这些方面提供帮助的工具实际上可以帮助您减轻焦虑,改善您的健康状况!
结论
前端清单在这么短的时间内获得的成功让我意识到,很多人真的很想找到提高工作效率的方法。但仅仅因为该工具存在,并不意味着它可以直接帮助您。您还需要承诺使用它。
在一个人工智能正在接管许多手动任务的时代,质量是必不可少的。即使自动化接管了我们的大部分任务,也有一些质量水平仍然无法自动化,我们前端开发人员仍然有很多漫长的一天可以享受我们的工作。
我从事 Web 开发工作已经超过 15 年了。我可以自豪地说,所有这些清单都是毫无价值的。现实证明,事情应该在现实中完成。最好的验证器是浏览器,最好的“自动化”测试是人工测试。当然,自动化可以提高质量,但永远无法取代人工。我不相信人工智能,至少在未来 30-50 年内不会。
我认为他们的工具上没有任何自动化功能。我找不到任何方法,它看起来像一个简单的任务管理器。
很棒的清单!我也会为它加星标。
不过,您确定
<nav>
需要role="navigation"
吗?我也一直这样做,但我记得有一次,当我通过 W3C 验证器检查时,它提示在导航元素上它是多余的。导航元素本身已经说明了它的作用是用于导航。我认为<main role="main">
也是一样,但我不确定。如果我没记错的话,这是一个 ARIA 规则,有助于提高可访问性。从技术上讲,它不是 100% 必须的。
是的,我知道……这是一个地标角色,但
role="navigation"
在包含某种导航(而非<nav>
)的元素上是可访问性所必需的。<nav>
在语义上足以满足可访问性需求。你说得对。
<nav>
元素隐式地包含 ARIA 角色。同样的事情也适用于
<main role="main">
和<button role="button">
,其中角色是冗余的。