您不了解的8个CodePen功能

CodePen和前端开发已成为彼此的代名词。作为CodePen的早期用户和早期雇员,我从平台上学习和成长,从在线编辑器和网络游乐场到用于测试和展示的生动社区HTMLCSSJavaScript的代码片段 - 只能通过添加来扩展CodePen项目

CodePen就像是前端开发人员的瑞士军刀,提供灵感,一个干净的实验环境等等。每个人都有不同的开发方法,并且有一些关键的CodePen功能有时会被忽视并且可能会使用大喊大叫。以下是您可能忽略的八个功能:

01.预处理器

CodePen can be used in combination with a number of CSS preprocessors

CodePen可以与许多CSS预处理器结合使用

CodePen是一个独立构建小组件的好地方,无需设置开发环境。您可以设计和试验一小块,当您满意时,将它带入更大的应用程序。

可能不会立即显而易见的是,为了让每个人都能更轻松,更快地完成隔离开发,CodePen可让您即时访问许多出色的预处理器。在创建和编辑钢笔时可以使用四种不同的HTML预处理器:Markdown,HAML,Slim和Jade。这些在编写更简洁的代码时非常有用;或者您正在使用这些语言开展项目,并希望保持示例的一致性。

用户还可以访问JavaScript预处理器(CoffeeScript,LiveScript,TypeScript和Babel),以及CSS预处理器(Less,Sass和SCSS,Stylus和较新的PostCSS)。这些对于帮助您快速前进非常宝贵,但如果您想学习一门新语言,这也是一个很好的资源。 “查看已编译”选项使您可以使用预处理器进行编写,然后查看一旦预处理后它如何转换。

02.嵌入功能

在您的博客文章,文章和演示文稿中包含代码时,CodePen嵌入式功能非常多样化,并且具有一些特殊功能。

所有嵌入都有一个主题,控制CodePen标题的样式,选项卡和其他详细信息。有两个内置主题:浅色和深色。每个CodePen会员还可以获得可自定义的个人主题,您可以编辑该主题以匹配您的博客主题或您心中的愿望。这里的特殊之处在于,如果您更改主题,CodePen将追溯更新您之前的所有嵌入。所以没有必要回去单独编辑每个帖子。

如果您是Pro会员,则可以在嵌入世界中解锁一些额外功能。首先,您拥有无限制的主题,因此您可以为您的博客选择一些特别的内容,为幻灯片选择不同的内容,并为一次性帖子选择不同的内容。您还可以将自己的自定义CSS添加到整个嵌入,更改文本样式,字体和其他任何内容。

其次,Pro用户可以使其嵌入可编辑。在您前往(或在线观看)的每个会议中,您最终会在幻灯片中看到一些嵌入式笔。它们是展示代码的好方法,也是展示标记和样式的好方法。您可以显示某些内容,同时仍允许对代码进行调整和调整。可编辑的嵌入对于交互式博客帖子和教程也很有用 - 作者可以在页面上嵌入笔,访问者将能够编辑和浏览代码并看到他们的更改实时生效。

最后,如果您真的要进行完全自定义,CodePen iframe会有一个自定义PostMessage API,您可以使用它来动态更改选项卡。首先,我们获取iframe实例并将其发送给我们想要显示的选项卡:

var embedIFrame = document.querySelector('。codepen-embed-iframe'); embedIframe.contentWindow.postMessage({activeTabs:“css,result”},“*”);

上面的消息会将嵌入的活动选项卡设置为拆分视图,显示CSS及其结果。

此功能与自定义主题相结合,使您可以创建自己的界面和布局,以便其他人可以与您的笔进行交互。在这个实例,笔会循环显示其代码,以显示每个标签随时间的变化。

03.实时查看和实时同步

实时视图是您的笔的整页视图,可在编辑代码时实时更新。它就像编辑器中的预览一样,除了这个URL可以在另一个窗口或标签中,在不同的浏览器中打开,或者甚至在完全不同的计算机或设备上打开。

这意味着,例如,您可以使用实时视图在Firefox,Safari,Chrome和手机上同时测试您的代码。您可以使用的浏览器数量没有限制。

作为一个额外的特权,事件也会在这些视图中同步,因此当您在一个屏幕上滚动时,它们都会随您滚动。当您单击其中一个复选框时,将在所有屏幕上检查它。它确实使跨设备和跨浏览器测试变得轻而易举。为了使事情更容易,CodePen还提供了一个功能,允许您自己发送当前实时URL,因此没有理由不进行测试。

04.模式库

This resource collects Pens to suit a whole range of needs and requirements – if you’re looking for inspiration, head here

该资源收集钢笔以满足各种需求和要求 - 如果您正在寻找灵感,请前往此处

随着CodePen的发展,我们已经能够看到世界上如此多的笔和系列。当你有这么多代码进入时,很难不会看到一些模式出现,以及人们以不同的创造性方式解决类似的问题。因此,如果你想要一点灵感,或者需要一些想法来启动一个新项目,那么CodePen模式库是你应该去的地方。

模式库是一个令人难以置信的资源,其中包含数百个笔,所有笔都根据特定需求进行排序。想要为您的网站添加评级系统?有一个模式集合。研究不同的面包屑模式?有一个集合。图书馆的提交对公众开放,所以如果你做了一些有趣或合适的东西,你将成为一个嘘声。

类似地,有一些很棒的用户自制笔可以作为某种JavaScript或CSS功能的现场演示。我发现这些资源非常丰富且有用:

  • Flexbox游乐场:GabiSiquès的这个游乐场Pen以交互方式演示了每个Flexbox属性的行为,使您可以轻松找到您正在寻找的特定属性
  • 放松游乐场:Craig Roblewsky的这支Pen让您可以实时编辑和自定义GreenSock缓动,让您可以轻松顺畅地进行这些互动
  • 装载机和旋转器:此系列支持500多种独特的装载机和旋转器。如果你曾经在一个车辙,这将是单点联系,可以带你离开它。

05.钢笔作为资源

虽然CodePen最初是为了显示更小,更孤立的代码演示而构建的,但很明显有些用户想要更多的结构和混淆。解决方案是使用Pens作为其他笔的资源。

在最基本的形式中,这是通过从每个Pen公开原始的,编译的JavaScript和CSS来完成的。这样,您就可以构建一个包含单个组件的非常大的项目结构。你可以为任何笔做到这一点:所以codepen.io/team/codepen/pen/EVdVpQ你会添加后缀.js文件查看JavaScript,或的CSS查看CSS。

您可以从一个Pen链接CSS或JavaScript,并在另一个Pen中使用它,以在更宽松的意义上形成“依赖”。但是,如果使用预处理器,则可以创建“真实”依赖项。因此,如果您为一个Pen定义一组变量和mixins并将其作为外部资源链接到另一个Pen,您将能够在第二个Pen中使用这些相同的变量和mixin,否则它们将失败或出错。

06. CodePen电视

CodePen TV dispays a slideshow of random animated Pens – just sit back and enjoy

CodePen TV播放随机动画笔的幻灯片 - 只需坐下来欣赏

2015年出生于随机黑客日,CodePen电视演示在全屏幕上无限循环的笔集合。因此,如果你在一个会议上演出,这将是一个很好的方式来展示人们在后台大屏幕上制作的内容。

还有一点Mac屏幕保护程序您可以使用在待机屏幕上显示所有喜爱的笔。这对于更多可视化CSS和Canvas笔非常有效。

07. Prefill API

With the Prefill API, you can offer links and demos in your documentation without having to code anything

使用Prefill API,您可以在文档中提供链接和演示,而无需编写任何代码

CodePen最强大和最有用的功能之一是它的Prefill API,它使您能够在文档和演示页面中添加链接和演示,而无需在CodePen中实际编写任何代码。此功能使CodePen成为Mozilla开发者网络的重要组成部分,以及许多其他优秀资源。

它的工作原理是将特定参数传递给定义的URL。要使用您选择的代码和选项预先填写笔,您可以POSTcodepen.io/pen/define/对于数据,其中数据的值是包含您想要预填充的所有位的JSON。例如,这是一个简单的Hello World:

当您提交此表单时,您将被带到CodePen编辑器,并根据定义的数据填写笔的标题和HTML。

它也不止于此。您可以从此API定义几乎所有的笔设置,以提供包含预处理器的完整自定义编辑器。您可以阅读有关Prefill API的更多信息这里

08. CodePen模板

当您保存笔时,您还可以选择将其另存为模板。模板功能允许您为Pens创建和保存一组默认代码和设置,例如可重复使用的入门套件。

也许你喜欢使用Markdown和Sass,并且可以使用jQuery - 你可以为它制作一个模板。或者有时你可能会使用Jade,Sass和响应式元标记。你也可以为它制作一个模板。但模板不仅仅是设置,它们也是HTML,CSS和JavaScript编辑器中的实际代码。您在编辑器面板中编写的任何内容都将包含在您的模板中。

当您使用公司JavaScript库或设置时,这些非常有用,并且希望快速启动并运行项目。这些模板也越来越多地用于特定的库设置:具有反应,反应和基本组件支架,只需单击一下就可以节省大量时间。

本文最初出现在第283期网络杂志,专业网页设计师和开发人员杂志 - 提供最新的网络趋势,技术和技术。在这里订阅网

相关文章:



翻译字数超限