文章
AI
Analytics
- GA 報表：電子商務 內部宣傳 報表
- GA 工具 Google Analytics Debugger 介紹及使用
- GA 自訂維度的應用 分類之下的文章成效
- GA：User-ID 功能 設定及報表檢視
- GA：啟用 Web + App 報表
- GA3、GA4 的 6 個不同之處
- GA4 事件：GA3 事件轉移，及如何查看完整事件報表
- Google Analytics 事件追蹤設定
- Google Analytics 加上 AI
- Google Analytics 用戶計時 / User Timings
- 如果頁面有 id=”ga”，用 gtag 埋 Google Analytics 會收不到流量
- 用 GA Spreadsheet Add-on 製作網站訪客人數功能
API
- GitHub API：取 Issue、Comments
- GitHub API：建立 Issue、Comment – API、Personal access tokens
- GitHub API：建立 Issue、Comment – GitHub App
- Imgur API：upload, load 上傳、讀取 心得筆記
- Instagram Embedding 抓 iframe 高度及 3 種大小圖片
- Instagram 基本顯示 API ：抓取公開 IG 資料、相片、影片
- Plyr 播放器使用筆記：控制項、取值、事件、改樣式、外部平台影片
- Video.js 使用筆記：中文介面、取值、事件、改樣式
- Web Workers 調用 API，減輕主執行緒負擔
- WebSocket 基本介紹及使用筆記
- 切詞工具結巴 Jeiba 優化標籤關鍵字
- 如何用 Mockoon 快速建立 Mock APIs Server
- 如何用 Postman Mock Server 快速建立 API Server
- 接氣象局 API、跨網域 AJAX 資料
- 用 Google Apps Script 寫一個 LINE 登入功能：上篇 – 前置作業
- 用 Google Apps Script 寫一個 LINE 登入功能：下篇 – 三大步驟
- 用 Performance API 檢測檔案讀取時間
Apps Script
Bot
- LIFF v2 基本使用筆記及範例
- LINE Bot：X-Line-Signature 簽名驗證 範例
- LINE Bot：用 Google Apps Script 建立簡易網站監測機器人
- LINE Notify：用 Google Apps Script 建立簡易網站監測機器人
- Slack 通知功能 可互動
- Slack 通知功能 純靜態
- 受保護的內容: Telegram Bot 學習筆記 – 1：用 GCP + Node.js 接收 / 推播訊息
- 受保護的內容: Telegram Bot 學習筆記 – 2：用 Google Apps Script 接收 / 推播訊息
- 受保護的內容: Telegram Bot 學習筆記 – 3：鍵盤 Keyboard
- 受保護的內容: Telegram Bot 學習筆記 – 4：命令列 Commands
- 受保護的內容: Telegram Bot 學習筆記 – 5：取得使用者大頭照
- 受保護的內容: Telegram Bot 學習筆記 – 6：Google 表單提交時收到通知
- 受保護的內容: Telegram Login Widget，製作用 Telegram 登入功能
- 在網頁上嵌入Telegram 頻道廣播訊息
- 受保護的內容: 用 Google Apps Script 製作 LINE ChatGPT 機器人
- 用 LINE Bot API 建立 LINE@ 圖文選單
- 用 LINE Push Messaging API 推播每日氣象預報
Firebase
- Firebase Authentication 第三方登入 – Google、FB
- Firebase Authentication 第三方登入 – GitHub
- Firebase Cloud Firestore V8 常用功能筆記
- Firebase Cloud Firestore V9 常用功能筆記
- Firebase Cloud Functions 基本使用筆記
- Firebase Dynamic Links Analytics API 取得短網址分析資料
- Firebase Dynamic Links API 做一個自己的縮網址生成器
- Firebase Dynamic Links 從後台建立縮網址
- Firebase Performance 使用筆記
- Firebase Realtime Database 常用功能筆記
- 用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼
Forms
Front-End
- 2 種快速安裝、使用 Tailwind CSS 的方式
- Auth0 Universal Login，做一個自己的會員註冊、登入功能
- CLI 學習筆記
- Color Thief 找出圖片裡的顏色
- CryptoJS 用前端加密、解密
- CustomEvent 客製一個 addEventListener
- Day.js 計算最近7天、上週、上個月的日期
- DOMPurify，增加網站對 XSS 攻擊的防護力
- File API 客製上傳檔案按鈕 / input file
- GitHub API：取 Issue、Comments
- GitHub API：建立 Issue、Comment – API、Personal access tokens
- GitHub API：建立 Issue、Comment – GitHub App
- GitLab Pages：3 + 3 個步驟讓 GitLab 專案產生靜態頁
- HEIC 格式的圖片怎麼辦？使用 heic2any.js 轉換為 JPEG 或 PNG
- Hugo 學習筆記
- Imgur API：upload, load 上傳、讀取 心得筆記
- Instagram Embedding 抓 iframe 高度及 3 種大小圖片
- Instagram oEmbed 嵌入 IG 貼文
- Instagram 基本顯示 API ：抓取公開 IG 資料、相片、影片
- IntersectionObserver：上篇 – 基本介紹及使用
- IntersectionObserver：下篇 – 實際應用 lazyload、進場效果、無限捲動
- JavaScript 載入方式 defer、async
- Javascript，XML 轉 JSON
- MacBook 用隨身碟執行 Windows 10：Windows To Go、WinToUSB
- mailto: 點擊連結 開啟寄送 email
- Markdown 常用語法筆記
- MongoDB 學習筆記 – Mac 上用 Docker 安裝 MongoDB Community
- MongoDB 學習筆記 – MongoDB Shell：CRUD 中的 Delete、Update
- MongoDB 學習筆記 – MongoDB Shell：CRUD 中的 Read
- MongoDB 學習筆記 – 用 Node.js 執行 CRUD
- Netlify + GitLab 建一個免費靜態網站
- OSM + Leaflet 學習筆記 1：建地圖、marker、事件、換圖層
- OSM + Leaflet 學習筆記 2：移動中心點、抓目前地點
- OSM + Leaflet 學習筆記 3：定位、全螢幕、小地圖、列印、客製選單
- Plyr 播放器使用筆記：控制項、取值、事件、改樣式、外部平台影片
- postMessage：主頁、iframe 頁可互相傳值
- Promise、Async、Await 基本使用筆記
- SpeechSynthesisUtterance 讓瀏覽器說話
- TestCafe 學習筆記 – 1：自動化測試會員登入
- TestCafe 學習筆記 – 2：常用設定及功能
- Video.js 使用筆記：中文介面、取值、事件、改樣式
- VS Code Pets，一邊寫程式一邊養隻療癒小寵物吧
- Web Workers 調用 API，減輕主執行緒負擔
- WebSocket 基本介紹及使用筆記
- Windows 上，本機用 Docker 安裝 GitLab
- Word、Excel 合併列印功能使用筆記
- YAML 基本使用筆記
- 一些有趣的 CSS 選擇器
- 一個簡單的卡片樣式 Simple Card UI
- 不會寫程式，也能自己架一個免費網站：Publii + GitHub Pages
- 使用 Cookie 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第一篇）
- 使用 IndexedDB 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第三篇）
- 使用 Local Storage 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第二篇）
- 使用 Manifest 創建你的 PWA – 基礎 Progressive Web App 教學
- 使用 Workbox CLI 快速建立 Service Worker – 基礎 Progressive Web App 教學
- 使用 Workbox 打造自訂 PWA 快取策略 – 基礎 Progressive Web App 教學
- 使用 Workbox 管理快取參數 – 基礎 Progressive Web App 教學
- 像 Medium 的漸近式圖片加載
- 切詞工具結巴 Jeiba 優化標籤關鍵字
- 前端 POST 檔案後，用 Node.js 把檔案傳上 FTP
- 如何使用 PWA 技術打造優秀的 Web App？
- 如何使用 Vivus.js 製作輕量快速 SVG 動畫
- 如何用 Mockoon 快速建立 Mock APIs Server
- 如何用 Netlify CMS 製作電子報生成器
- 如何用 Postman Mock Server 快速建立 API Server
- 實現 Web Push 通知 – 基礎 Progressive Web App 教學
- 幾個方便開發的 Console API 應用
- 從使用者輸入網址，到瀏覽器呈現出來，經過了哪些過程？
- 拿 Trello 當資料庫 建一個店家清單 – 上篇：Trello 基本使用
- 接氣象局 API、跨網域 AJAX 資料
- 改變 iframe src 時不增加瀏覽歷史紀錄
- 滿版圖片背景、影音背景
- 漸層色按鈕 Hover 效果
- 用 CSS :target 製作頁籤、手風琴功能
- 用 Day.js 把秒數轉換為時間
- 用 Docker 安裝 Verdaccio，建立本機私有 npm
- 用 Gitea 在本機架 Git Server 功能
- 用 Google Apps Script 寫一個 LINE 登入功能：上篇 – 前置作業
- 用 Google Apps Script 寫一個 LINE 登入功能：下篇 – 三大步驟
- 用 HTML 的 capture 屬性，開啟手機鏡頭進行拍照、錄影
- 用 JavaScript 做一個 Tooltips 功能
- 用 JavaScript 將 JSON 轉為 CSV 檔下載
- 用 JavaScript 監聽頁面 / 頁籤被關閉的事件
- 用 Microsoft Clarity 網站分析工具，觀察使用者行為
- 用 OneDev 在本機架 Git Server 功能
- 用 Performance API 檢測檔案讀取時間
- 用 Postman Integrations，自動備份 Postman Collection
- 用 Vue.js 製作圖片版 EDM 生成器
- 用原生 JavaScript 做一個簡單的抽獎功能頁面
- 用原生 JavaScript 寫一組社群分享按鈕（FB、LINE、Twitter）
- 用原生 JS 做一個簡單的手風琴 Accordion / Collapse 功能
- 用純 CSS 寫的網頁預覽效果
- 第 100 篇：起點、轉折、then()
- 簡單易上手！使用 Pusher 實現 Web Push 通知 – 基礎 Progressive Web App 教學
- 簡單的網頁截圖功能 – html2canvas、Canvas2image
- 簡單的網頁截圖功能 – DOM to Image
- 表單驗證：中文姓名、身分證、手機條碼、生日、信箱、手機、選擇縣市
- 製作 RWD email 工具：MJML，如何使用及注意事項
- 製作一個 Hugo + Tailwind CSS 初始檔
- 開源免費，在 Netlify 上安裝 Primo CMS，輕鬆製作網頁
- Firebase Authentication 第三方登入 – Google、FB
- Firebase Authentication 第三方登入 – GitHub
- Firebase Cloud Firestore V8 常用功能筆記
- Firebase Cloud Firestore V9 常用功能筆記
- Firebase Cloud Functions 基本使用筆記
- Firebase Dynamic Links Analytics API 取得短網址分析資料
- Firebase Dynamic Links API 做一個自己的縮網址生成器
- Firebase Dynamic Links 從後台建立縮網址
- Firebase Performance 使用筆記
- Firebase Realtime Database 常用功能筆記
- GA 報表：電子商務 內部宣傳 報表
- GA 工具 Google Analytics Debugger 介紹及使用
- GA 自訂維度的應用 分類之下的文章成效
- GA：User-ID 功能 設定及報表檢視
- GA：啟用 Web + App 報表
- GA3、GA4 的 6 個不同之處
- GA4 事件：GA3 事件轉移，及如何查看完整事件報表
- Google Analytics 事件追蹤設定
- Google Analytics 加上 AI
- Google Analytics 用戶計時 / User Timings
- Google Apps Script 基本使用：跨網域 AJAX、接 Firebase
- Google Apps Script 抓 RSS 資料
- Google Apps Script 讀寫 Cloud Firestore 資料
- Google Maps API 學習筆記 – 1：地圖、標記、客製樣式
- Google Maps API 學習筆記 – 2：在地圖上畫個日本結界
- Google Maps API 學習筆記 – 3：用熱圖 / Heat map 製作全台 12 小時雨量分佈圖
- Google Maps API 學習筆記 – 4：Place API 自動完成地址、地點評論摘要
- Google Maps API 學習筆記 – 5：抓目前位置、計算到各點距離
- Google Maps API 學習筆記 – 6：畫新冠肺炎分佈圖
- Google Material Design 表單標籤效果
- Google Optimize A/B Testing 使用筆記
- Google Sheets API，在 Google Apps Script 上的好用部份
- Google Sheets 略過空白格重整資料
- Google Top Heavy 演算法
- Google 表單 用網址改變題目預設值
- Google 表單，提交後系統自動寄送回覆通知 email
- Google 表單，輸入 ID 後自動帶入其它欄位資料
- Youtube Iframe API 常用功能
- 如何用 Google Sheets / Excel 當作資料庫
- 如果頁面有 id=”ga”，用 gtag 埋 Google Analytics 會收不到流量
- 完全客製 Google 表單，美化表單樣式
- 無程式碼，如何用 Make，把 Google Forms 當作發送 LINE Notify 的後台
- 用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼
- 用 Firebase、Google Apps Script、GTM 自己做一個讚按鈕
- 用 GA Spreadsheet Add-on 製作網站訪客人數功能
- 用 GCP 建立 Cloud Functions
- 用 Google Apps Script 取得 Google Sheets / Excel 資料
- 用 Google Apps Script，定時從 GitHub、GitLab 取出備份檔並匯入 Postman
- 用 Google Apps Script，定期備份 Postman
- 用 Google Cloud Platform / GCP 建 Node.js 網站
- 用 Google Sheets 取得電子報中點擊回覆結果
- 用 Google Sheets 紀錄表單資料
- 用 reCAPTCHA v2 來做非機器人驗證
- 用 reCAPTCHA v3 來做非機器人驗證
LINE
Maps
Others
PWA
- 使用 Manifest 創建你的 PWA – 基礎 Progressive Web App 教學
- 使用 Workbox CLI 快速建立 Service Worker – 基礎 Progressive Web App 教學
- 使用 Workbox 打造自訂 PWA 快取策略 – 基礎 Progressive Web App 教學
- 使用 Workbox 管理快取參數 – 基礎 Progressive Web App 教學
- 如何使用 PWA 技術打造優秀的 Web App？
- 實現 Web Push 通知 – 基礎 Progressive Web App 教學
- 簡單易上手！使用 Pusher 實現 Web Push 通知 – 基礎 Progressive Web App 教學
Sheets
Telegram
- 受保護的內容: Telegram Bot 學習筆記 – 1：用 GCP + Node.js 接收 / 推播訊息
- 受保護的內容: Telegram Bot 學習筆記 – 2：用 Google Apps Script 接收 / 推播訊息
- 受保護的內容: Telegram Bot 學習筆記 – 3：鍵盤 Keyboard
- 受保護的內容: Telegram Bot 學習筆記 – 4：命令列 Commands
- 受保護的內容: Telegram Bot 學習筆記 – 5：取得使用者大頭照
- 受保護的內容: Telegram Bot 學習筆記 – 6：Google 表單提交時收到通知
- 受保護的內容: Telegram Login Widget，製作用 Telegram 登入功能
- 在網頁上嵌入Telegram 頻道廣播訊息
Vue
- D3.js、Vue 畫一個台灣地圖
- Nuxt.js 一些好用的設定
- Nuxt.js 引用 Firebase SDK
- Vue 3、Tailwind CSS 3、esbuild、rollup.js 開發初始檔
- Vue CLI 安裝 Tailwind CSS
- Vue Transitions 製作簡單的 Carousel / Slider / 輪播功能
- Vue.js 3 Composition API 基本學習筆記-1：Ref、Props、watch、生命週期
- Vue.js 3 Composition API 基本學習筆記-2：fetch data、export / import
- Vue.js Transition 中用多個 v-if、v-show
- Vue.js 用 computed 跟 filter 做一個簡易搜尋功能
- 拿 Trello 當資料庫 建一個店家清單 – 下篇：建立清單頁面
- 用 Storybook 做一個 UI 整理集
- 用 Vue CLI 3 + Vuetify 製作說明頁面
- 用 Vue.js 製作圖片版 EDM 生成器
- 用 VuePress 製作說明文件頁面 – 1：安裝
- 用 VuePress 製作說明文件頁面 – 2：config.js 基本設定
- 用 VuePress 製作說明文件頁面 – 3：導覽列
- 用 VuePress 製作說明文件頁面 – 4：佈景主題、外掛
- 用 VuePress 製作說明文件頁面 – 5：改樣式、加元件
- 用 VuePress 製作說明文件頁面 – 6：部署
WordPress
- Ubuntu 安裝 WordPress – 1：VirtualBox、Ubuntu 20.04
- Ubuntu 安裝 WordPress – 2：Webmin、Apache、MySQL、Hosts
- Ubuntu 安裝 WordPress – 3：VM、資料庫權限、PHP、WordPress
- WordPress SEO 有幫助的 2 個外掛
- WordPress SEO 有幫助的 3 + 4 個外掛
- WordPress 基本介紹
- WordPress 好用的會員相關外掛：登入安全性、會員系統
- WordPress：Site Kit by Google 介紹及使用
- WordPress：埋 Google AdSense 廣告
- 免費建立一個自己的網站 – WordPress + Cloudflare Pages
- 如何用 MAMP 在本機安裝 WordPress
- 搭配 WooCommerce 的 2 個好用外掛：客製訂單、客製報表
- 用 Auth0 在 WordPress 上做會員註冊、登入功能
- 用原生 JavaScript 寫一組社群分享按鈕（FB、LINE、Twitter）
Recent Comments