glitch_Glitch，开发人员的绝佳平台

glitch

Glitch is a great platform to learn how to code.

Glitch是学习编码的绝佳平台。

I use Glitch on many of my tutorials, I think it’s a great tool to showcase concepts, and also allow people to use your projects and build upon them.

我在许多教程中都使用了Glitch，我认为这是展示概念的好工具 ，也允许人们使用您的项目并在其上进行构建。

Here is an example project I made on Glitch with React and React Router: https://glitch.com/edit/#!/flaviocopes-react-router-v4-2

这是我使用React和React Router在Glitch上创建的示例项目： https : //glitch.com/edit/#! / flaviocopes-react-router- v4-2

With Glitch you can easily create demos and prototypes of applications written in JavaScript, from simple web pages to advanced frameworks such as React or Vue, and server-side Node.js apps.

使用Glitch，您可以轻松创建用JavaScript编写的应用程序的演示和原型 ，从简单的网页到高级框架(如React或Vue )以及服务器端Node.js应用程序。

It is built on top of Node, and you have the ability to install any npm package you want, run webpack and much more.

它构建在Node之上，并且您可以安装所需的任何npm软件包，运行webpack等。

It’s brought to you by the people that made some hugely successful products, including Trello and Stack Overflow, so it has a lot of credibility bonuses for that.

它是由制作了一些非常成功的产品的人提供给您的，其中包括Trello和Stack Overflow，因此它具有很多可信度。

为什么我认为Glitch很棒？ (Why do I think Glitch is great?)

Glitch “clicked” for me in how it presents itself in a funny interface, but not dumbed down.

小故障让我“点击”了它在一个有趣的界面中的呈现方式，但并没有哑口无言 。

You have access to logs, the console, and lots of internal stuff.

您可以访问日志 ， 控制台和许多内部内容。

Also, the concept of remixing so prominent in the interface makes me much more likely to create lots of projects there, as I never have to start from a clean slate.

同样，在界面中如此突出的混音概念使我更有可能在那里创建许多项目，因为我从来不需要从头开始。

You can start diving into the code without losing time setting up an environment, version control, and focus on the idea, with an automatic HTTPS URL and a CDN for the media assets.

通过自动HTTPS URL和用于媒体资产的CDN ，您可以开始深入研究代码， 而不会浪费时间设置环境，版本控制并专注于这一想法。

Also, there’s no lock-in at all, it’s just Node.js (or if you don’t use server-side JavaScript, it’s just HTML, JS and CSS)

而且，根本没有锁定，只是Node.js(或者，如果您不使用服务器端JavaScript，则只有HTML，JS和CSS)

免费吗？ (Is it free?)

Yes, it’s free, and in the future they might add even more features on top for a paid plan, but they state that the current Glitch will always be free as it is now.

是的 ，它是免费的，将来他们可能会在付费计划的基础上增加更多功能，但他们指出，当前的Glitch将永远是免费的。

There are reasonable limits like

有合理的限制，例如

• You have 128MB of space, excluding npm packages, plus 512MB for media assets
  您有128MB的空间(不包括npm软件包)，加上512MB的媒体资源
• You can serve up to 4000 requests per hour
  每小时最多可处理4000个请求
• Apps are stopped if not accessed for 5 minutes and they do not receive any HTTP request, and long running apps are stopped after 12 hours. As soon as an HTTP request comes in, they start again
  如果5分钟未访问应用程序，则这些应用程序将停止运行，并且它们不会收到任何HTTP请求，并且长时间运行的应用程序会在12小时后停止。 一旦HTTP请求进入，它们就会重新开始

小故障概述 (An overview of Glitch)

This is the Glitch homepage, it shows a few projects that they decided to showcase because they are cool, and some starter projects:

这是Glitch主页，其中显示了一些因为很酷而决定展示的项目，以及一些入门项目：

Creating an account is free and easy, just press “Sign in” and choose between Facebook and GitHub as your “entry points” (I recommend GitHub):

创建帐户是免费和容易的，只需按“登录”，然后在Facebook和GitHub之间进行选择作为“入口”(我建议使用GitHub)：

You are redirected to GitHub to authorize:

您被重定向到GitHub进行授权：

Once logged in, the home page changes to also show your projects:

登录后，主页将更改为同时显示您的项目：

Clicking Your Projects sends you to your profile page, which has your name in the URL. Mine is https://glitch.com/@flaviocopes.

单击您的项目将您带到个人资料页面，该页面的URL中有您的名字。 我的是https://glitch.com/@flaviocopes 。

You can pin projects, to find them more easily when you’ll have lots of them.

您可以固定项目，以便在有很多项目时更容易找到它们。

混音的概念 (The concept of remixing)

When you first start, of course you will have no projects of your own.

当然，当您第一次开始时，您将没有自己的项目。

Glitch makes it super easy to start, and you never start from a blank project. You always remix another project.

Glitch使启动变得非常容易，而且您永远不会从空白项目开始。 您总是会混音另一个项目 。

You can remix a project you like, maybe one you found on Twitter or featured in the Glitch homepage, or you can start from a project that’s a boilerplate to start something:

您可以重新混合自己喜欢的项目，也许是您在Twitter上找到的项目或在Glitch主页上显示的项目，也可以从一个样板项目开始以开始一些工作：

• A simple web page

  一个简单的网页

• Node.js Express app

  Node.js Express应用

• A Node.js console

  Node.js控制台

• A Create-React-App app

  Create-React-App应用程序

• A Nuxt starter app

  Nuxt入门应用

There are many other starter glitches in these collections:

这些系列中还有许多其他入门故障：

• Hello World Glitches

  你好世界毛刺

• Building Blocks

  建筑模块

If you’re learning to code right now, the Learn to Code glitch Collection is very nice.

如果您现在正在学习编码，那么学习编码故障集合非常好。

I have created a few starter apps that I constantly use for my demos and tests, and they are:

我创建了一些入门应用程序，这些应用程序经常用于演示和测试，它们是：

• Simple HTML + CSS + JS glitch

  简单HTML + CSS + JS故障

• React + webpack starter glitch

  React + Webpack启动器故障

Glitch makes it very easy to create your own building blocks, and by pinning them in your profile, you can have them always on the top, easy to find.

Glitch使创建自己的构建块变得非常容易，并且通过将它们固定在您的个人资料中，您可以将它们始终放在顶部，易于查找。

重新混合故障 (Remix a glitch)

Once you have a glitch you want to build upon, you just click it, and a window shows up:

一旦出现故障，只需单击它，然后会出现一个窗口：

There are 3 buttons:

有3个按钮：

• Preview a glitch is code that does something. This shows the result of the glitch.

  预览故障是执行某些操作的代码。 这显示了故障的结果。

• Edit Project shows the source of the project, and you can start editing it

  “编辑项目”显示项目的来源，您可以开始对其进行编辑

• Remix This clones the glitch to a new one

  混音将小故障克隆到一个新的

Every time you remix a glitch, a new project is created, with a random name.

每次重新混合故障时，都会使用随机名称创建一个新项目。

Here is a glitch right after creating it by remixing another one:

这是通过重新混合另一个而产生的故障：

Glitch gave it the name guttural-noodle. Clicking the name you can change it:

小故障给它起了guttural-noodle的名字。 单击名称可以更改它：

You can also change the description.

您也可以更改描述。

From here you can also create a new glitch from zero, remix the current glitch, or go to another one.

在这里，您还可以从零创建一个新的故障，重新混合当前故障，或转到另一个故障。

GitHub导入/导出 (GitHub import/export)

There is an easy import/export from/to GitHub, which is very convenient:

从GitHub轻松导入/导出到GitHub，这非常方便：

保持项目私密 (Keep your project private)

Clicking the lock makes the glitch private:

单击锁可将故障变为私人状态：

创建一个新项目 (Create a new project)

Clicking “New Project” shows 3 options:

单击“新建项目”显示3个选项：

• node-app
  节点应用
• node-sqlite
  节点sqlite
• webpage
  网页

This is a shortcut to going out to find those starter apps, and remix them. Under the hoods, clicking one of those options remixes an existing glitch.

这是查找这些入门应用程序并将其重新混合的快捷方式。 在后台，单击这些选项之一将重新混合现有的故障。

On any glitch, clicking “Show” will open a new tab where the app is run:

出现任何故障时，单击“显示”将在运行该应用程序的位置打开一个新选项卡：

应用程式网址 (App URL)

Notice the URL, it’s:

注意URL，它是：

https://flavio-my-nice-project.glitch.me

https://flavio-my-nice-project.glitch.me

That reflects the app name.

这反映了应用程序名称。

The editing URL is a bit different:

编辑网址有些不同：

https://glitch.com/edit/#!/flavio-my-nice-project

https://glitch.com/edit/#!/flavio-my-nice-project

The preview runs on a subdomain of glitch.me, while editing is done on glitch.com.

预览在glitch.me的子域上glitch.me ，而编辑在glitch.com上glitch.com 。

Noticed the fishes on the right of the page? It’s a little JavaScript that Glitch recommend to add to the page, to let other people remix the project or see the source:

注意到页面右边的鱼了吗？ Glitch建议将它添加到页面中，以便其他人重新混合项目或查看源代码：

运行应用 (Running the app)

Any time you make a change to the source, the app is rebuilt, and the live view is refreshed.

每当您更改源时，都会重建应用程序，并刷新实时视图。

This is so convenient, real time applying changes gives an immediate feedback that’s a great help when developing.

这是如此方便，实时应用更改可提供即时反馈，这在开发时会很有帮助。

机密 (Secrets)

You don’t want any API key or password that might be used in the code to be seen by everyone. Any of those secret strings must be put in the special .env file, which has a key next to it.

您不希望所有人看到该代码中可能使用的任何API密钥或密码。 这些秘密字符串中的任何一个都必须放在特殊的.env文件中，该文件旁边有一个密钥。

If you invite collaborators, they will be able to see the content, as they are part of the project.

如果您邀请合作者，他们将可以看到内容，因为他们是项目的一部分。

But anyone remixing it, or people invited by you to help, will not see the file content.

但是，任何混音的人或您邀请您提供帮助的人都不会看到文件内容。

管理档案 (Managing files)

Adding a new file to a project is easy.

将新文件添加到项目很容易。

You can drag and drop files and folders from your local computer, or click the “New File” button above the files list.

您可以从本地计算机拖放文件和文件夹 ，或单击文件列表上方的“ 新建文件 ”按钮。

It’s also intuitive how to rename, copy or delete files:

如何重命名，复制或删除文件也很直观：

一键式许可和行为准则 (One-click license and code of conduct)

Having a license in the code is one of the things that’s overlooked in sample projects, but determines what others can do, or can’t do, with your project. Without a license, a project is not open source, and all rights are reserved, so the code cannot be redistributed, and other people cannot do anything with it (note: this is my understanding and IANAL - I Am Not A Lawyer).

在示例项目中忽略在代码中拥有许可证是一件事情，但是它决定了其他人可以或不能对您的项目做的事情。 没有许可证，项目不是开源的，并且保留所有权利，因此无法重新分发代码，其他人也不能对其进行任何操作(请注意：这是我的理解，IANAL-我不是律师)。

Glitch makes it super easy to add a license, in the New File panel:

在新文件面板中，Glitch使添加许可证变得非常容易 ：

You can easily change it as well:

您也可以轻松更改它：

The code of conduct is another very important piece for any project and community. It makes contributors feel welcomed and protected in their participation to the community.

对于任何项目和社区，行为准则都是另一个非常重要的部分。 它使贡献者对社区的参与感到受到欢迎和保护。

The Add Code of Conduct button adds a sample code of conduct for open source projects you can start from.

“ 添加行为准则”按钮为您可以开始的开源项目添加了行为准则样本。

添加一个npm包 (Adding an npm package)

Click the package.json file, and if you don’t have one yet, create an empty one.

单击package.json文件，如果还没有，请创建一个空文件。

Click the Add Package button that now appears on top, and you can add new package.

单击现在显示在顶部的“ 添加软件包”按钮，您可以添加新软件包。

Also, if you have a package that needs to be updated, Glitch will show the number of packages that need an update, and you can update them to the latest release with a simple click:

另外，如果您有需要更新的软件包，则Glitch会显示需要更新的软件包的数量，您可以单击一下以将其更新为最新版本：

使用自定义版本的Node.js (Use a custom version of Node.js)

You can set the Node.js version to any of these in your package.json. Using .x will use the latest release of a major version, which is the most useful thing, like this:

您可以在package.json中将Node.js版本设置为其中任何一个 。 使用.x将使用主要版本的最新版本，这是最有用的，如下所示：

{
  //...
  "engines": {
    "node": "8.x"
  }
}

存储 (Storage)

Glitch has a persistent file system. Files are kept on disk even if your app is stopped, or you don’t use if for a long time.

小故障具有持久的文件系统。 即使您的应用已停止，文件也会保留在磁盘上，或者长时间不使用。

This allows you to store data on disk, using local databases or file-based storage (flat-file).

这使您可以使用本地数据库或基于文件的存储(平面文件)将数据存储在磁盘上。

If you put your data in the .data folder, this special name indicates the content will not be copied to a new project with the glitch is remixed.

如果将数据放在.data文件夹中，则此特殊名称表示在重新混合故障后，内容将不会复制到新项目中。

在页面中嵌入故障 (Embedding a glitch in a page)

Key to using Glitch to create tutorials is the ability to embed the code and the presentation view, in a page.

使用Glitch创建教程的关键是能够在页面中嵌入代码和演示视图。

Click Share and Embed Project to open the Embed Project view. From there you can choose to only embed the code, the app, or customize the height of the widget - and get its HTML code to put on your site:

单击“ 共享并嵌入项目”以打开“嵌入项目”视图。 在这里，您可以选择仅嵌入代码，应用程序，或自定义小部件的高度-并获取要放置在您网站上HTML代码：

出现故障时进行协作 (Collaborating on a glitch)

From the Share panel, the Invite Collaborators to edit link lets you invite anyone to edit the glitch in real time with you.

在“共享”面板中，“ 邀请协作者进行编辑”链接可让您邀请任何人实时与您一起编辑故障。

You can see their changes as they make it. It’s pretty cool!

您可以看到他们所做的更改。 它太酷了！

寻求帮助 (Asking for help)

Linked to this collaboration feature, there’s a great one: you can ask help from anyone in the world, just by selecting some text in the page, and click the raised hand icon:

链接到此协作功能，有一个很棒的功能：您可以向世界上任何人寻求帮助，只需在页面中选择一些文本，然后单击举手图标即可：

This opens a panel where you can add a language tag, and a brief description of what you need:

这将打开一个面板，您可以在其中添加语言标签以及所需内容的简短描述：

Once done, your request will be shown in the Glitch homepage for anyone to pick up.

完成后，您的请求将显示在Glitch主页上，以供任何人接听。

When a person jumps in to help, they see the line you highlighted, and I found that comments made a good way to communicate like a chat:

当一个人跳出来帮助您时，他们看到您突出显示的行，我发现评论是像聊天一样进行交流的好方法：

查看日志 (See the logs)

Click Logs to have access to all the logs of the app:

单击日志以访问该应用程序的所有日志：

访问控制台 (Access the console)

From the Logs panel, there is a Console button. Click it to open the interactive console in a separate tab in the browser:

在“日志”面板中，有一个“ 控制台”按钮。 单击它以在浏览器的单独选项卡中打开交互式控制台：

调试器 (The debugger)

Clicking the Debugger button in the Logs panel, an instance of the Chrome DevTools opens in another tab with a link to the debugger URL.

单击“日志”面板中的“ 调试器”按钮，Chrome DevTools的实例将在另一个选项卡中打开，并带有指向调试器URL的链接。

变更历史 (The changes history)

A great feature is the ability to check all your changes in the project history.

一项很棒的功能是能够检查项目历史记录中的所有更改。

It’s a lot like how Git works - in fact, under the hoods it’s Git powering this really easy to use interface, which opens clicking the ⏪ button:

这很像Git的工作方式-实际上，Git为这个非常易于使用的界面提供了动力，该界面打开后单击⏪按钮：

Glitch与Codepen或JSFiddle有何不同？ (How is Glitch different than Codepen or JSFiddle?)

One big difference that separates Glitch from other tools is the ability to run server-side code.

将Glitch与其他工具区分开来的一大区别是运行服务器端代码的能力。

Codepen and JSFiddle can only run frontend code, while a Glitch can even be used as a lightweight server for your apps - keeping the usage limits in mind.

Codepen和JSFiddle只能运行前端代码，而Glitch甚至可以用作应用程序的轻量级服务器-记住使用限制。

For example I have set up an Express.js server that is triggered by a Webhook at specific times during the day to perform some duties. I don’t need to worry about it running on another server, I just wrote it on Glitch and run directly from there.

例如，我设置了Express.js服务器，该服务器由Webhook在一天中的特定时间触发，以执行某些职责。 我不必担心它在另一台服务器上运行，我只是在Glitch上编写了它，然后直接从那里运行。

而已！ (That’s it!)

I hope you like my small tutorial on using Glitch, and I hope I explained most of the killer features of it.

我希望您喜欢我的有关使用Glitch的小型教程，并且希望我解释了它的大多数杀手级功能。

还有其他问题吗？ (More questions?)

I suggest to just try it, and see if it clicks for you too.

我建议您尝试一下，看看它是否也点击了您。

The Glitch FAQ is a great place to start.

小故障常见问题解答是一个不错的起点。

Have fun!

玩得开心！

翻译自: https://flaviocopes.com/glitch/

glitch