2024-11-14
筆記使用 Tailwind CSS
筆記使用 Tailwind CSS 的方式以及相關的 UI Component，Tailwind CSS 是一個 Utility-First 的 CSS Framework，另有許多的 UI Component 可以搭配使用。
#F2E 所有符合的文章
顯示全部 0/0 篇文章
2024-11-12
F2E Common Config Files
筆記各式常見的前端專案 config，包括 .editorconfig, .eleventy.js, .gitignore, .nvmrc, .prettierrc, netlify.toml, package.json, postcss.config.js 📚
2023-12-07
Frontend Developer Roadmap
To become an Frontend Developer in 2024, what should you learn?
2022-08-01
CSS | Bootstrap5 Class Tips (Intranet Low Maintenance Website / 簡易維護網頁範本)
說明活用 Bootstrap 5 Components 以及 Utilities 創造網頁設計妙用，減少手工 CSS 的負擔 🙂
2022-07-24
前端設計應用，豐富圖片的可點擊區域與內容更新 (Image Map & SVG)
如何在一張圖片，創造出不同連結的點擊區域，達到例如地圖位置、物件連結的效果？又如何讓圖片具有互動性，藉由使用者的輸入來改變圖片？
2022-05-10
JavaScript Coding CheatSheet 80/20 法則的應用
筆記 JavaScript 開發前一定要複習的重要物件操作技巧，筆記精要的整理出 20% 的語法與功能，能夠活用在 80% 的使用情境。能夠減少開發時對於語法的生澀與卡卡的感覺，讓功能的簡潔實踐想得到，也活用原生語法特性做得出來 😉
2022-02-23
CSS | Background-image
整理如何使用 Backgroun-image 用於豐富元素的視覺呈現，同時結合說明 repeat 與 position 的方式控制圖片在元素的背景呈現方式，並結合說明 的方式調整漸層呈現。
2022-02-17
CSS | Pseudo Class Image Background
實驗 Pseudo Class 的使用，不需要新增 html tag 也在視覺呈現上進行設計，本例是探討圖片後置正圓的視覺效果，並比較 Position Absolute 與 Transform Translate 的位移差異。
2022-02-15
JavaScript OnHashChange / Get Hash tag value
說明如何藉由 Vanilla JS 偵測 URL Hash 變化進行頁面渲染 (iframe load)，從而實現迷你版本的 Hash Tag Router 路由機制 😎
2022-02-10
PowerPoint As Design Toole (設計工具解決方案)
有時開發的工具豐富到不行，偏偏在視覺設計上捉襟見肘時 PowerPoint 足堪任設計需求解決方案的唯一擔當，活用它的注意事項通通收錄在此。
2022-02-10
HTML Form Enctype (x-www-form-urlencoded / form-data / text-plain)
筆記 HTML From 上傳資料上 Enctype 的差別。
2022-02-04
Parcel 零配置打包工具入門教學 | 當代網頁開發沉浸心流之術 🐱👤
相較於 Webpack 需要繁複前置設定的缺點，同樣是打包工具的 Parcel 優點在於可以零配置馬上使用，同時不同於 WebPack 需要準備相關的 Loader，使用 Parcel 已經有內建對於 SCSS、JS Modules 以及 Babel 的處理，同時提供內建的 Dev Server 簡直是小型整合工具。對於延伸進階功能的需求，也可以透過 Plugins 來擴充。
2022-01-26
CSS | Filter
整理 CSS Filter 對於圖片的濾鏡效果使用，包含 Blur, Contrast, Grayscale, Hue-rotate, Invert, Opacity, Saturate 以及 Sepia。
2022-01-26
CSS | Typography
整理關於網頁字體 Typography 相關知識，包含 font-size、font-family 以及 font 的各種排版應用與變化 (writing-mode, text-combine-upright)。
2022-01-25
CSS | Flexbox
CSS Flexbox 相較於 Float ，更適合處理一維度的 Components 例如 Navbar, Card 等，對於一維度的元素延展以及對齊非常方便。
2022-01-21
CSS | Position
整理 CSS Position 的使用說明，藉由 Relative, Absolute, Fixed 可以達成圖層位移、堆疊的視覺效果，也可以設置懸浮固定的 sidebar 以及回到置頂的 button，藉由 sticky 則可以實作捲動跟隨著 header。
2021-08-22
CSS Properties Dom Notation (camelCase & kebab-case)
列出所有的 Chrome 瀏覽器所支援的 CSS Properties。
2021-08-21
前端開發不能錯過的 Json Server
前端開發的路上你並不孤單，當需要後端 Rest API 的支援時，不用自己用 Asp.net Web API、Express、Django、Ruby on Rails 等後端框架慢慢刻，不僅需要額外的學習門檻，也需要不少的投入時間。Json Server 就是你在前端開發上不可或缺的好夥伴。藉由執行本機端的 server service，將 json file 直接變為 Rest API Service，讓前端開發環境更為方便。
2021-08-15
ES20XX Modern JS 新語言特性筆記 | Closures
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。 本篇筆記為介紹 JavaScript 令人迷惑的概念 Cloures。
2021-08-14
JavaScript Array 的瑞士刀函式 | splice
筆記從 JavaScript 令人迷惑的 slice, split 以及 splice。其中 splice 可以稱 JavaScript 中的瑞士刀函式方法，足抵數個函式方法所能提供的功能。藉由 splice 不論是要增加陣列元素、刪除特定元素，甚至是要將 Array 切段也沒有問題。
2021-08-11
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，用以將資訊保存在用戶端。
2021-08-09
Vanilla JavaScript | Get DOM Elements (get anchor and image with querySelector)
筆記 JS 如何使用 JS 原生語法取得 DOM 元素，包含介紹 GetElementById, GetElementByName, QuerySelector, QuerySeletorAll ，並且介紹如何應用這些語法，提供將網頁上所有的 Anchor Link 擷取的解決方案 😎
2021-08-08
Frontend Web Developer Glossary 前端開發工具詞彙表
紀錄前端開發常見的各式詞彙表、新興工具名稱，讓這個每 18 至 24 個月學習難度都會倍增的領域能夠更平易近人。
2021-08-03
ES20XX Modern JS 新語言特性筆記 | Modules (ES6 Modules)
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。
2021-08-02
ES20XX Modern JS 新語言特性筆記 | Spread, Rest & Destructuring
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。
2021-08-01
ES20XX Modern JS 新語言特性筆記 | Array
筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。
2021-07-26
SASS / SCSS 使用筆記
筆記使用 SASS / SCSS 讓網站開發更為便利的方式。首先會談論 SASS 與 SCSS 的差異，接著再說明如何將 SASS 轉換為 CSS 讓瀏覽器可以解讀，同時在開發過程如何藉由 sass-loader 將 sass 動態載入即時預覽效果，並整理個人在開發中所使用到的語法。
2021-07-22
加密 | 編碼 | 雜湊 🔐 crypto-js 使用方法以及與 Vue CLI 結合應用
筆記如何使用 crypto-js，用以在前端進行資料的加密、編碼與雜湊。本次的說明是以 Vue CLI 結合應用，並設計了一個線上使用 Client 端資源進行 加密、編碼與雜湊的服務。
2021-07-15
初心者教學：使用 Vue CLI 打造 Vue App 前端應用服務
以往要寫玩具都是用 Python 來寫，週末在玩雙點醫院的過程中，突然想要寫一個訓練色彩辨別的互動玩具（可能是雙點醫院褪色症的啟發）。同時不想再用 jQuery DOM 操作的方式來寫，但想到對於前端各種工具的熟悉度非常有限，如果要從環境開始準備，並且規劃整個開發流程可能會讓整個專案裹足不前 😑 此時想到 Visual Studio IDE 所帶來的良好開發體驗，何不嘗試以 Vue CLI 的方式建構整個專案，而不要從開發環境開始琢磨，讓時間集中在功能的實踐，忽略環境的細節並且在需要的時候才去搜尋，於是就開始了打造第一個 Vue App 的過程 ✈️
2021-06-02
ASP.NET MVC How To Use RadioButtonFor In Bootstrap4
筆記如何使用 RadioButtonFor 讓設計 ASP.NET MVC 表單介面時更為美觀、迅速。
2021-05-15
Visual Studio Client Side Library Manager LibMan (Compare with Nuget)
筆記如何使用 Visual Studio 的 LibMan 來做第三方元件的管理。
2021-05-13
Visual Studio 使用 SASS / SCSS (Visual Studio Compile SASS / SCSS With Web Compiler)
筆記如何使用 Visual Studio 在專案中編譯 SASS 與 SCSS 檔案，用以模組化的管理 CSS。