再見了，中廣音樂網

中廣音樂網

1987 - 2017

非同步載入 JavaScript 檔案

在 http://stackoverflow.com/questions/7718935/load-scripts-asynchronously 看到的，雖然這不是新東西，不過弄的那麼方便還是很厲害，真是好東西。

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    var s;
    s = document.createElement('script');
    s.src = src;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

YouTube Data API、indexedDB、W3.CSS

這篇文章所有的 JavaScript，都要搭配 MooTools

這個 Blog 上面有個音樂，按下去有 YouTube 的播放清單，產生那個清單很簡單：

1. 用YouTube Data API 取得我在 YouTube 公開的的播放清單
2. 將清單 Title 放到下拉選單

W3.CSS 使用心得

要做 Responsive Web Sites，最簡單的方法，當然是找一個 CSS framework 來使用，根據統計，最多人使用的當然是 Bootstrap。

我之前也用了 Bootstrap，其中最讓我不滿意的，就是許多狀況下，它必須搭配 jQuery，但是天底下總是會有不用 jQuery 的人，剛好在下就是其中一名，且到了 Bootstrap 4 之後，看來 jQuery 是非用不可，所以藉著工作的空檔，試試看其他的 CSS framework 了。

目標就是將我的 Blogger 改成 responsiveness，而選用的 CSS framework，也沒有挑很久，就拿 W3.CSS 來試試了。

W3.CSS 

W3.CSS 是 w3schools.com 開發的，授權方面，網站上是說完全免費，所以不需要授權 (W3.CSS is free to use. No license is necessary)。

Size

Bootstrap v3.3.7 是 118 KB (壓縮傳輸 23 KB)，W3.CSS 32 KB (壓縮傳輸 6 KB)，雖然多數狀況下都是直接從 local cache 就載入。

Javascript

Bootstrap 指定搭配 jQuery。

W3.CSS 用到 Javascript 時，直接使用 Javascript 當範例，以這一方面說，或許是較熟悉 Javascript 的，比較適合使用。

例如用 Mootools：

別忘了按按看上面那個按鈕，或者看 jsfiddle 比較清楚。

Responsiveness

W3.CSS 跟 Bootstrap 一樣可以用 grid 的方式達成 responsiveness，一列一樣是 12 個 grid，也一樣有 small、medium、large 三種螢幕尺寸的 grid 可以用。

不過 W3.CSS 還可以用一半、三分之一、四分之一、剩餘空間

當然啦！用 grid 也是可以自己算，

結論

除非是非用 Bootstrap 不可，我會推薦可以用 W3.CSS。