前述 今天用前面做過的小畫家相似功能，來完成一個可以在文件上面簽名的功能～當然也會有新的東西可以玩。 思路 我們將文件簽名分成三個步驟 <div cla...
嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項，其中一項就是...
tags: 2021鐵人賽 React 上一篇刻好版型後，這篇就可以來串接API拉，目標當然就是讓使用者輸入股票代號後，能夠跑出最新收盤價格、漲跌幅度、漲跌幅度...
測試會用到的工具是 React Testing Library，後續對元件有改動時也可以使用 Snapshot testing。 基本上測試撰寫的 SOP 就...
挑戰最後一日的題目真的讓我想了很久，倒底該放什麼元件來壓軸才好？要寫一個綜合演練，把前面的元件都拿出來大亂鬥一番，搞出一個看起來很厲害的應用嗎？還是說我應該老老...
提到 Web 前端的效能優化，有許多的技巧是聚焦在如何減少頁面的「載入時間 Loading Time」，例如 Code Splitting 透過減少需要載入的...
Pagination 今天要實作的只是一個最基本的 Pagination，而我個人覺得在處理換頁時維持固定長度的邏輯挺有趣的，所以特別在最後一篇實作拿出來講...
NodeJS的學習終於接近尾聲，接下來就是要進行實作，為了熟悉剛學完的工具，預計用最後幾天的時間完成一個包含新增、修改、刪除的待辦清單應用程式，以MERN St...
嗨嗨！今天來講一下怎麼設定網站的 favicon！還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔！還不知道什麼是 favicon...
元件介紹 Toast 可以提供使用者操作的反饋訊息。包含一般資訊、操作成功、操作失敗、警告訊息等。預設為在頂部置中顯示並自動消失，是一種不打斷用戶操作的輕量級提...
tags: 2021鐵人賽 React 一般來說刻板前應該會需要畫個wireframe會比較清楚一些，不過時間有限，就在紙上畫一畫就先開始寫code吧，先達成功...
這個暑假就像開頭第一篇說的，應該是大部分人度過最長的一個暑假，我原本也沒什麼目標，打算好好休養生息，但還好我的朋友們找我做了這麼一個Project，讓我學到了很...
想先看 Code 或是 Demo 的由此去 Github Repo： ithelp-ui-demo Live Demo：** Tabs** Tabs 這邊整個...
在 Day24 介紹 Web 前端渲染架構時，有提到 Stale While Revalidate 這個快取的應用策略，今天將更詳細介紹這個策略，並看看怎麼運...
今天的內容一樣以React為主，建立完前端應用程式之後，接著就是將前後端的應用程式連接。 首先在React應用程式專案中的package.json加上伺服器應...
連假結束了Ｑ 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark...
元件介紹 Modal 元件為彈出相關元件提供了重要的基礎建設，如 Dialog、Popover、Drawer...等等。 參考設計 & 屬性分析 各家元...
這篇終於要來開始做台股技術面的功能了，對於善於技術分析的投資人來說，看K線是非常基本的事情，因為從技術分析的角度來看，K線可以分析出很多其他面向看不到的學問喔~...
想先看 Code 或是 Demo 的由此去 Github Repo： ithelp-ui-demo/Notifier Live Demo：** Notific...
在開發網站系統時，使用前端框架可以讓資料更容易在介面中被使用、也可以建立模組化的介面，可以更有效的提升開發效率，而目前最常被使用的三大前端框架就是React、A...
元件介紹 Progress circle 跟上一篇 Progress bar 一樣是能夠展示當前進度的元件。只是在外觀上面以圓形替代長條形，好處是在寬度不夠的排...
嗨大家！像昨天說的，今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能～ 還沒看昨天的文章的大家，可以點這裡，今天的文章...
tags: 2021鐵人賽 React 安裝styled-components套件 在專案資料夾內一行安裝就完成了。 npm install --save st...
基本上 CDN 是現在的 Web 應用不可或缺的技術，當對被 CDN 加速過的域名發出請求時，CDN 會自動將 request 導到地理位置離使用者較近或是流...
在 Input 需要預處理的主要就是 React 的 control & unControl，於是也在這簡介一下兩者的差別： Uncontrolled...
嗨大家！今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係，才發現在 client-side 呼叫會遇到 CORS 問題。這...
元件介紹 Progress bar 是能夠展示當前進度的進度條元件。當一個操作需要顯示目前百分比，或是需要較長時間等待運行的時候，能夠使用這樣的元件提示用戶目前...
tags: 2021鐵人賽 React 因為下一篇要讓導覽列在手機版網頁呈現漢堡選單的樣式，在參考其他工程師寫的網頁的時候，發現有一位是用styled-comp...
今天開始正式進入系列文的最後一個章節 - Framework, Architecture and Memory Management，探索前端架構與底層實作對...
之前有講到非 input-like 的表單情境也需要處理，這時候就是 FormControl 出場的時候了，但其實也不代表 Input-like 的元件不能用...
雪莉
Jade
Sean Liu
parkerhiphop027
Taiming
莫力全 Kyle Mo
chwk
Cooksuhr
iThome鐵人賽
看影片追技術