2024 iThome 鐵人賽

DAY 1

做怎樣的一個 Side Project

前言「讓我們的想像力帶領我們穿越時空，回到恐龍盛行的年代。在那片遼闊的草原上，一隻壯觀的阿根廷龍正緩緩行走。科學家的研究告訴我們，這種恐龍的體重高達77公噸，...

0 Like 2 留言 511 瀏覽

DAY 2

執行專案輔助工具

Side Project 需要什麼輔助工具與概念對於前端工程師而言，大多已擁有一套熟悉的編輯器和版本管理工具。但在工作之餘投入創作 side project...

1 Like 0 留言 500 瀏覽

DAY 3

網站參考與需求分析

「時間線任務」這個 side project 是受到紐約時報的「Flashback: Your Weekly History Quiz, August 13,...

0 Like 0 留言 307 瀏覽

DAY 4

Wireframe 製作

一個全面的設計流程：從初步設計到最終階段草稿和低保真（Low-Fidelity）線框圖：初步構思並繪製基本界面。回顧和反饋：收集意見並進行調整。高...

0 Like 0 留言 289 瀏覽

DAY 5

建立時間線任務網站專案

專案使用到的工具整理終端工具（Terminal）: Mac 系統下的內建工具 Cygwin: Windows 系統下的 Unix 模擬工具 Node....

1 Like 0 留言 268 瀏覽

DAY 6

開發工具與相依套件安裝

開發工具和編碼習慣在開始專案開發的過程中，我們會使用各種相依工具來輔助開發。這些工具有的是運行時必須的，例如 Vue，而有的則是僅在開發過程中使用，例如 ES...

0 Like 0 留言 511 瀏覽

DAY 7

寫可維護的程式

可維護的程式碼原則我們有很多的方法可以用程式實現我們的功能，但作為一個工程師是否寫出可維護的程式碼在於自己，卻往往對於團隊有很大的影響。好的程式碼不會有績效，...

0 Like 0 留言 303 瀏覽

DAY 8

新增測試策略與實作

說明理想的狀態是在開始程式開發之前，首先明確定義專案需求並撰寫相對應的測試案例。接著，我們採用「紅燈/綠燈（Red/Green）」的測試驅動開發（TDD）策略...

1 Like 0 留言 310 瀏覽

DAY 9

切版（將 Layout 和 PSD 轉成 HTML）

切版主要是將 Wireframe 轉換為 HTML 版面，而功能和色調在沒有 style guideline 的情況下我們參考原始網站。總共需要製作三個頁面：遊...

0 Like 0 留言 279 瀏覽

DAY 10

切版 RWD 處理

本項目為一款小型遊戲的時間線任務設計，總共只包含八個問題，要針對不同螢幕尺寸進行適配，為了確保在大螢幕（如電腦）上的視覺效果，我們選擇將遊戲界面限制在手機尺寸，...

1 Like 0 留言 245 瀏覽

第十五屆佳作

系列文章