CodePen 简介

前端的小demo应当存放在那?GitHub Pages?博客子目录?如果你还没有用过CodePen,是时候去了解一下了。

CodePen是一个完全免费的前端代码托管服务。与GitHub Pages相比,它最重要的优势有:

  • 即时预览。你甚至可以本地修改并即时预览别人的作品。
  • 支持多种主流预处理器。你从不需要手写生产级别的代码,无论是Jade、LESS、Sass,还是CoffeeScript、es6+(Babel),都能尽情使用。
  • 快速添加外部资源文件。只需在输入框里输入库名,CodePen就会从cdnjs上寻找匹配的css或js库。
  • 免费用户支持创建三个模板,不是每个作品都需要从白板开始。
  • 优秀的外嵌体验,且支持oEmbed。在WordPress或Reddit等支持oEmbed的平台上,只要简单地把链接贴入编辑框,发布后会自动转为嵌入作品。例如:

当然,它不是Git,不能记录提交历史。不过有fork功能,通常出于“备份他人优秀作品,防止未来该作品消失了或者变了样子”的目的而使用。

如何上首页

上首页是提高作品曝光率的最有效途径。一般来说,上过首页的作品的访问量通常比其它的高出一两个数量级,这从我的主页能看出一些端倪。那么如何上首页?很简单,要做的仅仅是把作品转发到twitter,并@CodePen即可。如果作品符合CodePen团队的胃口,他们会将作品放入队列中,等几小时就能在首页看到你的作品了。

什么样的作品符合CodePen团队的胃口?他们在文档里这样说道:

这没有特定的规律可循,我们只是选我们喜欢的。我们认为有趣的、不寻常的、好看的作品。

被挑选的作品往往有着不错的视觉体现。假如你写了自古以来最精明的JavaScript排序算法,然而页面一片空白,那我们可能不会看上它,因为白板在首页区域实在不好看。不过假如你把它写成文章(Post),那就另当别论了。

其它

  • 在CodePen上发布的公开作品均使用MIT开源协议。
  • CodePen团队目前只有八个人,完全称得上小而精。
  • 它的文档写得挺有意思的,充满了人文气息。

发表评论

您的电子邮箱地址不会被公开。