排队论游乐场的游乐项目_在线代码游乐场汇总

排队论游乐场的游乐项目

Nowadays, there are a variety of code playgrounds available online. Some (such as JSFiddle or JSBin) are designed with sharing in mind, which is useful for building a reduced test case to demonstrate a bug or problem you are having. Some (such as ES6 Fiddle, or D3.js Playground) allow you to experiment with a specific library or technology without the fuss of creating files or setting up a build step. And others (such as CodePen) have an additional social aspect, enabling you to show off your latest creation and get feedback from your peers.

如今，在线上有各种代码游乐场。 有些组件(例如JSFiddle或JSBin )在设计时考虑了共享，这对于构建精简的测试用例以演示您遇到的错误或问题很有用。 有些工具(例如ES6 Fiddle或D3.js Playground )使您可以尝试使用特定的库或技术，而不必大惊小怪地创建文件或设置构建步骤。 其他(如CodePen )具有其他社交方面的功能，使您可以炫耀最新的创作并获得同行的反馈。

It goes without saying that all of them are awesome and make developers’ lives considerably easier!

不用说，它们都很棒，并且使开发人员的生活变得更加轻松！

At SitePoint we use CodePen to host most of our front-end demos and until recently, I thought I knew it pretty well. That was until I read Chris Coyier’s article on 10 Cool Things You Can Do with CodePen and JavaScript which taught me a couple of really neat tricks. For example, did you know that you can Ajax stuff from other Pens at special URLs? Or that you can have CodePen check your JavaScript with JS Hint? No? Well, you can. And, as an added bonus, CodePen will also provide handy Google it links for finding more information on a particular error. I’d urge you to read the article to find out what other cool tricks Chris has to offer.

在SitePoint，我们使用CodePen托管我们的大多数前端演示，直到最近，我还以为我非常了解。 直到我读了Chris Coyier的文章， 《使用CodePen和JavaScript可以做的10件事》时，我才学到了一些非常巧妙的技巧。 例如，您是否知道可以使用特殊URL从其他Pens中获取Ajax内容？ 还是可以让CodePen使用JS Hint检查JavaScript？ 没有？ 好吧，可以。 而且，作为额外的好处，CodePen还将为Google提供方便的链接，以查找有关特定错误的更多信息。 我敦促您阅读这篇文章，以了解Chris还可以提供哪些其他绝妙的技巧。

So that’s the front-end. But what about if you want to share a code demo which includes a back-end component? That’s going to be tricky, right? Well, the good news is that it probably actually isn’t. With the explosion in popularity of server-side JavaScript, a number of sites have grown up which are suitable for hosting demos involving back-end code.

这就是前端。 但是，如果您要共享一个包含后端组件的代码演示该怎么办？ 那将是棘手的，对吗？ 好消息是，事实可能并非如此。 随着服务器端JavaScript的迅猛发展，已经有许多站点可以用于托管涉及后端代码的演示。

The first one that springs to mind is Plunker. One of the reasons Plunker has proven popular is because it allows users to create an arbitrary number of files and to mimic a dev environment by allowing filenames such as public/js/app.js. Plunker plays nicely with the SystemJS module loader, which can transpile ES2015 on the fly (using Babel under the hood) and deal with both AMD, CommonJS and ES6 modules (as this demo from a recent SitePoint article demonstrates). Plunker also allows you to add packages from npm to your project (using npmsearch.com) and integrates Gitter right in the editor.

想到的第一个是Plunker 。 Plunker被证明很受欢迎的原因之一是因为它允许用户创建任意数量的文件并通过允许使用诸如public/js/app.js文件名来模仿开发环境。 Plunker与SystemJS模块加载器，它可以在飞行(引擎盖下使用巴贝尔)，并同时面对AMD，CommonJS的和ES6模块(如transpile ES2015很好地扮演这个演示从最近SitePoint文章演示)。 Plunker还允许您将npm的软件包添加到您的项目中(使用npmsearch.com )，并将Gitter集成在编辑器中。

The next site worthy of mention is ESNextbin. ESNextbin makes life a little easier by giving you direct access to your package.json file. Any dependencies you specify there can be required in your code and used accordingly. It does this by using the Browserify-CDN, which pulls in the module from the npm registry and browserifies it as a standalone bundle. ESNextbin will also let you write in ES2015 and it uses GitHub Gists to save your files, so that you can share your demo with others.

下一个值得一提的站点是ESNextbin 。 ESNextbin使您可以直接访问package.json文件，从而使生活变得更轻松。 您在代码中指定的所有依赖项都可能需要在代码中进行相应的使用。 它通过使用Browserify-CDN做到这一点，后者从npm注册表中提取模块并将其浏览器独立化。 ESNextbin也将允许您在ES2015中编写代码，并且它使用GitHub Gists保存文件，以便您可以与他人共享演示。

The final site I want to mention is HyperDev. Created by the folks at Fog Creek, it was only launched recently, but already looks like it is making quite an impact. What makes HyperDev so cool is how much it lowers the barrier to entry. Just by visiting the site you create your own private virtual machine (complete with a server running Node.js) with its own custom URL. There is no need to sign in and zero configuration involved. Very handy!

我要提到的最后一个站点是HyperDev 。 它是由Fog Creek的人们创建的，直到最近才发布 ，但看起来已经产生了很大的影响。 HyperDev之所以如此出色，是因为它降低了进入门槛。 只需访问站点，您就可以使用自己的自定义URL创建自己的私有虚拟机(配有运行Node.js的服务器)。 无需登录，无需进行零配置。 非常便利！

HyperDev comes packed with a bunch of cool features. For example, as you type changes into HyperDev’s IDE, those changes are automatically deployed to your new web server. The same goes if you alter any of the server-side files. You can also invite collaborators to a project, which will allow them to edit live, with you, in the same documents.

HyperDev附带了许多很酷的功能。 例如，当您在HyperDev的IDE中键入更改时，这些更改将自动部署到新的Web服务器上。 如果您更改任何服务器端文件，也是如此。 您还可以邀请协作者参加项目，这将使他们可以与您一起在同一文档中进行实时编辑。

There’s already quite a community springing up around HyperDev and they have a gallery of cool demos which will hopefully continue to grow over time.

HyperDev周围已经涌现了很多社区，他们拥有许多很棒的演示库，它们有望随着时间的流逝而不断发展。

And now it’s over to you. Have I missed out your favorite demo site? Let me know. Maybe you’ve got some tips and tricks for one of the sites I mentioned? Let me know. You’ve got a cool demo you wanna show off? Let’s have that, too.

现在就结束了。 我错过了您最喜欢的演示网站吗？ 让我知道。 也许您对我提到的其中一个网站有一些提示和技巧？ 让我知道。 您有想要炫耀的炫酷演示吗？ 让我们也有。

I look forward to hearing from you in the comments below!

我期待在下面的评论中收到您的来信！

Originally published in the SitePoint JavaScript Newsletter.

最初发布在SitePoint JavaScript新闻中 。

翻译自: https://www.sitepoint.com/round-up-online-code-playgrounds/

排队论游乐场的游乐项目