kiwi walk

kiwi walk

一隻奇異鳥的散步與探索

Latest

/blogs/ 三個階段並排:改版前是三欄卡片,每張有 logo、名稱和三行標語;中途的貼紙牆每張微微旋轉、角落貼紙膠帶;現在是「走去哪裡?」標題下兩排奇異鳥徽章,每隻鳥在一圈色暈裡,下面只有名稱

Day25 [kiwi-walk] 把 Projects 塞入到 Blogs,但一直對 design 沒有很明確,說不定之後又會翻掉

原本只想把 Projects 收進 /blogs/ 變成一個小方塊、順便讓它有趣一點,結果 /blogs/ 的方塊排版前後改了四版:原本的卡片、貼紙牆、改成三欄放描述,最後在 Claude Design 跑了三輪定稿成「走去哪裡?」的奇異鳥徽章,描述改成 hover 才出現。記錄每一版為什麼被換掉、Projects 怎麼在不搬目錄的情況下出現在 /blogs/、新畫的工程師 kiwi,以及幾個坑:worktree 沒拉主題時 Hugo 照樣 build 出空白頁、hover 不會晃是因為 Windows 關了動畫效果、設計稿在 claude.ai 上讀不到、寫這篇截圖時才發現徽章在寬螢幕排成 5+3、字體跟全站不一樣。

October 9, 2026 · 10 分鐘
左邊是之前:一趟旅行一個 196 KB 的 index.html,外層頁面裡用沙箱 iframe 放行前指南,所有切換都不改網址,瀏覽器的上一頁只有「旅行頁」和「總覽」兩筆。右邊是現在:資料夾裡有 index.html、app.js、app.css 和五個 JSON,上一頁的堆疊依序是總覽、#plan/10-31、#areas/seomyeon、#areas/seomyeon/seomyeon-07,連點三個日期只改網址

Day24 [travel-storage] 按上一頁就回總覽:捨棄「一趟旅行一個 HTML」,改成外殼+JSON+#網址

Day19 定下的「每趟旅行是一個單一的 HTML」,用起來最困擾的是按上一頁就直接回總覽。這篇記錄把它翻掉的過程:為什麼光拆檔案沒用、要每個畫面都有網址;單一外殼加

October 8, 2026 · 12 分鐘
左邊是 Day21 的三種狀態:在頂端時三層固定列全部顯示(外層分頁列、地區/行程推薦/備註、日期列),往下滑全部收起,往上滑一點只露出日期列;右邊是現在:頁首加日期列固定一層,往下滑、往上滑都長一樣

Day23 [travel-storage] 真正進入使用後,才發現新專案的破陋不堪阿

指南升成主角之後,我拿手機實際用了一輪,丟給 Claude 一串體驗問題,第一條就是收回 Day21 做的「往下收、往上露」:「那個好卡,用一層就好了」。記錄這輪 UI 調整的取捨:固定哪一層(Claude 建議只固定頁首,我選頁首加日期列)、「← 總覽」收進選單還是整個拿掉、地區篩選要不要改下拉選單(地區要、類別不要),以及計畫被我退回六次、每次補了什麼。踩到的坑是為了壓低日期列把日期排成一行,最後一顆按鈕超出畫面 13px、整頁可以左右滑;之後「手機不能左右滑」寫成專案的硬規定,改版面前要在四種寬度量過。另外自動部署停住,改成手動部署。

October 7, 2026 · 14 分鐘
旅行頁改版前後對照:左邊是改版前,頂部有外層分頁列「行程紀錄|行前指南」,指南裡又有一列「地區|行程推薦|備註」,再下面是大標題;右邊是改版後,頂部只有一列,左上是兩行的 logo,中間是時間軸樣式的日期,右邊是漢堡選單按鈕

Day22 [travel-storage] 旅途中只開一頁:行前指南升成主角,去過的店寫回指南,頁首告訴我還剩幾天

旅行頁原本以「回來後的紀錄」為主,行前指南只是一個原樣保留的內嵌分頁;實際用下來我只看指南。這次的目標是四件事:少切頁面、打開就是當天的建議行程、旅途中記下去了哪就同步回指南(之後找店先列還沒去的,回來後的整理也直接在上面做)、頁首講清楚還剩幾天。記錄的取捨有:指南的分項攤平成頁首導覽、手機用漢堡選單(下拉選單被我否決),地點總表併進指南、新店只能加在清單尾端,頁首日期併進原本那一列、改成時間軸;另外用地址補座標的腳本把每家店畫進示意圖,太遠或沒座標的用虛線圈。踩到的坑有:合併時一刀切掉一個函式導致整頁空白、記住的舊分頁讓預設頁失效、平滑捲動讓切分項看起來沒反應、手機上一列塞不下日期、只靠店名幾乎查不到座標。

October 6, 2026 · 16 分鐘
手機上行前指南的三種狀態:左邊頂部疊著三層固定列(外層分頁列、地區/行程推薦/備註、選擇日期);中間是往上滑一點時,只有日期列貼在最上面;右邊是往下滑時三層都收起,行程內容填滿整個畫面。行程文字已模糊處理

Day21 [travel-storage] 手機上內容與導覽搶畫面:固定列往下滑就收起;「吃」再分一層,資料由我丟給 AI 統整

手機看行前指南時,頂部疊了三層固定列、約 190px。記錄為什麼選「往下滑收起」而不是壓縮高度、往上滑時再分兩段(滑一點只露出日期列,滑多才全部回來),為此破例改了說好原樣保留的指南樣式,以及讓收起不惱人的幾條規則:靠近頂端一定顯示、小於 8px 不判斷、捲到底的回彈不算往上滑、看不見的列鍵盤也碰不到。另一條線是地點總表的「吃」加上子分類與篩選按鈕:選項太少時 AI 可以上網補,但來源不明是隱憂,所以我改成自己丟資料給 Claude、由它查證與統整。

October 5, 2026 · 14 分鐘
全部文章 →