當我不久前寫過有關 JSbin 的文章時，它確實激起了很多關于哪種在線代碼片段編輯器最好的討論和爭論。一些替代方案被拋棄，尤其是 codepen。
由于有如此多的讀者感到如此熱情并致力于他們的具體選擇，我想做一篇文章來強調 CodePen 的一些酷炫之處。我想說這不是一篇比較文章，主要是因為我真的很討厭寫這類文章。這些工具中的每一種都是獨一無二的，并提供其自己的價值，我發現在許多情況下這可以歸結為用戶的偏好。
共同點
這些工具之間在用戶界面和功能方面確實有相似之處。如果我們查看這兩個工具，您會發現多窗格 ui 相當常見，并且有充分的理由；這非常直觀。
JSBin：
立即學習“Java免費學習筆記（深入）”；
代碼筆：
多窗格方法使您可以非常輕松地可視化示例代碼的所有方面，從而使您能夠快速更新標記或 JavaScript 并立即獲得結果。這就是這些工具的一般用途；快速原型設計和代碼片段測試。
除了 UI 相似之處之外，這兩個編輯器還允許用戶：
- 參考第三方庫
- 保存代碼片段以供將來使用
- 通過自定義鏈接分享片段
- 與其他開發者就同一代碼進行協作
- 將代碼片段嵌入其他頁面
- JavaScript linting
從我的角度來看，這些都是任何代碼箱工具的關鍵功能，允許用戶不僅使用他們常用的資產來構建前端代碼原型，還允許他們在開發人員使用的大多數媒體上共享它。作為一名技術作家，嵌入實時代碼片段的能力非常重要，因為它提供實時反饋來演示我創建的代碼，強化我正在編寫的概念，同時還向讀者提供真實的反饋和代碼。
在某些情況下，功能對等歸結為成本，即這些功能是否可用。例如，如果您需要協作功能，JSBin 可以免費提供，而該功能僅適用于 CodePen 的專業級產品。需要明確的是（我之前已經說過了），我認為對出色的功能收費是完全可以的。因此，我認為該功能是免費的還是基于訂閱的并不重要，只要它能為用戶帶來價值即可。
代碼筆
在我使用過的所有代碼箱工具中，我可以肯定地說 CodePen 是迄今為止最美觀的，而且老實說，它是有道理的。 CodePen 的前端設計是由極其有才華的開發人員 Chris Coyier 構建的，他對用戶界面設計有著驚人的眼光。這當然體現在該工具精美的外觀和感覺上。
我們花了很多心思來提供對眾多重要功能的輕松訪問，同時確保編輯器不混亂并且功能不具有侵入性。這很重要，因為在這種類型的 UI 中，視口空間很緊張。嘗試平衡一切，提供跨多種語言的良好編碼體驗，同時提供立竿見影的結果；這確實很棘手，并且迫使我們在布局方面進行一些思考。
這在每個腳本窗格的標題中使用適當放置的圖標中顯而易見。
利用常用的 UI 圖標進行設置（齒輪），您可以看到 CodePen 團隊如何很好地整合了相當多重要的補充功能，從而增強了原型設計體驗。這就是我所說的用戶界面不具有侵入性的意思：提供額外功能的直觀快捷方式。但這不僅僅是添加額外的功能。這些是網絡開發人員每天使用的現實工具，對于正確了解他們的原型是否有效非常重要。
諸如“詳細信息”視圖之類的功能表明 CodePen 不僅專注于提供可靠的編輯體驗，而且還注重提供強大的社交角度，使用戶能夠更好地了解他們的代碼片段的有用性轉發：
現在，雖然這兩種工具都提供了廣泛的互補功能，但在我看來，CodePen 通過對 sass、less 和 stylus 的豐富支持（包括 Compass、Bourbon 和 Nib 等附加組件）表現出明顯的傾向，即為設計人員提供更好的工具。
盡管 CodePen 在 css 和標記方面表現出色，但在 JavaScript 庫支持方面卻沒有 JSBin 那么多。這并不是說它不包括很多主要參與者，但隨著當今使用的大量新庫和框架，內置支持方面存在明顯差異：
代碼筆：
JSBin：
從這些屏幕截圖（僅部分截圖）中可以清楚地看出，JavaScript 框架支持的廣度無論是數量還是支持的版本都遠遠超過 CodePen。 CodePen 確實提供了將外部 JavaScript 資源包含到代碼片段中的功能，但是能夠單擊下拉列表并從一系列 JS 框架中進行選擇的便利性非常有用。
不過，有一個功能對我來說非常突出，那就是：
沒錯。 CodePen 包含與我最喜歡的瀏覽器測試工具之一 BrowserStack.com 的集成。我之前寫過有關該服務的文章，并且非常喜歡它的測試簡單性和瀏覽器覆蓋范圍的廣度，因此看到 CodePen 提供與其集成是一個很大的優勢。但讓它變得如此出色的不僅僅是一個按鈕。它旁邊的下拉菜單允許您決定要定位的瀏覽器：
…然后將您定向到具有相同信息的 BrowserStack：
就便利性而言，這對開發者來說無疑是一個勝利。請務必注意，當您單擊 BrowserStack 按鈕時，您將被重定向離開 CodePen，并且您需要擁有 BrowserStack 帳戶才能使用它。
選擇 CodePen Pro
CodePen 有免費版和功能更豐富的Pro 版本。這包括跨多個設備實時預覽代碼、與其他開發人員協作、嵌入式代碼筆主題和直觀的“教授模式”等功能，這對于在線培訓和課程非常有用。
在可用的 Pro 功能中，我發現最有用的兩個是實時視圖和資產托管，后者允許開發人員上傳圖像和腳本文件等資產，可以直接在代碼筆中使用。
您可能想知道為什么這有用？那么，另一種選擇是尋找外部托管選項，例如 CDN 或您自己的服務器。能夠直接上傳您自己的自定義 JavaScript 文件、圖像或樣式表解決了這個問題，并使這些資源可以隨時在您的代碼筆中使用。上傳后，只需單擊資產、獲取其 URL 并將其放入您的代碼中即可：
僅此一項就值得每月支付 9 美元來使用該服務，而且這似乎是 CodePen 獨有的。
我非常喜歡實時查看功能的原因是，當今跨不同外形尺寸的測試非常重要。這是通過將筆的鏈接發送到您要測試的設備來完成的。這可以通過直接在移動瀏覽器的 URL 欄中輸入或使用 CodePen 的共享對話框將文本消息發送到移動設備來完成：
當筆在計算機上更新時，它幾乎會立即反映任意數量設備上的更改。
CodePen 構建精良
CodePen 是一個很棒的工具。它非常精致且功能豐富，對標記和 CSS 工具提供出色的支持。事實上，某些功能僅基于訂閱，這并沒有讓我感到困惑，因為我不介意支持好的軟件。我想說的是，有些功能似乎應該成為該服務的標準部分，特別是創建私人筆和實時預覽，特別是當其他服務已經免費提供這些功能時。
在我看來，在使用過 JSBin 和 CodePen 后，很明顯它們具有非常相似的功能，并且選擇使用哪種服務最終將取決于個人喜好。有些人可能喜歡 CodePen 的專業 UI，而另一些人可能喜歡 JSBin 中廣泛的 JavaScript 框架支持。它可能只是歸結為使用兩者來完成不同的任務，但我可以說 CodePen 無疑是一項值得利用的服務，我將把它添加到我的行業工具中。
