当前位置:
首页 > 网站分类 > 专业技术 > 【CodePen】前端开发必备的代码托管、在线编辑、即时预览工具

【CodePen】前端开发必备的代码托管、在线编辑、即时预览工具

网站名称:

CodePen

网站热度:4459°C     2 人喜欢
codepen

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

CodePen是干嘛的?

CodePen顾名思意,code+pen, 即“代码笔”,其寓意类似中国古代故事“神笔马良”中的那个“神笔”,不过,这里的“笔”是写代码的“神笔”。貌似说得有些玄乎了,说穿了,CodePen就是用来制作测试页面的网站。

【CodePen】前端开发必备的代码托管、在线编辑、即时预览工具

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

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

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

同类网站JsFiddle

我们可能熟悉或者至少见过类似的网站项目,如jsfiddle. 例如下面这个很简单的例子,依然是千年不变的张小姐:

如果jsfiddle被墙掉了,无法查看效果的可以委曲求全查看下面的截图:

【CodePen】前端开发必备的代码托管、在线编辑、即时预览工具

不可否认,CodePen确实借鉴了jsFiddle的部分灵感,但是,CodePen本身的创新以及冒险可以让这部分借鉴忽略不计。

CodePen与jsFiddle

jsFiddle基本上就是纯碎的demo展示与分享,其强调实现,因此有更多可供选择的JS框架(包括各个版本),如下截图:

【CodePen】前端开发必备的代码托管、在线编辑、即时预览工具

而CodePen只提供最新版本的jQuery, MooTools, Prototype框架,且默认不使用任何库:

【CodePen】前端开发必备的代码托管、在线编辑、即时预览工具

jsFiddle写代码的效果要手动点击Run才能看到,CodePen所见即所得。

jsFiddle的账户系统(登录注册等)属于自己,CodePen似乎需要的是GitHub账号。

CodePen所做的另外的工作是优秀前端demo的展示。我们进入其首页就可以看到很多精湛的前端demo效果,默认是编辑人工选择置顶推荐的。比如,有个首页推荐的demo是动感转圈圈的炫酷效果demo。

【CodePen】前端开发必备的代码托管、在线编辑、即时预览工具

如果下面一片空白,八九被墙了

【CodePen】前端开发必备的代码托管、在线编辑、即时预览工具

站点现有上百个精选效果,上千个各类前端demo效果。您可以从中获得很多前端交互的灵感,当然,其中的技术实现也可以一并学习!这就是我介绍CodePen项目最主要原因——you can get, not only share!

代码作品如何上首页

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

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

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

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

其它

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

【本文部分内容转自「见多识广:CodePen项目网站简介」及「CodePen 简介 - 前端游乐场」】

快速访问网站:【CodePen】
「淘小众」版权所有丨如未注明 , 均为原创
更多精品网站请访问【小众实用导航】

探索互联网世界,收集和分享实用互联网资源,推荐国内和国外知名、实用、创新、科技、优质的站点资源!互联无极限,探索无止境;分享求真知,网络无国界!

网友评论2

  1. 板凳
    星空游戏:

    感谢分享http://www.jinjf.com 

    2017-03-14 上午10:41 [回复]
  2. 收藏一下

    2017-03-16 上午10:17 [回复]

发表评论

表情
还能输入210个字

TOP