回到前端行业快半年了，工作之余喜欢逛逛 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，但是能返回正确的文件类型而不是把所有内容当二进制文件。

¶使用 NPM 包

在 Codepen 上使用 npm 上的包是非常常见的需求，可以直接使用 unpkg.com 这个 CDN：//unpkg.com/jquery，//unpkg.com/vue，//unkpg.com/svg.js 等等，很方便。

¶插入图片、字体等

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

¶创造并分享

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

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

Enjoy :)