iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 376 瀏覽

技術【前端 HTML/JSX】在Input框內部加上Icon？除了使用Bootstrap、Semantic或Material-UI之外你還可以這麼做

相信像下列的輸入框需求，在前端開發的時候很容易遇到菜鳥前端的第一直覺大概就會想要這樣寫... 把icon的部分直接放在 <input>裡面 &l...

一宵三筵 ‧ 2021-03-08

0 Like 0 留言 293 瀏覽

技術 React源碼 commit階段詳解

點擊進入React源碼調試倉庫。當render階段完成後，意味著在內存中構建的workInProgress樹所有更新工作已經完成，這包括樹中fiber節點的更...

nero ‧ 2021-02-19

0 Like 0 留言 292 瀏覽

技術梳理useEffect和useLayoutEffect的原理與區別

點擊進入React源碼調試倉庫。 React在構建用戶界面整體遵循函數式的編程理念，即固定的輸入有固定的輸出，尤其是在推出函數式組件之後，更加強化了組件純函數的...

nero ‧ 2021-02-16

0 Like 0 留言 503 瀏覽

技術 React hooks 的基礎概念：hooks鏈表

當函數組件進入render階段時，會被renderWithHooks函數處理。函數組件作為壹個函數，它的渲染其實就是函數調用，而函數組件又會調用React提供的...

nero ‧ 2021-02-14

0 Like 0 留言 354 瀏覽

技術 React和DOM的那些事-節點更新

點擊進入React源碼調試倉庫。 React的更新最終要落實到頁面上，所以本文主要講解DOM節點（HostComponent）和文本節點(HostText)的更...

nero ‧ 2021-02-13

0 Like 0 留言 342 瀏覽

技術 React和DOM的那些事-節點刪除算法

點擊進入React源碼調試倉庫。本篇是詳細解讀React DOM操作的第壹篇文章，文章所講的內容發生在commit階段。 Fiber架構使得React需要維護...

nero ‧ 2021-02-12

0 Like 0 留言 326 瀏覽

技術 React和DOM的那些事-節點新增算法

點擊進入React源碼調試倉庫。本篇是詳細解讀React DOM操作的第二篇文章，文章所講的內容發生在commit階段。插入DOM節點操作的是fiber節點...

nero ‧ 2021-02-11

0 Like 0 留言 296 瀏覽

技術完全理解React的completeWork以及错误边界

點擊進入React源碼調試倉庫。概述每個fiber節點在更新時都會經歷兩個階段：beginWork和completeWork。在Diff之後（詳見深入理解R...

nero ‧ 2021-02-10

0 Like 0 留言 309 瀏覽

技術深入理解React Diff算法

點擊進入React源碼調試倉庫。上壹篇React狀態計算解密之後，我們來分析壹下Diff的過程。 fiber上的updateQueue經過React的壹番計...

nero ‧ 2021-02-09

1 Like 1 留言 758 瀏覽

技術 [經驗分享] 從開發轉QA工程師？為何想要轉職？開發與QA的差異？

大家好！本篇將會以我轉職的心路歷程作為主軸，我為什麼轉職成QA？當開發與當QA差很多嗎？當QA該注意些什麼？等等問題，我皆會以我個人經驗為主去探討，若有其他想法...

kevin ‧ 2021-02-07

0 Like 0 留言 567 瀏覽

技術 ReactFiber節點的更新入口：beginWork

React的更新任務主要是調用壹個叫做workLoop的工作循環去構建workInProgress樹，構建過程分為兩個階段：向下遍歷和向上回溯，向下和向上的過程...

nero ‧ 2021-01-23

1 Like 0 留言 740 瀏覽

技術 React的秘密-原理解析第壹篇：核心概念

作為壹個構建用戶界面的庫，React的核心始終圍繞著更新這壹個重要的目標，將更新和極致的用戶體驗結合起來是React團隊壹直在努力的事情。為什麽React可以將...

nero ‧ 2021-01-22

0 Like 0 留言 447 瀏覽

技術前端工程學習日記第４天

#使用 margin（向外）、padding（向內）來推擠距離 css: .box{border:10px solid #000; padding-left:...

全職魔法師 ‧ 2020-11-05

1 Like 0 留言 256 瀏覽

鐵人賽影片教學 DAY 26

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列第 26 篇

技術 Day26. 實作簡易 Svelte(1)：實作 HTML 解析器 | 30 天從 0 到 1 學 Svelte

影片內容昨天我們講解了 HTML 解析的原理，並探討了使用抽象語法樹的目的，有限狀態機等等，今天我們會透過昨天所學到的內容來實作一個 HTML 的解析器，...

愷開 ‧ 2020-10-05

1 Like 0 留言 121 瀏覽

鐵人賽影片教學 DAY 25

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列第 25 篇

技術 Day25. 如何解析 HTML 語法 | 30 天從 0 到 1 學 Svelte

影片內容講解解析 HTML 的過程以及有限狀態機。 Svelte 為了使用客製化的語法，所以在編譯時期會先解析一次 svelte 元件，其中 HTML...

愷開 ‧ 2020-10-04

1 Like 0 留言 165 瀏覽

鐵人賽影片教學 DAY 24

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列第 24 篇

技術 Day24. Svelte 如何編譯程式碼（2）| 30 天從 0 到 1 學 Svelte

影片內容昨天我們提到 Svelte 會先將程式轉換成抽象語法樹（AST），再開始做編譯，今天我們會來看看 Svelte 生成的程式碼是如何被執行的。 ◼︎...

愷開 ‧ 2020-10-03

1 Like 0 留言 240 瀏覽

鐵人賽影片教學 DAY 23

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列第 23 篇

技術 Day23. Svelte 如何編譯程式碼 | 30 天從 0 到 1 學 Svelte

影片內容介紹 Svelte 當中如何編譯程式碼（簡介）簡報連結：https://speakerdeck.com/kjj6198/svelte-ru-he...

愷開 ‧ 2020-10-02

1 Like 0 留言 234 瀏覽

鐵人賽影片教學 DAY 21

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列第 21 篇

技術 Day21. Svelte 搭配 d3 做資料視覺化：長條圖 | 30 天從 0 到 1 學 Svelte

影片內容透過 Svelte 搭配 d3.js 做資料視覺化很方便，可以很容易跟 DOM 節點互動之外，搭配 reactivity 的語法也很容易執行 d3...

愷開 ‧ 2020-09-30

1 Like 0 留言 335 瀏覽

鐵人賽 Modern Web DAY 30

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列第 30 篇

技術【D30 - 期待與各位再次見面】前端學到暈島隆重閉幕!

恭喜各位如果是從之前一步一步走來的人~ 那你已經擁有了基本的前端工程師必備技能!! 前言我們在從一開始的那個地圖來看起，驗收一下我們這一路走來到底走過哪裡...

ryanyen2 ‧ 2020-09-30

0 Like 0 留言 1362 瀏覽

鐵人賽自我挑戰組 DAY 22

不前不後，不上不下，一個曾經交大資工書卷的軟體工程師成長之路系列第 22 篇

技術美好的幻覺：Frontend 前端

先分享下 Frontend 的發音 https://www.youtube.com/watch?v=ZdtpKFbhTtk 記得是 Frontend 不是 Fr...

Mike Fang ‧ 2020-09-30

1 Like 0 留言 190 瀏覽

鐵人賽影片教學 DAY 20

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列第 20 篇

技術 Day20. UI 實戰篇：Tooltip | 30 天從 0 到 1 學 Svelte

影片內容用 Svelte 實作 Tooltip UI 相關連結程式碼範例：https://svelte.dev/repl/58058516ea844c...

愷開 ‧ 2020-09-29

0 Like 0 留言 359 瀏覽

鐵人賽 Modern Web DAY 29

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列第 29 篇

技術【D29 - 用Vue實作網頁】佈署你的專案，分享給朋友你的第一個網站!!

今天是距離完賽倒數一天了，我們也準備要把我們之前三十天努力的心血deploy到網路上!! 前言我們每當做了一個網站，如果你希望大家可以使用到你的網站的話，...

ryanyen2 ‧ 2020-09-29

0 Like 0 留言 217 瀏覽

鐵人賽 Modern Web DAY 28

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列第 28 篇

技術【D28 - 用Vue實作網頁】postman是哪個男人?要怎麼用他(羞)!?

postman 不是人而是一個software，專門拿來測試API~ 我曾經在這裡【D19 - 用Vue實作網頁】請GET我然後POST我出去吧!講到API的...

ryanyen2 ‧ 2020-09-28

1 Like 0 留言 213 瀏覽

鐵人賽影片教學 DAY 19

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列第 19 篇

技術 Day19. UI 實戰篇：通知佇列 | 30 天從 0 到 1 學 Svelte

影片內容用 Svelte 實作通知佇列 UI 並且在跨元件之間溝通 ◼︎ 相關連結：・Svelte 官網 https://svelte.dev ・程式碼...

愷開 ‧ 2020-09-28

1 Like 0 留言 215 瀏覽

鐵人賽影片教學 DAY 18

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列第 18 篇

技術 Day18. UI 實戰篇：圖片檢視器 | 30 天從 0 到 1 學 Svelte

影片內容本次程式碼連結：https://svelte.dev/repl/df5cb8d11d214af881d109b0c7c10b51?version...

愷開 ‧ 2020-09-27

0 Like 1 留言 210 瀏覽

技術 [鼠年全馬鐵人挑戰] Week29 - JavaScript 練習題- 邏輯運算子

美式餐廳的櫃檯收銀員，他的名字叫做小杰，雖然他不懂為什麼老闆不給他買一台收銀機，但還是繼續打開 Chrome console 幫店員們結帳。但別忘了老闆總是有...

a841722 ‧ 2020-09-27

2 Like 0 留言 294 瀏覽

鐵人賽 Modern Web DAY 25

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列第 25 篇

技術【D25 - Vuex】給你一個方便的儲藏室!!

Vuex是一個非常方便且非常好用的的開發vue工具，他有點類似於react的redux~ 今天簡短介紹一下Vuex，明天就可以來實踐今天講到的東西囉! 甚麼...

ryanyen2 ‧ 2020-09-25

0 Like 0 留言 388 瀏覽

鐵人賽 Modern Web DAY 12

前端工程師一起來種一棵後端技能樹吧！系列第 12 篇

技術 [Day 12] 沒了解過 Cache，就別說網站性能沒救了！ - (1)

現今的網頁架構相較於過往偏向靜態的形式已經變得複雜許多，大部分資料都要靠動態抓取，而抓取資料的過程就會產生許多 Request 請求去取得 Response ，...

莫力全 Kyle Mo ‧ 2020-09-25 ‧團隊不要搶我隊友

1 Like 0 留言 475 瀏覽

鐵人賽 Modern Web DAY 24

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列第 24 篇

技術【D24 - 用Vue實作網頁】一天搞定登入+註冊+登出

昨天我們提到了Firebase 的Authentication~ 今天就會純coding，帶大家走過一遍完整的登入到登出流程! 前言今天會比較多codin...

ryanyen2 ‧ 2020-09-24

0 Like 0 留言 856 瀏覽

鐵人賽 Modern Web DAY 11

前端工程師一起來種一棵後端技能樹吧！系列第 11 篇

技術 [Day 11] 用 Node.js 建立一個簡單的 Http Proxy

在上一篇文章中我們了解了 proxy pattern 的概念，也明白現今軟體架構有非常多適合應用這個 pattern 的 use cases。今天則想聚焦在 h...

莫力全 Kyle Mo ‧ 2020-09-24 ‧團隊不要搶我隊友

技術 【前端 HTML/JSX】在Input框內部加上Icon？除了使用Bootstrap、Semantic或Material-UI之外你還可以這麼做