Quantcast
Channel: javascript – Gea-Suan Lin's BLOG
Viewing all 187 articles
Browse latest View live
↧

關閉 Plurk 的 embed thumb 功能

July 27, 2015, 1:13 am
$
0
0

在 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

↧
Search

Usability 測試的 bookmarklet

August 13, 2015, 3:10 pm
$
0
0

在「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})})();

效果如下，還蠻有趣的：

↧
↧

Node.js 的 LTS 計畫

September 9, 2015, 8:38 am
$
0
0

Node.js 在 4.0 開始啟動 LTS (Long Term Support) 計畫：「Node v4.0.0 (Stable)」。

可以參考「Node.js Long-term Support Working Group」這邊的說明。最主要的重點是生命週期，首先是每六個月就會放一次新版，跟 Ubuntu 相同，也都是四月與十月：

In parallel, we will be branching a new Stable line of releases every 6 months, one in October and one in April each year.

每個 LTS 版本將會有 18 + 12 = 30 個月的支援期：

This means that there will be overlapping LTS branches being maintained throughout the year, each receiving attention for a total of 30 months (LTS plus Maintenance).

這張圖說明了 LTS 與維護的時間線：

有個 LTS 的指標可以挑了...

↧

強迫 Blogger (Blogspot) 使用 blogspot.com 的網域 (而非 .tw)

September 9, 2015, 3:07 pm
$
0
0

在「Prevent Blogger from Redirecting your Blogspot Blog to Country-Specific URLs」這篇文章裡提到了 Blog 的擁有人要怎麼避免 Google 把網址導到 country-based 的網域下。

目前 Google Chrome 的使用者端可以安裝「NoCountryRedirect (NCR)」這個套件來避開這個問題，但你總不能要求每個人都裝套件...

而這篇文章則說明了如何在 Blogger 裡插入一段 javascript 避免使用 country-based domain：

<script type="text/javascript">

  // Written by Amit Agarwal

  /* Get the full URL of the current blogger page */
  var blog = document.location.href.toLowerCase();

  /* Do not redirect if the domain is .com already */
  if (!blog.match(/\.blogspot\.com/)) {

    /* Replace the country TLD with .com and ncr switch */
    blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");

    /* Redirect to the new .com URL in the current tab */
    window.location.replace(blog);
  }

  // Source: http://labnol.org/?p=21031

</script>

這樣做的好處主要是來自於 url 統一，對於統計、廣告以及分享的問題會減少很多。

↧

減少「註解長度」增加 Node.js 效率...

October 19, 2015, 12:24 am
$
0
0

在「#NodeJS : A quick optimization advice」這邊看到這樣的效能改善方法... 兩段程式碼，只差在註解：

效能差了 50%：

只是因為註解的長度有差，只要用 --max-inlined-source-size 調整就可以避開了：

超苦超無奈：

So when you have a function or callback that’ll be called repeatedly, try to make it under 600 characters (or your tweaked value), you’ll have a quick win !

↧
↧

改用沒有 FairShare 版本的 JavaScript Errors Notifier

October 21, 2015, 6:32 pm
$
0
0

在「Chrome Devtools Tips & Tricks」這邊看到介紹 Google Chrome 的 DevTools 用法說明，但讓我注意到文章最下面提到的兩個工具，其中提到了 JavaScript Errors Notifier 這個工具：

JS Error Notifier (non-“spyware” version) creates a popup each time a Javascript error is printed to the console. Unfortunately, the main version of this extension submits private “usage data” to a third-party service (see discussion in issue #28). But at any rate, this extension has helped me notice and fix several bugs.

找資料時可以發現 Hacker News 上面也有些討論：「Malware alert: JavaScript Errors Notification extension for Chrome (86k users)」。

馬上換掉...

↧

Amazon API Gateway 支援 CORS 了

November 13, 2015, 10:24 am
↧

V8 的 Math.random() 亂度不足的問題

November 24, 2015, 3:32 pm
$
0
0

在「TIFU by using Math.random()」這篇看到作者踩到地雷，於是在討論 V8 Engine 的 Math.random() 的亂度不足。

其實這個問提早在 2012 年就有人在 StackOverflow 上詢問：「Why is Google Chrome's Math.random number generator not *that* random?」，而且也回答得很清楚。

而 Mozilla 這邊在 2006 年也被提出了類似的問題：「Bug 322529 - Upgrade Math.random() to a better algorithm, such as Mersenne Twister」。

文章中間花了許多篇幅講 PRNG 的介紹，以及 cycle length 的說明，重點其實在結論的部份。

主要是因為 V8 Engine 的 Math.random() 實作的是 MWC1616 演算法 (Fast random number generation using 128 bit multimedia extension registers on Pentium class machines)，而這個演算法用起來也綁手綁腳：

If you’re only using the most significant 16 bits it has a very short effective cycle length (less than 2³⁰).

有兩個方向可以改善 (不衝突的方向)，一個是使用 CSPRNG (保證有極長的 cycle length)，另外一個請求 V8 Engine 把 Math.random() 的演算法換掉，像是 MT19937 這類 cycle length 超級長的演算法。

不知道後續有沒有機會改善...

↧
Search

Gmail 的除錯模式

December 1, 2015, 11:34 pm
↧
↧

JavaScript Errors Notifier 移除 FairShare 了

December 15, 2015, 11:50 pm
↧

jQuery 2.2 與 1.12 釋出

January 10, 2016, 10:25 pm
$
0
0

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」。

↧

RightScale 介紹的 TrackJS

February 20, 2016, 1:03 am
$
0
0

RightScale 介紹了 TrackJS 這個服務：「Why do we use TrackJS」。

可以看發生錯誤的 stack：

有錯誤的綜合分析：

然後可以將 minified 的 JS 試著展開，讀起來會比較容易，不過沒看到對 source map 的支援？

價位上比 Rollbar 低不少 ($249 在 TrackJS 可以記 10M，但在 Rollbar 只能記 1.5M)，不過 Rollbar 支援的平台比較多 (台灣也有代理商可以開發票處理帳務)，也許找機會用看看 TrackJS 再決定吧。

↧

Google Analytics 推出 Autotrack 工具幫助整合

February 21, 2016, 12:34 am
$
0
0

Google Analytics 推出了 Autotrack 工具，讓開發者更容易整合：「Introducing Autotrack for analytics.js」。

可以看到有些地方是將 Unobtrusive JavaScript 的概念拿出來用，像是 Declarative event tracking 這邊用 data attribute：

<button data-event-category="Video" data-event-action="play">Play</button>

對於還沒有針對 Google Analytics 客製化整合的人都會有幫助：

While anyone could use and benefit from autotrack, the library is primarily geared toward sites that do not customize their current analytics implementation and would like to take advantage of the features described in this article.

GitHub 上的說明可以看到預設了非常多常用的功能，像是 socialTracker 預設就有提供 Facebook 與 Twitter (咦，你們自己家的 Google Plus 呢？)

不過這個軟體有免責條款，不屬於 GA 的正式產品：

The autotrack library is not an official Google Analytics product and is not covered by Google Analytics Premium support. Developers that choose to use this library are responsible for ensuring that their implementation meets the requirements of the Google Analytics Terms of Service and the legal obligations of their respective country.

看起來先進很多，之後自己開發東西拿出來用用...

↧
↧

V8 JavaScript 引擎將支援 WebAssembly

March 15, 2016, 9:20 am
↧

AWS Lambda 支援 Node.js 4.3

April 7, 2016, 8:42 pm
↧
Search

把 Google Chrome 預設的 JavaScript 關閉，開白名單...

May 8, 2016, 12:23 pm
$
0
0

就如同標題寫得，把 Google Chrome 的 JavaScript 關閉，然後開白名單，這樣的好處有不少：

  • 大幅增加載入的速度：即使用了 Ghostery，還是有不少 JavaScript 的程式被執行到。
  • 增加網站安全性：雖然 Google Chrome 的 sandbox 不算差，但完全不要跑 JavaScript 可以擋下很多安全性問題。
  • 對 anti-adblock 機制的抵抗力：意外的發現不少 anti-adblock 機制都是透過 JavaScript 偵測，而這個方法直接擋下來了。
  • 對 infinite-scrolling 機制的抵抗力：有不少新聞網站拉到最底端會自動讀取相關的新聞 (或是類似的機制)，我其實很不喜歡這樣的機制... 直接省下來 XD

另外就是透過 Google Chrome 本身的同步機制，其實可以設一次所有機器都生效，不算太麻煩。沒意外的話應該會一直用下去...

↧

用 JavaScript Switcher 快速啟用 JavaScript...

May 10, 2016, 6:08 am
$
0
0

Update：這篇的切換會保留到下次 (重新啟動瀏覽器後還是有效)，關於要清掉的請參考「改用 Simple JavaScript Toggle 切換 Google Chrome 的 JavaScript」這邊。

在上一篇「把 Google Chrome 預設的 JavaScript 關閉，開白名單...」提到把在 Google Chrome 裡把 JavaScript 關掉改用白名單管理有很多好處，但還是有個問題比較討厭，就是臨時要打開 JavaScript 的步驟很麻煩，而且還要記得拔掉。

而「JavaScript Switcher」就是解決這個問題的好工具：遇到需要 JavaScript 才會正常運作的網頁時，可以先按一下 icon 讓他開啟 JavaScript (然後他會自己 reload 頁面)，這個設定一直都會生效，直到你重開瀏覽器時就會自己洗掉，不需要擔心會忘記拔掉。

前人把這些工具都做好了，愉快... XD

↧
↧

改用 Simple JavaScript Toggle 切換 Google Chrome 的 JavaScript

May 10, 2016, 12:30 pm
$
0
0

在前一篇「用 JavaScript Switcher 快速啟用 JavaScript...」被小光光 kcwu 指出來我測錯了，JavaScript Switcher 在重開瀏覽器後並不會將設定清掉 (會保留到下次)。

我再找了 Web Store 上了好幾個不同的 extension 測了好幾次，這次在「Simple JavaScript Toggle」這個套件測了好幾次，確認有清掉。另外我也確認原始碼的部份有這段：

// Clear previous contentSettings made by the extension
function init() {
    patternStates = {};
    chrome.contentSettings['javascript'].clear({
        'scope': 'regular'
    });
}

這樣應該是 okay 了，再找機會請小光光吃飯 Q_Q

↧

用 JavaScript 寫的 NLP Library

May 15, 2016, 5:25 pm
$
0
0

nlp-compromise/nlp_compromise 是一個 JavaScript 寫的 NLP library，網頁上給的用法也很特別...

過去式：

nlp.text('She sells seashells').to_past()
// She sold seashells

複數形：

nlp.noun("dinosaur").pluralize();
// "dinosaurs"

還有這種用法：

nlp.statement('She sells seashells').negate().text()
// She doesn't sell seashells

也有這種用法：

nlp.sentence('I fed the dog').replace('the [Noun]', 'the cat').text()
// I fed the cat

抓人出來：

nlp.text("Tony Hawk did a kickflip").people();
// [ Person { text: 'Tony Hawk' ..} ]

不定冠詞：

nlp.noun("vacuum").article();
// "a"

還可以猜性別？

nlp.person("Tony Hawk").pronoun();
// "he"

str2num：

nlp.value("five hundred and sixty").number;
// 560

好像是好玩的東西... XD

↧

簡易的 jQuery CSS Selector 替代品

May 17, 2016, 11:35 am
↧
Viewing all 187 articles
Browse latest View live
Search