Let's Again Talk About IE (Internet Explorer)

As an amateur but the same time professional front-end engineer, one of the most common things in my life is to press F5 in different browsers.

When this word was not “standardized” as it is now, I was used to pressing that button in several versions of IE, Chrome, Firefox, Safari, and, if I was in a really great mood, Opera. So I hadn’t suffer less than anyone. Especially from IE 6/7.

Now I basically test only in IE 8+ and Chrome. If the project is platform targeted, even better. There has been a lot of scoffs about IE  on compatibility and performance these years, which make me sort of sorry. People would always be fond of the new and tired of the old, even though it is the old one which brings the bright start to all these wonderful things.

IE 6 in my opinion is a great browser. It is out of date but It was well-designed and ignited many features in modern browsers. Actually, tons of newly added features in HTML5 or CSS3 can be imitated in IE 6, a browser which was released 12 years ago. And many earlier IE-only features have become the standards.

The earlier versions of IE is buggy and perform slow, but they perfectly served the days when it was released.

Well I am not trying to ask people not to give it up, but just hoping we can keep the respect, which this browser deserves, to it in its last days.

Microsoft seems to have realized their mistakes on detaining the developing of IE these years and brings us the new IE 9/10/11. Compatibility issues have become minor since version 9 (also it brings us fully GPU acceleration, which is a really important event for web apps), and since version 10, IE finally caught up the steps of modern browsers.

IE now is almost ready for web apps which could be as great as native apps, and I am looking forward to the booming of mobile web apps in the next several years. 🙂

Thoughts after Developing WordsBaking

Several months ago I started my own project called WordsBaking, which is a tool developed for helping students or learners like me to remember new English words. Considering the time and resources I have, I finally decided to use HTML/CCS/JS technologies so that it could be easier to have the versions for the three major mobile platforms.

But there would certainly be some subsequent issues. In last post, I wrote something about performance, gestures and preventing tap highlight. And in this post, I am gonna write some notes about browser bugs.

First of all, I like IE 10 Mobile quite much, comparing to original Android browser. But unfortunately, it still gets some weird bugs.

1. Scrolling issue with CSS3 transform.

I spent a lot of time locating this issue, as scrolling should be one of the most basic features, which in other word should be stable enough. It is a list of which the parent node has the style “overflow” with value “auto”. And the pseudo element “:active” of the list items has a transform with transition: translateX, so that when finger is on the item, it moves a little bit rightwards. Then the problem came, you can’t scroll the list down directly. If you want to do so, you’ll have to scroll up a little first. And, after you scroll to the bottom, you can even continue scrolling up (though the scrolling becomes no longer smooth).

So I have to change the transform to some older ways, like margin, padding, etc.

2. Scrolling issue with phone:WebBrowser control.

Ohh, again scrolling. To use pointer series of events built in IE, I have set -ms-touch-action to none under html selector. So that the page won’t move around or dance with your fingers. It works well until you get some elements with style “overflow: auto;” (or “scroll” I guess). After a list is scrolled to the top or bottom, if you put away and back your finger and continue scrolling, the whole page starts a bouncing effect. Luckily, this only happens in a phone:WebBrowser control. But unfortunately, I am using that control to wrap up my app.

I guess there should be a solution but I really haven’t found it.

Okay, so these are issues with the front end. On back end, I chose NodeJS as I am more confident with my JS skill. But it really took me quite a lot time to start due to the poor documentation. I am not familiar with back end and everyone knows I write front end all the time. I can’t say it would be a challenge to write the back-end stuffs I’ve done these days, but it was a great chance to learn new things.

The main problem I have is lack of database related experience, I don’t know how the db engine works in the box, so I don’t know how would my structures and logic perform. T-T

But back to NodeJS, I am quite missing my VEJIS, which helps JSers coding without looking for online documentations. Oh dear you know how it feels when you press the “.” but there is no accurate auto completion and hints? It might not be that helpful after one is extremely familiar with a framework, but before that, it helps a lot. And one more thing, we are never be that familiar with every new code line we write…

A thousand words are reserved here…


So, I am very excited as WordsBaking for WP is almost ready for beta, after months. I always believe the power of a team, but when a team is not available, I also believe my own skills. Thanks my CTO (Chief Track Officer) for Tracking my developing progress btw, or I wouldn’t be able to finish the beta version. 🙂

[Chrome 插件] 谷歌词典增强版 (Google Dictionary Plus for Chrome)

说来一直用着 Google Dictionary 浏览器里取词, 遇到生词的时候会比较方便, 不过 Google Dictionary 这个插件还真是挺简陋的. 今天花了一天的时间给它修修补补, 终于搞出了能看也更适合英文为外语的同学使用的 Google Dictionary Plus. (BTW 中间涉及到一些版权细节问题我就不过问了哈哈, Google 应该不会怎么样我的我觉得.)

主要的提升有两点, 一点是 UI, 更大气, 简约一点, 视觉细节处理也更到位. 另一点则是英文划词同时显示中英文双语翻译, 中文方便快速浏览, 英文翻译则方便了解细节等等. 先上截图.

Google Dictionary Plus v.s. Google Dictionary

项目页面 github.com/vilic/a-plus-dictionary

已改名 A+ Dictonary 上架 Chrome Web Store!

有建议欢迎提, 不过不赞助的话就别想我会花多少时间弄这个了哈哈. 毕竟精力有限~

连接校内 WiFi 后自动连接 VPN 实践一二


所以问题是这样的, 部分可能类似于我这种不用 Dr.COM 上网而用各种 VPN 的同学经常希望局势能更乐观美好一些, 比如电脑开机自动连上 WiFi 之后能够顺道把 VPN 什么的也连上. 看似只省了一部操作, 其实省下了在诸多开机自动启动的程序上重新登录之类的操作. 关键是, 爽~

所以这里结合自己的经验介绍两种方法. 因为用的英文系统, 对应的中文名称就凭感觉啦.

1. Task Scheduler

打开 Task Scheduler, 左侧可以看到目录, 随便找一级看着顺眼的右键新建任务.

General 选项卡中填上任务名称, 比如 ConnectVPN, 下方选择 Run w (这个其实我是凭感觉选的, 你们随意, 总之好用).

Trigger 选项卡中新建一个 trigger, Begin the task 选择 On an event, 下面出现的两个下拉菜单和文本框依次选择和填写:


确认继续. 然后在 Actions 选项卡中添加一个 Action, 不过在此之前先在电脑上比较宜人的位置新建一个 js 文件 (比如 connect-vpn.js), 内容如下 (其中的中括号是要一起替换掉的, 在进行下一步之前, 你可以先断开 VPN, 双击运行脚本看看能不能成功连上).

var shell = new ActiveXObject("WScript.Shell");
shell.run("rasdial [VPN连接名称] [用户名] [密码]");

那么就在新建的这个 Action 中选择刚刚创建的这个 js 脚本文件, 确认继续.

切换到 Condition 选项卡, 取消连接电源才执行任务的选项. 再往下有个选项可以选择依赖的网络连接, 可以试试, 我没弄过… 因为有更棒 (对我来说) 的方法.

至此基本搞定, 最后还有个 Settings 选项卡大家根据自己胃口设置啦. 确定保存, 会要求输入密码. 现在连接一个 WiFi, 就会自己连 VPN 啦~ 当然, js 脚本还可以做很多事情, 这里只是以 VPN 为例. 或者也可以不用 js, 自己随意~

1.1 Task Scheduler with Custom Trigger

但是只想在连接到某几个无线网络的时候连 VPN 肿么办? 上面提到一个我没试过的方法, 不过不尽完美, 因为换个地方, 即便是同样的 SSID, 可能也没法连了 (我 YY 的, 具体请自己测试)… 加上楼主的 WiFi 源主要有两个, 寝室自搭的 WiFi 和学校的. 这个时候就可以自定义 Trigger 啦.

回到 Trigger 选项卡, 选中刚刚新建的 Trigger 编辑, 类型由 Basic 改为 Custom, 然后 Add Event Filter. 在打开的对话框中切换到 XML 选项卡, 并且勾选 Edit query manually. 会有警告说再也回不去了, 好马不吃回头草~

    <Query Id="0" Path="Microsoft-Windows-WLAN-AutoConfig/Operational">
        <Select Path="Microsoft-Windows-WLAN-AutoConfig/Operational">*[System[(Level=4 or Level=0) and (EventID=8001)]] and *[EventData[(Data[@Name='SSID']='CQUNET' or Data[@Name='SSID']='VILIC-C1539')]]</Select>

贴上如上代码, 这里 CQUNET 和 VILIC-C1539 是我常用的两个 WiFi 的 SSID, 请更改为自己的. 里面那个 or 很明显吧~ 如果只需要一个的话就删掉后一个, 还有 Data 前后的圆括号. 如果还想要! 还想要就加!


2. Intel 网卡驱动自带的功能.

装驱动的时候装一下完整包, 貌似精简包里没这个. 右键已经连上的 WiFi 连接查看属性, 在 Connection 选项卡中看有没有一个叫 Enable Intel connection settings 的选项, 没有就不用继续了 (或者考虑装驱动). 勾选后配置.

然后瞬间发现有一项可以改 MAC 有没有! 原来怎么就没有发现!

不过这里要改的是 Application Auto Launch, 勾选上之后要选中一个程序. 可以是 bat, 可以是 exe 什么的… 但是不能是 js. 于是桑心了. bat 当然还是很好用的, 不过黑框框一闪实在过不了我完美主义这关, 于是 C++ 写个小程序来拨号好了 (C# 可能更方便, 当时脑抽就用 C++ 了).

因为我 C++ 不好, 就不献丑了, 你们这些地球人用 bat 吧.

然后,,, 就没有然后了. 祝大家自动连接愉快~

大学寝室等通用网络共享方式 (视情况需交换机/路由)

刚进大学的时候, 还可用使用Connectify, 不过随着这家伙的普及, 也很快被Dr.COM封杀了. 后来一直使用的是通过无线路由中转, 然后在其中一台电脑上架设代理来实现共享网络. 虽然前后遇到过一些升级, 但经过调整总算是还能正常使用, 下面就介绍下具体的方式和所需要的软件.

首先需要选定一台主机, 用来登录相关账号, 比如我们的是Dr.COM, 需要一款代理软件, 推荐Privoxy. 这里需要说明的是, 可能有些同学联网的客户端会进行代理软件检测, 或许Privoxy不能幸免, 但只要稍作修改即可. 绝大多数检测代理是通过关键字, 比如这里的Privoxy就是Dr.COM的一个关键字. 所以只要改掉这个关键字就好. 如果你懂得一点编程知识, 可以自己下载源码, 在源码中全局替换之后进行编译. 不过Privoxy编译Windows版本还比较麻烦, 所以不推荐这种方式. 这时需要一个可以编辑字节文件的软件, 比如010 Editor. 使用010 Editor, 查找并替换Privoxy主程序中所有的 “Privoxy” 字符串为另一个长度相等的字符串. 比如我改的是 “PcgPrvx”. 当然如果使用其他专门用于编辑这些资源的编辑器, 可以不用一定长度相等, 但这里为了保证没其他问题, 取相同长度.

改好Privoxy程序之后, 需要修改其配置文件, 一般为config.txt, 内容可以全部删除掉, 只写一行, 9257这里是代理端口:

listen-address :9257

当然如果你有耐心看都有哪些设置自然最好了. 更多信息官网上也有提供.

之后就是进行防火墙相关的设置了, 这个就不细说啦. 完成后, 这台电脑就成了一个代理服务器啦. 不过还需要别的电脑能连接到它, 才能真正用起来… 我们学校的情况是, 同一台交换机下的设备无法互相访问, 所以在完成上面的设置之后, 其他交换机上的同学已经可以通过我的IP和代理端口访问网络, 但同一台交换机下的同学, 比如寝室里的, 则不行. 这个时候就需要一台路由器或者自己的交换机啦. 话说买个无线的路由/交换机还是很方便的, 比插网线舒服多了… 将需要共享的设备连接到同一个路由或者交换机下, 然后则可以通过相应的IP和端口访问网络了. 至于两台设备是否可以正常互相访问, 可以互ping IP看看.

还有一个问题, 比如也是我们学校, 不允许使用自己的路由器, Dr.COM会检测, 如果发现则断开网络连接, 这个时候则必须使用交换机. 多数路由器都是可以当做交换机使用的, 具体设置请自行搜索. 🙂

最后再推荐ProxyCap作为共享网络的客户端, 可以把全部程序添加到代理中, 免得麻烦. 否则像QQ等, 还需要更改代理设置, 有些软件甚至根本不支持代理设置… 另外使用ProxyCap之后, 自己的科学上网软件也工作正常, 其实这个才是用它的最大动力啦…

Google+ 初体验

前些时候不小心错过了Google+的第一轮邀请, 弄得过了好多天才算用上.

Google+ 不同于其他社交网络的一个明显之处是它叫做 “Circle(圈子)” 的好友系统, 与传统的好友不同, 圈子是单向的, 更加灵活. 分享消息时, 也可以选定要分享的圈子, 这样也就更具有针对性. 哎呀, 其实我不是想写一个评述的, 就想说说我用上Google+啦, 很高兴, 嘎嘎嘎.

所以大家可以加我为好友哦, vilic.vane(at)gmail.com. 不过貌似邀请又被关闭了, 可怜的小朋友们.

所以最后就是URL啦 http://plus.google.com/

ifttt, 这算一个测试吧

ifttt (www.ifttt.com) 刚出来没几天, 但貌似已经非常火爆了, 于是乘此机会, 也向好人要了个邀请码来注册. 那这篇文章算是ifttt的一个最简化简介, 也是我的第一个测试啦.

ifttt是if this then that的缩写, 也就是如果发生了这件事, 那么就做那件事. 它支持很多社交网络或工具, 比如我的WordPress, 刚刚我用它添加了一个任务, 就是如果我的WordPress发了新文章, 那么就在Facebook上添加一个链接. 所以我就发文章来啦.

ifttt最多可以同时开启10个任务, 不过我觉得还是蛮够用了. 嘎嘎.

顺便小广告, 欢迎follow我的twitter, http://twitter.com/vilicvane, 还有就是在Facebook上加我为好友 i(at)vilic.info.

人人, 你不要为了上市丧失了基本的道德!

昨天影响颇为强烈的人人网站内信漏洞导致大量用户隐私失窃的事让人很是震惊. 作为国内颇具影响力的SNS, 因为一个很低级的标签过滤问题, 导致如此严重的后果, 实在难以理解. 但事情到了这里, 还只是牵涉到人人的技术问题, 暂且没有上升到道德层面.

很快, 一些网友发表了关于此漏洞的文章, 希望可以引起大家的注意, 进而减小损失, 我也顺势发了一些相关的状态.但令人无法相信的是, 今天这些状态居然被删除了! 平时一些关于政治的状态, 人人你删除一些, 我鄙视你, 但不至于那么鄙视你. 但这个和政治毫无关系的状态, 仅因为陈述了一下这个事件, 就遭到删除, 我怎么就那么地鄙视你呢?

一个朋友提到人人要上市了, 于是似乎它们之间是有关联的. 或许这个事件本身就是竞争对手一首策划的, 人人你中招了就中招了, 居然期望通过阻止言论来保全自己的商业利益! 你这种行为与那什么东西有什么区别?! 那什么东西还可以说是为了和谐稳定, 而你呢? 你的商业道德哪儿去了?

事件发生的时候, 你没能尽快解决问题, 反而期望在之后通过这种侵犯用户权益的手段消除影响. 你让我情何以堪?

我承认因为有大量的同学朋友在人人网上, 我对人人网产生了一定的依赖, 但这并不妨碍我揭露你的行径! 技术赶不上Facebook, 道德又如此低劣! 看清你的前路在何方吧!



昨天有个朋友给我看了一篇文章, 是关于一段出现在人人站内信中的JS.

当用户点开带有这段<script>的站内信时, 其中的代码将会自动运行, 并采集用户的好友名片信息, 发送到指定的服务器. 并且再给好友发送内容相同的站内信.

不得不说这是一个非常低级的漏洞, 人人的后台居然没有对站内信中的特定标签 (比如这里是script) 进行处理. 很不解的是, 人人的日志上都出现了大量关于此 “病毒” 的信息, 人人却依然没有修复此漏洞, 效率如此低下? 当时的 msg.renren.com 已经出现了不能访问的情况, 一开始我还以为是人人暂时关掉了相关服务并进行漏洞修复, 后来发现问题依旧, 于是之前的不能访问只能说明收到攻击的数量之大, 导致人人站内信的服务器超出负荷. 后来人人是有了一些举动, 但貌似并非是技术层面的, 只是将相关域名加成了关键字. 人人的技术人员哪儿去了?

那抛开这些不说, 谈谈这次攻击的技术方式.

因为一些安全问题, 浏览器对很多种方式的跨域访问进行了限制. 比如不同域的页面之间不能互相访问内容, XMLHttpRequest 跨域会有警告甚至根本不能跨域, 包括 HTML5 里面的 canvas 也做了类似限制. 不过还是有例外, 比如<script></script>, <img />就可以. script 可以获取跨域的信息, 而 img 可以通过 GET 方式发送跨域信息.


所以人人的技术水平还有待提高啊, 包括在一些浏览器 (现代浏览器) 里显示也有小问题.