用原生JS做一個簡單的抽獎功能頁面

本篇大綱:本篇會完成的Demo、本篇用到資源、html部份、css部份、js部份、抽獎名單資料庫、範例頁面、原始碼。很多活動頁上都在玩抽獎,就自己動手寫了一個出來。把名稱改成「午餐吃什麼」,把抽獎的名單換成店家名稱,順便再加上Google Map進去,就解決不知道午餐要吃什麼的煩惱啦~

用Firebase、Google Apps Script、GTM自己做一個讚按鈕

用Firebase、Google Apps Script、GTM自己做一個讚按鈕 本篇大綱:為什麼要自己開發一個按鈕、按鈕樣式部份、按鈕功能部份、判斷使用者語系、在google apps script上寫API、cookies、發Google Analytics事件、埋程式碼html、css、js、結論

漸層色按鈕hover效果

本篇大綱:本篇要解決的問題、寫code前的原理思考、實作程式碼部份。今天在看Google AMP的文件時,看見他們頁面上的按鈕,就是非漸色轉到漸層色,並且還能帶有transition的過渡。看了一下他們的寫法,發現原理很簡單,就寫了一個在CodePen上,方便以後取用。

一個簡單的卡片樣式 simple card ui

從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。