Slack通知功能 純靜態

本篇大綱:原來Slack通知還蠻多人用的。純靜態?註冊Slack,跳過。1 開通自動通知功能。1-2 忘記了webhook url?2 發送訊息。3 設定自動發送。4 除了純文字的訊息,還有多種格式。筆記後心得。這篇寫的自動通知,就是單純發送個訊息的,無法跟訊息有互動。

WordPress:埋Google AdSense廣告

本篇大綱:Google AdSense,小站站長賺不了什麼錢。為什麼要寫這篇?1 AdSense審核是否能埋廣告。2 埋AdSense廣告。不推薦AdSense自動放廣告。手動埋廣告的外掛。3 從AdSense產生廣告程式碼。Google Analytics連結AdSense。發布商報表

WordPress:Site Kit by Google介紹及使用

本篇大綱:寫在Google AdSense之前。Site Kit by Google介紹。安裝Google Site Kit。連結Google Analytics。加裝更多功能。因為本站裝Google AdSense驗證的部份是用Site Kit by Google這個外掛,因此先來寫一篇介紹一下這外掛的筆記。

Youtube Iframe API 常用功能

本篇大綱:影片愈來愈重要的這時代,前端會遇到嵌Youtube的相關需求。基本使用:嵌入影片+自動播放。1 html中放一個div,由JS去嵌入。2 html裡直接放個iframe。自製Youtube播放器。監聽Youtube播放狀態。Demo、原始碼。

GA:啟用Web+APP報表

本篇大綱:Google Analytics?介面怎麼不一樣。步驟1:建立Firebase專案。步驟2:建立Firebase應用程式。步驟3:修改連接的GA。步驟4:為新增的GA資源,指定收哪一個GA資源。從GA中串流資料。GA報表 VS. Web+APP報表

GA:User-ID功能 設定及報表檢視

本篇大綱:User-ID,讓報表更精確。對前端來說有個大問題。本篇範例說明。1 同意User-ID政策。2 埋GA追蹤碼時,再加一行User-ID。3 新增User-ID用的資料檢視。User-ID帶來的報表改變。一般 VS. User-ID 目標對象報表。使用者多層檢視。跨裝置。

不會寫程式,也能自己架一個免費網站:Publii + Github pages

本篇大綱:有時候,我們只是想要有一個簡單的網站,而且免費。下載、安裝Publii。Publii基本設定。建立Github帳號,取得token。填上取得的4個值到Publii,然後同步。最後幾個提醒事項。寫這篇,主要是寫給不會寫程式,或是自己就是工程師,但都想要有一個自己的網站。

IntersectionObserver:下篇-實際應用 lazyload、進場效果、無限捲動

本篇大綱:使用資源。lazy load 延遲載入(圖片、影片)、一個神奇的狀況(坑?)。進場效果。無限捲動。原始碼、Demo。接續上一篇的IntersectionObserver基本使用(以下簡稱IO),本篇來寫三個實際應用。本篇的無限滾動,是像FB那樣子,頁面每捲到底,就會多載入一張卡片進來。

IntersectionObserver:上篇-基本介紹及使用

本篇大綱:IntersectionObserver?拿超商的歡迎光臨來說明。IO使用3步驟:1 建立觀察器(observer)、2 指定觀察器要觀察的獵物(entry)、3 當獵物 進入(true) / 離開(false) 觀察器視窗的範圍,觀察器就執行callback。原始碼。參考資源。

Vue.js 用computed跟filter做一個簡易搜尋功能

本篇大綱:Demo說明。抓RSS的XML,並轉成JSON。RSS to JSON 線上工具。Google Apps Script寫一個XML to JSON的function。Computed + filter執行搜尋功能。原始碼、Demo。抓RSS的XML比較簡單,比較麻煩的是要把XML轉成JSON來使用。