2022 年前端开发者资源

2025-05-25

2022 年前端开发者资源

我不知道自己会不会每年都继续这样做，但我在 2020 年做过一次，那篇文章引起了一些好感，所以我把它改名为“2020 前端开发者资源”，也就是 2022 前端开发者资源。哎呀，我错过了 2021 年。严格来说，我们现在还在 2021 年，不过请你放开我。我还加了一些厚颜无耻的插件。😎

También puedes leer este artículo en español gracias a Chema Bescos！

这篇文章并非完整的清单，而是我在 2021 年发现的一些引人入胜的东西的清单，它们能让你在 2022 年保持动力，并巩固我之前的清单。你可能会在这里看到一些我 2020 年文章中重复的内容，但它们仍然非常相关。

大多数资源都是免费的，但有些资源需要付费。我还强烈推荐egghead.io订阅。我已经订阅了一段时间了，非常满意。

如果你有工作津贴，一定要好好利用。此外，许多公共图书馆都提供免费的付费资源，例如领英学习 (LinkedIn Learning)。购买某些内容之前，请先咨询一下你当地的图书馆。另外，还要特别感谢公共图书馆。😎

我每天都会用 Preact，也会用 React。市面上还有其他库和框架，但这篇文章里我不会讨论它们。浏览器扩展部分是我唯一会提到框架和库的地方。

这篇文章仍在撰写中，因此预计此列表将在 2022 年全年更新。

JavaScript

无论你是否从库或框架开始学习，作为一名前端开发者，你最终都需要更深入地理解 JavaScript。这里有一些优秀的资源可以帮助你实现这一目标。

  • JavaScript 30 – Wes Bos的经典作品。这些有趣的项目有助于巩固一些 JS 基础知识。
  • JavaScript Katas – 我很久以前就发现了这个资源，但最近几年更新了不少。我甚至还直播了部分 Katas 的练习！

  • 模式.dev

  • Philip Roberts在 JSConf EU 上的演讲“事件循环到底是什么？”对事件循环进行了极好的解释。

发现并重建您的 JavaScript 心理模型。

  • 我不会在这次午餐中深入学习，但我给出了一些关于如何开始调试 JavaScript 的提示。

TypeScript

TypeScript 每年都越来越流行。即使你不是它的粉丝，了解一下也是不错的。

2022 年 7 月更新：我为 TypeScript 学习资源创建了一个新帖子，也请查看一下！

nickytonline

TypeScript 学习资源

尼克·泰勒・22年7月10日

#typescript

CSS

别再拿 CSS 的居中开玩笑了。现在已经是 2020 年代了，居中操作现在相对容易。好好钻研，提升你的 CSS 水平吧。

HTML

如果你长期从事 Web 开发，就必须熟悉语义标记。别再点<div />汤了。

  • MDN一如既往
  • HTMHell – 一个很棒的网站，里面有糟糕的 HTML 示例以及如何修复它们
  • HTML 元素周期表– 经典元素周期表的有趣演绎
  • 这个不仅仅是 HTML，所以我应该创建另一个部分。🙃 访问buildexcellentwebsit.es，了解构建优秀网站的关键基础和原则。

可访问性

可访问性非常重要，老实说，如果您想成为一名脱颖而出的前端开发人员，那么在这里升级是一个不错的举措。

s_aitchison

当我检查 Pull 请求的可访问性时，我会考虑 5 件事

苏珊娜·艾奇逊 ・ 2021年3月30日

#a11y #webdev #javascript

动画

动画是提升用户体验的绝佳方式，但请记住，不要为了添加动画而添加动画。这里有一些优秀人士的作品，值得一看。

Jamstack

浏览器扩展

  • WAVE –“直接在浏览器中评估网页内容的可访问性问题”
  • axe –“测试您的 Web 应用程序以帮助识别和解决常见的可访问性问题”
  • Accessibility Insights for Web – “帮助开发人员查找并修复 Web 应用和网站中的可访问性问题”
  • 如果您正在使用 React：React DevTools（基于 Chromium 的浏览器| Firefox）
  • 如果你正在使用 Preact：Preact DevTools
  • VisBug – 开源网页设计调试工具

测试

测试是一个很大的话题，我在这里只是粗略地介绍一下，但知道测试什么至关重要。最终，当你发布产品时，问问自己：“我对发布这个产品有信心吗？”

  • 我是 Cypress 的忠实粉丝，我们在 Forem（dev.to 的开发平台）也使用它。我们一直在完善文档，我认为如果你深入研究端到端测试，它是一个很好的资源。查看“编写 Cypress 测试”
  • 测试库的工具套件。无论是 React、Svelte 中的组件测试，还是普通的 HTML/CSS/JS 测试，还是端到端测试，测试库都能满足您的需求。

云 IDE/成熟的开发环境

生活在边缘

The Edge 上发生了很多有趣的事情。我在这里没做什么，但希望在 2022 年能更上一层楼。

工具

我们都喜欢工具。工具有很多，但我只简单介绍几个。

  • 故事书 – learnstorybook.com
  • 如果您已安装 Node.js 并需要从项目根目录配置基于 JavaScript 的项目的 gitignore 文件，请运行npx gitgnore node（它也适用于其他语言，或者如果您省略语言，它将为您提供所有受支持的 gitignore 的列表）
  • 包裹
  • 维特
  • 特博雷波
斯威克斯

TurboRepo 为何将成为 2022 年的第一大趋势

swyx ・ 21年12月27日

#devtools #summaries #javascript

图书

这些都是非常值得一读的书。

Twitch 直播

我是 Twitch 的忠实粉丝。我自己也在livecoding.ca和DEV Twitch 直播间直播。这里有一些很棒的前端相关内容，值得你关注。

我肯定漏掉了一些东西，但这只是最初的一些想法。正如我一开始提到的，我会在明年更新。

如果您喜欢这个，请考虑订阅我的时事通讯！

您还可以在其他地方找到我：

🎬 YouTube

🎬 Twitch
🎬 nickyt.live
💻 GitHub
👾我的 Discord
🐦 Twitter/X
🧵 Threads
🎙我的播客
🗞️每周一贴士简报
🌐我的网站

文章来源：https://dev.to/nickytonline/frontend-developer-resources-2022-4cp2
Devto 翻译
PREV
TypeScript 学习资源
NEXT
Typescript Partial<T>，我的一生中你去哪儿了？