2020年前端开发人员资源

灯塔 CI

总计11年

改进后的 GitHub

震惊

现在是2020年，是时候回顾过去一年了，那么让我们先来看看2020年的一些内容吧。

前几天我更新个人网站的时候突然想到，不如写写我最近用的一些技术、日常使用的工具，以及其他一些资源，即使它们并非前端开发领域的“必备”工具。我还附上了一些我觉得有用的资源。

让我们开始吧！

开源和免费资源

Netlify

我用Netlify的免费套餐托管我的网站。他们的服务很棒，而且与 GitHub 和持续集成集成得很好。我不是抠门，只是目前免费套餐就足够了。上个月我的构建时间超了，还付了一小笔费用，所以现在他们已经有了我的信用卡信息……😆

我在这里写了一篇关于如何自动化部署到 Netlify 的文章。👇

使用 Dependabot、Cypress 和 Netlify 更新依赖项

Nick Taylor ・ 2019年8月16日

#测试 #自动化 #Cypress #Netlify

注：Zeit也非常出色。我只是碰巧在使用 Netlify。

灯塔 CI

我还没在项目中实际使用过 Lighthouse CI，目前只在浏览器中使用过 Lighthouse 的审计工具，但 Lighthouse CI 看起来非常棒。将 Lighthouse 审计集成到你的持续集成 (CI) 流程中吧。

灯塔 CI

概述

Lighthouse CI 是一套工具，旨在尽可能轻松地持续运行、保存、检索和断言Lighthouse结果。

快速入门

要开始使用 GitHub Actions 进行常见项目配置，请将以下文件添加到您的 GitHub 仓库。有关更完整的演练以及其他提供商和设置的说明，请参阅“入门指南” 。

.github/workflows/ci.yml

name: CI
on: [push]
jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install && npm install -g @lhci/cli@0.15.x
      - run: npm run build
      - run: lhci autorun

特征

每次发布公关稿时，都会生成一份 Lighthouse 报告。
防止在可访问性、SEO、离线支持和性能最佳实践方面出现倒退。
跟踪绩效指标和 Lighthouse 评分随时间的变化。
设置并维护脚本和图像的性能预算。
运行灯塔……

在 GitHub 上查看

undraw.co

如果你正在寻找高质量的SVG或PNG格式插图，这个网站非常棒。创建undraw.co的Katerina Limpitsouni创作了一些非常精彩的作品。她不在DEV论坛上，但你可以在Twitter上关注她并访问undraw.co。

无障碍工具

我不是无障碍专家（前端的东西太多了！😆），所以像下面这样的工具对我来说非常有用。不过，Lindsay Kopacz ( @lkopacz )在这方面确实很了解。绝对值得关注。

总计11年

这是一个非常棒的无障碍可视化工具包，由Jordan Scales在可汗学院工作期间创建。

总计11年

无障碍可视化工具包

在浏览器中尝试使用 tota11y，或者阅读我们开发 tota11y 的原因。

弃用通知

tota11y 创建于辅助开发无障碍解决方案的工具还很匮乏的时期。此后，不仅涌现出许多优秀的浏览器扩展和自动化工具，例如deque的axe和axe-core，而且浏览器本身也添加了专门的开发工具来支持无障碍功能。因此，我们不再积极开发或维护 tota11y。

经过慎重考虑，我们决定归档该代码库并停止该项目。因此，我们将不再接受拉取请求或提交问题。

感谢大家多年来对本项目的支持，也感谢所有为确保所有人都能访问互联网而辛勤工作的人们。

特别鸣谢

tota11y 的许多功能都直接来自谷歌 Chrome 浏览器的辅助功能开发者工具……

在 GitHub 上查看

有趣的是，我把它转换成了 Chrome/Firefox 扩展程序，感兴趣的朋友可以看看。

一款辅助功能扩展程序即将登陆您的浏览器

Nick Taylor ・ 2019年4月1日

#无障碍 #JavaScript #扩展

斧头

Deque 的 Axe 浏览器扩展程序也很棒，它适用于Chrome和Firefox浏览器，非常适合查找应用程序中的辅助功能问题。

海浪

WebAIM 的WAVE浏览器扩展程序也非常适合查找应用程序中的辅助功能问题。

cssgrid.io

@wesbos的课程很棒。他讲课既透彻又生动有趣。cssgrid.io是一门很棒的 CSS Grid 课程，由 Mozilla 赞助，Wes 也因此能够免费提供这门课程。我强烈推荐。提醒自己以后要再学一遍。

JavaScript 30

Wes 又带来了一门精彩的免费课程。快来学习JavaScript 30，通过有趣的小项目提升你的 JavaScript 技能吧！

每种布局

我去年趁着打折买了Every Layout ，不过网站内容都是免费的。Andy Bell ( @hankchizljaw ) 和 Heydon Pickering 做得非常棒。

一些主要网站

网站太多了，我就简单列举几个吧，因为这篇文章已经要花11分钟才能读完，哈哈。

了解你的 CSS 触发器

我无法将所有 CSS 触发器都牢记于心，因此CSS Triggers是一个很好的资源。

另外，说到 CSS 技巧，这里有Chris Coyier ( @chriscoyier ) 对 CSS 触发器的简短解释。

卡塔时间

我时不时会重温一下JS Katas（以前叫 ES6 Katas）。这是保持 JS 技能熟练度的绝佳方法。

游戏化学习

这是一种很棒的学习方式。虽然有一些付费资源，但也有一些值得一提的免费资源：

任何与斯蒂芬妮·埃克尔斯有关的事情

以下所有资源都可以在Stephanie 的网站上找到。

ModernCSS.dev - 为旧式 CSS 问题提供现代 CSS 解决方案
smolcss.dev - 现代 CSS 布局和组件的极简代码片段
11ty.rocks - 一个很棒的Eleventy资源
stylestage.dev - 一个由社区贡献设计的现代 CSS 展示平台

TypeScript

我承认，对于我目前基本上只是一个博客的个人网站来说，这个可能有点过于复杂了，但是我目前的工作中没有使用TypeScript，所以我决定通过使用它来保持我的 TypeScript 技能。

话虽如此，我曾使用 TypeScript 参与过几个大型项目，可以百分之百肯定地说，它能加快重构速度，提高代码可发现性，并避免一些低级错误。我写过一个关于 TypeScript 的系列教程，感兴趣的朋友可以看看。

考虑使用 TypeScript

Nick Taylor ・ 2017年10月8日

#typescript

如果你一直对 TypeScript 犹豫不决，不妨在 2020 年尝试一下。现在 TypeScript 已经拥有庞大的类型生态系统，许多流行的框架要么提供开箱即用的支持，要么提供非常简单的配置，让你轻松上手 TypeScript：

通过Create React App使用 React 。简而言之；npx create-react-app my-app --template typescript
Angular（开箱即用 TypeScript）
Vue 的一些简单设置
Next.js（开箱即用 TypeScript）
NestJS有一个TypeScript Starter 项目

此外还有 TSDX，这是 Jared Palmer ( @jaredpalmer ) 的一项杰出工作。它是一款优秀的 TypeScript 引导工具，适用于各种类型的项目，并且得到了 TypeScript 团队的官方认可。

尽管最近 TypeScript (x React) 库备受追捧，但搭建一个新的 TypeScript 库仍然并非易事。Rollup 、Jest、Yarn 解析、ESLint，以及让VSCode 与之完美兼容……需要做的事情实在太多（也容易出错）。TSDX 是一款零配置的 CLI 工具，可以帮助您轻松开发、测试和发布现代 TypeScript 包——让您可以专注于开发出色的新库，而无需再浪费一下午的时间在配置上。tsconfig

在 GitHub 上查看

你知道吗？如果你还是不喜欢类型划分，那也没关系。😺

JavaScript 事件循环

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

Jake Archibald 提供的一些 JavaScript 知识小技巧

对于那些想要在 Philip Robert 上述演讲的基础上进一步了解 JavaScript 事件循环的人来说，这绝对是一个值得一看的视频。

Jake 还写了一篇很棒的博客文章，内容是关于任务、微任务、队列和日程安排。

故事书

Storybook 是一个非常棒的组件和设计系统构建工具。它最初是专门为 React 设计的，但现在已经扩展到所有主流框架以及纯 HTML。访问learnstorybook.com了解更多信息。

关键帧

我得承认，我之前在动画方面经验不多，所以在这个领域我经常需要上网搜索资料。不过，有两位动画专家做了一个很棒的播客和YouTube频道，专门讲解如何重制动画。Keyframers是@davidkpiano和@shshaw合作的成果，非常精彩。

我还有很多剧集要看，要从中学习。

VisBug浏览器扩展

VisBug是一款比较新的前端工具，看起来很有意思。我简单试用了一下，但说实话，我还没有深入研究过它。

这是亚当·阿盖尔的杰作。

2020年1月8日更新： Adam在推特上回复我说，可以从VisBug启动tota11y。太棒了！谢谢Adam！

注意：此浏览器扩展程序目前仅适用于 Chrome 浏览器。

浏览器开发者工具

这听起来可能是一个显而易见的工具，但我曾与一些不太使用这类工具的人共事过。

Umar Hansa ( @umaar )非常了解这些工具，我强烈建议你关注他。他目前在 DEV 论坛，但没有活跃账号，不过他个人简介里的链接可以让你找到他在网络上的其他平台。他有一个很棒的开发者技巧邮件列表，我强烈推荐订阅。

在交通中

您的网络请求出了什么问题？看起来好像遇到了流量拥堵。别担心，这些工具可以帮您解决：

Fiddler（跨平台，但目前仅在 Windows 机器上表现良好。）以前我在 Windows 机器上时，Fiddler 是我处理所有网络相关问题的首选工具。它可以重放请求、修改有效载荷，还可以通过它代理来捕获你正在开发的网站/应用程序的流量。
邮差
邮递员



Hoppscotch v1.0 正式上线 👽 - 免费、快速、美观的 API 请求构建器 🎉

Liyas Thomas ・ 2019年11月5日

#githunt #showdev #javascript #生产力

乔什·科莫的精选

Josh Comeau 是一位才华横溢的前端开发人员，目前就职于 Gatsby。他在假期期间发布了一些很棒的开源/免费资源，我建议大家去看看。这是他的推文串。他也非常值得关注。

JavaScript 一月

Emily Freeman ( @editingemily ) 大概在 2017 年创建了这个网站。上面有很多关于 JavaScript 的优秀文章。现在是新的一月，快去javascriptjanuary.com看看吧。

开发者！

DEV 论坛上有很多来自世界各地开发者的精彩前端文章。我会分享一些我喜欢的文章，但强烈建议大家多多浏览。这里有很多很棒的文章。

HTML能做到这一点吗？

Ananya Neogi ・ 2019年6月25日

#网页开发 #HTML

Lydia Hallie ( @lydiahallie ) 关于 JavaScript 的帖子

Michael Chan 的 React 假日系列

25节课学会React — React 2019假日特辑 ⚛️🎄

chantastic ・ 2019年12月2日

#react #初学者

Visual Studio Code

这或许属于显而易见的范畴，但由于它是开源的，所以值得一提。

你可能不信，但从 2015 年开始，它就一直是我的工作必备编辑器。2015 年的时候，我正在为一家电商公司开发产品，前端需要用到 TypeScript。当时，VS Code 是唯一支持 TypeScript 的编辑器。2015 年的时候，VS Code 还没有扩展程序。大约一年半之后，它才开始支持扩展程序。从那以后，扩展程序生态系统就蓬勃发展起来了。

Live Share 扩展包的加入极大地丰富了生态系统。它为结对编程提供了一种绝佳的方式。🍐

如果你感兴趣的话，虽然有点过时了，但这是我的 VS Code 配置。现在我用的是 Sarah Edo 的Night Owl主题和超棒的字体Dank Mono（没错，我是付费购买的，但它的价格远低于 Operator Mono）。