實作電影院座位選位系統
之前碰到一道有趣的前端 UI 題,發現需要對於前端有較為全面的認知才有辦法解出來,並且也可以針對感興趣的領域延伸提出更更多問題,於是特地紀錄一下我的思考解題過程。身為一名前端工程師,你會怎麼實作上圖的電影院座位選位系統?
之前碰到一道有趣的前端 UI 題,發現需要對於前端有較為全面的認知才有辦法解出來,並且也可以針對感興趣的領域延伸提出更更多問題,於是特地紀錄一下我的思考解題過程。身為一名前端工程師,你會怎麼實作上圖的電影院座位選位系統?
近期製作到內容大綱(Table of Contents)相關的功能,發現是一個很適合使用 Intersection Observer 的案例,透過監聽特定元素來自動更新目錄的狀態。在早期可能會需要透過 getBoundingClientRect 之類的方法來計算元素有沒有離開視窗,現在這樣的需求就變得更加容易實現。
實際網頁很少遇到特殊的視覺會需要動用到 CSS Grid 的情況,而我近期在製作一些比較特殊視覺的網頁布局,事後感覺特別適合作為一個 CSS Grid 的啟發教材,於是寫下了本篇文章幫助透過真實世界案例更深刻了解 CSS Grid。
這次我透過一步一步拆解解題路徑來描述如何解題。從基本解到分離資料與邏輯、保持 immutable 以及邊緣案例還有文件編寫都有涵蓋。打印出 1 到 100 的數字、假如數字是 3 的倍數,則打印 Fizz、假如數字是 5 的倍數,則打印 Buzz、假如數字是 3 和 5 的公倍數,則打印 FizzBuzz。
Astro 作為一個靜態內容為主的生產器非常適合用於打造靜態網頁,這次我將用自己的作品集為案例教你打造一個實際的靜態網站,透過以自己的作品集網站為範例,借助這個機會來展示這個框架好用與強大的地方。只需要有基礎的 HTML 與 CSS 知識就能跟著這篇文章創造一個屬於自己的作品集。
記錄一下我是如何製作自己的前端作品集的,隨著從大學畢業,很快也要步入社會尋找正職工作,因此急需一個可以展示自己作品的平台,既然身為前端開發者,何不動手製作一個作品集網站呢?製作自己的作品集是必經歷的體驗,也是一趟很有趣的體驗。
搜尋列是普遍存儲資料於 HTML 中最常用的方式之一,讓我們學會如何使用它。本篇文章將會練習從無到有包含介面製作一個搜尋框,可以輸入結果並比對現有資料顯示關聯的內容,是一個非常適合 JavaScript 新手的一道實用練習題目。
計數器是入門各大框架基本會見到的習題,可以說是任何 App 最低限度的功能展示。這次使用原生的 JavaScript 來重現該題目,並且一步一步的思考並改善結果,本篇文章將會練習製作一個具備加、減、重製功能的 JavaScript 計數器。
防抖與節流是前端效能主題中必定會出現的模式,對用戶的輸入進行適當的防抖與節流處理,除了有助於提升使用者體驗之外,對開發者來說也節省掉許多潛在的資源浪費,透過實際案例還有動畫圖片一起來了解防抖與節流如何幫助我們提升程式效率。
代辦事項是非常常見的習題,其中需求含括了增、刪、讀、改資料,充分的模擬到未來在操縱資料時會碰上的各種情境與問題。可以說各式各樣的軟體都是一種客製化的代辦事項,透過製作代辦事項足以熟悉編寫應用的方方面面,跟著步驟寫一次來練習基本的應用撰寫。