我認為理解前端還不如了解整個程序的組織框架，我下面了解的是前端的語言，和一些關于編程的軟件（有不對的地方，請第一時間聯(lián)系我哦）

語言能力

這不是一個詳盡的列表-我省略了一些顯而易見的列表（例如HTML）以及其他工具選擇（例如Terraform的HCL）所隱含的列表。

TypeScript?—具有靜態(tài)類型的JavaScript的超集。幾年前，當我第一次嘗試這種語言時，我就愛上了它，但是從那時起，它變得越來越好。我將其用于前端和服務器端代碼。

SCSS?— CSS的超集，具有混合功能和嵌套等很酷的功能。我將其用于營銷站點以及帶有CSS模塊的Web應用程序。

構(gòu)建系統(tǒng)和框架

React-前端是使用React構(gòu)建的單頁應用程序，這是一個不錯的選擇-它可以避免干擾，讓我直接在該應用程序上工作?？赡苓€有其他框架在引用方面更勝一籌，但是React社區(qū)的龐大規(guī)模意味著我基本上從未遇到過任何未知領域。

創(chuàng)建React應用程序—用于React的包含電池的構(gòu)建系統(tǒng)。第一次制作React應用程序時，我親自將Webpack / Babel / etc的配置拼湊在一起。如果我需要做一些它不支持的事情，Create React App可以隱藏所有內(nèi)容，并且可以選擇“彈出”并獲得完整的配置。

Express?—一個Node.js服務器端框架。就像使用React一樣，我選擇它是因為它是迄今為止最受歡迎的。至于我為什么選擇Node.js而不是另一種語言的原因，是因為我需要在瀏覽器和服務器上運行相同的視頻渲染代碼。

Hugo-編寫的快速靜態(tài)站點生成器，用于構(gòu)建營銷站點。

圖書館

該列表也不是詳盡無遺的，但是這里有太多的庫無法全部命名，因此我嘗試將其保留為最著名或最有趣的庫。

沉浸式-一種實現(xiàn)不變性的直觀，高性能的方法。它還可以序列化對對象制作的補丁，因此實現(xiàn)撤消功能也相當容易。

downshift?—一個React庫，用于構(gòu)建可訪問的下拉菜單和多選。易于樣式設置，并且您可以免費獲得輔助功能。

popper?—一個漂亮的小工具提示定位庫。

node-canvas?—用于在服務器上使用canvas API的節(jié)點庫。

ffmpeg?—瑞士軍刀音頻和視頻庫。我使用它在服務器上將音頻文件轉(zhuǎn)換為WAV，并將單個幀合并為用戶的視頻。

基礎設施

Namecheap?—域名注冊商。不要被略微粗略的名字所打斷，它們是我使用過的我最喜歡的注冊商。

Cloudflare?—為網(wǎng)站和API提供DNS，SSL終止和DDOS保護。

Netlify?—托管應用程序前端和市場營銷站點的靜態(tài)文件。它真的很容易使用，并且有大量的免費套餐。

DigitalOcean?—云基礎架構(gòu)提供商，但具有普通的Linux服務器而不是專有服務。我將它們用于服務器，數(shù)據(jù)庫和對象存儲，以托管用戶的文件上傳和視頻。他們的Web UI和API都非常易于使用。我從不想再回到AWS。??會員鏈接

郵戳—交易電子郵件提供商。當我超過了他們的免費套餐并且無法獲得支持時，我從SendGrid切換了，男孩，我很高興我做到了。郵戳的交付速度更好，并且儀表板更快，更易于使用。如果您是自舉創(chuàng)業(yè)公司，他們會給您$ 75的信用額度。

資料庫

PostgreSQL?—關系數(shù)據(jù)庫，用于持久保存應用程序的數(shù)據(jù)。我也簡要地考慮了MySQL，但是PostgreSQL有很多非常好的功能，例如從修改后的行返回數(shù)據(jù)。我沒有考慮像MongoDB這樣的非關系型數(shù)據(jù)庫。

Redis-鍵/值存儲，僅用于任務隊列。通常，我會放下這部分內(nèi)容，只是構(gòu)建一個整體，但是CPU密集型視頻渲染需要自己的服務器。

InfluxDB?—用于存儲指標的時間序列數(shù)據(jù)庫。請參閱有關監(jiān)視的部分。

伺服器

Ubuntu?—服務器運行的Linux發(fā)行版。像堆棧中的其他部分一樣，我選擇它是因為它是最受歡迎的之一。

nginx?— Web服務器和反向代理，在這里用作API服務器的負載平衡器。

systemd?—一個守護程序，用于管理服務器上的進程，例如Node.js和nginx。pm2是另一種流行的方法，但是它是特定于Node的。

部署中

我之前已經(jīng)寫過有關如何部署SongRender的文章，因此，如果您感興趣的話，可以更深入地了解它。如果您只想高級，則涉及這些工具。

Terraform-一種“基礎結(jié)構(gòu)即代碼”工具，您可以在其中描述所需的基礎結(jié)構(gòu)，并與實際存在的基礎結(jié)構(gòu)有所不同。有點像React，但是用于配置管理。我喜歡Terraform，并用它來管理它支持的任何基礎架構(gòu)。

Packer?—用于構(gòu)建機器映像的工具。這使得使用Terraform輕松部署服務器。

監(jiān)控方式

哨兵—錯誤跟蹤。在客戶端和服務器端代碼中拾取所有未捕獲的異常。

Statuscake-運行時間監(jiān)控，確保網(wǎng)站和API不會出現(xiàn)故障。選擇其慷慨的免費套餐。

Papertrail?—日志管理。它使用來轉(zhuǎn)發(fā)系統(tǒng)日志消息rsyslog，因此我可以console.log在服務器端代碼中使用它并將其提取。在某些時候，我可能會嘗試切換到支持結(jié)構(gòu)化日志的服務，例如Timber。

Telegraf?—一種代理，從服務器收集指標并將其轉(zhuǎn)發(fā)到InfluxDB。它使獲取CPU /內(nèi)存/等指標非常容易，而無需為Datadog之類的東西花錢。

Grafana?—指標儀表板，顯示來自InfluxDB和PostgreSQL的數(shù)據(jù)。它易于設置和使用，其可視化效果非常好。

分析工具

指示性-應用程序分析。我使用的是Mixpanel，但最終超出了他們的免費等級-這真是可惜，因為我更喜歡它們。有空的時候可以檢查一下振幅。

Fathom-營銷頁面和應用程序的網(wǎng)站訪問者統(tǒng)計信息。它比Google Analytics（分析）更簡單，小型網(wǎng)站每月只需15美元。??會員鏈接

Google搜索控制臺-有關Google搜索的分析，其結(jié)果中已顯示SongRender。

付款方式

條紋-信用卡處理和訂閱。我喜歡使用Stripe。他們的API經(jīng)過深思熟慮，開發(fā)人員的工具非常出色，其文檔和儀表板美觀且易于使用。他們的支持也很有幫助。我與他們的合作經(jīng)歷非常積極，以至于我向Stripe Atlas注冊了SongRender LLC，盡管它的成本比手動完成要高一些。

PayPal-其他付款選項。像我對Stripe一樣滿意，我對PayPal感到不滿意：他們的工具乏善可陳，他們的文檔不夠全面，他們的網(wǎng)站運行緩慢。顯然，這也不是應用程序內(nèi)購買的一種付款方式-例如，如果您是新商人，除非您上載了運送標簽，否則他們將保留付款幾周，而我顯然做不到。不過，人們似乎喜歡將其作為付款方式。

水星-我的商業(yè)銀行。條紋建議作為Atlas的一部分的三個選項之一。

設計

素描—圖庫矢量圖片＃106855644?我使用此圖標設計了SongRender徽標，并使用它來修飾圖標。我傾向于在這個和我非常喜歡的Figma之間來回移動，但是使用不將我的所有數(shù)據(jù)存儲在云狀云中的本機應用程序仍然很有吸引力。

Nucleo?-SVG圖標庫。幾年前，我購買了終生軟件包，此后幾乎在每個項目中都使用了它。??會員鏈接

SVGOMG?—清理和壓縮SVG的Nifty Web應用。它基本上是SVGO的前端。

squoosh?—壓縮PNG和JPG的Nitfy Web應用；SVGOMG的光柵圖像副本。

發(fā)展歷程

VS Code-不完全是文本編輯器，不是完全的IDE?？赡苁俏矣眠^的最好的電子應用程序。我出于對Panic的熱愛而不斷檢查Nova，但現(xiàn)在還不止于此。

Postgres.app?—適用于macOS的簡單免費本地PostgreSQL服務器。

dbmate?—與語言和數(shù)據(jù)庫無關的遷移工具。

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

更漂亮—用于JavaScript，HTML和CSS的代碼格式化程序。如果您以前從未使用過代碼格式化程序，請立即進行操作。它會改變你的生活。

Jest?— JavaScript的測試運行器。與Create React App捆綁在一起。

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

Make?— SongRender不需要編譯，因此這只是一個任務運行器。自我記錄的Makefile片段非常有用。

調(diào)試

Postico?—偉大的獨立Mac應用程序，用于查詢Postgres數(shù)據(jù)庫。

失眠-HTTP客戶端。在使用API??時，有時會用到它，不想擔心瀏覽器。我也將其用作非常粗糙的管理儀表板：該API具有一些管理端點，用于重試失敗的渲染等問題，而這些問題我直接從Insomnia命中。Paw是非電子產(chǎn)品的替代品，我有時會花$ 50。

傳輸-文件傳輸應用程序。每當我需要探究對象存儲時，我都會使用它，因為它比使用DigitalOcean的基于Web的文件瀏覽器容易得多。

支持

酥脆-應用內(nèi)支持聊天。這是我使用免費套餐可以找到的最漂亮，最不令人討厭的產(chǎn)品。我想改用對講機，但無法證明費用。

組織

Trello?—看板，用于跟蹤錯誤和功能。對我來說，殺手級功能是能夠向卡中添加清單。在部署功能之前，我會詳盡列出要測試的案例。這樣我發(fā)現(xiàn)了很多錯誤。清單應該是任何開發(fā)人員的質(zhì)量檢查工具中的關鍵工具。清單工作！??會員鏈接

概念-用于結(jié)構(gòu)化筆記記錄的存儲庫。

Fastmail-我使用的電子郵件提供商，而不是Gmail。??會員鏈接

營銷學

橡子-光柵圖像編輯器。當需要調(diào)整屏幕截圖時，我主要將其用作輕型Photoshop替代品。

iA Writer?— Markdown文字處理器。我用它來寫博客文章。

退休的

并非每一種關系都是要永遠活下去的。這些都是我出于某種原因停止使用的所有工具。

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

讓我們加密-免費的SSL證書頒發(fā)機構(gòu)。被Cloudflare取代，后者會自動執(zhí)行此操作。

運行狀況檢查-Cron作業(yè)監(jiān)視器。一無所有?我重構(gòu)了所有的cron工作。這非常有用，如果需要，我會再次注冊。

SendGrid?—交易和市場營銷電子郵件服務。由郵戳代替，郵戳具有更快的Web UI和更好的可傳遞性。

Mixpanel?—產(chǎn)品分析。當我超出了他們的免費等級，而下一層價格太貴時，則由指示性代替。

Gandi-域名注冊商。我是一個相當滿意的客戶，直到他們跟進了我見過的一些最糟糕的客戶服務，之后又發(fā)生了一次數(shù)據(jù)丟失事件（這并沒有影響我）。由Namecheap取代。