CodePen:构建,测试,共享和发现HTML,CSS和JavaScript

Codepen:构建,测试和发现前端代码

内容管理系统的一项挑战是测试和生产脚本化工具。 尽管对于大多数发布者而言,这不是必需的,但作为技术出版物,我确实喜欢不时共享工作脚本以帮助其他人。 我已经分享了使用方法 JavaScript检查密码强度, 如何 使用正则表达式检查电子邮件地址语法 (正则表达式),并且最近添加了此内容 预测在线评论对销售的影响的计算器。 我希望在网站上添加许多工具,但是WordPress不利于这样的发布……它是一个内容系统,而不是开发系统。

因此,为了使我的小脚本正常工作,我喜欢使用 CodePen。 CodePen是一个井井有条的工具,具有HTML面板,CSS面板,JavaScript面板,控制台以及所生成代码的发布。 当您将鼠标悬停在元素上时,每个面板都有信息,以便您了解可能的内容以及HTML,CSS和JS的颜色编码,以帮助您更轻松地进行编辑和编写。

CodePen是一个社会发展环境。 从本质上讲,它允许您在浏览器中编写代码,并在构建时查看其结果。 一个有用且自由的在线代码编辑器,适合任何技能的开发人员,尤其是增强了学习代码的人员的能力。 CodePen主要专注于前端语言,例如HTML,CSS,JavaScript和可转化为这些内容的预处理语法。

关于CodePen

使用CodePen,我能够完成所有必要的工作 发布计算器 我嵌入了该网站。 CodePen上的大多数作品都是公开和开源的。 他们是其他人和社区可以与之互动的生物,从简单的举止,发表评论到为自己的需要进行分叉和更改。

CodePen-预测在线评论对销售的影响的计算器

使用CodePen,如果您希望在工作时将窗格放在左侧,右侧或底部,则可以更改视图…或在新选项卡中查看HTML。 并排视图可以很好地测试您的响应式设置,因为您可以调整可见窗格的大小。

您可以将每个工作脚本组织到Pens中,将它们组合到Projects(多文件编辑器)中,甚至构建集合。 从根本上来说,这是一个工作正常的前端代码组合站点,您可以在其中跟随其他作者,将其他公共共享的项目放入您自己的库中进行修改,甚至学习如何通过挑战做一些有趣的事情。

您可以另存为GitHub Gist,导出为zip文件,甚至 像这样的文章中的笔:

见笔
在线评论的预测销售影响
by Douglas Karr (@douglaskarr)
on CodePen.


Pen编辑器的局限性之一是庞大的代码量。 您可能永远都不会遇到这个问题,因为编辑器应该可以处理数百甚至数千行代码。 但是,当他们开始输入5,000 – 10,000或更多行的代码时,您将看到编辑器开始失败。 但是,您可以将外部引用添加到其他地方托管的样式表或JavaScript!

我鼓励您注册。 您将订阅他们的每周电子邮件,还可以将提要添加到RSS提要中,以便可以看到新发布的笔。 而且,如果您开始在那里搜索或浏览公用笔,您会发现一些令人难以置信的项目……用户很有才华!

关注 Douglas Karr 在Codepen上

付费版本CodePen Pro为改进的功能或团队提供了大量附加功能,包括协作,流程,资产托管,私有视图,甚至具有您自己的域或子域的已部署项目。 而且,当然,CodePen通过Github集成提供了一个很好的存储库,您的整个团队都可以在其中工作。 如果您只是想测试一些简单的代码,那么CodePen是一个非常有价值的工具。

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.