CodePen:構建,測試,共享和發現HTML,CSS和JavaScript

Codepen:構建,測試和發現前端代碼

內容管理系統的一項挑戰是測試和生產腳本化工具。 儘管對於大多數發布者而言,這並不是必需的,但作為技術出版物,我確實喜歡不時共享工作腳本以幫助其他人。 我已經分享了使用方法 JavaScript檢查密碼強度,如何 使用正則表達式檢查電子郵件地址語法 (正則表達式),並且最近添加了此內容 預測在線評論對銷售的影響的計算器。 我希望在網站上添加許多工具,但是WordPress不利於這樣的發布……這是一個內容系統,而不是開發系統。

因此,為了使我的小腳本正常工作,我喜歡使用 CodePen。 CodePen是一個井井有條的工具,具有HTML面板,CSS面板,JavaScript面板,控制台以及所發布的代碼的發布。 當您將鼠標懸停在元素上時,每個面板都有信息,以便您了解可能的內容以及HTML,CSS和JS的顏色編碼,以幫助您更輕鬆地進行編輯和編寫。

CodePen是一個社會發展環境。 從本質上講,它允許您在瀏覽器中編寫代碼,並在構建時查看其結果。 一個有用且自由的在線代碼編輯器,適合任何技能的開發人員,尤其是增強了學習代碼的人員的能力。 CodePen主要專注於前端語言,例如HTML,CSS,JavaScript和可轉化為這些內容的預處理語法。

關於CodePen

使用CodePen,我能夠完成所有必要的工作 發布計算器 我嵌入了該網站。 CodePen上的大多數作品都是公開和開源的。 他們是其他人和社區可以與之互動的生物,從簡單的舉止,發表評論到為自己的需要分叉和改變。

CodePen-預測在線評論對銷售的影響的計算器

使用CodePen,如果您希望在工作時將窗格放在左側,右側或底部,則可以更改視圖…或在新選項卡中查看HTML。 並排視圖可以很好地測試您的響應式設置,因為您可以調整可見窗格的大小。

您可以將每個工作腳本組織到Pens中,將它們組合到Projects(多文件編輯器)中,甚至構建集合。 從根本上來說,這是一個工作正常的前端代碼組合站點,您可以在其中跟隨其他作者,將其他公共共享的項目放入您自己的庫中進行修改,甚至學習如何通過挑戰做一些有趣的事情。

您可以另存為GitHub Gist,導出為zip文件,甚至 像這樣的文章中的筆:

見筆
在線評論的預測銷售影響
by Douglas Karr (@douglaskarr)
on CodePen.


Pen編輯器的局限性之一是龐大的代碼量。 您可能永遠都不會遇到這個問題,因為編輯器應該可以處理數百甚至數千行代碼。 但是,當他們開始輸入5,000 – 10,000或更多行的代碼時,您將看到編輯器開始失敗。 但是,您可以將外部引用添加到其他地方託管的樣式表或JavaScript!

我鼓勵您註冊。 您將訂閱他們的每週電子郵件,還可以將提要添加到RSS提要中,以便可以看到新發布的筆。 而且,如果您開始在那裡搜索或瀏覽公用筆,您會發現一些令人難以置信的項目……用戶很有才華!

社交媒體 Douglas Karr 在Codepen上

付費版本CodePen Pro為改進的功能或團隊提供了大量附加功能,包括協作,流程,資產託管,私有視圖,甚至具有您自己的域或子域的已部署項目。 而且,當然,CodePen提供了與Github集成的出色存儲庫,您的整個團隊都可以在其中工作。 如果您只是想測試一些簡單的代碼,那麼CodePen是一個非常有價值的工具。

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.