排队论游乐场的游乐项目_最佳代码游乐场中的7个

排队论游乐场的游乐项目

A variety of front-end code playgrounds have appeared over the years. The majority offer a quick and dirty way to experiment with client-side code and share with others. In this article, we take a quick look at seven of the best.

多年来，出现了各种各样的前端代码游乐场。 大多数提供了一种快速而肮脏的方式来尝试客户端代码并与他人共享。 在本文中，我们快速浏览了其中的七个。

Typical features of these online playgrounds include:

这些在线游乐场的典型功能包括：

• color-coded HTML, CSS and JavaScript editors
  颜色编码HTML，CSS和JavaScript编辑器
• a preview window — many update on the fly without a refresh
  预览窗口-许多更新无需刷新即可实时进行
• HTML pre-processors such as HAML
  HTML预处理器，例如HAML
• LESS, SASS and Stylus CSS pre-processing
  LESS，SASS和Stylus CSS预处理
• inclusion of popular JavaScript libraries
  包含流行JavaScript库
• developer consoles and code validation tools
  开发者控制台和代码验证工具
• sharing via a short URL
  通过短网址共享
• embedding demonstrations in other pages
  将演示嵌入其他页面
• code forking
  代码分叉
• zero cost (or payment for premium services only)
  零成本(或仅针对高级服务付费)
• showing off your coding skills to the world!
  向全世界展示您的编码技巧！

The best feature: they allow you to test and keep experimental front-end code snippets without the rigmarole of creating files, firing up your IDE or setting up a local server.

最好的功能：它们使您可以测试和保留实验性的前端代码段，而无需创建文件，启动IDE或设置本地服务器的繁琐工作。

JSFiddle (JSFiddle)

JSFiddle was one of the earliest code playgrounds and a major influence for all which followed. Despite the name, it can be used for any combination of HTML, CSS and JavaScript testing. It’s looking a little basic today, but still offers advanced functionality such as Ajax simulation.

JSFiddle是最早的代码游乐场之一，对随后的所有活动都产生了重大影响。 尽管有名称，它可以用于HTML，CSS和JavaScript测试的任何组合。 今天看起来有些基础，但仍提供高级功能，例如Ajax仿真。

密码笔 (CodePen)

The prize for the best-looking feature-packed playground goes to CodePen. The service, co-founded by Chris Coyier, highlights popular demonstrations (“Pens”) and Projects, which is an online Integrated Development Environment you can use to build and deploy web projects, a feature added in March 2017. It offers advanced functionality such as sharing and embedding of Pens, adding external JS and CSS libraries, popular preprocessors, and tons more. The PRO service provides cross-browser testing, pair-programming and teaching options starting from just $9 per month.

功能丰富的最佳外观游乐场的奖品归功于CodePen 。 该服务由Chris Coyier共同创立，重点介绍了流行的演示(“笔”)和Projects ，这是一个在线集成开发环境，可用于构建和部署Web项目，此功能于2017年3月添加。它提供了高级功能，例如作为Pen的共享和嵌入，添加了外部JS和CSS库，流行的预处理器以及更多其他功能。 PRO服务提供跨浏览器测试，配对编程和教学选项，每月仅9美元起。

CSS甲板 (CSS Deck)

This may be named CSS Deck, but it’s a fully-fledged HTML, CSS and JavaScript playground with social and collaboration features. It’s similar to CodePen (I don’t know who influenced who!) but you might prefer it.

它可能被称为CSS Deck ，但是它是具有社交和协作功能的成熟HTML，CSS和JavaScript运动场。 它类似于CodePen(我不知道谁影响了谁！)，但您可能更喜欢它。

JS斌 (JS Bin)

JS Bin was started by JS guru Remy Sharp. It concentrates on the basics and handles them exceedingly well. It also offers a handy JavaScript console. Recommended.

JS Bin由JS大师Remy Sharp创立。 它专注于基础知识，并且非常好地处理它们。 它还提供了一个方便JavaScript控制台。 推荐的。

达伯特 (Dabblet)

Another early playground, Dabblet started life as an HTML5/CSS3 demonstration system by Lea Verou with JavaScript facilities. It looks gorgeous and autoprefixes all your CSS if needed.

Dabblet是另一个早期的游乐场， 最初是Lea Verou使用JavaScript功能HTML5 / CSS3演示系统。 它看起来很漂亮，并在需要时为所有CSS自动前缀。

柱塞 (Plunker)

Plunker lets you add multiple files, including community generated templates, to kick-start your project. Just like CodePen, with Plunker you can create working demos, also in collaboration with other devs, and share your work. Plunker’s source code is free and lives on its GitHub repository.

通过Plunker ，您可以添加多个文件(包括社区生成的模板)来启动项目。 就像CodePen一样，使用Plunker，您可以与其他开发人员协作创建工作演示，并共享您的工作。 Plunker的源代码是免费的，并且位于其GitHub存储库中 。

活织 (Liveweave)

Liveweave is one more online HTML5, CSS3 & JavaScript editor with live preview capabilities. It offers code-hinting for HTML5, CSS3, JavaScript and jQuery and lets you download your project as a zip file.

Liveweave是又一个具有实时预览功能的在线HTML5，CSS3和JavaScript编辑器。 它提供HTML5，CSS3，JavaScript和jQuery的代码提示，并允许您将项目下载为zip文件。

You can also add external libraries such as jQuery, AndgularJS, Bootstrap etc. quite easily in your workspace. Furthermore, Liveweave offers a ruler to help you code responsive designs and a “Team Up” feature which has the same features as JSFiddle’s collaborative editing.

您还可以在工作区中轻松添加外部库，例如jQuery，AndgularJS，Bootstrap等。 此外，Liveweave提供了一个标尺来帮助您编写响应式设计，并具有“ Team Up”功能，该功能与JSFiddle的协作编辑功能相同。

其他选择 (Other Options)

There are, of course other options out there. Did we miss your favorite? Tell us about it!

当然，还有其他选择。 我们想念您的最爱吗？ 告诉我们吧！

We haven’t talked here about online code playgrounds that will let you share back-end code too, such as CodeSandbox. For more on those, head over to James Hibbard’s round-up of online back-end code playgrounds for more information.

我们这里没有讨论在线代码游乐场，它也可以让您共享后端代码，例如CodeSandbox 。 有关这些的更多信息，请转到James Hibbard的在线后端代码游乐场综述，以获取更多信息。

If you’d rather host your own online development environment, check out ICEcoder (we have an article on it here).

如果您想托管自己的在线开发环境，请查看ICEcoder (我们在此处有一篇文章)。

And if you’d rather not be online when messing with code, but want something similar, check out something like Web Maker (we have an article on it here).

而且，如果您不希望在弄乱代码时不在线，但想要类似的东西，请查看Web Maker之类的东西(我们在此处有一篇文章)。

Happy coding!

祝您编码愉快！

翻译自: https://www.sitepoint.com/7-code-playgrounds/

排队论游乐场的游乐项目