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 格式 )