#F2E 所有符合的文章

DataTables With Server Side API

筆記 DataTables 如何透過 Server Side API 的方式來處理大量資料的情況，並且透過 ASP.NET MVC 5 來實作。

JavaScript Capture HTML As PNG

筆記如何透過 JavaScript 提供使用者轉換瀏覽中的 HTML 元素為 PNG 圖片。

筆記使用 Tailwind CSS

筆記使用 Tailwind CSS 的方式以及相關的 UI Component，Tailwind CSS 是一個 Utility-First 的 CSS Framework，另有許多的 UI Component 可以搭配使用。

F2E Common Config Files

筆記各式常見的前端專案 config，包括 .editorconfig, .eleventy.js, .gitignore, .nvmrc, .prettierrc, netlify.toml, package.json, postcss.config.js 📚

Vite Glimpse

筆記如何使用 Vite 進行開發，以及如何使用 Vite 建立一個簡單的專案。

Frontend Developer Roadmap

To become an Frontend Developer in 2024, what should you learn?

Html Form Input User Select All

說明如何在 Html 讓使用者快取選擇字串或者 input 的內容。

App_Offline.htm Template 臨時維護網頁範本

設計提供網站臨時維護、緊急維護時，公告訊息的頁面範例，使用 Bootstrap 5，並且著重在使用單一 HTML 完成任務，避免載入其他資源。

CSS | Bootstrap5 Class Tips (Intranet Low Maintenance Website / 簡易維護網頁範本)

說明活用 Bootstrap 5 Components 以及 Utilities 創造網頁設計妙用，減少手工 CSS 的負擔 🙂

前端設計應用，豐富圖片的可點擊區域與內容更新 (Image Map & SVG)

如何在一張圖片，創造出不同連結的點擊區域，達到例如地圖位置、物件連結的效果？又如何讓圖片具有互動性，藉由使用者的輸入來改變圖片？

jQuery Migrate Guide

筆記如何處理 jQuery 版本過舊、存在弱點的修正方式。

Html 網頁倒數計時重新導向 (使用 JavaScript) 😍

說明如何設計一個簡單的倒數計時重新導向的網頁，可以用於轉址、訊息傳達等用途。

JavaScript Coding CheatSheet 80/20 法則的應用

筆記 JavaScript 開發前一定要複習的重要物件操作技巧，筆記精要的整理出 20% 的語法與功能，能夠活用在 80% 的使用情境。能夠減少開發時對於語法的生澀與卡卡的感覺，讓功能的簡潔實踐想得到，也活用原生語法特性做得出來 😉

超簡單學習 Vue.js 系列 | Vue tsmc 常用英文單字測驗練習

Vue.js 簡單的示範專案，使用 Vue CLI 實作 tsmc 常用英文單字測驗練習，結合 ES6 語法特性活用 Array 與 Object，嘗試使用 Html5 Audio Element 用按鈕音效讓使用體驗更佳，並且重構原本的 Vue App。

CSS | Background-image

整理如何使用 Backgroun-image 用於豐富元素的視覺呈現，同時結合說明 repeat 與 position 的方式控制圖片在元素的背景呈現方式，並結合說明 的方式調整漸層呈現。

CSS | Pseudo Class Image Background

實驗 Pseudo Class 的使用，不需要新增 html tag 也在視覺呈現上進行設計，本例是探討圖片後置正圓的視覺效果，並比較 Position Absolute 與 Transform Translate 的位移差異。

JavaScript OnHashChange / Get Hash tag value

說明如何藉由 Vanilla JS 偵測 URL Hash 變化進行頁面渲染 (iframe load)，從而實現迷你版本的 Hash Tag Router 路由機制 😎

超簡單學習 Vue.js 系列 | Vue-Toys-Converter

Vue.js 簡單的示範專案，使用 Vue CLI 實作將所學習的知識以及實作需要的功能，藉此將知識實際結合，記得牢、想得到、用得出來。本次藉由 Vue Two Way Binding 實作轉換長寬，由公分 (cm) 或者英寸 (inch) 到網頁圖片經常使用的 pixel。

PowerPoint As Design Toole (設計工具解決方案)

有時開發的工具豐富到不行，偏偏在視覺設計上捉襟見肘時 PowerPoint 足堪任設計需求解決方案的唯一擔當，活用它的注意事項通通收錄在此。

HTML Form Enctype (x-www-form-urlencoded / form-data / text-plain)

筆記 HTML From 上傳資料上 Enctype 的差別。

CSS | Margin & Padding Like A Pro

人生苦短，筆記使用 Margin & Padding 的縮寫技巧 😎

Parcel 零配置打包工具入門教學 | 當代網頁開發沉浸心流之術 🐱‍👤

相較於 Webpack 需要繁複前置設定的缺點，同樣是打包工具的 Parcel 優點在於可以零配置馬上使用，同時不同於 WebPack 需要準備相關的 Loader，使用 Parcel 已經有內建對於 SCSS、JS Modules 以及 Babel 的處理，同時提供內建的 Dev Server 簡直是小型整合工具。對於延伸進階功能的需求，也可以透過 Plugins 來擴充。

Node.js CommonJS Modules

筆記 Node.js 的 CommonJS Modules 機制，並比較與 ES 6 Modules 的使用異同 🙂

超簡單學習 Vue.js 系列 | Vue Gym Leaders 道館排版

Vue.js 簡單的示範專案，本次是為練習使用 Bootstrap 5, Flexbox 等 CSS 技巧，並混合資料處理以及 Vue 的框架使用，使用 Vue CLI 實作將所學習的知識以及實作需要的功能，藉此將知識實際結合，記得牢、想得到、用得出來。

CSS | Filter

整理 CSS Filter 對於圖片的濾鏡效果使用，包含 Blur, Contrast, Grayscale, Hue-rotate, Invert, Opacity, Saturate 以及 Sepia。

CSS | Typography

整理關於網頁字體 Typography 相關知識，包含 font-size、font-family 以及 font 的各種排版應用與變化 (writing-mode, text-combine-upright)。

CSS | Flexbox

CSS Flexbox 相較於 Float ，更適合處理一維度的 Components 例如 Navbar, Card 等，對於一維度的元素延展以及對齊非常方便。

CSS | Position

整理 CSS Position 的使用說明，藉由 Relative, Absolute, Fixed 可以達成圖層位移、堆疊的視覺效果，也可以設置懸浮固定的 sidebar 以及回到置頂的 button，藉由 sticky 則可以實作捲動跟隨著 header。

網站設計風格指南 WebSite Styles

整理學習與經驗上，網站設計的風格指南。

CSS With Scale & Ratio

彙整瀏覽器的縮放比率與螢幕寬度的關聯，並比較 Bootstrap 響應式的螢幕尺寸分斷點。

Vue.js Interview 面試問題彙整

筆記各式 Vue.js 面試常見的問題。 持續編輯中 🧙‍♂️

超簡單學習 Vue.js 系列 | Vue Ramen (Form)

Vue.js 簡單的示範專案，本次要說明的是 Vue 與表單設計 (form design) 的結合，以客製化拉麵為範例，使用 Vue CLI 實作將所學習的知識以及實作需要的功能，藉此將知識實際結合，記得牢、想得到、用得出來。本次專案結合使用 Boostrap.css 以及 Animate.css。

超簡單學習 Vue.js 系列 | Fetch With Json Server

Vue.js 簡單的示範專案，使用 Vue CLI 並搭配 Fetch API 向 Json Server 讀、寫、刪以及更新資料。

超簡單學習 Vue.js 系列 | 多元按鈕 Vue Multiway Buttons

Vue.js 簡單的示範專案，使用 Vue CLI 實作將所學習的知識以及實作需要的功能，藉此將知識實際結合，記得牢、想得到、用得出來。本次示範 Event Listener 以及 Click Modifier 的使用方式。

超簡單學習 Vue.js 系列 | 點陣繪圖 Vue Pixel Darwer

Vue.js 簡單的示範專案，使用 Vue CLI 搭配常用 Vue Directive，例如 v-if、v-bind 以及 v-on 等等，並使用 Bootstrap 5 作為 CSS Frameworks，搭配 Vue Component 的設計方式，實作各式應用。

Vue 使用 Monaco 打造 VSCode Editor Cloud

Monaco 是 VSCode 的編輯器核心，同時是 Open Source 的專案，提供開發人員用於設計個人化的 Editor。本次示範以 Vue Cli 並使用 Vue 2 來設計基於 Monaco 的 Cloud 版本 VSCode Style Editor。

CSS Properties Dom Notation (camelCase & kebab-case)

列出所有的 Chrome 瀏覽器所支援的 CSS Properties。

前端開發不能錯過的 Json Server

前端開發的路上你並不孤單，當需要後端 Rest API 的支援時，不用自己用 Asp.net Web API、Express、Django、Ruby on Rails 等後端框架慢慢刻，不僅需要額外的學習門檻，也需要不少的投入時間。Json Server 就是你在前端開發上不可或缺的好夥伴。藉由執行本機端的 server service，將 json file 直接變為 Rest API Service，讓前端開發環境更為方便。

ES20XX Modern JS 新語言特性筆記 | Closures

筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。 本篇筆記為介紹 JavaScript 令人迷惑的概念 Cloures。

JavaScript Array 的瑞士刀函式 | splice

筆記從 JavaScript 令人迷惑的 slice, split 以及 splice。其中 splice 可以稱 JavaScript 中的瑞士刀函式方法，足抵數個函式方法所能提供的功能。藉由 splice 不論是要增加陣列元素、刪除特定元素，甚至是要將 Array 切段也沒有問題。

ES20XX Modern JS 新語言特性筆記 | JavaScript Cookie & LocalStorage

筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。 介紹 Modern JS 如何操作 Cookie 以及 Html 5 所提供的 LocalStorage API，用以將資訊保存在用戶端。

Vanilla JavaScript | Get DOM Elements (get anchor and image with querySelector)

筆記 JS 如何使用 JS 原生語法取得 DOM 元素，包含介紹 GetElementById, GetElementByName, QuerySelector, QuerySeletorAll ，並且介紹如何應用這些語法，提供將網頁上所有的 Anchor Link 擷取的解決方案 😎

Frontend Web Developer Glossary 前端開發工具詞彙表

紀錄前端開發常見的各式詞彙表、新興工具名稱，讓這個每 18 至 24 個月學習難度都會倍增的領域能夠更平易近人。

ES20XX Modern JS 新語言特性筆記 | Modules (ES6 Modules)

筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。

ES20XX Modern JS 新語言特性筆記 | Spread, Rest & Destructuring

筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。

ES20XX Modern JS 新語言特性筆記 | Array

筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。

SASS / SCSS 使用筆記

筆記使用 SASS / SCSS 讓網站開發更為便利的方式。首先會談論 SASS 與 SCSS 的差異，接著再說明如何將 SASS 轉換為 CSS 讓瀏覽器可以解讀，同時在開發過程如何藉由 sass-loader 將 sass 動態載入即時預覽效果，並整理個人在開發中所使用到的語法。

加密 | 編碼 | 雜湊 🔐 crypto-js 使用方法以及與 Vue CLI 結合應用

筆記如何使用 crypto-js，用以在前端進行資料的加密、編碼與雜湊。本次的說明是以 Vue CLI 結合應用，並設計了一個線上使用 Client 端資源進行 加密、編碼與雜湊的服務。

Vue.js 使用 Firebase Realtime Database 作為資料庫解決方案

筆記如何使用 Vue.js 結合 Firebase Realtime Database 讀取、新增以及刪除資料。

初心者教學：使用 Vue CLI 打造 Vue App 前端應用服務

以往要寫玩具都是用 Python 來寫，週末在玩雙點醫院的過程中，突然想要寫一個訓練色彩辨別的互動玩具（可能是雙點醫院褪色症的啟發）。同時不想再用 jQuery DOM 操作的方式來寫，但想到對於前端各種工具的熟悉度非常有限，如果要從環境開始準備，並且規劃整個開發流程可能會讓整個專案裹足不前 😑 此時想到 Visual Studio IDE 所帶來的良好開發體驗，何不嘗試以 Vue CLI 的方式建構整個專案，而不要從開發環境開始琢磨，讓時間集中在功能的實踐，忽略環境的細節並且在需要的時候才去搜尋，於是就開始了打造第一個 Vue App 的過程 ✈️

ASP.NET MVC How To Use RadioButtonFor In Bootstrap4

筆記如何使用 RadioButtonFor 讓設計 ASP.NET MVC 表單介面時更為美觀、迅速。

筆記如何在系統專案中使用 DataTables 元件

系統專案的開發經常會有對表格篩選、排序、分頁的功能，藉由使用 DataTables 前端元件就能夠快速解決這個需求。

Visual Studio Client Side Library Manager LibMan (Compare with Nuget)

筆記如何使用 Visual Studio 的 LibMan 來做第三方元件的管理。

Visual Studio 使用 SASS / SCSS (Visual Studio Compile SASS / SCSS With Web Compiler)

筆記如何使用 Visual Studio 在專案中編譯 SASS 與 SCSS 檔案，用以模組化的管理 CSS。

EJS 學習筆記

Gulp 學習筆記