本篇大綱：從jQuery到原生JS、HTML、CSS、JavaScript、原始碼下載。今年開始在工作時逼自己寫原生的JS（Vanilla JavaScript），今天趁著意外的假日，試著把手風琴用原生JS寫了一個出來。寫完後發現，其實沒幾行就可以完成，也有了一點小小的成就感。
用原生JS做一個簡單的手風琴Accordion/Collapse功能
Posted on
分類: Front-End
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進去，就解決不知道午餐要吃什麼的煩惱啦~
File API 客製上傳檔案按鈕(input file)
Posted on
本篇大綱：客製上傳檔案input html 部份、客製上傳檔案input js 部份、示範頁面。最近朋友遇到一個需求，就是要客製上傳檔案的按鈕。覺得寫成一篇，然後把code存起來，以後要用比較好找。可以看到input的id，跟label的for，兩個值要是相同的，這樣就可以把label跟input綁起來。
如何使用vivus.js製作輕量快速svg動畫
Posted on
本篇大綱：vivus.js主要在做svg的邊框動畫、安裝、使用、頁面引用svg、執行vivus.js、實作範例、svg圖、壓縮svg、寫code。最後完成的範例頁面在這，基本上都是使用vivus包含的ajax方法，可以直接看頁面上的原始碼。推薦這個套件，花個幾分鐘就可以做出看上去很厲害的作品。
mailto: 點擊連結 開啟寄送email
Posted on
mailto: 點擊連結 開啟寄送email。本篇大綱：本篇要解決的問題、基本使用 mailto:收件人信箱、一次寄給多人 用半形逗號、寄送副本 cc、bcc、帶入信件主旨 subject、帶入信件內文 body、內文中要折行/斷行/換行 %0D%0A。
用純css寫的網頁預覽效果
Posted on
覺得可以用在歷年回顧或是頁面預覽的區塊上使用，就自己寫了一個。預設div的寬高就用width/padding的css特性直接做一個正方形處理。而捲動的效果直接用background-position來處理。結合以上2點，實際上會寫到的css沒幾行，如下…
從使用者輸入網址，到瀏覽器呈現出來，經過了哪些過程？
Posted on
文章中說有資歷的前端在面試時會遇到三個問題，能回答的話offer大概也到手了：1、用戶輸入URL回車之後，瀏覽器到底做了啥？2、頁面渲染的完整流程是怎樣的？3、前端性能優化有哪些經驗？坦白說，因為這三題我完全答不出來，覺得是很勸世的一篇文章啊，就認真的來看。
漸層色按鈕hover效果
Posted on
本篇大綱：本篇要解決的問題、寫code前的原理思考、實作程式碼部份。今天在看Google AMP的文件時，看見他們頁面上的按鈕，就是非漸色轉到漸層色，並且還能帶有transition的過渡。看了一下他們的寫法，發現原理很簡單，就寫了一個在CodePen上，方便以後取用。
一個簡單的卡片樣式 simple card ui
Posted on
從Google Material Design問世以後，愈來愈多網站設計出了卡片的ui。卡片樣式大同小異，大部份包含：頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片，歡迎大家取用。以下講一下設計上的思考，跟一些最近常用的方法。