我在学习 Web 前端开发和 Web 服务器配置时遇到的有用的网站和应用程序

Web 开发很难。看似有无数种方法可以实现目标，但由于 Web 开发生态系统飞速发展，其中许多方法已经过时，对开发者不再有用。

这种速度有其优点和缺点，我在学习 Web 开发时发现的一个缺点是有时很难找到最新的学习资源。

以下是我在开始学习 Web 开发（前端和后端）时发现非常有用的一些资源。

我一直没有学习框架，而是专注于学习基础知识。就我个人而言，如果只是学习像 Angular 或 React 这样的框架，却对基础知识没有扎实的理解，就意味着需要花费大量时间进行调试，试图解释框架中到底出了什么问题，这既漫长又令人沮丧。很多时候，这个问题会因为框架默认我已经了解了相关环境的基础知识，并在报告错误信息时忽略某些细节而变得更加严重。

请注意：我与以下任何资源均无关联。

前端基础知识

互联网很难- 该网站提供了一个制作精美的教程，教你如何使用 HTML 和 CSS 构建现代网站。它从对 HTML 或 CSS 一无所知的人的角度出发。如果你正在寻找一个坚实的起点，这里就是了。

Mozilla 开发者网络
这很可能是一般 Web 开发知识的最佳参考，并且已经取代了我的数字图书馆中的 W3 学校。

CSS Diner
在选择水果和蔬菜时练习 CSS 选择器！CSS 选择器对于构建干净、可维护的 CSS 非常重要。

浏览器功能兼容性

CanIUse
我很快就意识到，并非所有浏览器都生而平等。CanIUse 逐一展示了它们之间的差异。示例查询：

CSS网格

网格示例：
虽然我花了大量时间学习 Flexbox，但从响应式设计的角度来看，CSS Grid 同样酷，甚至更容易使用（以我这个新手的观点来看）。这个功能尤其酷。

模板引擎

我并不认为这些框架类似于 Angular 或 React，但它们确实解决了编写纯 HTML 的一些痛点，例如列表项的编写。我对它们目前还没有明确的定义，所以我列出了一些我花了一些时间学习并在小型项目中使用过的框架。

这类工具背后的理念是通过将逻辑组“模板化”（类似数据“卡片”），并允许在运行时将数据插入模板的特定区域，从而帮助组件化 HTML 块。这样，单个逻辑 HTML 分组可以反复使用，而实际标记只需存在一次（同时避免了大型框架也这样做带来的开销）。

还值得注意的是，Express 支持一些模板引擎，尽管这超出了本文的讨论范围。

浏览器使用情况统计

gs.statcounter
提供关于浏览器使用情况、常见屏幕分辨率和设备使用情况的直观、实用数据。如果您正在考虑为更特定的受众构建 Web 应用，这个网站可以帮助您确定首先应该关注的重点。

设计

我不太懂艺术。这里的资源主要帮助我学习了一些网页设计的方法。我学到的一个重要概念是，找一个专门为你设计网站然后你作为网页开发者进行构建的人并没有错。这可能意味着你需要一个预先构建的主题，然后根据需要进行修改，或者聘请一位全职网页设计师。我发现自己把网页开发和网页设计过度地交织在一起，把它们看作一个单一的职业。网页设计是一项全职工作，人们学习它就像程序员学习编程一样刻苦。如果你想要看起来专业的东西，又不想自己尝试学习优秀的设计和网页编程，这些艺术家会把设计做好，从而让你腾出精力专注于构建愿景。话虽如此，了解他们的一些流程和工具将有助于你与他们沟通，这可能是一个很大的好处。

供应

知道如何构建网站前端是一件（非常重要）的事情，但托管对我来说也相当陌生。市面上有很多工具可以做到这一点，其中许多工具会根据你想在服务器上自行管理多少内容而提供或多或少的选项。

以下是一些选项：

Microsoft Azure
我有 .NET 背景，觉得学习在 Azure 上托管网站会更得心应手。我之前在 Azure 上托管过一些非常小的 API，但从未搭建过任何实际的网站。

说实话，Azure 的选项之多让我这个新手感到不知所措。如果你想走这条路线或亚马逊网络服务路线，你会更有选择权，但我发现它的复杂性超出了我在这个学习阶段所能承受的范围。

Heroku
在使用 Heroku 时，我从未需要远程登录机器并运行终端命令来配置站点。他们的 Web UI 足以托管一个基本的站点，并且提供了一些非常棒的工具来配置持续集成以及其他一些很棒的扩展选项，并且还有免费套餐。

Digital Ocean
与 Heroku 相比，Digital Ocean 的配置要求更加技术性，但这并非坏事。事实上，在几乎完全不懂如何搭建 Web 服务器的情况下，我决定在目前为止的几个网站上使用 Digital Ocean，就是因为我想进一步了解它的工作原理。

除了“空”的 VPS（虚拟专用服务器，他们称之为 Droplet）之外，他们还提供一键式应用，这些 VPS 上预装并配置了一系列软件。这些应用非常棒，尤其对我这样的新手来说。这大大降低了服务器启动和运行的开销，让我可以专注于服务器配置的细节（比如在 Nginx 中设置网站）。到目前为止，我已经使用了 NodeJS 和 Ghost 一键式应用，将来可能会尝试 GitLab 一键式应用。

除了出色的基础设施配置外，DigitalOcean 还提供了我在 Web 服务器配置方面遇到的一些最佳教程和文档。例如：

DNSMap
有一件事让我多次感到困扰，那就是 DNS 更改并非即时生效。有几次，我在调整网站配置（在 Nginx 中）时，将域名重新指向不同的域名服务器。这很令人困惑，因为浏览器会显示网站配置错误（尤其是在涉及 SSL 证书的情况下），即使实际上我的更改的 DNS 传播尚未完成。上述工具有很多变体，但它有助于了解这些类型的更改何时“完成”。这些工具并不完美，但我还没有找到其他方法在传播完成时收到通知。

表现

Google 的 PageSpeed Insights
您可能已经听说过 PageSpeed Insights，因为“页面速度”现在已成为 Google 移动搜索排名的考量因素。我发现这个工具在初次测试网站后非常有用，因为它能帮助我发现一些易于学习和实施的问题。它还能区分移动端和桌面端的得分，如果您想根据特定受众群体定制您的网站，这将非常有帮助。此外，如果您正在寻找更深入的工具，可以看看Lighthouse。

Nginx

在我学习配置 Web 服务器 Nginx 的短暂时间里，我发现它相当简单易用。有很多文档和文章讲解如何完成一些非常具体的操作。

一些网站启动并运行后，我开始寻找一些服务来监控它们。我不想自己编写工具或解析日志文件，所以最终选择了 Nginx Amplify。你可以免费将几个 Nginx 实例连接到 Amplify，而且它的监控工具非常棒。免费套餐包含的功能是，当指标超过你配置的阈值时，发送 Slack 消息和电子邮件。多亏了这个工具，我收到了一个机器人每秒向我的一个网站发出数千个请求的通知，而就在机器人开始这样做的几分钟后。快速更新防火墙解决了这个问题。这不仅可以显示监控指标，还会对你的 nginx.conf 文件进行静态分析，以查找常见问题，并显示有关正在运行的 Nginx 版本的 SSL 配置和安全公告的信息。同样，这样的工具对我这样的新手来说非常有用，因为它帮助我了解了这个系统，否则我可能无法掌握。

NginxConfig.io - 此工具可帮助您快速开始编写 nginx 配置文件和服务器块

Web 服务器配置工具

实验室（内容安全策略/CSP 工具包）
在学习安全服务器配置时，我偶然发现了这个 Firefox 插件。它会在记录你使用网站时构建你的内容安全策略。当然，这假设你的网站稳定且能够提供预期的数据。另外需要注意的是，这是一个实验性的插件。

测试服务器的 SSL 实现
。作为一个新手，我希望能找到一些工具来告诉我学习过程中哪些地方出错了。这个网站专注于详细评估你的 SSL 实现，是了解安全 SSL 实现构成要素的良好起点。

图像优化

在我学习的所有前端概念中，我发现这个最具挑战性。直到我投入大量时间学习如何根据客户端参数调整图片的形状或提供各种变体后，我才发现了 Cloudinary。事实上，使用像Size 和 srcset这样的新功能需要了解所有配置参数的工作原理，这本身就是一座不小的挑战。

然而，当我开始理解媒体查询的工作原理sizes并srcset与之协同工作后，我更加喜欢Cloudinary了。它为开发人员提供的即时工作令人难以置信。

之所以列出 TinyPng，是因为了解响应式图像尺寸调整（本身）与基于压缩的图像优化有何不同至关重要。TinyPng（支持多种 PNG 格式）专注于优化现有图像，而不仅仅是调整其大小。虽然 Cloudinary 也提供这项服务，但对于小型网站来说，这可能有些过度了。TinyPng 会在一定限额内免费优化您的图像。我发现他们的 .NET API 非常易于使用，可以上传一个包含图像的文件夹进行处理。

以上就是我在学习 Web 开发过程中遇到的一些网站和工具。希望其中一些能对你有所帮助！

精选图片来自nihon graphy

文章来源：https://dev.to/franndotexe/useful-sites-and-apps-i-ve-come-across-while-stuying-web-frontend-development-and-web-server-configuration-19jb