您應該使用Codepen的9個原因

鑰匙要點

• codepen.io是一個多功能平台，允許用戶創建“筆”或HTML，CSS和JavaScript集，可以隨時顯示，編輯和接收到的反饋，從而成為測試的理想工具蟲子，協作並找到靈感。
• codepen提供了各種功能，可提高編碼效率，例如CSSLINT集成，對HTML，CSS和JavaScript的不同口味的支持，諸如Emmet等工具包，以供更快開發，以及包括Pro版本的不同視圖，包括其他版本，包括其他版本視圖。
該平台由於其強大的社區方面而脫穎而出，具有共享和接受建設性批評的能力，以及它作為靈感來源的作用，在主頁上展示了令人印象深刻的筆，文章和收藏，以幫助改善用戶的工作以及HTML，CSS和JavaScript的知識。
在Codepen.io上，他們將自己描述為“網絡前端的遊樂場”。 Codepen非常適合測試錯誤，協作和尋找新的靈感。它可以通過允許您創建“筆”，即HTML，CSS和JavaScript的集合。然後，您可以在個人資料上顯示這些筆，接收反饋，並隨時繼續編輯這些筆。

>像許多實時代碼遊樂場一樣，Codepen可以讓您在開源環境中學習，顯示代碼更改的實時預覽，甚至讓您在任何網頁上嵌入Codepen演示，如下面的一個。

請參閱codepen上的一個Div（@Onediv）的Pen Full CSS NES。

>在本文中，我將超越這些功能，以解釋我認為將Codepen置於競爭之上的一些事情，以及如果您還沒有這樣做的話，為什麼應該檢查一下。

在解釋這些功能時，我還將在每個部分中嵌入一些隨機但很酷的筆以供您查看。

1。 CSS選項

codepen包含一些更快地編寫CSS的很棒的功能。您可以通過簡單單擊單擊單擊按鈕選擇將normalize.css或reset.css包含在CSS中。您也可以選擇使用-Prefix -Free或AutoPreeFixer。這樣，就無需花費時間鏈接到外部文件（如果您願意，這也是可能的）。

>

如果您不確定使用的某些CSS技術正在使用該怎麼辦？不用擔心; Codepen具有CSSLINT集成，可以通過您的CSS代碼進行搜索，並警告您是否存在錯誤，警告，瀏覽器支持不良等。

>

2。 HTML，CSS和JavaScript

的口味

codepen支持HTML，CSS和JavaScript的口味的 tons 。對於HTML，您可以使用Haml，Markdown，Slim甚至Jade。對於CSS，它們支持SASS和SCSS（均具有可選的指南針或波旁威士忌附加組件），以及更少的手寫筆。 >

>在JavaScript菜單下，您可以選擇CoffeeScript或Livescript。還有一個下拉菜單，您可以擁有諸如jQuery和angularjs之類的最新版本。

>

3。 emmet和vim結合

codepen是關於更快，更順暢的發展。這就是為什麼他們使用emmet等工具包來幫助項目發展的原因。 Codepen編輯器允許您使用命令行鍵盤快捷鍵的VIM鍵綁定。這兩種工具都可以一起幫助創建更快的工作流程。

要了解有關Emmet的更多信息，您可以更快地查看文章：掌握emmet。

4。集合和標籤

>您可以在筆中添加標籤，然後可以搜索。搜索標籤，例如“加載器”和“形式”，帶來了許多有用的靈感。

如果需要，甚至可以創建與某個主題有關的筆集合。 Codepen的聯合創始人之一Chris Coyier創建了諸如“路徑圖”和“重複模式”等集合。 5。不同的筆圖

>編輯器視圖 - 這是編輯筆的默認視圖。您可以調整代碼預覽器的大小，然後選擇要顯示的語言。 >

詳細信息視圖 - 此視圖允許您查看筆的標籤，心臟，評論，分叉的筆等。這包含Codepen的大多數社交功能。

>

>全頁視圖 - 這是非常不言自明的。它使您的筆在iframe內部全屏，只留下一個編碼器。

調試視圖 - 調試視圖是一個全屏視圖，儘管具有額外的功能。它刪除了iframe和codepen頁腳，以便更輕鬆的JavaScript控制台訪問。這非常適合您認為Codepen可能會干擾的代碼。

>

6。 codepen pro Views

如果您是Codepen Pro用戶，則可以訪問更多視圖：>

>演示模式 - 此模式特別適用於螺旋槳投影儀。它刪除了標頭，以為您提供更多的空間，並允許您快速更改代碼編輯器的字體大小和顏色。您也可以在不更改代碼的情況下更改預覽器的大小。

實時視圖 - 使用Codepen Live View，您的筆有全屏顯示。在您編輯該筆時，它將在輸入時自動更新。在多個設備上測試時通常使用。

>

教授模式 - 此模式允許人們實時觀看您的代碼。還有一個聊天窗口，教授和學生可以聊天。

合作模式 - 合作模式允許多個程序員同時對筆進行編輯。也有一個聊天窗口，就像教授模式一樣。

7。博客

>博客是Codepen上的一項新功能，使您可以像常規博客一樣輕鬆地編寫代碼。 您可以使用Markdown編寫，並使用特殊的嵌入工具在需要時嵌入筆。您可以在帖子中添加自定義CSS，並且有一個超級簡單的預覽來測試您的帖子。

8。社區

>這是在比賽之前將Codepen設置為遠射的原因。自一開始以來，社區就一直是Codepen的重要組成部分。通過評論和分享，人們可以提出和接受建設性的批評，並共同學習。諸如4AE9B8和Bullgit之類的團體通過Codepen從對話開始。創始人已經談到了他們對Codepen播客中Codepen社區的看法。

9。靈感

>令人印象深刻的筆總是顯示在首頁上，以及出色的文章和收藏。筆既可以作為靈感，又是一種有趣的學習方式。通過出色的筆進行搜索可以幫助您改善自己的工作，並幫助您提高對HTML，CSS和JavaScript的了解。

>

以下是一些出色的演示：

Canvas Sparkle Light Exial by Jack Rugile
《星球大戰》（Star Wars）從1977年開始爬行蒂姆·彼得魯斯基（Tim Pietrusky）
• Justin Windle
Makisu CSS 3D下拉概念
> CSS 3D X-WING JULIAN GARNIER
• Marius Balaj
Anand
可淚的布，令人吃驚
• 結論

>最終，使用Codepen可以幫助您更快地學習並成為大型社區的一部分。 SitePoint上的文章通常使用Codepen將代碼嵌入教程。而且，如果您對Codepen的更多出色功能感興趣，請查看以下內容：

>

• 書籤
• > WordPress插件
• oembed
• >僱用我按鈕

>常見問題（常見問題解答）有關使用Codepen

> Codepen的關鍵功能是什麼，它使其成為開發人員的首選選擇？

codepen是一個社會開發環境，它提供了一系列功能，使其成為開發人員的首選選擇。它提供了代碼更改的實時視圖，這意味著開發人員可以看到他們實時進行的更改。此功能大大加快了開發過程。 Codepen還支持SCSS，SILSE和Stylus之類的預處理器，這可以幫助開發人員編寫更有效的代碼。它還提供了協作模式，該模式允許多個開發人員同時在同一項目上工作。此功能對於團隊項目和配對編程特別有用。

>我如何使用CodePen進行測試和調試？

codepen是測試和調試代碼的絕佳工具。它提供了一個孤立的環境，您可以在其中編寫，測試和調試代碼而不會影響您的主要項目。您可以輕鬆地與他人分享您的“筆”，從而成為獲得反饋和幫助調試的絕佳工具。 Codepen還支持Console.Log，這對於調試JavaScript非常有幫助。

我可以使用Codepen進行教學或學習編碼嗎？ Codepen是教學和學習編碼的絕佳工具。教師可以創建“筆”來展示編碼概念，學生可以將這些“筆”分叉進行實驗和學習。 Codepen還具有“教授模式”，允許教師提供實時編碼演示。

codepen通過允許開發人員查看和測試他們的設計來支持響應式設計。編輯器內的不同設備尺寸。此功能使創建在所有設備尺寸上都可以正常工作的設計變得更加容易。

>我可以使用Codepen離線嗎？

Codepen主要是在線工具，但它確實提供了一些離線功能。您可以使用codepen離線來處理“筆”，但是您需要上網以節省更改。

>

>我如何在Codepen上分享我的工作？ Codepen很容易。您可以共享“筆”的URL，也可以將“筆”嵌入另一個網站。 Codepen還提供了一種“演示模式”，非常適合現場演示或演示文稿。

> codepen社區是什麼樣的？

> codepen社區對開發人員來說是一個充滿活力和支持的場所。您可以分享您的工作，獲得反饋，向他人學習，甚至在項目上進行合作。社區是學習和成長為開發人員的好地方。

我可以將Codepen用於商業項目嗎？但是，重要的是要注意，您在Codepen上創建的任何“鋼筆”默認情況下是公開的，因此您應該小心，不要在您的“ PENS”中包含任何敏感或專有信息。

>

> Codepen如何處理CSS和JavaScript預處理器？

> codepen支持各種CSS和JavaScript預處理器，包括SCSS，Limest，Stylus， babel和打字稿。這意味著您可以用預處理器語言編寫代碼，而Codepen將其編譯為CSS或JavaScript。 ，您可能會考慮幾種選擇。其中包括JSFIDDLE，PLUNKER和GLITER。這些工具中的每一個都有其自己的優點和劣勢，因此最佳選擇取決於您的特定需求和偏好。

以上是您應該使用Codepen的9個原因的詳細內容。更多資訊請關注PHP中文網其他相關文章！