2020 年，用这 10 个项目点燃你的前端大师之路

这是我对 我在 DEV 上发表的一篇快速文章 的稍加更新的交叉发布。我在这里发布是因为 我非常喜欢 IndieWeb。

我非常喜欢 Simon Holdorf 的这篇文章。他提出了一些关于如何提升明年前端开发技能的想法。它们如下：

• 使用 React 构建电影搜索应用
• 使用 Vue 构建聊天应用
• 使用 Angular 构建天气应用
• 使用 Svelte 构建待办事项应用

… 以及其他 5 个类似的项目。

这些都是不错的想法，但都**非常**专注于 JavaScript 框架。
我认为，前端开发人员应该是一位浏览器专家。你与使用某种客户端、在某种设备上浏览网页的**用户**打交道。这就是工作内容。

我喜欢 JavaScript 框架，但掌握它们并不能让你成为一名优秀的前端开发人员。 专注于性能和可访问性，从而以用户为中心，这才是让你成为前端大师的关键，超越了构建网站所需的技能。

基于此，这里有一些其他的想法。

• 在 Dribbble 上找到一个你喜欢的作品。用 HTML 和 CSS 以最简洁、最易访问的方式重新构建它。
• 找到可以在你的代码库中抽象出来的组件，并将其抽象出来以便你可以高效地重用它。在抽象过程中考虑可访问性。你能否以一种有利于整个网站的方式提高它的可访问性？你的 SVG 图标组件怎么样——最近看起来如何？
• 尝试使用 静态网站生成器（也许是一个不特别依赖 JavaScript 的生成器，只是为了体验一下）。数据源可以是什么？如果你按时计划运行构建过程，你可以创建什么？
• 安装 DevTools 的 Axe 可访问性插件，并在你控制的重要网站上运行它。根据它的建议进行更改以改进可访问性。
• 启动 Fractal 的副本。了解它如何帮助你将前端构建为组件，即使是在 HTML 和 CSS 层面。
• 使用 HTML/CSS 构建一个美观的表单，它可以为你做一些有用的事情，比如接收自由职业工作的潜在客户。学习 表单验证的全部内容，并看看你仅用 HTML 能做到什么程度，然后是 HTML *加上*一些 CSS，再然后是使用一些原生 JavaScript。通过使用 小型专用服务 使表单工作。
• 阅读一些关于 Serverless 的内容，以及它如何扩展你的前端开发技能。
• 弄清楚如何实现 SVG 图标系统。如今，许多网站都需要一个图标集。 内联 SVG 是一种很棒的简单解决方案，但是如何将其抽象出来，以便轻松地与你的工作流程一起实现呢？它如何与你使用的框架配合使用？
• 尝试实现一个 服务工作线程。阅读 关于它们的书籍。做一些 非常小的事情。查看 围绕它们构建的框架。
• 假设你需要建立一个网站，整个网站的内容只是公司名称和地址，以及营业时间列表。为了实现这一目标，你可以承担的最低工作量和 技术债务 是多少？