2022年最佳Web開發(fā)工具大合集
時(shí)間：2023-09-14 01:24:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-14 01:24:02 來源：網(wǎng)站運(yùn)營
2022年最佳Web開發(fā)工具大合集：打開TextEdit或記事本并鍵入“<HTML>”來啟動(dòng)一個(gè)新項(xiàng)目是一件既浪漫又令人興奮的事情。這就是我們中的許多人開始癡迷于網(wǎng)絡(luò)編碼的原因。在2022年，Web 開發(fā)工具不僅可以記錄我們的文本，還可以幫助我們創(chuàng)建項(xiàng)目并增強(qiáng)整個(gè)過程。除此之外，還有更多元素需要考慮，而不僅僅是HTML和CSS 。
例如，規(guī)劃階段至關(guān)重要。您需要考慮線框圖、設(shè)計(jì)選擇和協(xié)作工作流程。然后是選擇理想的JavaScript框架，是否使用集成開發(fā)環(huán)境 (IDE)等等。
在這篇文章中，我們將介紹2022年您將考慮使用的59種Web開發(fā)工具。但在我們開始討論之前，讓我們先談?wù)勎覀冋J(rèn)為Web開發(fā)工具是什么。
- 我們對Web開發(fā)工具的看法
- Web開發(fā)工具如何簡化您的工作流程
- 如何為您的項(xiàng)目選擇合適的開發(fā)堆棧
- 2022年使用的59個(gè)很棒的Web開發(fā)工具
我們對Web開發(fā)工具的看法
從表面上看，對Web開發(fā)工具進(jìn)行分類似乎很簡單。然而，即使?jié)撊霚\水區(qū)，也會出現(xiàn)一些模糊界限的考慮。
例如，考慮視頻流服務(wù)是否算作開發(fā)工具。在泡沫中，可能不會。但是，如果您使用它來記錄特定設(shè)計(jì)應(yīng)用程序的屏幕，它會突然轉(zhuǎn)變?yōu)楠?dú)特的協(xié)作工具。
在我們看來，Web開發(fā)工具可以幫助您以專注的方式實(shí)現(xiàn)項(xiàng)目目標(biāo)。雖然這不包括單獨(dú)的編程語言，但
有 子集、超集和框架（例如TypeScript） 跨越了界限。如果你想賺大錢，密切關(guān)注這些方面是至關(guān)重要的。
再舉一個(gè)例子，考慮Git。您可能會爭辯說，這個(gè)版本控制系統(tǒng) (VCS) 涵蓋了很多領(lǐng)域。有一種特定的語言用于運(yùn)行命令，核心功能在Web開發(fā)方面提供了很多幫助。但是，您也可以將其用作學(xué)習(xí)工具，特別是通過搜索問題跟蹤日志和提交。
總體而言，Web開發(fā)工具幾乎可以是使您的項(xiàng)目高效運(yùn)行的任何工具。您會在工具列表中注意到這種多樣性。
Web開發(fā)工具如何簡化您的工作流程
我們將在接下來的幾個(gè)詞之前給你一個(gè)觸發(fā)警告：“壓縮時(shí)間”。
是的，這個(gè)可怕的短語尖叫著需要節(jié)省時(shí)間的Web開發(fā)工具來拯救世界。統(tǒng)計(jì)數(shù)據(jù)顯示，越來越多的項(xiàng)目將crunch作為標(biāo)準(zhǔn)，許多開發(fā)行業(yè)至今仍在使用它。
無論您的公司是否使用或需要加班和加班，Web開發(fā)工具仍然可以提供幫助。這些工具可以完成繁重的工作并使日常工作自動(dòng)化，這些工作會消耗您的一天。因此，它們可以有機(jī)地提高您的生產(chǎn)力。
但是，如果您在Scrum等敏捷項(xiàng)目框架下運(yùn)行，它們也可以提供獎(jiǎng)勵(lì)。例如，考慮JSFiddle之類的工具如何 幫助您在一個(gè)sprint結(jié)束時(shí)與其他團(tuán)隊(duì)共享代碼片段，為下一個(gè)sprint做好準(zhǔn)備。
更重要的是，雖然每天的站立會議不會有任何進(jìn)展，但Discord服務(wù)器或Slack頻道可以提供更好的方式來集中和調(diào)整即將到來的一組任務(wù)，從而擺脫當(dāng)前sprint目標(biāo)的壓力。
總體而言，Web開發(fā)工具既關(guān)乎執(zhí)行，也關(guān)乎計(jì)劃。
如何為您的項(xiàng)目選擇合適的開發(fā)堆棧
我們很可能會向皈依者宣講，但一款出色的Web開發(fā)工具在玫瑰金M1驅(qū)動(dòng)的MacBook中是物有所值的。因此，為您的特定項(xiàng)目獲得正確的工具組合對于為工作奠定堅(jiān)實(shí)的基礎(chǔ)至關(guān)重要。
如果這是您以前沒有考慮過的事情，那么初始計(jì)劃階段將證明是無價(jià)的?；ㄒ恍r(shí)間來確定您將使用的工具確實(shí)會延遲項(xiàng)目的編碼階段。但是，您稍后會得到這個(gè)時(shí)間，因?yàn)榕c軟件相關(guān)的潛在麻煩會更少。您還將看到更一致的輸出級別（假設(shè)每個(gè)人都在同一頁面上）。
選擇開發(fā)堆棧的注意事項(xiàng)
為項(xiàng)目選擇正確的堆棧歸結(jié)為以下幾點(diǎn)：
- 復(fù)雜性：考慮您的可交付成果需要有多復(fù)雜，因?yàn)檫@將決定堆棧的復(fù)雜性。
- 可擴(kuò)展性：如果您的項(xiàng)目是針對本地企業(yè)的，那么這將需要針對全球企業(yè)的不同解決方案。因此，您將需要一個(gè)更具可擴(kuò)展性的堆棧來實(shí)現(xiàn)您的目標(biāo)。
- 安全性：幾乎不用說，無論您選擇什么都不應(yīng)該危及用戶和站點(diǎn)的安全性。
- 成本：當(dāng)然，沒有人喜歡超支，如果預(yù)算緊張，這將比空白支票簿更重要。
您可以將技術(shù)分為兩個(gè)領(lǐng)域：
- 服務(wù)器端：在這里，您需要查看您使用的后端技術(shù)。例如，您需要查看您選擇的托管和Web服務(wù)器、鍵值和SQL存儲、您將使用的任何應(yīng)用程序和自動(dòng)化框架，當(dāng)然還有編程語言。
- 客戶端：可以說您的前端工具選擇會更加直接，尤其是在您使用的語言方面。雖然HTML、CSS和JavaScript將成為特色，但您對JavaScript框架（和自動(dòng)化框架）的選擇需要一些考慮。
當(dāng)談到一些現(xiàn)實(shí)世界的開發(fā)堆棧時(shí)，您會注意到許多大型網(wǎng)站使用JavaScript和React.js的某種組合，以及Nginx。您還將在開發(fā)堆棧中看到Memcached、Redis和Ruby on Rails。
2022年使用的59個(gè)很棒的Web開發(fā)工具
事不宜遲，讓我們看看我們推薦在2022年使用的Web開發(fā)工具列表。我們已將它們分類，但除此之外，這些工具沒有特定的順序。如果您趕時(shí)間，請隨時(shí)跳到下面列出的特定部分。
- 本地開發(fā)環(huán)境
- 文本和代碼編輯器
- 網(wǎng)頁設(shè)計(jì)和原型制作工具
- Git客戶端
- 瀏覽器開發(fā)者工具
- 前端框架
- Web應(yīng)用程序框架
- TypeScript
- GraphQL
- 包管理器
- API和測試工具
- 協(xié)作工具
- 任務(wù)運(yùn)行
- 容器化工具
- 圖像優(yōu)化工具
- 網(wǎng)站測試工具
- 堆棧溢出和搜索引擎
- Web開發(fā)參考
本地開發(fā)環(huán)境
本地開發(fā)環(huán)境是任何開發(fā)堆棧的重要組成部分。但是，它對于Web開發(fā)尤其重要。以下是一些最著名的本地開發(fā)工具。
1. MAMP考慮到更快的沙盒工具的到來，您可能會認(rèn)為用于創(chuàng)建和部署網(wǎng)頁的經(jīng)典工具已經(jīng)過時(shí)并被埋沒了。但是，傳統(tǒng)的Web服務(wù)堆棧，例如LAMP、MAMP和XAMPP，仍然很強(qiáng)大。
通常，它們將操作系統(tǒng) (OS)（Linux、macOS或Windows）與Apache網(wǎng)絡(luò)服務(wù)器、MySQL數(shù)據(jù)庫以及Python、PHP和Perl編程語言結(jié)合到一個(gè)堆棧中。因此，像這樣的Web服務(wù)堆棧仍將在2022年使用。
MAMP是該工具的macOS特定版本。這種方法讓您安裝一個(gè)堆棧并進(jìn)行設(shè)計(jì)和部署。雖然這個(gè)過程可能比更現(xiàn)代的設(shè)置更冗長，但在引擎蓋下仍然有類似水平的靈活性——或者至少，潛力是存在的。
與其他本地開發(fā)環(huán)境工具一樣，MAMP是完全免費(fèi)的。但是，還有一個(gè)適用于Windows和Mac的高級版本的MAMP，它增強(qiáng)了功能并提供了一個(gè)全面、強(qiáng)大的Web開發(fā)工具。
MAMP Pro儀表板由于靈活性和價(jià)格，經(jīng)典的 Web 服務(wù)堆棧仍然在許多開發(fā)人員計(jì)算機(jī)上。命令行愛好者自然會被此解決方案所吸引，尤其是如果您喜歡使用Homebrew、Flatpak或Ninite等包管理器。
當(dāng)然，Apache開發(fā)人員也會使用這些堆棧，MySQL和Python或PHP開發(fā)人員也是如此。通過擴(kuò)展，WordPress開發(fā)人員在這里也會有賓至如歸的感覺。
2. XAMPPXAMPP應(yīng)用程序XAMPP是另一個(gè)深受PHP開發(fā)人員喜愛的Web服務(wù)堆棧，包括那些創(chuàng)建WordPress產(chǎn)品的開發(fā)人員。名稱中的“X”代表該工具的跨平臺特性。它為Windows、macOS和Linux機(jī)器提供安裝程序：
XAMPP下載頁面雖然過去各種Web服務(wù)堆棧之間存在差異，但不斷的更新和改進(jìn)已經(jīng)使該領(lǐng)域趨于平衡。盡管如此，XAMPP還是有一些獨(dú)特的技巧。
例如，MySQL不再是默認(rèn)的關(guān)系數(shù)據(jù)庫管理系統(tǒng) (RDMS)。相反，XAMPP使用MariaDB?？紤]到甲骨文收購后轉(zhuǎn)向其他解決方案，它可能更準(zhǔn)確地表示生產(chǎn)服務(wù)器。
此外，XAMPP包中還有一個(gè)Web應(yīng)用安裝程序。Bitnami類似于Softaculous等解決方案，但Bitnami是特定于XAMPP的：
Bitnami主頁雖然有許多可用的應(yīng)用程序，但您可能對WordPress安裝程序最感興趣。盡管如此，仍有許多附加組件可供選擇，使XAMPP成為本地開發(fā)的靈活解決方案。
文本和代碼編輯器
大多數(shù)開發(fā)人員喜歡爭論應(yīng)該使用哪個(gè)代碼編輯器。好吧，我們是夸張的，但是關(guān)于這個(gè)主題
有 很多意見，每個(gè)編輯都有狂熱的粉絲群。
但是，如果調(diào)查結(jié)果正確，您可能正在使用Sublime Text、Visual Studio Code (VSCode)或IntelliJ IDEA。這是有道理的，因?yàn)檫@三個(gè)工具從簡單的文本編輯擴(kuò)展到成熟的集成開發(fā)環(huán)境 (IDE)。但是，還有其他值得一提的。讓我們來看看其中的幾個(gè)。
3.Visual Studio代碼自2015年推出以來，Visual Studio Code的使用在各種開發(fā)桌面中呈爆炸式增長。
Visual Studio代碼編輯器它是由Microsoft開發(fā)的開源代碼編輯器，提供的足夠多的內(nèi)容可以被視為IDE。毫無疑問，它提供了足夠的功能來占領(lǐng)超過一半的市場——55%的Web 開發(fā)人員每天都使用Visual Studio Code。
在其默認(rèn)設(shè)置中，Visual Studio Code首先是一個(gè)文本編輯器。然而，當(dāng)與它的擴(kuò)展庫結(jié)合使用時(shí)，它變得模塊化和靈活，足以滿足您的任何開發(fā)需求：
Visual Studio Code擴(kuò)展庫這意味著您可以為您選擇的語言安裝linter和fixer（是的，ESLint和PHP CS Fixer都在那里），以及Docker和Vagrant擴(kuò)展等等。
說到語言，Visual Studio Code開箱即用地支持JavaScript、Node.js和TypeScript。但是，擴(kuò)展生態(tài)系統(tǒng)非常豐富，您將能夠找到支持您正在使用的語言的東西。
更重要的是，您還會發(fā)現(xiàn)與其他Microsoft產(chǎn)品的一流集成，尤其是GitHub：
Visual Studio Code具有與GitHub的專用VCS集成Visual Studio是完全免費(fèi)的，并且鑒于功能集，它是許多人的理想選擇。我們認(rèn)為VSCode是介于IDEA和Sublime Text之間的絕佳中間地帶。說到這里，我們接下來看看后者。
4.Sublime TextSublime Text應(yīng)用程序Sublime Text是文本編輯器領(lǐng)域的中流砥柱。它比大多數(shù)其他解決方案更精簡，盡管它的外觀掩蓋了引擎蓋下的力量。
例如，您會在其他競爭對手中看到很多Sublime Text提供的東西。命令面板是您將在許多解決方案中看到的東西，因?yàn)樗褂闷饋砗芎唵巍?br>
Sublime Text的命令面板此外，還有強(qiáng)大的編輯鍵盤快捷鍵，例如進(jìn)行多選以一次編輯多列。此外，
Goto Anything功能提供了類似于Vim的鍵盤快捷鍵組合來遍歷您的文件：
Sublime Text可以結(jié)合擊鍵來幫助您導(dǎo)航Sublime Text是一款高級工具，試用期非常寬松。它可以被認(rèn)為是免費(fèi)的，但要回饋開發(fā)人員，您應(yīng)該購買許可證以延長使用時(shí)間。
在我們看來，對于許多小型或業(yè)余編碼人員來說，Sublime Text提供了出色的用戶體驗(yàn) (UX)，提供了最基本的功能。它以其令人愉悅的視覺效果、簡潔的布局和可擴(kuò)展性繼續(xù)受到許多開發(fā)人員的青睞。
5. Atom在某一時(shí)刻，Atom在開發(fā)人員中得到了廣泛的使用。然而，自從Visual Studio Code出現(xiàn)以來，它的采用率就降低了。很遺憾，因?yàn)樗且粋€(gè)很棒的代碼編輯器，適用于許多不同的應(yīng)用程序。
Atom應(yīng)用程序這是一個(gè)GitHub開發(fā)的應(yīng)用程序，這或許可以解釋為什么它在微軟被推到了低級。但是，它會定期更新，可以視為Visual Studio Code的替代版本。
文本編輯是功能性的，就像它的大兄弟一樣，它具有內(nèi)置的GitHub集成。還有許多稱為“包”的附加組件：
Atom的包安裝程序有很多可用于幫助定制Atom以適應(yīng)您的工作流程和項(xiàng)目。Atom包含多個(gè)主題可供選擇，其中一些主題（例如One Dark）非常受歡迎，以至于它們也進(jìn)入了其他編輯器：
Atom的One Dark主題Atom是一個(gè)值得一試的功能代碼編輯器。然而，由于Atom是基于Electron構(gòu)建的（不是雙關(guān)語），一些用戶抱怨大文件和項(xiàng)目運(yùn)行緩慢。因此，我們建議它適用于較小的項(xiàng)目和快速腳本（尤其是內(nèi)置終端包），但它可能不適合復(fù)雜的工作。
6.Notepad++Notepad++ 主頁值得一提的是，Notepad++可能不會取代您已經(jīng)使用的任何“大男孩”代碼編輯器，例如IntelliJ IDEA或Visual Studio Code。但是，它會在后臺為您提供更強(qiáng)大的簡單腳本和一般文本編輯應(yīng)用程序。
根據(jù)您的項(xiàng)目，它可能會誘使您切換。盡管它很簡單，但Notepad++被廣泛用于各種項(xiàng)目。
它是一個(gè)僅限Windows的代碼編輯器，它解釋了其名稱中的“加號”元素。當(dāng)然，記事本是在Windows安裝中默認(rèn)找到的嚴(yán)肅文本編輯器。Notepad++看起來像它的兄弟，但它還包括特定于開發(fā)的功能，例如：
- 選項(xiàng)卡式和拆分窗口
- 支持近80種編程語言
- 自動(dòng)完成功能
- 函數(shù)列表，它提供了一種查看文件中使用的所有函數(shù)的絕佳方式
更重要的是，Notepad++在項(xiàng)目管理方面非常靈活。它支持三種不同的方法：會話、工作區(qū)和項(xiàng)目。一旦您開始深入研究Notepad++，您會發(fā)現(xiàn)您可以將它用于比單頁腳本更廣泛的項(xiàng)目。
我們認(rèn)為Notepad++將適合需要強(qiáng)大功能的開發(fā)人員，這些功能也是可定制的。在使用中，它具有開源Vim氛圍，這將比其他項(xiàng)目更適合某些類型的項(xiàng)目。
7. JetBrains套件在開發(fā)IDE方面，JetBrains解決方案套件將位于（或非常接近）您列表的首位。商業(yè)模式很聰明，因?yàn)楸M管JetBrains提供了許多編輯器，但它們實(shí)際上都是其字幕編輯器IntelliJ IDEA的“子集” 。
IntelliJ IDEA是領(lǐng)先的Java IDEIDEA自稱是Java IDE。它幾乎支持其范圍內(nèi)其他IDE工具的所有功能。因此，它也支持許多編程語言。
例如，PyCharm從IDEA中提取了大部分Python功能，并將其打包為自己的工具。您還會發(fā)現(xiàn)phpStorm和WebStorm做同樣的事情。
PyCharm是一個(gè)在語言領(lǐng)域很流行的特定于Python的IDE使用IDEA輕而易舉 — JetBrains在讓您編碼而不是涉足配置和設(shè)置方面做得很好。這可能會讓人感到意外，但使用Vim等命令行編輯器和使用IDEA之間的界限通常很窄。
兩種工具都對工作流程和效率有類似的關(guān)注，盡管如果您也喜歡以這種方式工作，IDEA還允許您導(dǎo)入Vim鍵盤綁定。
IDEA擴(kuò)展讓你使用Vim鍵盤綁定讓你感覺自己像個(gè)巫師如果您作為大型項(xiàng)目或公司的一部分工作，并且有軟件交易，我們假設(shè)您可能會使用IntelliJ IDEA?？赡苁枪蚕眄?xiàng)目或在一致的環(huán)境中工作。許多WordPress開發(fā)人員正在使用JetBrains產(chǎn)品，因?yàn)樗鼈冊诠芾眄?xiàng)目方面非常強(qiáng)大。
價(jià)格也是一個(gè)因素，IntelliJ建立在訂閱模式之上，每年通常會達(dá)到三到四位數(shù)。
IntelliJ IDEA定價(jià)即便如此，JetBrains產(chǎn)品也
有 一些“社區(qū)”版本。但是，它們是父軟件的精簡版；本質(zhì)上，它們是去掉了專有元素的開源解決方案。
更重要的是，JetBrains為開源項(xiàng)目、初創(chuàng)公司、教育機(jī)構(gòu)、Docker Captains和更多利基群體提供有競爭力的價(jià)格。
網(wǎng)頁設(shè)計(jì)和原型制作工具
當(dāng)然，如果沒有良好的用戶體驗(yàn) (UX)，Web應(yīng)用程序?qū)⒁皇聼o成。因此，對布局和視覺效果進(jìn)行原型設(shè)計(jì)通常需要專用工具。設(shè)計(jì)工具在開發(fā)的服務(wù)器端和客戶端都將是至關(guān)重要的。這里有一些流行的選擇。
8. Figma Figma是一個(gè)經(jīng)常被提及的Web開發(fā)工具，可讓您在設(shè)計(jì)上進(jìn)行協(xié)作。
Figma編輯器您可以使用拖放編輯器來構(gòu)建界面和其他面向用戶的元素。對于開發(fā)人員，您還可以獲取代碼片段以植入您的項(xiàng)目中。Figma使從構(gòu)思到實(shí)施的過程變得順暢，并在整個(gè)項(xiàng)目鏈中保持修訂。
您還可以從一組同質(zhì)化的工具中受益，以幫助您選擇字體和顏色。此過程與使用單獨(dú)的工具（例如Type Scale）形成對比：
類型規(guī)模網(wǎng)站…以及Web開發(fā)工具的一個(gè)子集，例如Adobe Color、Coolors、各種顏色選擇器等等。
Coolors顏色選擇器雖然Figma對于單個(gè)開發(fā)人員項(xiàng)目具有價(jià)值，但隨著規(guī)模的擴(kuò)大，它對團(tuán)隊(duì)的好處更大。團(tuán)隊(duì)會喜歡Figma的協(xié)作方面，例如中央資產(chǎn)存儲庫和可重用組件。團(tuán)隊(duì)領(lǐng)導(dǎo)者還將欣賞全面的報(bào)告選項(xiàng)，以了解團(tuán)隊(duì)成員如何使用各種設(shè)計(jì)系統(tǒng)。
至于定價(jià)，標(biāo)準(zhǔn)的Figma每位“編輯”收費(fèi)12美元，對于基于企業(yè)的團(tuán)隊(duì)，每位“編輯”上漲至45美元（對于“編輯”，閱讀“席位”——這是相同的概念）。因此，價(jià)格可能會根據(jù)您希望加入的編輯人數(shù)而上漲。
注：您可以通過云瑞、設(shè)計(jì)小咖或者肥姑媽加油站下載Figma相關(guān)素材。
9. Sketch Sketch是一款僅適用于macOS的應(yīng)用程序，在開發(fā)人員中也得到了廣泛的認(rèn)可：
Sketch標(biāo)志它很受歡迎，因?yàn)镾ketch在底層包含了很多功能，而且使用起來也很容易，考慮到它是一個(gè)原生的macOS應(yīng)用程序，這是有道理的。它看起來有點(diǎn)像Apple的Xcode IDE，這不是壞事，而且導(dǎo)航起來感覺很棒。
當(dāng)然，您可以執(zhí)行矢量編輯和約束調(diào)整大小等基本功能。但是，該應(yīng)用程序中還有更多功能可以幫助您快速生成設(shè)計(jì)并將其導(dǎo)出給其他人。
例如，以Sketch的智能布局功能為例，它使用自適應(yīng)調(diào)整大小來匹配您的尺寸和當(dāng)前布局。還有許多協(xié)作工具可以讓每個(gè)人都可以深入了解設(shè)計(jì)并幫助完善它。
Sketch for Teams概述Sketch與Figma等工具的不同之處在于，自由職業(yè)者或單獨(dú)的開發(fā)人員可以免費(fèi)加入，然后在需要時(shí)購買訂閱。在這方面，Sketch的定價(jià)是一次性支付99美元或每位用戶每月9美元。
注：Sketch派是一個(gè)專門提供Sketch素材的站點(diǎn)。
10. InVision StudioInVision Studio以“屏幕設(shè)計(jì)”應(yīng)用程序的形式獨(dú)特地推銷自己。這是有道理的，而且理解起來也更清楚。InVision Studio提供您期望的所有標(biāo)準(zhǔn)特性和功能，例如直觀的基于圖層的編輯器和矢量支持。
InVision Studio應(yīng)用程序不過，盒子里還有更多與原型制作和創(chuàng)建動(dòng)畫有關(guān)的內(nèi)容。例如，您可以指向、單擊和拖動(dòng)以將畫板和屏幕鏈接在一起。此功能使您可以將動(dòng)畫構(gòu)建為設(shè)計(jì)過程的一部分，而不是您稍后交付的東西。
InVision Studio應(yīng)用程序中的動(dòng)畫說到交接，整個(gè)團(tuán)隊(duì)都可以在InVision Studio中工作，因?yàn)楣蚕斫M件庫、全局同步選項(xiàng)、強(qiáng)大的
檢查模式等等。
定價(jià)結(jié)構(gòu)也具有競爭力。InVision Studio的免費(fèi)版本為您提供了付費(fèi)版本的幾乎所有功能，僅對您可以保存的文檔數(shù)量有所限制。Pro對于應(yīng)用程序的功能很有價(jià)值（大約95美元/用戶/年）。
11. Affinity Designer如果您是Adob??e Illustrator用戶，您過去會遇到過Affinity Designer 。Serif的圖形設(shè)計(jì)方法看起來可以讓Adob??e的解決方案物有所值：
Affinity Designer應(yīng)用程序自推出以來，由于其與社區(qū)的良好關(guān)系、出色的設(shè)計(jì)原則和有吸引力的定價(jià)模式，它獲得了迅速增長的用戶群。您會找到適用于Mac、Windows和iPad的版本，每個(gè)版本都可以同時(shí)使用矢量、柵格或兩者：
Affinity Designer的編輯器您在Illustrator中使用的工具全都存在，以及一整套顏色配置文件和導(dǎo)出選項(xiàng)：
Affinity Designer中的導(dǎo)出選項(xiàng)簡而言之，這些特性和功能可以為您的項(xiàng)目創(chuàng)建專業(yè)圖形。更重要的是，價(jià)格極具競爭力。全價(jià)約50美元，這是一次性付款。它沒有像Illustrator這樣的合適的基于云的選項(xiàng)。即便如此，只需支付一次性費(fèi)用，您就可以以一種主觀上更好的方式展示Adob??e的范圍。
12. CodePen或JSFiddle在前面討論IntelliJ IDEA時(shí)，我們沒有提到它的一個(gè)小而方便的特性——暫存文件。它使您可以快速編寫和測試代碼片段，而不必影響您當(dāng)前的工作項(xiàng)目。
對于其他代碼編輯器的用戶，CodePen或JSFiddle等解決方案是一個(gè)很好的替代品。它們的工作方式相似：有三個(gè)用于HTML、CSS和JavaScript的文本編輯器，以及一個(gè)用于查看結(jié)果的輸出屏幕：
CodePen控制臺您可以根據(jù)您的平臺命名您的“Pen”或“Fiddle”，保存并與他人分享。這是一個(gè)如此簡單的想法——它可以幫助您將半生不熟的想法帶到項(xiàng)目的某個(gè)方面，并在幾秒鐘內(nèi)實(shí)現(xiàn)它們。
對于想要了解文件中的特定元素并顯示可以更改的地方的開發(fā)人員來說，“在線IDE”是無價(jià)的。此外，還可以通過聊天或“現(xiàn)場麥克風(fēng)”進(jìn)行協(xié)作：
JSFiddle協(xié)作屏幕總的來說，在線 IDE 可以被認(rèn)為是一種“休眠”的Web開發(fā)工具，因?yàn)樗苌俦惶峒埃辉S多開發(fā)人員用來創(chuàng)建更好的代碼。
Git客戶端
擁有一種集中的方式來存儲代碼、記錄更改并與團(tuán)隊(duì)一起工作而不重復(fù)是版本控制系統(tǒng) (VCS)的任務(wù)。以下是一些處理一個(gè)VCS的客戶端：git。
讓我們先討論VCS本身。
13. GitGit對于現(xiàn)代開發(fā)人員來說是必不可少的，因此，它是可用的最重要的Web開發(fā)工具之一。簡而言之，這是一種記錄您對項(xiàng)目代碼所做的更改并將它們存儲在“存儲庫”中的方法：
WordPress GitHub提交列表Git是由Linux創(chuàng)造者Linus Torvalds發(fā)明的。并使用一系列命令將文件更改添加到“暫存區(qū)”，然后您將在其中將它們“提交”到存儲庫。從那里，您將它們“推送”到在線托管的遠(yuǎn)程存儲庫。
雖然它不是唯一可用的VCS——WordPress開發(fā)團(tuán)隊(duì)仍然在許多項(xiàng)目中使用Trac——但它是最突出的。諸如Git或Trac之類的VCS通過在中央位置托管代碼來幫助團(tuán)隊(duì)協(xié)作。
基本命令是以git開頭的單字函數(shù)，通常在命令行中使用。例如：
git add file.php此表達(dá)式將
file.php添加到您的暫存區(qū)。換句話說，它將更改記錄為您想要存儲的內(nèi)容，而無需對其進(jìn)行最后潤色。如果您愿意，可以對一個(gè)文件或整個(gè)項(xiàng)目執(zhí)行此操作。
要提交文件，請運(yùn)行
git commit. 從這里，您可以添加評論以告訴其他人您的提交。在此之后，您的更改將被存儲并推送到主“branch”。當(dāng)然，這取決于您是否正在處理遠(yuǎn)程“repo”。
如果你是Git和VCS的新手，GitLab有一個(gè)很好的初學(xué)者指南 ，可以在命令行上使用Git。稍后我們還將討論GitLab本身。
14. GitHubGitHub頁面對于絕大多數(shù)開發(fā)者來說，GitHub是存放項(xiàng)目Git倉庫
的地方：WordPress GitHub存儲庫它是Microsoft擁有的解決方案，涵蓋的范圍遠(yuǎn)不止Git托管。還有一堆自動(dòng)化測試工具，并嘗試提供額外的協(xié)作功能。
GitHub的協(xié)作功能對于開源項(xiàng)目，GitHub等平臺幾乎是事實(shí)上的選擇。鑒于此，GitHub作為Web開發(fā)工具對于許多開源用戶、學(xué)習(xí)者和一般開發(fā)人員來說是無價(jià)的。在深入研究GitHub的問題跟蹤器以解決已安裝包的問題時(shí)尤其如此。
GitHub的問題跟蹤器GitHub不僅僅用于存儲程序存儲庫。它也適用于其他編碼項(xiàng)目，例如Web開發(fā)，甚至?xí)?br>
總的來說，GitHub是一個(gè)很棒的工具，可以幫助從許多不同的分支建立一個(gè)健康的社區(qū)。但是，它并不是唯一的平臺。
15. GitLabGitLab Logo我們之前提到過，但GitLab是GitHub的競爭對手，也有類似的目標(biāo)。它本質(zhì)上是Git存儲庫的主機(jī)，但也提供了一些其他附加功能。
雖然GitHub稱自己為“開發(fā)平臺”，但GitLab專注于“DevOps”。在其免費(fèi)層上，GitLab提供DevOps生命周期的每個(gè)階段、靜態(tài)應(yīng)用程序安全測試，以及每月約400分鐘的持續(xù)開發(fā) (CD) 和持續(xù)集成 (CI)。
GitLab屬于社區(qū)意識，這是GitHub的最大區(qū)別。它更多的是關(guān)于部署和項(xiàng)目的整個(gè)周期。這不是負(fù)面的，但這確實(shí)意味著GitLab更像是一個(gè)“孤立”的平臺，可以說不像 GitHub 那樣適合開源項(xiàng)目。
對于大多數(shù)團(tuán)隊(duì)來說，GitLab的免費(fèi)套餐已經(jīng)足夠了。每位用戶每年大約230美元，您就可以訪問代碼和生產(chǎn)力分析，大約10,000分鐘的 CD/CI 分鐘，等等。
16. Sourcetree Sourcetree不是Git存儲庫主機(jī)，而是用于管理它們的圖形用戶界面 (GUI)。它是眾多解決方案之一，例如GitKraken、Sublime Merge、GitHub Desktop等等。
Sourcetree主頁它是一個(gè)Atlassian產(chǎn)品（我們喜歡Atlassian?。?，它與Bitbucket等其他產(chǎn)品連接，以提供Git存儲庫的可視化表示。
Sourcetree是作為一個(gè)簡單的Git客戶端銷售的——而且確實(shí)如此——但它也適合有經(jīng)驗(yàn)的用戶。它有很多內(nèi)容可以支持使用Git（以及Mercurial ）的團(tuán)隊(duì) 。
例如，Sourcetree可以做一些簡單的事情，例如突出顯示上次提交的更改，但如果您需要，它還可以處理更多事情。團(tuán)隊(duì)領(lǐng)導(dǎo)者可以查看變更集，根據(jù)需要在分支之間工作，并使用圖表和信息選項(xiàng)卡可視化代碼：
Sourcetree的圖表視圖Git客戶端是否適合您取決于您??的情況。如果您仍在學(xué)習(xí)，我們建議您在了解流程和流程的同時(shí)繼續(xù)使用終端。對于廣泛使用Git的專業(yè)人士或團(tuán)隊(duì)，Sourcetree等客戶端將節(jié)省您每天工作的時(shí)間。
瀏覽器開發(fā)者工具
沒有網(wǎng)絡(luò)瀏覽器，就沒有網(wǎng)絡(luò)開發(fā)。但是，雖然您選擇的瀏覽器對于瀏覽網(wǎng)絡(luò)至關(guān)重要，但您也可以使用它來了解它的運(yùn)行方式。
大多數(shù)現(xiàn)代瀏覽器都包含特定的開發(fā)工具來幫助您分析后端代碼，然后您可以將其帶回您的項(xiàng)目中。以下是一些最受歡迎的。
17. Chrome開發(fā)者工具Chrome的“DevTools” 因其出色的功能集和診斷功能而在整個(gè)社區(qū)中備受推崇。
鑒于基于Chromium的瀏覽器的興起，許多瀏覽器擁有相同的DevTools集和類似的快捷方式。您可以查看Microsoft Edge、Brave、Chromium本身以及更多克隆，并在瀏覽器中處理您的項(xiàng)目。
Brave瀏覽器的DevToolsElements選項(xiàng)卡將是一個(gè)經(jīng)常出沒的地方，因?yàn)槟鷮⒃谶@里查看頁面源代碼。在我們看來，
Performance選項(xiàng)卡提供了其他瀏覽器DevTools無法比擬的頁面加載洞察力：
Brave的性能選項(xiàng)卡安全選項(xiàng)卡也提供了一些有用的信息，這對于監(jiān)控（或研究）客戶的網(wǎng)站是必要的：
Brave的安全選項(xiàng)卡更好的是，您可以 直接從基于Chromium的瀏覽器生成Google Lighthouse報(bào)告：
來自Brave的DevTools的Google Lighthouse報(bào)告這里的DevTools在主觀上是最好的，所以你會發(fā)現(xiàn)基于Chrome和Chromium的用戶會依賴它們。雖然其他瀏覽器也有DevTools，但它們也值得考慮。
18. 火狐開發(fā)者工具火狐主頁Firefox的月活躍用戶群約為2.2億，盡管谷歌占據(jù)主導(dǎo)地位，但它仍然是一種流行的瀏覽器。過去，開發(fā)人員對Firebug贊不絕口，它通常在瀏覽器內(nèi)調(diào)試方面處于領(lǐng)先地位。
今天，我們有Firefox的開發(fā)者工具：
Firefox的開發(fā)者工具有一組核心功能可用于查看站點(diǎn)源代碼（
檢查器）、
調(diào)試器、
內(nèi)存、
存儲等。
對于初學(xué)者來說，
控制臺通常是通向編碼的門戶，因?yàn)槟梢灾苯釉跒g覽器中運(yùn)行 JavaScript，而且它是一種測試代碼段并在第一次開始時(shí)找到您的腳的簡單方法：
瀏覽器控制臺的示例盡管如此，我們認(rèn)為Firefox（和其他瀏覽器）在其開發(fā)人員工具中的包裝不如基于Chromium的瀏覽器。盡管如此，對于跨瀏覽器調(diào)試和故障排除，您通常會使用Firefox服務(wù)。因此，它們非常適合幾乎所有任務(wù)，這是一件好事。
前端框架
說到前端，你需要一些適合創(chuàng)建令人驚嘆的網(wǎng)站的東西。您在這里選擇的框架至關(guān)重要。您應(yīng)該始終為工作選擇最佳工具。
考慮到這一點(diǎn)，讓我們看一些流行的選擇。
19. Bootstrap
移動(dòng)響應(yīng)是現(xiàn)代網(wǎng)頁設(shè)計(jì)中的標(biāo)準(zhǔn)功能。鑒于移動(dòng)瀏覽現(xiàn)在已經(jīng)超過了桌面，這是一個(gè)受歡迎的步驟。鑒于此，您需要一種快速啟動(dòng)移動(dòng)優(yōu)先網(wǎng)站的方法。
Bootstrap是一個(gè)很棒的Web開發(fā)工具，它被廣泛使用：
Bootstrap標(biāo)志它是一個(gè)工具包，結(jié)合了JavaScript插件、Sass變量、一些預(yù)構(gòu)建的組件、高質(zhì)量的響應(yīng)式網(wǎng)格系統(tǒng)等等。甚至還有一個(gè)可以與Bootstrap配合使用的官方主題市場，并且許多WordPress網(wǎng)站也使用基于設(shè)計(jì)框架構(gòu)建的主題。
當(dāng)然，是否使用Bootstrap將取決于您的項(xiàng)目需要什么。但是，可以合理地假設(shè)預(yù)算緊張且周轉(zhuǎn)速度快的Web開發(fā)項(xiàng)目將轉(zhuǎn)向“自舉”解決方案并使其適應(yīng)WordPress。鑒于框架和WordPress是免費(fèi)的，您的時(shí)間成為唯一的成本因素。
20.Tailwind CSS在紙面上，Tailwind CSS沒有意義。它是一種語言的前端框架，是Web開發(fā)核心三位一體的一部分。因此，認(rèn)為目標(biāo)用戶已經(jīng)具備適當(dāng)?shù)闹R而不需要框架是合乎邏輯的。
實(shí)際上，Tailwind CSS
非常合理 。這是一種無需離開HTML即可設(shè)計(jì)網(wǎng)站前端的方法。
Tailwind CSS示例您可以使用各種標(biāo)簽中的實(shí)用程序類從核心樣式表中添加CSS。當(dāng)然，CSS仍然是主要的樣式來源。當(dāng)您使用HTML構(gòu)建布局時(shí)，它就在您的視野之外。因此，它可以讓您同時(shí)發(fā)展結(jié)構(gòu)和風(fēng)格。
這種方法讓我們想起了960網(wǎng)格系統(tǒng)，并且可以很好地與該框架相吻合。也就是說，將元素與如此多的類打包在一起是有危險(xiǎn)的，最終可能會導(dǎo)致一堆意大利面條式的代碼。使用Tailwind CSS需要耐心和紀(jì)律，但如果它適合您的項(xiàng)目，它是一個(gè)快速而強(qiáng)大的框架。
21.Bulma我們在設(shè)計(jì)網(wǎng)站結(jié)構(gòu)和布局方面取得了所有進(jìn)展，創(chuàng)建靈活、響應(yīng)迅速和動(dòng)態(tài)的列是許多人的障礙。雖然處理這不是Bulma唯一 可以做的事情，但這種類型的應(yīng)用程序?qū)蚣軄碚f是肉和土豆：
Bulma網(wǎng)站與Tailwind CSS非常相似，Bulma隱藏了CSS并為您的HTML提供了實(shí)用程序類。它采用Flexbox、移動(dòng)優(yōu)先和模塊化構(gòu)建。如果您只需要幾個(gè)組件，那就太好了。如果您愿意，您還可以混合和匹配框架。
更重要的是，你不需要任何JavaScript來啟動(dòng)和運(yùn)行Bulma，因?yàn)樗皇荂SS。您可以使用最少的代碼添加界面元素，例如按鈕。這是一個(gè)簡單的開源框架，可以適應(yīng)您自己項(xiàng)目的需求。在我們的書中，這是一個(gè)很有價(jià)值的特質(zhì)，你可以很好地加以利用。
22. FoundationZURB團(tuán)隊(duì)對Foundation中的CSS框架有其獨(dú)特的看法。它是一種移動(dòng)優(yōu)先的語義工具，具有兩種適用于網(wǎng)站和電子郵件的風(fēng)格：
Foundation主頁Foundation的構(gòu)建以可訪問性為優(yōu)先事項(xiàng)。Foundation中的每個(gè)片段都帶有專用的ARIA屬性。然而，在你進(jìn)入這個(gè)階段之前，F(xiàn)oundation在快速原型設(shè)計(jì)方面令人印象深刻，因?yàn)槟銓⑺砑拥紿TML中的方式。您可以在頁面上創(chuàng)建幾乎任何結(jié)構(gòu)元素——甚至是各種類型的菜單和導(dǎo)航：
在Foundation中創(chuàng)建導(dǎo)航菜單ZURB還提供了豐富的優(yōu)秀文檔和教程 供您學(xué)習(xí)框架的來龍去脈。Foundation易于使用，但我們懷疑您可以深入構(gòu)建站點(diǎn)并提供復(fù)雜的布局和功能。
您還可以在Foundation網(wǎng)站上找到一堆模板 。它們是簡單的線框，可幫助您起步 – 一個(gè)受歡迎的包含：
Foundation的模板庫總體而言，F(xiàn)oundation框架完全按照它所說的去做。它將成為您網(wǎng)站開發(fā)的核心，而不是讓您使用更多功能。因此，您可能不會在每個(gè)項(xiàng)目中都使用它。雖然，在受雇的地方，它將在各種網(wǎng)站上開展業(yè)務(wù)。
23. Material-UI稍后我們將更詳細(xì)地討論 React，但現(xiàn)在，我們知道Material-UI是基于這個(gè) JavaScript 框架的組件庫的。對于不知情的人，Material Design是Google關(guān)于如何設(shè)計(jì)網(wǎng)站前端的“哲學(xué)”。這意味著很多Roboto字體和色塊：
Material-UI看起來符合Google的設(shè)計(jì)標(biāo)準(zhǔn)您將把庫導(dǎo)入React，然后使用專用的HTML標(biāo)簽來構(gòu)建您的網(wǎng)站：
在Material-UI中創(chuàng)建一個(gè)按鈕要進(jìn)一步自定義元素，您可以將類添加到HTML標(biāo)記中。整個(gè)代碼塊包裝在一個(gè)函數(shù)中，您將在React中呈現(xiàn)詳細(xì)信息（以及擴(kuò)展的頁面）。
還有許多免費(fèi)和高級主題可用，涵蓋許多用例和價(jià)格：
Material-UI主題庫由于Material-UI有一個(gè)特定的用例——圍繞Material Design創(chuàng)建網(wǎng)站——如果這是你的目標(biāo)，它將是一個(gè)首選框架。特別是，無論您的預(yù)算如何，主題庫都是入門的寶貴資源。
24. HTML5 BoilerplateHTML5 Boilerplate主頁如果您是WordPress開發(fā)人員，您可能會遇到過Underscores。這是一個(gè)簡單的WordPress入門主題，可以為您節(jié)省無數(shù)時(shí)間來整合您網(wǎng)站的功能和核心元素。HTML5 Boilerplate在一般設(shè)計(jì)級別上做同樣的事情。
因此，它包括七個(gè)跨越HTML、CSS和JavaScript的文件。它們都只包含渲染頁面最必要的文件和代碼。除此之外，您的頁面結(jié)果如何取決于您。
HTML5 Boilerplate有很多粉絲，因?yàn)樗袷且粋€(gè)節(jié)省時(shí)間的實(shí)用程序，而不是一個(gè)成熟的框架。因此，沒有開箱即用的視覺效果來“passing trade”，但是如果您將HTML5 Boilerplate投入使用，您可能會發(fā)現(xiàn)它加快了您的開發(fā)速度，就像Underscores為WordPress開發(fā)人員所做的那樣。
25.Materialise雖然我們不會將Materialize稱為Material -UI 的競爭對手，但它是另一個(gè)使用Material Design原則來創(chuàng)建布局的框架：
Materialise主頁然而，Materialize不是使用React，而是一個(gè)CSS框架。這使得Materialise更容易在前端實(shí)現(xiàn)。與其他基于CSS的框架非常相似，您使用HTML中的類在前端拉入元素。
也就是說，還有一堆JavaScript組件，用于模態(tài)框和下拉列表等元素：
使用Materialize創(chuàng)建的下拉菜單像許多這些框架一樣，有一些高級主題可以幫助您以特定樣式構(gòu)建布局。但是，它們都是靜態(tài)HTML主題，如果您想實(shí)現(xiàn)JavaScript，這可能會成為問題。在這些情況下，您可能需要考慮使用Material-UI。
Web應(yīng)用程序框架
簡而言之，JavaScript框架或庫可以讓您以不同的方式使用所謂的“vanilla”代碼。在這種情況下，它是創(chuàng)建特定的Web應(yīng)用程序和站點(diǎn)。也有很多“風(fēng)味”——讓我們介紹一些。
26. React.js React沙盒代碼示例React.js是一個(gè)流行的Facebook設(shè)計(jì)的JavaScript庫，它為許多更現(xiàn)代的WordPress元素提供支持。WordPress.com后端和塊編輯器都使用React，我們認(rèn)為它是使用JavaScript的接口優(yōu)先方式。
WordPress.com的Calypso后端基于React構(gòu)建因此，WordPress開發(fā)人員應(yīng)該——套用Matt Mullenweg的話說——深入學(xué)習(xí)React.js。不過，它不僅是WordPress開發(fā)人員的框架。
任何需要現(xiàn)代且動(dòng)態(tài)的用戶界面 (UI) 的地方，React都是首選考慮因素。它使用JavaScript的語法擴(kuò)展名為JSX來創(chuàng)建元素，然后將其呈現(xiàn)給文檔對象模塊 (DOM)：
const name = "Ken Starr';const element = <h1>Hello, {name}</h1>;ReactDOM.renderElement,document.getElementById('root'));JSX中的JavaScript變量可以是任何有效的表達(dá)式，它可以讓您構(gòu)建復(fù)雜的參數(shù)。當(dāng)涉及到框架時(shí)，這使得React成為一個(gè)強(qiáng)有力的選擇。由于它的流行，我們認(rèn)為React應(yīng)該在你的“必須學(xué)習(xí)”列表中，無論你在哪里花費(fèi)你的開發(fā)時(shí)間。
27.Vue.jsVue.js是另一個(gè)用于構(gòu)建用戶界面的JavaScript框架。它基于“視圖層”，非常適合與其他庫和框架集成。
Vue.js沙箱在HTML方面，Vue再好不過了。你給你的標(biāo)簽一個(gè)ID并從JavaScript端的字典中調(diào)用一個(gè)鍵。數(shù)據(jù)現(xiàn)在是反應(yīng)式的，并且數(shù)據(jù)和DOM是鏈接的。
這樣一來，Vue.js很像我們在文章前面看到的一些CSS框架。這個(gè)框架很有說服力，我們鼓勵(lì)您查看文檔以了解可能的情況。
雖然Vue.js支持JSX聲明，但它更適合使用基于“經(jīng)典”Web技術(shù)的模板。因此，對于不想只在JavaScript中工作的開發(fā)人員來說，這將是理想的選擇。
28.Express.js我們在這里進(jìn)入了元框架領(lǐng)域，因?yàn)镋xpress.js連接到Node.js并為其他框架提供了基礎(chǔ)。
Express.js主頁它是一個(gè)極簡框架（因此得名），主要好處是幫助您將服務(wù)器端組件組織成熟悉的模型-視圖-控制器 (MVC) 格式。因此，代碼看起來比其他框架更復(fù)雜——甚至是原生JavaScript：
var express = require('express');var app = express();app.get('/', function(req, res){res.send("Hello world!");});app.listen(3000);我們認(rèn)為Express.js將適用于大量從數(shù)據(jù)庫中拉取和推送的應(yīng)用程序。這使其適用于許多希望以最小壓力處理前端任務(wù)的現(xiàn)代Web應(yīng)用程序和后端開發(fā)人員。
29.Svelte.js為Web開發(fā)時(shí)，一個(gè)可靠的經(jīng)驗(yàn)法則是確保您的網(wǎng)站在盡可能多的瀏覽器上運(yùn)行。也就是說，在某些情況下，您可能希望在不支持舊版瀏覽器的情況下構(gòu)建應(yīng)用程序或網(wǎng)站。在這些情況下，Svelte.js應(yīng)該在您的列表頂部附近。
Svelte.js主頁該框架因其文件大小而得名——縮小后僅為5kb。它具有類似jQuery的格式，對于熟悉的用戶來說很容易：
$('.hello').text("Hello svelte");Svelte API中有不到40個(gè)函數(shù)，因此入門非常簡單。更重要的是，您可以使用
$.fn.
您會發(fā)現(xiàn)支持Internet Explorer 9的“polyfills”，但這幾乎是唯一的讓步。對于使用超精益框架的超現(xiàn)代瀏覽器支持，Svelte.js可能適合您。
30. Laravel 到目前為止，我們已經(jīng)了解了JavaScript或CSS框架。鑒于PHP的流行，也有必要為這種語言提供一個(gè)框架。Laravel是這里的理想選擇，因?yàn)樗恼Z法和生態(tài)系統(tǒng)在許多開發(fā)人員中很受歡迎：
Laravel主頁說Laravel是一個(gè)生態(tài)系統(tǒng)更貼切，因?yàn)樗S多工具來幫助您構(gòu)建項(xiàng)目。即使你不使用框架本身，你也可以使用Laravel的Homestead，一個(gè)基于Vagrant的本地開發(fā)環(huán)境。
Laravel本身是一個(gè)基于Docker的PHP框架，并使用CLI（稱為Sail）與之交互。就像Vagrant一樣，您將使用sails up來構(gòu)建容器并運(yùn)行它們。
不過，Laravel的strings要多得多。例如，您可以將其用作全棧框架、Next.js應(yīng)用程序的API后端，以及介于兩者之間的幾乎所有東西。
如果你是一名PHP開發(fā)人員，Laravel將成為你工作流程的中心（如果不熟悉的話）工具。
31. GatsbyGatsby是一個(gè)開源前端框架，最近引起了很多關(guān)注。這是因?yàn)镚atsby快速、可擴(kuò)展、高性能且安全。
Gatsby主頁有一個(gè) 涉及節(jié)點(diǎn)包管理器 (npm)的超快速安裝過程。稍后我們將對此進(jìn)行更多介紹。雖然它是一個(gè)JavaScript框架，但Gatsby在運(yùn)行時(shí)會生成靜態(tài)HTML文件，因此無法攻擊站點(diǎn)。此外，Gatsby可以自動(dòng)執(zhí)行性能，以使您的站點(diǎn)以最佳配置運(yùn)行。
在自動(dòng)化性能、動(dòng)態(tài)縮放和靜態(tài)HTML構(gòu)建之間，Gatsby感覺就像一個(gè)活生生的有機(jī)體。有一個(gè)復(fù)雜的編碼“組成”，涉及JSX、Markdown、CSS等等，根據(jù)您的需要。 您的工作流程和堆棧的每一步都可以根據(jù)您的要求進(jìn)行定制。
WordPress開發(fā)人員也會喜歡Gatsby與平臺的集成方式。不過，它并不適用于所有情況。例如，如果您需要完全管理基于云的CMS，那么這不適合您。即便如此，Gatsby在大多數(shù)情況下都能適應(yīng)您的項(xiàng)目，并且與WordPress配合得很好。
32.Django盡管Python 是一種“初學(xué)者”或“學(xué)習(xí)”編程語言，但它是許多知名網(wǎng)站的支柱。一些最大的網(wǎng)站——Instagram、Uber、Reddit、Pinterest等——使用Django。通常，您會發(fā)現(xiàn)沒有提及Python本身，而只有Django。
Django是一個(gè)使用Python創(chuàng)建服務(wù)器端Web應(yīng)用程序的框架。它與Python本身一樣簡單易用，具有超級可讀的格式。
Django的默認(rèn)格式對于基于邏輯的項(xiàng)目， Python是一種出色的腳本語言，因此將其用于Web應(yīng)用程序非常合適。更重要的是，Python的處理速度快，基礎(chǔ)文件結(jié)構(gòu)輕。因?yàn)樗俣群芸?，與PHP相比，Django是一個(gè)優(yōu)秀的服務(wù)器端框架，并且與更流行的語言一樣多的咕嚕聲。
也就是說，吸收率較低，這可能是由于Python作為學(xué)習(xí)語言的聲譽(yù)。盡管如此，Django可以很好地與其他語言（例如JavaScript）配合使用，成為現(xiàn)代Web應(yīng)用程序的基礎(chǔ)。
當(dāng)然，如果您打算使用CMS，例如WordPress，或者您正在為基于 React 的項(xiàng)目創(chuàng)建解決方案，那么您的選擇就更少了。即便如此，我們認(rèn)為2022年在Django上運(yùn)行的網(wǎng)站數(shù)量將會增加。
33. Ruby on Rails幾年前，Ruby編程語言是初學(xué)者語言和腳本替代PHP的“寵兒”。它經(jīng)常被比作Python。
和Django一樣，Ruby on Rails也是許多開發(fā)人員的最愛。
新Ruby on Rails項(xiàng)目的占位符頁面您會發(fā)現(xiàn)Ruby用于許多服務(wù)器端和底層Web應(yīng)用程序。此外，Ruby on Rails被無數(shù)網(wǎng)站用作服務(wù)器端框架。它使用MVC方法并為Web服務(wù)、頁面和數(shù)據(jù)庫提供結(jié)構(gòu)。因此，您有一個(gè)開箱即用的準(zhǔn)系統(tǒng)網(wǎng)站等著您。
如果需要安排許多工作并使用第三方解決方案，Ruby on Rails將適合您的項(xiàng)目。例如，與Google Cloud等文件存儲以及用于發(fā)送電子郵件的包裝器的原生集成。
總體而言，如果您想要一組健壯的默認(rèn)值（例如文件夾結(jié)構(gòu)），可以根據(jù)需要進(jìn)行自定義，這是一個(gè)不錯(cuò)的選擇。另一方面，如果您喜歡在開發(fā)過程中使用API，這不是一個(gè)很好的選擇。
對于大型項(xiàng)目，Ruby on Rails的代碼結(jié)構(gòu)可能會變得復(fù)雜且難以理解。運(yùn)行時(shí)間也會受到影響，因此它可能不是速度關(guān)鍵型項(xiàng)目的最佳框架。
盡管如此，Ruby on Rails仍然是領(lǐng)先的Web服務(wù)器端框架之一，并且對于合適的項(xiàng)目，它的使用并沒有放緩。
34.TypeScript
TypeScript代碼示例簡而言之，TypeScript為JavaScript提供了可選的靜態(tài)“類型檢查”。它是該語言的“超集”，它還支持許多其他JavaScript庫?？偟膩碚f，TypeScript是帶有一些額外功能的JavaScript，您可以同時(shí)編譯這兩種語言。
許多開發(fā)人員已經(jīng)轉(zhuǎn)向TypeScript以減少他們遇到的運(yùn)行時(shí)錯(cuò)誤的數(shù)量。類型錯(cuò)誤是最常見的錯(cuò)誤之一，減少它們可以為您節(jié)省大量額外時(shí)間。
對于一個(gè)非常簡單的TypeScript示例，考慮一個(gè)字符串：
let helloWorld = “Hello World”;// ^ = let helloWorld: string在這里，TypeScript使用let而不是通常的var作為helloWorld變量。從那里，TypeScript知道helloWorld是一個(gè)字符串，并在此基礎(chǔ)上對其進(jìn)行檢查。
歸根結(jié)底，TypeScript并不是必不可少的Web開發(fā)工具，盡管由于其核心選框功能而變得越來越流行。如果您最終節(jié)省了一些急需的時(shí)間，它可能對您的工作流程至關(guān)重要。
35.GraphQL
這是一個(gè)獨(dú)特的工具，可能會受到在API中處理數(shù)據(jù)的開發(fā)人員的青睞。GraphQL是一種在API中使用的查詢語言，它還充當(dāng)運(yùn)行時(shí)，為您所做的查詢提供服務(wù)。
GraphQL網(wǎng)站使用標(biāo)準(zhǔn)REST API，您通常必須從多個(gè)URL加載。使用GraphQL，您可以從單個(gè)請求中獲取數(shù)據(jù)。更重要的是，GraphQL API是按類型而非端點(diǎn)排列的。這種分類有助于提高查詢效率，并在出現(xiàn)問題時(shí)提供更明確的錯(cuò)誤。
考慮到GraphQL如何實(shí)現(xiàn)它們，類型也可以用于跳過覆蓋手動(dòng)解析代碼。您還可以向API添加新字段和類型，而不會影響您迄今為止所做的工作。
該工具在許多領(lǐng)域都具有靈活性和可擴(kuò)展性。因?yàn)镚raphQL為您的項(xiàng)目創(chuàng)建了統(tǒng)一的API，所以您可以引入與您選擇的項(xiàng)目語言相匹配的引擎。這使得它非常適合廣泛的應(yīng)用程序，而不是解決普遍問題的利基解決方案。
您會發(fā)現(xiàn)GraphQL在GitHub、Spotify、Facebook等網(wǎng)站上使用。它應(yīng)該讓您了解如何在各種查詢繁重的網(wǎng)站上使用GraphQL。因此，在接下來的12個(gè)月及以后，您可能需要多次使用此解決方案。
包管理器
編程語言、框架等有許多活動(dòng)部分。這些依賴項(xiàng)必須以正確的方式下載和安裝才能工作。輸入包管理器。這些幫助您從命令行下載和安裝特定的依賴項(xiàng)。讓我們來看看你會遇到的一些工具。
36.Node Package Manager（npm）是的，下載安裝程序有它的位置。但是，在大多數(shù)情況下，從命令行使用包管理器非常簡單。它還提供了一種從Web獲取和安裝文件的zippy方式。
Node Package Manager (npm)是Microsoft擁有的特定于JavaScript的Web開發(fā)工具，可讓您按需安裝特定于語言的包：
npm主頁例如，搜索React package會產(chǎn)生超過155,000個(gè)結(jié)果：
在npm中執(zhí)行的搜索與在線IDE一樣，npm是一個(gè)沒有太多“通話時(shí)間”的Web開發(fā)工具，主要是因?yàn)樗鼰o處不在。因此，幾乎每個(gè)Web開發(fā)人員都會使用這個(gè)工具。
然而，令人難以置信的是，現(xiàn)在它在GitHub的支持下，2022年使用npm的開發(fā)人員將比以往任何時(shí)候都多。
37. Yarn與Python的npm和pip非常相似，Yarn可幫助您安裝與項(xiàng)目及其工具相關(guān)的包。這里的不同之處在于Yarn也是一個(gè)項(xiàng)目管理工具。
Yarn主頁安裝很簡單，為一個(gè)新項(xiàng)目初始化Yarn也需要最少的努力。它已成為一個(gè)強(qiáng)大的開源解決方案，用于安裝包和管理您的項(xiàng)目。
您將使用工作空間來創(chuàng)建“monorepos”，并且您的項(xiàng)目的多個(gè)版本都存在于同一個(gè)repo中并且可以交叉引用。您可以為Yarn無法做的任何事情安裝插件（您想為其添加新的fetcher和resolver）。更準(zhǔn)確地說，您
可以安裝插件，但沒有太多，至少在官方列表中。相反，如果您迫切需要該功能，您將自己編寫代碼。盡管如此，您仍然可以選擇根據(jù)項(xiàng)目需求定制Yarn。
Yarn是一個(gè)獨(dú)特的案例，可以成為您的主要包管理器。對于現(xiàn)實(shí)世界的項(xiàng)目，你可能更依賴npm，但Yarn會潛入你的工作流程，只會讓你受益。
API和測試工具
確保事情順利進(jìn)行是一個(gè)經(jīng)常被跳過的過程，但當(dāng)出現(xiàn)問題時(shí)，它也會帶來遺憾。因此，您的項(xiàng)目的測試階段應(yīng)該是扎實(shí)、穩(wěn)健和徹底的。
鑒于此，這里有一些API和測試工具，您可以為您的項(xiàng)目準(zhǔn)備好。
389. HoppScotchHoppScotch由Netlify提供支持，是一個(gè)開源API開發(fā)工具。開發(fā)人員稱其為“生態(tài)系統(tǒng)”，這掩蓋了引擎蓋下的功能。
HoppScotch主頁這是一個(gè)嚴(yán)肅而強(qiáng)大的解決方案，不適合膽小的人。如果您從未使用過這樣的工具，學(xué)習(xí)曲線會很陡峭。在任何應(yīng)用程序的頁面上使用HoppScotch幾乎沒有方向，盡管這通常不是問題，因?yàn)樵摴ぞ邿o論如何都是為有經(jīng)驗(yàn)的開發(fā)人員設(shè)計(jì)的。
有許多實(shí)時(shí)連接（WebSocket、SSE等）和GraphQL實(shí)現(xiàn)。我們也喜歡文檔創(chuàng)建者：
HoppScotch文檔創(chuàng)建者屏幕它與您的HoppScotch “收藏”一起使用，可以即時(shí)創(chuàng)建文檔，這是一個(gè)受歡迎的節(jié)省時(shí)間。
總的來說，HoppScotch是一個(gè)功能性工具，可以在您的瀏覽器中打開很多。它是您總是在不知不覺中使用的解決方案之一——我們不能給它比這更高的贊譽(yù)！
39. PostmanPostman標(biāo)志警告——我們要提到可怕的“C”字：
合作。Postman是一個(gè)Web開發(fā)工具，可幫助您通過Postman平臺作為團(tuán)隊(duì)創(chuàng)建應(yīng)用程序編程接口 (API) ：
Postman儀表盤將Postman集成到您的工作流程中有很多用例。例如，您可以將其以標(biāo)準(zhǔn)方式用于應(yīng)用程序開發(fā)，這將直接轉(zhuǎn)化為基于Web的項(xiàng)目。您可以使用模擬服務(wù)器模擬端點(diǎn)，這將特別吸引WordPress開發(fā)人員。
您甚至可以創(chuàng)建入職培訓(xùn)來幫助您的API用戶學(xué)習(xí)。那些有大量用戶流動(dòng)或大量流量的項(xiàng)目將在這里看到好處。
至于定價(jià)，Postman提供免費(fèi)套餐，但您將從其中一個(gè)高級套餐中獲得最大價(jià)值。您需要支付大約12-30美元，具體取決于您的計(jì)費(fèi)周期和用戶數(shù)量。
40. Testing Library運(yùn)行的代碼是理想的，但最終目標(biāo)是運(yùn)行的應(yīng)用程序。Testing Library顧名思義：它提供了一組實(shí)用程序來幫助您測試項(xiàng)目并鼓勵(lì)您使用良好的編碼實(shí)踐。
Testing Library主頁這個(gè)想法是您創(chuàng)建代表您的應(yīng)用程序使用情況的測試。如果它們運(yùn)行順利，那么您的應(yīng)用程序很有可能也會運(yùn)行。它是一個(gè)關(guān)于框架的不可知論工具，它不是一個(gè)測試運(yùn)行器。測試庫的核心目的是幫助您編寫與實(shí)現(xiàn)細(xì)節(jié)分離的可維護(hù)測試。
Testing Library工具中的所有內(nèi)容都圍繞其指導(dǎo)原則。因此，您不僅在創(chuàng)建測試，而且還在學(xué)習(xí)如何讓它們變得更好、更有價(jià)值。
因此，Testing Library可能會成為您工作流程的重要組成部分。我們認(rèn)為幾乎所有項(xiàng)目鏈都可以從測試庫中受益，而React用戶幾乎肯定會希望將此工具作為標(biāo)準(zhǔn)。
協(xié)作工具
盡管開發(fā)人員反社會的比喻，但事實(shí)是技術(shù)和協(xié)作齊頭并進(jìn)。
因此，讓我們總結(jié)一些出色的協(xié)作工具，這些工具將融入您的下一個(gè)項(xiàng)目。
41. Jira在軟件方面， Atlassian是一家廣受歡迎的公司。我們是該公司一些產(chǎn)品的忠實(shí)擁護(hù)者：Confluence、Trello、Sourcetree、Bitbucket，以及我們在此關(guān)注的Jira。
Jira主頁它是使用敏捷框架的團(tuán)隊(duì)的開發(fā)工具——尤其是Scrum，因?yàn)樗浅Ａ餍?。因此，您可以在包中獲得豐富的功能。例如，您可以使用看板來幫助組織任務(wù)和沖刺。您還可以根據(jù)您的方法和項(xiàng)目實(shí)施您的估算技術(shù)。
Jira專注于可重復(fù)的工作流程：計(jì)劃、跟蹤、發(fā)布和報(bào)告。它是幾個(gè)敏捷框架的核心，盡管您也可以根據(jù)您的項(xiàng)目前計(jì)劃創(chuàng)建自己的框架。如果您必須在sprint之間進(jìn)行調(diào)整，您可以發(fā)展您的項(xiàng)目并擴(kuò)大或縮小規(guī)模。
關(guān)于Jira的好消息是有一個(gè)免費(fèi)層可以幫助您入門，其他層的價(jià)格也很合理。也就是說，您會發(fā)現(xiàn)10人團(tuán)隊(duì)將是有效使用Jira的最低要求。對于任何較小的群體來說，這可能是矯枉過正。
42. Taskade談到協(xié)作工具，Taskade很少見。它對應(yīng)用程序不利，因?yàn)樗亲寛F(tuán)隊(duì)專注于主題的絕佳工具。
Taskade儀表盤如果您是其他協(xié)作工具的用戶，例如Asana或Basecamp（稍后會詳細(xì)介紹），那么您在這里就可以輕松自在了。您最需要的信息（例如待辦事項(xiàng)和提醒）集中在后臺。因此，您可以根據(jù)您的項(xiàng)目以多種方式呈現(xiàn)它。
Taskade中的演示文稿類型“思維導(dǎo)圖”和“組織結(jié)構(gòu)圖”視圖類型非常出色，每一種都為您提供了有關(guān)您添加的信息的不同視角。
Taskade中的思維導(dǎo)圖該應(yīng)用程序的簡單性具有欺騙性。除了呈現(xiàn)和管理任務(wù)的靈活方式外，幾乎沒有其他選擇。
與您的團(tuán)隊(duì)合作需要按幾下按鈕。例如，每個(gè)屏幕都有一個(gè)可擴(kuò)展的聊天窗口：
Taskade聊天窗口對某些人來說，尤其是與其他解決方案相比，Taskade可能被視為準(zhǔn)系統(tǒng)，甚至裝備不足。然而，事實(shí)并非如此。Taskade是與團(tuán)隊(duì)協(xié)作的絕佳方式，并且由于其簡單性，它可??以直接插入您正在處理的任何項(xiàng)目中。
43.AsanaAsana主頁Asana是協(xié)作工具領(lǐng)域中較為知名的名稱之一。當(dāng)涉及到一個(gè)項(xiàng)目并在團(tuán)隊(duì)的幫助下將其成形時(shí)，這是一個(gè)怪物。Asana也很擅長適應(yīng)不同的工作流程。例如，您可以在列表和日歷之間切換，也可以訪問時(shí)間線。
Asana的工作流程類型還有一些很棒的基于團(tuán)隊(duì)的特性和功能。報(bào)告是全面的，并且在更高的計(jì)劃中，您可以訪問顯示與團(tuán)隊(duì)績效相關(guān)的各種分析的儀表板。甚至還有一種方法可以監(jiān)控每個(gè)團(tuán)隊(duì)成員的工作量。因此，體式可以幫助您將緊縮減少到最低限度，并防止團(tuán)隊(duì)成員精疲力竭。
更重要的是，免費(fèi)層并不是功能齊全的應(yīng)用程序的殘缺演示。您可以在擴(kuò)展團(tuán)隊(duì)時(shí)擴(kuò)展Asana，這里有很好的功能可以幫助您。例如，您可以將工作分配給團(tuán)隊(duì)成員并管理每個(gè)工作流程。您還可以基于每個(gè)工作區(qū)向整個(gè)團(tuán)隊(duì)發(fā)送一般消息。
在Asana中發(fā)送消息它是協(xié)作項(xiàng)目管理的老手，但Asana幾乎每次都能提供。你會發(fā)現(xiàn)你的大部分客戶和隊(duì)友也有一個(gè)Asana帳戶，這意味著在應(yīng)用程序中進(jìn)行組裝的頻率比你想象的要高。
44. BasecampBasecamp是基于團(tuán)隊(duì)的項(xiàng)目管理的另一個(gè)重要參與者。它是老衛(wèi)士之一，幾乎與WordPress本身一樣長。核心軟件的存在時(shí)間要長得多，因此它的血統(tǒng)和記錄值得注意。
Basecamp主頁在紙面上，與競爭相比，Basecamp沒有什么令人興奮的。老實(shí)說，許多其他協(xié)作應(yīng)用程序已經(jīng)趕上了Basecamp提供的功能。不過，這并不是故事的全部。
是的，您可以創(chuàng)建任務(wù)和待辦事項(xiàng)列表，將它們分配給團(tuán)隊(duì)成員，并在項(xiàng)目范圍內(nèi)處理所有內(nèi)容。不過，Basecamp的殺手锏是基礎(chǔ)設(shè)施和設(shè)計(jì)。
使用Basecamp有一個(gè)簡單的方法：創(chuàng)建一個(gè)項(xiàng)目，制定您的待辦事項(xiàng)列表或時(shí)間表，并將任務(wù)分配給隊(duì)友。每個(gè)項(xiàng)目都有許多獨(dú)立的方面，可以幫助您完成項(xiàng)目：
構(gòu)成Basecamp項(xiàng)目的元素正如我們所說，這里沒有什么開創(chuàng)性的，但這就是重點(diǎn)。Basecamp是一個(gè)可靠的項(xiàng)目管理系統(tǒng)，沒有很多花里胡哨。因此，您將繼續(xù)使用它，因?yàn)樗煽壳铱筛鶕?jù)您的需要進(jìn)行擴(kuò)展。
任務(wù)運(yùn)行
在Web開發(fā)項(xiàng)目中處理微小的任務(wù)會帶來問題。它們是使您更有效率和生產(chǎn)力所必需的。另一方面，您必須花費(fèi)時(shí)間和精力來完成這些微任務(wù)。
為了提供幫助，您需要一個(gè)任務(wù)運(yùn)行器。這里有一些我們的最愛。
45. Grunt Grunt主頁
Grunt是一個(gè)特定于JavaScript的任務(wù)運(yùn)行程序，它看起來可以自動(dòng)執(zhí)行您每天會遇到的一些平凡和重復(fù)的任務(wù)?？紤]一下您通常認(rèn)為是普通的任務(wù)：linting、minification、編譯等等。
Grunt通過基于JSON的配置文件 （稱為“Gruntfile”）為您處理這些。這是一個(gè)例子：
module.exports = function(grunt) {grunt.initConfig({jshint: {files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],options: {globals: {jQuery: true}}},watch: {files: ['<%= jshint.files %>'],tasks: ['jshint']}});grunt.loadNpmTasks('grunt-contrib-jshint');grunt.loadNpmTasks('grunt-contrib-watch');grunt.registerTask('default', ['jshint']);};如果您經(jīng)常發(fā)現(xiàn)您的項(xiàng)目因日常任務(wù)而浪費(fèi)時(shí)間，那么Grunt很可能會成為您的Web開發(fā)工具箱的一部分，就像WordPress、Bootstrap和許多其他工具一樣。
46. GulpGulp標(biāo)志當(dāng)您比較任務(wù)運(yùn)行器時(shí)，通常是Gulp和Grunt之間的槍戰(zhàn)。Gulp是一個(gè)基于JavaScript的工具包，用于自動(dòng)化您的工作流程并提高您的效率。
您將使用專用文件和“流”在將資產(chǎn)和代碼寫入磁盤之前對其進(jìn)行操作。您創(chuàng)建的每個(gè)任務(wù)都是一個(gè)“異步”函數(shù)，您可以將其設(shè)置為私有或公共。不同之處在于權(quán)限之一：私有任務(wù)不能由最終用戶運(yùn)行，并且旨在與其他功能一起使用。
說到這，您可以使用series()和parallel()函數(shù)來創(chuàng)建任務(wù)。這意味著您可以執(zhí)行小任務(wù)，將它們變成更廣泛系統(tǒng)中的一個(gè)齒輪，然后將它們嵌套起來。
此外，您還可以通過社區(qū)創(chuàng)建的插件擴(kuò)展Gulp的功能：
Gulp插件的展示這可能是一個(gè)概括，但Gulp和Grunt都擅長不同的事情。在處理可能是更廣泛的指令集的一部分的資產(chǎn)時(shí)，Gulp是可靠的。因此，您需要在每個(gè)項(xiàng)目的基礎(chǔ)上選擇合適的任務(wù)運(yùn)行器。
容器化工具
我們將在這里冒昧地說，如果您不使用某種形式的容器化或虛擬機(jī)工具，那么您作為Web開發(fā)人員的進(jìn)步將會受到影響。
當(dāng)然，這并不一定適用于所有人，但使用基于容器的開發(fā)環(huán)境有很多好處。這里有一些選擇解決方案。
47. Docker 對于許多人來說，Docker是首選
的 基于容器的開發(fā)環(huán)境。開源平臺不僅僅與容器有關(guān)，但這是使用它的一個(gè)經(jīng)常提到的原因。
Docker標(biāo)志在前端，這是一個(gè)簡單的過程：單擊一個(gè)按鈕并獲得一個(gè)虛擬沙盒開發(fā)環(huán)境。當(dāng)然，任何看起來很簡單的東西都在下面。Docker將用戶界面 (UI)、CLI和API與安全條款相結(jié)合，讓您可以快速部署。
對于許多開發(fā)人員來說，Docker將成為創(chuàng)建新應(yīng)用程序的核心。Web開發(fā)人員——尤其是WordPress開發(fā)人員——可以選擇適合這項(xiàng)工作的工具。Flywheel是領(lǐng)先的平臺。
Docker應(yīng)用程序支持Docker還集成了許多工具——其中一些工具已經(jīng)在您的工作流程中。GitHub、VS Code等應(yīng)用程序可以與Docker連接并提供流暢的集成。
總的來說，Docker可以占據(jù)一整套關(guān)于它所包含內(nèi)容的文章。盡管如此，這些都不是必需的。很可能你每天都在使用Docker，而且你已經(jīng)知道它有多棒了！
48. LXD簡單來說，LXD是Linux發(fā)行版的容器管理器。它是基于圖像的，并帶有幾個(gè)用于Linux的預(yù)構(gòu)建圖像。使用LXD可以讓您高枕無憂，因?yàn)槟鷮⒃谙嗤哪J(rèn)最終用戶操作系統(tǒng)上進(jìn)行開發(fā)。
LXD標(biāo)志它是由Ubuntu開發(fā)者Canonical創(chuàng)建的，當(dāng)然，它維護(hù)著一個(gè)開源結(jié)構(gòu)。您可以使用非特權(quán)容器創(chuàng)建安全環(huán)境，使用許多資源控制資源使用，甚至管理網(wǎng)絡(luò)。
LXD也是可擴(kuò)展的，這意味著您可以運(yùn)行數(shù)千個(gè)計(jì)算節(jié)點(diǎn)或保持簡單。對于基于云的應(yīng)用程序，LXD與OpenNebula集成 ——后者具有管理LXD實(shí)例的官方驅(qū)動(dòng)程序。
默認(rèn)情況下，許多容器化工具使用Ubuntu作為標(biāo)準(zhǔn)虛擬環(huán)境。即便如此，LXD還是針對運(yùn)行發(fā)行版進(jìn)行了優(yōu)化。如果您以前沒有嘗試過，那么值得花時(shí)間在測試工作區(qū)中運(yùn)行。您會發(fā)現(xiàn)它比競爭對手更適合特定的工作流程或客戶項(xiàng)目。
圖像優(yōu)化工具
網(wǎng)絡(luò)上的資產(chǎn)（或媒體，或任何您喜歡的名稱）非常豐富。有完整的在線文化專門基于圖像。因此，盡管使用了許多圖像，但讓您的 Web 開發(fā)項(xiàng)目表現(xiàn)良好是至關(guān)重要的。
以下是一些可用的最流行和優(yōu)秀的圖像優(yōu)化工具。
49. ShortPixelShortPixel網(wǎng)站有許多圖像優(yōu)化應(yīng)用程序可用，但ShortPixel具有主觀上穩(wěn)健的算法。它能夠在不影響質(zhì)量的情況下粉碎圖像文件大小。如果我們很挑剔，我們建議因?yàn)槟J(rèn)設(shè)置是可用的最高壓縮率，如果您的圖像沒有被壓縮到足夠的程度，就沒有其他地方可去。不過，這并不是一個(gè)重大的批評。
ShortPixel在引擎蓋下有大量的功能。有三個(gè)級別的壓縮，一個(gè)很棒的PDF優(yōu)化器，甚至一個(gè)GIF壓縮器。后者是您在許多其他工具中找不到的東西，因此它是產(chǎn)品線的一個(gè)受歡迎的補(bǔ)充。
整個(gè)界面也可以訪問：您將圖像拖放到上傳器上，然后等待ShortPixel發(fā)揮它的魔力。處理完圖像后，您可以批量下載它們或選擇單個(gè)圖像進(jìn)行下載：
從ShortPixel下載圖像ShortPixel API工具也很強(qiáng)大。您會發(fā)現(xiàn)用于減少在線和離線圖像的單獨(dú)API、全面的PHP和.NET客戶端庫、基于JavaScript的自適應(yīng)引擎等等。
我們建議ShortPixel是一款開發(fā)者工具，因?yàn)樗浅＿m合連接您的網(wǎng)站或應(yīng)用程序。我們還說它會很快讓您對TinyPNG上癮，特別是如果您想將它用作更大工作流程的一部分。
50. TinyPNG是時(shí)候使用每個(gè)人最喜歡的圖像優(yōu)化工具 – TinyPNG。您也可以將TinyJPG捆綁到此條目中，盡管這兩種工具都使用相同的圖像格式。
TinyPNG網(wǎng)站您會發(fā)現(xiàn)TinyPNG這些年來并沒有太大變化。它仍然是用于優(yōu)化圖像的簡單拖放工具。沒有任何花里胡哨，也沒有廣泛的文件格式集。盡管如此，TinyPNG
確實(shí)提供了最高的可用性以及與其他工具的大量集成。
例如，有一個(gè)Photoshop插件 和 – 對于更細(xì)粒度的應(yīng)用程序 – 一個(gè)功能開發(fā)人員API。甚至Python用戶也可以參與其中，因?yàn)锳PI也支持這種語言。 許多第三方工具也使用API創(chuàng)建了幾個(gè)插件。
我們并不是說TinyPNG壟斷了圖像優(yōu)化市場，但它通常是許多用戶的首選。拍攝一張圖片并將其放入上傳器需要幾秒鐘的時(shí)間，當(dāng)您獲得 99.9% 完美的圖片表示時(shí)，它很容易被信任。
網(wǎng)站測試工具
我們之前討論過測試您的API和核心站點(diǎn)代碼，盡管這會影響您網(wǎng)站的性能。這里有一些我們喜歡的工具，它們也可以幫助您分析網(wǎng)站的表現(xiàn)。
51. ResponsivelyResponsively應(yīng)用程序如果您曾經(jīng)被需要在應(yīng)用程序中執(zhí)行和完善的媒體查詢的數(shù)量所淹沒，請查看Responsively。它是一個(gè)開源前端工具，可幫助您根據(jù)所選設(shè)備的各種視口開發(fā)網(wǎng)站。
以響應(yīng)方式查看不同的設(shè)備這樣做的好處是您可以并排比較布局。它為您提供了提高設(shè)備之間一致性的可靠機(jī)會。每個(gè)設(shè)備都是精確的，并且有很多可供選擇，如果您的網(wǎng)站針對特定設(shè)備，這非常好。
您還可以為Mozilla Firefox、Microsoft Edge和Google Chrome添加專用瀏覽器擴(kuò)展， 以將頁面發(fā)送到響應(yīng)式瀏覽器。從這里，您可以打開內(nèi)置的開發(fā)工具并開始工作。
Responsively檢查器還有許多其他功能可以幫助您開發(fā)，例如屏幕截圖功能、熱加載支持等。很難與“Responsively”是“Web開發(fā)人員的瀏覽器”的標(biāo)語爭論。它可能最終成為您工作流程的核心組成部分。
52.PageSpeed Insights對于許多人來說，Google的PageSpeed Insights是一個(gè)有價(jià)值的工具，可以幫助您了解網(wǎng)站的運(yùn)行情況以及可以在哪些方面提高加載速度。
Google的PageSpeed Insights也就是說，深入研究一些底層軟件更有趣。它也可能更適合您的需求。Google Lighthouse可以針對任何網(wǎng)頁運(yùn)行，并為頁面性能、SEO、漸進(jìn)式Web應(yīng)用程序 (PWA) 等提供審計(jì)和報(bào)告。
運(yùn)行Google Lighthouse的主要方式是從命令行、使用Chrome的DevTools或作為Node模塊。如果您使用PageSpeed Insights界面，Lighthouse會生成一些分?jǐn)?shù)并提供進(jìn)一步的見解。
值得注意的是，從表面上看，Google Lighthouse和PageSpeed Insights看起來很相似。但PageSpeed Insights使用基于實(shí)驗(yàn)室的數(shù)據(jù)與真實(shí)世界的用戶數(shù)據(jù)相結(jié)合。Lighthouse’suse的分析忽略了用戶數(shù)據(jù)并測量了您網(wǎng)站的更多元素。
在我們看來，值得同時(shí)運(yùn)行PageSpeed Insights和Lighthouse，特別是如果您的客戶的目標(biāo)是登上搜索引擎結(jié)果頁面 (SERP) 的頂部。在任何情況下，它都是一個(gè)可靠的工具，它甚至可以取代PageSpeed Insights作為您選擇的性能工具。
53. Cypress對于許多開發(fā)人員來說，端到端測試并不是一種愉快的體驗(yàn)。Cypress選擇在這座山上消亡——它是一種簡單的解決方案，它逆向端到端測試的趨勢，并產(chǎn)生了一些出色的東西。
Cypress主頁雖然大多數(shù)端到端測試工具都基于Selenium，但賽普拉斯卻朝著不同的方向發(fā)展。這意味著用戶使用基于Selenium的測試人員發(fā)現(xiàn)的問題不存在于此。事實(shí)上，開發(fā)人員希望讓設(shè)置、編寫和運(yùn)行測試變得輕而易舉。
為此，他們從頭開始構(gòu)建架構(gòu)，并專注于端到端測試，排除其他形式。為了提高性能，賽普拉斯與您的程序在同一運(yùn)行循環(huán)中運(yùn)行，而不是通過網(wǎng)絡(luò)執(zhí)行遠(yuǎn)程命令。
由于測試代碼在瀏覽器中運(yùn)行，因此無需考慮驅(qū)動(dòng)程序或語言綁定。即便如此，您也可以在運(yùn)行測試之前編譯成JavaScript。
如果您是質(zhì)量保證 (QA) 工程師或希望您的端到端測試能夠本地訪問您的工作的開發(fā)人員，賽普拉斯應(yīng)該引起您的注意。最好的部分是還有一個(gè)功能齊全的免費(fèi)套餐 ！
54. Stack Overflow和搜索引擎
請?jiān)试S我們擴(kuò)展一下被認(rèn)為是Web開發(fā)工具的界限。Stack Overflow是眾所周知的任何人，甚至對Web開發(fā)有過一些了解：
Stack Overflow網(wǎng)站這是一個(gè)專注于編程的問答網(wǎng)站，它是Stack Exchange網(wǎng)絡(luò)的一部分，涵蓋了所有其他主題：
Stack Exchange網(wǎng)絡(luò)中的眾多利基站點(diǎn)之一它被稱為數(shù)千名開發(fā)人員的首選資源，盡管對其社區(qū)存在一些爭議，但流量仍然很大。我們敢說，Stack與您選擇的搜索引擎一起，代表了一種靈活的Web開發(fā)工具，用于學(xué)習(xí)和提高您的技能。
例如，當(dāng)遇到與代碼相關(guān)的開發(fā)障礙時(shí)，您可能會前往Stack Overflow。同樣，當(dāng)出現(xiàn)您不確定如何解決的錯(cuò)誤時(shí)，將其粘貼到搜索引擎中是找到所需答案的最快方法。
鑒于90%的受訪用戶使用Stack Overflow解決問題，很可能每個(gè)人都會使用該工具。然而，對于初學(xué)者——或者即使你不能清楚地表達(dá)你的問題——搜索引擎可以說會更友好一些。
Web開發(fā)參考
如果您是一名訂閱“RTFM”精神的開發(fā)人員，那么您不需要對以下幾個(gè)條目有任何說服力。相反，如果您想深入研究一個(gè)問題并找出答案，請知道在您之前有無數(shù)的開發(fā)人員可能已經(jīng)找到了答案。
鑒于此，請查看以下幾個(gè)Web開發(fā)工具，均基于 Web 參考資料。
55. MDN網(wǎng)絡(luò)文檔在網(wǎng)絡(luò)的早期，有一個(gè)名為Webmonkey的網(wǎng)站，由Lycos運(yùn)營，旨在向新用戶教授Web開發(fā)和編程。該網(wǎng)站的精神存在于Mozilla的MDN Web Docs中。Webmoney于2004年關(guān)閉，而MDN Web Docs于2005年問世，因此兩者之間有著天然的契合。
MDN Web文檔主頁它是一個(gè)資源集合，可幫助您在某些情況下教您為Web編程，在其他情況下教您特定于Mozilla的產(chǎn)品。內(nèi)容分為兩大類：技術(shù)和參考指南。根據(jù)您現(xiàn)有的能力和經(jīng)驗(yàn)，您將看到幾個(gè)教程、專門的參考指南以及前者的一些進(jìn)一步資源。
這些指南都與開發(fā)行業(yè)中的特定利基和行業(yè)相關(guān)。例如，Web開發(fā)參考充當(dāng)附加HTML、CSS和JavaScript指南的“基石”頁面。
MDN Web文檔JavaScript頁面還對各個(gè)行業(yè)進(jìn)行了廣泛的研究，例如游戲開發(fā)以及在該領(lǐng)域起步所需的條件：
MDN Web Doc的游戲開發(fā)指南MDN Web Docs是初學(xué)者Web開發(fā)人員的必備讀物，它也為專家提供了足夠的價(jià)值。如果有任何網(wǎng)站值得瀏覽器書簽，那就是它！
56. DevDocs — API文檔瀏覽器過去，您會將購買的產(chǎn)品的所有手冊保存在滿是灰塵的抽屜或櫥柜中。隨著生活變得更加數(shù)字化，這些紙質(zhì)手冊已經(jīng)讓位于每個(gè)制造商網(wǎng)站上的PDF下載。
通過這一點(diǎn)，我們現(xiàn)在有了網(wǎng)站，可以在精選圖書館中收集手冊的數(shù)字版本。它使您可以從一個(gè)存儲庫中找到所需的內(nèi)容。因此，有理由認(rèn)為Web開發(fā)主題也會存在。
簡而言之，DevDocs是一個(gè)API文檔庫，我們認(rèn)為它對幾乎所有開發(fā)人員都很有價(jià)值：
DevDocs主頁在瀏覽庫之前，您需要啟用所需的API文檔。您可以從“
首選項(xiàng)” 屏幕執(zhí)行此操作：
DevDocs首選項(xiàng)屏幕完成后，您將能夠從專用樹形菜單訪問相關(guān)文檔：
WordPress API屏幕這是一個(gè)低效問題的簡單解決方案，因?yàn)槟谝粋€(gè)地方有多個(gè)API引用。DevDocs是另一個(gè)值得添加書簽的站點(diǎn)，遺憾的是沒有可用于更快參考的桌面應(yīng)用程序。
57. CSS-TricksChris Coyier是許多Web開發(fā)人員都知道的名字。我們敢打賭，您已經(jīng)熟悉他創(chuàng)建的網(wǎng)站——CSS-Tricks。顧名思義，它是一個(gè)致力于前端編碼，特別是CSS以及如何變得更好的網(wǎng)站。
CSS-Tricks主頁正如關(guān)于頁面所指出的，在最初的幾年里，CSS是主要的話題。不過，從那時(shí)起，HTML、JavaScript、WordPress等變得同樣重要且經(jīng)常被討論。結(jié)果是一個(gè)專注于前端開發(fā)的網(wǎng)站，其中包含大量文章、視頻和指南來激發(fā)您的靈感。
CSS-Tricks的博客一個(gè)簡單但有價(jià)值的元素是CSS Almanac，它概述了CSS中的選擇器和屬性。如果您需要了解該語言的某些方面，這是一個(gè)很好的參考來源。
CSS技巧年鑒雖然CSS-Tricks有類似參考的方面，但它
本身并不是參考資源。盡管如此，它應(yīng)該是您經(jīng)常出沒的地方，無論是通過 RSS 提要還是其他解決方案。內(nèi)容質(zhì)量很高，可以以您以前沒有想到的方式挑戰(zhàn)您。至少，訂閱內(nèi)容并等待CSS-Tricks進(jìn)入您的收件箱。
58. DEV Community想象一下，您可以從社交媒體、Web開發(fā)和Stack Overflow中獲取優(yōu)秀的部分，然后創(chuàng)建一個(gè)將它們合并的站點(diǎn)。DEV Community可能就是結(jié)果。
DEV Community主頁它是一個(gè)博客平臺，也是尋找開發(fā)問題答案的一種方式。您選擇要關(guān)注的標(biāo)簽和人員，您的新聞源將成為帖子和見解的自動(dòng)化和策劃時(shí)間表：
JavaScript標(biāo)記的DEV Community時(shí)間線公平地說，這是您可以在任何地方找到的信息——如果您愿意的話。DEV Community的優(yōu)點(diǎn)是它就在這里，而且它是對開發(fā)主題的定向整理。將其視為開發(fā)人員會議軌道，而不是在公共汽車站無意中聽到并插入相關(guān)對話。
這是另一個(gè)在您的RSS Feed中表現(xiàn)良好的網(wǎng)站，或者作為收件箱中的摘要。因此，它也是一個(gè)“睡眠”資源，因?yàn)槟銜?jīng)常到這里而沒有意識到它。
59. Can I use…你可以說Jeeves開始了通過互聯(lián)網(wǎng)提問來查找信息的趨勢。他很快被各種搜索算法取代，盡管基于問題的搜索仍然是找到所需內(nèi)容的可靠方法。
Can I use…是前端開發(fā)人員對“是否有針對CSS的Ask Jeeves的回答”
Can I use…主頁前提很簡單：您在搜索字段中輸入CSS選擇器或?qū)傩?，?shù)據(jù)庫會返回您是否可以使用它來創(chuàng)建網(wǎng)站。您也不限于CSS。還支持JavaScript和HTML：
在Can I use… 中搜索HTML元素它是一個(gè)前端語言數(shù)據(jù)庫，因此它不會返回PHP、Python或其他服務(wù)器端語言的結(jié)果。即便如此，
我可以使用…是一個(gè)巨大而有價(jià)值的工具，可以幫助您在可訪問性和多設(shè)備設(shè)計(jì)方面提供幫助。
拉出一個(gè)特定元素并一目了然地查看您的目標(biāo)瀏覽器是否支持它是一個(gè)簡單的提議：
Can I use…中的瀏覽器支持表如果仔細(xì)觀察，您還可以找到元素的發(fā)布日期和使用百分比等統(tǒng)計(jì)信息：
Can I use… 中特定元素的信息總的來說，Can I use…可能不會經(jīng)常使用。但是，在項(xiàng)目的某些階段，它幾乎會一直打開。一旦你弄清楚你的目標(biāo)瀏覽器將支持什么，Can I use…
.重新進(jìn)入你的書簽并等待下一次需要它的時(shí)候。當(dāng)涉及到您的前端代碼時(shí)，這是一項(xiàng)有用的服務(wù)，可以成為“water carrier”。
小結(jié)
時(shí)間和金錢都很短，選擇您一直使用的舊Web開發(fā)工具是有一定道理的。然而，對項(xiàng)目需求做出深思熟慮的選擇將在時(shí)間、成本和生產(chǎn)力方面得到回報(bào)。
在這篇文章中，我們介紹了59種令人驚嘆的Web開發(fā)工具，您可以在2022年使用這些工具來為您和您的團(tuán)隊(duì)提供動(dòng)力。你可能已經(jīng)這樣做了。如果各種調(diào)查都是正確的，那么更多的開發(fā)人員會轉(zhuǎn)向GitHub、TypeScript、不同的Web服務(wù)堆棧以及眾多JavaScript框架之一來完成項(xiàng)目。
在線咨詢
