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

0 Like 0 留言 218 瀏覽

技術面向前端的CDN解決方案! 全框架皆可使用

面向前端的CDN解決方案！前陣子想在Angular的專案下套用CDN機制過去我都是使用 webpack publicPath 來達成但使用Angular...

gzes00201 ‧ 2021-07-28

0 Like 0 留言 3070 瀏覽

徵才均一【資深前端工程師】招募中！

均一平台教育基金會致力於使用科技，讓教育產生規模化的轉型。我們致力於弭平學習資源的落差、改變一體適用的工廠式教學風景，讓每一位孩子都能用自己的方式學習，成為終身...

junyiacademy_小均 ‧ 2021-06-12

1 Like 1 留言 686 瀏覽

技術【網頁設計入門】如何使用 Bootstrap 與 Github Pages 製作個人網站 ?

簡單架設 x 不失質感目錄源起 : 開發者網站開發工具 : Adobe Brackets 基礎的 html 與 css 語法 Bootstrap 前...

Enoxs ‧ 2021-06-11

0 Like 0 留言 547 瀏覽

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

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

一宵三筵 ‧ 2021-03-08

0 Like 0 留言 417 瀏覽

技術 React源碼 commit階段詳解

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

nero ‧ 2021-02-19

0 Like 0 留言 451 瀏覽

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

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

nero ‧ 2021-02-16

0 Like 0 留言 660 瀏覽

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

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

nero ‧ 2021-02-14

0 Like 0 留言 462 瀏覽

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

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

nero ‧ 2021-02-13

0 Like 0 留言 454 瀏覽

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

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

nero ‧ 2021-02-12

0 Like 0 留言 432 瀏覽

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

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

nero ‧ 2021-02-11

0 Like 0 留言 390 瀏覽

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

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

nero ‧ 2021-02-10

0 Like 0 留言 400 瀏覽

技術深入理解React Diff算法

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

nero ‧ 2021-02-09

1 Like 1 留言 1189 瀏覽

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

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

kevin ‧ 2021-02-07

0 Like 0 留言 665 瀏覽

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

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

nero ‧ 2021-01-23

1 Like 0 留言 843 瀏覽

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

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

nero ‧ 2021-01-22

0 Like 0 留言 537 瀏覽

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

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

全職魔法師 ‧ 2020-11-05

1 Like 0 留言 357 瀏覽

鐵人賽影片教學 DAY 26

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

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

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

愷開 ‧ 2020-10-05

1 Like 0 留言 159 瀏覽

鐵人賽影片教學 DAY 25

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

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

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

愷開 ‧ 2020-10-04

1 Like 0 留言 209 瀏覽

鐵人賽影片教學 DAY 24

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

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

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

愷開 ‧ 2020-10-03

1 Like 0 留言 305 瀏覽

鐵人賽影片教學 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 留言 302 瀏覽

鐵人賽影片教學 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 留言 454 瀏覽

鐵人賽 Modern Web DAY 30

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

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

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

ryanyen2 ‧ 2020-09-30

1 Like 0 留言 1698 瀏覽

鐵人賽自我挑戰組 DAY 22

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

技術美好的幻覺：Frontend 前端

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

Mike Fang ‧ 2020-09-30

1 Like 0 留言 232 瀏覽

鐵人賽影片教學 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 留言 528 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

ryanyen2 ‧ 2020-09-29

0 Like 0 留言 368 瀏覽

鐵人賽 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 留言 274 瀏覽

鐵人賽影片教學 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 留言 254 瀏覽

鐵人賽影片教學 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 留言 305 瀏覽

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

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

a841722 ‧ 2020-09-27

2 Like 0 留言 421 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

ryanyen2 ‧ 2020-09-25

技術 面向前端的CDN解決方案! 全框架皆可使用

徵才 均一【資深前端工程師】招募中！

技術 【網頁設計 入門 】如何使用 Bootstrap 與 Github Pages 製作 個人網站 ?

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