開始JavaScript web開發可能是一個令人沮喪的過程，但是有一些工具可以讓它變得更容易。

代碼筆.io是一個瀏覽器內的編碼環境，旨在學習編碼和快速原型想法以最小的麻煩。

在本文中，我們將介紹該站點的一些功能，以及它們如何幫助您成為一名更好的程序員。

什麼是密碼筆(codepen)？

CodePen提供了一種叫做pen的東西，它包括三個不同的HTML、CSS和JavaScript窗口，還有一個預覽窗格，可以在您鍵入時實時更新。

雖然它經常被web開發人員用來展示網站的想法，但它也是學習前端web開發基礎知識的好地方。下面是使用CodePen時需要知道的最顯著的特性。

1預處理器

預處理器是用來簡化編碼的解釋或編譯語言。為了方便起見，他們可以為一種語言添加特性，並使代碼更易於閱讀。在web開發中，HTML、CSS和JavaScript的預處理器組合用於快速創建乾淨的代碼。

如果您正在學習web開發並想嘗試不同的預處理器，CodePen允許您動態切換預處理器，並實時查看它編譯的代碼。CodePen應用程序上的三個窗格的右上角都有一個下拉菜單。選擇View Compiled HTML/CSS/JS查看如何解釋代碼。

在本文中，我們創建了一個簡單的站點，使用Haml和Sass設置一些標題文本的樣式。選擇View Compiled顯示標準的HTML和CSS。在這個例子中，差異是最小的。然而，在學習一門新語言時，查看預處理代碼在編譯後的外觀會很有用。

2外來資源

除了對預處理器的本機支持外，CodePen還支持外部腳本。這使它成為一個完美的地方，讓你的個人項目與圖書館的實踐經驗，或溫習流行的網絡應用程序庫，如反應。

要添加外部庫，請打開筆上的“設置”窗格，然後轉到“JavaScript”選項卡。添加資源有兩種方法，一種是手動添加資源URL，另一種是搜索。

我們在我們的文章中使用了這個特性，文章中介紹了mo.js公司，以及Babel預處理。

請參閱CodePen上由Ian（@Bardoctorus）編寫的Pen Mojs MUO示例。

是的，代碼筆可以嵌入！繼續並單擊上面的預覽窗格以查看Mo.js公司輔導的！

其他筆可以像外部庫一樣導入。這意味著您可以從以前編寫的筆中提取元素，以便像新筆中的模塊一樣使用。CodePen用戶Adam的簡單Poll筆就是一個很好的例子。

三。模板

當您學習新概念或測試新想法時，您經常使用類似的組件並重新閱讀相同的入門步驟。CodePen允許創建模板筆，可以減少重複，讓你直奔主題。

要創建模板，請打開一支新筆，進行更改，然後在“設置”菜單中選擇“模板”滑塊。

https://vimeo.com/221428690

直到最近，免費用戶只能**三個模板，但現在所有用戶都可以在自己的帳戶中擁有任意數量的模板。非常適合以最小的延遲開始一個新想法！

4協作模式

與CodePen合作和教學的能力可能是它最大的財富。現在已經有很多優秀的程序員協作工具，但是CodePen的方法簡單直觀。

CodePen的專業用戶可以創建一個新的筆，並在“更改視圖”菜單下打開它進行協作。這會將筆的鏈接更改為可共享的邀請，根據您的CodePen Pro計劃可容納一定數量的人。

在這個例子中，我編寫了HTML，而我的一個朋友實時更新了CSS，用一個標記的光標標識了它們的工作位置。

任何擁有該鏈接的人都可以加入並使用瀏覽器內的聊天功能，無論他們是專業用戶，甚至擁有CodePen帳戶。如果autosave處於關閉狀態，則只有筆的所有者才能保存任何更改，從而使之成為向其他人打開代碼而不冒任何風險的安全方式。

這種模式的開放性對初學者是有益的，因為你可以邀請幾乎任何人進入你的筆來指導你通過一個困難的概念。這也是一個方便的方式來了解你周圍的方式，因為它是完美的面試潛在的員工，並已被專業地用在這種方式！

5教授模式

教授模式允許一個專業用戶主持一個房間，只有他們可以編輯代碼。根據主機的專業計劃，10-100個用戶可以觀看和聊天。

教授模式允許課堂學習和遠程學習之間的靈活性，或者兩者的結合。使用Professor模式可以讓教室後面的人和前面的人有相同的體驗，並且老師可以顯示實時更新的錯誤修正。

6演示模式

毫不奇怪，呈現模式的設計考慮到了呈現代碼。該應用程序顯示在一個簡化的視圖，旨在與高架投影儀。CodePen優化了表示模式，可用於低速互聯網連接和較弱的硬件。

精明的讀者可能已經意識到CodePen的免費版本正是提供了這個功能，儘管Pro模式確實有一些有用的特性。佈局、字體大小和主題可以快速更改，以適應幾乎任何設置，並且顯示指向鋼筆的鏈接會顯示一個超大的縮短URL，使共享項目更容易。

這些小的改變，加上能夠縮放預覽窗口以適應你展示的任何東西，使得演示模式對於教師和開發人員來說都是完美的，可以向同事展示想法。如果您正在面試一個編程職位，那麼演示模式也是一種簡潔明瞭的方式來演示代碼。

7模式

通過CodePen的設計模式集合，尋找靈感變得容易多了。

每個類別都是CodePen用戶為特定任務提供的示例代碼的集合。你在尋找一種為你的網站創建動態按鈕的方法嗎？手風琴菜單？幾乎所有的例子都有豐富的分類。

這些模式也是學習交互式按鈕如何工作以及動態用戶界面的不同工作方式的一個很好的方法。

8埃米特

Emmet以前被稱為Zen編碼，被廣泛認為是HTML和CSS開發最節省時間的方法。這個插件把你自己經常寫的一些代碼轉換成簡單的快捷方式。

看到它的實際效果要比解釋它好得多，因此請採用HTML文檔的常規設置：

將此添加到每個HTML文檔中已經簡化為兩個操作。使用Emmet，鍵入！按Tab鍵。魔法！

Emmet在CodePen上是標準的，如果您正試圖學習JavaScript的新概念並且需要快速創建支持HTML和CSS，它特別有用。

使用codepen開發以獲得更好的體驗

CodePen對於web開發人員來說是一個非常好的工具，而且這個領域正在不斷髮展。JavaScript是一種很好的語言，可以為將來的web開發學習。

有一些很棒的教程和課程可供想要開始使用JavaScript的人使用，CodePen是一個很好的環境來測試你的新技能。