Astro Color Picker|使用框架 Astro 打造的色票複製工具

Astro Color Picker|使用框架 Astro 打造的色票複製工具

更新於 發佈於 閱讀時間約 3 分鐘
raw-image

Astro Color Picker / GitHub

簡介

去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astro 重新打造外觀和功能完全一樣的姐妹網站,體驗到提升網站載入速度和 SEO 效果的靜態網頁生成,也在實作上發現一些值得注意的地方:(1) <script> 中 fetch 資料時不可使用本地路徑,必須使用網址;(2) Astro 預設在打包時會清除 JavaScript 程式碼,如果想要元件裡的 JS 一同被打包,就要在引入時加入 Astro 的標籤,如 <MyComponent client:visible />,詳細說明見 Partial Hydration in Astro;(3) 如果想要讓頁面中的 JavaScript 程式碼被打包,就要加上 hoist tag,也就是 <script hoist></script>,但是在開發時加入 hoist tag 會導致熱重載 (hot-reload) 中斷,所以我的作法是開發時先移除標籤,待程式碼打包時再利用 git record 的變更提示來提醒自己加上,目前算是比較麻煩的地方。總體而言,使用 Astro 框架開發的過程還算滿意,將 JavaScript 產生的元件打包成 HTML String、以及對 Astro 意圖 整合所有主流前端框架 的作法感到新奇,是一個會想繼續使用的工具。,是一個會想繼續使用的工具。

外觀與互動設計

開發紀錄

  • 將 <head> 與色票卡片做成元件載入
  • 使用 Sass 做出在頁面引入的 全域樣式 和元件中配合使用的 設定樣式
  • 將通用型程式碼 (utils.js) 與專案用程式碼進行拆分,需要時再模組化引入做使用 (module import)
  • 以原生 DOM 操作實現透過網址查詢參數 (Query String) 過濾色票卡片的功能
  • 專案打包後使用 VS Code 套件 MinifyAll 進一步壓縮 HTML 檔案
  • 其他見原專案:HTML Reserved Colors
avatar-img
Ray C的沙龍
37會員
31內容數
短篇奇幻作品將不定期更新。
留言
avatar-img
留言分享你的想法!
Ray C的沙龍 的其他內容
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
2022 年 1 月的一個假日,閒逛於誠品書局,看到了皮特·蒙德里安 (Piet Mondrian) 的周邊商品 – 蒙德里安變色馬克杯 (Mondrian Color Changing Mug) 和 蒙德里安收納包,其簡潔優雅的藝術風格立刻攫住我的目光。經調查得知,身為印象派/幾何抽象畫派先...
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
以前就想過要做一個展示電影的頁面,這次使用 Vue 3 搭配 GSAP,並結合自己收藏的 46 部藍光電影所做成的 API 做串接,達成能夠橫向捲動的電影購物頁面。實作上,除了藉由 CSS 屬性 `relative` 搭配 GSAP 來調整元素的 `left` 值來實現橫向捲動的功能,另外在點...
我始終認為,設計與開發是一體兩面,設計本是為開發而存在,開發也是為了完成設計,兩者相輔相成、互相影響。因此在網站首頁中,使用建築圖與對設計和開發的解釋,表現自己在前端學習上,執著於兼顧清晰的設計與流暢的開發;網站設計上,我以報紙風格做為基礎,使用噪點填充背景以實現擬似紙張的質感,加入平滑滾動與...
2020 下半年在全世界仍受到冠狀病毒肆虐期間,吉卜力工作室在官網四次公開合計 24 部動畫作品、共 1,178 張高畫質劇照,表示在未觸法的情形之下可自由下載使用,並且還會持續釋出過去動畫作品的劇照。由於官網的劇照呈現方式不太友好,也未在移動裝置上做排版優化,加上分批公開的作品劇照未整合在一...
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
2022 年 1 月的一個假日,閒逛於誠品書局,看到了皮特·蒙德里安 (Piet Mondrian) 的周邊商品 – 蒙德里安變色馬克杯 (Mondrian Color Changing Mug) 和 蒙德里安收納包,其簡潔優雅的藝術風格立刻攫住我的目光。經調查得知,身為印象派/幾何抽象畫派先...
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
以前就想過要做一個展示電影的頁面,這次使用 Vue 3 搭配 GSAP,並結合自己收藏的 46 部藍光電影所做成的 API 做串接,達成能夠橫向捲動的電影購物頁面。實作上,除了藉由 CSS 屬性 `relative` 搭配 GSAP 來調整元素的 `left` 值來實現橫向捲動的功能,另外在點...
我始終認為,設計與開發是一體兩面,設計本是為開發而存在,開發也是為了完成設計,兩者相輔相成、互相影響。因此在網站首頁中,使用建築圖與對設計和開發的解釋,表現自己在前端學習上,執著於兼顧清晰的設計與流暢的開發;網站設計上,我以報紙風格做為基礎,使用噪點填充背景以實現擬似紙張的質感,加入平滑滾動與...
2020 下半年在全世界仍受到冠狀病毒肆虐期間,吉卜力工作室在官網四次公開合計 24 部動畫作品、共 1,178 張高畫質劇照,表示在未觸法的情形之下可自由下載使用,並且還會持續釋出過去動畫作品的劇照。由於官網的劇照呈現方式不太友好,也未在移動裝置上做排版優化,加上分批公開的作品劇照未整合在一...