Web AR 入門： AR.js Tracking.js Three.js A-frame.js
2018-09-11 |
Web AR 可拆分兩個部分 相機 與 圖片識別 和 3D模型
其實不名思義就是使用 相機 取得現實中的畫面作為背景，在藉由相當的 圖片辨識 的技術，在特定的座標位置，渲染出對應的 3D 模型，使使用者感受到與現實做連結，也就是 增强現實 (簡稱為 AR)
在前端開發中，我們往往會使用一些前端的開發工具來提升我們開發的效率和速度
比較常見的工具包含：
- Webpack (代碼打包工具)
- ESLint （Conding Style 管理工具）
- Babel (ES6 代碼的編譯工具)
- …
不過上面舉例的項目基本上都跟我們在編譯時，撰寫的代碼比較又直接關係
這是如何做到的？ 這是一個還蠻有趣的問題，讓我們繼續往下看
閱讀全文»
[JavaScript] 檢查 DOM 載入狀態 Document.readyState
2018-05-12 |
有點經驗的前端工程師都知道需要使用 window.onload 、 addEventListener('load') 或是 jQuery 的 $(document).ready()
來確定 DOM 載入完成， 用來確保 JavaScript 不會因為找不到 DOM ， 而導致程式無法運行
不過只是單單使用上面的監聽方式是不夠的，這邊分享一下實際踩雷的經驗
還記得我上一篇文章 [JavaScript] JavaScript 重要觀念： By Value & By Reference 嗎？
建議在理解 淺拷貝(Shallow Copy) & 深拷貝(Deep Copy) 時，最好要先建立 By Value & By Reference 的觀念
你才會知道為什麼要去探討 淺拷貝(Shallow Copy) & 深拷貝(Deep Copy) 這個議題
通常 初學者 在撰寫 JavaScript 腳本時，相信都有碰到過一個問題，就是有時候會 沒有辦法去掌握當前的 變數 (Variable) 現在的狀態是什麼 ?，尤其是針對 物件 (Object)，的資料進行操作的時候，會發現物件內的元素不如自己的預期
下面是常見的實際案例：
[Canvas] 使用 JavaScript 實作 canvas 畫筆的功能
2018-04-03 |
畫筆的功能
大家都有玩過小畫家，我們可以使用小畫家的畫筆，輕鬆的畫出一些我們想要的圖案，相當的趣味也非常的方便
畫筆的功後續也演變為一些電子簽證的機制，最近剛好也碰到了一些類似的需求
決定在下方做個製作上的紀錄，下方提供了一個比較陽春的版本當作範例，也是為了方便理解他的製作方式
剛使用 Vue 進行前端開發的項目，往往會碰到一些自己想不到的問題與細節，在 Vue.js 踩雷篇 的主題中進行紀錄：
問題：
- Vue v-on:click does not work on component
- Vue 的 component 上使用 v-on 來綁定 click 等事件沒有反應
[JavaScript] 操作 iframe 元素，製作編輯的瀏覽畫面
2018-02-05 |
[ES6 JavaScript] 模板字符
2018-01-31 |
