iT邦幫忙

front-end相關文章
共有 423 則文章
鐵人賽 Software Development DAY 23
台南不需要米其林 系列 第 23

技術 Day23 改頭換面,實作前端介面

前言、摘要 昨天已經將一些API 修復,因此今天將會依照著設計圖,調整我們前端的頁面。會使用到初階的Bootstrap和一些Django的模板語言。 概念說明...

鐵人賽 Modern Web DAY 15
React 走出新手村 系列 第 15

技術 React 走出新手村 — 表單進化論

表單處理 這篇文章是我從事教學很常遇到的統整,我有系列專門解釋怎麼一步一步讓自己邁向 pro 的過程,有興趣了解更多的話可以參考這個連結,裡面有所有我所統整的R...

鐵人賽 Modern Web DAY 2

技術 D1 什麼是Node.js與不同的專案環境如何管理

Node.js在當今的前端開發環境中有著自己不小的聲量,Node.js最早於2009年由Ryan Dahl創建,並於同年在Google的Chrome V8 Ja...

鐵人賽 Modern Web DAY 12
React 走出新手村 系列 第 12

技術 React 走出新手村-自製高效 Context Provider

前導 還沒看過上一篇文章的朋友請先回顧喔!接續上一篇的問題,大家有找到合適的解法了嗎?如果沒有讓我們一起來思考除了useState以外還有什麼可以讓我們有效管理...

鐵人賽 Modern Web DAY 11
React 走出新手村 系列 第 11

技術 React 走出新手村-深入 Context Provider

講古 在早期還沒有Context Provider的時候你每一層都需要靠 props 來傳遞資料,才能達到資料共享。 然後... 於是 Context / P...

鐵人賽 自我挑戰組 DAY 18

技術 Day-18 專案演練 - 重構程式碼

Day-18 專案演練 - 重構程式碼 雖然並沒有影響專案的功能、畫面,但隨著 TodoPage 的篇幅越來越長,我感覺在撰寫程式的過程有點不太舒服,所以我打...

鐵人賽 自我挑戰組 DAY 23

技術 Day-23 專案演練 - 狀態管理員 redux

Day-23 專案演練 - 狀態管理員 redux 近半年前的我剛碰到 redux 的時候,卡關卡很久,看 RTK 的官方教學看不懂,就在網上找到了原作者的教...

鐵人賽 Modern Web DAY 16
React 走出新手村 系列 第 16

技術 React 走出新手村 — 樣式的選擇

選擇障礙 這個話題在 React 生態系裡面永遠討論不完,這次想分享我自己使用上的見解,別看我都在講些hook function的使用,css 我也是略懂略懂,...

鐵人賽 自我挑戰組 DAY 25

技術 Day-27 專案演練 - 寫在最後

Day-27 專案演練 - 寫在最後 專案分享的尾聲,篇幅有限,還有很多想做的功能還沒完成,做個這 20 天來邊做邊寫的總結,在鐵人賽結束之後,我會繼續把之前說...

鐵人賽 Modern Web DAY 13
React 走出新手村 系列 第 13

技術 React 走出新手村-重新整理組件

換個方向 在前面系列的文章,已經幫大家複習並深入了解幾個常用的 hook,接下來的章節,是個人開發經驗與結合前端 design pattern 的概念的經驗分享...

鐵人賽 Modern Web DAY 20
React 走出新手村 系列 第 20

技術 React 走出新手村 — 創造合邏輯的組件

Compund Pattern 這次要分享的是 Compound Pattern,如果你常常使用一些 component library 的話,這樣的使用你應該...

鐵人賽 Modern Web DAY 24
React 走出新手村 系列 第 24

技術 React 走出新手村 — Next SSG

關於渲染的構想 pre-rendering 一直是 Next.js 的核心思想,他們將其分為兩種實作方法,一個是 Rendering,也就是一般的渲染概念,另一...

鐵人賽 Modern Web DAY 27
React 走出新手村 系列 第 27

技術 React 走出新手村 — React Server Components

緣起 官方介紹影片連結,我也是做這個主題才知道,原來這個概念已經存在那麼久了,那我們快速講解他的成因吧! 影片整理 目的Dan Abramov 說出了我們前端開...

鐵人賽 Modern Web DAY 9
React 走出新手村 系列 第 9

技術 React 走出新手村-Memo處方簽

Memo解方 今天我們接續前面的問題,大家是否有找到解答了呢? 如果沒有的話,我會在下面提供兩種做法: 第一種,在 memo 裡面用 callback 告訴...

鐵人賽 自我挑戰組 DAY 2

技術 Day-2 本系列 overview

Day-2 本系列 overview 第二天的文會告訴大家,接下來的大綱會是怎麼長的,幫大家做個 overview。順序可能會變動,也可能會新增主題,但並不會...

鐵人賽 自我挑戰組 DAY 25

技術 Day-26 專案演練 - 在 homePage 拿到 list redux

Day-26 專案演練 - 在 homePage 拿到 list redux 今天我們要完成 homePage 的一部分功能,跟 todo 有關的部分,其實鐵人...

鐵人賽 Modern Web DAY 23
React 走出新手村 系列 第 23

技術 React 走出新手村 — 認識Next

動機 主要還是想順著開頭篇章繼續補完 React server component,所以接下來就是會碰到 Next 這個框架,因為他與 React18 合作開發...

鐵人賽 Modern Web DAY 26
React 走出新手村 系列 第 26

技術 React 走出新手村 — Next SSR

SSR Next 的 SSR(Server-Side Rendering)的概念是在每個使用者請求時動態產生頁面內容,而不是提前產生靜態 HTML 頁面,這樣頁...

鐵人賽 Modern Web DAY 29
React 走出新手村 系列 第 29

技術 React 走出新手村 — Rick and Morty練習(I)

實作練習 經過前面的介紹之後,相信大家應該有基礎的理解和認知了,接下來我們一樣透過 Rick and Morty API 來練習如何在 app router 下...

鐵人賽 Modern Web DAY 25
React 走出新手村 系列 第 25

技術 React 走出新手村 — Next ISR

ISR概念 ISR(Incremental Static Regeneration)是 Next.js 在(SSG)的基礎上做出的改進方法,讓頁面在構成之後根據...

鐵人賽 自我挑戰組 DAY 21

技術 Day21 - 日本數位廳的網站太扯了www

原文連結:デジタル庁のサイトやばすぎるwww - Qiita デジタル庁(數位廳 ):因應 COVID-19 疫情,日本政府於 2021 年 9 月 1...

鐵人賽 Modern Web DAY 6

技術 D5 Angular 系統設計思維與層級劃分 - 如何進行前端系統設計

很簡單啦,你就Draw.io畫一畫就好了啦 想必有部分的朋友一定有聽過自家前輩或是社群中的大神這樣子說過。 但愛因斯坦說的才能不足以研究數學轉而決定研究物理,跟...

鐵人賽 Modern Web DAY 18
React 走出新手村 系列 第 18

技術 React 走出新手村 — 在組件裡犯的錯(II)

前言 今天我們接續前一篇的案例,再來講講一些NG的案例,總是會有一些講不聽不想拆 component 的人,在新版本的環境下應該會被強制修改,因為如果不改的話會...

鐵人賽 自我挑戰組 DAY 18

技術 [Day18]TailwindCSS介紹和安裝

前言 在開發前端頁面時我們有多種樣式開發的選擇,可以選擇傳統的CSS寫法、使用UI Framework或Utility-first Framework等,為了達...

鐵人賽 Modern Web DAY 21
React 走出新手村 系列 第 21

技術 React 走出新手村 — 資料夾的分類

分類的哲學 這次要分享的是大家檔案分類的進化過程,分類檔案其實也蠻有學問的,一方面是語意上的邏輯,另一方面是資料夾內的檔案性質問題,一般來說我們會盡量把開發中的...

鐵人賽 Modern Web DAY 17
React 走出新手村 系列 第 17

技術 React 走出新手村 — 在組件裡犯的錯(I)

因果關係 這次來分享 code review 時常常會看到的問題,這些問題常常看不出來有什麼影響,甚至有的人會覺得那是 coding style 的範疇,尤其是...

鐵人賽 Modern Web DAY 14
React 走出新手村 系列 第 14

技術 React 走出新手村-高階組件 (H.O.C.)

概念 在JavaScript中,高階函數(Higher Order Functions)是指可以接受函數作為參數或callback function的函數,簡單...

鐵人賽 Modern Web DAY 22
React 走出新手村 系列 第 22

技術 React 走出新手村 — CSR處方簽

溫馨提示 在之前架構和渲染機制的文章有提到一些渲染機制的基礎,還不熟悉的朋友可以先去閱讀那篇文章。 那麼我們今天就來聊聊如何改善 Client Side Ren...

技術 如何用TypeScript寫出你的第一個Eslint Rule

在公司實習時遇到了一個問題,我們會用i18n來去做網站的中英文轉換,我們並且會寫一份json來管理我們所有的key,但會遇到一個問題就是說如果一個key在英文有...

鐵人賽 Modern Web DAY 30
React 走出新手村 系列 第 30

技術 React 走出新手村 — Rick and Morty練習(II)

Dynamic Routes 我們今天接續的做每個角色自己的頁面,來理解 Dynamic Routes 的實作層面。這部分我們可以先借一下 Next 官方的範例...