第 3 頁

節點連接符號

在前端請求資料是一場災難,但事情不必這麼複雜! feat. Vue

索取並顯示資料對前端工程師來說是家常便飯的事,但隨著背後延伸的狀態越來越多,就會讓整個專案極度混亂,因此想要藉由這篇文章點出現有問題並提出一些可行的方案,紀錄尋找更高效解法的過程。在索取資料時連帶的有許多狀態需要被管理和調整,文章透過 Vue 來探討如何更優雅的處理這些狀態。

文件與放大鏡符號

如何替陳舊代碼導入 HTML 原生客戶端驗證的故事

本文描述近期在維護既有代碼時的故事,目前的專案中有各式各樣前人尚未統一的驗證方式,例如:有些是使用 HTML 原生客戶端驗證、伺服器端驗證、第三方套件、自造的驗證方法,如何統一規範驗證方式是一大問題,同時也要思考:「要如何避免創造更多的陳舊代碼?」

Astro Logo 符號

Astro 系列文第三十日:系列回顧與反省

本系列 Astro 文章終於完結了,必須說連續 30 天到了後段有點寫不太出來任何東西,秉持著有寫任何東西無論如何都比沒寫強的精神完成了這次的挑戰!本系列文章是當完兵出來沒多久馬上開始寫的,因此是在最後一天開賽而且還只有不到 10 篇的屯稿的狀態下進行的,加上日後工作也忙碌起來,能夠完賽算是很幸運。

Astro Logo 符號

Astro 系列文第二十九日:製作作品集參考

終於到第 29 天了……前面寫太多沒有規劃好反而到後面也不知道要多寫什麼。其實在撰寫這 30 天文章之前我有先試寫紀錄一下我用 Astro 製作個人網站的過程,可以參考看看:製作個人前端作品集 - 準備篇以及實作篇,裡面有記錄從發想草稿到實作的過程,如果想要製作個小網站試試水溫可以參考看看。

Astro Logo 符號

Astro 系列文第二十八日:近期與資源雜談

感覺 30 天真的要寫不下去了 😅,感覺要寫的前面都寫過了,今天這一篇來介紹 Astro 有那些資源可以入門以及近期的新聞。就在昨天 Astro 發布了 3.3 版本,來了嶄新的實驗性圖片組件 <Picture />,改進了語法突出顯示的相容性,引入了套件的可信性證明,以及其他一些提升使用體驗的改進。

Astro Logo 符號

Astro 系列文第二十七日:視圖過度

本章節來談談 Astro 3.0 版本最吸睛的一項功能:View Transitions ,讓你的靜態網頁也能達成 App 應用一樣的絲滑感受。由於這項技術還在實驗階段,因此放在後面的章節補充。View Transitions API 是瀏覽器正推出的一項 API,提供簡易的方法對任何 DOM 狀態更換提供轉場特效。

Astro Logo 符號

Astro 系列文第二十六日:建構網頁概念篇

很多時候建構網站都太著重在技術層面該如何應對,但要怎麼經營自己的網站或產品好像卻沒什麼概念,因此這裡添加一下我建構網站的歷程與收穫。我從幾年前剛學習網頁到現在一直在為寫部落格做準備,期間嘗試用很多不同技術與挑戰,但一直以來都沒有特別滿意的成果,直到近期才比較有「寫部落格」這件事究竟是什麼的體會。

Astro Logo 符號

Astro 系列文第二十五日:基礎指令與設定

在 Astro 中串接 CMS 是一件非常容易的事情。內容管理系統 (Content Management System)是一種用於編寫和管理網站內容的工具,可以讓幫助撰寫內容與管理網站資產,不同的 CMS 廠商有各式各樣的特色像是:排程發布、編輯器、合作編輯、資產管理……等特色。

Astro Logo 符號

Astro 系列文第二十四日:添加 ESLint 與 Prettier

我喜歡使用自動化的工具來為專案的代碼提供錯誤檢查與整理,因此使用 ESLint 與 Prettier 讓撰寫的代碼更一致無錯,還有額外添加 TypeScript 的檢查與 VSCode 提示。本篇文章將帶你認識我如何替自己的 Astro 部落格添加 ESLint 與 Prettier。

Astro Logo 符號

Astro 系列文第二十三日:路徑別名

當網站規模愈複雜,使用相對關係路徑就會需要花費很多心力去解讀與撰寫,在撰寫引入路徑時會發現撰寫相對位置的路徑既又繁瑣又難維護,可以透過額外設置路徑別名來解決這個問題。本篇文章介紹如何透過設定 Astro 中的 TS 設定檔來達成路徑別名。

Astro Logo 符號

Astro 系列文第二十二日:環境變數

環境變數提供在不同開發階段切換伺服器地址的靈活性,避免硬編碼,同時安全存儲敏感信息,如 API 金鑰或數據庫密碼,使程式更具適應性和安全性。如果你熟悉 Vite 的話應該會非常熟悉,因為 Astro 即是使用 Vite 作為底層。

Astro Logo 符號

Astro 系列文第二十一日:部屬升空

到這個章節介紹了絕大多數會使用到的 Astro 功能,後續的章節會著重在講解一些額外的環境設置。讓我們把製作好的網站放到伺服器上可以被其他人造訪吧。到目前為止教學都是以靜態生產的方式的使用 Astro,也就是預先渲染的網頁文件可以被靜態的放置在伺服器上被索取。

Astro Logo 符號

Astro 系列文第二十日:實作搜尋功能

前面透過建立靜態端點實作了自己的 RSS Feed 算是一個簡單的練習起步,這次更進一步透過建立整個集合的資料來完成「集合文章搜尋功能」。隨著文章愈來愈多會需要一個查詢文章的功能,透過用戶輸入文章相關的訊息,比對文章資訊(標題、文章短描述)並顯示出最相關的文章。

Astro Logo 符號

Astro 系列文第十九日:RSS 端點

前面章節我們學會了如何使用 Markdown 或 MDX 、在內容集合中定義資料格式與索取資料。本章節將解釋如何在 Astro 中創造端點提供不同種類的資料,並實作生成一個 RSS 檔案作為練習,RSS 是一種標準化的方式,一種特定格式的 XML 檔案,設計來推播最新資訊給網站用戶。

Astro Logo 符號

Astro 系列文第十八日:實作集合分類功能

前面學習了內容集合與頁籤的製作,今天的主題練習透過整理集合抓取到的資料更進一步製作分類功能頁面。隨著內容集合發布的文章越來越多,裡面可能會有許多相同性質的文章你會想要集合起來並替他們分類,並且自動根據類別自動創建頁面方便查閱。