“邪恶”的opener

发表于 WebBuild

源于空空这条推

百度搜索结果页的那句 var location; 宛如神来之笔……


发散一下,然后在JerryQu及好奇同学的教导下知道了window.opener这个神奇的对象,然后发现它实在调皮又邪恶。他的location属性是个奇怪的东东,是外域虽然不可读却是可写的。
比如我们在页面中这样写(实例可以在http://hi.baidu.com/ivershuo_h右侧友情链接中点击最后一个那个名为“测试”的链接玩):

<script type="text/javascript">
var u = ['baidu.com', 'google.com', 'ivershuo.com'], 
i = 0 , 
l = u.length;
setInterval(function(
){
    opener.location = 'http://' + u[i];
    i++;
    i = (i == l?i = 0 : i);
},2000);
</script>


这样在所有链接到这个页面的页面就会出现不停跳转的情况,就算是使用后退按钮退回到先前的页面也一样(这个页面的opener将一直指向打开它的那个窗体)。这样对于一个普通的用户来说会觉得很奇怪。
如果用setTimeout及大延迟时间,然后用户又一直没关闭open(链接执行)页及opener页,且用户回到opener页继续查看,就会导致看到某个时间正在看的页面突然跳转而不知道在后面“捣乱”的却是来自外域的另外一个页面。
而如果针对某个特定的链接来源页(如搜索引擎搜索结果页),还可以预先埋上opener.location的hash到指定的页面id元素上,加上定时还可以让页面“跳舞”。
而如果是搜索引擎快照这样可能导致某些小风险同域风险的页面呢?
p.s:猜测因同步自己twitter显示到网页上的缘故,服务器ip在天朝某些范围处于和谐状态,建议用google reader订阅我的blog,RSS地址:http://feed.ivershuo.com/shuo

继续阅读 »

标记语言设计的抽象程度思考

发表于 WebBuild

突然觉得HTML越来越乱了,现在满世界都在喊着HTML5,前端同学好像都把他当作了一个救世主。

HTML是一门标记语言(Markup Language),标记语言在于他的设计不需要逻辑功能,他最主要的作用就是用确定的标签(在html中是HTML elements)来容纳有不同的内容。其实世间万物本来就有他自己的意义的,在网页上显示出来的一切文本、图像、视频也是。一块巧克力不把它放到巧克力盒子里我们一样知道它是巧克力,只是为了方便生产、运输、卖出的识别我们大多会将巧克力用包装装起来。一个图像我们不用img标签包含,浏览器也是有可能知道它是一个图像的,从一定程度上来说,超文本标记语言的发展是浏览器工业化发展的一个象征。将同类的的东西放到同一个特定的“容器”中,在oop中来说,就是类的思想了。

于是,真正引发的问题就是这个容器究竟该设计得多“大”?这就是设计中经典的抽象程度的问题了。阴阳五行足够概括世间万物、但不能完全描述世间万物。在HTML中,使用标签(Element)和属性(Attribute)二维结合来描述超文本资源。无奈所有的东西都是不断发展的,互联网也不例外。其实HTML5中多出来video等标签就像HTML2多出来img标签一样正常,虽然我们确实值得欢呼,也不用太为此担心兼容——想想gif、png、jpeg——我是达尔文物竞天择思想的支持者。但是我觉得HTML的设计从一开始就没有很好的考虑抽象程度这个问题,可能是为了迁就使用上的方便,最明显的就是这门语言虽然有结构树(DOM)的层级、但是没有意义上的继承,不管是从标签上还是属性上。HTML生来就是有语义的,XHTML想解决数据和结构分离,结果被传道士努力得让大家都只在乎结构和表现的分离了。XHTML2曾一度想放弃向前兼容,还推荐将图像从img标签过渡到object标签,以达到更高的抽象程度,用以更“方便”地描述互联网上将来越多的不同格式的其他资源。HTML5又干脆弄出来一大堆的极度语义化的标签。那么Microformat的出现又是因为什么原因呢?

要看清楚这些,其实我们应该明白其实W3C是一个商业组织。WHATWG更是一个商业化——最明白就是浏览器竞争——的产物。很多东西其实就是商业杂交出来的(比如最明显的代表就是鼓吹“高尚情操”的video标签),HTML的一出生就流淌着商业的血。问题还在于离开商业一切都活不了。

不要再讨论HTML5好不好、HTML5什么时候出来、我们什么时候用它。

有些东西你在思考的时候永远很难想到,比如中国特色的双核浏览器,虽然或许这只是在揠苗助长。

这是个最好的时代,这是个最差的时代。或许一直以来就是。

继续阅读 »

脱掉衣服看身材,裸节又来了

发表于 WebBuild

知道为什么网页没有想象中很炫的效果吗?因为今天是一年一度的“CSS裸奔节”。

脱掉衣服,亮出身材,大家一起裸奔吧

想参与或了解更多,请点击http://www.webrebuild.org/naked

继续阅读 »

We Do The Same Thing

发表于 WebBuild

前天参加了w3ctech第六期的WEB标准化交流会,本期交流会的主题是:前端开发在研发流程中与其他岗位协作效率的提升。会上所有与会者对此话题都发表了自己的看法,也借这个机会了解了很多其他兄弟团队协作项目开发的经验。同时会上其他非前端职位的同学也发表了很多很有参考意义的看法。

随着交流会发表意见的同学越来越多,可以发现最终关键词一致性的落在了“沟通”上。崔凯通过“请吃饭”这一最明了的例子说明了良好的沟通方式可以有效解决跨团队协作中遇到的“困难”。月影在接下来两杯水的例子中用带有哲学又易懂的方式解释了如何从本质上解决跨部门协作难题,那就是我们放开各自心中的“成见”,通过换位思考再大家站到同一个视线上来看问题。如果大家还记得彪叔一专多长》的PPT的话,应该对引言中法拉利车队的故事印象深刻吧?

到场的同学都觉得前端需要和很多部门打交道,认为前端是“最累”的部门。这一点可能是因为到会者中大部分职业是前端开发的缘故。其实,每个部门都是“最累”的,我们需要与UE打交道,同样UE需要与PM与我们等部门打交道,我们需要和RD、QA、OP打交道,同样RD需要与PM与我们与QA与OP等部门打交道。每个部门都有需要协同合作的人和部门。当我们抱怨UE生气我们页面切出来与UE图相差的时候其实我们可以换位想想当RD将我们的HTML嵌套得“乱七八糟”的时候我们是多么生气的。

我相信在任何一家公司,所有部门的人都是在干同一件事情,那就是将这个项目这个产品做好,大家将自己各自杯子里的水倒干,拥有同样一份事业心将杯子叠到同样一个方向同一个目标。我们可以思考月影在会上提出的问题:你将你做的事情怎样看待?工作、职业还是事业?如果你不思考这个问题,那么工作中“被”遇到的问题将越来越多。相反,你就会知道你要做到什么程度会有成就感?什么时候要换家公司为互联网做贡献了。

这次交流会回来一直很有感想,因为自己所在的部门最近也遇到了一点事情。但是面对外界的质疑和猜想我们依旧保留那份创业心凝聚在一起,很高兴能和这样一群拥有事业心的同事并肩奋斗。

最后,以个人情感并代整个交流会组委会感谢腾讯北京公司提供的场地、茶水和礼品,感谢易联主机CEO tesion提供的奖品,感谢winterkejun分享的PPT,感谢所有到会的同学和所有关注w3ctech的同学。(p.s:特别赞扬在整个交流会中站着做记录的我们的场记吕婷MM,大家给点掌声!)

继续阅读 »

使用geolocation API定位你的访问者位置

发表于 WebBuild

今天要说一个跨省的好东西玩玩。

那就是geolocation,W3C对geolocation的解释是“defines an API that provides scripted access to geographical location information associated with the hosting device”。Firefox从3.5起就支持geolocation了,习惯赶时髦的opera也发布了一个支持geolocation的版本,几天前Chrome dev 5也正式支持geolocation了。如果你的浏览器被鄙视了也可以使用google gears的Geolocation API曲线救国来玩(关于这一点请参考JerryQu同学早一段时间写的文章)。于是记录和朋友们分享下。

如果你有兴趣可以使用上面提到的浏览器点击这里看个简单的demo

简单说下前端的实现吧,主要代码如下:

function displayPosition(position) {
    //得到两个值:position.coords.longitude(经度)、position.coords.latitude(维度)。
    /*任意鞣虐得到的经纬度信息来展示你想要的样子吧。
    */
}
navigator.geolocation.getCurrentPosition(displayPosition);


geolocation的原理就是收集你上网的终端设备的某些信息发送到特定的服务接口用来查询以获得你的地理信息,如果你是使用的是无线wifi上网的方式,发送的信息如JerryQu提到的一样,大致如下(Firefox下的抓包):

post http://www.google.com/loc/json
post_data='{"version":"1.1.0",
            "request_address":true,
            "access_token":"2:OLzIuqa-P8tZYOpu:Gu-LV8OcMFK28CVE",
            "wifi_towers":[
                {
                    "mac_address":"00-23-eb-b7-ef-70",
                    "ssid":"abc","signal_strength":-45
                },
                {
                    "mac_address":"00-23-eb-b7-ef-72",
                    "ssid":"abc_Guest","signal_strength":-48
                }
                ]
            }=';


返回的信息类似如下(可以查看我通过curl脚本模拟的数据 http://www.ivershuo.com/did/geolocation/loc.php):

{
    "location":
        {
            "latitude":40.0475799,
            "longitude":116.2947221,
            "address":{
                "country":"China",
                "country_code":"CN",
                "region":"Beijing",
                "city":"Beijing",
                "street":"Tangjialing Rd"
                },
            "accuracy":278.0
            }
        }


可以发现firefox也是使用的google的loc接口,如果你提供的access_token值为空或者是错误的在respone的时候会给你返回一个正确的access_token(该值是2周有效的)。wifi_towers包含了你的wifi信息数组用来判断你离热点们(?)的距离等信息。如果你使用的是有线上网的方式会发现传送的wifi_towers数组是空的,但是也会返回地理位置的值,应该是通过ip来返回的(因为我使用服务器脚本去请求该接口的时候返回的是服务器所在地的地理信息),所以偏差很大。现在还不知道是不是可以传送gps数据,有条件的同学可以试试在android手机上验证可以使用gps数据。

不过照前面的demo来看,就算是wifi的方式得到的位置信息还是有一定的偏差(这中间也有不同地图服务的定位信息的偏差),但是比ip获得的位置已经精确很多了。对位置信息精确度教高的web应用可以试点应用玩玩。

回到开头的那句话,大家不要担心跨省,因为浏览器在发送这个信息的时候会先要获得你的授权的。

p.s1:要使用geolocation:Firefox浏览器需要保证about:config中geo.enabled的值为true,chrome dev需要带参数“"--enable-geolocation"”启动。

p.s2:如果你也想构造数据请求google的loc接口,需要保证数据是以application/json的格式请求的。

继续阅读 »

被换域名了

发表于 Life

域名更换到ivershuo.com,所有以前ivershuo.cn相关的东西都会转移到ivershuo.com上面来。以前年少无知,注册了.cn的域名,导致了今天的麻烦。

虽然以ivershuo.cn的名义发布过一些乱七八糟的东西,虽然很多朋友看得起给了ivershuo.cn一个链接,虽然PR值也熬到了5,虽然我很想用代表了我爱着的国家的后缀的域名,但是我必须为以前犯下的不可饶恕的罪过——成为cnnic的帮凶去注册了.cn的域名——负责。

同时我以前承诺的永久订阅地址http://feed.ivershuo.cn也会换到http://feed.ivershuo.com上面来,很抱歉因为我们国家的伟大我被放弃了以前的承诺。

各位以前与阿肆的博客做过链接的朋友,如果您有心,麻烦将阿肆的博客链接url换成http://www.ivershuo.com,谢谢!

走狗新网互联,你继续给我停止解析吧!

继续阅读 »