相信各位前端人都一定聽過SEO，也都了解要讓SEO分數高才會讓網頁曝光率更高，甚至衍生出 SSR, SSG 這種概念，無非就是希望在 SEO 分數更高不過 SE...
就算已經參加過兩屆了，到了這一天還是會有「天啊，沒想到我終於走到終點了啊！」的感覺。 如果有讀過我的 「Day01 參賽前言」的讀者就會知道，我今年絕對擁有 一...
情境 z-index 可以幫助我們決定當元素重疊的時候，誰在上面，誰在下面。 那我們該如何使用 z-index 呢？首先，因為 z-index 只用於「重疊」的...
Github, Over Engineering 搜尋引擎會透過用戶指定 <title> ，以鐵人賽文章來說就是文章標題，用來產生搜尋結果的標題。...
本文提及以下重點 GatsbyJS介紹 靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...
情境 有時候我們會需要隱藏網頁上的元件。 舉幾個例子來說，例如我們為了使用者體驗的目的，我們希望在某某情境下，某些按鈕不要被使用者誤觸，或是為了畫面上排版的簡潔...
Github, Over Engineering 版型設計 這邊的設計確實讓人頭痛，作為搜尋引擎，你無法肯定用戶送出搜尋之後，回傳的資料集大小。假設有大量的資料...
Github, Over Engineering 設計 輸入欄位是我第一個設計撞牆的部分，光是其中的一個小部件就有很多眉角。 其中也沒有絕對正確的答案，很多都有...
情境 CSS 選擇器的分組，能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。 舉個例子來說，假設我們要讓兩個元素都改變顏色，不用分組選擇器的寫法會是這樣...
情境 響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為...
情境 步驟對話框/步驟條元件，是透過一系列的編號步驟來顯示當前操作的進度。由於某些操作過於複雜繁瑣，或者有順序性，以至於不太適合一次把全部的資訊展示在一個頁面當...
Github, Over Engineering 基礎 對於整個 web 開發生命週期而言，技術棧是極其重要的第一步。選擇適合的技術棧等同建構一個好的骨幹，它讓...
情境 Flexbox 是 CSS3 的盒子模型(box model)，他是我們現代響應式佈局設計上的一個重要利器。其中一個很重要的部分就是他可以幫助我們快速的做...
情境 在網頁內容很豐富的情境中，頁面上放置導覽列是很重要的功能，如下圖： 假設這是一個新聞或論壇網站，左邊 aside 部分就是我們的導覽列，上面有網站的 B...
情境 CSS Grid 是一個格線佈局屬性，跟 Flexbox 的使用非常相似，是由外容器和內元件來組成整個結構。 以下面結構為例： <div class...
情境 談到響應式的佈局排版，除了 Flexbox 之外，還有一個不容忽視的重要屬性，就是 Grid。 以下圖為例，我們透過 Grid 也能夠很輕易的將主要內容以...
本文將以實作To Do List理解Listing State Up包含以下部分 useContext運作模型—圖解 useReducer運作模型—圖解 資料...
本文將以實作To Do List理解Listing State Up包含以下部分 component拆分—圖解 lifting-state說明 重要概念 具體...
情境 Flexbox 的排版已經太方便，以至於網頁上到處都可以發現 Flexbox 的蹤跡。今天我們再來舉一個例子，假設我們需要做一個使用者管理頁面，那我們可能...
情境 Flexbox 是 CSS3 的盒子模型(box model)，顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box)，這個模型讓排版變得容...
本文章將提及以下內容 props傳遞的遇到什麼問題—propDrilling 使用context解決propDrilling Setp1 創建context...
情境 CSS Box Model 盒子模型是 CSS 的基礎。我們可以簡單的理解為， html 元素在 CSS 裡面，都可以視為一個一個的盒子(Box)。 如下...
情境 我們在認識 CSS Box Model 的時候，有一個必須要知道的屬性，就是 box-sizing。 我們來看看這個 Box Model： 我們在初學...
情境 有時候我們的畫面會需要用到如下圖的 Modal 彈窗： 這樣的 Modal 彈窗，他的內容有可能是針對某個地方的額外說明，因此這個說明也有可能會需要詳細...
情境 當我們內容超出頁面的時候，我們會設置滾動條。上個單元中，我們介紹了使用 auto 來設置，避免不需要的時候還出現滾動條： .card { overfl...
情境 今天我們來討論一個卡片容器的例子： 當內容在一般裝況下，我們不會需要滾動條，但是當內容長度過多時，我們會需要滾動調，讓我們在不改變卡片容器大小的狀況下，...
情境 我們先前也提到一些圖片處理的相關防禦性 CSS，例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候，防止圖片的比例變...
情境 圖片和文字通常是相輔相成的存在。現代的網頁上面有許多的圖片，一方面是為了讓畫面看起來更多元、豐富，另一方面，圖片也能夠幫助瀏覽者一眼看出作者想要表達的內容...
情境 圖片在現代網站上面所扮演的角色越來越重要。我記得有一陣子很常看見大圖片當作網站背景的設計： 或是卡片式的排版也總是會需要搭配圖片： 你能看見多遠的未來...
前兩天都在練習匯入照片與剪裁遮色片，今天我們就利用這些方法來完成馬格利特最有名的畫作「人子（戴黑帽的男人）」，大家可能不知道他是誰，但一定看過底下這幅作品。馬格...
Taiming
tainvecs
DannyChen
珊迪
iThome鐵人賽
看影片追技術