Tag: jquery

Trac 1.2 上惡搞 TracTicketReferencePlugin 讓他會動...

TracTicketReferencePlugin 是個 Trac 上設定 ticket 之間關聯性的 plugin，與子母票有比較強烈的關係不同，有些人喜歡把相關的資料都掛在這邊。先前用都是在 Trac 1.0 上用，也沒什麼問題，最近在 Trac 1.2 上跑發現直接有 js error...

原因是 TracTicketReferencePlugin 用到 jQuery.live()，而這個函式在 jQuery 1.7 被宣告 deprecated，在 jQuery 1.9 被正式拔掉了。而 Trac 1.0 用的是 jQuery 1.7，所以不會有問題；Trac 1.2 用的是 jQuery 1.12，於是就爛掉了...

剛好就是昨天，有人在作者的 repository 上發 issue 出來 (另外也提供了 patch)：「t2y / trac.plugins.ticketref / issues / #9 - JavaScript errors with Trac 1.2 — Bitbucket」。雖然 patch 本身不算難，但我實在懶的查 Mercurial 的操作，於是決定用 workaround 解...

想法是讓 jQuery.live() 會動，這點在 jQuery 官方出的 Migrate 就可以達到 (需要用 1.4.1 版，而不是 3.0.1 版)，於是第一步就是在 site.html 內直接先下手為強，讀 jQuery 後馬上讀 Migrate：

  <!--! Add site-specific style sheet -->
  <head py:match="head" py:attrs="select('@*')">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
    ${select('*|comment()|text()')}

但 Trac 還是會再載入一次的 jQuery 而蓋過去，所以我們要讓 Trac 不會載入，在 trac.ini 內的 jquery_location 設定讓他讀一個空的 js 檔：

jquery_location = site/null.js

然後生一個空的 trac/htdocs/null.js 讓他讀。

最後開一張票追蹤，看什麼時候官方放新版，再把這串 workaround 拔掉...

Trac 1.2 裡 datepicker 每個禮拜的第一天改成星期天

在 Trac 1.0 搭配舊的 DateFieldPlugin 時，預設每週的第一天會是星期一，但這個設定可以在 trac.ini 內用 first_day 參數調整，像是這樣：

[datefield]
format = ymd
separator = -
first_day = 0

但在 Trac 1.2 在 trac.ini 裡就沒有提供設定讓人調整了... 而由於 Trac 是用 jQuery UI 的 Datepicker，在這個套件裡有提供方法讓人調整，所以解決的方向變成在 site.html 內用 JavaScript 處理，把這段程式碼塞到 JavaScript 的區段內就可以了：

// Datepicker
jQuery.datepicker.setDefaults({firstDay: 0});

一整個繼續惡搞中... 然後把 wiki 上的 Trac 條目也更新上去。

分析現在還有多少不安全的 JavaScript Library 被使用

在「Thou shalt not depend on me: analysing the use of outdated JavaScript libraries on the web」這邊看到對 JavaScript Library 的研究。

jQuery 沒有什麼疑問的還是最大宗，查了一下應該是 CVE-2011-4969 的影響，對 jQuery 1.6、1.6.1、1.6.2 三個版本有影響。

另外也提到了 hosting 的部份，可以看到 Google Hosted Libraries 還是佔有最高的比率。

簡易的 jQuery CSS Selector 替代品

在追 refined-twitter 程式碼的時候，在「refined-twitter/extension/content.js」這邊看到：

const $ = document.querySelector.bind(document);

這樣就可以拿 CSS Selector 掃出元件，程式變得比較好讀... 當然，這個方式不是 fluent interface，沒辦法再依樣串下去。

用 Google 查了一些資料，看起來至少從 2013 年就有這個技巧了。

jQuery 2.2 與 1.12 釋出

jQuery 放出 2.2 與 1.12，預定是 3.0 前的最後一個 major release，之後不會加 feature 了：「jQuery 2.2 and 1.12 Released」。

主要的效能改善來自一年前對 Sizzle 的 patch：「Check existing selector cache and skip matchesSelector when possible · Issue #315 · jquery/sizzle」，針對 :visible 與 :hidden 的效能改善，速度大約是原來的 17 倍：

Performance of the selector engine has improved thanks to a shortcut path that immediately uses precompiled Sizzle selectors when the selector cannot be processed by the native querySelectorAll or matchesSelector methods. This results in a significant speedup in some real-world cases.

距離上次出版 2.1.4 與 1.11.3 好久了 (2015 年 4 月的事情)：「jQuery 1.11.3 and 2.1.4 Released – iOS Fail-Safe Edition」。

用 jQuery Audit 在 Google Chrome 的 Developer Tools 看到 jQuery 的資料

在「jQuery Audit lets you analyze jQuery from Chrome Developer Tools」這邊看到 jQuery Audit 這個 Google Chrome 的套件。這個套件讓你在 Developer Tools 裡看到 jQuery 的資料：

在大家都用 jQuery 操作的情境下，這個套件超好用...

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