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