我認(rèn)為理解前端還不如了解整個(gè)程序的組織框架，我下面了解的是前端的語(yǔ)言，和一些關(guān)于編程的軟件（有不對(duì)的地方，請(qǐng)第一時(shí)間聯(lián)系我哦）

語(yǔ)言能力

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

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

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

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

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

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

Express?—一個(gè)Node.js服務(wù)器端框架。就像使用React一樣，我選擇它是因?yàn)樗瞧駷橹棺钍軞g迎的。至于我為什么選擇Node.js而不是另一種語(yǔ)言的原因，是因?yàn)槲倚枰跒g覽器和服務(wù)器上運(yùn)行相同的視頻渲染代碼。

Hugo-編寫(xiě)的快速靜態(tài)站點(diǎn)生成器，用于構(gòu)建營(yíng)銷站點(diǎn)。

圖書(shū)館

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

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

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

popper?—一個(gè)漂亮的小工具提示定位庫(kù)。

node-canvas?—用于在服務(wù)器上使用canvas API的節(jié)點(diǎn)庫(kù)。

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

基礎(chǔ)設(shè)施

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

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

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

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

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

資料庫(kù)

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

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

InfluxDB?—用于存儲(chǔ)指標(biāo)的時(shí)間序列數(shù)據(jù)庫(kù)。請(qǐng)參閱有關(guān)監(jiān)視的部分。

伺服器

Ubuntu?—服務(wù)器運(yùn)行的Linux發(fā)行版。像堆棧中的其他部分一樣，我選擇它是因?yàn)樗亲钍軞g迎的之一。

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

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

部署中

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

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

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

監(jiān)控方式

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

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

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

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

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

分析工具

指示性-應(yīng)用程序分析。我使用的是Mixpanel，但最終超出了他們的免費(fèi)等級(jí)-這真是可惜，因?yàn)槲腋矚g它們。有空的時(shí)候可以檢查一下振幅。

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

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

付款方式

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

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

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

設(shè)計(jì)

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

Nucleo?-SVG圖標(biāo)庫(kù)。幾年前，我購(gòu)買了終生軟件包，此后幾乎在每個(gè)項(xiàng)目中都使用了它。??會(huì)員鏈接

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

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

發(fā)展歷程

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

Postgres.app?—適用于macOS的簡(jiǎn)單免費(fèi)本地PostgreSQL服務(wù)器。

dbmate?—與語(yǔ)言和數(shù)據(jù)庫(kù)無(wú)關(guān)的遷移工具。

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

更漂亮—用于JavaScript，HTML和CSS的代碼格式化程序。如果您以前從未使用過(guò)代碼格式化程序，請(qǐng)立即進(jìn)行操作。它會(huì)改變你的生活。

Jest?— JavaScript的測(cè)試運(yùn)行器。與Create React App捆綁在一起。

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

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

調(diào)試

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

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

傳輸-文件傳輸應(yīng)用程序。每當(dāng)我需要探究對(duì)象存儲(chǔ)時(shí)，我都會(huì)使用它，因?yàn)樗仁褂肈igitalOcean的基于Web的文件瀏覽器容易得多。

支持

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

組織

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

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

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

營(yíng)銷學(xué)

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

iA Writer?— Markdown文字處理器。我用它來(lái)寫(xiě)博客文章。

退休的

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

Ansible-設(shè)置和部署工具。被Packer和Terraform取代。

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

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

SendGrid?—交易和市場(chǎng)營(yíng)銷電子郵件服務(wù)。由郵戳代替，郵戳具有更快的Web UI和更好的可傳遞性。

Mixpanel?—產(chǎn)品分析。當(dāng)我超出了他們的免費(fèi)等級(jí)，而下一層價(jià)格太貴時(shí)，則由指示性代替。

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