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

Bootstrap 2 的 CDN Hotlink

June 11, 2012, 11:24 am
$
0
0

NetDNA 跳下去做 Bootstrap 2 的 CDN Hosting 了：「Bootstrap CDN – Twitter’s Bootstrap hosted on NetDNA’s Tier-1 Content Delivery Network」。

這項服務不包含亞洲區的 CDN PoP，從台灣 (HiNet) 或是日本 (Linode) 過去都是美西的點，不過至少有 CDN Hotlink 可以用了…

Related Posts:

↧
Search

用 JavaScript 遠端攻陷 Intel Core2Duo…

July 15, 2012, 8:59 am
$
0
0

從 Hacker News 上看到了「Intel Core2Duo cpu cache controller bug PoC」，透過 JavaScript 遠端攻擊 Intel Core2Duo，直接突破所有 application & OS 保護機制… exploit 說明裡提到測過 Intel Core 2 Duo T5750 與 Intel Atom N270 這兩顆 CPU。

另外，從 exploit 給的資料中，可以找到 Kris Kaspersky 在 HITB 2008 給出來的 PDF：「Remote Code Execution through Intel CPU Bugs」。

居然用 JavaScript 戳…

Update：很像是假的：「http://news.ycombinator.com/item?id=4246338」。

Related Posts:

↧
↧

jQuery 1.8.0

August 12, 2012, 3:24 am
$
0
0

官方公佈 jQuery 1.8.0 了：「JQUERY 1.8 RELEASED」。

這個時間點 Google Libraries API 已經放上 1.8.0 了：HTTP 版的 http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js 與 HTTPS 版的 https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js。

靠著 Sizzle 翻修、拔掉一些 alias 與功能，以及 code cleanup，使得 jQuery 1.8.0 在 gzip 後比 1.7.2 小了一些。

Related Posts:

↧

原來 jQuery 1.8.3 出了…

November 17, 2012, 6:56 am
↧

cdnjs (其實我要說的是 Bootstrap…)

December 12, 2012, 1:55 pm
$
0
0

之前曾經提過 BootstrapCDN，不過我不是很喜歡用。主要的原因包括 netdna.bootstrapcdn.com 所使用的 CDN 在是不包含亞洲範圍 (會需要到美西抓)，加上之前因為換 url 結構結果本來的 url broken…

cdnjs 是之前就知道的服務，剛剛看了一下發現東西愈來愈完整了… 雖然名稱裡是放 js，但實際上上面放的 Bootstrap 是完整的：

//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/img/glyphicons-halflings.png
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/img/glyphicons-halflings-white.png
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.js

剛剛在 CloudFlare 官方的 blog 上看到介紹 cdnjs 有點意外：「CDNJS: The Fastest Javascript Repo on the Web」。

翻了翻 cdnjs.cloudflare.com，看起來是包含亞洲的點，在 HiNet 與 TWGate 上測試是導到香港的點，應該會用用看吧。至於其他 Google Hosted Libraries 有提供的應該是會用 Google 的服務，畢竟是直接從台灣的機房供應的…

Related Posts:

↧
↧

惡搞的 pull request 被人嫌到不行…

December 14, 2012, 10:44 am
$
0
0

GitHub 上總是有人會送一些奇怪的 pull request 出來，把整個 code repository 砍掉換成惡搞的東西… 這次是 CoderDojo / CoderDojo-Kata 這個專案被人發 pull request 要惡搞，結果一堆人利用 comment 的功能開始嫌東嫌西：「pull 1」。

看完一次後覺得實在是太… 有趣 XDDD 乾脆列出來：

  • 沒有 doctype。
  • <style> 沒有指定 type。
  • <script> 指定的版本居然是 JavaScript 1.2… XDDD
  • 「你的 code 疑似抄自 1995 年的 sample，請考慮加回 GPL statement」
  • jslint 掛得很慘 XDDD
  • javascript 裡使用不必要的全域變數。
  • 可以用三元表示式讓 code 更清楚。
  • 變數名稱不具意義 XD
  • setInterval() 只是要呼叫一個 function，可以直接用 function name 而不需要用字串。
  • 為什麼你不縮排呢，很難讀耶…
  • 為什麼結尾不加上分號呢 (然後就呼叫 Douglas Crockford XDDD)
  • body 加上 bgcolor 被罵 XDDD
  • bgcolor 的顏色用 #000000 也被罵 XDDD 應該用 #111111… XDDD
  • 用 <br/> 排版被罵應該用 css 排 XD
  • table 排版再被罵…
  • single-quote 與 double-quote 混用也被罵不一致…
  • 用 inline css 被糾正 XD
  • 裡面用到圖片被稱讚 XDDD 被問圖片裡的鍵盤哪裡可以買 XDDD
  • 然後圖片沒有 alt 也被刁 XD
  • 沒用 safe color 被揍…
  • 下面有 alt 的圖片，但 alt 內容是空白而被人罵，但就有人很認真的回他說「alt 空白是合法而且某些 case 下是正確的語意，blah blah blah…」XDDD
  • 用 <b> 被提醒 deprecated，然後又有人很認真的回「在 HTML5 裡面被 undeprecated 了」XDDD
  • 出現 “click here” 但卻不能按啊啊啊

(倒地不起)

Related Posts:

↧

sitespeed.io 網站測速

December 16, 2012, 12:15 pm
$
0
0

sitespeed.io 是一個 open source 軟體，讓開發者可以測試網站的效能，然後輸出 html 報表：「Do you sitespeed?」。

執行需要 Java 1.7+ 以及 PhantomJS，我是在 FreeBSD 上跑 (Java 的部份是用 java/openjdk7)，另外根據文章裡第三個 comment，在 Windows 上用 Cygwin 也可以跑。

以 ./sitespeed.io -u http://ptt.cc/ -d 1 -o img 跑出來後會有一整個目錄的報告，包括了 summary 以及所有頁面的清單 (後面這兩個連結是跑完後用 s3cmd sync 丟上 S3 的)：「ptt.cc – Summary of the sitespeed.io result」、「ptt.cc – All pages information」。

每一頁都有細項說明，像是首頁 /index.html：「Page data, collected by sitespeed.io for page – http://www.ptt.cc/index.html」。

不過我更感興趣的是 PhantomJS，不知道可以做多少事情…

Related Posts:

↧

node.js 版的 YUICompressor…

December 20, 2012, 12:48 pm
$
0
0
↧
Search

John Resig 寫超過三年的 Secrets of the JavaScript Ninja 終於出版了…

December 31, 2012, 2:48 pm
$
0
0

寫到從 Mozilla 換到 Khan 了… XD

John Resig 是 jQuery 的建立者，並長期擔任 jQuery 的大頭 (不過目前已經將位置讓給其他人了，不太深入參與 jQuery 的發展了)，所以在 John Resig 還在帶領 jQuery 發展時預定所要出版的書「Secrets of the JavaScript Ninja」備受期待。

The cover of Secrets of the JavaScript Ninja

然後這一期待就是三年… 從 2009 年開始寫 (參考「50% Off Secrets of the JavaScript Ninja」這篇)，終於在 2012 年結束之前寫完上架了：

嗯，HUNTER×HUNTER 什麼時候會出下一章呢…

Related Posts:

↧
↧

在瀏覽器玩 HTML5 + JS + Canvas 寫的 Diablo…

February 20, 2013, 7:15 pm
$
0
0

沒錯，是 Blizzard 的那個 Diablo (暗黑破壞神)：「Isometric minimal-code style game at html5 canvas and javascript」，遊戲可以在「http://mitallast.github.com/diablo-js/」這頁玩…

直接用 Blizzard 的圖資搞當然是很精彩 (而且很震撼)，但這樣搞不會被 DMCA takedown 嗎 XDDD

Related Posts:

↧

不支援 IE{6,7,8} 的 jQuery 2.0…

April 19, 2013, 11:49 pm
$
0
0

jQuery 2.0 的消息：「jQuery 2.0 Released」。2.0 版與 1.9 的功能相同，只差在支援度：停止對 IE{6,7,8} 的維護及 workaround。

如同半年前在「jQuery 2.0 將放棄 IE{6,7,8} 的事情…」講的，如果在 John Resig 還在的時候應該不會放棄 IE8…

這是 2012 年七月的數字：

這是 2013 年三月現在的數字：

仍然是超過 10% 而且不太往下掉的數字…

Related Posts:

↧

快速衝高 Alexa 排名的方法

July 19, 2013, 12:54 pm
$
0
0

很久前 (突然找到我在 2006 的文章) 就說 Alexa 只是個參考用的工具… (參考「Search Results for: alexa」)

如果要看結論的人請直接跳到文章尾部，中間是說明發現的過程。

昨天 (星期五) 的時候跑去找肥睡睡餵食「摩斯吃到飽」，然後 xdite 也一起亂入，剛好聊到兩件事情。

第一件事情是要幫友站 Logdown 測試流量，講了一堆嘴砲方式… (惡搞的方式先拿掉了)

第二件事情是前天 (星期四) 的時候我發現前公司 pixnet.net 的 Alexa 從六月開始排名突然爆增，大約從全球 600 名跳到 120 名，台灣排名的部份居然超越了 YouTube (目前 PIXNET 在第五名，YouTube 在第六名)，但到達率、PV、停留時間都沒有大的變化，就問問 xdite 與肥睡睡有沒有什麼想法，是不是最近有上什麼功能是我沒注意到的 XD

不過餵食席間沒有討論出結果來，吃飽後閃人了… (我不確定肥睡睡有沒有吃飽啦，不過我是不怎麼餓…)

回到家後想說來研究 Logdown 使用的服務，asset 什麼的就先不管好了，到是有一段 code 我之前沒遇過：

Update：結果回到家後研究 Logdown 的服務，就看到 xdite 把 Alexa 的 js 丟上去在玩了：(剛好 xdite 也想到就同時在測了…)

<!-- Start Alexa Certify Javascript -->
<script type="text/javascript">
_atrk_opts = { atrk_acct:"KOI0g1aYS500G0", domain:"logdown.com",dynamic: true};
(function() { var as = document.createElement('script'); as.type = 'text/javascript'; as.async = true; as.src = "https://d31qbv1cthcecs.cloudfront.net/atrk.js"; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(as, s); })();
</script>
<noscript><img src="https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=KOI0g1aYS500G0" style="display:none" height="1" width="1" alt="" /></noscript>
<!-- End Alexa Certify Javascript -->

一開始眼殘沒看到 Alexa Certify Javascript 這段文字，第一個想法是「xdite 你沒事自己寫個 analytics service 幹嘛啊，嫌時間太多嗎」，後來轉念一想「啊啊這會不會是什麼服務？」。

拿 atrk.js 當關鍵字一查就發現是 Alexa 的服務，再回頭來看就發現自己眼殘了… XD

嘲笑自己三秒後就突然想到「咦，餵食時提到的 Alexa 排名會不會跟這個有關？」

接下來就是查證的時間了，這時候 Internet Archive Wayback Machine 拿來考察變得超好用：「http://web.archive.org/web/*/http://www.pixnet.net/」，6/9 的 snapshot 時首頁還沒有 atrk.js，6/20 就有了：

gslin@GSLIN-DESKTOP [~] [12:02/W3] curl -s http://web.archive.org/web/20130609121320/http://www.pixnet.net/ | g atrk.js
gslin@GSLIN-DESKTOP [~] [12:02/W3] curl -s http://web.archive.org/web/20130620181016/http://www.pixnet.net/ | g atrk.js
(function() { var as = document.createElement('script'); as.type = 'text/javascript'; as.async = true; as.src = "https://d31qbv1cthcecs.cloudfront.net/atrk.js"; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(as, s); })();

另外兩個也有類似現象的網站，分別是 mobile01.com：

以「http://web.archive.org/web/*/http://www.mobile01.com/」的資料來看，2012/12/27 的 snapshot 還沒加入 atrk.js，2013/1/15 的則加入了：

gslin@GSLIN-DESKTOP [~] [12:06/W3] curl -s http://web.archive.org/web/20121227040802/http://www.mobile01.com/ | g atrk.js
gslin@GSLIN-DESKTOP [~] [12:06/W3] curl -s http://web.archive.org/web/20130115110655/http://www.mobile01.com/ | g atrk.js
<script type="text/javascript" src="/web/20130115110655js_/https://d31qbv1cthcecs.cloudfront.net/atrk.js"></script>

以及 ck101.com：

以「http://web.archive.org/web/*/http://ck101.com/」的資料來看，4/24 還沒有 atrk.js，4/30 的加入了：

gslin@GSLIN-DESKTOP [~] [12:07/W3] curl -s http://web.archive.org/web/20130423092213/http://ck101.com/forum.php | g atrk.js
gslin@GSLIN-DESKTOP [~] [12:08/W3] curl -s http://web.archive.org/web/20130504162245/http://www.ck101.com/forum.php | g atrk.js
(function() { var as = document.createElement('script'); as.type = 'text/javascript'; as.async = true; as.src = "/web/20130504162245/https://d31qbv1cthcecs.cloudfront.net/atrk.js"; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(as, s); })();

所以結論就很簡單啦，如果 Alexa 排名對你是很重要的 KPI，Alexa Internet – Get Certified Site Metrics 趕快付錢加入試看看吧！XDDD

可以看到有三個不同的版本，如果要測試的話 USD$9.99/month 的第一個月還免費，可以先測試看看？(不知道是不是要 USD$149/month 的才有效…)

PS：以後看 Alexa 排名還得參考他有沒有掛這東西，好累…

Related Posts:

↧

jQuery 1.11 Beta 1 與 2.1 Beta 1…

September 20, 2013, 8:52 am
↧
↧

Firefox 以 JavaScript 支援 Flash

October 3, 2013, 11:38 am
$
0
0

標題不知道怎麼下比較好…

一樣是在 Zite 上看到的消息，Firefox 將引入內建的 Flash Player，是以 JavaScript 實做的：「HTML5 Flash Player (Shumway ) landed」。

專案在 GitHub 的 mozilla/shumway，Mozilla 的 Bugzilla 則是在「Bug 904346 – (shumway) [meta] add built-in SWF support to Firefox with Shumway」這裡。

純 JavaScript 的實做版本，有機會 porting 到 Chrome 上嗎？感覺安全性問題會少很多？(或是被發現安全性問題的時間？)

Related Posts:

↧

避免文件大量 Reflow…

October 6, 2013, 7:32 pm
$
0
0

今天的 Hacker News 文摘上看到關於 Reflow 的問題：「Preventing ‘layout thrashing’」。

Reflow 指的是改變 DOM 後造成的畫面重新計算以及 render。

Google 有給過一些資訊：「Minimizing browser reflow」，Mozilla 也有給「Notes on HTML Reflow」，不過這兩篇都是概念性的文章…

文章的作者寫了 FastDom，把 read 與 write 包起來一起處理 (read 一包，write 一包)，不過這樣寫的時候就要小心當下真正的 DOM 的值了…

不過如果只是處理 ordering 的問題，叫 FastDom 好像怪怪的…

Related Posts:

↧
Search

php.net 被擋的後續分析…

October 24, 2013, 10:56 am
$
0
0

昨天一整天 php.net 網域下的網站都被擋掉：

在 Twitter 上也有看到 Rasmus Lerdorf 在抱怨：

Rasmus 說是 false positive (誤判)，不過我是不太直接相信他講的話…

剛剛看到 Netcraft 整理了一些資料出來「PHP.net blocked by Google: False positive or not?」，裡面有不少東西可以看…

其中最後這段：

However, a short moment ago, a Hacker News user posted some obfuscated JavaScript that was found appended to a possibly cached version of the userprefs.js script, suggesting that the PHP.net website may have been compromised recently.

The obfuscated JavaScript inserts an iframe into the webpage, which loads content from an external site known for distributing malware. Google Chrome blocks the inclusion of any content from known malware domains, although the injected content in this case no longer appears to be accessible.

這段有問題的 javascript code 的解讀可以在這裡看到說明。

如果的確是 compromise，那這事就沒完了，接下來還要找是從哪個洞進來的… 不過以 php.net 的情況，(消音)…

Related Posts:

↧

Gmail.js

December 13, 2013, 8:17 pm
$
0
0

前幾天看到的「Gmail.js – JavaScript API for Gmail」，這並不是 Google 官方的 JavaScript API，而是給開發瀏覽器套件的人用的 JavaScript API。

甚至有給範例，讓你可以透過 Chrome Console 嘗鮮：

看文件發現比較特別的是提供了 Observe 的功能，可以抓到 Gmail 的事件 :p

Related Posts:

↧
↧

用 BrowserSync 測試多個平台…

February 22, 2014, 1:17 am
$
0
0

BrowserSync 是用 node.js 寫的工具，可以同時測試一堆 device，修改後不用按 reload，印象中已經有套件可以做類似的事情？

一般用 npm 裝就可以了：

npm install browser-sync

最簡單的方法是直接執行 browser-sync，執行後會出現像這樣的訊息：

<script src='//192.168.1.1:3000/socket.io/socket.io.js'></script>
<script>var ___socket___ = io.connect('http://192.168.1.1:3000');</script>
<script src='//192.168.1.1:3001/client/browser-sync-client.0.6.0.js'></script>

把這段程式碼貼到 body 的最後面就可以了，當 BrowerSync 偵測到檔案有更新時會透過 server push 機制重刷頁面。

另外，也可以產生 bs-config.js 修改設定：

browser-sync --init

更完整的說明可以從「Options」這頁找到。

Related Posts:

↧

用 browserify 將 npm 的函式庫包到瀏覽器上用…

February 22, 2014, 8:45 am
$
0
0

browserify 可以將用到的程式碼都包成一包，拿到瀏覽器上使用。

舉個例子離說，先寫了一個 a.js：

(function(){
    var el = document.getElementById('output');

    var j2x = require('json2xml');
    el.innerText = j2x({a: 1});
})();

其中可以看到直接拿 require() 把 json2xml 抓進來。但在瀏覽器裡要自己處理有哪些 dependency 很麻煩，就用 browserify 拉出來：

browserify a.js -o a.bundle.src.js

生出來的 a.bundle.src.js 就可以拿到瀏覽器裡使用了！如果需要的話，還可以用 JS Compressor 再壓起來再拿到瀏覽器裡使用。

最後補充一下，browserify 的安裝方式很簡單：

npm install browserify

就是這樣而已。

Related Posts:

↧

Google Searchbot 將開始有能力解讀 JavaScript…

May 25, 2014, 6:37 am
$
0
0

Google 在 Official Google Webmaster Central Blog 上正式向全世界公告他們的 Searchbot 將會解讀 JavaScript：「Understanding web pages better」。

也就是說，再這次改版後，就算你的頁面全部用 JavaScript 產生，Google 也有能力解讀出來。這顛覆了以前學到的觀念…

其他家 (DuckDuckGo？) 會支援嗎？不知道會不會跳下去做…

Related Posts:

↧
Viewing all 187 articles
Browse latest View live
Search