/ codepen

玩转 CodePen

回到前端行业快半年了,工作之余喜欢逛逛 CodePen,这里不仅适合新手磨练前端技术,还有很多创意工作者在发表优秀作品。于是也注册了一个帐号,没事的时候写点东西玩玩。

CodePen 简介

CodePen 的工作界面很简洁,三个编辑器和一个预览容器。分别可以输入 HTML,CSS 和 Javascript——展示一个创意所需要的全部东西。

此外,CodePen 还支持预处理器。例如你可以用 Haml/Markdown/Slim/Pug 语法来写 HTML;也可以用 LESS/SCSS/Sass/Stylus/PostCSS 语法来创建 CSS;以及用 CoffeeScript/LiveScript/TypeScript/Babel 语法来生成 Javascript。最终这些代码会被合并成一个 HTML 运行在预览窗口中。

在 Pen Settings 中,还可以自定义 HTML 的 head 部分,很方便地引用第三方库,例如 Bootstrap、jQuery 等。

使用 Github 上的源码

如果想要引用 github 上的第三方库,有一个小技巧。首先找到源码的发行包(*.min.js)。以 stats.js 为例:https://github.com/mrdoob/stats.js/blob/master/build/stats.min.js 然后使用 rawgit 转换成 https://cdn.rawgit.com/mrdoob/stats.js/28632bd8/build/stats.min.js
即可在 CodePen 中正常引用。如果直接使用原地址,会报以下错误:

Refused to execute script from 'https://github.com/mrdoob/stats.js/blob/master/build/stats.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

rawgit 的作用相当于 CDN,但是能返回正确的文件类型而不是把所有内容当二进制文件。

插入图片、字体等

如果你需要用到外部图片或字体,而没有合适的地方托管这些资源。可以直接将其转成 Base64,以内联(inline)的方式嵌入到代码中。方法可以参考「黑客帝国字幕流效果」这篇博客。

创造并分享

当完成一个小作品后,你可以把它分享到其它网站。例如嵌入到博客中:

另外你还可以将作品分享到 twitter 并同时 @codepen ,这样你的作品会进入到一个审核队列中,如果工作人员看到并觉得作品有趣,会将其收录到 CodePen 的 Picked Pen 频道,使得你的作品就会被更多的人看到。

Enjoy :)