CSS实现带遮罩的背景图效果

要实现的效果如下图,前景文字和背景图,同时背景图带有遮罩效果。

方案一:使用background和after伪类组合-伪背景色


原理如上图,div的伪类实现带透明的背景图,div本身background-color实现黑色背景,伪类背景图(透明度0.4)覆盖在黑色背景上面。
html和css代码片段如下:

方案二:使用background和after伪类组合-伪背景图


原理如上图,div的伪类实现带透明的黑色背景色,div本身background实现背景图,伪类背景色(透明度0.6)覆盖在背景图上面。
html和css代码片段如下:

方案三:使用img和background组合

原理类似方案一,img提供透明的图片,父元素提供黑色背景色,img和父元素组合实现需求效果。
html和css代码片段如下:

CSS实现带遮罩的背景图效果

Mac OS 下搭建OpenCV开发环境

环境:macOS Sierra 10.12.5
IED:Xcode 8.3.2

1. 安装opencv2
brew install opencv
查看是否安装成功(我安装的版本是2.4.13.2)
ls /usr/local/Cellar/opencv/2.4.13.2/lib

2. 打开Xcode
2.1 新建macOS Command Line Tool应用

2.2 在build setting和build phases里添加opencv library

在弹出的文件选择框中输入Cmd+Shift+G,键入opencv lib所在位置(本文为/usr/local/Cellar/opencv/2.4.13.2/lib),或者可视化得直接找到位置,选择opencv所有的lib(本文所用opencv 2包含18个lib)。注意不要同时引用多个版本的lib,例如2.4和2.4.13。

2.3 在main.cpp里添加demo代码

2.4 cmd+R或者点击build按钮启动应用

Mac OS 下搭建OpenCV开发环境

MVC vs MVP vs MVVM

MVC,MVP,MVVM是三种流行的设计模式,常用于框架设计中。

MVC最早由Trygve Reenskaug发明的,并最早应用在Smalltalk-80中。MVC是被误读最多的设计模式之一,关于它的解释和实现有很多版本,也有过很多“升级”解释,但设计思想是一样,这里仅描述它原始概念。
在MVC中,View和Controller是成对出现的,共同称为表现层,Model可以为多个VC组合作为数据源,这就是MVC业务和表现分离的实现。其中,Model是重量层,实现业务逻辑和数据操作,View是UI层,仅仅实现数据展示,和用户交互,而Controller用于将用户操作传递给Model进行业务操作,并根据Model返回值执行相应UI操作。
MVC是用观察者模式实现的,从下图可以看出,View监听Model,Controller监听Model和View,而Model监听Controller。

MVP最早来自Taligent发布在IBM开发者中心的文章中,是MVC模式的衍生和改进。
在MVP中,Controller替换为Presenter,它更像是一个中介,处于M和V中间,这时M和V不再直接通信,而是通过Presenter。如下图所示,用户操作通过P从V传递到M,而数据通过P从M返回给V。它使MV之间松耦合,然而确加重MP之间的耦合度,这个可以为M增加一个Facade(如get操作)与P通信。

MVVM源自于Martin Flower的Presentation Model (PM),关于MVVM的理解目前是统一的。和MVC不同的是,VM更重,它除了负责与M的业务通信,同时还是V的管理员,如下图,它是独立于V的,V和VM是多对一的关系,如下图。数据实际存储在VM中,V只有对VM中数据的引用,通过双向绑定实现数据的同步。

 

REFERENCE:
https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
http://wiki.c2.com/?ModelViewController
https://martinfowler.com/eaaDev/uiArchs.html#ModelViewController
http://wiki.c2.com/?ModelViewPresenter
https://medium.com/@ankit.sinhal/mvc-mvp-and-mvvm-design-pattern-6e169567bbad#.tt8ljstee
http://www.infoworld.com/article/2926003/microsoft-net/exploring-the-mvc-mvp-and-mvvm-design-patterns.html

MVC vs MVP vs MVVM

聊聊impossible person

某天上班路上听到一则讨论how to deal with impossible person的广播,短短几十分钟感觉受益匪浅。回想满是‘高智商低情商’的IT界,不知道身边多少impossible person,他们可能在我们的圈子里,可能是我们的客户,更可能是领导。这类人之所以被称为impossible person,“不可能先生”,因为我们不可能和他们达成共识,不可能进行理智的谈话,他们永远认为毛病出在别人的身上。

这类人群有多种类型,例如依赖型,控制型,竞争型,消极型,自负型,抱怨型,消极型(装可怜)等等,针对每种类型有不同的处理方式,但存在一些通用的原则,帮助我们避免陷入无休止的争论中。

1. 不要尝试改变他们
不可能与他们进行理性的讨论,他们根本不听原因,即便是合理的,所以别在一个点上争执,避免一对一争执,引入第三方团体。不要辩解,因为说服不了他,他也不听原因,因为他觉得就是你的错。不要冲突,因为他就是想挑事的人,擅长颠倒黑白,如果你开始情绪化,被他激怒,这正好是他想要的,就是故意伤害你,让你成为坏人。不要理会他,保持距离,不要跳进他想要的冲突陷阱,别给他发怒的机会,他就会转移到别的地方。
2. 调整自己心态,冷静下来
深呼吸,当你觉得要失去理智,发怒,赶紧离开,或者找其他事情干,让自己远离他,这样避免不理智结果发生而后悔。性格不合,其实两个人本身都没有问题,但他们在一起却没发融洽的共事,是双方沟通问题。避免以牙还牙,不要作为报复或者存在不平衡感,让自己变成了impossible person,将这些不好的特性反过来用在别人身上。将这种过程当做一次成长,当做一次人生课程。当impossible person意识到自己错了,自尊心会让他们的行为导向另一个极端,不要被这种行为所左右。他们就是想找软柿子捏,你想表示和平,谦虚,不一定需要让步,表现出懦弱,要保持自尊心,做自己,找个懂你的人倾述,例如旅行,在线社区,好友等,让自己好起来,不要一个人生闷气。不要老想这件事情,让自己从事更多有意义的事情,认识更多的人,不要让冲突影响到自己的正常生活。千万不要带着情绪卷入讨论中,保持沉默,偶尔幽默一下,表现出中立的态度,就事论事。也找找自身问题,即便自己是对的,站在对方角度自省一下(也会让自己平静下来)。
3. 尝试理解他们,找到value language
即便是impossible person,他们也有自己的诉求,有自己value language,找到他的value language,学会成就别人。
4. 不要让他们成为敌人
如果他还不是那种找茬型的人,可以考虑提出一起思考型问题,大家一起商量,而不是钻到牛角尖,让他觉得你确实在努力解决问题。动态规划,这个属于高级策略,就是要预测到他的下一步计划,而采取相应的反制措施。如果是长期的,实在躲不开的情况,做好打持久战的准备,学习他的策略,提前考虑应对策略,终极策略就是可以准确猜到他下面会怎么做,这时候也要明确告诉他:“你真的非要这样吗?”,至少某种程度让他感受你的坚毅。给自己设置原则和底线,让他知道底线,超出底线绝不能妥协。无论他多需要你,多么强烈挽留,远离impossible person。

我觉得在IT领域重点防治三种人:控制型竞争型消极型
1. 针对控制型的人,因为他们必须要证明自己是对的,喜欢指责别人,所以别试图证明他是错的,或者你做的更好。
2. 针对竞争型的人,他们总想争个高下,没有冲突也要制造冲突。不要受他情绪影响,他们要没无休止的斗下去,要么彻底甩掉你。如果他不肯让步,就让他赢,另找时间再进行研究,别耗下去。同时不要被恐吓到,被控制,或者闹翻,做好自己的事情。
3. 针对消极型的人,他们表面不说,甚至微笑,但下面却在准备攻击,会将来偷偷的爆发出来。这种情况要摸清到底为什么,不要表示出敌意,真心估计他说出真实的想法,沟通到正面解决。

总之,关于impossible person,不要认为这类人不会出现在我的身边,积极面对就好。第一,平常心,保持冷静。准确识别impossible person,treat like a game,like way to grow up; 第二,不要让自己变成impossible person,不要冲动起来。

REFERENCE
http://www.wikihow.com/Deal-With-Impossible-People
http://www.huffingtonpost.com/deepak-chopra/how-to-deal-with-difficul_b_598163.html
http://www.scienceofpeople.com/2014/03/4-types-difficult-people-deal/

聊聊impossible person

Docker 系列 – docker cheatsheet (持续更新)

#list running containers
docker container

#list all containers
docker container ls -a

#list exit container ids
docker container ls -aq -f status=exited
docker ps -aq -f status=exited

#remove stopped containers
docker ps -aq –no-trunc | xargs docker rm

#list only image ids
docker images -q

#list all images including intermediate images
docker images -a

#prune dangling images
docker rmi $(docker images -f “dangling=true” -q)
docker images -q –filter dangling=true | xargs docker rmi

#remove unused images
docker rmi $(docker images | grep none | awk ‘{ print $3}’)
docker rmi $(docker images –quiet –filter “dangling=true”)
docker images -q –filter dangling=true | xargs docker rmi
docker image prune -f

#remove unused volumes
docker volume rm $(docker volume ls -q )

#remove unused networks
docker network rm $(docker network ls | grep “_default”)

#remove stopped + exited containers
docker rm -v $(docker ps -a | grep “Exit [1-255]” | awk ‘{ print $1 }’)

Docker 系列 – docker cheatsheet (持续更新)

SVG图标 – 踩过的坑

1. Safari SVG bug
Safari浏览器对svg fragment identifier的支持不好,即在动态环境下(server上)使用img标签访问name.svg#frag_id不会得到预想的结果(本地静态文件访问没有问题),目前仅sarafi7支持。这就意味着如果使用svg sprite,并且需要兼容safari,那么不能使用img标签,如下图。
两种解决方法,一种使用和img类似的embed或object标签,另一种是使用svg symbol内联形式,我更推荐后者,它不仅可以方便控制svg图标,而且兼容ie9+。

2. svg对齐
在svg图标右侧经常会有文字说明,而svg标签默认的vertical-align是baseline,就会造成文字偏下,如下图左,解决方案为将vertical-align设置为middle,如下图右。

3. 内联svg无法修改颜色
众所周知使用内联svg图标可以修改颜色和尺寸,如下


但是,有时候开发者会发现使用fill或者sroke不起作用,无法修改填充色或者边框色,这是因为svg图标已经添加了fill或者stroke属性,大部分情况下是设计人员导出svg图标的问题,有意无意附上了fill/stroke属性,如下svg文件,它就不能使用fill修改颜色。

4. 传统方式使用svg图标的缺陷
使用传统的方式,包括img,background,甚至view(fragment identifier)和stack,都是无法通过fill,stroke,svg filter去修改它的样式,原因在于svg的属性不能通过class改变,必须通过在标签上增删属性实现(e.g. <path fill=”red” stroke=”grey”….)。所以推荐使用内联svg标签,如果非(jue)要(jiang)使用img等,可以通过如下三种方式修改:
    1. 使用js获取svg dom,直接增删属性
    2. 使用css3 filter修改
    3. 针对不同颜色,大小制作多个svg图标(最简单粗暴)

5. svg use浏览器兼容性
svg use标签是不兼容IE 13以下所有的浏览器的,可以使用polyfill svg4everybody or svgxuse解决

SVG图标 – 踩过的坑

web图标技术简史

在计算机科学中,图标(icon)是用于导航目的的象形图,一般是一些尺寸很小(例如48*48)的图片,例如windows中的“我的电脑”。而在网页开发中,图标具有更广泛的作用,它可以是具有交互功能的导航按钮,增加页面美观,提高页面可读性,还可以通过动画效果使页面更加炫酷,吸引聚焦更多客户。

从传统图片形式的图标,到现在矢量图形式的图标,再到通过css直接绘制的图标,图标技术大概经历如下三个大的阶段:

1. 以png为主导的图片形式的图标
在IE统治的网络世界里,图标都是由图片实现的,这样就造成一个网站包含大量的图片(虽然早期的网站本身就充斥着大量的大图片,相比而言图标都不算什么),这样不仅增加网络请求数量,而且增加网页体积,降低加载速度,更甚之还会遇到ie6 透明度bug
另一方面,对比jpg和png图片,png虽然是无损格式,但由于它在各类浏览器中支持较好,而且对于简单色彩的图片和文字图片,它的体积比jpg还要小,所以对于图标的实现,png格式应用更为广泛。
最后,在没有CSS3的那些年里,甚至当前“偷懒的人”,想实现兼容ie的带有阴影,渐变及特殊形状等的图标,png图标还是部分被采用的。

2. 以font为核心的字体形式的图标
互联网的发展促使网页应用需要更好的用户体验,也就需要大量简约,统一,美观的图标,字体图标就是伴随着社交网络和CSS3而出现兴起的。它的实现基于font face和字体文件集,包括eof,ttf及woff等。
相比传统图片图标,它是矢量图,可以方便的缩放尺寸;它本质还是字体文件,也就可以使用css font相关属性实现各种效果,例如颜色,阴影等;它还有很好的性能表现,因为字体文件通过一次请求就可以获得,就像图标的sprite技术。这样就避免了到处搜罗各种图片,只需要一个规范统一的字体文件集合,目前最流行的当属font awesome。
需要提一下字体文件,eof和ttf字体是老的字体格式,eof仅为兼容ie而存在,ttf的版权问题而被抛弃,woff是目前的主流格式,如果只兼容现代浏览器或者高版本ios/android,只需要woff就够了。
当然,它的缺点在于兼容性(虽然现在逐渐可以忽略),例如ie8它需要提供html5js shim,同时它还有定位不准,可读性差,与表情冲突及不适合做复杂图标等缺陷。最后,定制化字体图标相比会复杂,不过大量iconfont生成网站和插件在一定程度解决了这个问题,例如font custom

3. 以svg为代表的矢量图形式的图标
svg是与woff同时出现的业界推崇的图标实现,apple很早就开始使用svg图标。
和字体图标一样,svg也属于矢量图标,所以它的体积小,控制灵活且扩展性好。相比字体图标会有定位不准确问题,svg图标可以精确定位,并且可以无损缩放到retina屏幕上。和字体图标相比,svg是图形,不是字体,所以它没有锯齿问题,还可以使用多种途径显示,包括背景图,img标签以及内联直接插入html,尤其内联是目前比较流行的方案,它就像html一部分,减少网络请求。不像单色的字体图标,svg是多色的,可以实现更漂亮,更丰富,更像传统图片但各方面都优于他们的图标集合。
svg图标的缺点包括ie8兼容性,图标体积随图标复杂度非线性增大,而且它的原子性决定不能像普通图片一样显示部分内容。

4. sprite
Sprite是为解决网页图片过多造成的服务器请求压力而提出的,基本思想就是将所有图片放在一张大图上,通过css 定位所需要的图片。它不是新技术,早期的网站开发大量使用sprite,很多实现渐变效果的线条,背景色,hover切换都会放在一起,如下图是两个典型的例子,一般由人工摆放。


它还可以用在动画实现上,配合js或css3 animation可以很简单的实现动画效果。
除了字体图标,无论图片还是svg,为了增加网页性能,减少请求数量,都是需要sprite技术的,例如svg_sprite,它可以自动生成svg sprite,以及相应css文件甚至demo,还支持多种模式包括view,defs,symbol及stack等。

5. CSS3样式图标
CSS3图标并非主流,仅用在对图标需求量不大,并且图标相对简单的场景下,例如箭头,对勾等,而且由于它完全由CSS3画出来的,存在兼容性问题。这里有一些不错的CSS图标,可以激发用CSS绘制图标的灵感。

相关链接:

web图标技术简史

SVG图标 – 基础篇

1. svg作为背景
用法同普通图片,大小缩放由元素的width/height和background-size属性一起实现。

2. svg作为img前景
用法同普通图片,使用width和height缩放图片。

3. 使用svg defs
以上两种方式都是直接外部引用(external)svg文件,下面两种方式defs和symbol属于内联引用(inline)svg元素,既可以通过路径指定svg文件,也可以直接将svg代码放入body中。

内联引用demo
定义在defs中的元素的作用是为以后的引用,所以它们是不可见的(invisibility),只有通过use元素才能访问。需要注意的是,内联型定义defs的svg元素需要隐藏,否则在页面会留白,因为svg本身会占用空间,例如下面demo中将svg的wdith和height设置为0,position设置为absolute,当然直接display为none也可以。

外部引用demo
大部分情况,为了所有页面共享,会将defs定义放在一个单独的文件。它需要注意的是,svg标签不需要隐藏,但必须有w3c的命名空间声明,否则use无法找到相应图标。

4. 使用svg symbol
symbol用于定义可以多次引用的图形模版,并且可以为其添加语义和结构,使用上和defs很类似。它们的区别在于viewbox可以直接定义在symbol标签上,而且symbol可以有自己的desc和title,增强可读性,所以目前对symbol的支持超过defs。

 


5. 使用view定位svg
view更像一个虚拟的空间,在view中定义viewbox可以指定显示图形区域。
从下面的demo可以看出,每个view在svg图形中“圈”出一块小区域,代表一个icon。

6. svg stack技术
设计师总是在寻找用最小的空间摆放更多的图标,而这个可以通过svg堆叠实现,这点普通图片是做不到的。从上面的demo可以看出,两个heart图标是非叠加并列的放在一起的,假如有100个图标,应该是很大的一个文件,而在svg中这些图标可以交叉堆叠在一起,如下图,但带来的问题就是文件的可视化,不能直观的找到和看到图标。

为了把普通svg改造为stack,需要两步,首先通过viewbox改为一样而将所有图标堆积在一起,然后通过样式隐藏所有图标,只有:target元素显示。

DEMO下载链接: svg demo

SVG图标 – 基础篇

Angular 缓存view后出现无法找到view(‘can not find view’)错误

环境:angularjs,grunt

问题:grunt对js/css/html进行合并,压缩,发布后,在index页面出现’can not find view’错误

分析

  1. 查看html文件确实存在
  2. 查看grunt配置,是否包含相关html文件(这里用grunt-angular-templates插件
  3. 将html文件换存到$templateCache中)
  4. 查看合并后的script.js文件是否已经cache html文件
  5. 查看压缩后的script.js文件是否包含需要的html文件
  6. 查看缓存的html文件路径和在directive中调用的文件路径是否一致

原因并解决:
在directive定义中对html的引用使用绝对路径,例如

而在缓存后的文件中,第一个’/’没有了,例如

解决办法就是在引用html文件时使用相对路径

Angular 缓存view后出现无法找到view(‘can not find view’)错误

Atom 显示/隐藏指定文件

基于git 管理的项目中,都会用到gitignore文件,它会自动忽略一些配置文件或者第三方依赖,例如.git, bower_components, node_modules等。在用Atom开发项目时,有时候希望显示或者隐藏gitignore指定的文件,或者自己指定的文件。

步骤如下:

1. 点击菜单 Atom -> Preferences,或者快捷键 Cmd+逗号(Mac),进入Atom配置。

2. 如果希望自己指定隐藏或显示的文件,点击Core,在Ignored Names 下录入想忽略的文件名。screen-shot-2016-11-21-at-15-54-203.  点击Packages,输入 tree-view或者直接滚动到tree-view包位置,点击SETTINGS,勾选“Hide Ignored Files”和“Hide VCS Ignored Files”,它会即时生效。前者控制步骤二指定的文件,后者控制git等VCS (version control system) 指定的文件。

screen-shot-2016-11-21-at-15-51-50

screen-shot-2016-11-21-at-15-52-33

Atom 显示/隐藏指定文件