現代化 Web 開發技術學習分享

0%

非同步處理一直以來都是 JavaScript 開發者很常遇到的情境,在之前,我們很常使用 callback 去完成任務,當結構變得複雜時,容易形成所謂的 callback hell,造成程式碼難以維護;在 ES6 版本中,新增了 Promise 物件,它能夠將非同步流程包裝成簡潔的結構,並提供統一的錯誤處理機制,解決了傳統 callback hell 的問題。此篇將會解析 Promise 的處理流程與相關方法。
閱讀全文 »

大多人開發項目都是使用 Axios 或者 jQuery 庫的 $.ajax 方法來完成 HTTP 請求行為,如果要使用 JS 原生的方法,只有 XMLHttpRequest 可以選擇,但程序繁瑣、順序混亂等問題,我相信大家因該都有遇到過,這次來記錄一下 ES6 新增的原生方法 Fetch API。
閱讀全文 »

初期在寫 JavaScript 代碼時,都是以學習心態去完成目標,程式碼的品質較為不穩定,但到了業界,通常需要配合團隊開發專案規範,其中也包含了代碼規範,ESLint 就是 JavaScript 的代碼規範工具,他可以讓你維持一定的程式碼品質,敲代碼的同時也可以進行觀念的修正。
閱讀全文 »

在 Gulp 可使用 gulp-imagemin 套件來壓縮 PNG、JPG 等類型圖片,想當然的在 Webpack 也有類似的套件可使用,名為 image-webpack-loader,一樣都是基於 imagemin 所設計,兩者在使用上幾乎沒有差別,一般人可能聽過的是 imagemin-webpack-plugin,這是屬於 Plugin 類型的套件,代表是在生成資源時才進行壓縮,無法像 image-webpack-loader 一樣後續再交由 url-loader 進行處理,我自己是比較喜歡 image-webpack-loader 就是了。此篇將介紹如何使用 image-webpack-loader 壓縮各種類型的圖片。
閱讀全文 »

通常我們在將一個專案改為目前流行的 SPA (Single-page application) 時,最大的考慮因素肯定是 SEO 是否重要,畢竟在 SPA 的世界裡幾乎沒有 SEO 的可能,對於爬蟲來說是無法爬取 JavaScript 檔案內容的,這也就印證 SPA 不適合用在強調 SEO 的專案上面,有些人可能會選擇使用像是 Nuxt.js、Next.js 等 SSR 框架,這確實是個解決辦法,但對於小型項目來說更好的做法是使用 Prerendering 方式,過程也相對簡單。此篇將介紹如何使用 prerender-spa-plugin 將我們的 SPA 添加預渲染。
閱讀全文 »

之前我們有提到如何使用 html-webpack-plugin 內建的 minify 選項壓縮 HTML,而 JavaScript 則是依靠 Webpack 本身內建的 TerserWebpackPlugin 進行壓縮,唯獨少了 CSS 的方法,這次就來介紹如何使用 optimize-css-assets-webpack-plugin 壓縮我們的 CSS,其內部預設是使用 cssnano 作為編譯器,cssnano 是建立在 PostCSS 生態系統上的工具,代表我們也可使用 postcss-loader 搭配 cssnano 來達到同樣的目的及效果,如果專案本身已導入 PostCSS,建議直接搭配 cssnano 可更快的完成壓縮目的。
閱讀全文 »

在 Webpack 中我們會使用 DefinePlugin 或 EnvironmentPlugin 來設置全局變量,以提供 entry 內的模組針對這一個變數快速做響應,但有一點困擾我們的是,這兩個 Plugin 撰寫的全局變量都是屬於顯式性質的,代表任何人都能從所撰寫的位置得知這一個全局變量,如果情況發生在尚未發布的專案,有心人就可利用這一個變量,通常為測試主機位址,進一步做攻擊的動作,在後端我們會使用 dotenv 套件,前端可使用 dotenv-webpack 套件,屬 DefinePlugin 與 dotenv 的包裝,進一步將變量中的敏感信息隱藏起來。
閱讀全文 »

Grid System 可說是近年來前端工程師必備的一項技能,傳統上我們都是針對特定對象撰寫 media query 以達到 RWD 的效果,但對於可維護性及結構性來說,似乎這不是個好的做法,現在我們都會直接導入像是 Bootstrap 或 Tailwind 等 CSS 框架,利用內建的 Grid System 更有效率的撰寫出網站基底的 RWD 樣式,但這樣的問題是,在不考慮使用 PurgeCSS 或針對原始碼做刪減的情況下,我們將整個框架導入進來就為了使用 Grid System 會不會有點小題大作?不如我們自己來開發 Grid System 吧!
閱讀全文 »

所謂的 CSS 方法論是指無須任何套件或框架即可達成模組化目的的架構心法,用以讓 CSS 也能有良好的重用性、維護性及延展性,雖然我們前面已經可透過像是 SCSS 預處理器搭配 7-1 Pattern 達到模組化的效果,但 7-1 模式的模組化拆分最小單位為檔案,這代表著檔案內的所有樣式依然還是處於未模組化的狀態,此時我們就可利用知名的 OOCSS、SMACSS、BEM 等 CSS 方法論針對像是 class 這種較小的單位進行模組化,真正意義上的讓樣式表達到模組化目的。
閱讀全文 »

前一篇說明了如何利用 @import 將 partial 檔案給載入進來,進而達到模組化的目的,但這邊有一個問題是,我們該針對那些內容來模組化呢?當初這點捆擾了我許久,直到發現原來有所謂的 Sass 7-1 Pattern 可參考,7-1 模式是構建 Sass 項目的一種流行且有效的模組化方法,由 7 個資料夾與 1 個檔案所組成,每一個資料夾都有各自實現的對象,我們可把同個實現對象但不同部分的 Sass 模組給放進去,這些模組最後都會被根目錄檔案視為 @import 對象,使之編譯成單獨的 CSS 檔案。
閱讀全文 »