我认为理解前端还不如了解整个程序的组织框架，我下面了解的是前端的语言，和一些关于编程的软件（有不对的地方，请第一时间联系我哦）

语言能力

这不是一个详尽的列表-我省略了一些显而易见的列表（例如HTML）以及其他工具选择（例如Terraform的HCL）所隐含的列表。

TypeScript —具有静态类型的JavaScript的超集。几年前，当我第一次尝试这种语言时，我就爱上了它，但是从那时起，它变得越来越好。我将其用于前端和服务器端代码。

SCSS — CSS的超集，具有混合功能和嵌套等很酷的功能。我将其用于营销站点以及带有CSS模块的Web应用程序。

构建系统和框架

React-前端是使用React构建的单页应用程序，这是一个不错的选择-它可以避免干扰，让我直接在该应用程序上工作。可能还有其他框架在引用方面更胜一筹，但是React社区的庞大规模意味着我基本上从未遇到过任何未知领域。

创建React应用程序—用于React的包含电池的构建系统。第一次制作React应用程序时，我亲自将Webpack / Babel / etc的配置拼凑在一起。如果我需要做一些它不支持的事情，Create React App可以隐藏所有内容，并且可以选择“弹出”并获得完整的配置。

Express —一个Node.js服务器端框架。就像使用React一样，我选择它是因为它是迄今为止最受欢迎的。至于我为什么选择Node.js而不是另一种语言的原因，是因为我需要在浏览器和服务器上运行相同的视频渲染代码。

Hugo-编写的快速静态站点生成器，用于构建营销站点。

图书馆

该列表也不是详尽无遗的，但是这里有太多的库无法全部命名，因此我尝试将其保留为最著名或最有趣的库。

沉浸式-一种实现不变性的直观，高性能的方法。它还可以序列化对对象制作的补丁，因此实现撤消功能也相当容易。

downshift —一个React库，用于构建可访问的下拉菜单和多选。易于样式设置，并且您可以免费获得辅助功能。

popper —一个漂亮的小工具提示定位库。

node-canvas —用于在服务器上使用canvas API的节点库。

ffmpeg —瑞士军刀音频和视频库。我使用它在服务器上将音频文件转换为WAV，并将单个帧合并为用户的视频。

基础设施

Namecheap —域名注册商。不要被略微粗略的名字所打断，它们是我使用过的我最喜欢的注册商。

Cloudflare —为网站和API提供DNS，SSL终止和DDOS保护。

Netlify —托管应用程序前端和市场营销站点的静态文件。它真的很容易使用，并且有大量的免费套餐。

DigitalOcean —云基础架构提供商，但具有普通的Linux服务器而不是专有服务。我将它们用于服务器，数据库和对象存储，以托管用户的文件上传和视频。他们的Web UI和API都非常易于使用。我从不想再回到AWS。💰会员链接

邮戳—交易电子邮件提供商。当我超过了他们的免费套餐并且无法获得支持时，我从SendGrid切换了，男孩，我很高兴我做到了。邮戳的交付速度更好，并且仪表板更快，更易于使用。如果您是自举创业公司，他们会给您$ 75的信用额度。

资料库

PostgreSQL —关系数据库，用于持久保存应用程序的数据。我也简要地考虑了MySQL，但是PostgreSQL有很多非常好的功能，例如从修改后的行返回数据。我没有考虑像MongoDB这样的非关系型数据库。

Redis-键/值存储，仅用于任务队列。通常，我会放下这部分内容，只是构建一个整体，但是CPU密集型视频渲染需要自己的服务器。

InfluxDB —用于存储指标的时间序列数据库。请参阅有关监视的部分。

伺服器

Ubuntu —服务器运行的Linux发行版。像堆栈中的其他部分一样，我选择它是因为它是最受欢迎的之一。

nginx — Web服务器和反向代理，在这里用作API服务器的负载平衡器。

systemd —一个守护程序，用于管理服务器上的进程，例如Node.js和nginx。pm2是另一种流行的方法，但是它是特定于Node的。

部署中

我之前已经写过有关如何部署SongRender的文章，因此，如果您感兴趣的话，可以更深入地了解它。如果您只想高级，则涉及这些工具。

Terraform-一种“基础结构即代码”工具，您可以在其中描述所需的基础结构，并与实际存在的基础结构有所不同。有点像React，但是用于配置管理。我喜欢Terraform，并用它来管理它支持的任何基础架构。

Packer —用于构建机器映像的工具。这使得使用Terraform轻松部署服务器。

监控方式

哨兵—错误跟踪。在客户端和服务器端代码中拾取所有未捕获的异常。

Statuscake-运行时间监控，确保网站和API不会出现故障。选择其慷慨的免费套餐。

Papertrail —日志管理。它使用来转发系统日志消息rsyslog，因此我可以console.log在服务器端代码中使用它并将其提取。在某些时候，我可能会尝试切换到支持结构化日志的服务，例如Timber。

Telegraf —一种代理，从服务器收集指标并将其转发到InfluxDB。它使获取CPU /内存/等指标非常容易，而无需为Datadog之类的东西花钱。

Grafana —指标仪表板，显示来自InfluxDB和PostgreSQL的数据。它易于设置和使用，其可视化效果非常好。

分析工具

指示性-应用程序分析。我使用的是Mixpanel，但最终超出了他们的免费等级-这真是可惜，因为我更喜欢它们。有空的时候可以检查一下振幅。

Fathom-营销页面和应用程序的网站访问者统计信息。它比Google Analytics（分析）更简单，小型网站每月只需15美元。💰会员链接

Google搜索控制台-有关Google搜索的分析，其结果中已显示SongRender。

付款方式

条纹-信用卡处理和订阅。我喜欢使用Stripe。他们的API经过深思熟虑，开发人员的工具非常出色，其文档和仪表板美观且易于使用。他们的支持也很有帮助。我与他们的合作经历非常积极，以至于我向Stripe Atlas注册了SongRender LLC，尽管它的成本比手动完成要高一些。

PayPal-其他付款选项。像我对Stripe一样满意，我对PayPal感到不满意：他们的工具乏善可陈，他们的文档不够全面，他们的网站运行缓慢。显然，这也不是应用程序内购买的一种付款方式-例如，如果您是新商人，除非您上载了运送标签，否则他们将保留付款几周，而我显然做不到。不过，人们似乎喜欢将其作为付款方式。

水星-我的商业银行。条纹建议作为Atlas的一部分的三个选项之一。

设计

素描—图库矢量图片＃106855644 我使用此图标设计了SongRender徽标，并使用它来修饰图标。我倾向于在这个和我非常喜欢的Figma之间来回移动，但是使用不将我的所有数据存储在云状云中的本机应用程序仍然很有吸引力。

Nucleo -SVG图标库。几年前，我购买了终生软件包，此后几乎在每个项目中都使用了它。💰会员链接

SVGOMG —清理和压缩SVG的Nifty Web应用。它基本上是SVGO的前端。

squoosh —压缩PNG和JPG的Nitfy Web应用；SVGOMG的光栅图像副本。

发展历程

VS Code-不完全是文本编辑器，不是完全的IDE。可能是我用过的最好的电子应用程序。我出于对Panic的热爱而不断检查Nova，但现在还不止于此。

Postgres.app —适用于macOS的简单免费本地PostgreSQL服务器。

dbmate —与语言和数据库无关的迁移工具。

Gitlab —源代码托管和版本控制。

更漂亮—用于JavaScript，HTML和CSS的代码格式化程序。如果您以前从未使用过代码格式化程序，请立即进行操作。它会改变你的生活。

Jest — JavaScript的测试运行器。与Create React App捆绑在一起。

Yarn — Node的替代软件包管理器。

Make — SongRender不需要编译，因此这只是一个任务运行器。自我记录的Makefile片段非常有用。

调试

Postico —伟大的独立Mac应用程序，用于查询Postgres数据库。

失眠-HTTP客户端。在使用API​​时，有时会用到它，不想担心浏览器。我也将其用作非常粗糙的管理仪表板：该API具有一些管理端点，用于重试失败的渲染等问题，而这些问题我直接从Insomnia命中。Paw是非电子产品的替代品，我有时会花$ 50。

传输-文件传输应用程序。每当我需要探究对象存储时，我都会使用它，因为它比使用DigitalOcean的基于Web的文件浏览器容易得多。

支持

酥脆-应用内支持聊天。这是我使用免费套餐可以找到的最漂亮，最不令人讨厌的产品。我想改用对讲机，但无法证明费用。

组织

Trello —看板，用于跟踪错误和功能。对我来说，杀手级功能是能够向卡中添加清单。在部署功能之前，我会详尽列出要测试的案例。这样我发现了很多错误。清单应该是任何开发人员的质量检查工具中的关键工具。清单工作！💰会员链接

概念-用于结构化笔记记录的存储库。

Fastmail-我使用的电子邮件提供商，而不是Gmail。💰会员链接

营销学

橡子-光栅图像编辑器。当需要调整屏幕截图时，我主要将其用作轻型Photoshop替代品。

iA Writer — Markdown文字处理器。我用它来写博客文章。

退休的

并非每一种关系都是要永远活下去的。这些都是我出于某种原因停止使用的所有工具。

Ansible-设置和部署工具。被Packer和Terraform取代。

让我们加密-免费的SSL证书颁发机构。被Cloudflare取代，后者会自动执行此操作。

运行状况检查-Cron作业监视器。一无所有 我重构了所有的cron工作。这非常有用，如果需要，我会再次注册。

SendGrid —交易和市场营销电子邮件服务。由邮戳代替，邮戳具有更快的Web UI和更好的可传递性。

Mixpanel —产品分析。当我超出了他们的免费等级，而下一层价格太贵时，则由指示性代替。

Gandi-域名注册商。我是一个相当满意的客户，直到他们跟进了我见过的一些最糟糕的客户服务，之后又发生了一次数据丢失事件（这并没有影响我）。由Namecheap取代。