使用 Git 佈署 WordPress theme，不需再用 FTP 上傳了

痛點 每次要更新 WordPress theme 時，都要使用 FTP 上傳，相當麻煩。雖然之前也有使用一些工 …

Burpee 4 minutes

Burpee 4 minutes 網址：https://burpee.chiayilai.com 最近開始每天 …

自己刻超簡單 React toast notice 功能

Toast notice 功能 讓使用者自己做了什麼動作，產生的結果是什麼，是很重要的事。在 SPA 中，因為 …

加入 Google Sign in 和 Login with Facebook 在 React + Django 專案上

開發流程 先到 Google Cloud Platform 和 Facebook for Developers …

極簡記帳 mooney accounting app

官方網址：https://mooney.chiayilai.com/ 記帳，可以檢視自己的生活 寫日記如果沒有 …

使用 Docker 來建立 PHP+Apache 和 WordPress 開發環境

全部統一使用 Docker 過去都是使用 MAMP 或 XAMPP 來建立本機的 PHP 或 WordPres …

JavaScript 最好用的一招 – toggle class

原理 點擊按鈕，靠著控制指定目標的 class 名稱，搭配 CSS 來做到動態效果。可以用來做選單開關，樣式變 …

超級簡單的純 CSS 圖片輪播

Pure CSS images slider – fade and scale effects 用 …

單純使用 npm 來編譯 Sass 和 JS

Be a minimalist, I like clean code. 之前都是用 gulp 來處理 Sass …

使用 CSS grid 來製作圖片展示，超簡單！

之前都用 Bootstrap 的 grid 來處理，但是遇到需要有 2 倍寬或 2 倍高的區塊就很難處理，這時 …

製作 WordPress 網站我所用到的知識與資源

WordPress – 安裝與修改版型(基礎的 PHP 與 MySQL or MariaDB 知識 …

Loading by pure CSS

用 :before 和 :after 產生兩個圓形一左一右水平移動。 圓形用 absolute 定位，.loa …

網頁版日曆

主要分成三個區塊，黑色的襯底板，紅色的頭板顯示月份，白色的紙張顯示日期。 對齊的方式因為都是單行，直接用 te …

跟著 hover 移動變化的選單橫桿

加入一個空標籤當為移動橫桿， 用 absolute 來定位 抓取橫桿要移動到的目標的寬度與 X 坐標，帶入給橫 …

簡單明瞭的返回上一頁 JS 寫法

window.history.back(); window.history.go(-1); // 上面兩種用法 …

Radio by pure CSS

將原本的 radio visibility: hidden, label 標籤做底部區域， label:aft …

Checkbox by pure CSS

將原本的 checkbox visibility: hidden,label 標籤做底部區域，label:af …

自己刻最簡單高效能的圖片輪播 very simple slide show in vanilla JavaScript

圖片輪播是最常見的網頁元素之一，不用插件，也不需要 jQuery，可設定幾秒換下一張，滑鼠移上圖片時會停止換圖 …

image 各種型態轉換(blob, dataURL, canvas) in JavaScript

blob 轉成 dataURL blob 和 file 都可以使用，從 blob 讀取資料的唯一方式就是使用 …

功能開關按鈕 switch toggle button by pure CSS

在設定頁面常用的功能，將 checkbox visbility: hidden,label 標籤當底部區域，l …

簡單說 preventDefault(), stopPropagation(), return false 使用時機

preventDefault(): 預防作用的元素預設事件發生，如果只是要預防 <a href=”#”& …

使用 CSS 的 clip 屬性來達到填滿顏色效果

clip 屬性類似遮罩的概念，設定 top, right, bottom, left 四個位置的值，來達到要顯 …

向上捲動時，讓 header 出現；向下捲動時，讓 header 消失。

當使用者在瀏覽頁面內容時，header 佔的空間就減少了主內容的空間，所以我們可以設定當使用者向下捲動時，是在 …

表單簡易驗證，檢查空的輸入框，並出現提示

結合 bootstrap 的 tooltip，在使用者按下確定按鈕時，判斷表單是否有空的輸入框，並提示使用者輸 …

側邊欄開關

不用插件，少於 10 行的 JS 語法，輕鬆完成視窗外的側邊欄寫法。 用 body 有無 class=&#82 …