Pokédex｜寶可夢圖鑑
閱讀時間約 2 分鐘
簡介
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文，聯想起先前在網上閱讀到關於 Pokémon API 的文章，一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中，發現連續抓取 905 份寶可夢資料實在耗時 (約 50 秒)，因此特意自製一份包含了 905 隻寶可夢 id、名稱、圖片及種類的 JSON 資料檔，極大縮短頁面的載入時間。
外觀與互動設計
- 使用瀏覽器內建支援的色彩 - HTML Colors 作為色票參考
- 使用思源黑體 (Noto Sans TC) 作為網站字體
- 加入皮卡丘跑步動畫作為網頁載入完成前的過場
- 透過載入目標數和當前資料量做計算、結合樣式綁定 (Style Binding) 方法，製作出頁面上方跑動的進度條
- 參考 W3Schools 介紹使用 CSS 製作的提示框 (Tooltip)，做出滑鼠碰觸圖鑑元素就會在序號前顯示寶可夢名稱的方便設計
- 資訊卡中的寶可夢圖片加上白色陰影 (CSS drop-shadow())，達成如同發出光輝般的效果
- 設計在大尺寸螢幕上，元素及字體大小能夠自適應縮放的響應式設計
開發紀錄
- 透過 Node.js 將 PokeAPI 905 份寶可夢資料轉換成一份 JSON API，將網頁載入時間縮短為 1 秒，並實現中英語言切換
- 使用體積小的 Vue 代替方案 - Petite Vue 作為開發方式
- 使用寶可夢的 types 資料，製作出可透過點擊切換不同寶可夢種類的標籤
- 開發過程中發現在切換寶可夢分類 (filter) 時，相較於建立 computed 的資料再使用 Vue 語法 v-for 產出元素，透過對元素綁定 HTML 屬性 hidden 或是改變其 CSS 屬性 display 的作法，有更好的狀態更新效能
- 分別針對資訊卡中的寶可夢中、英文名字，以平均字數為基準，自動調整字體大小
- 將整體寶可夢圖片從 118.2MB 壓縮到 32.8MB，進一步加快網頁載入
為什麼會看到廣告
留言0
查看全部
本篇參與的主題活動
歡迎來到方格新手村第一站！參加方格主題活動，發表任何一篇貼文、文章加上指定標籤， 就有機會得到免費禮券，或是讓 vocus 把你的創作推薦給全站會員！ 現在就完成新手村任務，讓更多人認識你！
本文探討作家在創作推理小說過程中所需具備的基本素養與技巧，透過《推理寫作祕笈》的案例分析，文章提供了目前推理小說的寫作要領，以及作家在面對創作困境時所需的實用建議，幫助讀者在字海中找到喘息之地，邁向成功的小說創作。文章同時提供相關的學習資源及創作交流平臺，鼓勵更多人參與推理小說的創作。
時間是2123年，那是一個下著雨的夜晚，冷風一波接著一波颳起，碩大的雨滴一滴滴地落在金屬上。多拉格睜開了雙眼，眼前是一扇窗戶，窗外一片黑暗，他發現自己在一個狹窄的空間裡，那是一個冷凍艙……
前言
宇希333年
現在是第14號地球世界的火曆2309年。
病毒「無」專門吞噬「感情」、「感覺」、「愛」、「希望」，大部份被感染的人都無法呈現臉部表情，人類也越來越冷漠。
幸虧第14號地球的科技相當發達，腦細胞可以連線面具讓人可以戴著精緻的面具過活，戴面具的人只要用想的就可以呈現臉部的表情。
歡迎來到方格新手村第一站！參加方格主題活動，發表任何一篇貼文、文章加上指定標籤， 就有機會得到免費禮券，或是讓 vocus 把你的創作推薦給全站會員！ 現在就完成新手村任務，讓更多人認識你！
本文探討作家在創作推理小說過程中所需具備的基本素養與技巧，透過《推理寫作祕笈》的案例分析，文章提供了目前推理小說的寫作要領，以及作家在面對創作困境時所需的實用建議，幫助讀者在字海中找到喘息之地，邁向成功的小說創作。文章同時提供相關的學習資源及創作交流平臺，鼓勵更多人參與推理小說的創作。
時間是2123年，那是一個下著雨的夜晚，冷風一波接著一波颳起，碩大的雨滴一滴滴地落在金屬上。多拉格睜開了雙眼，眼前是一扇窗戶，窗外一片黑暗，他發現自己在一個狹窄的空間裡，那是一個冷凍艙……
前言
宇希333年
現在是第14號地球世界的火曆2309年。
病毒「無」專門吞噬「感情」、「感覺」、「愛」、「希望」，大部份被感染的人都無法呈現臉部表情，人類也越來越冷漠。
幸虧第14號地球的科技相當發達，腦細胞可以連線面具讓人可以戴著精緻的面具過活，戴面具的人只要用想的就可以呈現臉部的表情。
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
趁著《名偵探皮卡丘》還沒到貨的空檔，來聊聊寶可夢前一款、今年七月發行的手機遊戲《Pokemon Sleep》。相比於本傳和Switch遊戲，或是同為手遊前輩但至今各地群組都還暗暗活躍的Pokemon Go，甚至少了小智被罵爆的動畫，Pokemon Sleep的討論度似乎都還更低得多。
親愛的訓練家們，
是時候突破極限了：訓練家們最近發現了最新的XXS和XXL體型寶可夢！
土狼犬、大狼犬和大嘴娃等寶可夢皆出現了這些新體型的個體，你的寶可夢圖鑑也將開始記錄捕捉到的新體型寶可夢。真不知道未來還有沒有更多不同的體型會出現呢！
AR技術領導者暨遊戲開發商Niantic今日宣布，旗下遊戲「Pokémon GO」將於台灣時間3月1日10:00 推出第7世代，發布以熱帶地區阿羅拉為靈感的新賽季。並公布一段簡短的預告影片。
蛙蛙畫的精美圖
前言
Hi ，大家好我是茶悅，這次為大家帶來我在亞洲杯台灣獲得冠軍的隊伍戰報與參賽心得，在５月疫情爆發後，官方宣布比賽前已經好久沒有官方消息了，在無盡的８月後，亞洲終於有像國外的PlayersCup可以打啦，但系列９已經荒廢的我實在沒甚麼信心，直到我在日本liberty曝隊網找到了
前言
Hi ，大家好我是茶悅，這次為大家帶來我在亞洲杯台灣獲得冠軍的隊伍戰報與參賽心得，在５月疫情爆發後，官方宣布比賽前已經好久沒有官方消息了，在無盡的８月後，亞洲終於有像國外的PlayersCup可以打啦，但系列９已經荒廢的我實在沒甚麼信心，直到我在日本liberty曝隊網找到了這個隊伍:
原隊
歸去，也無風雨也無晴。
以上是我忘了給我隊伍補充上的名字.源自蘇軾‧〈定風波〉.為甚麼是這個名字呢?
因為這是一個有著強力水系輸出手卻帶不來雨天.打著龜花隊的名字卻稀少開出晴天的隊伍.而在尾盤時的寧靜正是這隊的縮影
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
趁著《名偵探皮卡丘》還沒到貨的空檔，來聊聊寶可夢前一款、今年七月發行的手機遊戲《Pokemon Sleep》。相比於本傳和Switch遊戲，或是同為手遊前輩但至今各地群組都還暗暗活躍的Pokemon Go，甚至少了小智被罵爆的動畫，Pokemon Sleep的討論度似乎都還更低得多。
親愛的訓練家們，
是時候突破極限了：訓練家們最近發現了最新的XXS和XXL體型寶可夢！
土狼犬、大狼犬和大嘴娃等寶可夢皆出現了這些新體型的個體，你的寶可夢圖鑑也將開始記錄捕捉到的新體型寶可夢。真不知道未來還有沒有更多不同的體型會出現呢！
AR技術領導者暨遊戲開發商Niantic今日宣布，旗下遊戲「Pokémon GO」將於台灣時間3月1日10:00 推出第7世代，發布以熱帶地區阿羅拉為靈感的新賽季。並公布一段簡短的預告影片。
蛙蛙畫的精美圖
前言
Hi ，大家好我是茶悅，這次為大家帶來我在亞洲杯台灣獲得冠軍的隊伍戰報與參賽心得，在５月疫情爆發後，官方宣布比賽前已經好久沒有官方消息了，在無盡的８月後，亞洲終於有像國外的PlayersCup可以打啦，但系列９已經荒廢的我實在沒甚麼信心，直到我在日本liberty曝隊網找到了
前言
Hi ，大家好我是茶悅，這次為大家帶來我在亞洲杯台灣獲得冠軍的隊伍戰報與參賽心得，在５月疫情爆發後，官方宣布比賽前已經好久沒有官方消息了，在無盡的８月後，亞洲終於有像國外的PlayersCup可以打啦，但系列９已經荒廢的我實在沒甚麼信心，直到我在日本liberty曝隊網找到了這個隊伍:
原隊
歸去，也無風雨也無晴。
以上是我忘了給我隊伍補充上的名字.源自蘇軾‧〈定風波〉.為甚麼是這個名字呢?
因為這是一個有著強力水系輸出手卻帶不來雨天.打著龜花隊的名字卻稀少開出晴天的隊伍.而在尾盤時的寧靜正是這隊的縮影