自己做一个Bootstrap:带三角形的popup

screen-shot-2016-12-08-at-22-29-31

这个widget的难点在于上面的三角形的部分,我们需要用CSS实现一个看起来“有边框”的三角形。

我们利用没有长宽的Div,设置它的border为需要的宽度,并隐藏其他三边,这样三角形就做好了。

同样的原理,再定义一个三角形,将这个三角形位置下移两个像素(一个像素边框看起来很细,跟旁边的不匹配),覆盖于原理的三角形上面,这样看起来,就有了边框。

CSS3动画之CD旋转

很多时候,我们可能要让网页中某个元素旋转起来,例如我们要让一张CD的封面旋转起来,看起来像真实的唱机一样,这时候我们可以使用一下代码:

1,先让图片变成圆形,这里我们使用 border-radius:100px;  这里的100px是正方形图片的长和宽

screen-shot-2016-11-22-at-01-20-48

2,使用CSS3动画transform:transform: rotate(360deg); 来旋转图片,如果只到这一步还是不够的,图片就旋转了一下,没有动画的效果。

3,使用CSS3动画中的animation  让动画有一个慢慢的过程

4,使用@keyframes,指定每一帧的动画效果,可以使用from to 也可以使用百分比的形式。像这种东西,我们当然用SCSS的for循环自动生成。一个一个CSS写很累的。

screen-shot-2016-11-22-at-01-24-29

5,将SCSS文件编译成CSS文件,可以看到我很已经很好的完成任务,如果你不喜欢SCSS的话用CSS也是可以的

个人工作管理的小东西

工欲善其事,必先利其器,每天都有很多事情需要去做,用Angular做了一个小软件,包括时间,天气,todo这三个widget,基本满足日常的需求,现在已经开源,方便大家下载,同时自己也在持续的更新中。

下一期的目标是增加一些网络相关的widget,例如IP,ping,location,提升个人效率,并且把各种widget做成可拖拽形式。

不过当务之急,还是用Require JS重构一下代码才行,现在组件多了,不好管理。

Github地址:https://github.com/qzm/angular-personal-page

screen-shot-2016-11-19-at-01-36-14

解决没有“Access-Control-Allow-Origin”无法跨域的问题

今天准备去抓去凤凰网的新闻内容,发现凤凰网的RSS并没有设置 “Access-Control-Allow-Origin”,导致XHR请求被浏览器禁止了。screen-shot-2016-11-18-at-22-10-34作为并没有获得授权的人,无法使用JSONP,也无法设置服务器的Header,想在前端获取凤凰网的RSS内容变得不可能,那么这时候我们可以使用自己搭建的服务器,做一次跳转,抓取内容之后,再由前端获取,这样就跳过了浏览器关于跨域的限制。

常见的方法可以使用Apache或者Nginx的反向代理。

这里我们使用Node.js抓取数据,然后直接返回前端,并且添加了Access-Control-Allow-Origin的Header。

screen-shot-2016-11-18-at-23-39-09

代码下载:server.js

Angular坑01:多次module后Directive被覆盖

刚开始用Angular JS的时候遇到了一个问题,定义了两个Directive(DATE和WEATHER)两个directive单独使用的时候都没有问题,但是同时使用的时候,前一个date的directive会被覆盖掉,这个问题在两个directive写在一个js文件的时候没有出现,所以第一直觉是,分开两个文件之后:

“某些公用的东西,被重复建立覆盖掉了”

那么我们看回原来的代码,唯一有可能重复定义的地方只有

angular.module(‘personalPage’,[]){

}

在单独一个文件里的时候,这个只使用了一次,而分两个文件的时候,使用了两次,所以问题会不会重复定义了personalPage这个module导致后面的directive被覆盖掉了呢?
screen-shot-2016-11-15-at-15-34-14

我们修改代码之后,看看,在app.js里面定义personalPage并且赋值给一个变量,将这个变量作为参数传入两个directive中。

(function(window, document, personalPageApp) {
// body…
})(window, document, personalPageApp);

ok!!问题解决

真的是因为重复定义了module导致的问题。screen-shot-2016-11-16-at-13-57-12

经过测试,如果两个module不同名字的话,建立两个app,是没有问题的,但是和我们想要的不是一个业务逻辑了。

创业后遗症

当你年轻不懂事去创业的时候,作为一个过来人,也要给大家提个醒,千万不要忘记自己的谋生技能,不管你是程序员,还是设计师,在你创业的过程中,都不要放弃对技术,对艺术,对自己专业知识的积累和学习。

我知道创业的过程很繁忙,很多事情需要处理,这些事情有些事跨学科,你需要学习金融知识,需要学习管理知识,会觉得自己本专业的知识掌握了就好,但是恰恰相反,真正能保证你人生安全的,是对风险的把控

如果因为创业把你的专业知识遗忘了,那么你的风险将会变得非常非常大,在创业失败之后,你不能很好的进入工作中去,没有时间给你从头到尾的学习一遍。

这个道理其实我很早就明白,在创业的时候也没有放弃对自己技能的学习和积累,但相对一直在工作中的同学,广度可能会有,还是会有不太深入的问题。

既然明白了自己的问题在哪里,那么接下来的时间,就是

恶补一下以前的知识和技能。

共勉!!