Usability 測試的 bookmarklet

在「Usability: Don't Make Me Think and a Bookmarklet」這篇文章裡作者在讀了「Don’t Make Me Think, Revisited」之後有所啟發,寫了一小段 javascript code,可以將網頁上所有文字都變成同樣長度的亂碼,藉以測試許多 usability 特性。

我把程式碼丟進 yui-compressor 後變成這樣,比較容易貼到 bookmarklet 上使用:

javascript:(function(){var a=" ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";$("*:not(iframe)").contents().filter(function(){return this.nodeType==Node.TEXT_NODE&&this.nodeValue.trim()!=""}).each(function(){var c="";for(var b=0;b<this.nodeValue.trim().length;b++){c+=a.charAt(Math.floor(Math.random()*a.length))}this.nodeValue=c})})();

不過這段程式碼假定頁面上有 $ 這個 object (i.e. jQuery),所以我把程式碼改成吃 jQuery 這個 object,這樣確保 jQuery.noConflict() 後的網站還是可以動:

javascript:(function(){var a=" ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";jQuery("*:not(iframe)").contents().filter(function(){return this.nodeType==Node.TEXT_NODE&&this.nodeValue.trim()!=""}).each(function(){var c="";for(var b=0;b<this.nodeValue.trim().length;b++){c+=a.charAt(Math.floor(Math.random()*a.length))}this.nodeValue=c})})();

效果如下,還蠻有趣的:

關閉 Plurk 的 embed thumb 功能

Plurk 上的 embed thumb 功能 (我不知道怎麼稱呼比較好) 讓我沒辦法用 Ctrl 加上滑鼠左鍵一路把圖片點開,所以就想寫個 Greasemonkey script 搞定他...

最一開始的想法是把事件幹掉 (也就是 .pictureservices, .videoservices, .ogvideo, .iframeembed, .plink 這串),所以第一版的時候是直接用 unsafeWindow.jQuery 把事件 off() 掉,但後來想一想這樣有幾個問題:

  • 網站改版時動到這邊的 class name 會失效,即使是只有增加...
  • 安全性問題,unsafeWindow.jQuery 不保證是原版的 jQuery,在 Greasemonkey 有不少權限,雖然後來有被 @grant 強化過,不過能避免還是想避免。

所以就改成現在這個版本,直接在 body 上攔截,擋下對這五個 class 的 click event:「Disable Plurk multimedia thumb functuion」。

也許改寫 thumb function 本身會更好,不過先這樣吧 XD

2006 年的 jQuery 程式碼...

對於現在變成 Web JS 代名詞 jQuery 的誕生。

John Resig (jQuery 的發明人) 的懷舊文:「Annotated Version of the Original jQuery Release」。

重點在「Annotated jQuery Release」裡他寫了不少註解 (以 2015 年現在的觀點來寫),有很多感嘆啊 XDDD

jQuery 官方在 2014 年的概況

在「jQuery Foundation 2014 Annual Report」這篇裡面有提到了 jQuery 在 2014 年的情況,其中 code.jquery.com 使用的頻寬這段還蠻有趣的:

If you need evidence that jQuery Foundation projects are used everywhere, look no further than our Content Delivery Network (CDN) powered by MaxCDN. The 290 billion requests in 2014 transferred nearly 11 petabytes of data. That, of course, does not include the requests for locally hosted copies of jQuery and to other CDNs such as Google, Microsoft, or CDNJS. No doubt the overall number of requests is in the trillions.

光是 code.jquery.com 每天的量平均就是 30TB,也就是平均流量 3Gbps?如果考慮到 Google 提供的平台更普及...

jQuery 1.11.2 與 2.1.3 修正 iOS 8 上 Safari 7.1/8 的嚴重 bug

看到 jQuery 官方放出一個特別更新,專門為了 iOS 8 + Safari 7.1/8 的修正:「jQuery 1.11.2 and 2.1.3 Released – Safari Fail-Safe Edition」。

依據「Test failure on iOS 8: child and adjacent -> p#firstp + p」的說明,死在 document.querySelectorAll("p#firstp + p") 這邊,另外以下的 selector 也都掛掉:

p#a + p
p#a ~ p
.b#a ~ [id]
[style]#a ~ p

由於這個用法太基本,讓 jQuery 官方決定在 library 放 workaround 修正這個問題...

jQuery.com 九月的安全事件報告

jQuery.com 在九月時被攻陷的事情的報告出爐了:「jQuery.com September 2014 Security Retrospective」。

除了 ShellShock 的問題外,還包括了不少既有的漏洞沒修,所以最後也不太輕處到底是從哪個洞進來的,不過看起來最像的是 ShellShock?不過報告上沒有發現 CDN 的部份有被攻陷 (code.jquery.com 的部份),所以看起來只有主站受到影響?

而因為受到 DDoS 攻擊,所以把非 CDN 部份的服務丟上 CloudFlare 了,由 CloudFlare 的人贊助 Enterprise 版的服務給 jQuery.com 使用,讓 CloudFlare 幫忙擋掉攻擊的部份...

jQuery 官網疑似被攻陷...

起因在「jQuery.com Malware Attack Puts Privileged Enterprise IT Accounts at Risk」這篇,RiskIQ 的人偵測到 jQuery 官方網站異常,帶有惡意軟體。檢查後發現在官網的 html 裡面出現了 jquery-cdn.com 這個非官方的 domain:

這個 domain 可以看到是全新建立的:

   Domain Name: JQUERY-CDN.COM
   Registrar: NAMESILO, LLC
   Whois Server: whois.namesilo.com
   Referral URL: http://www.namesilo.com
   Name Server: NS1.DNSOWL.COM
   Name Server: NS2.DNSOWL.COM
   Name Server: NS3.DNSOWL.COM
   Status: clientDeleteProhibited
   Status: clientRenewProhibited
   Status: clientTransferProhibited
   Status: clientUpdateProhibited
   Updated Date: 18-sep-2014
   Creation Date: 18-sep-2014
   Expiration Date: 18-sep-2015

透過這個 domain 一路穿出去將惡意程式導進來。

jQuery 官方收到 RiskIQ 的人通之後也開始調查發生什麼事情:「Was jquery.com Compromised?」、「Update on jQuery.com Compromises」。

就官方的調查看起來,還有好幾波不同的攻擊,故事還沒完結?

免費的 CDN 資源

在「A List of Free Public CDNs for Web Developers」這篇文章裡面列出了網路上免費的 CDN 資源。

可以看到 MaxCDN (jsDelivrOSSCDNjQuery CDN) 與 CloudFlare (cdnjs) 都投資了不少在其中。不過 MaxCDN 的部份都沒有拿出亞洲 PoP 來用,速度還是慢了不少...

對於有使用各種套件的人,可以在這邊的列表上找一找,除了可以節省自己機器的頻寬負擔外,另外用 CDN 也有機會與其他人共用 cache 而加速...

關於 jquery-latest.js...

jQuery 官方希望大家不要再使用 jquery-latest.js 了:「Don’t Use jquery-latest.js」。

由於他們發現有大量的網站使用 jquery-latest.js,如果直接照著字面上的意思升級到 2.0,會造成這些網站在 IE{6,7,8} 上爛掉:

To mitigate the risk of “breaking the web”, the jQuery team decided back in 2013 that jquery-latest.js could not be upgraded to the 2.0 branch even though that is technically the latest version. There would just be too many sites that would mysteriously stop working with older versions of Internet Explorer, and many of those sites may not be maintained today.

所以官方已經決定將這個檔案鎖定在 1.11.1 版:

As jQuery adoption has continued to grow, even that safeguard seems insufficient to protect against careless use of http://code.jquery.com/jquery-latest.js. So we have decided to stop updating this file, as well as the minified copy, keeping both files at version 1.11.1 forever. The latest released version is always available through either the jQuery core download page or the CDN home page. Developers can download the latest version from one of those pages or reference it in a script tag directly from the jQuery CDN by version number.

同時,這個決策得到 Google CDN team 的支持,所以 Google CDN 上的 http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js 也將鎖在 1.11.1:

The Google CDN team has joined us in this effort to prevent inadvertent web breakage and no longer updates the file at http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. That file will stay locked at version 1.11.1 as well. However, note that this file currently has a very short cache time, which means you’re losing the performance benefit of of a long cache time that the CDN provides when you request a full version like 1.11.1 instead.

同時官方也再三宣導,請不要用 jquery-latest.js 了,應該在使用時指定版本號碼。

這個決策算是一種 workaround,避免全世界一堆網站爛掉...

jQuery 多出 1.12 與 1.13 的計畫

jQuery 的「Browser Support in jQuery 1.12 and Beyond」這篇提到新的計畫,其中 What's Changing? 裡提到:

There are no firm dates, but we plan on releasing jQuery core versions 1.12 and 2.2 this year. jQuery 1.13/2.3 will be released some time in 2015.

重點在於對 IE 的支援度。其中 1.12 會繼續支援 IE6+,而 1.13 則放棄 IE{6,7},只支援 IE8+:

jQuery 1.12: This will be the last release to support Internet Explorer 6 and 7. As of today, no feature requests or bug fixes will be landed for them. Only serious regressions for these browsers will be fixed in patch releases (e.g., 1.12.1). jQuery 1.13 will support IE8 as its minimum browser.

這件事情總算是發生了,也就是多出一個「支援 IE8+」的版本。這也就是兩年前我在「jQuery 2.0 將放棄 IE{6,7,8} 的事情...」抱怨過的事情,我無法想像在 John Resig 當政的年代會直接規劃出不支援 IE{6,7,8} 的產品。

現在的 jQuery 有種 AWK 的感覺。

剛好也是提到 jQuery,前陣子「The reason Angular JS will fail」這篇也是讓我笑得很開心,也許有機會再寫...