LINE Notify 是一個官方帳號
你可以在任何 Line 群組中加入 Line Notify
並運用它來進行通知相關的服務

底下介紹如何搭配 Google Apps Script 和 Google Sheets
來完成一個簡單的自動排程通知服務：

• 取得 Line Notify 的存取權杖
• 建立 Google Apps Script
• 建立 Google Sheets

一些原因把之前小專作品的網址給關掉了
但我覺得還是可以用另一種形式展示
像是放到 Blog 上面 ヽ(✿ ﾟ ▽ ﾟ)ノ

底下聊聊這段悠久的歷史軌跡吧：

• 緣起
• 設計構想
• 實作成果

程式開發的筆電究竟需要什麼樣的規格？
或許每個人心中都有不同的答案
還有不同的預算 (￣▽￣)ノ

底下就來聊聊幾款我開發用過的筆電：

• Lenovo IdeaPad 110S - 11 吋
• Macbook Air i5 2013 - 11 吋
• Macbook Pro i5 2017 - 13 吋
• Macbook Air M1 2021 - 13 吋

Docker 是一個虛擬化技術
可以根據映像檔製作獨立的容器來模擬特定環境

很多人認識 docker 是為了部署作業
不過除了部署還有很多的學習價值
像是用來認識不同的作業系統與環境

底下就來說明 Docker 的基本使用方式吧！

• 用 homebrew 來安裝 Docker
• Docker 中的 image 和 container
• Docker 的基本指令
• 替 React 專案撰寫 Dockerfile

這個應用場境是什麼時候會出現呢？
大概是製作手機版型的網頁時會出現…

實現的方法具體來說很簡單
只需要用到兩個 CSS 的特性：

• flex
• calc

很常見的一個應用場景
就是讓用戶完成多步驟的表單頁面並在最後送出
中間的過程中用戶可以自由返回上一頁
並對尚未提交的內容進行修改

之前有寫一篇前端路由的導航狀態
是講前端如何在不同的頁面之間傳遞數據的方法
雖然可以實現這個功能
但相當不方便
因為需要在每一頁重複設定一樣的方法將數據帶來帶去
這種情況如果將狀態統一管理就會輕鬆很多

狀態統一管理最常聽到的就是 Redux
然而在 React 裡頭還有 Context 這個方法
如果要說這兩個的差別在哪裡
我想 Context 更符合 React 的元件思維
也特別適合簡單的應用場景

所以這篇主要講 React 的 useContext：

• 用 createContext 方法建立 Provider 元件
• 在前端路由的 Layout 置放 Provider 元件
• 在需要使用共同狀態的步驟頁面使用 useContext

最近發佈了一個套件 date-reminder

起因是為了可以讓部落格在特別的節日發出祝賀詞
但因為自己是懶人…
所以不可能自己在每個節日前手動更新網站
於是乎上網找了可以提醒的套件
結果…沒有！！！

就手動做了一個套件順便上傳

底下講講發佈 npm 時我的遇到的問題與想法
還有首次製作 npm 時可以特別留意的小細節：

• 撰寫 README.md
• 發佈 npm 時指定產品代碼與排除原始代碼
• Webpack 打包時兼顧 Script Include 與 Script Module

活動網頁和一般網頁差在哪裡呢?
答案是 登登登登登
許多炫炮動畫

為了製作炫砲的動畫
開發者需要什麼製作工具呢
底下就列出幾種常見的套件給大家做為參考：

• animate.css
• aos.js
• swiper.js
• remodal.js
• parallax.js

心血來潮把部落格給大翻新
這邊記錄一下到底發生了哪些事情：

• 更換頭像(Stable Diffusion)
• 更換三級域名(Github)
• 更新 Google 服務(Google Search Console / Google Analytics)
• 客製化部落格版面(Next Theme)
• 優化網站速度(PageSpeed Insights)

之前介紹過 Data URL
而這篇文章將補充一個常見的應用場景：圖片預覽

先說明實現圖片預覽的主要流程：

• 根據 input 元素 來上傳圖片
• 根據 FileReader 物件來讀取圖片的 Data URL
• 根據 Data URL 將圖片顯示在畫面上