您应该使用Codepen的9个原因

钥匙要点

• codepen.io是一个多功能平台，允许用户创建“笔”或HTML，CSS和JavaScript集，可以随时显示，编辑和接收到的反馈，从而成为测试的理想工具虫子，协作并找到灵感。
• codepen提供了各种功能，可提高编码效率，例如CSSLINT集成，对HTML，CSS和JavaScript的不同口味的支持，诸如Emmet等工具包，以供更快开发，以及包括Pro版本的不同视图，包括其他版本，包括其他版本视图。
该平台由于其强大的社区方面而脱颖而出，具有共享和接受建设性批评的能力，以及它作为灵感来源的作用，在主页上展示了令人印象深刻的笔，文章和收藏，以帮助改善用户的工作以及HTML，CSS和JavaScript的知识。
在Codepen.io上，他们将自己描述为“网络前端的游乐场”。 Codepen非常适合测试错误，协作和寻找新的灵感。它可以通过允许您创建“笔”，即HTML，CSS和JavaScript的集合。然后，您可以在个人资料上显示这些笔，接收反馈，并随时继续编辑这些笔。

>像许多实时代码游乐场一样，Codepen可以让您在开源环境中学习，显示代码更改的实时预览，甚至让您在任何网页上嵌入Codepen演示，如下面的一个。

请参阅codepen上的一个Div（@Onediv）的Pen Full CSS NES。

>在本文中，我将超越这些功能，以解释我认为将Codepen置于竞争之上的一些事情，以及如果您还没有这样做的话，为什么应该检查一下。

在解释这些功能时，我还将在每个部分中嵌入一些随机但很酷的笔以供您查看。

1。 CSS选项

codepen包含一些更快地编写CSS的很棒的功能。您可以通过简单单击单击单击按钮选择将normalize.css或reset.css包含在CSS中。您也可以选择使用-Prefix -Free或AutoPreeFixer。这样，就无需花费时间链接到外部文件（如果您愿意，这也是可能的）。

>

如果您不确定使用的某些CSS技术正在使用该怎么办？不用担心; Codepen具有CSSLINT集成，可以通过您的CSS代码进行搜索，并警告您是否存在错误，警告，浏览器支持不良等。

>

2。 HTML，CSS和JavaScript

的口味

codepen支持HTML，CSS和JavaScript的口味的 tons 。对于HTML，您可以使用Haml，Markdown，Slim甚至Jade。对于CSS，它们支持SASS和SCSS（均具有可选的指南针或波旁威士忌附加组件），以及更少的手写笔。>

>在JavaScript菜单下，您可以选择CoffeeScript或Livescript。还有一个下拉菜单，您可以拥有诸如jQuery和angularjs之类的最新版本。

>

3。 emmet和vim结合

codepen是关于更快，更顺畅的发展。这就是为什么他们使用emmet等工具包来帮助项目发展的原因。 Codepen编辑器允许您使用命令行键盘快捷键的VIM键绑定。这两种工具都可以一起帮助创建更快的工作流程。

要了解有关Emmet的更多信息，您可以更快地查看文章：掌握emmet。

4。集合和标签

>您可以在笔中添加标签，然后可以搜索。搜索标签，例如“加载器”和“形式”，带来了许多有用的灵感。

如果需要，甚至可以创建与某个主题有关的笔集合。 Codepen的联合创始人之一Chris Coyier创建了诸如“路径图”和“重复模式”等集合。 5。不同的笔图

>编辑器视图 - 这是编辑笔的默认视图。您可以调整代码预览器的大小，然后选择要显示的语言。>

详细信息视图 - 此视图允许您查看笔的标签，心脏，评论，分叉的笔等。这包含Codepen的大多数社交功能。

>

>全页视图 - 这是非常不言自明的。它使您的笔在iframe内部全屏，只留下一个编码器。

调试视图 - 调试视图是一个全屏视图，尽管具有额外的功能。它删除了iframe和codepen页脚，以便更轻松的JavaScript控制台访问。这非常适合您认为Codepen可能会干扰的代码。

>

6。 codepen pro Views

如果您是Codepen Pro用户，则可以访问更多视图：>

>演示模式 - 此模式特别适用于螺旋桨投影仪。它删除了标头，以为您提供更多的空间，并允许您快速更改代码编辑器的字体大小和颜色。您也可以在不更改代码的情况下更改预览器的大小。

实时视图 - 使用Codepen Live View，您的笔有全屏显示。在您编辑该笔时，它将在输入时自动更新。在多个设备上测试时通常使用。

>

教授模式 - 此模式允许人们实时观看您的代码。还有一个聊天窗口，教授和学生可以聊天。

合作模式 - 合作模式允许多个程序员同时对笔进行编辑。也有一个聊天窗口，就像教授模式一样。

7。博客

>博客是Codepen上的一项新功能，使您可以像常规博客一样轻松地编写代码。 您可以使用Markdown编写，并使用特殊的嵌入工具在需要时嵌入笔。您可以在帖子中添加自定义CSS，并且有一个超级简单的预览来测试您的帖子。

8。社区

>这是在比赛之前将Codepen设置为远射的原因。自一开始以来，社区就一直是Codepen的重要组成部分。通过评论和分享，人们可以提出和接受建设性的批评，并共同学习。诸如4AE9B8和Bullgit之类的团体通过Codepen从对话开始。创始人已经谈到了他们对Codepen播客中Codepen社区的看法。

9。灵感

>令人印象深刻的笔总是显示在首页上，以及出色的文章和收藏。笔既可以作为灵感，又是一种有趣的学习方式。通过出色的笔进行搜索可以帮助您改善自己的工作，并帮助您提高对HTML，CSS和JavaScript的了解。

>

以下是一些出色的演示：

Canvas Sparkle Light Exial by Jack Rugile
《星球大战》（Star Wars）从1977年开始爬行蒂姆·彼得鲁斯基（Tim Pietrusky）
• Justin Windle
Makisu CSS 3D下拉概念
> CSS 3D X-WING JULIAN GARNIER
• Marius Balaj
Anand
可泪的布，令人吃惊
• 结论

>最终，使用Codepen可以帮助您更快地学习并成为大型社区的一部分。 SitePoint上的文章通常使用Codepen将代码嵌入教程。而且，如果您对Codepen的更多出色功能感兴趣，请查看以下内容：

>

• 书签
• > WordPress插件
• oembed
• >雇用我按钮

>常见问题（常见问题解答）有关使用Codepen

> Codepen的关键功能是什么，它使其成为开发人员的首选选择？

codepen是一个社会开发环境，它提供了一系列功能，使其成为开发人员的首选选择。它提供了代码更改的实时视图，这意味着开发人员可以看到他们实时进行的更改。此功能大大加快了开发过程。 Codepen还支持SCSS，SILSE和Stylus之类的预处理器，这可以帮助开发人员编写更有效的代码。它还提供了协作模式，该模式允许多个开发人员同时在同一项目上工作。此功能对于团队项目和配对编程特别有用。

>我如何使用CodePen进行测试和调试？

codepen是测试和调试代码的绝佳工具。它提供了一个孤立的环境，您可以在其中编写，测试和调试代码而不会影响您的主要项目。您可以轻松地与他人分享您的“笔”，从而成为获得反馈和帮助调试的绝佳工具。 Codepen还支持Console.Log，这对于调试JavaScript非常有帮助。

我可以使用Codepen进行教学或学习编码吗？ Codepen是教学和学习编码的绝佳工具。教师可以创建“笔”来展示编码概念，学生可以将这些“笔”分叉进行实验和学习。 Codepen还具有“教授模式”，允许教师提供实时编码演示。

codepen通过允许开发人员查看和测试他们的设计来支持响应式设计。编辑器内的不同设备尺寸。此功能使创建在所有设备尺寸上都可以正常工作的设计变得更加容易。

>我可以使用Codepen离线吗？

Codepen主要是在线工具，但它确实提供了一些离线功能。您可以使用codepen离线来处理“笔”，但是您需要上网以节省更改。

>

>我如何在Codepen上分享我的工作？ Codepen很容易。您可以共享“笔”的URL，也可以将“笔”嵌入另一个网站。 Codepen还提供了一种“演示模式”，非常适合现场演示或演示文稿。

> codepen社区是什么样的？

> codepen社区对开发人员来说是一个充满活力和支持的场所。您可以分享您的工作，获得反馈，向他人学习，甚至在项目上进行合作。社区是学习和成长为开发人员的好地方。

我可以将Codepen用于商业项目吗？但是，重要的是要注意，您在Codepen上创建的任何“钢笔”默认情况下是公开的，因此您应该小心，不要在您的“ PENS”中包含任何敏感或专有信息。

>

> Codepen如何处理CSS和JavaScript预处理器？

> codepen支持各种CSS和JavaScript预处理器，包括SCSS，Limest，Stylus， babel和打字稿。这意味着您可以用预处理器语言编写代码，而Codepen将其编译为CSS或JavaScript。 ，您可能会考虑几种选择。其中包括JSFIDDLE，PLUNKER和GLITER。这些工具中的每一个都有其自己的优点和劣势，因此最佳选择取决于您的特定需求和偏好。

以上是您应该使用Codepen的9个原因的详细内容。更多信息请关注PHP中文网其他相关文章！