Flat-UI 正确打开方式

  Flat-UI 是一款基于Bootstrap扁平风格的UI工具包,个人觉得风格比较美观,简洁,控件齐全,加之扁平化趋势,故用在了花图影铺项目中。有免费版和Pro版($39)可供选择,Pro版多了PSD原件,也用不到,选择免费就可以。

  众所周知,前端的项目一直以来都是拷贝HTML,CSS,JS到工程下直接引用就完事了,花图影铺之前就是这么做的,但这种做法已经非常过时了,自己做了修改后将无法再与官方的新版合并,而且有些细微的调整涉及到很多个地方要修改。对于Bootstrap这种巨复杂的设计,要定制化就几乎是不可能的事了。为了解决这些问题,前端开始有了新的玩法,从开发到测试再到构建都需要配套跟上。而Flat-UI 就是采用Grunt来进行自动化构建,用Bower来管理JS依赖,用Less来与编译CSS,等等等等。简单说下是如何构建Flat-UI的。

  Git clone下来的Flat-UI 包含了以下一些重要东西:

bower.json

这个是bower要用到的依赖声明文件,可以看到里面依赖了jQuery,bower会自动下载指定版本的jQuery到bower_components目录之下,以备后用。全局安装bower:npm install -g bower,新项目也可以用bower init来生成。

package.json

工程说明文件,包括工程名,作者,版本,Grunt依赖包等一些信息。如果一个新的项目,可以用grunt init打开一个向导一步一步填写。

Gruntfile.js

这个是Grunt执行脚本,会从上面的文件中读取值,里面定义了一些处理事件,比如清理之前构建,测试,压缩CSS,JS,生成文档,复制等等,甚至可以起一个静态服务器来调试。无比强大,类似于Maven pom文件。

  以上文件在Flat-UI工程目录中基本上不用修改,只需要在当前目录下执行bower install 下载依赖js包,grunt install 下载grunt工具,再执行grunt dist 就能在dist/目录下获得最新的可发布版本了,将该目录文件复制到web工程中引用就好了。

  关于less目录就包含了Flat-UI 所有CSS配置地方,主要修改的就是这里了,比如改变导航背景颜色等等。其中按模块归类的非常好,一眼就能看出该修改哪里,variables.less 定义了所用到的颜色,全局样式,排版,小图标,表格等等。修改起来非常容易,尤其还有一些联动的取色,通过一个基准色,计算出偏亮或者偏暗值,而不需要一个一个去查色板。修改完后只需要grunt dist 就能生成好CSS。

  Flat-UI 不仅是一个优秀的UI工具包,同时也是一个学习前后端分离构建的好例子,当然这只是针对我这以后端为主的开发者而言。

  参考:https://github.com/designmodo/Flat-UI

最优化使用阿里OSS云存储

  上一篇文章讲到了为何要迁移到阿里OSS,经过几天时间的实际验证,发现还是踩了不少的坑,这里记录下,供参考。

  首先有几个先决条件如下:

  1. 全站所有请求必须HTTPS
  2. 全站仅允许出现自有二级域名
  3. 上行和下行流量均不经过ECS服务器

  (代码洁癖 8)

  阿里OSS我们可以简单的认为分两个部分:

一是存储有关的,提供了两个访问域名:一个是公网,一个内网

<bucket>.oss-cn-shenzhen.aliyuncs.com (A域名)
<bucket>.oss-cn-shenzhen-internal.aliyuncs.com (B域名)

二是为图像处理(缩图,转码)有关的,也提供了一个访问域名:

<bucket>.img-cn-shenzhen.aliyuncs.com (C域名)

我们在这个图像处理的功能上面绑定了一个自有的二级域名:

image.hitu.me (D域名)

默认分配并指向了下面的CDN加速节点域名:

image.hitu.me.w.kunlunca.com (E域名)

  暂且称为A~E域名,注意其中细微差别。其中A和B域名本身是支持HTTPS的,但C不行,在绑定了D之后,可以上传SSL证书开启。A域名也可以绑定自有域名,但不支持HTTPS。图像处理设置了禁止原图访问,也就是C,D域名仅允许通过“样式”访问到缩略图。但A,B不受限制,本来就不同的系统。

于是第一个方案是这样的:

用户上传:HTTPS POST A域名
用户访问:HTTPS GET D域名

  初看没啥问题,除了引入一个第三方域名,不符合预定规范,但也运行良好,但有个很严重的问题,会泄漏原图,将D域名的路径拼接到A上面就能拿到原图。故pass掉,和客服聊了后给了个鸡贼的方案:

方案二:

用户上传:HTTPS POST upload.hitu.me -> proxy_pass -> B域名
用户访问:HTTPS GET D域名

  在nginx上将用户上行的POST请求转发到B域名,这样可以在nginx层面拦截原图访问,并可以支持自有域名HTTPS。虽然又点不符合规范了,虽然ECS下行带宽还是蛮大的,proxy_pass也是内网地址,似乎也无大碍。

方案三:
将bucket设置为私有,这样POST不变,GET需要增加signature,想想就复杂,搞的URL又长又丑,没再尝试。

  后来想想,能不能直接POST到D域名试试,居然成功了。Object 管理中证实了文件是传成功的,但感觉怪怪的,原来CDN还能upload。官方文档似乎也没有说这样用合不合理,暂且先如此把。

风光摄影的一些tips

  风光摄影里面离不开超广角,滤镜,长爆这些,但比这还要重要的是体力。上周迁移完了相册,去了一趟背仔角,南山区过去光坐车就消耗了2个小时。穿过华侨公墓径直走到海边,放下包裹,组装好脚架,滤镜支架,结果发现没带快门线,临时用iPhone来控制。站站蹲蹲几个小时,海边那些风化的石头也不太好坐,累的够呛。

  1. 优先选择原厂的有线快门,不为啥,稳定。之前拍夜景准备了JJC的无线快门,时不时的触发失败
  2. 构图稍低一点,利用广角畸变带来冲击力
  3. 准备好镜头纸,随时擦拭意外沾上的小水珠,几率很高哦
  4. 上ND镜后使用实时取景会非常耗电,预览噪点非常严重,自动提升ISO导致,所以多备电池吧
  5. 接上一条,CMOS过热严重,画面暗部涂抹感,彩噪严重,所以多关机休息
  6. 关闭防抖,自动对焦
  7. 准备小板凳,重要!!

 接下来就是好好享受吧~~

深圳盐田背仔角

使用阿里云OSS WEB直传

  最近在忙着将Hitu.me的图片迁移到阿里OSS服务器上,并采用WEB直传方案,以加快客户端上传速度。并使用CDN访问方式来提高图片加载速度。目前所有的图片都是存储在ECS云服务器上,用的是FastDFS存储,纯Java的图片缩放处理,速度比较慢。并且单线程就将CPU消耗完了,2M的带宽也经不起并发访问,于是决定将图片迁移到OSS上。

  WEB直传的架构设计还是很优秀的,客户端直接POST请求到OSS服务器,无需经过ECS服务器,ECS只是计算一个Policy,并接收OSS回调,整个图片上传流程就完成了。OSS具有阿里的海量CDN支持,各种网络下都能很好的优化。

这里主要记录下一些细节:

  1. OSS要设置Cors规则,以便跨域请求
  2. 2. Bucket区域要和ECS区域一致,方便内网拉取数据
  3. 使用uploadifive上传组件且auto设置为true时,在onAddQueueItem方法中获取Policy,已换plupload,在BeforeUpload中获取Policy。
  4. 由于OSS会忽略请求中文件域以后的字段,因此在封装参数的时候,将文件域(Content-Disposition: form-data; name=”file”; filename=”xxx.jpg”)置于最后,这货貌似完全照搬Amazon S3,否则会找不到key

  Upload差不多就这样了,先写到这。

普宁寻梅记

  大概两周前,在开会的时候,Herman一条消息过来问周末普宁拍梅花,去不去。想想也有蛮久没活动了,且之前也错过了前两次活动怪可惜的,于是没多想就先答应了。Herman在科技也是做UI设计,风光大师,最近一组缅甸的人文纪实片还选入了《咔啪》杂志推荐,他在磨坊的发活动质量都还蛮高。常常在年初就把整年的旅行计划早早订好。

摘自Herman朋友圈
摘自Herman朋友圈

  就这样,在1月15号晚上一行十人出发包车去了普宁,八点左右出发,在出深圳的方向堵了一小会,上了高速后一路畅通。恰逢下大雨,不知为何夜里的高速公路特别的迷人,布满水珠的窗户,来回晃动的雨刮,被照亮的指示牌一个一个飘向身后,即便这旧面包噪音大再大,心情依然平静。赶在十二点正好入住酒店。

  第二天早早出发去第一站盛德梅海山庄,位于普宁市大坪镇善德村,距离市区51公里,由于当地居民往外迁,整个村子几本上原生态。起初以为只有这个山庄里面种植了梅花,没想到沿路上全是梅海,密密麻麻,处处皆美景,不愧为梅花之乡。当地政府是要把这一片打造成旅游景点,只不过是刚刚起步,比如这个山庄,大门口的收费处,停车场,餐饮住宿都齐全了,但还没开始收取门票,仅仅是20块的停车费。进去后一条小路绵延三公里都是梅,大开眼界。绝佳的拍照地点。无论是置身梅海中还是登高望远,都让人流连忘返。小雨中的梅花格外精美,挂着豆大的雨点,娇艳欲滴的样子,可惜没带长焦镜头,少了一份层次感。

  逛的差不多下山找到一处农家就餐时正好下大雨,此时真想打伞冲进梅海,将雨滴也收入画面中。作罢,还是爱惜下器材。短暂休息后,下午继续赶往泥沟村,该村普宁市重点侨乡,历史悠久,12年入选广东十大最美古村落。其建筑群颇具特色,四四方方,家家户户都是小两层,中间还有个露天院子,但一楼的采光很不好。车子开到村口,便没路了,只能步行,越往里走年代越悠久,瞎逛一阵子后碰到有缘人给我我们带路,找到了现存最老的一批房屋,却只剩断壁残垣,杂草丛生,据说也有百年之久了。这些形态及其相似的建筑,在Google Earth都能清楚看到。

未标题-1

  泥沟村给我的印象是非常的干净,人也很友善,其中碰到一位老太正好锁门出来,看到我们拿着相机,主动邀请去她家里看看,刚打开门,里面漆黑黑的,老太熟练的找到开关打开了灯,这才看清了里面的布局,简单清贫,像极了我小时候住在爷爷奶奶家那种感觉。

_MG_3989

  天黑后结束了一天的拍摄,此时又开始下起了大雨,驱车到12公里外的洪阳镇休息。次日决定再去拍一次梅花,洪阳镇往西走就进入了揭西,转到一条小道继续寻找梅海,后来在当地人的指引下爬过一座还在开发的山头,又发现好大一片梅海,山间空无一人,尽情享受。。。

QQ20160127-0@2x

  上图是三天的GPS轨迹图,橙色是第一天晚上去的,黄色是第二天,青色第三天的。梅海就分布在黄色左边处,途经乡道两边全是。就这样度过两天的普宁寻梅之旅,一脚泥土回到深圳。

  更多相片,可以在这里看到:相册