codepen使用
At CodePen.io, they describe themselves as a “playground for the front-end side of the web.” CodePen is great for testing out bugs, collaborating, and finding new inspiration. It works by allowing you to create “pens”, which are sets of HTML, CSS, and JavaScript. You can then display those pens on your profile, take feedback, and continue to edit those pens at any time.
他们在CodePen.io上将自己描述为“网络前端的游乐场”。 CodePen非常适合测试错误，进行协作并寻找新的灵感。 通过允许您创建“笔”来工作，该笔是HTML，CSS和JavaScript的集合。 然后，您可以在个人资料上显示这些笔，获取反馈，并随时继续编辑这些笔。
Like many live code playgrounds, CodePen lets you learn in an open-source environment, displaying a live preview of the code changes, and even letting you embed your CodePen demos on any web page, like the one below.
像许多实时代码游乐场一样，CodePen使您可以在开源环境中学习，显示代码更改的实时预览，甚至可以将CodePen演示嵌入到任何网页中，如下所示。
See the Pen Full CSS NES by One div (@onediv) on CodePen.
见笔全部CSS NES一个DIV( @onediv上) CodePen 。
In this article I’ll go beyond those features just mentioned to explain some of the things that I think puts CodePen above its competition, and why you should check it out if you haven’t done so already.
在本文中，我将不仅仅介绍那些功能，还介绍一些我认为使CodePen超越竞争对手的功能，以及为什么还需要检查一下它的原因。
While explaining these features, I’ll also embed some random but cool pens in each section for you to check out.
在解释这些功能时，我还将在每个部分中嵌入一些随机但很酷的笔，以供您查看。
1. CSS选项 (1. CSS Options)
CodePen includes some awesome features to write CSS faster. You can select to include Normalize.css or Reset.css in your CSS by simply clicking a radio button. You can also choose to use -prefix-free or Autoprefixer as well. This way there is no need to take the time to link to an external file (which is also possible, if you wanted to).
CodePen包含一些很棒的功能，可以更快地编写CSS。 您可以通过单击单选按钮来选择在CSS中包含Normalize.css或Reset.css 。 您也可以选择使用-prefix -free或Autoprefixer 。 这样，无需花费时间链接到外部文件(如果需要，也可以)。
What if you aren’t sure about some of your CSS techniques being used? Don’t worry; CodePen has CSSLint integration to search through your CSS code and warn you if there are errors, warnings, poor browser support, etc.
如果不确定使用某些CSS技术怎么办？ 不用担心 CodePen具有CSSLint集成，可搜索您CSS代码并在出现错误，警告，浏览器支持不佳等情况时警告您。
2. HTML，CSS和JavaScript的风格 (2. Flavors of HTML, CSS, and JavaScript)
CodePen supports tons of flavors of HTML, CSS, and JavaScript. For HTML, you can use HAML, Markdown, Slim, or even Jade. For CSS, they support Sass and SCSS (both with an optional Compass or Bourbon add-on), as well as Less and Stylus.
CodePen支持大量HTML，CSS和JavaScript。 对于HTML，您可以使用HAML，Markdown，Slim甚至Jade。 对于CSS，它们支持Sass和SCSS(均带有可选的Compass或Bourbon附加组件)，以及Less和Stylus。
Under the JavaScript menu, you can select CoffeeScript or LiveScript. There is also a drop-down menu where you can have the latest version of things like jQuery and AngularJS.
在JavaScript菜单下，可以选择CoffeeScript或LiveScript。 还有一个下拉菜单，您可以在其中使用jQuery和AngularJS之类的最新版本。
3. Emmet和Vim绑定 (3. Emmet and Vim Binding)
CodePen is all about faster and smoother development. That’s why they utilize toolkits such as Emmet to help keep projects moving. The CodePen editor allows you to use Vim Key Bindings which are command-line keyboard shortcuts. Both of these tools together can help to create a faster workflow.
CodePen旨在实现更快，更流畅的开发。 这就是为什么他们使用Emmet等工具包来帮助保持项目进展的原因。 使用CodePen编辑器，您可以使用Vim键绑定 ，它们是命令行键盘快捷键。 这两个工具一起可以帮助创建更快的工作流。
To learn more about Emmet, you can check out the article Faster Workflow: Mastering Emmet.
要了解有关Emmet的更多信息，可以查看文章Faster Workflow：Mastering Emmet 。
4.馆藏和标签 (4. Collections and Tags)
You can add tags to your pens, which then become searchable. Searching tags such as “Loader” and “Form” brings up tons of helpful inspiration.
您可以在笔上添加标签，然后可以进行搜索。 搜索诸如“ Loader ”和“ Form ”之类的标签会带来大量有用的启发。
If you want, you can even create collections of pens relating to a certain topic. Chris Coyier, one of the co-founders of CodePen, has created collections such as “Path Drawing” and “Repeating Patterns“.
如果需要，您甚至可以创建与某个主题相关的笔的集合。 CodePen的共同创始人之一Chris Coyier创建了诸如“ Path Drawing ”和“ Repeating Patterns ”之类的集合。
5.不同的笔视图 (5. Different Pen Views)
CodePen has a total 8 different views for pens. Each view has its own advantages.
CodePen共有8种不同的笔视图。 每个视图都有其自身的优势。
Editor View – This is the default view for editing pens. You can adjust the size of the code previewer and select which languages to display.
编辑器视图 –这是编辑笔的默认视图。 您可以调整代码预览器的大小，然后选择要显示的语言。
Details View – This view allows you to see the pen’s tags, hearts, comments, forked pens, etc. This contains most of the social features for CodePen.
详细信息视图 –此视图使您可以查看笔的标签，心，注释，叉形笔等。其中包含CodePen的大多数社交功能。
Full Page View – This is pretty self-explanatory. It makes your pen full-screen within an iframe, leaving only a CodePen footer.
全页视图 –这是不言自明的。 它可使您的笔在iframe中全屏显示，仅留下CodePen页脚。
Debug View – Debug View is a full-screen view, although with extra features. It removes the iframe and CodePen footer for easier JavaScript console access. This is great for testing code that you think CodePen might be interfering with.
调试视图 –调试视图是全屏视图，尽管具有附加功能。 它删除了iframe和CodePen页脚，以便更轻松地访问JavaScript控制台。 这对于测试您认为CodePen可能会干扰的代码非常有用。
6. CodePen Pro视图 (6. CodePen Pro Views)
If you are a CodePen Pro user, you have access to more views:
如果您是CodePen Pro用户，则可以访问更多视图：
Presentation Mode – This mode is made especially for overhead projectors. It removes the header to give you more room and allows you to quickly change the font size and colors of the code editor. You can also change the size of the previewer without changing code.
演示模式 –此模式特别适用于高架投影仪。 它删除了标题，为您提供了更多空间，并允许您快速更改代码编辑器的字体大小和颜色。 您还可以更改预览器的大小，而无需更改代码。
Live View – With CodePen Live View, you have a full-screen display of your pen. As you edit that pen, it will automatically update as you type. This is often used when testing on multiple devices.
实时视图 –使用CodePen实时视图，您可以全屏显示笔。 当您编辑该笔时，它会在您键入时自动更新。 在多台设备上进行测试时经常使用此方法。
Professor Mode – This mode allows people to watch you code in real-time. There is also a chat window where the professor and students can chat.
教授模式 –此模式允许人们实时观看您的代码。 还有一个聊天窗口，教授和学生可以在其中聊天。
Collab Mode – Collab mode allows more than one programmer to make edits to a pen at the same time. There is also a chat window, just like in professor mode.
协作模式 –协作模式允许多个程序员同时对笔进行编辑。 就像在教授模式下一样，还有一个聊天窗口。
7.博客 (7. Blogging)
Blogging is a new feature on CodePen, allowing you to easily write about code just like on a regular blog.
博客是CodePen的一项新功能 ，使您可以像在常规博客上一样轻松地编写代码。
You can write with Markdown, and use a special embedding tool to embed your pen when you need to. You can add custom CSS to your posts, and there is a super simple preview to test out your post.
您可以使用Markdown进行书写，并在需要时使用特殊的嵌入工具嵌入笔。 您可以将自定义CSS添加到您的帖子中，并且有一个超级简单的预览来测试您的帖子。
8.社区 (8. Community)
This is what sets CodePen ahead of the competition by a long shot. Community has been a huge part of CodePen since the beginning. Through comments and sharing, people can give and receive constructive criticism, and learn together. Groups such as 4ae9b8 and Bullgit have started from conversations through CodePen. The founders have talked about what they think about the CodePen community on the CodePen Podcast.
这就是使CodePen遥遥领先于竞争对手的原因。 自成立以来，社区一直是CodePen的重要组成部分。 通过评论和分享，人们可以给予和接受建设性的批评，并共同学习。 诸如4ae9b8和Bullgit之类的小组都是从通过CodePen进行对话开始的。 创始人在CodePen Podcast上谈论了他们对CodePen社区的看法 。
9.灵感 (9. Inspiration)
Impressive pens are always displayed on the homepage, as well as great articles and collections. Pens pose as both inspiration, and a fun way to learn. Searching through awesome pens can help improve your own work, and help improve your knowledge of HTML, CSS, and JavaScript.
令人印象深刻的笔总是显示在主页上，以及精美的文章和收藏。 钢笔既是灵感，又是一种有趣的学习方式。 使用超棒的笔进行搜索可以帮助您改善自己的工作，并有助于提高您对HTML，CSS和JavaScript的了解。
Below are some outstanding demos to check out:
以下是一些出色的演示，可以查看：
Canvas Sparkle Light Trial by Jack Rugile
Star Wars Opening Crawl from 1977 by Tim Pietrusky
蒂姆·皮特鲁斯基(Tim Pietrusky) 从1977年开始的《星球大战》(Star Wars)开幕爬网
Makisu CSS 3D Dropdown Concept by Justin Windle
Justin Windle的Makisu CSS 3D Dropdown概念
CSS 3D X-wing by Julian Garnier
朱利安·加尼尔(Julian Garnier)的CSS 3D X-wing
Social buttons with hover by Marius Balaj
WebGL Demo by Anand
Anand的WebGL演示
Tearable Cloth by suffick
泪流满面的布
结论 (Conclusion)
Ultimately, utilizing CodePen can help you learn faster and become part of a large community. Articles on SitePoint often use CodePen to embed code for tutorials. And if you’re interested in more great features of CodePen, check out these:
最终，利用CodePen可以帮助您更快地学习并成为大型社区的一部分。 SitePoint上的文章经常使用CodePen嵌入教程代码。 如果您对CodePen的更多功能感兴趣，请查看以下内容：
翻译自: https://www.sitepoint.com/9-reasons-should-using-codepen/
codepen使用
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
