8 個學習 Web 開發的代碼遊樂場

已發表: 2021-07-24

無論您是初級程序員還是專家級開發人員，代碼遊樂場在與他人分享和學習時都非常有用。

代碼遊樂場是一種在線服務，您可以在其中編寫、編譯（或運行）代碼並與他人共享代碼。 它們還使您能夠分叉並玩弄其他人的代碼。

如果您正在學習 Web 開發並練習您的 HTML 或 CSS 技能，那麼使用代碼遊樂場將有助於在線創建簡單的網頁。 此外，您可以利用這些平台中的趨勢項目並將其作為學習資源。

另一方面，如果您是一名專業的 Web 開發人員並想炫耀您的工作，那麼代碼遊樂場是實現這一目標的理想場所。

最好的部分是大多數代碼遊樂場都有一個免費層，您可以將代碼結果嵌入到您的網站中。

讓我們回顧一下其中的一些！

JSFiddle

JSFiddle 是一個代碼遊樂場，您可以在其中測試 HTML、CSS 和 Javascript 片段。 它來自 2009 年的概念驗證應用程序，現在是最大的代碼遊樂場之一。

您可以創建一個免費帳戶，保存您所有的小提琴，還可以分叉其他人的片段。

JSFiddle 另一個令人印象深刻的事情是協作會議。 您可以在編寫代碼的同時創建音頻聊天會話。

如果您是一位想要嵌入代碼片段結果及其源代碼的博主，那麼 JSFiddle 將是一個很好的選擇。

當然，在編寫時，此代碼遊樂場不支持其他流行的編程語言，如 Python、Go 或 PHP，因此您不能期望在其上構建全棧應用程序。

特徵

  • 免費使用平台
  • 簡約界面
  • 支持 HTML、CSS 和 JS
  • 在平台上分叉任何公共小提琴片段
  • 直接在網站上使用音頻聊天與其他人協作
  • 良好的文檔
與大多數這些平台一樣，有一個“額外”的計劃可以幫助維護它們的正常運行。 如果您依賴它們，則應考慮支持它們。

代碼筆

Codepen 不僅僅是一個代碼遊樂場，而是一個希望提高技能並分享最好的工作的開發人員社區。

來自@Yakudoo

它擁有超過 600 萬用戶，是最常用的前端開發在線代碼編輯器之一。 如果您開始學習前端，那麼尋找想法和動力來繼續您的學習之旅是理想的選擇。

開發體驗如何？

我可以告訴你，Codepen 有一個用戶友好的編輯器，帶有三個可調整的面板，可以用 HTML、CSS 和 JS 進行編碼。 Codepen 包括對 Javascript 和 CSS 預處理器（如 Typescript 和 Sass）的內置支持。 此外，如果您依賴 npm 包，則可以從設置面板安裝它。

特徵

  • 可選的專業計劃
  • 易於使用的代碼編輯器
  • 很棒的社區
  • 大多數代碼筆都是開源的
  • 實踐前端開發的理想場所

代碼沙盒

如果您沒有正確的設置，製作網站原型可能是一項艱鉅的任務。 當優先考慮快速構建網站時，使用 CodeSandbox 應該是一個明智的決定。

顧名思義，CodeSandbox 為前端開發提供了一個沙盒環境。

代碼沙箱

從 GitHub 集成和調試工具到可自定義的類似 VS 代碼的體驗，這個代碼遊樂場為您提供了在幾秒鐘內開始編碼的一切。

如果您的主要目的是協作，您只需要分享您的沙盒鏈接，您就可以進行實時結對編程了。

例如，您可以探索精選的最佳沙箱列表。

我可能沒有時間列出 CodeSandbox 的所有特性，所以讓我們提一下它的殺手級特性。

特徵

  • GitHub 集成
  • 基於為流行的 VScode 編輯器提供支持的Monaco 編輯器
  • 合作第一平台
  • 部署到 Vercel 或 Netlify
  • 調試工具
  • 即用型測試框架
  • 支持

單獨學習

流行的編碼學習平台 Sololearn 有自己的 Web 開發代碼遊樂場。

老實說，它不像我們在本文中看到的其他在線編輯器那樣是功能齊全的 IDE，但它提供了一個無干擾的環境，您可以在其中編寫和運行代碼。

如果您剛剛開始編程，這應該綽綽有餘。

Sololearn 的另一個優點是偉大的社區和對多種編程語言的支持——如果你想嘗試使用其他技術，這是非常好的。

Sololearn 代碼編輯器

特徵

  • 免費使用您的 Sololearn 帳戶
  • 簡單的在線代碼編輯器
  • 共享代碼的大社區
  • 支持多種語言
  • Sololearn 課程的絕佳生態系統

總而言之，Sololearn 的代碼遊樂場不包含電池，但它可以正常工作，如果您已經是數百萬 sololearner 中的一員，那麼您應該嘗試一下。

編碼

Codeply 最好的一點是支持多個開箱即用的框架和庫，以及面向設計的響應式代碼編輯器。

如果您剛剛開始使用 React、Vue 或 Angular 等新框架，那麼 Codeply 是一個很好的起點，因為它有一套完整的入門模板和一個由超過 4 萬名開發人員組成的優秀社區。

特徵

  • 免費使用平台
  • 簡單而直接的文檔
  • 一次性費用專業計劃
  • 包括 50 多個圖書館
  • 在不同的屏幕分辨率下測試您的網絡

複製

Replit 可能是最適合所有開發人員的在線 IDE。 它實際上包括您需要構建的所有內容，從簡單的主頁到使用任何現代 JS 庫的複雜 Web 應用程序。

轉載首頁

借助 Replit，您可以使用 50 多種語言進行編碼、與同行同步編寫應用程序、測試您的程序、與 GitHub 集成，並訪問那裡最大的開發者社區之一。

提到 Replit 的所有功能，我真的可以用完了，所以讓我們跳到主要功能。

特徵

  • 免費的入門包或 5 美元/月的黑客計劃
  • 多人模式（現場配對編程）
  • 大社區
  • 支持多種語言
  • 編輯器定制
  • 運行按鈕：使用可自定義的操作運行項目
  • 秘密存儲
  • 託管代碼

閃電戰

如果您離不開 VS 代碼，StackBlitz 是您的正確選擇。 就像 CodeSandbox 一樣，它基於Monaco 編輯器，為這個流行的代碼編輯器提供支持。

只需使用您的 GitHub 帳戶登錄，瞧！ 您可以進入熟悉的環境。

除了代碼編輯器的體驗，這是一個非常可靠的遊樂場。 您可以將現成的模板用於前端框架和庫，例如 React、Vue、Angular、Svelte 和 Ionic。

但是這個工具的主要特點是能夠使用後端框架，如 Node.js、Next.js 和 GraphQL。

特徵

  • 免費的“學員”計劃
  • 瀏覽器中的 VS 代碼體驗。 這包括 Intellisense、項目搜索等。
  • 流暢（真正流暢）的編碼體驗
  • 離線代碼編輯器（嘿！如果您斷開連接一兩天可能會很有用）
  • 託管應用程序 URL：輕鬆實時共享

毛刺

最後但並非最不重要的一點是，Glitch 是一個協作式編程環境，可以讓創建 Web 應用程序變得更容易。

它具有最令人愉快的編碼界面之一！ 看看吧：

如果你想知道，是的，它有一個黑暗模式。

除了漂亮的界面之外，Glitch 還因其可用性、實時結對編程和友好社區而被數百萬人使用。

您不僅可以使用 HTML、CSS 和 JS，還可以使用 Node.js（後端）、React 或 Eleventy（在進入 Glitches 頁面之前我不知道它們存在）創建任何類型的全棧應用程序。

特徵

  • 免費計劃，可選擇升級
  • 在瀏覽器中開發全棧應用
  • 現場結對編程
  • 令人愉快的界面
  • 入門應用
  • 混音（或分叉）其他人的公共應用

結論

如今，您可以使用我們上面看到的代碼操場來完全構建任何網絡應用程序。 不再需要在計算機上下載繁重的 IDE，而無需退出 Web 瀏覽器即可構建、調試、測試和部署。

如果您不太確定過渡到使用這些工具，為什麼不查看 10 個最佳代碼編輯器（您需要在您的機器上安裝的那些）。