Glitch是一個非常了不起的平台，用於學習和嘗試代碼。這篇文章向您介紹了Glitch，並使您從零變成英雄
毛刺是學習編碼的絕佳平台。
我在許多教程中都使用了Glitch，我認為這是一個很棒的工具到展示櫃概念，以及允許人們使用您的項目並以此為基礎。
這是我在Glitch上進行的一個示例項目反應和反應路由器：https://glitch.com/edit/#!/flaviocopes-react-router-v4-2
借助Glitch，您可以輕鬆創建演示和原型用JavaScript編寫的應用程序的範圍，從簡單的網頁到高級框架，例如React或Vue，以及服務器端Node.js應用。
它建立在節點，並且您可以安裝任何npm您想要的程序包，運行網頁包以及更多。
它是由製作了一些非常成功的產品的人提供給您的，其中包括Trello和Stack Overflow，因此它具有很多可信度。
為什麼我認為Glitch很棒？
小故障為我“點擊”了它如何在有趣的接口，但是不笨。
您有權訪問日誌， 這安慰，以及許多內部內容。
同樣，在界面中如此突出的重新混音概念使我更有可能在那裡創建許多項目，因為我從來不需要從頭開始。
您可以開始研究代碼不浪費時間通過自動設置環境，版本控制並專注於創意HTTPS網址和CDN媒體資產。
另外，根本沒有鎖定，只是Node.js（或者，如果您不使用服務器端JavaScript，則只有HTML，JS和CSS）
它是免費的嗎？
是的，它是免費的，並且將來他們可能會為付費計劃在頂部添加更多功能，但他們聲明，當前的Glitch將始終像現在一樣是免費的。
有合理的限制，例如
- 您有128MB的空間（不包括npm軟件包），加上512MB的媒體資源
- 每小時最多可處理4000個請求
- 如果5分鐘未訪問應用程序，則這些應用程序將停止運行，並且它們不會收到任何HTTP請求，並且長時間運行的應用程序會在12小時後停止。一旦HTTP請求進入，它們就會重新開始
小故障概述
這是Glitch主頁，其中顯示了一些他們因很酷而決定展示的項目，以及一些入門項目：
創建帳戶是免費和容易的，只需按“登錄”，然後在Facebook和GitHub之間進行選擇作為您的“入口”（我建議使用GitHub）：
您被重定向到GitHub進行授權：
登錄後，主頁將更改為同時顯示您的項目：
點擊您的專案將您帶到您的個人資料頁面，該頁面的URL中有您的名字。我的是https://glitch.com/@flaviocopes。
你可以別針項目，以便在有很多項目時更輕鬆地找到它們。
混音的概念
當然，當您第一次開始時，您將沒有自己的項目。
Glitch使啟動變得非常容易，而且您永遠不會從空白項目開始。你總是混音另一個項目。
您可以重新混合自己喜歡的項目，也許是您在Twitter上找到的項目或在Glitch主頁上精選的項目，也可以從一個樣板項目開始以開始一些工作：
這些系列中還有許多其他入門故障：
如果您現在正在學習編碼，學習編碼故障收集是非常好的。
我創建了一些入門應用程序，這些應用程序經常用於演示和測試，它們是：
Glitch使創建自己的構建塊變得非常容易，並且通過將它們固定在您的個人資料中，可以使它們始終位於頂部，易於查找。
重新混合故障
一旦出現故障，只需單擊它，然後會出現一個窗口：
有3個按鈕：
- 預覽小故障是執行某些操作的代碼。這顯示了故障的結果。
- 編輯專案顯示項目的來源，您可以開始對其進行編輯
- 混音將故障克隆到新的故障
每次重新混合故障時，都會使用隨機名稱創建一個新項目。
這是通過重新混合另一個而產生的故障：
小故障給它起了名字guttural-noodle。單擊名稱可以更改它：
您也可以更改描述。
在這裡，您還可以從零創建一個新的故障，重新混合當前故障，或轉到另一個故障。
GitHub導入/導出
從GitHub輕鬆導入/導出到GitHub，這非常方便：
保持項目私密
單擊該鎖可將故障變為私有狀態：
創建一個新項目
單擊“新建項目”顯示3個選項：
- 節點應用
- 節點sqlite
- 網頁
這是查找這些入門應用程序並將其重新混合的快捷方式。在後台，單擊這些選項之一將重新混合現有的故障。
出現任何故障時，單擊“顯示”將在運行該應用程序的位置打開一個新選項卡：
應用程式網址
注意URL，它是：
https://flavio-my-nice-project.glitch.me
這反映了應用程序名稱。
編輯網址有些不同：
https://glitch.com/edit/#!/flavio-my-nice-project
預覽在的子域上運行glitch.me，而在上完成編輯glitch.com。
注意到頁面右邊的魚了嗎？ Glitch建議將它添加到頁面中，以便其他人重新混合項目或查看源代碼：
運行應用
每當您更改源時，都會重新構建應用程序，並刷新實時視圖。
這非常方便，實時應用更改可提供即時反饋，這對開發非常有幫助。
機密
您不希望任何人都可以看到該代碼中可能使用的任何API密鑰或密碼。這些秘密字符串中的任何一個都必須放在特殊字符中.env文件，旁邊有一個密鑰。
如果您邀請合作者，則他們將能夠看到內容，因為他們是項目的一部分。
但是，任何混音的人或您邀請您提供幫助的人都不會看到文件內容。
管理檔案
將新文件添加到項目很容易。
你可以從本地計算機拖放文件和文件夾，或點擊“新文件文件列表上方的“”按鈕。
如何重命名，複製或刪除文件也很直觀：
一鍵式許可和行為準則
在示例項目中忽略在代碼中擁有許可證是一件事情，但是它決定了他人可以對您的項目做什麼或不能做什麼。沒有許可證，項目不是開源的，並且保留所有權利，因此無法重新分發代碼，其他人也不能對其進行任何操作（請注意：這是我的理解，IANAL-我不是律師）。
小故障超級容易要添加許可證，請在新文件控制板：
您也可以輕鬆更改它：
對於任何項目和社區，行為準則都是另一個非常重要的部分。它使貢獻者對社區的參與感到受到歡迎和保護。
這添加行為準則按鈕為您可以開始的開源項目添加了示例行為準則。
添加一個npm包
點擊package.json文件，如果還沒有，請創建一個空文件。
點擊添加包裹現在顯示在頂部的按鈕，您可以添加新軟件包。
另外，如果您有需要更新的軟件包，則Glitch會顯示需要更新的軟件包數量，您可以單擊一下以將其更新為最新版本：
使用自定義版本的Node.js
您可以將Node.js版本設置為這些中的任何一個在你的package.json。使用.x將使用主要版本的最新版本，這是最有用的功能，例如：
{
//...
"engines": {
"node": "8.x"
}
}貯存
小故障有一個持久的文件系統。即使您的應用已停止，文件也會保留在磁盤上，或者長時間不使用。
這使您可以使用本地數據庫或基於文件的存儲（平面文件）將數據存儲在磁盤上。
如果您將數據放入.data文件夾，此特殊名稱表示在重新混合故障後，內容將不會復製到新項目。
在頁面中嵌入故障
使用Glitch創建教程的關鍵是能夠在頁面中嵌入代碼和演示視圖。
點擊分享和嵌入項目打開“嵌入項目”視圖。在這裡，您可以選擇僅嵌入代碼，應用程序，或自定義小部件的高度-並獲取要放置在您網站上的HTML代碼：
出現故障時進行協作
在“共享”面板中，邀請合作者進行編輯鏈接可讓您邀請任何人與您實時編輯故障。
您可以看到他們所做的更改。它太酷了！
尋求幫助
鏈接到此協作功能，有一個很棒的功能：您可以從世界上任何一個人那裡尋求幫助，只需在頁面中選擇一些文本，然後單擊舉手圖標即可：
這將打開一個面板，您可以在其中添加語言標籤以及所需內容的簡要說明：
完成後，您的請求將顯示在Glitch主頁上，以供任何人接聽。
當一個人跳出來幫助您時，他們會看到您突出顯示的行，我發現評論是像聊天一樣進行交流的好方法：
查看日誌
點擊日誌可以訪問該應用程序的所有日誌：
訪問控制台
在“日誌”面板中，有一個安慰按鈕。單擊它以在瀏覽器的單獨選項卡中打開交互式控制台：
調試器
點擊調試器單擊日誌面板中的按鈕，Chrome DevTools的實例將在另一個標籤中打開，並帶有指向調試器URL的鏈接。
變更歷史
一項強大的功能是能夠檢查項目歷史記錄中的所有更改。
這很像Git的工作方式-實際上，Git為這個非常易於使用的界面提供了動力，該界面打開後單擊⏪按鈕：
Glitch與Codepen或JSFiddle有何不同？
將Glitch與其他工具區分開來的一大區別是運行服務器端代碼的能力。
Codepen和JSFiddle只能運行前端代碼，而Glitch甚至可以用作應用程序的輕量級服務器-請牢記使用限制。
例如，我設置了Express.js服務器，該服務器由Webhook在一天中的特定時間觸發，以執行某些職責。我不必擔心它在另一台服務器上運行，我只是在Glitch上編寫了它，然後直接從那裡運行。
而已！
我希望您喜歡我的有關使用Glitch的小型教程，並且希望我解釋了它的大多數殺手級功能。
還有其他問題嗎？
我建議您嘗試一下，看看它是否也點擊了您。
這小故障常見問題是一個很好的起點。
玩得開心！
更多服務教程：
- 如何開始使用Firebase託管
- 在Netlify上託管靜態站點的教程
- Web開發人員的代碼插入程序和格式化程序
- 自動觸發器部署在Netlify上
- Glitch，一個偉大的開發人員平台
- 適用於開發人員的Airtable API
- 如何通過任何Google API進行身份驗證
- Zeit Now教程
- Netlify Lambda函數教程
- 如何將Firebase Firestore用作數據庫
- 我如何修復Netlify重寫中的結尾斜杠
- 如何在Netlify函數中訪問查詢參數
- 如何在Netlify函數中使用環境變量
- 如何在Netlify函數中使用npm軟件包
- 如何在DigitalOcean上創建第一個VPS