Cargo.js - 设计师也要有春天

2014年03月10日

因为工程师们都忙于产品的开发,所以建设团队博客这么“容易”的事情就落在了设计师头上。经过一番努力,本人终于建成了一个快如闪电、轻如鸿毛的博客。这时候大家觉得在关于页面放几张 Instagram 照片,可以展示一下我们团结紧张严肃活泼的精神面貌,这下完蛋了,要知道老子为了速度和体积,可是连 Bootstrap 都没用啊,怎么展示 Instagram 照片呢?是不是要用 jQuery 然后找个 plugin 来干这个事呢?万一明天大家不满足了,又想展示一下 Dribbble 图片了,是不是要再找一个 plugin 来干这个事啊?我突然感觉肚子疼,可能要请个假……

是什么?

Cargo.js 是一个独立轻巧,使用简单,获取 JSONP 内容来将其展示的小工具。

为什么?

作为设计师,我的要求很简单,我就要一个小工具,用起来傻瓜,体积小,速度快,不倚赖于其他库,可以一个搞定所有用 JSONP 的服务,有 client-side cache,可以轻松修改 markup 自己定制 template 的小工具。结果发现完全不简单,找来找去找到的都有点别扭,不是做得太多就是做得太少,没有称心如意的,只能自己写了,相信对我的设计师同僚们也是有用的。谁说设计师是一群孤独的人,只能做图片YY,做不了真东西?老子做一个给你看看!

怎么用?

下面以 Instagram 为例(Instagram 有点麻烦,所以特别讲一下,其他比较简单就不讲了):

  • 要使用 Instagram 的 API,首先你需要获得一个 access token。访问如下页面,注册一个新 Client / App:
http://instagram.com/developer/clients/manage/
  • Website 和 OAuth redirect_uri 都填写你的网站地址,如:http://mydomain.com;
  • 注册成功后你会获得一个 CLIENT-ID,拷下来;
  • 访问如下页面(将 CLIENT-ID 和 mydomain 替换为真实内容):
https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=http://mydomain.com&response_type=token
  • 点击“Authorize”后,页面会跳转到你的网站,在地址栏你会看到你的网站地址显示如下:
http://mydomain.com/#access_token=xxxxx.xxxxx.xxxxxxxxxxx
  • 将等号后面的一长串内容拷下来,这就是你的 access token 了。

以下才是真正使用 Cargo.js 的部分,以上看起来比较复杂都是 Instagram 的错,跟我没关系。

首先自然是将 Cargo.js 加到你的页面中去:

<head>
    <script src="cargo.js"></script>
</head>

然后扫一眼 Instagram API Endpoints (http://instagram.com/developer/endpoints/),了解大致的结构,就可以在需要的位置直接插入自己的 template 了,如:

<body>
    <script>
        cargo({
            endpoint: 'https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS-TOKEN&count=25',
            template: '<div class="instagram">\
                <h1>Instagram</h1>\
                <ul class="instgram-photos">\
                    {{#data}}\
                    <li>\
                        <a href="{{link}}">\
                            <img src="{{images.low_resolution.url}}">\
                        </a>\
                    </li>\
                    {{/data}}\
                </ul>\
            </div>'
        });
    </script>
</body>

稍微解释一下代码:ACCESS-TOKEN 当然是要替换的;count 当然是指取回多少张照片;熟悉 {{mustache}} 的人应该知道,直观来说就是 {{#data}} 和 {{/data}} 会把他们俩中间每张取回来的照片变成一个带原链接的 li。

再来一个应用示例,展示 dribbble 的 dribbble shots:

<script>
    cargo({
        endpoint: 'http://api.dribbble.com/players/dribbble/shots',
        template: '{{#shots}}<img src="{{image_400_url}}">{{/shots}}'
    });
</script>

就是这么简单,就是这么 flexible,我们设计师要的就是这样的东西。对于工程师和看得懂代码的设计师,Cargo.js 还包括了一些参数,你们可以用来干其他高端一点的事情,如 cacheExpire,success,error,beforeRender,afterRender 等,由于本文是写给普通设计师看的,这些你们就自己研究吧。

Download Cargo.js from Github

如果你有什么 idea,欢迎 fork,或者……想干嘛干嘛吧,毕竟是 WTFPL Licence 嘛。当然如果可以的话,还是希望你能将它再简化,进一步造福设计师们,然后告诉我一下 :)

办公室整理得差不多了,欢迎您来玩儿!

2014年03月07日

05

如题。(多图) …… [展开阅读]

做到认可自己

2014年03月03日

我小时候非常漂泊,父母经常在外面,我就舅舅那里住一年,跟着叔叔一年,或者外婆带着一年这样。所以也读了不少学校,后来有一段时间读了一所寄宿学校。当时那里是月假制度,平时周末就只有在校内的半天假期。我有一段时间的那个半天,就泡在学校图书馆里面,把从创刊开始的「科幻世界」全部读完了。「科幻世界」对我影响特别大,不过在我高中的时候,他越来越水,我也就弃了。我最喜欢的 …… [展开阅读]

帮助他人,成就自己

2014年02月28日

最近几年,互联网产品,无论是移动互联网还是通常的互联网依然是创业的热门方向。国内外太多的人都挤到这个领域来,想分一杯羹,几乎人们身边可以被想到的需求都被挖掘的差不多了。不过最近我听到周围创业朋友的声音,有了更多一点的理智:不愿意做纯互联网产品,要和传统行业紧密联系!对于我而言 …… [展开阅读]

An Obligatory Hello World

2014年02月24日

01

今天是我们正式成立后开始工作的第一天。新的一年,新的环境,新的伙伴,对于工作,我们有一些新的期许。我们希望每天都轻松愉快,热情高涨,气氛和睦,相处融洽,目标一致,分工明确,多思考,善沟通,高效率,有成果,做一些不装腔浮夸,自己喜欢,对人有用的东西,争取获得一些肯定,让我们所做的一切都显得有价值,也实现自己的价值。 …… [展开阅读]