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差不多就这样了,先写到这。