鑰匙要點(diǎn)

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

>像許多實(shí)時(shí)代碼游樂場(chǎng)一樣，Codepen可以讓您在開源環(huán)境中學(xué)習(xí)，顯示代碼更改的實(shí)時(shí)預(yù)覽，甚至讓您在任何網(wǎng)頁(yè)上嵌入Codepen演示，如下面的一個(gè)。

請(qǐng)參閱codepen上的一個(gè)Div（@Onediv）的Pen Full CSS NES。

>在本文中，我將超越這些功能，以解釋我認(rèn)為將Codepen置于競(jìng)爭(zhēng)之上的一些事情，以及如果您還沒有這樣做的話，為什么應(yīng)該檢查一下。

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

1。 CSS選項(xiàng)

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

>

如果您不確定使用的某些CSS技術(shù)正在使用該怎么辦？不用擔(dān)心; Codepen具有CSSLINT集成，可以通過您的CSS代碼進(jìn)行搜索，并警告您是否存在錯(cuò)誤，警告，瀏覽器支持不良等。

>

2。 HTML，CSS和JavaScript

的口味

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

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

>

3。 emmet和vim結(jié)合

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

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

4。集合和標(biāo)簽

>您可以在筆中添加標(biāo)簽，然后可以搜索。搜索標(biāo)簽，例如“加載器”和“形式”，帶來了許多有用的靈感。

如果需要，甚至可以創(chuàng)建與某個(gè)主題有關(guān)的筆集合。 Codepen的聯(lián)合創(chuàng)始人之一Chris Coyier創(chuàng)建了諸如“路徑圖”和“重復(fù)模式”等集合。 5。不同的筆圖

>編輯器視圖 - 這是編輯筆的默認(rèn)視圖。您可以調(diào)整代碼預(yù)覽器的大小，然后選擇要顯示的語(yǔ)言。>

詳細(xì)信息視圖 - 此視圖允許您查看筆的標(biāo)簽，心臟，評(píng)論，分叉的筆等。這包含Codepen的大多數(shù)社交功能。

>

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

調(diào)試視圖 - 調(diào)試視圖是一個(gè)全屏視圖，盡管具有額外的功能。它刪除了iframe和codepen頁(yè)腳，以便更輕松的JavaScript控制臺(tái)訪問。這非常適合您認(rèn)為Codepen可能會(huì)干擾的代碼。

>

6。 codepen pro Views

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

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

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

>

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

合作模式 - 合作模式允許多個(gè)程序員同時(shí)對(duì)筆進(jìn)行編輯。也有一個(gè)聊天窗口，就像教授模式一樣。

7。博客

>博客是Codepen上的一項(xiàng)新功能，使您可以像常規(guī)博客一樣輕松地編寫代碼。 您可以使用Markdown編寫，并使用特殊的嵌入工具在需要時(shí)嵌入筆。您可以在帖子中添加自定義CSS，并且有一個(gè)超級(jí)簡(jiǎn)單的預(yù)覽來測(cè)試您的帖子。

8。社區(qū)

>這是在比賽之前將Codepen設(shè)置為遠(yuǎn)射的原因。自一開始以來，社區(qū)就一直是Codepen的重要組成部分。通過評(píng)論和分享，人們可以提出和接受建設(shè)性的批評(píng)，并共同學(xué)習(xí)。諸如4AE9B8和Bullgit之類的團(tuán)體通過Codepen從對(duì)話開始。創(chuàng)始人已經(jīng)談到了他們對(duì)Codepen播客中Codepen社區(qū)的看法。

9。靈感

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

>

以下是一些出色的演示：

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

>最終，使用Codepen可以幫助您更快地學(xué)習(xí)并成為大型社區(qū)的一部分。 SitePoint上的文章通常使用Codepen將代碼嵌入教程。而且，如果您對(duì)Codepen的更多出色功能感興趣，請(qǐng)查看以下內(nèi)容：

>

• 書簽
• > WordPress插件
• oembed
• >雇用我按鈕

>常見問題（常見問題解答）有關(guān)使用Codepen

> Codepen的關(guān)鍵功能是什么，它使其成為開發(fā)人員的首選選擇？

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

>我如何使用CodePen進(jìn)行測(cè)試和調(diào)試？

codepen是測(cè)試和調(diào)試代碼的絕佳工具。它提供了一個(gè)孤立的環(huán)境，您可以在其中編寫，測(cè)試和調(diào)試代碼而不會(huì)影響您的主要項(xiàng)目。您可以輕松地與他人分享您的“筆”，從而成為獲得反饋和幫助調(diào)試的絕佳工具。 Codepen還支持Console.Log，這對(duì)于調(diào)試JavaScript非常有幫助。

我可以使用Codepen進(jìn)行教學(xué)或?qū)W習(xí)編碼嗎？ Codepen是教學(xué)和學(xué)習(xí)編碼的絕佳工具。教師可以創(chuàng)建“筆”來展示編碼概念，學(xué)生可以將這些“筆”分叉進(jìn)行實(shí)驗(yàn)和學(xué)習(xí)。 Codepen還具有“教授模式”，允許教師提供實(shí)時(shí)編碼演示。

codepen通過允許開發(fā)人員查看和測(cè)試他們的設(shè)計(jì)來支持響應(yīng)式設(shè)計(jì)。編輯器內(nèi)的不同設(shè)備尺寸。此功能使創(chuàng)建在所有設(shè)備尺寸上都可以正常工作的設(shè)計(jì)變得更加容易。

>我可以使用Codepen離線嗎？

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

>

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

> codepen社區(qū)是什么樣的？

> codepen社區(qū)對(duì)開發(fā)人員來說是一個(gè)充滿活力和支持的場(chǎng)所。您可以分享您的工作，獲得反饋，向他人學(xué)習(xí)，甚至在項(xiàng)目上進(jìn)行合作。社區(qū)是學(xué)習(xí)和成長(zhǎng)為開發(fā)人員的好地方。

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

以上是您應(yīng)該使用Codepen的9個(gè)原因的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！