Google 試算表 (1) - 讀取試算表資訊

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201706/google-spreadsheet-1.html 摘要：自從參加完 2017 IT 幫幫忙鐵人賽之後，就有很多主題讓我躍躍欲試，這次要來寫的系列是 Google 試算表，主要不是介紹試算表的操作，而是透過一些網頁前端的語法，把試算表當作簡易的資料庫，實現試算表讀取和寫入的能...

Read More

Promise 與 Opendata

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201706/javascript-promise-opendata.html 摘要：Opendata 是個很好用的練習資料，之前都是透過 jQuery 內建的 getJSON 或 AJAX 來完成資料串接取得，這篇將會透過XMLHttpRequest()來實作，並且搭配 Promise 的用法，載入一組資料之後再載另外一組資料，避免同時載入的情況發...

Read More

JavaScript 同步延遲 ( Promise + setTimeout )

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201706/javascript-promise-settimeout.html 摘要：過去在寫 JavaScript 使用的同步延遲，都是用非同步的 setTimeout 加上 callback 來實現，但如果有很多個任務或流程要執行，就得用上一大堆的 callback，然而 JavaScript 裡的 Promise ，剛好就可以用來解決同步與非同步的問題，讓整個延遲的過程可以很漂亮且同步的「串」在一...

Read More

CSS 偽元素 ( first-line、first-letter、selection)

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201706/pseudo-element-4.html 摘要：除了 ::before 和 ::after，CSS 的偽元素還有 ::first-line、::first-letter 和 ::selection 這三個，這三個相對來說就簡單得多，用法也較為單...

Read More

CSS 偽元素 ( JavaScript 操控 )

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201706/pseudo-element-3.html 摘要： 雖然我們能用 CSS 操控由於偽元素，但因為偽元素不存在於網頁元素內，所以無法透過 JavaScript 正規操控 DOM 的方式來修改或控制，不過 JavaScript 身為一個神通廣大的程式語言，仍然是有方法可以辦...

Read More

CSS 偽元素 ( content 與 counter )

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201706/pseudo-element-2.html 摘要：前面介紹過 CSS 裡的 ::before 和 ::after 這兩個偽元素，以及 content 相關的用法，這篇將針對 content 搭配 counter ( 計數器 ) 進行一些有趣的應用，相信熟練之後搞不好很好玩也說不...

Read More

CSS 偽元素 ( before 與 after )

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201706/pseudo-element-1.html 摘要：最近因為一些網頁的需要，比較深入的使用了 CSS 的「偽元素」( Pseudo Element )，發現原來不只是用用 before 或 after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法紀錄一...

Read More

LINE BOT 實戰 ( 聊天篇 )

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201701/line-bot-2.html 摘要：上一篇我們已經知道 LINE BOT 相關的原理以及如何部署，這篇就真的來完成一個會和你聊天的機器人，希望可以時實作一個你問他現在 PM2.5 數值他就會回答你，甚至你問他日幣匯率他也會回答...

Read More

LINE BOT 實戰 ( 原理篇 )

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201701/line-bot.html 摘要：最近剛撰寫完 IT 鐵人賽的「實戰智慧插座」系列文章，原本最後兩篇想用個 LINE BOT 來完美收尾，但天不從人願 ( 自己後端的能力太弱 ），沒辦法順利完成，但趁著這個週末，總算是搞定了 LINE BOT ( LINE 聊天機器人 ...

Read More

玩玩 360 度 ( 進階編修 )

完整文章位於 OXXO.STUDIO 新網站 點選閱讀完整文章： http://www.oxxostudio.tw/articles/201607/panorama-360-2.html 摘要：稍微了解 360 圖片或照片的做法與原理之後，這一篇就要來玩點真功夫了！因為是真功夫，所以前提必須要會一些影像處理軟體，以下將會使用 Photoshop 才可以完成 ( 小弟只專攻 Photoshop )，不過如果知道原理，其他影像處理軟體應該也是可以辦到...

Read More