2016年1月6日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201601/css-less-03.html

摘要:
經過前兩篇的洗禮,應該可以直接用 LESS 來撰寫整個網站的 CSS 了,不過如果要針對大型的專案,在樣式的規劃上可能就要用到更進階的設定,第三篇的 LESS 文章將會介紹一些進階的功能,總而言之,其實 LESS 和 SASS 的功能都大同小異,我自己也是寫過 SASS 又轉戰 LESS,不過 LESS 真是滿簡便好用的,提供給大家參考。
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201601/css-less-02.html

摘要:
上一篇介紹了 LESS 的基本用法、import 和變數,這一篇要來玩一點比較進階的:函式、 mixin 和 extend,當我們可以熟練mixin 和 extend 的用法,相信對於整個 CSS 可以有大幅加速的功能。
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201601/css-less-01.html

摘要:
猶記部落格創立之初,是用 SASS 這個基於 Ruby on rails 的 CSS 預處理器來撰寫 CSS ( 不過個人寫程式喜好還是傾向 SCSS ),當初還寫了一些跟 SASS 有關的文章,不過後來覺得實在太麻煩,要用 SASS 還必須要先裝 Ruby 還有一堆哩哩摳摳的環境問題,加上部落格已經完全改用 NodeJS 為基底的 gulp 來實作,貌似再安裝 SASS 又有點多此一舉了,所以就直接轉戰 LESS 這套以 JavaScript 為基底的預處理器 ( BootStrap 也是用 LESS ),除了可以用 gulp-less 來作轉換,更不需要安裝任何東西 ( 當然 NodeJS 還是得裝 ),就算你都不安裝,載一個 less.js 放在網頁裡面就可以直接撰寫 less 在網頁裡面跑,相當的方便好用,就這樣一寫就寫了半年以上,也算是有點心得,可以來寫幾篇 LESS 教學,順便記錄一下。

2016年1月4日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201601/web-audio-recorder.html

摘要:
當我們會使用音訊播放並且會製成頻譜圖之後,接著就要來玩玩錄音了,原理大概就是透過電腦的麥克風,獲取外部聲音,然後經由 Web Audio 聲音處理節點把聲音數位化,更進一步地把聲音儲存下來。
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201601/web-audio-api-Analyser.html

摘要:
之前寫了一篇了用 createScriptProcessor 來製作音樂頻譜的功能,這裏要來介紹另外一個製作方式,就是使用 analyser 節點,analyser 節點可以針對經過它的音頻做分析 ( 顧名思義咩 ),所以相較 createScriptProcessor 會建立緩衝區來保留音頻訊號,處理速度會較快,但缺點是會失去一些高頻的訊號,不過如果只是要單純顯示音樂頻譜,倒是一個不錯的選擇。
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201512/spider-basic.html

摘要:
幾個月前聽了一場用 NodeJS 做爬蟲的分享,大致上就是用純前端的技術,來爬靜態網頁的資料,聽完一直很想做個爬蟲看看,剛好最近因為「空氣污染」( PM2.5 ) 正夯,公司也正在研發 PM2.5 的感測器,於是就想說自己先來試試看,用爬蟲去中央氣象局爬爬 PM2.5 的數據。 爬空污數據除了直接爬網頁資料外,也可以從「空氣品質即時污染指標」這個政府開放資料平台來撈,這裏有提供 CSV、JSON 和 XML 的格式,不過因為這篇在爬蟲,所以我要爬的網站是這個:「即時細懸浮微粒指標」,加上這個網站更新的速度比開放資料的速度快 ( 雖然都是一小時更新一次,不過還是快樂十幾分鐘左右 ),所以就直接爬數據囉!
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201512/web-audio-api-createmediaelementsource.html

摘要:
最近好忙,一陣子沒寫這系列的文章,還回頭複習了一陣子,前幾篇認識了許多利用 Web Audio API 產生聲音或音效的方法,這篇則是要引入外部的音樂或聲音,並將聲音轉換為數值頻譜。( 因為轉換為數值,就可以拿這些數值來做應用了 ) 在這系列的 第一篇 有介紹過createOscillator()這個振盪器產生單音的方法,這篇要來介紹createMediaElementSource這個把外部音軌作為 source 的方法,這個方法需要搭配 HTML5 的audio標籤來實施,因為它預設就是會以 HTML5 所載入的音頻為主,以下面的例子來說,我們要先在 HTML 裡放入聲音,controls表示會載入預設的播放器介面,autoplay預設為一開始就自動播放。( mp3 格式基本上已經被所有瀏覽器接受,如果不能播放也可以採用 ogg 格式 )

2015年10月29日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201510/clipboard-js.html

摘要:
之前有介紹過 點選自動複製 ( ZeroClipboard ) 這個透過 flash 的方式,繞過瀏覽器安全性限制,將網頁元素內容複製到剪貼簿的方法,但因為必須走 flash 的緣故,在不支援 flash 的瀏覽器裡反而變成了一個隱性的問題,從以前那篇文章可以看到,當初其實是參考了 Github 的做法,結果前一陣子在 Github 裡頭,赫然發現他的那顆按鈕已經不是 flash,變成用純粹的 JavaScript 就可以複製到剪貼簿,真是太令人感到意外!

2015年10月7日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201510/web-audio-api-biquadfilternode.html

摘要:
這篇要來探討 Web Audio API 裏頭的濾波器:BiquadFilterNode,濾波器顧名思義,就是只讓固定頻率的波通過,在一般常見的聲音播放軟體的「等化器」,當中就用到許多濾波的功能,透過濾波器,我們可以加強或過濾低音或高音,直接影響聽覺的感受,甚至可以利用過濾器濾掉高頻的雜訊或低頻的雜訊,得到更高的音質。 使用 BiquadFilterNode 之前,要了解它有幾種類型 ( type ) 可以使用,如果對於文字描述不清楚的,其實只要看下面那張圖就能一目了然。

2015年9月30日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201509/web-audio-api-stereo-pannernode.html

摘要:
通常我們在電影院看電影時,高檔一點的電影院會有立體音響 ( 特別是 iMax3D ),讓我們有置身在電影場景裡的感受,然而在 Web Audio API 裡也有類似的功能,讓我們可以模擬出立體的聲音,而這項技術雖然還沒有被廣泛應用,但根據現有的資訊,未來應該將會與 WebGL 結合,廣泛用於 360 度影片、Web 遊戲...等需要有立體聲音的技術領域,這篇將會做一些簡單的介紹。