本篇大綱：前端的一個困擾 管不到 iframe。Google、Facebook也是這樣傳值的。postMessage基本使用、傳值、接值。原始碼、Demo。本篇筆記要記錄的就是A、B頁面iframe的情況下，A傳給B，或B傳給A的問題，該怎麼用postMessage來解決。
postMessage 主頁、iframe頁可互相傳值
Posted on
分類: Front-End
拿Trello當資料庫 建一個店家清單：下篇-建立清單頁面
Posted on
本篇大綱：上篇的最後取得了Url、整理取得的資料、製作顯示清單頁面、捷運站選單、清單卡片部份、店家詳細資料、原始碼及Demo。本篇要筆記的是取得資料後的整理，以及處理成一個店家清單的頁面。為了有切換的功能，除了上篇的公館站外，Augustus另外又建了一個古亭站。
拿Trello當資料庫 建一個店家清單：上篇-Trello基本使用
Posted on
本篇大綱：Trello可以排工作，更可以吐出JSON、Trello建立資料步驟、建立團隊、建立看板、建立列表、建立卡片、建立待辦清單、輸入資料、取得Trello JSON的Url。本篇筆記要記錄的分成2篇。本篇是如何將Trello的看板設成公開，並建一個清單來接。
JavaScript載入方式 defer, async
Posted on
本篇大綱：defer、async、都不寫。這是很久以前的筆記，這次來整理並更新，主要是筆記載入JavaScript時，defer、async這兩個標籤的不同。瀏覽器是一行一行讀下去的，defer、async都不寫的話，DOM繪製到引用JS的那一行時，就停下來先解讀、執行完，然後DOM才接著往下繪製。
SpeechSynthesisUtterance 讓瀏覽器說話
Posted on
本篇大綱：瀏覽器本身就可以發音、頁面製作、SpeechSynthesisUtterance、第一坑 拿瀏覽器支援的所有語音、第二坑 調整速度倍率、第三坑 Chrome的Google語音、原始碼、筆記後心得。原本以為照著用，然後用vue.js把參數接一接，馬上就可以完成的，但一接參數就踩坑了。
Markdown常用語法筆記
Posted on
本篇大綱：愈來愈常用到Markdown了、Markdown編輯器 Typora、標題、內文、文字斜體、粗體、清單、引言、超連結、圖片、圖片加上連結、寫程式碼、行內程式碼。本篇主要是筆記Augustus用Markdown寫文時，最常用到的幾個。
d3、vue 畫一個台灣地圖
Posted on
本篇大綱：畫一個台灣地圖需要很多資源的幫忙、畫台灣地圖步驟、下載縣市界線經緯度、SHP轉檔GeoJSON、製作頁面、HTML、引用d3.js、d3.js append svg path、參考資源、原始碼、Demo。本篇紀錄在畫一個台灣的步驟，包含拿資料、轉檔、用d3.js繪製地圖，以及把台灣本島放在區塊中央。
用原生JS做一個簡單的手風琴Accordion/Collapse功能
Posted on
本篇大綱：從jQuery到原生JS、HTML、CSS、JavaScript、原始碼下載。今年開始在工作時逼自己寫原生的JS（Vanilla JavaScript），今天趁著意外的假日，試著把手風琴用原生JS寫了一個出來。寫完後發現，其實沒幾行就可以完成，也有了一點小小的成就感。
Promise, Async, Await 基本使用筆記
Posted on
本篇大綱：Promise, Async, Await 真是個好物、Promise使用、Promise polyfill、Async, Await使用、Async, Await polyfill、筆記後心得。Promise, async, await，覺得又是一個前端必學的語法，可以很有效的解決以前遇到的問題。
用原生JS做一個簡單的抽獎功能頁面
Posted on
本篇大綱：本篇會完成的Demo、本篇用到資源、html部份、css部份、js部份、抽獎名單資料庫、範例頁面、原始碼。很多活動頁上都在玩抽獎，就自己動手寫了一個出來。把名稱改成「午餐吃什麼」，把抽獎的名單換成店家名稱，順便再加上Google Map進去，就解決不知道午餐要吃什麼的煩惱啦~