封存

2023

10/15 Node.js 實戰密技大統整（套件運用、金流、第三方登入、雲服務、Docker） development 10/14 在伺服器上建置 Traefik Proxy 反向代理伺服器 development 10/11 Portainer 環境建置 - Docker 伺服器端最易上手的 GUI 管理工具 development 10/08 在 Ubuntu 上加入 Docker 環境並部署 Node.js 專案 development 10/07 在 Ubuntu 上加入 Docker 環境並部署 Node.js 專案 development 10/04 使用 GitHub Action 部署 Node.js 專案至虛擬主機上 development 10/03 Ubuntu 虛擬主機部署 Node.js 服務，使用 PM2 服務管理 development 09/29 Firebase Storage 申請設定以及 Node.js 串接方式 development 09/28 AWS S3 申請設定以及 Node.js 串接方式 development 09/26 藍新金流申請以及串接方式 development

2022

03/10 JS 中的物件迴圈手法 development 01/10 安裝 nvm 環境，Node.js 開發者必學（Windows、Mac 均適用） development

2021

10/04 一個工具，帶你完整認識 CSS Animation development 09/28 Mac OSX 截圖全說明（單一視窗、全螢幕、重設截圖路徑、Touch Bar） development 09/22 CSS 變數必學知識 - 宣告、繼承及 Bootstrap 中的運用技巧 development 09/17 履歷避雷技巧 - 技能描述篇 development 09/14 JavaScript Console 運用技巧 - 8 招讓你除錯更高效 development 09/11 CSS 選取器(基本篇) - CSS Selector development 07/07 Vue 3 新手夏令營 development 06/14 為什麼選擇使用 Mac 來進行開發 life 06/13 Mac 擷取系統音效 - 直播、錄影均適用 life 06/03 NODE.JS 開 API 不求人 - 教學影片 development 04/11 VSCode Prettier 整合 ESLint 自動排版 development

2020

12/15 Vue3 中使用 Event Bus development 12/13 12 個前端愛用的 VSCode 擴充套件 development 10/16 Async function / Await 深度介紹 development 10/13 VSCode JS 註解就是你的文件 development 10/12 純 CSS 毛玻璃特效 - backdrop-filter 屬性介紹 development 10/11 新手前端也不該犯的錯：圖片變形 development 10/10 Bootstrap 5 格線的運作原理 development 10/09 怎樣也不會失手的 Bootstrap 格線運用技巧 development 10/08 手把手自訂你的 Bootstrap 樣式 development 10/05 JS - for 迴圈與 forEach 有什麼不同 development 10/04 JS 常見陣列方法 [push(), unshift(), pop(), shift(), splice(), reverse(), concat(), include(), indexOf(), join()] development 10/03 AJAX 完整解說系列：輕鬆搞懂 HTTP 狀態碼（HTTP Status Code） development 10/02 AJAX 完整解說系列：使用 Chrome Devtools 檢視請求及回應 development 10/01 AJAX 完整解說系列：新增、更新、刪除（POST/PATCH/DELETE） development 09/30 AJAX 完整解說系列：基礎觀念 development 09/29 箭頭函式常見陷阱題 development 09/28 透過練習題，摸熟 This 的運作 development 09/27 學好 this 前，先搞清楚 this 做什麼 development 09/26 閉包，原來這就是閉包啊！ development 09/25 Chrome Console 中的 undefined 到底是哪來的？ development 09/24 JavaScript 一級函式 （First Class Functions） development 09/23 JS 記憶體釋放機制及驗證 development 09/22 呼叫函式時，到底有多少個參數 / 變數可供使用？ development 09/22 讓我們一起到達終點！超過 60% 完課率的直播課程 - JavaScript 作品實戰直播班 development 09/21 JS 物件名詞解釋及常見觀念問題 development 09/20 JS 加不加分號差在哪？ development 09/19 開發總是沒問題，上線老是各種錯 development 09/18 JavaScript 利用表達式優化你的程式碼 development 09/17 JavaScript 表達式觀念及運用 - JS Expression development 09/16 JavaScript 開發中常見錯誤解決辦法 development 03/25 完全解析 JavaScript import、export development 03/18 開公司的流程及雷點分享 business 03/08 Flex 空間計算規則 css 03/01 爬蟲、E2E 測試兩相宜的好工具 - Puppeteer development 02/21 CSS Border 運用技巧（手繪框線、三角形、空間運用） css 02/16 JavaScript Promise 全介紹 development 02/09 單元測試 - 非同步及 Ajax development 02/02 十分鐘上手前端單元測試 - 使用 Jest development 01/04 前端開發者，圖片常犯的五個粗心錯誤 development

2019

12/22 CSS 技巧：精簡語法操作暗色主題 - CSS Dark Mode css 12/01 一分鐘切換成中文版 VSCode（完整圖文版） development 11/23 十分鐘快速掌握 Markdown development 09/27 鐵人賽：獲利優先，將你的資金塊狀化 ironman 09/26 鐵人賽：有土斯有財？還是緊握著負債 ironman 09/25 鐵人賽：超簡易記帳 - 輕鬆規劃你的理財目標 ironman 09/24 鐵人賽：iPhone 11 Pro Max 心得文 ironman 09/23 鐵人賽：從哪邊學習投資？ ironman 09/22 鐵人賽：充滿未來希望的成長公式 ironman 09/21 鐵人賽：樂觀、悲觀 - 財務的思維改變 ironman 09/20 鐵人賽：改變思維的三個重要技能 ironman 09/19 鐵人賽：放棄十年本科經歷，投入網頁開發領域 ironman 09/18 鐵人賽：初入程式語言，沒想到是 JavaScript 的親戚啊 ironman 09/17 鐵人賽：從設計轉開發者的思維改變 ironman 09/16 鐵人賽：你的願景是什麼？ ironman 04/25 自建 Name Server dns 04/24 免費申請屬於自己的 SSL 憑證(手把手帶你加上 https 綠色鎖頭) ssl 03/21 JavaScript This 系列文：this 為什麼指向 window javascript 03/18 JavaScript This 系列文：this 與物件的關係 javascript

2018

11/13 鐵人賽：網頁設計 - 設計的過去、現在、未來 design 11/12 鐵人賽：網頁設計 - 平面設計師轉設計前端的經驗分享 design 11/11 鐵人賽：網頁設計 - 設計「素材」資源 design 11/10 鐵人賽：網頁設計 - 設計「參考」資源 design 11/09 鐵人賽：網頁設計 - 設計師與開發者的溝通工具 design 11/08 鐵人賽：網頁設計 - 實際透過工具測量用戶行為 design 11/07 鐵人賽：網頁設計 - 網頁設計規範 - 通用視覺效果 design 11/06 鐵人賽：網頁設計 - 網頁設計規範 - 定義不斷出現的網頁元素 design 11/05 鐵人賽：網頁設計 - 網頁設計規範 - 一致性的距離（計算方法、水平、垂直） design 11/04 鐵人賽：網頁設計 - 網頁設計規範 - 參考來源 design 11/03 鐵人賽：網頁設計 - 版面視覺動線配置(2) design 11/02 鐵人賽：網頁設計 - 版面視覺動線配置(1) design 11/01 鐵人賽：網頁設計 - 響應式圖片選用技巧 design 10/31 鐵人賽：網頁設計 - Icon fonts 的常見資源 design 10/30 鐵人賽：網頁設計 - SVG 輸出注意事項 design 10/29 鐵人賽：網頁設計 - 圖片壓縮方法 design 10/28 鐵人賽：網頁設計 - 圖片格式的運用 design 10/27 鐵人賽：網頁設計 - 文字大小、行高與空間上的關係 design 10/26 鐵人賽：網頁設計 - 網路字體運用 design 10/25 鐵人賽：系統字體介紹 design 10/24 鐵人賽：色彩運用(3) - 按鈕的配色 design 10/23 鐵人賽：色彩運用(2) - 連結的配色 design 10/22 鐵人賽：色彩運用(1) - 你的網頁文字是否足夠清楚呢？ design 10/21 鐵人賽：網頁設計色彩配置概念 design 10/20 鐵人賽：文件、規範參考 - Material Design design 10/19 鐵人賽：網頁設計常用格線系統(下) design 10/18 鐵人賽：網頁設計常用格線系統(上) design 10/17 鐵人賽：設計師思維及工程師思維 design 10/16 鐵人賽：別使用平面繪圖軟體繪製 UI 設計 design 10/15 鐵人賽：前端「設計」聖光之路 design 07/27 Github Pages 自訂網域免費升級 https design 05/25 老同學來相找，一同轉行做 UI 設計師 design 02/12 Github 中的 ssh、https 路徑有什麼差異？ - 如何設定 Github SSH 金鑰 git 01/02 鐵人賽：邁向 JavaScript 的勇者 javascript 01/01 鐵人賽：透過 ESLint 學習 JavaScript ES6 javascript

2017

12/31 鐵人賽：ES6 建構式語法糖 javascript 12/30 鐵人賽：JavaScript Await 與 Async javascript 12/29 鐵人賽：使用 Promise 處理非同步 javascript 12/28 鐵人賽：ES6 原生 Fetch 遠端資料方法 javascript 12/27 鐵人賽：常用陣列方法 javascript 12/26 鐵人賽：ES6 陣列方法 javascript 12/25 鐵人賽：ES6 解構賦值 javascript 12/24 鐵人賽：JavaScript 展開與其餘 javascript 12/23 鐵人賽：ES6 的縮寫概念 javascript 12/22 鐵人賽：JavaScript Template String 樣板字串 javascript 12/21 鐵人賽：箭頭函式 (Arrow functions) javascript 12/20 鐵人賽：ES6 開始的新生活 let, const javascript 12/19 鐵人賽：JavaScript 建構式與原型 javascript 12/18 鐵人賽：JavaScript 建構式 javascript 12/17 鐵人賽：JavaScript 的原型繼承 javascript 12/16 鐵人賽：JavaScript Function 與 Hoisting javascript 12/15 鐵人賽：JavaScript 的嚴格模式 "use strict" javascript 12/14 鐵人賽：JavaScript 函式與參數 javascript 12/13 鐵人賽：另一種方式介紹 JavaScript 閉包 javascript 12/12 鐵人賽：JavaScript 的 this 到底是誰？ javascript 12/11 鐵人賽：JavaScript 的文法學 javascript 12/10 鐵人賽：JavaScript 物件的連連看!? 兩個物件的值居然會一樣 javascript 12/09 鐵人賽：JavaScript 就是一堆物件的概念 javascript 12/08 鐵人賽：動態型別的 JavaScript javascript 12/07 鐵人賽：一次只能做一件事情的 JavaScript javascript 12/06 鐵人賽：JavaScript 變數的宣告與他的作用域 javascript 12/05 鐵人賽：執行環境與堆疊 javascript 12/04 鐵人賽：邁向 JavaScript 勇者之路 - 開始 javascript 11/09 在 VSCode 啟用程式碼規範工具 (ESLint) tool 07/27 從設計轉職工程師的原因及過程 life 07/21 圖解：CSS Flex 屬性一點也不難 css 06/29 JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()] javascript 05/25 JavaScript ES6 Promise life 05/24 CSS3 Grid Layout life 04/14 剛出社會要存錢嗎？ life 03/22 CSS Grid 屬性介紹 css 03/03 VSCode 快速推坑介紹文 javascript 03/02 Javascript Promise 範例 javascript

2016

12/30 鐵人賽 30 - CSS 鐵人賽的結束與接下來的研究 css 12/29 鐵人賽 29 - CSS 實戰小技巧 - 不使用 important 的高優先值技巧 css 12/28 鐵人賽 28 - 實戰小技巧 - iOS 表單的使用者體驗優化 css 12/27 鐵人賽 27 - CSS 框架自幹心得 - 失敗三次的框架建構經驗 css 12/26 鐵人賽 26 - 實戰心法 - 應避免的 Sass @extend css 12/25 鐵人賽 25 - 實戰心法 - Sass Map 快出產出大量樣式 css 12/24 鐵人賽 24 - 實戰心法 - 自幹 Grid System css 12/23 鐵人賽 23 - 實戰心法 - 常見的垂直置中手法 css 12/22 鐵人賽 22 - 實戰心法 - 經常使用，但卻容易被忽視的 CSS css 12/21 鐵人賽 21 - Bootstrap 透過 Sass 新增自定義元件 css 12/20 鐵人賽 20 - Sass 資料夾結構 css 12/19 鐵人賽 19 - Bootstrap 一次看懂元件的使用組合 css 12/18 鐵人賽 18 - Bootstrap 元件分類概觀 (content, container) css 12/17 鐵人賽 17 - Bootstrap 自定義樣式超簡單 css 12/16 鐵人賽 16 - 將 Bootstrap 導入自動化流程 css 12/15 鐵人賽 15 - 為什麼 Boostrap css 12/14 鐵人賽 14 - Gulp - Webserver css 12/13 鐵人賽 13 - Gulp - 在本地端製作 Icon Fonts css 12/12 鐵人賽 12 - Gulp - 定義預設開發環境 css 12/11 鐵人賽 11 - Gulp - 透過 PostCSS 加入 CSS Prefix css 12/10 鐵人賽 10 - Gulp 與 Sass 開發環境 css 12/09 鐵人賽 9 - CSS 實戰心法 搶到決定權，開發環境自己來 css 12/08 鐵人賽 8 - CSS 框架架構參考 Bootstrap css 12/07 鐵人賽 7 - CSS 框架架構參考 PURE CSS css 12/06 鐵人賽 6 - CSS 的元件狀態 css 12/05 鐵人賽 5 - CSS 的命名技巧 css 12/04 鐵人賽 4 - OOCSS 容器與內容分離 (最佳實踐) css 12/03 鐵人賽 3 - OOCSS 結構與樣式、容器與內容(實際範例) css 12/02 鐵人賽 2 - OOCSS 結構與樣式、容器與內容 css 12/01 鐵人賽 1 - 前言，CSS 最重要的事？ css 10/18 Yarn - Node.js 的套件管理工具 nodejs 06/08 CSS 失控的 Margin top css 05/26 Sass 基礎教學 - CSS 讀書會 css 04/22 讓使用者愛上你的表單，提升客戶轉換率 study 04/19 轉行工程師必須克服的三大痛點 study 04/12 專業前端都如何管理 CSS - CSS 讀書會 css 04/11 響應式網站設計實作坊 - 高雄前端社群 css 02/29 第二次 CSS 讀書會 - Sass 環境建置 css 01/30 第一次 CSS 讀書會 css 01/24 動手玩 CSS 3d css 01/16 跟 Javascript 相比，CSS 還是友善多了 @@ css 01/10 動手玩 CSS Blend Mode - 根本 Photoshop 的圖層效果 css 01/03 Compass 替代方案(3) - 加入 SVG Sprites sass

2015

12/25 Compass 替代方案(2) - 透過 PostCSS，停止加入不必要的 prefix sass 12/20 Compass 替代方案(1) - 更快速的 Sass sass 12/12 被討厭的勇氣 life 12/01 客製化屬於你的 Bootstrap 4 sass 11/28 過去的學習 每天一分享 tools 11/25 更棒的 Jekyll 編寫工具 tools 11/20 將 Sketch icons 轉成 web icon fonts tools 10/19 SVG 客製化 checkbox tools 10/07 Hotjar 網站熱圖 tools 08/14 動手玩 CSS，快速學會Flex css 08/13 隨意玩玩的 nw.js web 07/23 CSS column 教學 css 07/22 用CSS呈現影像比對效果 css 05/06 壓縮css的終極必殺技 gulp 04/30 關於學習 study 04/27 Middleman + Reactjs js 04/23 Reactjs JSX格式轉換 js 04/21 Reactjs 元件的生命週期 js 04/20 開始學習 React js js 04/10 Javascript 閉包 javascript 04/09 Zeplin, 跨越工程師與設計師的鴻溝 tools 03/23 Middleman 超級快上手 tools 03/16 投資自己、投資資產 life 02/11 Sass map get sass 01/16 CSS 5種垂直置中方法 css 01/13 CSS 冷知識 css 01/08 2014年度回顧 life

2014

12/31 參與開源專案 project 12/18 專輯封面顏色作為背景色(平均色) canvas 12/09 試試看Canvas (3)，Canvas 小畫家 canvas 12/08 試試看Canvas (2)，調整Canvas圖片色調 canvas 12/04 試試看Canvas canvas 12/03 Webkit 自定義Scroll Bar外觀 css 12/02 Jquery 重複點擊判斷 jquery 11/26 視覺前端 - 按鈕的使用情境 design 11/25 高雄前端社群 - d3js d3js 11/24 視覺前端 - 按鈕的個性 design 11/12 前端設計師的設計與執行 design 11/07 Gulp RUN ruby-compass gulp 11/06 Gulp webserver 以及在不同系統上運作 Gulp gulp 10/29 D3.js 鐵人賽的結束 d3js 10/28 PDF轉CSV，利用Tabula d3js 10/27 柯P的財務報表套用 D3js Partition Layout d3js 10/26 d3.js 再看更多layout前，先來轉換json結構 d3js 10/25 d3.js layout (以環保局資料為例) d3js 10/24 D3.js 也可以像音樂一樣動吃動吃動(2) d3js 10/23 D3.js 也可以像音樂一樣動吃動吃動(1) d3js 10/22 像jQuery 一樣的D3.js，柯P野生官網API d3js 10/21 D3.js 資料數量增減 d3js 10/20 D3.js Transition動態效果 d3js 10/19 D3.js 超粘的Voronoi Diagram繪圖 d3js 10/18 D3.js 圈圈小效果 d3js 10/17 D3.js 究竟搭不搭捷運與死亡率有沒有關係？(3) - 將資料繪製成折線圖 d3js 10/16 D3.js 究竟搭不搭捷運與死亡率有沒有關係？(2) - Google 試算表 d3js 10/15 D3.js 究竟搭不搭捷運與死亡率有沒有關係？(1) d3js 10/14 D3.js 折線圖(Line Chart) d3js 10/13 D3.js 軸線(Axis) d3js 10/12 D3.js 讀取CSV資料並繪製成長條圖 d3js 10/11 D3.js 利用Excel建立資料(CSV) d3js 10/10 D3.js 國慶日在家裡畫長條圖 d3js 10/09 D3.js Scale 尺度 d3js 10/08 D3js 將資料投影到SVG上 d3js 10/07 初入D3.js d3js 10/06 D3js 前置作業，製作簡易Server d3js 10/05 SVG Stroke , Marker 以及 CSS d3js 10/04 SVG Defs 以及 CSS d3js 10/03 SVG 超硬派了解 path Arcs d3js 10/02 SVG 超硬派了解 line, polygon, polyline, path (手工繪製) d3js 10/01 SVG 簡介 d3js 09/30 2014 鐵人賽慢慢開始跑 d3js 09/24 Gulp Task and Gulp Pipe gulp 09/22 Gulp 環境安裝 gulp 09/05 Gem Github pages jekyll 09/04 安裝Gitbook design 07/23 翻譯Material Design心得 design 06/24 D3 Js 介紹 d3 06/22 Rails 環境建設 rails 06/15 CSS + SVG stroke 動態描繪 svg 06/05 SVG 漸層沒想到是這樣的做法 svg 06/02 Sass 3.3 Source Maps sass 05/23 CSS + html 冷知識 css 05/20 純CSS Drop Menu css 05/09 玩玩看Rails rails 05/05 SVG 線段 svg 05/02 Sass 3.3 sass 05/01 SVG 矩形、圓形、橢圓 svg 04/30 SVG Group svg 04/21 SVG 簡介 svg 03/24 Sprites for Retina css 03/13 Spriting with Compass css 03/01 Jquery 重複click判斷 jquery 02/26 大陸面試題 如何反轉元素內容 css 02/21 CSS設定中英文不同的字體 sass 02/14 Sass 模組開發 sass 02/10 做網頁如果缺Icons怎麼辦 css 01/27 Amazon book 書籍封面展示效果 (CSS 3D) css 01/22 從CSS到Sass 學習分享 css 01/15 在Jekyll中調整屬於自己的Template jekyll 01/14 在Jekyll設定自己的留言板 jekyll 01/13 在Winodws上運作jekyll jekyll 01/12 利用Jekyll Bootstrap 快速建立Blog jekyll 01/06 GitHub Page jekyll 01/04 Emmet Live Style 加減用啦~ tools 01/04 Jekyll 介紹 jekyll 01/01 font-family要怎麼玩 css

2013

12/27 前端軟體-Prepos介紹 tools 12/24 簡易CSS transform 視差效果 css 12/19 效能更好的banner animation css 12/18 jQuery step by step 教學 jquery 12/16 純 "CSS" Banner animation教學 css 12/14 aShare使用技術 jekyll 12/10 Just Another Beginner~ jekyll 11/09 jQuery Mobile 載入google map顯示不完全的問題 jquery 11/06 利用json取得公開資料(3) 並繪製圖表 jquery 11/05 利用json取得公開資料(2) jquery 11/04 利用json取得公開資料 jquery 11/01 試試看Json jquery 10/31 Transform3D 翻牌效果 css 10/29 CSS - pure CSS 星球公轉(3D) css 10/26 CSS3 Flex的對齊 css 10/25 CSS3 Flex的排版方式 css 10/24 CSS3 display:flex css 10/20 CSS3 垂直文字書寫 css 10/18 Animation 的各項設定值 css 10/17 Animation 和 keyframe css 10/15 CSS沒有極限 - 鐵人賽不是開始，也不是結束 css 10/14 CSS沒有極限 - CSS 的相關資料 css 10/12 CSS沒有極限 - pure CSS 專輯列表效果 css 10/11 CSS沒有極限 - CSS transform-3D的透視(perspective) css 10/10 CSS沒有極限 - CSS transform-origin css 10/09 CSS沒有極限 - CSS transform 軸線的謊言 css 10/08 CSS沒有極限 - CSS transform 概觀 css 10/07 CSS沒有極限 - Checkbox的妙用 css 10/06 CSS沒有極限 - CSS3 Fliter 效果 css 10/05 自己做web fonts icons css 10/04 CSS沒有極限 - Web-font & icons css 10/02 CSS沒有極限 - Transition 實作波動拳動圖 sass 10/01 用sass 做long shadow sass 09/29 CSS沒有極限 - CSS3 :target選取器 css 09/28 CSS沒有極限 - CSS藏頭詩 Selection css 09/27 CSS沒有極限 - CSS的新"文字"及"尺寸"單位 css 09/26 CSS的運算 css 09/25 CSS沒有極限 - 意想不到的background-attachment css 09/24 CSS沒有極限 - CSS3的漸層 css 09/23 CSS沒有極限 - text-shadow初試身手 css 09/22 CSS沒有極限 - 別忘了偽元素 css 09/21 CSS沒有極限 - CSS3的色彩 css 09/20 CSS沒有極限 - Sass 與 Compass(2) css 09/19 CSS沒有極限 - Sass 與 Compass(1) css 09/18 CSS沒有極限 - 瀏覽器的戰爭 css 09/17 CSS沒有極限 - CSS 的改變 css 09/15 網頁設計 技能樹! html 09/06 立體字風格 sass 09/04 CSS的小箭頭 css 09/03 開始使用fire.app sass 09/02 安裝ruby以及sass環境 sass 08/31 Sass 開始前的問與答 sass 08/30 Sass 基礎教學-為何要學Sass sass 08/26 Sass HSL function sass 08/24 CSS transition 各種速率 css 08/23 Web Font的基本設定 css 08/22 html meta基本語法 html 08/21 image 與 SVG html 08/20 CSS3 文字陰影範例 css